/* ============================================================
   Zallixor Chat — Web  ·  web.css
   Desktop-only client for web-chat.zallixor.com.

   Layout follows the four-column workspace reference: a light
   canvas with the app floating on it as one rounded card, split
   into nav rail · conversation list · thread · profile panel.

   The accent stays Zallixor violet rather than the reference's
   blue, so this reads as the same product as the phone app even
   though the shell is completely different.

   No safe-area insets, no bottom nav, no PWA install, no touch
   gestures — this build assumes a mouse, a keyboard and a wide
   window, which is the whole reason it exists separately.
   ============================================================ */

:root {
  --canvas:      #e9ebf3;
  --surface:     #ffffff;
  --surface-2:   #f6f6fa;
  --surface-3:   #eeeef5;
  --ink:         #171622;
  --ink-2:       #45445a;
  --muted:       #7a798f;
  --line:        #e6e5ee;
  --line-soft:   #f0eff6;

  --accent:      #6d3ff2;
  --accent-deep: #5629d4;
  --accent-soft: #efe9fe;
  --accent-ink:  #4a1fb8;

  --ok:      #16a34a;
  --danger:  #dc2626;
  --unread:  #6d3ff2;

  --rail-w:    216px;
  --list-w:    332px;
  --panel-w:   306px;

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  --shadow-card: 0 24px 60px rgba(32, 28, 66, .13);
  --shadow-soft: 0 2px 8px rgba(32, 28, 66, .06);
  --shadow-pop:  0 12px 32px rgba(32, 28, 66, .16);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  /* Two soft blooms behind the card, echoing the reference's coloured
     shapes. Fixed, never animated — they're wallpaper, not an effect. */
  background-image:
    radial-gradient(680px 460px at 88% -8%, rgba(109, 63, 242, .16), transparent 60%),
    radial-gradient(560px 420px at -6% 104%, rgba(34, 211, 238, .14), transparent 62%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ── Scrollbars: thin, and only visible where there's overflow ── */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d5d4e2 transparent; }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: #d5d4e2; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Desktop-only gate
   ============================================================ */
.too-small {
  position: fixed; inset: 0; z-index: 999; display: none;
  place-items: center; text-align: center; padding: 40px;
  background: var(--canvas);
}
.too-small-inner { max-width: 380px; }
.too-small img { width: 64px; margin: 0 auto 18px; border-radius: 16px; }
.too-small h1 { font-size: 20px; margin: 0 0 8px; letter-spacing: -.01em; }
.too-small p { margin: 0 0 18px; color: var(--muted); }
@media (max-width: 899px) {
  .too-small { display: grid; }
  .shell, .boot { display: none !important; }
}

/* ============================================================
   Boot + auth
   ============================================================ */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--canvas); z-index: 200; transition: opacity .3s; }
.boot.gone { opacity: 0; pointer-events: none; }
.boot-inner { text-align: center; }
.boot-mark { width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 16px; box-shadow: var(--shadow-soft); }
.boot-bar { width: 148px; height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin: 0 auto; }
.boot-bar i { display: block; height: 100%; width: 30%; border-radius: 3px; background: var(--accent); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(420%); } }

.auth { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
.auth-card { width: 100%; max-width: 392px; background: var(--surface); border-radius: var(--r-lg); padding: 34px 32px; box-shadow: var(--shadow-card); }
.auth-card img { width: 52px; height: 52px; border-radius: 15px; margin-bottom: 18px; }
.auth-card h1 { font-size: 23px; margin: 0 0 6px; letter-spacing: -.02em; }
.auth-card > p { margin: 0 0 24px; color: var(--muted); }
.field-label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.field {
  width: 100%; padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 14px;
  transition: border-color .15s, background .15s;
}
.field:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.pw-wrap { position: relative; }
.pw-wrap .field { padding-right: 62px; }
.pw-wrap button { position: absolute; right: 10px; top: 10px; font-size: 13px; color: var(--accent); font-weight: 500; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--r-sm); font-weight: 550; font-size: 14px;
  background: var(--surface-3); transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(.97); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); filter: none; }
.btn-block { width: 100%; }
.btn-quiet { background: transparent; color: var(--accent); }
.auth-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.auth-foot { margin-top: 16px; text-align: center; font-size: 13px; color: var(--muted); }

/* ============================================================
   Shell — the floating four-column card
   ============================================================ */
.shell {
  height: 100vh; padding: 26px;
  display: grid; place-items: center;
}
.card {
  width: 100%; max-width: 1500px; height: 100%; max-height: 940px;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
  display: grid;
  grid-template-columns: var(--rail-w) var(--list-w) minmax(0, 1fr) var(--panel-w);
}
/* The profile panel is the first thing to go when the window narrows —
   it's supporting detail, while the list and thread are the product. */
@media (max-width: 1280px) {
  .card { grid-template-columns: var(--rail-w) var(--list-w) minmax(0, 1fr); }
  .panel { display: none; }
}
@media (max-width: 1080px) {
  .card { grid-template-columns: 72px var(--list-w) minmax(0, 1fr); }
  .rail { padding: 20px 12px; }
  .rail-brand span, .rail-item span, .rail-foot-label { display: none; }
  .rail-item { justify-content: center; }
}

