:root{
    /* Dark theme (default) */
    --bg:#121917;
    --surface:#1A2422;
    --ink:#ECEFEC;
    --ink-soft:#93A29D;
    --pine:#2E4A44;
    --oat:#3C3628;
    --oat-text:#EDE6D6;
    --gold:#D0993D;
    --line:#2A3532;
    --radius:16px;
  }
  html.light{
    /* Light theme override */
    --bg:#EEF1F0;
    --surface:#FFFFFF;
    --ink:#20262B;
    --ink-soft:#5B6570;
    --pine:#33564E;
    --oat:#E4DCC8;
    --oat-text:#20262B;
    --gold:#B8862E;
    --line:#D9DFDC;
  }
  *{box-sizing:border-box;}
  html,body{
    height:100vh;
    height:calc(var(--app-vh, 1vh) * 100);
    height:100dvh;
    overflow:hidden; /* #messages scrolls internally; the outer page never does */
  }
  body{
    margin:0;
    background:var(--bg);
    font-family:'Inter',sans-serif;
    color:var(--ink);
    display:flex;
    justify-content:center;
  }
  #app{
    width:100%;
    max-width:480px;
    height:100vh; /* fallback for browsers without dvh/JS support */
    height:calc(var(--app-vh, 1vh) * 100);
    height:100dvh;
    background:var(--surface);
    display:flex;
    flex-direction:column;
    box-shadow:0 0 40px rgba(0,0,0,0.06);
  }

  /* header */
  header{
    background:var(--pine);
    color:#fff;
    padding:14px 18px 14px;
    position:sticky;
    top:0;
    z-index:10;
  }
  .header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .header-row + .header-row{margin-top:6px;}
  .wordmark{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:22px;
    letter-spacing:0.2px;
  }
  .status-line{
    font-size:12.5px;
    color:#CFE0DB;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .status-people{
    display:inline-flex;
    gap:2px;
    align-items:center;
  }
  .status-people svg{display:block;}
  .header-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
  }
  .icon-btn{
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.24);
    color:#fff;
    border-radius:10px;
    padding:8px 12px;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    transition:background 0.15s ease;
    white-space:nowrap;
  }
  .icon-btn:hover{background:rgba(255,255,255,0.24);}
  .icon-btn:active{background:rgba(255,255,255,0.32);}
  .icon-btn[hidden]{display:none;}
  .icon-btn:disabled{opacity:0.45;cursor:default;}
  .icon-btn.icon-only{
    padding:8px 10px;
    font-size:15px;
    line-height:1;
  }
  .icon-btn.icon-square{
    padding:8px;
  }
  .icon-btn.icon-square svg{display:block;}
  .icon-btn.icon-square.copied{background:var(--gold); border-color:var(--gold);}
  .lang-select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding:8px 22px 8px 10px;
    font-size:15px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='white'/></svg>");
    background-repeat:no-repeat;
    background-position:right 7px center;
    background-size:9px 6px;
  }
  .lang-select option{color:#000;}

  .deny-btn{
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.3);
    color:#fff;
    padding:8px 14px;
    border-radius:8px;
    font-weight:600;
    font-size:12.5px;
    cursor:pointer;
    font-family:'Inter',sans-serif;
  }
  .deny-btn:hover{background:rgba(255,255,255,0.18);}
  .deny-btn:disabled{opacity:0.45;cursor:default;}

  .panel{
    margin-top:12px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:12px;
    padding:12px;
    font-size:13px;
    display:none;
  }
  .panel.open{display:block;}
  .panel-row{
    display:flex;
    gap:8px;
    align-items:center;
  }
  .panel input[type=text]{
    flex:1;
    padding:8px 10px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.3);
    background:rgba(255,255,255,0.95);
    color:#20262B;
    font-size:12.5px;
    font-family:'Inter',sans-serif;
  }
  .panel button.copy{
    background:var(--gold);
    border:none;
    color:#fff;
    padding:8px 14px;
    border-radius:8px;
    font-weight:600;
    font-size:12.5px;
    cursor:pointer;
  }
  .panel-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
  }
  .close-btn{
    background:transparent;
    border:none;
    color:#fff;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    padding:0 2px;
    opacity:0.8;
    flex-shrink:0;
  }
  .close-btn:hover{opacity:1;}
  .distance-readout{
    font-size:14px;
    font-weight:600;
    color:#fff;
  }
  .distance-hint{color:#CFE0DB;font-weight:400;font-size:12.5px;margin-top:4px;}

  /* setup banner if no API key configured */
  #setupBanner{
    background:#3A2A16;
    color:#F4E9D8;
    font-size:13px;
    padding:14px 18px;
    line-height:1.5;
    display:none;
  }
  #setupBanner code{
    background:rgba(255,255,255,0.14);
    padding:1px 5px;
    border-radius:4px;
  }
  #setupBanner a{color:#F0C878;}

  /* chat body */
  #messages{
    flex:1;
    overflow-y:auto;
    padding:18px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:
      radial-gradient(circle at 20% 10%, rgba(51,86,78,0.08), transparent 40%),
      var(--bg);
  }
  .empty-state{
    margin:auto;
    text-align:center;
    color:var(--ink-soft);
    font-size:14px;
    max-width:280px;
    line-height:1.5;
  }
  .bubble-row{
    display:flex;
    width:100%;
  }
  .bubble-row.me{justify-content:flex-end;}
  .bubble-row.them{justify-content:flex-start;}
  .bubble{
    max-width:74%;
    padding:10px 13px;
    border-radius:var(--radius);
    font-size:14.5px;
    line-height:1.42;
    word-wrap:break-word;
  }
  .bubble-row.me .bubble{
    background:var(--pine);
    color:#fff;
    border-bottom-right-radius:4px;
  }
  .bubble-row.them .bubble{
    background:var(--oat);
    color:var(--oat-text);
    border-bottom-left-radius:4px;
  }
  /* Sent while the partner's tab was backgrounded and not yet confirmed
     reachable again (see sync-request/sync-response below). Purely a
     local hint to the sender — it does not mean the message failed. */
  .bubble-row.me.pending .bubble{
    font-style:italic;
    opacity:0.72;
    border:1px dashed rgba(255,255,255,0.5);
  }
  .bubble-time{
    display:block;
    font-size:10.5px;
    margin-top:4px;
    opacity:0.65;
  }
  .system-note{
    align-self:center;
    font-size:12px;
    color:var(--ink-soft);
    background:rgba(127,127,127,0.12);
    padding:5px 12px;
    border-radius:20px;
  }

  /* input bar */
  #inputBar{
    display:flex;
    gap:8px;
    padding:12px;
    border-top:1px solid var(--line);
    background:var(--surface);
  }
  #textInput{
    flex:1;
    padding:11px 14px;
    border-radius:22px;
    border:1px solid var(--line);
    font-family:'Inter',sans-serif;
    font-size:14.5px;
    outline:none;
    background:var(--bg);
    color:var(--ink);
  }
  #textInput:focus{border-color:var(--pine);}
  #sendBtn{
    background:var(--pine);
    color:#fff;
    border:none;
    border-radius:22px;
    padding:0 20px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
  }
  #sendBtn:disabled{opacity:0.45;cursor:default;}

  /* footer */
  #pageFooter{
    text-align:center;
    font-size:11px;
    color:var(--ink-soft);
    opacity:0.6;
    padding:8px 12px 14px;
    background:var(--surface);
  }
  #pageFooter a{color:inherit;}