/* =========================================================================
   AI Support Agent — chat UI
   Inherits Friday Technologies main-site design system.
   --accent / --accent-ink / --accent-dim are injected by brand_style_tag()
   and default to the main site's --primary (#0E53BE) unless the bot owner
   has set a custom brand_color in the Support admin.
   ========================================================================= */

:root {
  /* Surface colours — main site palette */
  --paper:        #F2F7FE;  /* --bg-alt  */
  --paper-2:      #EAF1FE;  /* --primary-light */
  --card:         #FFFFFF;
  --sidebar-bg:   #FFFFFF;

  /* Text — main site palette */
  --ink:          #0A1A33;  /* --text */
  --ink-soft:     #3A4A66;  /* --text-2 */
  --ink-faint:    #6B7B96;  /* --muted */

  /* Borders */
  --line:         #E1E8F4;  /* --border */

  /* Accent — set by brand_style_tag(); fallback = main site primary */
  --accent:       #0E53BE;
  --accent-dim:   #EAF1FE;
  --accent-ink:   #0B4399;

  /* Bubble colours */
  --user-bg:      #EAF1FE;  /* light primary tint for outgoing */
  --user-ink:     #0A1A33;
  --bot-bg:       #FFFFFF;
  --bot-ink:      #0A1A33;

  /* Status */
  --good:         #0A8F5C;  /* --success */
  --warn:         #B86A00;  /* --warning */

  /* Geometry — main site uses big radii */
  --radius:       20px;     /* --radius */
  --radius-sm:    12px;     /* --radius-sm */
  --radius-bubble: 18px;

  /* Shadows */
  --shadow-sm:    0 2px 12px rgba(14,83,190,0.06);   /* --shadow */
  --shadow-md:    0 6px 24px rgba(14,83,190,0.09);   /* --shadow-md */
  --shadow-lg:    0 16px 48px rgba(14,83,190,0.13);  /* --shadow-lg */
}

/* The global dark mode shares the core site's graphite, violet and sage direction. */
[data-theme="dark"] {
  --paper:#16151d;--paper-2:#1b1a23;--card:#211f2a;--sidebar-bg:#1b1a23;
  --ink:#f4f1fa;--ink-soft:#c3bece;--ink-faint:#9691a1;--line:#383441;
  --accent:#a999d2;--accent-dim:#302d3e;--accent-ink:#d8d0f3;
  --user-bg:#302d3e;--user-ink:#f4f1fa;--bot-bg:#211f2a;--bot-ink:#f4f1fa;
  --good:#8edb96;--warn:#e5c57b;--shadow-sm:0 2px 12px rgba(0,0,0,.2);--shadow-md:0 12px 30px rgba(0,0,0,.28);--shadow-lg:0 22px 58px rgba(0,0,0,.4);
}

/* Midnight variant — bot-owner theme option: blue-toned */
[data-style="midnight"] {
  --paper:        #F2F7FE;
  --paper-2:      #EAF1FE;
  --card:         #FFFFFF;
  --sidebar-bg:   #FFFFFF;
  --ink:          #0A1A33;
  --ink-soft:     #3A4A66;
  --ink-faint:    #6B7B96;
  --line:         #E1E8F4;
  --user-bg:      #EAF1FE;
  --user-ink:     #0A1A33;
  --bot-bg:       #FFFFFF;
  --bot-ink:      #0A1A33;
  --good:         #0A8F5C;
  --warn:         #B86A00;
  --radius:       20px;
}
[data-style="midnight"][data-theme="dark"] {
  --paper:#16151d;--paper-2:#1b1a23;--card:#211f2a;--sidebar-bg:#1b1a23;
  --ink:#f4f1fa;--ink-soft:#c3bece;--ink-faint:#9691a1;--line:#383441;
  --user-bg:#302d3e;--user-ink:#f4f1fa;--bot-bg:#211f2a;--bot-ink:#f4f1fa;
}

