/*
  SCHICGIRL - schicchat.css (extracted from schicchat.html)
  (c) 2024-2026 Schicgirl.
*/
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --cream:#fdf6ee;--warm:#f5e9d8;--rose:#e4b4af;--brown:#3e261c;
      --brown-md:#6b3e2e;--gold:#b07b38;--gold-lt:#d4a55e;--muted:#9a7060;
      --white:#ffffff;--shadow-s:0 4px 24px rgba(62,38,28,.08);
      --shadow-l:0 24px 80px rgba(62,38,28,.18);--radius:20px;--radius-lg:26px;
      --serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;
    }
    html { height:100%; -webkit-text-size-adjust:100%; }
    body {
      height:100%; overflow:hidden; font-family:var(--sans); color:var(--brown);
      background:radial-gradient(ellipse 70% 55% at 8% 0%,#f2ccc7 0%,transparent 55%),
        radial-gradient(ellipse 60% 50% at 92% 100%,#edd9b0 0%,transparent 50%),
        linear-gradient(160deg,#fdf6ee,#f7ede0);
    }
    .shell {
      width:min(1000px,96vw); height:100dvh; margin:0 auto;
      display:flex; flex-direction:column; gap:8px;
      padding:8px 0 env(safe-area-inset-bottom,0px);
    }
    /* INTRO HEADER */
    .intro {
      flex:0 0 auto; background:rgba(255,255,255,.72); backdrop-filter:blur(16px);
      border:1px solid rgba(176,123,56,.2); border-radius:var(--radius-lg);
      padding:10px 20px; text-align:center; box-shadow:var(--shadow-s);
      position:relative;
    }
    .eyebrow { font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:2px; }
    .intro h1 { font-family:var(--serif); font-size:clamp(20px,3vw,34px); font-weight:400; line-height:1.08; margin-bottom:3px; }
    .intro-sub { font-size:12px; color:var(--muted); line-height:1.45; max-width:640px; margin:0 auto; }
    /* LANG SWITCH */
    .lang-switch {
      display:flex; gap:6px; justify-content:center; margin-top:8px; margin-bottom:2px;
    }
    .lang-btn {
      padding:5px 14px; border-radius:999px; border:1.5px solid rgba(176,123,56,.28);
      background:rgba(255,255,255,.8); color:var(--brown-md); font-family:var(--sans);
      font-size:12px; font-weight:600; cursor:pointer; transition:all .18s;
    }
    .lang-btn.active {
      background:var(--brown); color:var(--white); border-color:var(--brown);
    }
    .lang-btn:hover:not(.active) { background:var(--warm); border-color:var(--gold); }
    /* PANEL */
    .panel {
      flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
      background:rgba(255,255,255,.82); backdrop-filter:blur(18px);
      border:1px solid rgba(176,123,56,.18); border-radius:var(--radius-lg);
      box-shadow:var(--shadow-l); overflow:hidden; position:relative;
    }
    .progress-track { flex:0 0 3px; background:rgba(176,123,56,.1); }
    .progress-fill {
      height:100%; width:0%;
      background:linear-gradient(90deg,var(--rose),var(--gold));
      transition:width .5s cubic-bezier(.4,0,.2,1);
    }
    #resetBtn {
      position:absolute; top:10px; right:10px; width:30px; height:30px;
      border-radius:50%; border:1px solid rgba(176,123,56,.25);
      background:rgba(255,255,255,.88); color:var(--muted); font-size:14px;
      cursor:pointer; display:none; align-items:center; justify-content:center;
      transition:all .18s; z-index:20;
    }
    #resetBtn:hover { background:var(--warm); color:var(--brown); }
    #resetBtn.visible { display:flex; }
    .chat-box {
      flex:1 1 auto; min-height:0; overflow-y:auto;
      -webkit-overflow-scrolling:touch; padding:16px 16px 8px; scroll-behavior:smooth;
    }
    .chat-box::-webkit-scrollbar { width:3px; }
    .chat-box::-webkit-scrollbar-thumb { background:rgba(176,123,56,.2); border-radius:3px; }
    .quick-replies {
      flex:0 0 auto; display:flex; flex-wrap:wrap; gap:7px;
      padding:8px 14px 6px; max-height:120px; overflow-y:auto;
      background:rgba(255,255,255,.6); border-top:1px solid rgba(228,180,175,.2);
    }
    .quick-replies:empty { padding:0; border-top:none; max-height:0; }
    .quick-btn {
      padding:8px 14px; border-radius:999px; border:1.5px solid rgba(176,123,56,.32);
      background:rgba(255,255,255,.95); color:var(--brown-md); font-family:var(--sans);
      font-size:12.5px; font-weight:500; cursor:pointer; transition:all .17s;
      white-space:nowrap; flex-shrink:0;
    }
    .quick-btn:hover,.quick-btn:active { background:var(--warm); border-color:var(--gold); color:var(--brown); }
    .chat-form {
      flex:0 0 auto; display:flex; gap:8px; padding:10px 12px 12px;
      border-top:1px solid rgba(228,180,175,.3); background:rgba(253,246,238,.95);
    }
    .chat-form input {
      flex:1; height:44px; border-radius:999px; border:1.5px solid rgba(176,123,56,.28);
      padding:0 18px; font-family:var(--sans); font-size:16px;
      background:var(--white); color:var(--brown); outline:none; transition:border-color .18s;
    }
    .chat-form input:focus { border-color:var(--gold); }
    .chat-form input::placeholder { color:var(--muted); font-size:13.5px; }
    .send-btn {
      flex:0 0 auto; height:44px; padding:0 18px; border-radius:999px; border:none;
      background:var(--brown); color:var(--white); font-family:var(--sans);
      font-size:13px; font-weight:600; cursor:pointer; transition:background .18s; white-space:nowrap;
    }
    .send-btn:hover { background:var(--brown-md); }
    /* MESSAGES */
    .msg {
      max-width:86%; margin-bottom:10px; border-radius:18px; padding:11px 15px;
      font-size:13.5px; line-height:1.58; white-space:pre-line;
      animation:fadeUp .28s cubic-bezier(.34,1.2,.64,1) both;
    }
    @keyframes fadeUp { from{opacity:0;transform:translateY(8px) scale(.97)} to{opacity:1;transform:none} }
    .msg.bot { background:var(--white); border:1px solid rgba(228,180,175,.4); border-bottom-left-radius:5px; }
    .msg.user { background:var(--brown); color:var(--white); margin-left:auto; border-bottom-right-radius:5px; }
    .msg.result { background:linear-gradient(145deg,#fffaf3,#fff8ee); border:1px solid rgba(176,123,56,.3); max-width:100%; font-size:13px; }
    .msg.html-msg { background:transparent; border:none; padding:0; max-width:100%; }
    .typing {
      display:inline-flex; align-items:center; gap:5px; padding:11px 15px;
      background:var(--white); border:1px solid rgba(228,180,175,.4);
      border-radius:18px; border-bottom-left-radius:5px; margin-bottom:10px; animation:fadeUp .22s both;
    }
    .dot { width:7px; height:7px; border-radius:50%; background:var(--rose); animation:bounce 1.2s ease-in-out infinite; }
    .dot:nth-child(2){animation-delay:.18s} .dot:nth-child(3){animation-delay:.36s}
    @keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.6}30%{transform:translateY(-6px);opacity:1}}
    .r-section { margin-bottom:14px; }
    .r-label { font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
    .r-section p,.r-section ul { font-size:13px; line-height:1.65; color:var(--brown); }
    .score-badge { display:inline-flex; align-items:center; gap:12px; background:rgba(176,123,56,.09); border-radius:14px; padding:10px 16px; margin-bottom:10px; }
    .score-num { font-family:var(--serif); font-size:42px; font-weight:600; color:var(--gold); line-height:1; }
    .score-meta { font-size:12px; color:var(--muted); line-height:1.45; }
    .divider { height:1px; background:rgba(176,123,56,.14); margin:12px 0; }
    .recipe-card { background:rgba(253,246,238,.7); border:1px solid rgba(176,123,56,.22); border-radius:14px; padding:13px 15px; margin-bottom:10px; font-size:13px; line-height:1.65; }
    .recipe-card strong { color:var(--gold); display:block; margin-bottom:5px; font-size:14px; }
    .recipe-sub { font-weight:600; font-size:11.5px; color:var(--gold); margin:7px 0 2px; display:block; }
    .offer-wrap { background:linear-gradient(145deg,#fffaf3,#fff5ea); border:1px solid rgba(176,123,56,.35); border-radius:var(--radius); padding:20px; }
    .offer-wrap h3 { font-family:var(--serif); font-size:22px; font-weight:400; margin-bottom:10px; }
    .offer-wrap p { font-size:13px; color:var(--muted); line-height:1.65; margin-bottom:9px; }
    .offer-btns { display:grid; gap:10px; margin:14px 0; }
    .offer-btn { display:block; text-align:center; text-decoration:none; padding:13px 18px; border-radius:999px; font-family:var(--sans); font-size:13.5px; font-weight:700; transition:all .2s; }
    .offer-btn.primary { background:var(--brown); color:var(--white); }
    .offer-btn.primary:hover { background:var(--brown-md); }
    .offer-btn.gold { background:linear-gradient(135deg,var(--gold),var(--gold-lt)); color:var(--white); }
    .offer-btn.gold:hover { filter:brightness(1.06); }
    .used-screen { padding:36px 24px; text-align:center; }
    .used-screen h2 { font-family:var(--serif); font-size:28px; font-weight:400; margin-bottom:12px; }
    .used-screen p { font-size:14px; color:var(--muted); line-height:1.7; margin-bottom:8px; }
    .used-screen a { color:var(--gold); font-weight:600; text-decoration:none; }
    @media(max-width:600px){
      .shell{width:100%;padding:5px 0 env(safe-area-inset-bottom,0px);gap:6px}
      .intro{padding:8px 12px;border-radius:14px}
      .intro h1{font-size:clamp(17px,6vw,24px)}
      .intro-sub{display:none}
      .panel{border-radius:14px}
      .chat-box{padding:12px 11px 6px}
      .msg{font-size:13px;max-width:95%}
      .chat-form{padding:8px 10px 10px;gap:7px}
      .send-btn{padding:0 14px;font-size:12.5px}
    }
    @media(max-height:680px){
      .intro-sub{display:none}
      .intro h1{font-size:clamp(17px,2.6vw,22px)}
      .intro{padding:6px 14px}
      .msg{font-size:13px;padding:9px 13px}
    }
  

.sg-foot{text-align:center;padding:1.25rem 1rem;font-size:.72rem;color:#fff;opacity:.5;letter-spacing:.02em}.sg-foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}