/* ── Rail ── */
.rail { background: var(--surface); border-right: 1px solid var(--line-soft); padding: 22px 16px; display: flex; flex-direction: column; }
.rail-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 0 6px; }
.rail-brand img { width: 32px; height: 32px; border-radius: 9px; }
.rail-brand span { font-weight: 650; letter-spacing: -.02em; font-size: 15px; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; width: 100%;
  transition: background .14s, color .14s;
}
.rail-item svg { width: 19px; height: 19px; flex: 0 0 auto; }
.rail-item:hover { background: var(--surface-2); }
.rail-item.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.rail-count { margin-left: auto; background: var(--unread); color: #fff; font-size: 11px; font-weight: 650; border-radius: 20px; padding: 1px 7px; min-width: 20px; text-align: center; }
.rail-item.on .rail-count { background: var(--accent); }
.rail-spacer { flex: 1; }
.rail-foot { border-top: 1px solid var(--line-soft); padding-top: 14px; }
.rail-me { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); width: 100%; text-align: left; }
.rail-me:hover { background: var(--surface-2); }
.rail-me-name { font-weight: 550; font-size: 13.5px; line-height: 1.25; }
.rail-me-handle { font-size: 12px; color: var(--muted); }

/* ── Column 2: conversation list ── */
.list { border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.list-head { padding: 22px 20px 12px; }
.list-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.list-title h1 { font-size: 21px; margin: 0; letter-spacing: -.02em; }
.icon-btn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-2); transition: background .14s; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; color: var(--muted); }
.search input { width: 100%; padding: 9px 12px 9px 34px; border-radius: var(--r-sm); border: 1px solid transparent; background: var(--surface-2); }
.search input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.filters { display: flex; gap: 6px; padding: 12px 20px 6px; }
.chip { padding: 5px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--surface-2); }
.chip:hover { background: var(--surface-3); }
.chip.on { background: var(--accent); color: #fff; }
.conv-scroll { flex: 1; min-height: 0; padding: 6px 12px 16px; }

.conv {
  width: 100%; text-align: left; display: flex; gap: 11px; align-items: center;
  padding: 10px 10px; border-radius: var(--r-md); transition: background .12s;
}
.conv:hover { background: var(--surface-2); }
.conv.on { background: var(--accent-soft); }
.conv-body { flex: 1; min-width: 0; }
.conv-row1 { display: flex; align-items: baseline; gap: 8px; }
.conv-name { font-weight: 570; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { margin-left: auto; font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }
.conv-row2 { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
.conv-last { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.unread .conv-last { color: var(--ink-2); font-weight: 500; }
.conv.unread .conv-time { color: var(--accent); font-weight: 600; }
.pill { background: var(--unread); color: #fff; font-size: 11px; font-weight: 650; border-radius: 20px; padding: 1px 7px; min-width: 20px; text-align: center; }

/* ── Avatars ── */
.av { position: relative; flex: 0 0 auto; border-radius: 50%; overflow: visible; }
.av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface-3); display: block; }
.av-fb { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; background: var(--accent); }
.av-dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface); }

/* ── Column 3: thread ── */
.thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface-2); }
.thread-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 22px;
  background: var(--surface); border-bottom: 1px solid var(--line-soft); flex: 0 0 auto;
}
.thread-head-meta { flex: 1; min-width: 0; }
.thread-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.thread-presence { font-size: 12.5px; color: var(--muted); }
.thread-presence.live { color: var(--ok); }
.msgs { flex: 1; min-height: 0; padding: 22px 26px; display: flex; flex-direction: column; gap: 3px; }

.daysep { align-self: center; margin: 14px 0 10px; font-size: 11.5px; font-weight: 550; color: var(--muted); background: var(--surface-3); padding: 4px 12px; border-radius: 20px; }
.load-earlier { align-self: center; margin: 4px 0 12px; font-size: 12.5px; font-weight: 550; color: var(--accent); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 6px 15px; box-shadow: var(--shadow-soft); }

.bubble { max-width: min(560px, 66%); padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-wrap: break-word; position: relative; }
.bubble.theirs { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble.mine { align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; border-bottom-right-radius: 5px; }
/* Consecutive messages from the same person read as one block. */
.bubble.run.theirs { border-bottom-left-radius: 16px; border-top-left-radius: 5px; }
.bubble.run.mine { border-bottom-right-radius: 16px; border-top-right-radius: 5px; }
.bubble-sender { font-size: 12px; font-weight: 620; color: var(--accent-ink); margin-bottom: 3px; }
.bubble img.shot { border-radius: 11px; margin: 2px 0 4px; max-height: 320px; cursor: zoom-in; }
.bubble-meta { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 3px; font-size: 11px; opacity: .72; }
.bubble.theirs .bubble-meta { color: var(--muted); opacity: 1; }
.bubble a { color: inherit; }

.composer { flex: 0 0 auto; padding: 14px 22px 18px; background: var(--surface); border-top: 1px solid var(--line-soft); }
.composer-in { display: flex; align-items: flex-end; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 6px 6px 14px; transition: border-color .15s; }
.composer-in:focus-within { border-color: var(--accent); background: var(--surface); }
.composer textarea { flex: 1; border: 0; background: none; resize: none; padding: 8px 0; max-height: 148px; line-height: 1.45; }
.composer textarea:focus { outline: none; }
.send { width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: 0 0 auto; transition: background .15s, opacity .15s; }
.send:hover { background: var(--accent-deep); }
.send:disabled { opacity: .4; background: var(--accent); }
.send svg { width: 17px; height: 17px; }
.composer-hint { font-size: 11.5px; color: var(--muted); margin: 7px 2px 0; }

/* ── Column 4: profile panel ── */
.panel { border-left: 1px solid var(--line-soft); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.panel-scroll { flex: 1; min-height: 0; padding: 26px 22px; }
.panel-id { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.panel-id .av { margin: 0 auto 12px; }
.panel-name { font-weight: 620; font-size: 16.5px; letter-spacing: -.01em; }
.panel-handle { font-size: 13px; color: var(--muted); margin-top: 1px; }
.panel-bio { font-size: 13px; color: var(--ink-2); margin-top: 10px; line-height: 1.5; }
.panel-sec { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.panel-sec:last-child { border-bottom: 0; }
.panel-sec h3 { font-size: 13px; font-weight: 600; margin: 0 0 11px; }
.panel-sec h3 span { color: var(--muted); font-weight: 500; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.shots img { aspect-ratio: 1; object-fit: cover; border-radius: 9px; cursor: zoom-in; background: var(--surface-3); }
.panel-empty { font-size: 13px; color: var(--muted); }
.panel-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink-2); }
.panel-row:hover { background: var(--surface-2); }
.panel-row svg { width: 17px; height: 17px; color: var(--muted); }
.panel-row.danger { color: var(--danger); }
.panel-row.danger svg { color: var(--danger); }

/* ── Empty / loading states ── */
.empty { margin: auto; text-align: center; padding: 40px; max-width: 330px; }
.empty-mark { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 14px; }
.empty-mark svg { width: 25px; height: 25px; }
.empty h2 { font-size: 16px; margin: 0 0 6px; letter-spacing: -.01em; }
.empty p { margin: 0; color: var(--muted); font-size: 13.5px; }
.skel { background: var(--surface-3); border-radius: 8px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.skel-conv { display: flex; gap: 11px; align-items: center; padding: 10px; }

/* ── Overlays ── */
.veil { position: fixed; inset: 0; background: rgba(23, 22, 34, .42); display: grid; place-items: center; z-index: 120; padding: 30px; }
.dialog { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); width: 100%; max-width: 420px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.dialog-head { padding: 20px 22px 12px; }
.dialog-head h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.dialog-body { padding: 0 22px 20px; overflow-y: auto; }
.dialog-foot { padding: 14px 22px 20px; display: flex; gap: 8px; justify-content: flex-end; }
.person { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--r-md); }
.person:hover { background: var(--surface-2); }

.lightbox { position: fixed; inset: 0; background: rgba(15, 14, 24, .9); display: grid; place-items: center; z-index: 140; cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 10px; }

/* util.js emits `.toast .toast-<kind>` and toggles `.show` — matched here
   rather than reimplementing toast(), so both clients behave identically. */
#toast-host { position: fixed; bottom: 26px; left: 0; right: 0; display: grid; place-items: center; z-index: 160; pointer-events: none; }
.toast {
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 11px;
  font-size: 13.5px; box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { background: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Styles for markup produced by the shared util.js
   ------------------------------------------------------------
   verifiedBadge() emits an SVG plus a tappable wrapper, and the
   delegated listener in util.js opens an "About this profile"
   overlay built from .modal-overlay / .modal / .about-profile-*.
   Those classes live in the phone app's stylesheet, so without
   equivalents here the overlay would render unstyled. Reusing
   util.js verbatim is worth this small amount of CSS: it keeps
   one implementation of the badge across both clients.
   ============================================================ */
.verified-badge { width: 15px; height: 15px; vertical-align: -2px; margin-left: 4px; }
.verified-badge-tap { cursor: pointer; display: inline-flex; }
.name-row.big .verified-badge { width: 18px; height: 18px; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(23, 22, 34, .42);
  display: grid; place-items: center; z-index: 130; padding: 30px;
}
.modal {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  width: 100%; max-width: 400px; max-height: 80vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; }
.modal-head h3 { margin: 0; font-size: 16.5px; letter-spacing: -.01em; }
.about-profile-body { padding: 0 20px 20px; overflow-y: auto; }
.about-profile-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 6px 0 16px; }
.about-profile-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.about-profile-row-title { font-size: 13.5px; }
.about-profile-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.about-profile-icon svg { width: 20px; height: 20px; }
.center { text-align: center; }
.small { font-size: 12.5px; }
.name-row { font-weight: 620; }
.name-row.big { font-size: 17px; letter-spacing: -.01em; }
.rail-me-av { flex: 0 0 auto; width: 34px; height: 34px; }