/* Modern Theme — Yenepoya-style (HODO profile3) */

  :root{
    --brand:#0e7c6b;
    --brand-2:#0aa06e;
    --brand-dark:#0a4d43;
    --ink:#0f172a;
    --muted:#5b6b7a;
    --bg:#f6faf9;
    --card:#ffffff;
    --line:#e5edeb;
    --accent:#f59e0b;
    --shadow: 0 10px 30px -12px rgba(14,124,107,.25), 0 4px 12px -4px rgba(15,23,42,.06);
    --radius:14px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color:var(--ink); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  a{color:var(--brand); text-decoration:none}
  img{max-width:100%; display:block}
  .container{max-width:1240px; margin:0 auto; padding:0 22px}

  /* ------------ Nav ------------ */
  header.site{
    position:sticky; top:0; z-index:800;
    background:#fff;
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px}
  .brand{display:flex; align-items:center; gap:12px; color:var(--ink); font-weight:700; flex:none}
  .brand-mark{
    width:38px; height:38px; border-radius:10px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    display:grid; place-items:center; color:#fff; box-shadow:var(--shadow);
  }
  .brand-name{font-size:15.5px; letter-spacing:.2px; line-height:1.15}
  .brand-name small{display:block; font-weight:500; color:var(--muted); font-size:11.5px; letter-spacing:.3px; text-transform:uppercase}
  .nav-links{display:flex; align-items:center; gap:26px}
  .nav-links a{color:var(--ink); font-weight:500; font-size:14.5px; opacity:.85}
  .nav-links a:hover{opacity:1; color:var(--brand)}
  .nav-cta{display:flex; align-items:center; gap:10px; flex:none}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px; border-radius:999px; font-weight:600; font-size:14.5px;
    border:1px solid transparent; cursor:pointer; transition:all .18s ease;
    white-space:nowrap;
  }
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
  .btn-primary{
    background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff;
    box-shadow:0 8px 20px -8px rgba(14,124,107,.55);
  }
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(14,124,107,.65)}
  .menu-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px}
  .cta-short{display:none}
  @media (max-width:640px){ .cta-full{display:none} .cta-short{display:inline} }

  /* ------------ Search + listings ------------ */
  main{padding: 22px 0 40px; scroll-margin-top:76px}

  /* Filter strip on top of the listings — search box + summary + dept filter */
  .list-head{
    display:grid; grid-template-columns: 1fr 220px; gap:18px; align-items:center;
    margin: 0 auto 18px;
  }
  .search-block{position:relative}
  .search-wrap{
    background:#fff; border:1px solid var(--line); border-radius:999px;
    padding: 6px 6px 6px 18px;
    display:flex; align-items:center; gap:10px;
    box-shadow: 0 6px 18px -10px rgba(15,23,42,.15);
    transition:box-shadow .2s ease, border-color .2s ease;
  }
  .search-wrap:focus-within{border-color:#a7d9c9; box-shadow: 0 14px 40px -18px rgba(14,124,107,.4)}
  .search-wrap svg.search-ico{color:var(--brand); flex:none}
  .search-wrap input{
    flex:1; border:0; outline:none; background:transparent;
    font-size:15.5px; padding:11px 4px; color:var(--ink); font-family:inherit;
    min-width:0;
  }
  .search-wrap input::placeholder{color:#8496a4}
  .search-btn{
    padding:10px 20px; border-radius:999px; border:0; cursor:pointer;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    color:#fff; font-weight:700; font-size:14px; font-family:inherit;
    box-shadow:0 6px 16px -8px rgba(14,124,107,.55); white-space:nowrap;
  }
  .search-btn:hover{filter:brightness(1.05)}

  /* Suggestion dropdown — sits immediately under the search box */
  .search-suggest{
    position:absolute; left:0; right:0; top: calc(100% + 8px);
    background:#fff; border:1px solid var(--line); border-radius:16px;
    box-shadow: 0 30px 70px -18px rgba(15,23,42,.22), 0 10px 24px -10px rgba(15,23,42,.12);
    max-height: 68vh; overflow-y:auto; text-align:left;
    z-index: 40; display:none;
  }
  .search-suggest.open{display:block}
  .sugg-head{
    padding: 10px 16px 8px; font-size:12px; letter-spacing:.4px; text-transform:uppercase;
    color:var(--muted); font-weight:700; border-bottom:1px solid #eef2f5;
    display:flex; justify-content:space-between; align-items:center;
  }
  .sugg-head a{color:var(--brand); text-decoration:none; text-transform:none; letter-spacing:0; font-size:13px}
  .sugg-item{
    display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer;
    text-decoration:none; color:inherit; border-bottom:1px solid #f2f5f7;
  }
  .sugg-item:last-child{border-bottom:0}
  .sugg-item:hover, .sugg-item.active{background:#f2fbf7}
  .sugg-avatar{
    width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none;
    background:linear-gradient(135deg, #eaf9f3, #d1f0e6); display:grid; place-items:center;
    color:var(--brand-dark); font-weight:800; font-size:15px;
  }
  .sugg-avatar img{width:100%; height:100%; object-fit:cover; object-position:center top}
  .sugg-info{flex:1; min-width:0}
  .sugg-name{font-weight:700; font-size:14.5px; margin:0 0 2px; color:var(--ink);
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sugg-meta{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sugg-meta .sugg-book-count{color:var(--brand-dark); font-weight:600}
  .sugg-book{
    flex:none; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:700;
    background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff;
    text-decoration:none; box-shadow:0 6px 14px -6px rgba(14,124,107,.5);
  }
  .sugg-empty{padding:22px 18px; text-align:center; color:var(--muted); font-size:14px}
  .sugg-empty b{color:var(--ink); display:block; margin-bottom:4px}
  mark.hl{background:#fff3bf; color:inherit; padding:0 2px; border-radius:3px}

  /* Dept dropdown (right side of the filter strip) */
  .doc-dept-select{
    padding:12px 14px; border-radius:999px; border:1px solid var(--line);
    background:#fff; color:var(--ink); font-size:14.5px; font-family:inherit;
    cursor:pointer; width:100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e7c6b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position: right 16px center;
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    padding-right:36px;
  }

  /* Summary row (below the strip) */
  .list-summary{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    margin: 0 auto 18px; color:var(--muted); font-size:14px;
  }
  .list-summary .summary-text b{color:var(--ink)}
  .list-summary .hint{font-size:13px; color:var(--muted)}
  .list-summary .hint b{color:var(--brand-dark)}

  /* Doctor grid */
  .doctors-grid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:20px;
  }
  .doc-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px;
    display:flex; flex-direction:column; text-align:left;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .doc-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#cfeadf}
  .doc-photo{
    width:100%; aspect-ratio: 4/3; border-radius:12px; overflow:hidden;
    background:linear-gradient(135deg, #eaf9f3, #d1f0e6);
    position:relative;
  }
  .doc-photo img{width:100%; height:100%; object-fit:cover; object-position:center top}
  .doc-photo .initials{
    position:absolute; inset:0; display:grid; place-items:center;
    color:var(--brand-dark); font-weight:800; font-size:36px; letter-spacing:.5px;
  }
  .doc-photo .trending-badge{
    position:absolute; top:10px; left:10px;
    background:rgba(255,255,255,.96); color:#b45309;
    padding:4px 9px; border-radius:999px; font-size:11px; font-weight:800;
    letter-spacing:.3px; display:inline-flex; align-items:center; gap:4px;
    box-shadow:0 4px 12px -4px rgba(0,0,0,.2);
  }
  .doc-photo .trending-badge svg{width:11px; height:11px}
  .doc-body{padding-top:14px; flex:1; display:flex; flex-direction:column}
  .doc-name{font-weight:700; font-size:16px; letter-spacing:-.01em; margin:0 0 2px}
  .doc-qual{color:var(--muted); font-size:13px; margin:0 0 10px; min-height:1.2em}
  .doc-tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
  .doc-tag{
    font-size:11.5px; padding:3px 9px; border-radius:999px;
    background:#e6f6f1; color:var(--brand-dark); font-weight:600; letter-spacing:.2px;
  }
  .doc-tag.exp{background:#fff3e0; color:#92400e}

  .priority-badge{
    position:absolute; left:10px; bottom:10px; z-index:2;
    background:#0e7c6b; color:#fff;
    font-size:11px; font-weight:800; letter-spacing:.2px;
    padding:4px 9px; border-radius:999px;
    box-shadow:0 4px 12px -4px rgba(0,0,0,.35);
  }
  button.doc-book, button.dh-btn{border:0; cursor:pointer; font-family:inherit}

  .doc-list-tabs{
    display:flex; gap:8px; flex-wrap:wrap; margin:0 auto 16px;
  }
  .doc-list-tab{
    border:1px solid var(--line); background:#fff; color:var(--ink);
    border-radius:999px; padding:8px 14px; font-weight:700; font-size:14px;
    font-family:inherit; cursor:pointer;
  }
  .doc-list-tab.is-active{background:var(--brand); border-color:var(--brand); color:#fff}

  .priority-book{
    position:fixed; inset:0; z-index:5000;
    display:grid; place-items:center; padding:16px;
  }
  .priority-book[hidden]{display:none}
  .priority-book__backdrop{position:absolute; inset:0; background:rgba(15,23,42,.45)}
  .priority-book__panel{
    position:relative; z-index:1; width:min(460px, 100%);
    max-height:min(92vh, 640px); overflow:auto;
    background:#fff; border-radius:14px; padding:14px 14px 12px;
    box-shadow:0 24px 50px -20px rgba(0,0,0,.4);
  }
  .priority-book__head{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
  .priority-book__panel h3{margin:0; font-size:17px}
  .priority-book__doctor{margin:1px 0 0; font-weight:700; font-size:13px; color:var(--brand-dark)}
  .priority-book__x{
    border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer;
    color:var(--muted); padding:0 2px; font-family:inherit;
  }
  .priority-book__note{margin:8px 0 0; color:var(--muted); font-size:12px}
  .priority-book__msg{color:#b45309; font-size:12px; font-weight:600; margin:8px 0 0}
  .priority-cal__bar{
    display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:wrap;
  }
  .priority-cal__nav{
    width:26px; height:26px; border-radius:7px; border:1px solid var(--line);
    background:#fff; cursor:pointer; font-size:18px; line-height:1; color:var(--brand-dark);
    font-family:inherit;
  }
  .priority-cal__nav:disabled{opacity:.35; cursor:default}
  .priority-cal__month{
    min-width:118px; text-align:center; font-weight:800; color:var(--brand-dark); font-size:14px;
  }
  .priority-cal__legend{
    margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;
    font-size:11px; color:var(--muted); font-weight:600;
  }
  .priority-cal__legend span{display:inline-flex; align-items:center; gap:4px}
  .priority-cal__legend i{
    width:10px; height:10px; border-radius:3px; display:inline-block;
  }
  .priority-cal__legend i.is-available{background:var(--brand)}
  .priority-cal__legend i.is-off{background:#eef2f1; border:1px solid var(--line)}
  .priority-cal__legend i.is-today{background:#fff; border:2px solid var(--brand)}
  .priority-cal__week, .priority-cal__grid{
    display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
  }
  .priority-cal__week{margin-top:8px}
  .priority-cal__week span{
    text-align:center; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.04em;
  }
  .priority-cal__grid{margin-top:4px}
  .priority-day{
    min-height:36px; border-radius:8px; border:1px solid #e8eef2; background:#fff;
    text-align:center; padding:4px 2px; font-weight:700; color:#94a3b8;
    font-family:inherit; font-size:13px; cursor:default;
  }
  .priority-day.is-available{
    background:linear-gradient(160deg, var(--brand), var(--brand-2));
    border-color:transparent; color:#fff; cursor:pointer;
  }
  .priority-day.is-today,
  .priority-day.is-flexi{
    background:#fff; border:2px solid var(--brand); color:var(--brand-dark); cursor:pointer;
  }
  .priority-day.is-picked{
    box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--brand-dark);
  }
  .priority-day:disabled{opacity:1}
  .priority-slots{margin-top:10px}
  .priority-slots__label{font-size:12px; font-weight:800; margin-bottom:6px; color:var(--ink)}
  .priority-slots__grid{display:flex; flex-wrap:wrap; gap:6px; max-height:108px; overflow:auto}
  .priority-slot{
    border:1px solid var(--line); background:#fff; border-radius:8px;
    padding:5px 8px; font-weight:700; font-size:12px; cursor:pointer;
    font-family:inherit; color:var(--ink);
  }
  .priority-slot.is-picked{
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    border-color:transparent; color:#fff;
  }
  @media (max-width:520px){
    .priority-cal__legend{margin-left:0; width:100%}
    .priority-day{min-height:32px; font-size:12px}
  }
  .priority-book__actions{display:flex; gap:8px; margin-top:8px}
  .priority-book__go{
    flex:1; border:0; border-radius:8px; padding:8px 12px; cursor:pointer;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    color:#fff; font-weight:700; font-family:inherit;
  }
  .priority-book__cancel{
    border:1px solid var(--line); background:#fff; border-radius:8px;
    padding:8px 12px; cursor:pointer; font-weight:700; font-family:inherit;
  }

  /* Stats row — 3 compact live-data pills (90d bookings · fastest slot · quick-connect) */
  .doc-stats{
    display:grid; grid-template-columns:1fr 1fr; gap:6px;
    margin: 4px 0 12px; padding: 8px 10px;
    background:#f7fbf9; border:1px solid #e5f0eb; border-radius:10px;
  }
  .doc-stat{display:flex; align-items:center; gap:6px; min-width:0}
  .doc-stat .stat-ic{
    width:22px; height:22px; flex:none; border-radius:6px;
    display:grid; place-items:center; color:#fff; font-size:11px;
  }
  .doc-stat .stat-ic.b{background:#0f9b6c}    /* bookings */
  .doc-stat .stat-ic.t{background:#f59e0b}    /* time / speed */
  .doc-stat .stat-body{min-width:0; line-height:1.15}
  .doc-stat .stat-v{font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .doc-stat .stat-l{font-size:10.5px; color:var(--muted); letter-spacing:.2px; text-transform:uppercase}
  .doc-stat .stat-v.muted{color:var(--muted); font-weight:600}

  .doc-actions{margin-top:auto; display:flex; gap:8px; align-items:stretch; position:relative; z-index:90}
  .doc-book{
    flex:1; padding:11px 14px; border-radius:10px; border:0; cursor:pointer;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    color:#fff; font-weight:600; font-size:14px; font-family:inherit;
    text-align:center; text-decoration:none; transition:filter .15s ease;
  }
  .doc-book:hover{filter:brightness(1.05)}

  /* ------------ Hover popover — detailed doctor stats on desktop hover ------------ */
  /* Popover — dark slate-teal card with bold emerald border, sized for presence.
     Strong contrast against the light page background so it clearly "lifts off". */
  .doc-hover{
    position:fixed; z-index:400; width:384px; max-width:calc(100vw - 24px);
    background:linear-gradient(180deg, #0f2b34 0%, #0b1f27 100%);
    color:#e6f1ee;
    border:2px solid #10b981;
    border-radius:16px;
    box-shadow:
      0 30px 60px -20px rgba(6, 25, 30, .55),
      0 12px 24px -8px rgba(6, 25, 30, .35),
      0 0 0 6px rgba(16, 185, 129, .10);
    padding:18px 18px 16px; pointer-events:none;
    opacity:0; transform:translateY(6px) scale(.985);
    transition: opacity .16s ease, transform .16s ease;
  }
  .doc-hover.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
  .doc-hover .dh-arrow{
    position:absolute; width:14px; height:14px;
    background:#0f2b34;
    border:2px solid #10b981; border-right:0; border-bottom:0;
    transform:rotate(-45deg);
  }
  .doc-hover.on-right .dh-arrow{left:-8px; top:26px; transform:rotate(-45deg)}
  .doc-hover.on-left  .dh-arrow{right:-8px; top:26px; transform:rotate(135deg); background:#0b1f27}
  .doc-hover.on-below .dh-arrow{top:-8px; left:26px; transform:rotate(45deg)}
  .doc-hover.on-above .dh-arrow{bottom:-8px; left:26px; transform:rotate(-135deg); border:2px solid #10b981; border-top:0; border-left:0; background:#0b1f27}

  .dh-head{display:flex; gap:14px; align-items:center; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08)}
  .dh-avatar{
    width:60px; height:60px; border-radius:50%; overflow:hidden; flex:none;
    background:linear-gradient(135deg, #134e3f, #0a3d34);
    display:grid; place-items:center; color:#a7f3d0; font-weight:800; font-size:20px;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, .35);
  }
  .dh-avatar img{width:100%; height:100%; object-fit:cover; object-position:center top}
  .dh-title{min-width:0; flex:1}
  .dh-name{font-weight:700; font-size:16.5px; letter-spacing:-.01em; margin:0; color:#ffffff}
  .dh-sub{font-size:12.5px; color:#8fb8b0; margin:3px 0 0}

  .dh-line{
    display:flex; gap:12px; align-items:flex-start; padding:11px 0;
    border-top:1px solid rgba(255,255,255,.07); font-size:13.5px; color:#dceee9; line-height:1.45;
  }
  .dh-line:first-of-type{border-top:0; padding-top:2px}
  .dh-line .dh-ic{
    width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
    background:rgba(255,255,255,.06); font-size:15px;
    border:1px solid rgba(255,255,255,.08);
  }
  .dh-line .dh-ic.speed{background:rgba(251, 191, 36, .16); color:#fbbf24; border-color:rgba(251,191,36,.35)}
  .dh-line .dh-ic.book{background:rgba(16, 185, 129, .18); color:#34d399; border-color:rgba(52,211,153,.4)}
  .dh-line .dh-ic.chat{background:rgba(37, 211, 102, .18); color:#4ade80; border-color:rgba(74,222,128,.4)}
  .dh-line .dh-ic.prof{background:rgba(56, 189, 248, .15); color:#7dd3fc; border-color:rgba(125,211,252,.35)}
  .dh-line b{color:#ffffff; font-weight:700}
  .dh-line .dh-body{min-width:0; flex:1}
  .dh-line .dh-lbl{color:#7dd3c0; font-size:11px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; font-weight:700}
  .dh-line .dh-txt.muted{color:#7a9691}
  .dh-note{font-size:11px; color:#6b8a83; margin-top:4px}

  .dh-actions{display:flex; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.10)}
  .dh-btn{
    flex:1; padding:10px 12px; border-radius:10px; text-align:center; font-weight:700;
    font-size:13.5px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;
    letter-spacing:.2px;
  }
  .dh-btn.book{background:linear-gradient(135deg, #10b981, #059669); color:#ffffff; box-shadow: 0 6px 14px -6px rgba(16, 185, 129, .6)}
  .dh-btn.wa{background:#25d366; color:#0a2016; box-shadow: 0 6px 14px -6px rgba(37, 211, 102, .55)}
  .dh-btn.wa svg{width:14px; height:14px; fill:currentColor}
  .dh-btn:hover{filter:brightness(1.08); transform:translateY(-1px); transition: filter .12s ease, transform .12s ease}

  /* On touch devices / narrow screens, disable the hover popover entirely —
     the inline stats + WhatsApp button on the card cover the same info. */
  @media (hover: none), (max-width: 860px){
    .doc-hover{display:none !important}
  }

  .load-more-wrap{text-align:center; margin-top:28px}
  .load-more{
    padding:12px 28px; border-radius:999px; border:1px solid var(--line);
    background:#fff; color:var(--ink); font-weight:600; font-size:14.5px;
    cursor:pointer; font-family:inherit;
  }
  .load-more:hover{border-color:var(--brand); color:var(--brand)}

  .doc-empty{
    text-align:center; padding:60px 20px; color:var(--muted); font-size:15px;
    background:#fff; border:1px dashed var(--line); border-radius:14px;
  }
  .doc-empty b{color:var(--ink); display:block; margin-bottom:6px; font-size:16px}
  .skeleton{
    background:linear-gradient(90deg, #eef4f2 25%, #f5faf8 50%, #eef4f2 75%);
    background-size:200% 100%; animation: shimmer 1.4s infinite;
    border-radius:16px; height:340px;
  }
  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

  footer.site-foot{
    margin-top:28px;
    background:#fff;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:13.5px;
  }
  .site-foot__top{
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    flex-wrap:wrap; padding:22px 22px 16px;
  }
  .site-foot__logo{
    height:52px; width:auto; max-width:180px; object-fit:contain;
  }
  .site-foot__socials{display:flex; align-items:center; gap:10px}
  .site-foot__social{
    width:36px; height:36px; border-radius:50%;
    display:grid; place-items:center;
    border:1px solid #cfe3dc; color:var(--brand-dark); background:#f7fbf9;
  }
  .site-foot__social svg{width:16px; height:16px; fill:currentColor}
  .site-foot__social:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
  .site-foot__partner{
    font-weight:700; color:var(--brand-dark); letter-spacing:.01em;
  }
  .site-foot__partner:hover{color:var(--brand)}
  .site-foot__base{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    flex-wrap:wrap; padding:12px 22px 18px;
    border-top:1px solid var(--line); color:var(--muted);
  }
  .site-foot__base a{color:var(--muted); font-weight:600}
  .site-foot__base a:hover{color:var(--brand)}

  .site-services{
    scroll-margin-top:84px;
    padding:8px 0 8px;
  }
  .site-services h2{
    margin:0 0 6px;
    font-size:28px;
    letter-spacing:-.02em;
  }
  .site-services__lead{margin:0 0 16px; color:var(--muted)}
  .svc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:14px;
  }
  .svc-card{
    display:flex;
    flex-direction:column;
    gap:6px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px;
    color:var(--ink);
    min-height:120px;
  }
  .svc-card:hover{border-color:var(--brand); box-shadow:var(--shadow)}
  .svc-card__name{font-weight:700; font-size:16px}
  .svc-card__text{color:var(--muted); font-size:13.5px; line-height:1.45}
  .svc-items{margin-top:16px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px}
  .svc-items h3{margin:0 0 12px; font-size:18px}
  .svc-items__grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px}
  .svc-item{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    background:#f7fbf9;
    border:1px solid #e5f0eb;
    color:var(--ink);
    font-weight:600;
    font:inherit;
    text-align:left;
    cursor:pointer;
  }
  .svc-item:hover, .svc-item.is-active{border-color:var(--brand); color:var(--brand-dark)}
  .svc-request{
    margin-top:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px;
  }
  .svc-request h3{margin:0 0 8px; font-size:20px}
  .svc-request__desc{margin:0 0 14px; color:var(--muted)}
  .svc-request label{display:block; margin:10px 0 4px; font-size:13px; font-weight:650}
  .svc-request input, .svc-request textarea{
    width:100%;
    max-width:480px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    font:inherit;
    color:var(--ink);
    background:#fff;
  }
  .svc-request .btn{margin-top:14px}
  .svc-request__msg{margin:12px 0 0; color:#b42318; font-size:13.5px}
  .svc-request__wait{margin:12px 0 0; color:var(--muted)}
  .svc-request__thanks{margin:0; font-weight:650}
  .svc-items__empty{margin:0; color:var(--muted)}

  .site-contact{
    scroll-margin-top:84px;
    padding:8px 0 28px;
  }
  .site-contact__inner{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:28px 24px;
  }
  .site-contact h2{
    margin:0 0 8px;
    font-size:28px;
    letter-spacing:-.02em;
  }
  .site-contact__lead{
    margin:0 0 18px;
    color:var(--muted);
    font-size:15px;
  }
  .site-contact__grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .site-contact__card{
    display:flex;
    flex-direction:column;
    gap:4px;
    background:#f7fbf9;
    border:1px solid #e5f0eb;
    border-radius:14px;
    padding:16px 18px;
    text-decoration:none;
    color:inherit;
    min-width:0;
  }
  a.site-contact__card:hover{border-color:var(--brand)}
  .site-contact__label{
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--brand-dark);
  }
  .site-contact__value{
    font-size:16px;
    font-weight:650;
    color:var(--ink);
    word-break:break-word;
  }
  @media (max-width: 720px){
    .site-contact__grid{grid-template-columns:1fr}
  }

  .site-about{
    scroll-margin-top:84px;
    padding:8px 0 36px;
  }
  .site-about__inner{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:28px 24px;
  }
  .site-about h2{
    margin:0 0 16px;
    font-size:28px;
    letter-spacing:-.02em;
  }
  .site-about__layout.has-image{
    display:grid;
    grid-template-columns:minmax(180px, 280px) 1fr;
    gap:24px;
    align-items:start;
  }
  .site-about__img{
    width:100%;
    border-radius:14px;
    object-fit:cover;
  }
  .site-about__body{color:var(--ink); font-size:15px; line-height:1.6}
  .site-about__body .container{max-width:none; padding:0; margin:0}
  .site-about__body .row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    margin:0 0 16px;
  }
  .site-about__body .row:last-child{margin-bottom:0}
  .site-about__body [class*="col-"]{
    background:#f7fbf9;
    border:1px solid #e5f0eb;
    border-radius:14px;
    padding:18px 18px 16px;
    min-width:0;
  }
  .site-about__body img,
  .site-about__body .img-fluid{
    width:92px;
    height:92px;
    max-width:92px;
    object-fit:contain;
    margin:0 0 12px;
  }
  .site-about__body h3{
    margin:0 0 6px;
    font-size:17px;
    letter-spacing:-.01em;
    line-height:1.3;
  }
  .site-about__body h3 strong{font-weight:700}
  .site-about__body p{margin:0; color:var(--muted); font-size:14px}
  @media (max-width: 720px){
    .site-about__layout.has-image{grid-template-columns:1fr}
    .site-about__body .row{grid-template-columns:1fr}
  }

  /* ============================================
     @yenepoya CHAT WIDGET — persistent right rail
     Palette aligned to doctor-popup: dark teal shell + emerald accents
     ============================================ */
  :root{
    --chat-w: 380px;
    --chat-ink-dark:  #0f2b34;   /* deep teal — popup bg */
    --chat-ink-dark2: #0b1f27;   /* deeper teal — popup bg2 */
    --chat-emerald:   #10b981;   /* border + user bubble */
    --chat-mint:      #7dd3c0;   /* section accent / mint highlight */
    --chat-mint-soft: #eaf9f3;   /* bubble & body wash */
    --chat-mint-glow: rgba(16,185,129,.15);
  }
  /* Reserve space on the right on desktop so the panel doesn't cover content */
  @media (min-width: 1200px){
    body.chat-open{ padding-right: var(--chat-w); transition: padding-right .25s ease; }
  }
  /* Floating pill button — dark teal shell + emerald pulse ring */
  .chat-fab{
    position:fixed; right:20px; bottom:20px; z-index:75;
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 20px; border-radius:999px;
    border:2px solid var(--chat-emerald); cursor:pointer;
    background:linear-gradient(135deg, var(--chat-ink-dark), var(--chat-ink-dark2));
    color:#e6f1ee; font-weight:700; font-size:15px; font-family:inherit;
    box-shadow: 0 14px 30px -10px rgba(15,43,52,.55), 0 0 0 6px var(--chat-mint-glow);
    transition: transform .18s ease, filter .15s ease, box-shadow .18s ease;
  }
  .chat-fab:hover{ transform:translateY(-2px); filter:brightness(1.08);
    box-shadow: 0 18px 34px -10px rgba(15,43,52,.6), 0 0 0 8px var(--chat-mint-glow); }
  .chat-fab svg{ width:20px; height:20px; }
  .chat-fab .chat-fab-dot{
    width:8px; height:8px; border-radius:50%; background:var(--chat-mint);
    box-shadow: 0 0 0 3px rgba(125,211,192,.4); animation: cf-pulse 2.2s ease-in-out infinite;
  }
  @keyframes cf-pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
  body.chat-open .chat-fab{ display:none; }

  /* Chat panel — deep-teal shell + emerald 2px accent border */
  .chat-panel{
    position:fixed; right:0; top:0; bottom:0; width:var(--chat-w);
    z-index:70;
    background:linear-gradient(180deg, #f4fbf8 0%, #eaf7f1 100%);
    border-left:2px solid var(--chat-emerald);
    box-shadow: -24px 0 50px -20px rgba(15,43,52,.28), -1px 0 0 rgba(16,185,129,.18);
    display:none; flex-direction:column; overflow:hidden;
  }
  body.chat-open .chat-panel{ display:flex; }

  /* Header — dark teal gradient, mint title accent, emerald bottom stripe */
  .cp-head{
    display:flex; align-items:center; gap:12px; padding:16px 18px 14px;
    background:linear-gradient(135deg, var(--chat-ink-dark) 0%, var(--chat-ink-dark2) 100%);
    color:#e6f1ee; flex:none;
    border-bottom:2px solid var(--chat-emerald);
    box-shadow: 0 4px 14px -6px rgba(15,43,52,.35);
  }
  .cp-avatar{
    width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
    background:linear-gradient(135deg, var(--chat-emerald), #0ea472);
    color:#fff; font-weight:800; font-size:14px;
    box-shadow: 0 0 0 2px rgba(16,185,129,.35), 0 4px 10px -2px rgba(16,185,129,.4);
  }
  .cp-title{ flex:1; min-width:0; line-height:1.2 }
  .cp-title .cp-name{ font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; color:#fff }
  .cp-title .cp-name .cp-live{
    width:8px; height:8px; border-radius:50%; background:var(--chat-mint);
    box-shadow:0 0 0 3px rgba(125,211,192,.35);
    animation: cp-live-pulse 2s ease-in-out infinite;
  }
  @keyframes cp-live-pulse{ 0%,100%{opacity:1} 50%{opacity:.5} }
  .cp-title .cp-sub{ font-size:12px; color:var(--chat-mint); margin-top:3px; letter-spacing:.02em }
  .cp-close{
    background:transparent; border:0; color:#e6f1ee; cursor:pointer;
    padding:8px; border-radius:10px; transition:background .15s ease;
  }
  .cp-close:hover{ background:rgba(255,255,255,.12) }

  /* Compact dashboard row — mint gradient card */
  .cp-dash{
    padding:12px 16px;
    background:linear-gradient(135deg, var(--chat-mint-soft) 0%, #d6f0e3 100%);
    border-bottom:1px solid rgba(16,185,129,.18);
    display:none; align-items:center; justify-content:space-between; gap:10px; flex:none; font-size:13px;
  }
  body.chat-authed .cp-dash{ display:flex; }
  .cp-dash .cp-dash-info b{ color:var(--chat-ink-dark); font-weight:700; }
  .cp-dash .cp-dash-info small{ color:#5c7970; display:block; font-size:11.5px; margin-top:1px }
  .cp-dash .cp-dash-actions{ display:flex; gap:6px }
  .cp-dash-btn{
    padding:6px 12px; border-radius:999px; border:1.5px solid rgba(15,43,52,.18); background:#fff;
    font-size:12px; font-weight:700; cursor:pointer; color:var(--chat-ink-dark); font-family:inherit;
    transition:all .15s ease;
  }
  .cp-dash-btn:hover{ border-color:var(--chat-emerald); color:var(--chat-emerald); box-shadow:0 2px 8px -2px var(--chat-mint-glow) }
  .cp-dash-btn.danger{ color:#c94b4b; border-color:#f4c8c8 }
  .cp-dash-btn.danger:hover{ background:#fff5f5; border-color:#c94b4b }

  /* Body — mint wash, subtle dotted texture */
  .cp-body{
    flex:1; overflow-y:auto; padding:18px 14px 14px;
    background:
      radial-gradient(circle at 1px 1px, rgba(16,185,129,.055) 1px, transparent 1px) 0 0/22px 22px,
      linear-gradient(180deg, #f4fbf8 0%, #eaf7f1 100%);
    display:flex; flex-direction:column; gap:10px;
    scrollbar-width: thin; scrollbar-color: rgba(16,185,129,.35) transparent;
  }
  .cp-body::-webkit-scrollbar{ width:6px }
  .cp-body::-webkit-scrollbar-thumb{ background:rgba(16,185,129,.35); border-radius:3px }

  .cp-msg{ display:flex; gap:8px; max-width:88%; }
  .cp-msg.agent{ align-self:flex-start; }
  .cp-msg.user { align-self:flex-end; flex-direction:row-reverse; }
  .cp-bubble{
    padding:11px 14px; border-radius:16px; font-size:14px; line-height:1.5;
    white-space:pre-wrap; word-wrap:break-word;
  }
  /* Agent bubble — crisp white with mint border + soft emerald shadow */
  .cp-msg.agent .cp-bubble{
    background:#ffffff; border:1.5px solid rgba(16,185,129,.22); color:var(--chat-ink-dark);
    border-bottom-left-radius:4px;
    box-shadow: 0 4px 14px -6px rgba(15,43,52,.15), 0 0 0 1px rgba(255,255,255,.6) inset;
  }
  /* User bubble — dark teal gradient (matches popup shell), emerald hairline */
  .cp-msg.user .cp-bubble{
    background:linear-gradient(135deg, var(--chat-ink-dark) 0%, var(--chat-ink-dark2) 100%);
    color:#e6f1ee;
    border:1.5px solid var(--chat-emerald);
    border-bottom-right-radius:4px;
    box-shadow: 0 6px 16px -6px rgba(15,43,52,.4), 0 0 0 3px var(--chat-mint-glow);
  }
  .cp-msg.user .cp-bubble b{ color:#fff }
  .cp-msg .cp-mavatar{
    width:28px; height:28px; border-radius:50%; flex:none;
    display:grid; place-items:center; font-size:11px; font-weight:800;
  }
  /* Agent avatar chip — emerald filled */
  .cp-msg.agent .cp-mavatar{
    background:linear-gradient(135deg, var(--chat-emerald), #0ea472); color:#fff;
    box-shadow: 0 0 0 2px rgba(16,185,129,.2), 0 2px 6px -2px rgba(16,185,129,.4);
  }
  /* User avatar chip — mint tint */
  .cp-msg.user .cp-mavatar{
    background:linear-gradient(135deg, var(--chat-mint-soft), #d6f0e3);
    color:var(--chat-ink-dark);
    box-shadow: 0 0 0 2px rgba(16,185,129,.15);
  }
  .cp-msg.dev-otp .cp-bubble{
    background:#fff8e1; border:1.5px dashed #f59e0b; color:#7c2d12; font-size:12.5px;
    box-shadow: 0 2px 6px -2px rgba(245,158,11,.25);
  }

  .cp-typing{ display:none; align-items:center; gap:4px; margin:0 8px 4px 40px; }
  .cp-typing.show{ display:inline-flex }
  .cp-typing span{
    width:7px; height:7px; border-radius:50%; background:var(--chat-emerald);
    animation: cp-bounce 1.2s infinite ease-in-out; opacity:.55;
  }
  .cp-typing span:nth-child(2){ animation-delay: .18s }
  .cp-typing span:nth-child(3){ animation-delay: .36s }
  @keyframes cp-bounce{ 0%,60%,100%{transform:translateY(0); opacity:.5} 30%{transform:translateY(-5px); opacity:1} }

  /* Quick-reply chips — white with mint border, emerald hover */
  .cp-chips{
    display:flex; gap:6px; flex-wrap:wrap; padding: 0 14px 10px;
    background:transparent; border-top:0;
  }
  .cp-chip{
    padding:7px 13px; border-radius:999px; border:1.5px solid rgba(16,185,129,.28);
    background:#fff; color:var(--chat-ink-dark); font-size:12.5px; font-weight:700; cursor:pointer;
    font-family:inherit; transition:all .15s ease;
    box-shadow: 0 2px 6px -3px rgba(15,43,52,.12);
  }
  .cp-chip:hover{
    border-color:var(--chat-emerald); color:var(--chat-emerald);
    background:var(--chat-mint-soft);
    box-shadow: 0 4px 10px -3px var(--chat-mint-glow);
    transform:translateY(-1px);
  }

  /* Footer — white base with emerald-tinted input */
  .cp-foot{
    flex:none; padding:12px 12px 14px;
    background:#fff; border-top:1.5px solid rgba(16,185,129,.18);
  }
  .cp-input-row{
    display:flex; align-items:center; gap:8px;
    background:var(--chat-mint-soft); border:1.5px solid rgba(16,185,129,.28); border-radius:14px;
    padding:6px 8px 6px 14px;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .cp-input-row:focus-within{
    border-color:var(--chat-emerald); background:#fff;
    box-shadow: 0 0 0 3px var(--chat-mint-glow), 0 8px 20px -10px rgba(16,185,129,.35);
  }
  .cp-input-row input{
    flex:1; border:0; outline:none; background:transparent; font-family:inherit;
    font-size:14.5px; color:var(--chat-ink-dark); padding:8px 0; min-width:0;
  }
  .cp-input-row input::placeholder{ color:#77938a }
  .cp-send{
    width:38px; height:38px; border-radius:11px; border:0; cursor:pointer; flex:none;
    background:linear-gradient(135deg, var(--chat-emerald), #0ea472); color:#fff;
    display:grid; place-items:center;
    box-shadow: 0 6px 16px -4px rgba(16,185,129,.55);
    transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .cp-send:hover{ filter:brightness(1.08); transform:translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(16,185,129,.65); }
  .cp-send:disabled{ opacity:.55; cursor:not-allowed; transform:none }
  .cp-send svg{ width:16px; height:16px }
  .cp-hint{ font-size:11px; color:#7a938a; text-align:center; margin-top:8px; letter-spacing:.02em }
  .cp-hint b{ color:var(--chat-ink-dark) }

  /* Mobile: full-height sheet */
  @media (max-width: 860px){
    :root{ --chat-w: 100vw; }
    body.chat-open{ overflow:hidden; }
    body.chat-open main, body.chat-open header.site, body.chat-open footer{ display:none; }
    .chat-panel{ border-left:0; }
    .chat-fab{ right:14px; bottom:14px; padding:12px 16px; font-size:14px }
  }

  /* New "Chat with @yenepoya" pill on cards + popover — replaces WhatsApp CTAs */
  .doc-chat{
    flex:none; padding:0 12px; border-radius:10px; border:1px solid var(--brand);
    background:#fff; color:var(--brand-dark); cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
    font-family:inherit; font-weight:700; font-size:13px;
    transition:filter .15s ease, transform .15s ease, background .15s ease;
    text-decoration:none;
  }
  .doc-chat:hover{ background:#f0faf6; transform:translateY(-1px) }
  .doc-chat svg{ width:16px; height:16px; fill:var(--brand) }

  .dh-btn.chat{
    background:linear-gradient(135deg, #7dd3c0, #4fb99f); color:#0a2016;
    box-shadow: 0 6px 14px -6px rgba(125,211,192,.55);
  }
  .dh-btn.chat svg{ width:14px; height:14px; fill:currentColor }

  /* Responsive */
  @media (max-width: 1100px){
    header.site{ position:sticky; }
    .nav{ position:relative; min-width:0; }
    .brand{ min-width:0; flex:1 1 auto; }
    .brand-name{
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      max-width:100%;
    }
    .brand-name small{ overflow:hidden; text-overflow:ellipsis; }
    .nav-links{
      display:none;
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; align-items:stretch; gap:0;
      background:#fff; padding:6px 14px 12px;
      border-bottom:1px solid var(--line);
      box-shadow:0 18px 36px -22px rgba(15,23,42,.35);
      z-index:40;
    }
    .nav-links.is-open{ display:flex; }
    .nav-links a{
      padding:13px 6px;
      border-bottom:1px solid var(--line);
      font-size:15px;
    }
    .nav-links a:last-child{ border-bottom:0; }
    .menu-toggle{ display:inline-flex; align-items:center; }
  }
  @media (max-width: 860px){
    .list-head{grid-template-columns: 1fr; gap:10px}
    .doc-dept-select{padding:10px 14px; padding-right:36px}
    .nav-cta .btn-ghost{display:none}
  }
  @media (max-width: 640px){
    .container{padding:0 14px}
    .nav{height:60px; gap:10px}
    .brand-name{font-size:13.5px; max-width:150px}
    .brand-name small{font-size:10.5px}
    .brand-mark{width:34px; height:34px; border-radius:9px}
    .nav-cta .btn-ghost{display:none}
    .nav-cta .btn{padding:8px 14px; font-size:13.5px}
    .nav-cta .btn svg{display:none}
    .doctors-grid{grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:12px}
    .search-wrap{padding: 5px 5px 5px 14px}
    .search-wrap input{font-size:14.5px; padding:10px 2px}
    .search-btn{padding:8px 14px; font-size:13px}
    .search-suggest{border-radius:14px; max-height:70vh}
    .sugg-item{padding:10px 12px; gap:10px}
    .sugg-avatar{width:40px; height:40px}
    .sugg-name{font-size:14px}
    .sugg-meta{font-size:12px}
    .sugg-book{padding:7px 12px; font-size:12px}
  }



  /* --------- CTA banner (on the landing page) --------- */
  .so-cta-banner{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:20px 26px; margin:0 0 18px 0;
    background:linear-gradient(135deg,#0f2b34 0%,#123640 55%,#10b981 100%);
    border-radius:18px; color:#eaf9f3;
    box-shadow:0 12px 32px rgba(15,43,52,0.22), 0 0 0 1px rgba(16,185,129,0.5);
    position:relative; overflow:hidden;
  }
  .so-cta-banner::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 85% 30%, rgba(125,211,192,0.18), transparent 45%);
    pointer-events:none;
  }
  .so-cta-left{ display:flex; align-items:center; gap:18px; position:relative; z-index:1; flex:1; min-width:0; }
  .so-cta-icon{
    width:56px; height:56px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.12); border:1.5px solid rgba(125,211,192,0.55);
    border-radius:14px; color:#eaf9f3;
  }
  .so-cta-text{ min-width:0; }
  .so-cta-eyebrow{
    font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
    color:#7dd3c0; font-weight:700; margin-bottom:4px;
  }
  .so-cta-title{ font-size:19px; font-weight:700; color:#fff; line-height:1.25; margin-bottom:4px; }
  .so-cta-sub{ font-size:13.5px; color:rgba(234,249,243,0.85); line-height:1.5; }
  .so-cta-btn{
    flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
    padding:14px 24px; border:0; border-radius:999px;
    background:#fff; color:#0f2b34; font-weight:700; font-size:15px;
    cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.15);
    transition:transform .15s ease, box-shadow .15s ease;
    position:relative; z-index:1;
  }
  .so-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,0.32), 0 0 0 3px rgba(255,255,255,0.22); }
  @media (max-width:860px){
    .so-cta-banner{ flex-direction:column; align-items:stretch; padding:18px; text-align:left; }
    .so-cta-btn{ width:100%; justify-content:center; }
    .so-cta-title{ font-size:17px; }
    .so-cta-sub{ font-size:13px; }
  }

  /* --------- Full-screen overlay --------- */
  #soOverlay{
    display:none; position:fixed; inset:0; z-index:9500;
    background:rgba(15,43,52,0.55); backdrop-filter:blur(6px);
    align-items:stretch; justify-content:center;
  }
  body.so-open #soOverlay{ display:flex; }
  body.so-open{ overflow:hidden; }
  .so-shell{
    width:min(1400px, 96vw); height:min(92vh, 900px); margin:auto;
    display:grid; grid-template-columns: minmax(420px, 1fr) minmax(480px, 1.15fr);
    background:#f4fbf8; border-radius:20px; overflow:hidden;
    box-shadow:0 40px 80px rgba(0,0,0,0.4), 0 0 0 2px #10b981;
    border:1px solid rgba(16,185,129,0.4);
  }
  @media (max-width:1000px){
    .so-shell{ grid-template-columns:1fr; height:100vh; width:100vw; border-radius:0; margin:0; }
    .so-shell .so-right{ border-left:0; border-top:1px solid rgba(16,185,129,0.3); }
  }

  /* --------- Left panel: chat --------- */
  .so-left{
    display:flex; flex-direction:column;
    background:linear-gradient(135deg,#0f2b34 0%,#0b1f27 100%);
    color:#eaf9f3; min-width:0; min-height:0;
  }
  .so-hd{
    padding:16px 20px; display:flex; align-items:center; gap:14px;
    background:linear-gradient(180deg,#0f2b34,#0b1f27);
    border-bottom:2px solid #10b981;
  }
  .so-hd-avatar{
    width:44px; height:44px; border-radius:50%;
    background:#10b981; color:#0f2b34; font-weight:800; font-size:15px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 3px rgba(125,211,192,0.4), 0 4px 10px rgba(16,185,129,0.35);
  }
  .so-hd-txt{ flex:1; min-width:0; }
  .so-hd-name{ font-weight:700; font-size:15px; color:#fff; display:flex; align-items:center; gap:8px; }
  .so-hd-live{ width:8px; height:8px; border-radius:50%; background:#7dd3c0; box-shadow:0 0 0 3px rgba(125,211,192,0.25); animation:sopulse 2s infinite; }
  @keyframes sopulse{ 0%,100%{opacity:1} 50%{opacity:.5} }
  .so-hd-sub{ font-size:12px; color:#7dd3c0; margin-top:2px; }
  .so-hd-close{
    width:36px; height:36px; border-radius:10px; background:transparent; border:1.5px solid rgba(125,211,192,0.4);
    color:#eaf9f3; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .15s;
  }
  .so-hd-close:hover{ background:rgba(255,255,255,0.08); }
  .so-body{
    flex:1; overflow-y:auto; padding:20px;
    background:
      radial-gradient(circle at 20% 20%, rgba(16,185,129,0.06) 0, transparent 40%),
      radial-gradient(circle at 80% 80%, rgba(125,211,192,0.06) 0, transparent 45%),
      linear-gradient(180deg,#0f2b34,#0b1f27);
  }
  .so-body::-webkit-scrollbar{ width:8px; }
  .so-body::-webkit-scrollbar-thumb{ background:#10b981; border-radius:4px; }
  .so-msg{ display:flex; gap:10px; margin-bottom:14px; align-items:flex-start; }
  .so-msg.user{ flex-direction:row-reverse; }
  .so-msg-av{
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
    background:#10b981; color:#0f2b34; box-shadow:0 0 0 2px rgba(125,211,192,0.35);
  }
  .so-msg.user .so-msg-av{ background:#7dd3c0; color:#0f2b34; }
  .so-msg-bub{
    padding:11px 14px; border-radius:14px; max-width:78%;
    font-size:14px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word;
  }
  .so-msg.agent .so-msg-bub{
    background:#fff; color:#0f2b34;
    border:1.5px solid #d6f0e3;
    box-shadow:0 4px 10px rgba(16,185,129,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .so-msg.user .so-msg-bub{
    background:linear-gradient(135deg,#0f2b34,#123640);
    color:#eaf9f3; border:2px solid #10b981;
    box-shadow:0 4px 14px rgba(16,185,129,0.25);
  }
  .so-msg.dev .so-msg-bub{ background:#fff7ed; color:#7c2d12; border:1.5px dashed #f59e0b; }
  .so-msg.upload .so-msg-bub{ background:#eafaf3; color:#065f46; border:1.5px solid #10b981; font-size:13px; }
  .so-msg.final .so-msg-bub{ background:#10b981; color:#fff; border:2px solid #059669; font-weight:600; box-shadow:0 8px 20px rgba(16,185,129,0.3); }
  .so-msg-bub b, .so-msg-bub strong{ color:inherit; }
  .so-msg-bub code{ background:rgba(0,0,0,0.06); padding:2px 6px; border-radius:4px; font-family:ui-monospace,monospace; font-size:0.92em; }
  .so-msg.user .so-msg-bub code{ background:rgba(255,255,255,0.15); color:#eaf9f3; }
  .so-typing{ padding:0 20px 8px 60px; display:none; }
  .so-typing span{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#7dd3c0; margin-right:4px; animation:sobounce 1.2s infinite; }
  .so-typing span:nth-child(2){ animation-delay:.2s; }
  .so-typing span:nth-child(3){ animation-delay:.4s; }
  @keyframes sobounce{ 0%,80%,100%{transform:scale(.7); opacity:.4} 40%{transform:scale(1); opacity:1} }
  .so-typing.on{ display:block; }
  .so-input-row{
    padding:14px 18px; background:#0b1f27; border-top:1px solid rgba(125,211,192,0.2);
    display:flex; gap:10px; align-items:center;
  }
  .so-input{
    flex:1; padding:12px 16px; border-radius:999px;
    border:1.5px solid rgba(125,211,192,0.35);
    background:#0f2b34; color:#eaf9f3; font-size:14px; outline:0;
    transition:border-color .15s, background .15s;
  }
  .so-input::placeholder{ color:rgba(234,249,243,0.4); }
  .so-input:focus{ border-color:#10b981; background:#123640; box-shadow:0 0 0 3px rgba(16,185,129,0.15); }
  .so-send{
    width:44px; height:44px; border-radius:50%; border:0;
    background:linear-gradient(135deg,#10b981,#059669); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(16,185,129,0.4);
    transition:transform .15s;
  }
  .so-send:hover{ transform:scale(1.06); }
  .so-send:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

  /* --------- Right panel: docs + referral --------- */
  .so-right{
    display:flex; flex-direction:column; min-width:0; min-height:0;
    background:#f4fbf8; border-left:1px solid rgba(16,185,129,0.25);
  }
  .so-right-hd{
    padding:14px 20px; background:#fff; border-bottom:1px solid rgba(16,185,129,0.25);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .so-right-title{ font-weight:700; color:#0f2b34; font-size:14px; display:flex; align-items:center; gap:10px; }
  .so-right-title::before{ content:''; width:5px; height:20px; background:#10b981; border-radius:2px; display:inline-block; }
  .so-right-badge{ font-size:11px; padding:4px 10px; border-radius:999px; background:#eaf9f3; color:#059669; border:1px solid #a7e2c9; font-weight:600; }
  .so-right-body{ flex:1; overflow-y:auto; padding:16px 20px; min-height:0; }
  .so-right-body::-webkit-scrollbar{ width:8px; }
  .so-right-body::-webkit-scrollbar-thumb{ background:#a7e2c9; border-radius:4px; }

  /* Upload zone */
  .so-uploader{
    padding:16px; background:#fff; border-radius:14px; border:2px dashed #a7e2c9;
    text-align:center; margin-bottom:18px; transition:border-color .15s, background .15s;
    cursor:pointer;
  }
  .so-uploader.hover{ border-color:#10b981; background:#eaf9f3; }
  .so-uploader-ico{
    width:44px; height:44px; margin:0 auto 8px; border-radius:12px; background:#eaf9f3;
    color:#10b981; display:flex; align-items:center; justify-content:center;
  }
  .so-uploader-t{ font-size:14px; color:#0f2b34; font-weight:600; margin-bottom:2px; }
  .so-uploader-s{ font-size:12px; color:#5b7a80; margin-bottom:12px; }
  .so-attach-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 18px; border:0; border-radius:999px;
    background:#10b981; color:#fff; font-weight:700; font-size:14px; cursor:pointer;
  }
  .so-attach-btn:hover{ background:#059669; }
  .so-uploader input[type=file]{ display:none; }
  .so-doclist{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
  .so-doc-item{
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:#fff; border-radius:10px; border:1px solid #d6f0e3;
  }
  .so-doc-ico{ width:32px; height:32px; border-radius:8px; background:#eaf9f3; color:#059669; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .so-doc-name{ flex:1; min-width:0; font-size:13px; font-weight:600; color:#0f2b34; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .so-doc-meta{ font-size:11px; color:#5b7a80; }
  .so-doc-cat{ font-size:10px; padding:3px 8px; border-radius:999px; background:#10b981; color:#fff; text-transform:uppercase; letter-spacing:0.04em; font-weight:700; }

  /* Referral document */
  .so-refdoc{
    background:#fff; border-radius:14px; padding:22px 24px;
    box-shadow:0 4px 14px rgba(16,185,129,0.08); border:1px solid #d6f0e3;
    font-size:13.5px; color:#0f2b34; line-height:1.55;
  }
  .so-refdoc-hd{ text-align:center; padding-bottom:14px; border-bottom:2px dashed #a7e2c9; margin-bottom:16px; }
  .so-refdoc-t{ font-size:16px; font-weight:800; color:#0f2b34; letter-spacing:0.02em; }
  .so-refdoc-org{ font-size:11px; color:#059669; letter-spacing:0.12em; text-transform:uppercase; margin-top:2px; font-weight:600; }
  .so-refdoc-date{ font-size:11px; color:#5b7a80; margin-top:4px; }
  .so-sec{ margin-top:14px; }
  .so-sec-t{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#059669; font-weight:700; margin-bottom:6px; border-bottom:1px solid #eaf9f3; padding-bottom:3px; }
  .so-sec dl{ margin:0; display:grid; grid-template-columns:130px 1fr; gap:4px 12px; }
  .so-sec dt{ color:#5b7a80; font-size:12px; }
  .so-sec dd{ margin:0; color:#0f2b34; font-size:13px; }
  .so-sec-list{ margin:0; padding-left:18px; }
  .so-sec-list li{ margin-bottom:2px; }
  .so-sec-empty{ color:#a0b3b8; font-style:italic; font-size:12.5px; }
  .so-sec-p{ margin:0; color:#0f2b34; }
  .so-red-flag{
    background:#fef2f2; border:1.5px solid #fca5a5; border-radius:10px;
    padding:10px 12px; color:#991b1b; font-size:13px; margin-top:8px;
  }
  .so-red-flag b{ display:block; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:3px; color:#7f1d1d; }
  .so-refdoc-verify{ font-size:11px; color:#059669; margin-left:6px; }

  /* Finalise footer */
  .so-footer{
    padding:16px 20px; background:#fff; border-top:1px solid rgba(16,185,129,0.25);
    display:flex; flex-direction:column; gap:8px;
  }
  .so-final-btn{
    width:100%; padding:16px 20px; border-radius:14px; border:0;
    background:linear-gradient(135deg,#10b981,#059669); color:#fff;
    font-size:15px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:0 8px 20px rgba(16,185,129,0.35);
    transition:transform .15s, box-shadow .15s;
  }
  .so-final-btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 12px 26px rgba(16,185,129,0.45); }
  .so-final-btn:disabled{ opacity:.55; cursor:not-allowed; background:linear-gradient(135deg,#9ca3af,#6b7280); box-shadow:none; }
  .so-final-hint{ font-size:11.5px; color:#5b7a80; text-align:center; margin:0; }
  .so-final-hint b{ color:#059669; }
  .so-final-done{
    background:#eaf9f3; border:2px solid #10b981; border-radius:14px;
    padding:16px 20px; text-align:center;
  }
  .so-final-done b{ display:block; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#059669; margin-bottom:6px; }
  .so-final-done span{ font-size:20px; font-weight:800; color:#0f2b34; letter-spacing:0.05em; }
  .so-final-done small{ display:block; font-size:12.5px; color:#5b7a80; margin-top:8px; line-height:1.5; }