/* Light and dark follow the visitor's chosen mode. Surfaces and text are neutral and meet WCAG AA in both;
   the owner's brand colour (--accent, --accent-text, --accent-ink, --accent-dim) comes from brand_style_tag(),
   which adjusts it per mode so buttons, links and the visitor's bubbles always stay readable. */
html[data-theme="light"]{
  --paper:#f7f7f8;--paper-2:#f1f1f3;--card:#ffffff;--sidebar-bg:#ffffff;
  --ink:#1b1a21;--ink-soft:#4b4955;--ink-faint:#67646f;--line:#e2e1e6;
  --user-bg:var(--accent-dim);--user-ink:#1b1a21;--bot-bg:#ffffff;--bot-ink:#1b1a21;
  --good:#0a7a4f;--warn:#9a5a00;--danger:#b42318;--danger-bg:#fdecea;--danger-line:#f3b8b1;
  --shadow-sm:0 1px 3px rgba(20,18,26,.06);--shadow-md:0 8px 24px rgba(20,18,26,.08);--shadow-lg:0 16px 45px rgba(20,18,26,.12);
}
html[data-theme="dark"]{
  --paper:#16151d;--paper-2:#191820;--card:#1d1b25;--sidebar-bg:#191820;
  --ink:#f4f1fa;--ink-soft:#cfcad9;--ink-faint:#aaa4b6;--line:#3a3644;
  --user-bg:var(--accent-dim);--user-ink:#f4f1fa;--bot-bg:#23212c;--bot-ink:#f4f1fa;
  --good:#6fd29a;--warn:#e9c77d;--danger:#ff9a90;--danger-bg:#3a1d20;--danger-line:#6e2d31;
  --shadow-sm:0 2px 12px rgba(0,0,0,.25);--shadow-md:0 12px 30px rgba(0,0,0,.32);--shadow-lg:0 22px 58px rgba(0,0,0,.45);
}
.brand-mark,.send-btn,.welcome .crest,.msg.user .avatar,.topbar-agent-initial,.intake-submit,.invoice-btn{color:var(--accent-text,#fff)}
.brand-mark *,.send-btn *{color:inherit}
.quick-reply:hover{background:var(--accent);color:var(--accent-text,#fff);border-color:var(--accent)}
.msg.user .bubble a{color:inherit;text-decoration:underline}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
html[data-theme] body,html[data-theme] button,html[data-theme] input,html[data-theme] textarea{font-family:'DM Sans',system-ui,sans-serif!important}html[data-theme] h1,html[data-theme] h2,html[data-theme] h3,html[data-theme] .welcome h2{font-family:'Libre Baskerville',Georgia,serif!important;font-weight:700!important;letter-spacing:-.012em!important}html[data-theme] h1{font-size:30px!important;line-height:1.25!important}html[data-theme] h2,html[data-theme] .welcome h2{font-size:24px!important;line-height:1.3!important}html[data-theme] h3{font-size:18px!important;line-height:1.4!important}
[data-style="midnight"] .brand-text strong,
[data-style="midnight"] .welcome h2,
[data-style="midnight"] h1,
[data-style="midnight"] h2,
[data-style="midnight"] h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* =========================================================================
   RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Prevent the whole page from bouncing/scrolling on mobile */
html {
  height: 100%;
  overflow: hidden;
  /* Prevents iOS rubber-band scroll on the root */
  overscroll-behavior: none;
}
body {
  height: 100%;
  overflow: hidden;
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
  /* Pins body so iOS doesn't scroll it when keyboard opens */
  position: fixed;
  width: 100%;
  overscroll-behavior: none;
}

/* =========================================================================
   APP SHELL
   ========================================================================= */
.app {
  display: flex;
  /* dvh = dynamic viewport height — shrinks when keyboard opens on Android/Chrome.
     iOS Safari uses the Visual Viewport API JS fix instead. */
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
  /* transform origin for the JS viewport resize handler */
  transform-origin: top left;
}
@supports not (height: 1dvh) {
  .app { height: 100vh; }
}

/* =========================================================================
   SIDEBAR
   ========================================================================= */
.sidebar {
  width: 300px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px 16px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--accent-text, #fff);
  border-radius: 14px;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.brand-mark-img { background: none; box-shadow: none; overflow: hidden; }
.brand-mark-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
}
.brand-text span {
  font-size: 11.5px; color: var(--ink-faint);
  letter-spacing: .05em; text-transform: uppercase; font-weight: 500;
}

.search-wrap { padding: 4px 16px 14px; }
#searchBox {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  /* 16px prevents iOS auto-zoom on focus */
  font-size: 16px;
  transition: border-color .14s, box-shadow .14s;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#searchBox:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.conv-list { flex: 1; overflow-y: auto; padding: 4px 12px; }
.conv-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13.5px;
  transition: background .12s;
  position: relative;
}
.conv-item:hover { background: var(--paper); }
.conv-item.active { background: var(--accent-dim); color: var(--ink); }
.conv-item .title {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.conv-item .del {
  opacity: 0; border: none; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: 15px; padding: 2px 5px;
  border-radius: 6px; transition: opacity .12s, color .12s;
}
.conv-item:hover .del { opacity: 1; }
.conv-item .del:hover { color: var(--accent-ink); }
.conv-empty { padding: 24px 16px; color: var(--ink-faint); font-size: 13px; text-align: center; }

.sidebar-foot {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.ghost-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border: none; background: none;
  color: var(--ink-soft);
  font: inherit; font-size: 13.5px;
  border-radius: 12px; cursor: pointer;
  text-decoration: none; font-weight: 500;
  transition: background .12s, color .12s;
}
.ghost-btn:hover { background: var(--paper); color: var(--ink); }

/* =========================================================================
   MAIN CONTENT
   ========================================================================= */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  z-index: 10;
  flex-shrink: 0;
}
.topbar-title { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title h1 {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 19px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-actions { display: flex; align-items: center; gap: 6px; }

.status {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-soft);
  padding: 4px 10px; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--line);
  flex-shrink: 0; font-weight: 500;
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.status.busy .dot { background: var(--warn); animation: pulse 1s infinite; }
.status.error .dot { background: var(--danger, #ef4444); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 12px; cursor: pointer;
  font-size: 16px;
  transition: all .14s;
  flex-shrink: 0;
}
.icon-btn:hover { color: var(--accent-ink); border-color: var(--accent-dim); background: var(--accent-dim); }

/* Handoff banner */
[hidden] { display: none !important; }   /* elements shown/hidden by script must stay hidden until shown */
.handoff {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin: 12px 20px 0;
  padding: 12px 18px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500;
}
.handoff a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.handoff a:hover { text-decoration: underline; }

/* =========================================================================
   CHAT AREA
   ========================================================================= */
.chat {
  flex: 1;
  overflow-y: auto;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent) 4%, transparent) 0%, transparent 40%);
}

.messages {
  max-width: 780px;
  margin: 0 auto;
  /* Proper top/left/right padding — pushes content from edges like WhatsApp */
  padding: 24px 20px 16px;
  display: flex; flex-direction: column; gap: 4px;
}

/* =========================================================================
   WELCOME SCREEN
   ========================================================================= */
.welcome { text-align: center; padding: 40px 16px 12px; }
.welcome .crest {
  width: 68px; height: 68px; margin: 0 auto 20px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text, #fff);
  border-radius: 22px; font-size: 30px;
  box-shadow: var(--shadow-md);
}
.welcome .crest-img { background: none; box-shadow: none; overflow: hidden; }
.welcome .crest-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 22px; }
.welcome h2 {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-weight: 600;
  font-size: 24px; margin-bottom: 10px;
}
.welcome p { color: var(--ink-soft); max-width: 420px; margin: 0 auto 24px; }

.suggestions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; max-width: 500px; margin: 0 auto;
}
.suggestion {
  text-align: left;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer; font: inherit; font-size: 13.5px;
  color: var(--ink-soft); font-weight: 500;
  transition: all .16s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-sm);
}
.suggestion:hover {
  border-color: var(--accent-ink); color: var(--ink);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
  background: var(--accent-dim);
}

/* =========================================================================
   MESSAGE BUBBLES — WhatsApp style
   ========================================================================= */
.msg {
  display: flex; gap: 8px; align-items: flex-end;
  margin-bottom: 2px;
}
.msg.user + .msg.bot,
.msg.bot + .msg.user { margin-top: 10px; }

.msg .avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  align-self: flex-end;
  box-shadow: var(--shadow-sm);
}
.msg.user { flex-direction: row-reverse; }
.msg.user .avatar { background: var(--accent); color: var(--accent-text, #fff); }
.msg.bot .avatar {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--accent-ink);
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.bubble {
  max-width: 75%;
  padding: 10px 14px 8px;
  border-radius: 18px;
  position: relative;
  box-shadow: var(--shadow-sm);
  line-height: 1.5;
}
.msg.user .bubble {
  background: var(--user-bg);
  color: var(--user-ink);
  border-bottom-right-radius: 5px;
  margin-right: 2px;
}
.msg.bot .bubble {
  background: var(--bot-bg);
  color: var(--bot-ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  margin-left: 2px;
}

.bubble-time {
  display: block; font-size: 11px; color: var(--ink-faint);
  margin-top: 4px; text-align: right;
}

.bubble p { margin: 0 0 8px; } .bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 6px 0 8px 18px; }
.bubble li { margin: 3px 0; }
.bubble code {
  background: rgba(0,0,0,.06); padding: 2px 6px;
  border-radius: 5px; font-size: .88em;
  font-family: ui-monospace, 'SF Mono', monospace;
}
[data-theme="dark"] .bubble code { background: rgba(255,255,255,.08); }
.bubble pre {
  background: var(--paper-2); padding: 12px 14px;
  border-radius: 10px; overflow-x: auto; margin: 8px 0;
  border: 1px solid var(--line);
}
.bubble pre code { background: none; padding: 0; }
.bubble h1,.bubble h2,.bubble h3 {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 10px 0 6px;
  line-height: 1.3; font-weight: 600;
}
.bubble a { color: var(--accent-ink); text-decoration: underline; }

/* Streaming cursor */
.cursor {
  display: inline-block; width: 6px; height: 15px;
  background: var(--accent); border-radius: 2px;
  vertical-align: text-bottom; animation: blink .9s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Typing indicator */
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 4px 2px; }
.typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); opacity: .5;
  animation: typing-bounce 1.3s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

.sources {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.source-chip {
  font-size: 11.5px; background: var(--accent-dim); color: var(--accent-ink);
  padding: 3px 10px; border-radius: 20px;
  display: flex; align-items: center; gap: 5px; font-weight: 500;
}
.msg-actions { display: flex; gap: 4px; margin-top: 6px; }
.msg-actions button {
  border: none; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: 12px;
  padding: 3px 8px; border-radius: 7px;
  display: flex; align-items: center; gap: 4px;
  transition: background .12s, color .12s;
}
.msg-actions button:hover { background: var(--paper-2); color: var(--accent-ink); }
.ungrounded-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--warn); margin-top: 6px;
}

/* =========================================================================
   COMPOSER — WhatsApp-style pill bar
   ========================================================================= */
.composer-wrap {
  border-top: 1px solid var(--line);
  background: var(--card);
  /* Proper side padding + safe area inset for iPhone home bar */
  padding: 12px 20px max(18px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  flex-shrink: 0;
  /* Prevent the wrap from being pushed behind the keyboard */
  position: relative;
  z-index: 10;
}

.composer {
  max-width: 780px; width: 100%; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 28px;
  padding: 6px 6px 6px 16px;
  box-sizing: border-box;
  transition: border-color .16s, box-shadow .16s;
}
.composer:focus-within {
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

#input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: none; background: none; resize: none;
  font: inherit; color: var(--ink);
  padding: 8px 0; max-height: 160px; line-height: 1.5;
  box-sizing: border-box;
  overflow-wrap: break-word; word-break: break-word;
  /* CRITICAL: iOS Safari zooms in when any input has font-size < 16px.
     Keep at 16px to prevent the viewport zoom bug on focus. */
  font-size: 16px;
  /* Prevent tap highlight flash on mobile */
  -webkit-tap-highlight-color: transparent;
  /* Prevent iOS from adding extra styles to the textarea */
  -webkit-appearance: none;
}
#input::placeholder { color: var(--ink-faint); }
#input:focus { outline: none; }

.mic-btn {
  border: none; background: none; cursor: pointer;
  padding: 6px; color: var(--ink-faint);
  font-size: 18px; border-radius: 50%;
  transition: color .12s, background .12s;
  width: 36px; height: 36px;
  display: grid; place-items: center;
}
.mic-btn:hover { color: var(--accent-ink); background: var(--accent-dim); }
.mic-btn.recording { color: var(--accent-ink); animation: pulse 1s infinite; }

/* Round green send button — WhatsApp style */
.send-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: var(--accent); color: var(--accent-text, #fff);
  cursor: pointer; display: grid; place-items: center;
  transition: transform .14s, opacity .14s, background .14s;
  box-shadow: var(--shadow-sm);
}
.send-btn:hover { transform: scale(1.06); background: var(--accent-ink); }
.send-btn:active { transform: scale(.96); }
.send-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.disclaimer {
  max-width: 780px; margin: 9px auto 0;
  text-align: center; font-size: 11.5px; color: var(--ink-faint);
}

/* =========================================================================
   MISC
   ========================================================================= */
.mobile-only { display: none; }
.scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 40; display: none;
  backdrop-filter: blur(2px);
}
.scrim.show { display: block; }
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: 11px 20px; border-radius: 12px;
  font-size: 13.5px; z-index: 60;
  box-shadow: var(--shadow-lg);
  font-weight: 500; animation: rise .25s ease;
  white-space: nowrap;
}
@keyframes rise { from{opacity:0;transform:translate(-50%,14px)} }

.conv-list::-webkit-scrollbar, .chat::-webkit-scrollbar { width: 5px; }
.conv-list::-webkit-scrollbar-thumb, .chat::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 9px;
}

/* =========================================================================
   RESPONSIVE — TABLET (≤ 820px)
   ========================================================================= */
@media (max-width: 820px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-only { display: grid; }
  .scrim.show { display: block; }
  .suggestions { grid-template-columns: 1fr; }
  .bubble { max-width: 84%; }
  .messages      { padding: 20px 16px 12px; }
  .composer-wrap { padding: 12px 16px 16px; }
  .topbar        { padding: 12px 16px; }
  .handoff       { margin: 12px 16px 0; }
}

/* =========================================================================
   RESPONSIVE — MOBILE (≤ 600px)
   Full WhatsApp experience: proper side gutters on all sides
   ========================================================================= */
@media (max-width: 600px) {
  .messages {
    padding: 16px 12px 10px;
    gap: 3px;
  }
  .composer-wrap {
    padding: 10px 12px 16px;
  }
  .composer {
    border-radius: 24px;
    padding: 5px 5px 5px 14px;
  }
  .topbar { padding: 12px 14px; }
  .handoff { margin: 10px 12px 0; border-radius: var(--radius-sm); }
  .intake-form { padding-left: 4px; padding-right: 4px; }
  .bubble { max-width: 88%; }
  .msg .avatar { width: 28px; height: 28px; font-size: 12px; }
  .welcome { padding: 28px 12px 8px; }
  .welcome h2 { font-size: 22px; }
  .welcome .crest { width: 58px; height: 58px; font-size: 26px; }
  .send-btn { width: 40px; height: 40px; }
}

/* =========================================================================
   WIDGET MODE (?widget=1)
   ========================================================================= */
.widget-mode, .widget-mode body { height: 100%; overflow: hidden; }
.widget-mode .sidebar { display: none; }
.widget-mode .app { height: 100vh; }
.widget-mode .main { width: 100%; }
.widget-mode .topbar { padding: 10px 16px; }
.widget-mode .topbar-title h1 { font-size: 16px; }
.widget-mode #menuBtn,
.widget-mode .menu-btn { display: none; }
/* KEY FIX: proper side padding in widget so chat never touches the edges */
.widget-mode .messages { padding: 16px 14px 8px; }
.widget-mode .composer-wrap { padding: 10px 14px 14px; }
.widget-mode .bubble { max-width: 88%; }
.widget-mode .disclaimer { display: none; }
.widget-mode .welcome { padding: 20px 10px 4px; }
.widget-mode .welcome h2 { font-size: 20px; }
.widget-mode .suggestions { grid-template-columns: 1fr; }
.widget-mode .handoff { margin: 10px 14px 0; }

/* =========================================================================
   PRE-CHAT INTAKE FORM
   ========================================================================= */
.welcome.intake { padding-top: 28px; }
.intake-form {
  max-width: 380px; margin: 18px auto 0;
  text-align: left; display: flex; flex-direction: column; gap: 14px;
}
.intake-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); letter-spacing: .02em;
}
.intake-form input, .intake-form textarea {
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--card); color: var(--ink);
  font: inherit; font-weight: 400;
  /* 16px minimum to prevent iOS auto-zoom */
  font-size: 16px;
  resize: vertical;
  transition: border-color .14s, box-shadow .14s;
  -webkit-appearance: none;
}
.intake-form input:focus, .intake-form textarea:focus {
  outline: none; border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.intake-hint { font-size: 11.5px; color: var(--ink-faint); margin: -4px 0 2px; }
.intake-submit {
  padding: 12px 16px; border: none; border-radius: 14px;
  background: var(--accent); color: var(--accent-text, #fff);
  font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background .14s, transform .12s;
  box-shadow: var(--shadow-sm);
}
.intake-submit:hover { background: var(--accent-ink); transform: translateY(-1px); }
.intake-submit:active { transform: translateY(0); }
.intake-submit:disabled { opacity: .6; cursor: wait; transform: none; }
.intake-error {
  font-size: 12.5px; color: var(--danger, #b42318); background: var(--danger-bg, #fdecea);
  border: 1px solid var(--danger-line, #f3b8b1); border-radius: 10px; padding: 9px 13px;
}

/* Invoice button */
.invoice-cta { margin-top: 10px; }
.invoice-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 12px;
  background: var(--accent); color: var(--accent-text, #fff);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background .14s, transform .12s;
}
.invoice-btn:hover { background: var(--accent-ink); transform: translateY(-1px); }
.bubble a.invoice-btn, .bubble a.invoice-btn:hover { color: var(--accent-text, #fff); text-decoration: none; }   /* the bubble's link colour made the label invisible */

/* ---- Topbar agent avatar ---- */
.topbar-agent-pic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent-dim);
  box-shadow: var(--shadow-sm);
}
.topbar-agent-initial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text, #fff);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.topbar-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-title > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar-title h1 {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
/* Inline status under name in topbar */
.topbar-title .status {
  margin-top: 2px;
  font-size: 11px;
  padding: 2px 8px;
  border: none;
  background: none;
  color: var(--good);
  font-weight: 600;
  letter-spacing: .01em;
}
.topbar-title .status .dot {
  width: 6px; height: 6px;
  background: var(--good);
}

/* Time + ticks inside visitor bubbles: only the "WhatsApp style" look (wa.css) shows them. */
.wa-meta { display: none; }
.human-tag{display:block;font-size:11px;font-weight:600;opacity:.7;margin-bottom:2px}

/* Suggested replies after an answer */
.chips-row{display:flex;flex-wrap:wrap;gap:8px;padding:2px 16px 12px;max-width:100%}
.chip-reply{border:1.5px solid var(--accent,#0e53be);color:var(--accent,#0e53be);background:transparent;border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-height:40px;line-height:1.2;transition:background .15s,color .15s}
.chip-reply:hover,.chip-reply:focus-visible{background:var(--accent,#0e53be);color:var(--accent-text,#fff);outline:none}
@media (prefers-reduced-motion:reduce){.chip-reply{transition:none}}