:root{
    --ink: #10203A;      /* brand dark navy — used for text/icons on light or gold surfaces */
    --panel: #FFFFFF;     /* main panel + bot bubble background */
    --panel-2: #F1F4FA;   /* light blue-grey secondary surface (inputs, chips, badges) */
    --line: #E1E7F2;      /* light border */
    --paper: #DCE7FB;     /* light blue tint — customer bubble background */
    --pass: #2E9E85;      /* teal accent, matches the site's nav highlight */
    --warn: #F0C25B;      /* gold — matches the site's "Get Help Now" CTA */
    --fail: #C0392B;
    --text-hi: #FFFFFF;   /* light text — reserved for the blue header/gold surfaces */
    --text-lo: #6B7A90;   /* medium grey secondary text on light backgrounds */
    --brand-blue: #3D6FE5;
    --brand-blue-2: #2E56C4;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family: 'Iowan Old Style','Palatino Linotype','Georgia',serif;
    background: transparent;
    color: var(--ink);
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    min-height:100vh;
    padding:24px;
  }
  .sans{ font-family: -apple-system, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; }

  /* ---------- Launcher ---------- */
  #launcher{
    position:fixed;
    bottom:28px;
    right:28px;
    width:64px;
    height:64px;
    border-radius:16px;
    background: var(--warn);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow: 0 10px 30px rgba(16,32,58,0.28);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  #launcher:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16,32,58,0.34); }
  #launcher svg{ width:26px; height:26px; }
  #launcher .dot{
    position:absolute;
    top:10px; right:10px;
    width:9px; height:9px;
    border-radius:50%;
    background: var(--pass);
    box-shadow: 0 0 0 3px var(--warn);
  }

  /* ---------- Panel ---------- */
  #panel{
    position:fixed;
    bottom:28px;
    right:28px;
    width:380px;
    max-width: calc(100vw - 32px);
    height:660px;
    max-height: calc(100vh - 56px);
    background: var(--panel);
    border:1px solid var(--line);
    border-radius:18px;
    display:none;
    flex-direction:column;
    overflow:hidden;
    box-shadow: 0 24px 60px rgba(16,32,58,0.22);
  }
  #panel.open{ display:flex; }

  #head{
    padding:16px 18px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    gap:12px;
  }
  #head .mark{
    width:34px; height:34px;
    border-radius:9px;
    background: var(--ink);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  #head .mark svg{ width:18px; height:18px; }
  #head .titles{ line-height:1.25; }
  #head .titles .t1{ font-family: 'Georgia', serif; font-size:15px; letter-spacing:.2px; color:#FFFFFF; }
  #head .titles .t2{ font-size:11.5px; color:rgba(255,255,255,0.82); }
  #head .status{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,0.82); }
  #head .status .led{ width:7px; height:7px; border-radius:50%; background:var(--pass); }
  #closeBtn{
    margin-left:8px;
    background:none; border:none; color:rgba(255,255,255,0.82);
    cursor:pointer; font-size:18px; line-height:1;
    padding:2px 4px;
  }
  #closeBtn:hover{ color:#FFFFFF; }

  #thread{
    flex:1;
    overflow-y:auto;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .msg-group{
    display:flex;
    flex-direction:column;
    max-width:86%;
  }
  .msg-group.user{ align-self:flex-end; align-items:flex-end; }
  .msg-group.bot{ align-self:flex-start; align-items:flex-start; }

  .msg{
    padding:10px 13px;
    border-radius:12px;
    font-size:14px;
    line-height:1.5;
    white-space:pre-wrap;
  }
  .msg.bot{
    background: var(--panel);
    border:1px solid var(--line);
    border-bottom-left-radius:3px;
  }
  .msg.user{
    background: var(--paper);
    color: var(--ink);
    border-bottom-right-radius:3px;
    font-family: -apple-system, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  }
  .msg.bot a{ color: var(--warn); }

  .msg-meta{
    font-family: -apple-system, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size:10.5px;
    color: var(--text-lo);
    margin-top:4px;
    padding: 0 3px;
  }

  .awaiting-msg{
    font-family: -apple-system, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size:11px;
    font-style: italic;
    color: var(--text-lo);
    margin-top:5px;
    padding: 0 3px;
  }

  .system-msg{
    align-self:center;
    font-family: -apple-system, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size:11.5px;
    font-style: italic;
    color: var(--text-lo);
    text-align:center;
    padding: 2px 10px;
  }

  /* ---------- Pre-chat form ---------- */
  #preChat{
    flex:1;
    min-height:0;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    padding:22px 20px;
    font-family: -apple-system, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  }
  #preChat .pc-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-family: 'Georgia', serif;
    font-size:18px;
    color: var(--ink);
    margin-bottom:6px;
  }
  #preChat .pc-title .dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background: var(--pass);
    flex-shrink:0;
  }
  #preChat .pc-sub{
    font-size:13px;
    color: var(--text-lo);
    line-height:1.5;
    margin-bottom:20px;
  }
  #preChat label{
    font-size:11.5px;
    color: var(--text-lo);
    margin-bottom:6px;
    display:block;
  }
  #preChat .field{ margin-bottom:14px; }
  #preChat .field-hint{
    font-size:11px;
    font-style: italic;
    color: var(--text-lo);
    margin-top:5px;
    line-height:1.4;
  }
  #preChat input, #preChat textarea{
    width:100%;
    background: var(--panel-2);
    border:1px solid var(--line);
    border-radius:9px;
    color: var(--ink);
    font-family: inherit;
    font-size:13.5px;
    padding:10px 12px;
  }
  #preChat textarea{ resize:none; height:76px; line-height:1.45; }
  #preChat input:focus, #preChat textarea:focus{ outline:none; border-color:var(--warn); }
  #preChat .pc-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
  #preChat .pc-chip{
    font-size:11.5px;
    color: var(--text-lo);
    background: var(--panel-2);
    border:1px solid var(--line);
    padding:6px 10px;
    border-radius:16px;
    cursor:pointer;
  }
  #preChat .pc-chip:hover{ border-color: var(--warn); color: var(--ink); }
  .pc-submit-wrap{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  #preChatSubmit{
    background: var(--warn);
    color: var(--ink);
    border:none;
    border-radius:10px;
    padding:12px 16px;
    font-size:14px;
    font-family: inherit;
    font-weight:600;
    cursor:pointer;
    transition: filter .15s ease;
  }
  #preChatSubmit:hover{ filter:brightness(1.08); }
  #preChat .pc-error{ font-size:11.5px; color: var(--fail); margin: -8px 0 12px; display:none; }

  #chatScreen{
    display:none;
    flex-direction:column;
    flex:1;
    min-height:0;
  }

  .chip-row{
    display:flex; flex-wrap:wrap; gap:8px;
    padding: 0 18px 14px;
  }
  .chip{
    font-family: -apple-system, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size:12px;
    color: var(--ink);
    background: var(--panel-2);
    border:1px solid var(--line);
    padding:7px 11px;
    border-radius:20px;
    cursor:pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .chip:hover{ border-color: var(--warn); background: var(--paper); }

  #endBanner{
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 14px;
    background: var(--panel-2);
    border-top:1px solid var(--line);
    font-family: -apple-system, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size:12px;
    color: var(--text-lo);
  }
  #endBanner .end-text{ flex:1; line-height:1.4; }
  #endBanner .end-btns{ display:flex; gap:8px; flex-shrink:0; }
  #endBanner button{
    font-family: inherit;
    font-size:12px;
    padding:6px 12px;
    border-radius:14px;
    cursor:pointer;
    border:1px solid var(--line);
    background:none;
    color: var(--ink);
  }
  #endResumeBtn{
    background: var(--warn);
    color: var(--ink);
    border:none;
    font-weight:600;
  }
  #endBanner button:hover{ filter:brightness(1.08); }

  #inputRow{
    border-top:1px solid var(--line);
    padding:12px;
    display:flex;
    gap:8px;
    background: var(--panel);
  }
  #inputRow textarea{
    flex:1;
    resize:none;
    background: var(--panel-2);
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--ink);
    font-family: -apple-system, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size:13.5px;
    padding:10px 12px;
    height:40px;
    line-height:1.3;
  }
  #inputRow textarea:focus{ outline:none; border-color:var(--warn); }
  #sendBtn{
    background: var(--warn);
    border:none;
    border-radius:10px;
    width:40px; height:40px;
    flex-shrink:0;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: filter .15s ease;
  }
  #sendBtn:hover{ filter:brightness(1.08); }
  #sendBtn:disabled{ opacity:.5; cursor:default; }
  #sendBtn svg{ width:17px; height:17px; }

  .typing-row{ display:flex; align-items:center; gap:8px; }
  .typing-label{ font-size:12.5px; color: var(--text-lo); font-style: italic; }
  .typing{ display:flex; gap:4px; padding:4px 2px; }
  .typing span{
    width:6px; height:6px; border-radius:50%;
    background: var(--text-lo);
    animation: blink 1.2s infinite ease-in-out;
  }
  .typing span:nth-child(2){ animation-delay:.15s; }
  .typing span:nth-child(3){ animation-delay:.3s; }
  @keyframes blink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }

  #thread::-webkit-scrollbar{ width:8px; }
  #thread::-webkit-scrollbar-thumb{ background: var(--line); border-radius:8px; }