:root {
      --g1: #1a5c3a;
      --g2: #237048;
      --g3: #2d8a5a;
      --g4: #4aa874;
      --g5: #d4eedd;
      --g6: #eaf6ef;
      --br: #7a6245;
      --brl: #faf3e8;
      --rust: #b5402b;
      --amber: #c98a0c;
      --cream: #f8f8f5;
      --white: #ffffff;
      --ink: #18211c;
      --ink2: #3b4d42;
      --ink3: #718078;
      --bdr: rgba(26,92,58,0.09);
      --bdr2: rgba(26,92,58,0.16);
      --r: 14px;
      --rl: 22px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: var(--cream);
      color: var(--ink);
      max-width: 430px;
      margin: 0 auto;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ── NAV ── */
    nav.topnav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(248,248,245,0.94);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--bdr);
      padding: 11px 18px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .logo-img { height: 36px; width: auto; object-fit: contain; display: block; }
    .logo-text { font-family: 'Playfair Display', serif; font-size: 13.5px; font-weight: 700; color: var(--g1); line-height: 1.2; }
    .logo-sub { font-size: 10px; color: var(--ink3); font-weight: 500; }
    .nav-cta-btn {
      background: var(--g1); color: #fff;
      font-size: 11.5px; font-weight: 600;
      padding: 8px 14px; border-radius: 20px;
      text-decoration: none; border: none; cursor: pointer;
      transition: background 0.2s; white-space: nowrap; flex-shrink: 0;
    }
    .nav-cta-btn:hover { background: var(--g2); }

    /* ── HERO BANNER ── */
    .hero-img-wrap { position: relative; overflow: hidden; }
    .hero-img-wrap img {
      width: 100%; height: 280px;
      object-fit: cover; object-position: center 20%; display: block;
    }
    .hero-img-grad {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 60px 22px 20px;
      background: linear-gradient(to top, rgba(18,58,36,0.90) 0%, rgba(18,58,36,0.40) 60%, transparent 100%);
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.20);
      border-radius: 16px; padding: 4px 11px;
      font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.88);
      letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px;
    }
    .hero-badge i { font-size: 9px; color: #6ddfa0; }
    .hero-img-title {
      font-family: 'Playfair Display', serif;
      font-size: 20px; font-weight: 700; color: #fff; line-height: 1.25;
    }
    .hero-img-title em { font-style: italic; color: #9ddfc0; }

    /* ── HERO COPY ── */
    .hero-copy { background: var(--white); padding: 32px 22px 0; }
    .hero-headline {
      font-family: 'Playfair Display', serif;
      font-size: 29px; font-weight: 800; color: var(--ink);
      line-height: 1.20; letter-spacing: -0.5px; margin-bottom: 14px;
    }
    .hero-headline em { font-style: italic; color: var(--g1); }
    .hero-sub { font-size: 13.5px; color: var(--ink3); line-height: 1.72; margin-bottom: 22px; }
    .hero-sub strong { color: var(--ink2); font-weight: 600; }

    .btn-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
    .btn-primary {
      display: flex; align-items: center; justify-content: center; gap: 9px;
      background: var(--g1); color: #fff;
      font-size: 14px; font-weight: 700; padding: 15px 22px;
      border-radius: var(--r); text-decoration: none; border: none; cursor: pointer;
      box-shadow: 0 4px 18px rgba(26,92,58,0.28); transition: all 0.2s; width: 100%;
    }
    .btn-primary:hover { background: var(--g2); }
    .btn-primary:active { transform: scale(0.98); }
    .btn-ghost {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      background: transparent; color: var(--ink3);
      font-size: 13px; font-weight: 500; padding: 12px 22px;
      border-radius: var(--r); text-decoration: none;
      border: 1px solid var(--bdr2); cursor: pointer; transition: all 0.15s; width: 100%;
    }
    .btn-ghost:hover { background: var(--g6); color: var(--g1); }

    /* ── TRUST BAR ── */
    .trust-bar { display: flex; border-top: 1px solid var(--bdr); }
    .trust-item { flex: 1; padding: 14px 6px; text-align: center; border-right: 1px solid var(--bdr); }
    .trust-item:last-child { border-right: none; }
    .trust-num { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 800; color: var(--g1); line-height: 1; }
    .trust-label { font-size: 10px; color: var(--ink3); margin-top: 4px; line-height: 1.3; font-weight: 500; }

    /* ── SECTIONS ── */
    .sec { padding: 40px 22px; }
    .sec-tag {
      display: inline-block; font-size: 10.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 2px; color: var(--g3);
      margin-bottom: 9px; padding-left: 11px; border-left: 3px solid var(--g3);
    }
    .sec-title {
      font-family: 'Playfair Display', serif;
      font-size: 25px; font-weight: 800; color: var(--ink);
      line-height: 1.22; letter-spacing: -0.4px; margin-bottom: 14px;
    }
    .sec-body { font-size: 13.5px; color: var(--ink3); line-height: 1.72; margin-bottom: 26px; }
    .sec-body strong { color: var(--ink2); font-weight: 600; }
    .bg-pale { background: var(--g6); }
    .divider { height: 1px; background: var(--bdr); margin: 0 22px; }

    /* ── PAIN CARDS ── */
    .pain-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
    .pain-card {
      display: flex; align-items: flex-start; gap: 13px;
      background: var(--white); border: 1px solid var(--bdr);
      border-radius: var(--r); padding: 16px 15px; transition: box-shadow 0.2s;
    }
    .pain-card:hover { box-shadow: 0 4px 18px rgba(26,92,58,0.09); }
    .pain-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .pain-icon.red   { background: #fef2f2; } .pain-icon.red i   { color: var(--rust); }
    .pain-icon.amber { background: var(--brl); } .pain-icon.amber i { color: var(--br); }
    .pain-icon.green { background: var(--g5); } .pain-icon.green i { color: var(--g3); }
    .pain-icon i { font-size: 16px; }
    .pain-text h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 3px; line-height: 1.35; }
    .pain-text p  { font-size: 12px; color: var(--ink3); line-height: 1.55; }

    /* ── QUOTE ── */
    .quote-block {
      background: var(--g1); border-radius: var(--rl);
      padding: 26px 22px; margin: 0 22px 38px;
      position: relative; overflow: hidden;
    }
    .quote-block::before {
      content: '\201C';
      position: absolute; top: -12px; left: 14px;
      font-family: 'Playfair Display', serif;
      font-size: 110px; color: rgba(255,255,255,0.06); line-height: 1;
    }
    .quote-text {
      font-family: 'Playfair Display', serif;
      font-size: 16px; font-style: italic; color: #fff;
      line-height: 1.58; margin-bottom: 15px; position: relative;
    }
    .quote-author { display: flex; align-items: center; gap: 10px; }
    .author-av {
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(255,255,255,0.12);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Playfair Display', serif;
      font-size: 13px; font-weight: 700; color: #9ddfc0;
    }
    .author-name { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.88); }
    .author-note { font-size: 10.5px; color: rgba(255,255,255,0.45); margin-top: 2px; }

    /* ── WOUND GRID ── */
    .wound-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 26px; }
    .wound-card {
      background: var(--white); border: 1px solid var(--bdr);
      border-radius: var(--r); padding: 16px 13px; text-align: center; transition: all 0.2s;
    }
    .wound-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,92,58,0.10); }
    .wound-card i { font-size: 22px; color: var(--g3); display: block; margin-bottom: 7px; }
    .wound-card h4 { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
    .wound-card p  { font-size: 10.5px; color: var(--ink3); line-height: 1.45; }

    /* ── STEPS ── */
    .steps { display: flex; flex-direction: column; gap: 0; position: relative; }
    .steps::before {
      content: ''; position: absolute; left: 18px; top: 22px; bottom: 22px;
      width: 2px; background: var(--g5);
    }
    .step { display: flex; gap: 15px; padding: 0 0 26px; position: relative; }
    .step:last-child { padding-bottom: 0; }
    .step-num {
      width: 38px; height: 38px; border-radius: 50%;
      background: var(--g1); color: #fff;
      font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; position: relative; z-index: 1;
      box-shadow: 0 0 0 4px var(--g6);
    }
    .step-content h4 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; margin-top: 8px; }
    .step-content p  { font-size: 12.5px; color: var(--ink3); line-height: 1.60; }

    /* ── WHY ── */
    .why-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 26px; }
    .why-item { display: flex; align-items: flex-start; gap: 13px; }
    .why-check {
      width: 27px; height: 27px; border-radius: 50%;
      background: var(--g5); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 1px;
    }
    .why-check i { font-size: 11px; color: var(--g2); }
    .why-item h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
    .why-item p  { font-size: 12px; color: var(--ink3); line-height: 1.55; }

    /* ── TESTIMONIALS ── */
    .testi-list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 26px; }
    .testi-card { background: var(--white); border: 1px solid var(--bdr); border-radius: var(--r); padding: 18px 16px; }
    .testi-stars { color: var(--amber); font-size: 12px; letter-spacing: 2px; margin-bottom: 9px; }
    .testi-text  { font-size: 12.5px; color: var(--ink2); line-height: 1.68; margin-bottom: 13px; font-style: italic; }
    .testi-author { display: flex; align-items: center; gap: 9px; }
    .testi-av {
      width: 30px; height: 30px; border-radius: 50%; background: var(--g5);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Playfair Display', serif; font-size: 11px; font-weight: 700; color: var(--g1);
    }
    .testi-name { font-size: 12px; font-weight: 700; color: var(--ink); }
    .testi-loc  { font-size: 10.5px; color: var(--ink3); }

    /* ── FAQ ── */
    .faq-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 26px; }
    .faq-item { border-bottom: 1px solid var(--bdr); overflow: hidden; }
    .faq-q {
      width: 100%; text-align: left; background: none; border: none;
      padding: 15px 0; display: flex; justify-content: space-between; align-items: center;
      cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 13px; font-weight: 700; color: var(--ink); gap: 11px;
    }
    .faq-q i { font-size: 14px; color: var(--g3); transition: transform 0.25s; flex-shrink: 0; }
    .faq-q.open i { transform: rotate(45deg); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.30s ease, padding 0.20s; }
    .faq-a.open { max-height: 300px; padding-bottom: 14px; }
    .faq-a p { font-size: 12.5px; color: var(--ink3); line-height: 1.65; }

    /* ── CTA BANNER ── */
    .cta-banner {
      margin: 0 22px 44px; background: var(--g1);
      border-radius: var(--rl); padding: 30px 22px; text-align: center; position: relative; overflow: hidden;
    }
    .cta-banner::before {
      content: ''; position: absolute; top: -40px; right: -40px;
      width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,0.04);
    }
    .cta-banner h2 {
      font-family: 'Playfair Display', serif;
      font-size: 22px; font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 9px;
    }
    .cta-banner h2 em { font-style: italic; color: #9ddfc0; }
    .cta-banner p { font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.62; margin-bottom: 22px; }
    .btn-cta-white {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      background: #fff; color: var(--g1); font-size: 14px; font-weight: 700;
      padding: 15px 22px; border-radius: var(--r); text-decoration: none; border: none;
      cursor: pointer; width: 100%; transition: all 0.15s;
    }
    .btn-cta-white:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.14); }
    .btn-cta-white i { font-size: 18px; color: #25d366; }
    .cta-note { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 11px; }

    /* ── URGENCY BADGE ── */
    .urgency-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: #fef2f2; border: 1px solid #fecaca;
      border-radius: 20px; padding: 5px 12px;
      font-size: 11px; font-weight: 700; color: var(--rust); margin-bottom: 14px;
    }
    .urgency-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rust); animation: pulse-dot 1.5s infinite; }

    /* ── FOOTER ── */
    .footer-mini { padding: 22px 22px 14px; text-align: center; }
    .footer-mini p { font-size: 10.5px; color: var(--ink3); line-height: 1.55; }
    .footer-addr { margin-bottom: 3px; font-weight: 500; color: var(--ink2); }
    .footer-copy { color: rgba(23,29,25,0.25); }

    /* ── BOTTOM NAV ── */
    .bottom-nav {
      position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 430px;
      background: var(--white); border-top: 1px solid var(--bdr);
      display: flex; align-items: flex-end; justify-content: space-around;
      padding: 6px 4px;
      padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
      z-index: 200; box-shadow: 0 -2px 14px rgba(26,92,58,0.07);
    }
    .bnav-item {
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      padding: 7px 6px; border-radius: 11px; text-decoration: none;
      background: none; border: none; cursor: pointer; transition: all 0.18s;
      min-width: 52px; font-family: 'Plus Jakarta Sans', sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    .bnav-item i    { font-size: 18px; color: var(--ink3); transition: color 0.15s; }
    .bnav-item span { font-size: 9px; font-weight: 600; color: var(--ink3); line-height: 1.2; transition: color 0.15s; }
    .bnav-item:hover i, .bnav-item.active i { color: var(--g1); }
    .bnav-item:hover span, .bnav-item.active span { color: var(--g1); }
    .bnav-item:active i { transform: scale(0.88); }
    .bnav-center {
      position: relative; top: -10px;
      background: var(--g1); border-radius: 50%;
      width: 50px; height: 50px; padding: 0;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 18px rgba(26,92,58,0.38); min-width: unset;
    }
    .bnav-center i { font-size: 20px; color: #fff; }
    .bnav-center span { display: none; }
    .bnav-center:hover i { color: #fff; }
    .bnav-center:active { transform: scale(0.92); }

    /* ── GO-TOP BUTTON ── */                  /* GO-TOP */
    .go-top {                                   /* GO-TOP */
      position: fixed;                          /* GO-TOP */
      bottom: 82px;                             /* GO-TOP */
      right: max(calc((100vw - 430px) / 2 + 16px), 16px); /* GO-TOP */
      width: 44px; height: 44px;               /* GO-TOP */
      border-radius: 50%;                      /* GO-TOP */
      background: var(--g1);                    /* GO-TOP */
      color: #fff;                              /* GO-TOP */
      border: none; cursor: pointer;            /* GO-TOP */
      display: flex; align-items: center; justify-content: center; /* GO-TOP */
      box-shadow: 0 4px 16px rgba(26,92,58,0.30); /* GO-TOP */
      z-index: 150;                             /* GO-TOP */
      opacity: 0;                               /* GO-TOP */
      visibility: hidden;                       /* GO-TOP */
      transform: translateY(12px);              /* GO-TOP */
      transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s; /* GO-TOP */
      -webkit-tap-highlight-color: transparent; /* GO-TOP */
    }                                           /* GO-TOP */
    .go-top i { font-size: 17px; }             /* GO-TOP */
    .go-top.show {                              /* GO-TOP */
      opacity: 1; visibility: visible; transform: translateY(0); /* GO-TOP */
    }                                           /* GO-TOP */
    .go-top:hover { background: var(--g2); }   /* GO-TOP */
    .go-top:active { transform: scale(0.90); }  /* GO-TOP */

    /* ── SHARE PANEL ── */
    .share-overlay {
      position: fixed; inset: 0; z-index: 299;
      background: rgba(0,0,0,0.34);
      opacity: 0; pointer-events: none; transition: opacity 0.25s;
      max-width: 430px; margin: 0 auto;
    }
    .share-overlay.open { opacity: 1; pointer-events: auto; }
    .share-panel {
      position: fixed; bottom: 0; left: 50%;
      transform: translateX(-50%) translateY(100%);
      width: 100%; max-width: 430px;
      background: var(--white); border-radius: var(--rl) var(--rl) 0 0;
      padding: 18px 22px calc(18px + env(safe-area-inset-bottom, 0px));
      z-index: 300; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    .share-panel.open { transform: translateX(-50%) translateY(0); }
    .share-handle { width: 34px; height: 4px; background: var(--bdr2); border-radius: 4px; margin: 0 auto 15px; }
    .share-title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 17px; text-align: center; }
    .share-grid { display: flex; justify-content: center; gap: 20px; margin-bottom: 8px; }
    .share-opt {
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      text-decoration: none; background: none; border: none; cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .share-ico { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; }
    .share-ico i { font-size: 23px; color: #fff; }
    .share-opt:hover .share-ico { transform: translateY(-2px); }
    .share-opt span { font-size: 11px; font-weight: 600; color: var(--ink2); }
    .share-wa .share-ico  { background: #25D366; }
    .share-fb .share-ico  { background: #1877F2; }
    .share-ig .share-ico  { background: #E4405F; }
    .share-cp .share-ico  { background: var(--ink3); }
    .share-cancel {
      width: 100%; padding: 13px; border: 1px solid var(--bdr2);
      border-radius: var(--r); background: var(--white); font-size: 13.5px;
      font-weight: 600; color: var(--ink2); cursor: pointer; transition: all 0.15s;
      margin-top: 12px; font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .share-cancel:hover { background: var(--g6); }

    /* ── TOAST ── */
    .toast {
      position: fixed; bottom: 88px; left: 50%;
      transform: translateX(-50%) translateY(16px);
      background: var(--ink); color: #fff;
      font-size: 12.5px; font-weight: 600;
      padding: 9px 18px; border-radius: 22px;
      z-index: 9999; opacity: 0; pointer-events: none;
      transition: all 0.25s; white-space: nowrap;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ── CHATBOT ── */
    .chatbot-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: var(--cream);
      display: flex; flex-direction: column;
      visibility: hidden; opacity: 0; pointer-events: none;
      transition: opacity 0.01s;
      max-width: 430px; margin: 0 auto;
    }
    .chatbot-overlay.open { visibility: visible; opacity: 1; pointer-events: auto; }
    .chatbot-slide {
      display: flex; flex-direction: column;
      width: 100%; height: 100%;
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    }
    .chatbot-overlay.open .chatbot-slide { transform: translateY(0); }

    .chat-header {
      background: var(--g1); padding: 13px 15px;
      display: flex; align-items: center; gap: 11px; flex-shrink: 0;
    }
    .chat-hav {
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(255,255,255,0.14);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .chat-hav i { font-size: 17px; color: #9ddfc0; }
    .chat-hinfo { flex: 1; min-width: 0; }
    .chat-htitle { font-family: 'Playfair Display', serif; font-size: 15.5px; font-weight: 700; color: #fff; line-height: 1.2; }
    .chat-hstatus { font-size: 10px; color: #9ddfc0; font-weight: 500; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
    .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #6ddfa0; animation: pulse-dot 1.5s infinite; flex-shrink: 0; }
    .chat-hbtn {
      width: 35px; height: 35px; border-radius: 50%;
      background: rgba(255,255,255,0.12); border: none;
      color: rgba(255,255,255,0.80); font-size: 13px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.15s; flex-shrink: 0;
    }
    .chat-hbtn:hover { background: rgba(255,255,255,0.22); color: #fff; }

    .chat-msgs {
      flex: 1; overflow-y: auto; padding: 18px 15px;
      display: flex; flex-direction: column; gap: 11px;
      -webkit-overflow-scrolling: touch;
    }
    .chat-msgs::-webkit-scrollbar { width: 3px; }
    .chat-msgs::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 4px; }

    .cmsg { max-width: 86%; display: flex; flex-direction: column; gap: 3px; }
    .cmsg.bot  { align-self: flex-start; }
    .cmsg.user { align-self: flex-end; }
    .cbubble { padding: 11px 15px; border-radius: 17px; font-size: 13px; line-height: 1.55; }
    .cmsg.bot  .cbubble { background: var(--white); color: var(--ink2); border-bottom-left-radius: 5px; border: 1px solid var(--bdr); }
    .cmsg.user .cbubble { background: var(--g1); color: #fff; border-bottom-right-radius: 5px; }
    .ctime { font-size: 9.5px; color: var(--ink3); padding: 0 4px; }
    .cmsg.user .ctime { text-align: right; }

    .ctyping { display: flex; gap: 4px; padding: 13px 17px; align-items: center; }
    .ctyping span {
      width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); opacity: 0.3;
      animation: typing-bounce 1.2s infinite;
    }
    .ctyping span:nth-child(2) { animation-delay: 0.15s; }
    .ctyping span:nth-child(3) { animation-delay: 0.3s; }

    .cchips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 3px; }
    .cchip {
      background: var(--white); border: 1px solid var(--bdr2); border-radius: 18px;
      padding: 7px 13px; font-size: 11.5px; font-weight: 600; color: var(--g1);
      cursor: pointer; transition: all 0.15s; white-space: nowrap;
    }
    .cchip:hover { background: var(--g5); border-color: rgba(26,92,58,0.24); }
    .cchip:active { transform: scale(0.96); }

    .chat-input-area {
      padding: 11px 15px 22px; background: var(--white); border-top: 1px solid var(--bdr); flex-shrink: 0;
    }
    .chat-input-wrap { display: flex; gap: 9px; align-items: flex-end; }
    .chat-input {
      flex: 1; border: 1px solid var(--bdr2); border-radius: 22px;
      padding: 11px 16px; font-size: 13.5px;
      font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink);
      background: var(--cream); outline: none; transition: border-color 0.15s;
      resize: none; min-height: 42px; max-height: 96px; line-height: 1.4;
    }
    .chat-input::placeholder { color: var(--ink3); }
    .chat-input:focus { border-color: var(--g3); }
    .chat-input:disabled { opacity: 0.6; cursor: not-allowed; }
    .chat-send {
      width: 42px; height: 42px; border-radius: 50%;
      background: var(--g1); border: none; color: #fff; font-size: 15px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.15s; flex-shrink: 0;
    }
    .chat-send:hover { background: var(--g2); }
    .chat-send:active { transform: scale(0.92); }
    .chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── RICH TEXT IN BUBBLE ── */
    .cmsg.bot .cbubble strong { font-weight: 700; color: var(--g1); }
    .cmsg.bot .cbubble strong.md-heading { display: block; font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 3px; margin-top: 2px; }
    .cmsg.bot .cbubble em { font-style: italic; color: var(--br); font-weight: 500; }
    .cmsg.bot .cbubble del { text-decoration: line-through; color: var(--ink3); opacity: 0.65; }
    .cmsg.bot .cbubble .md-spacer { height: 7px; }
    .cmsg.bot .cbubble ul.md-list { list-style: none; margin: 7px 0; padding: 0; }
    .cmsg.bot .cbubble ul.md-list li { position: relative; padding-left: 18px; margin-bottom: 5px; line-height: 1.55; }
    .cmsg.bot .cbubble ul.md-list li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--g3); }
    .cmsg.bot .cbubble ol.md-list { list-style: none; margin: 7px 0; padding: 0; counter-reset: md-ol-counter; }
    .cmsg.bot .cbubble ol.md-list li { position: relative; padding-left: 22px; margin-bottom: 5px; line-height: 1.55; counter-increment: md-ol-counter; }
    .cmsg.bot .cbubble ol.md-list li::before { content: counter(md-ol-counter) '.'; position: absolute; left: 0; top: 0; font-weight: 800; font-size: 12px; color: var(--g3); font-family: 'Plus Jakarta Sans', sans-serif; }

    /* ── REVEAL ANIMATION ── */
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .d1 { transition-delay: 0.08s; }
    .d2 { transition-delay: 0.16s; }
    .d3 { transition-delay: 0.24s; }

    @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
    @keyframes typing-bounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }