* { box-sizing: border-box; }
:root {
  --blue: #2563EB; --blue-dark: #1D4ED8; --orange: #F97316;
  --bg: #F1F5F9; --card: #fff; --border: #E7ECF3;
  --txt: #0F172A; --txt-soft: #64748B;
}
body {
  margin: 0; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 700px at 15% -10%, #DBEAFE 0%, transparent 55%),
              radial-gradient(1000px 700px at 100% 110%, #FFEDD5 0%, transparent 50%),
              var(--bg);
  color: var(--txt); display: flex; justify-content: center; padding: 24px 16px;
}

.shell {
  width: 100%; max-width: 1180px; background: var(--card); border-radius: 22px;
  box-shadow: 0 30px 80px -24px rgba(15,23,42,.25), 0 0 0 1px rgba(15,23,42,.04);
  overflow: hidden; display: flex; flex-direction: column;
}
@media (min-width: 901px) {
  /* Fill the available viewport height instead of stopping at a fixed
     640px — on a tall monitor that left a huge dead gray gap below the
     chat panel with nothing in it. Taller still, so a long conversation
     has real room to scroll through instead of a cramped little window. */
  .shell { height: min(960px, calc(100vh - 24px)); }
  body { padding: 12px 16px; }
}

.top {
  background: linear-gradient(115deg, var(--blue-dark) 0%, var(--blue) 55%, #3B82F6 100%);
  color: #fff; padding: 22px 28px; text-align: center; position: relative; overflow: hidden;
}
.top::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(240px 100px at 88% -30%, rgba(249,115,22,.35), transparent 70%);
}
.logo-full {
  height: 40px; margin-bottom: 10px; position: relative;
  filter: brightness(0) invert(1); /* solid white — the source logo's blue text was blending into the blue header */
}
.tagline { font-size: 13px; opacity: .9; margin-top: 4px; position: relative; }
.top-watermark {
  position: absolute; top: 50%; right: -10px; transform: translateY(-50%);
  height: 140%; max-height: 220px; opacity: .16; pointer-events: none;
  filter: brightness(0) invert(1); /* recolor the pale source art to solid white for contrast on the blue header */
}

.mobile-quicklinks { display: none; }

.grid { display: grid; grid-template-columns: 210px minmax(0,1fr) 210px; gap: 0; flex: 1; min-height: 0; }

.side { padding: 22px 18px; font-size: 12.5px; color: var(--txt-soft); }
.side h3 { font-size: 12.5px; color: var(--txt); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .04em; }
.side.left { border-right: 1px solid var(--border); }
.side.right { border-left: 1px solid var(--border); }
.pill-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pill-list li {
  background: #F8FAFC; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  font-size: 12px; line-height: 1.35;
}
.pill-list.links li { padding: 0; overflow: hidden; }
.pill-list.links li a {
  display: block; padding: 8px 10px; color: var(--txt); text-decoration: none; transition: background .15s;
}
.pill-list.links li a:hover { background: #EFF6FF; color: var(--blue); }
.side-cta { font-size: 12px; font-weight: 700; color: var(--blue); text-decoration: none; }
.side-cta:hover { text-decoration: underline; }

.chat-col { padding: 20px; min-width: 0; display: flex; min-height: 0; }
#chat-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff; }

.messages-wrap { position: relative; flex: 1; min-height: 0; display: flex; }

/* Scoped to the messages viewport (not the whole chat panel or page), so
   it sits just above the input row instead of covering it, and can never
   collide with the mobile bottom nav either. */
#scroll-top-btn {
  position: absolute; right: 14px; bottom: 14px; z-index: 20;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; color: var(--blue); font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,23,42,.12);
}

#messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #FAFBFD; }
.msg-row { display: flex; align-items: flex-end; gap: 7px; }
.msg-row.visitor { justify-content: flex-end; }
.msg-row .avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bubble { max-width: 76%; padding: 10px 14px; border-radius: 15px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg-row.visitor .bubble { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.msg-row.ai .bubble, .msg-row.admin .bubble { background: #fff; color: var(--txt); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.bubble .tag { font-size: 10px; text-transform: uppercase; opacity: .55; display: block; margin-bottom: 3px; font-weight: 700; }
.bubble .time { display: block; font-size: 10px; opacity: .55; margin-top: 5px; }
.bubble img.attachment { max-width: 100%; border-radius: 10px; margin-top: 6px; display: block; }

.turnstile-gate { padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; border-top: 1px solid var(--border); }
.gate-note { font-size: 11.5px; color: var(--txt-soft); margin: 0; }

.input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); align-items: center; }
.input-row textarea { flex: 1; height: 42px; border: 1.5px solid var(--border); border-radius: 11px; padding: 10px 13px; font-size: 13.5px; resize: none; max-height: 90px; font-family: inherit; line-height: 1.3; }
.input-row textarea:focus { outline: none; border-color: var(--blue); }
.input-row button { border: none; border-radius: 11px; cursor: pointer; height: 42px; flex-shrink: 0; }
#send-btn { background: var(--blue); color: #fff; padding: 0 18px; font-weight: 700; font-size: 13.5px; }
#attach-btn { background: var(--bg); font-size: 16px; width: 42px; }

.contact-form { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.contact-form input { border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.contact-form input:focus { outline: none; border-color: var(--blue); }
.contact-form button { background: var(--orange); color: #fff; border: none; border-radius: 10px; padding: 9px; font-weight: 700; cursor: pointer; }

.contact-link { background: none; border: none; color: var(--blue); font-size: 12px; font-weight: 600; padding: 8px 0 12px; cursor: pointer; text-align: center; }

.foot { text-align: center; font-size: 11px; color: var(--txt-soft); padding: 14px; border-top: 1px solid var(--border); }
.foot a { color: var(--blue); font-weight: 600; text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* Bottom app-nav height, reused by both the nav itself and the page's
   bottom padding so content never sits underneath it. */
:root { --bottom-nav-h: 58px; }

@media (max-width: 900px) {
  body { padding: 0; display: flex; flex-direction: column; min-height: 100dvh; }
  .shell { flex: 1; min-height: 0; padding-bottom: var(--bottom-nav-h); border-radius: 0; box-shadow: none; }
  .grid { grid-template-columns: 1fr; min-height: 0; }
  .side { display: none; }
  .chat-col { padding: 8px 8px 4px; min-height: 0; }
  #chat-panel { max-height: none; border-radius: 14px; }
  .top { padding: 16px 20px 12px; border-radius: 0; flex-shrink: 0; }
  .input-row { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

  .mobile-quicklinks {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: var(--bottom-nav-h); padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(15,23,42,.06);
  }
  .mobile-quicklinks a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    text-decoration: none; color: var(--txt-soft); font-size: 10.5px; font-weight: 600;
  }
  .mobile-quicklinks a .qi { font-size: 18px; line-height: 1; }
  .mobile-quicklinks a:active { color: var(--blue); }
}