/* ===== Fonts ===== */
@font-face { font-family:"Morabba"; src:url("/fonts/Morabba-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Morabba"; src:url("/fonts/Morabba-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Morabba"; src:url("/fonts/Morabba-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Morabba"; src:url("/fonts/Morabba-Black.woff2") format("woff2"); font-weight:900; font-display:swap; }
@font-face { font-family:"Josefin Sans"; src:url("/fonts/JosefinSans-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Josefin Sans"; src:url("/fonts/JosefinSans-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }

/* ===== Design tokens ===== */
:root{
  --copper:#B87333; --copper-700:#9c5f28; --copper-50:#f6ece2;
  --gray-light:#E1DFE6; --gray-100:#f3f2f5; --gray-200:#e8e7ec;
  --bg:#ffffff; --ink:#2a2622; --ink-soft:#6f6a64; --line:#eceaee;
  --radius:18px; --radius-sm:12px;
  --shadow:0 6px 22px rgba(60,45,30,.08);
  --shadow-card:0 8px 28px rgba(60,45,30,.10);
  --maxw:560px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; min-height:100vh; min-height:100dvh;
  background:linear-gradient(180deg,#faf8f6 0%,#f1eef0 100%);
  color:var(--ink); font-family:"Morabba","Josefin Sans",system-ui,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.7;
}
/* mobile-first: full-screen portrait app, internal scroll */
.app{
  width:100%; max-width:560px; margin:0 auto; background:var(--bg);
  display:flex; flex-direction:column;
  height:100vh; height:100dvh; overflow:hidden;
}

/* ===== Top bar ===== */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); flex-shrink:0;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-logo{height:38px; width:auto; display:block;}
.brand-en{font-size:12px; color:var(--ink-soft);}
.home-btn{border:1px solid var(--line); background:#fff; color:var(--ink-soft); width:38px; height:38px; border-radius:50%; font-size:18px; cursor:pointer; transition:.15s;}
.home-btn:hover{color:var(--copper); border-color:var(--copper);}

/* ===== Chat ===== */
.chat{flex:1; padding:18px 16px 8px; overflow-y:auto; display:flex; flex-direction:column;}
.messages{display:flex; flex-direction:column; gap:12px;}
.row{display:flex; width:100%;}
.row.bot{justify-content:flex-start;}
.row.user{justify-content:flex-end;}
.bubble{max-width:84%; padding:11px 15px; border-radius:var(--radius); font-size:15px; white-space:pre-wrap; word-break:break-word; animation:pop .22s ease;}
.row.bot .bubble{background:var(--gray-100); border:1px solid var(--gray-200); border-bottom-right-radius:6px; color:var(--ink);}
.row.user .bubble{background:var(--copper); color:#fff; border-bottom-left-radius:6px;}
@keyframes pop{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* human support agent reply — visually distinct from the automated bot */
.row.support{justify-content:flex-start;}
.support-bubble{max-width:84%; padding:10px 14px; border-radius:var(--radius);
  background:#eef8f1; border:1px solid #cde8d6; border-bottom-right-radius:6px;
  box-shadow:0 2px 10px rgba(31,138,76,.08);}
.support-name{font-size:12px; font-weight:700; color:#1f8a4c; margin-bottom:5px;
  display:flex; align-items:center; gap:5px;}
.support-text{white-space:pre-wrap; word-break:break-word; font-size:15px; color:var(--ink);}

/* typing */
.typing{display:flex; gap:4px; padding:14px 16px;}
.typing span{width:7px; height:7px; background:var(--copper); border-radius:50%; opacity:.5; animation:blink 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.2s;} .typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.25; transform:translateY(0);}30%{opacity:1; transform:translateY(-3px);}}

/* ===== Action area (buttons / chips) ===== */
.action-area{padding:14px 0 12px; display:flex; flex-direction:column; gap:10px;}
.btns{display:flex; flex-wrap:wrap; gap:9px;}
.btn{font-family:inherit; font-size:15px; padding:11px 16px; border-radius:14px; border:1px solid var(--gray-200); background:#fff; color:var(--ink); cursor:pointer; transition:.15s; font-weight:500;}
.btn:hover{border-color:var(--copper); color:var(--copper);}
.btn.primary{background:var(--copper); border-color:var(--copper); color:#fff;}
.btn.primary:hover{background:var(--copper-700); color:#fff;}
.btn.full{width:100%; text-align:center;}

/* note chips grouped */
.chip-group{margin-bottom:6px;}
.chip-group .glabel{font-size:12px; color:var(--ink-soft); margin:0 2px 6px;}
.chip{font-size:14px; padding:8px 13px; border-radius:999px; border:1px solid var(--gray-200); background:#fff; cursor:pointer; transition:.15s; font-family:inherit;}
.chip:hover{border-color:var(--copper);}
.chip.selected{background:var(--copper-50); border-color:var(--copper); color:var(--copper-700); font-weight:700;}
.chip:disabled{opacity:.45; cursor:not-allowed;}
.done-row{margin-top:4px;}

/* ===== Product cards ===== */
.cards{display:flex; flex-direction:column; gap:14px;}
.card{display:flex; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-card); animation:pop .25s ease;}
.card-img{width:84px; height:84px; border-radius:var(--radius-sm); object-fit:cover; background:var(--gray-100); flex-shrink:0;}
.card-body{display:flex; flex-direction:column; gap:5px; flex:1; min-width:0;}
.card-title{font-weight:700; font-size:15px; line-height:1.4;}
.card-en{font-family:"Josefin Sans",sans-serif; font-size:11px; color:var(--ink-soft); letter-spacing:.5px;}
.card-blurb{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}
.card-meta{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; flex-wrap:wrap;}
.price{font-weight:900; color:var(--copper); font-size:15px;}
.size-tag{font-size:12px; background:var(--gray-100); border-radius:8px; padding:2px 8px; color:var(--ink-soft);}
.sale-tag{font-size:11px; background:#e9f7ee; color:#1f8a4c; border-radius:8px; padding:2px 8px;}
.card-actions{display:flex; gap:8px; margin-top:8px;}
.add-cart{flex:1; background:var(--copper); color:#fff; border:none; border-radius:12px; padding:10px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:.15s;}
.add-cart:hover{background:var(--copper-700);}
.view-link{border:1px solid var(--gray-200); border-radius:12px; padding:10px 12px; font-size:13px; color:var(--ink-soft); text-decoration:none;}
.view-link:hover{border-color:var(--copper); color:var(--copper);}

/* ===== Composer ===== */
.composer{display:flex; gap:8px; padding:10px 14px 16px; border-top:1px solid var(--line); background:#fff; flex-shrink:0;}
.composer.hidden{display:none;}
.composer-input{flex:1; font-family:inherit; font-size:15px; padding:12px 15px; border:1px solid var(--gray-200); border-radius:14px; outline:none;}
.composer-input:focus{border-color:var(--copper);}
.composer-send{background:var(--copper); color:#fff; border:none; width:46px; border-radius:14px; font-size:18px; cursor:pointer;}
.composer-send:hover{background:var(--copper-700);}

.hidden{display:none;}

@media (max-width:600px){ body{font-size:15px;} .chat{padding:16px 14px 8px;} }

/* desktop: a wider, floating app window + 2-column product grid.
   Placed at end-of-file so these overrides win over the base rules above. */
@media (min-width:768px){
  body{padding:28px 16px;}
  .app{
    max-width:820px; height:calc(100dvh - 56px); min-height:0;
    border-radius:28px; overflow:hidden;
    border:1px solid var(--line); box-shadow:0 24px 70px rgba(60,45,30,.16);
  }
  .chat{padding:24px 30px 10px;}
  .composer{padding:14px 24px 20px;}
  .bubble{max-width:74%; font-size:15.5px;}
  .cards{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
  .card-img{width:96px; height:96px;}
}