/* =====================================================
   TENGOCHAT, the messaging surfaces.

   theme.css owns the design system: the palette, the type, the motion
   curves, and the components the newer screens are built from. This
   file owns the screens that came from the messenger, the chat list,
   the thread, the bubbles, the composer, sign in.

   It defines NO colours of its own. Every name it uses is mapped onto
   a token from theme.css in the block below, so the two surfaces can
   never drift apart: change violet in one place and the bubbles, the
   live ring and the send button all move together.
   ===================================================== */

:root {
  --bg-soft:     var(--bg-2);
  --border:      var(--hairline-2);
  --border-soft: var(--hairline);
  --text-dim:    var(--text-2);
  --text-faint:  var(--text-3);
  --accent:      var(--orange);
  --accent-deep: #E8752C;
  --accent-soft: var(--accent-dim);
  --btn:         var(--orange);
  --on-btn:      #2B1A08;
  --on-accent:   #2B1A08;
  --danger:      var(--bad);
  --danger-soft: rgba(255,84,112,.14);
  --success:     var(--ok);
  --font-body:   var(--font);
  --ease:        var(--out);
  --ease-io:     var(--snap);
  --tabs:        var(--nav);
  --bubble-r:    20px;
  --shadow-1:    var(--e1);
  --shadow-2:    var(--e2);

  /* the width of the first column on a wide screen */
  --col:         clamp(320px, 30vw, 400px);
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  overscroll-behavior: none;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}
body { position: fixed; inset: 0; }   /* iOS Safari: stops the page itself from ever scrolling */

button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
a { color: var(--accent); text-decoration: none; }
img, video { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; width: 22px; height: 22px; flex-shrink: 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); }

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.01em; margin: 0; }

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: 0s !important; transition-duration: 0s !important; }

/* =====================================================
   SIGN IN
   ===================================================== */

.auth {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: max(20px, var(--sat)) 20px max(20px, var(--sab));
  background: var(--bg);
  overflow-y: auto;
}
/* Two soft orbs in the brand colour, animated by transform only. They
   are what make the screen feel designed rather than defaulted. */
.auth::before, .auth::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px); opacity: .55; will-change: transform;
}
.auth::before { width: 420px; height: 420px; left: -140px; top: -120px; background: var(--accent); animation: orb 16s ease-in-out infinite alternate; }
.auth::after  { width: 360px; height: 360px; right: -120px; bottom: -100px; background: var(--accent-deep); animation: orb 20s ease-in-out infinite alternate-reverse; }
@keyframes orb { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.12); } }

.auth-card {
  position: relative; z-index: 1;
  width: min(420px, 100%);
  padding: 34px 30px 28px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border-soft);
  border-radius: 28px;
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  animation: rise .5s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.98); } to { opacity: 1; transform: none; } }

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--grad); display: grid; place-items: center;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent);
}
.brand-mark svg { width: 24px; height: 24px; color: var(--on-accent); stroke-width: 2.2; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.brand b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.1; }
.brand small { display: block; font-size: 13px; color: var(--text-faint); margin-top: 2px; }

.auth h1 { font-size: 26px; font-weight: 600; margin-bottom: 6px; }
.auth-sub { color: var(--text-dim); font-size: 14px; margin: 0 0 22px; line-height: 1.5; }

.auth-field { position: relative; margin-bottom: 12px; }
.auth-field input {
  width: 100%; height: 54px; padding: 18px 16px 4px;
  background: var(--surface-2); border: 1.5px solid transparent; border-radius: 16px;
  font-size: 16px;   /* 16px stops iOS zooming the page on focus */
  transition: border-color .15s ease, background .15s ease;
}
.auth-field label {
  position: absolute; left: 16px; top: 17px; font-size: 15px; color: var(--text-faint);
  pointer-events: none; transition: all .15s var(--ease-io); transform-origin: left top;
}
.auth-field input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.auth-field input:focus + label, .auth-field input:not(:placeholder-shown) + label { transform: translateY(-9px) scale(.78); color: var(--accent); }
.auth-field .eye { position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--text-faint); }
.auth-field .eye:active { background: var(--surface); }

.auth-btn {
  width: 100%; height: 54px; margin-top: 6px;
  background: var(--grad); color: var(--on-accent);
  border-radius: 16px; font-size: 16px; font-weight: 700;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .12s var(--ease), box-shadow .2s ease, filter .2s ease;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-btn:active { transform: scale(.985); }
.auth-btn.busy { filter: saturate(.6); }
.auth-btn .spin { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-err {
  margin: 0 0 12px; padding: 11px 14px; border-radius: 12px;
  background: var(--danger-soft); color: var(--danger); font-size: 13.5px; font-weight: 600;
  animation: shake .4s var(--ease);
}
@keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 13.5px; }
.auth-links a { color: var(--text-dim); font-weight: 600; }
.auth-links a:hover { color: var(--text); }

.auth-foot { margin-top: 22px; text-align: center; font-size: 12px; color: var(--text-faint); line-height: 1.5; }
.auth-foot svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }

/* the half second on a cold start while the token is checked */
.splash {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: grid; place-items: center;
}
.splash .brand-mark { width: 72px; height: 72px; border-radius: 22px; animation: pulse 1.6s ease-in-out infinite; }
.splash .brand-mark svg { width: 36px; height: 36px; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* a signed in account that still owes the site a setup step */
.gate { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: grid; place-items: center; padding: 24px; text-align: center; }
.gate-card { max-width: 380px; }
.gate-card .brand-mark { margin: 0 auto 20px; width: 64px; height: 64px; border-radius: 20px; }
.gate h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.gate p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; }
.gate .auth-btn { display: inline-flex; width: auto; padding: 0 26px; }
.gate .ghost-link { display: block; margin-top: 16px; font-size: 13.5px; color: var(--text-faint); }

/* =====================================================
   LAYOUT
   ===================================================== */

.app {
  position: fixed; inset: 0;
  display: grid; grid-template-columns: 1fr;
  background: var(--bg);
  animation: fadein .25s ease both;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.pane {
  position: relative; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
  background: var(--bg);
}
.pane-list { z-index: 1; }

/* On a phone the thread is a card that slides in over the list. The
   list dims and recedes underneath, which is what tells your eye it is
   still there behind the card. Transform only, so it runs on the GPU. */
.pane-thread {
  position: absolute; inset: 0; z-index: 3;
  transform: translate3d(100%, 0, 0);
  transition: transform .34s var(--ease);
  box-shadow: -12px 0 40px rgba(0,0,0,.35);
  will-change: transform;
}
.pane-thread[data-open="1"] { transform: translate3d(0, 0, 0); }
.pane-list::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .34s var(--ease); z-index: 5;
}
body.thread-open .pane-list::after { opacity: 1; }
body.thread-open .pane-list { transform: translate3d(-8%, 0, 0); transition: transform .34s var(--ease); }
.pane-list { transition: transform .34s var(--ease); }

@media (min-width: 880px) {
  /* One value for the column width, because the live screen has to line
     itself up against the same edge and cannot read a grid track. */
  .app { grid-template-columns: var(--col) 1fr; }
  .pane-list { border-right: 1px solid var(--border-soft); }
  .pane-thread { position: relative; transform: none !important; box-shadow: none; }
  .pane-list::after { display: none; }
  body.thread-open .pane-list { transform: none; }
  .pane-thread .back { display: none; }
}

/* =====================================================
   BARS AND BUTTONS
   ===================================================== */

.bar {
  height: calc(var(--bar) + var(--sat)); padding: var(--sat) 8px 0 8px;
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
  position: relative; z-index: 4;
}
.bar-title { flex: 1; font-family: var(--font-display); font-size: 22px; font-weight: 600; padding-left: 6px; }

.icon-btn {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  color: var(--text-dim); transition: background .15s ease, color .15s ease, transform .1s ease;
}
.icon-btn:hover { background: var(--surface); color: var(--text); }
.icon-btn:active { transform: scale(.92); background: var(--surface-2); }
.icon-btn.tiny { width: 30px; height: 30px; border-radius: 9px; }
.icon-btn.tiny svg { width: 16px; height: 16px; }
.bar-actions { display: flex; gap: 0; }

.peer { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 4px 6px; border-radius: 14px; text-align: left; }
.peer:active { background: var(--surface); }
.peer-text { min-width: 0; display: flex; flex-direction: column; }
.peer-text b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peer-text small { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peer-text small.online { color: var(--success); font-weight: 600; }
.peer-text small.online::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); margin-right: 5px; vertical-align: 1px; }

/* =====================================================
   AVATARS
   ===================================================== */

.avatar {
  position: relative; flex-shrink: 0;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--surface-2) center/cover no-repeat;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--text-dim);
  overflow: hidden;
}
.avatar[data-letter]::before { content: attr(data-letter); }
.avatar[data-letter] { background-image: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.avatar.sm { width: 34px; height: 34px; font-size: 14px; }
.avatar.lg { width: 92px; height: 92px; font-size: 34px; }
.avatar.xl { width: 120px; height: 120px; font-size: 44px; }

/* a presence dot, sized to the avatar it sits on */
.presence { position: relative; flex-shrink: 0; }
.presence::after {
  content: ''; position: absolute; right: 1px; bottom: 1px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--success); border: 2.5px solid var(--bg);
  opacity: 0; transform: scale(.5); transition: all .2s var(--ease);
}
.presence.on::after { opacity: 1; transform: scale(1); }

/* =====================================================
   SEARCH AND THE LIST
   ===================================================== */

.search-wrap { padding: 8px 12px 6px; flex-shrink: 0; }
.search {
  display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 13px;
  background: var(--surface); border-radius: 14px; border: 1.5px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
.search:focus-within { border-color: var(--accent); background: var(--surface-2); }
.search svg { width: 18px; height: 18px; color: var(--text-faint); }
.search input { flex: 1; min-width: 0; height: 100%; font-size: 15px; }
.search input::placeholder { color: var(--text-faint); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { width: 0; }

.row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; width: calc(100% - 12px); margin: 0 6px; text-align: left;
  border-radius: 16px; transition: background .12s ease, transform .1s ease;
  color: inherit;
}
.row:hover { background: var(--surface); }
.row:active { background: var(--surface-2); transform: scale(.985); }
.row.on { background: var(--accent-soft); }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row-top { display: flex; align-items: baseline; gap: 8px; }
.row-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.row-time { font-size: 12px; color: var(--text-faint); flex-shrink: 0; }
.row-last { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-dim); min-width: 0; }
.row-last > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-last .lock { width: 13px; height: 13px; color: var(--text-faint); flex-shrink: 0; }
.row.unread .row-last > span { color: var(--text); font-weight: 600; }
.row.unread .row-time { color: var(--accent); font-weight: 700; }

.badge {
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 100px;
  background: var(--accent); color: var(--on-accent);
  font-size: 11.5px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0;
  font-style: normal;
}
.badge.muted { background: var(--text-faint); }

.kind-chip {
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text-faint); flex-shrink: 0;
}
.kind-chip.channel { background: var(--accent-soft); color: var(--accent); }

.section-label { padding: 14px 18px 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }

.empty { padding: 44px 28px; text-align: center; }
.empty b { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.empty p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.empty .empty-mark { margin: 0 auto 16px; }

.skel-row { height: 66px; margin: 4px 12px; border-radius: 16px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* =====================================================
   TABS
   ===================================================== */

.tabs {
  height: calc(var(--tabs) + var(--sab)); padding: 0 6px var(--sab);
  display: flex; flex-shrink: 0;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid var(--border-soft);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-faint); font-size: 10.5px; font-weight: 700; position: relative;
  transition: color .15s ease;
}
.tab svg { width: 23px; height: 23px; transition: transform .2s var(--ease); }
.tab.on { color: var(--accent); }
.tab.on svg { transform: translateY(-1px); }
.tab:active svg { transform: scale(.88); }
.tab .dot { position: absolute; top: 9px; right: calc(50% - 15px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }

/* =====================================================
   MESSAGES
   ===================================================== */

.msgs { padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 2px; scroll-behavior: smooth; }
.msgs::before { content: ''; flex: 1; }   /* short threads sit at the bottom, like every messenger */

.day {
  align-self: center; margin: 14px 0 8px; padding: 4px 11px; border-radius: 100px;
  background: var(--surface); font-size: 11.5px; font-weight: 700; color: var(--text-faint);
  position: sticky; top: 6px; z-index: 2;
}
.sys { align-self: center; margin: 6px 0; padding: 5px 12px; border-radius: 100px; background: var(--surface); font-size: 12.5px; color: var(--text-faint); text-align: center; max-width: 86%; }

.msg {
  display: flex; align-items: flex-end; gap: 7px; max-width: 82%;
  position: relative; will-change: transform;
  animation: pop .22s var(--ease) both;
}
@keyframes pop { from { opacity: 0; transform: translate3d(0, 6px, 0) scale(.98); } to { opacity: 1; transform: none; } }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.them { align-self: flex-start; }
.msg.first { margin-top: 8px; }
.msg-av { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2) center/cover; flex-shrink: 0; align-self: flex-end; visibility: hidden; }
.msg.last .msg-av { visibility: visible; }
.msg-col { display: flex; flex-direction: column; min-width: 0; }
.msg.me .msg-col { align-items: flex-end; }
.msg-who { font-size: 12px; font-weight: 700; color: var(--accent); margin: 0 0 3px 12px; }

.bubble {
  position: relative; padding: 9px 13px 9px; border-radius: var(--bubble-r);
  font-size: 15.5px; line-height: 1.42; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
  max-width: 100%;
}
.msg.them .bubble { background: var(--surface-2); color: var(--text); border-bottom-left-radius: 8px; }
.msg.them.last .bubble { border-bottom-left-radius: 6px; }
.msg.me .bubble { background: var(--grad); color: var(--on-accent); border-bottom-right-radius: 8px; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent); }
.msg.me.last .bubble { border-bottom-right-radius: 6px; }
.msg.me .bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msg.them .bubble a { color: var(--accent); }
.bubble .mention { font-weight: 700; opacity: .95; }
.bubble.locked { display: flex; align-items: center; gap: 8px; font-style: italic; opacity: .75; font-size: 14px; }
.bubble.locked svg { width: 15px; height: 15px; }
.bubble.emoji-only { background: none !important; box-shadow: none !important; font-size: 44px; line-height: 1.15; padding: 2px 4px; }

.quote {
  display: block; margin: -3px -5px 7px; padding: 6px 10px; border-radius: 12px;
  background: rgba(0,0,0,.18); border-left: 3px solid currentColor; font-size: 13px; line-height: 1.35; opacity: .92;
}
.msg.them .quote { background: rgba(0,0,0,.14); border-left-color: var(--accent); }
.quote b { display: block; font-size: 12px; margin-bottom: 1px; }

.msg-media { border-radius: 18px; overflow: hidden; background: var(--surface); max-width: min(320px, 76vw); }
.msg-media img, .msg-media video { width: 100%; height: auto; max-height: 420px; object-fit: cover; }

.msg-voice { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.msg-voice .play { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; flex-shrink: 0; }
.msg.them .msg-voice .play { background: var(--accent); color: var(--on-accent); }
.msg-voice .play svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.msg-voice .wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 24px; }
.msg-voice .wave i { flex: 1; min-width: 2px; border-radius: 2px; background: currentColor; opacity: .55; }
.msg-voice small { font-size: 11.5px; opacity: .8; font-variant-numeric: tabular-nums; }

.msg-file { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 16px; background: var(--surface-2); color: var(--text); min-width: 200px; max-width: 300px; }
.msg.me .msg-file { background: var(--grad); color: var(--on-accent); }
.msg-file-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.14); display: grid; place-items: center; flex-shrink: 0; }
.msg-file-tx { min-width: 0; display: flex; flex-direction: column; }
.msg-file-tx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-file-tx small { font-size: 12px; opacity: .8; }

.msg-sticker { padding: 2px 0; }
.msg-sticker img { display: block; width: 138px; height: 138px; object-fit: contain; }
.msg-sticker .quote { display: block; margin-bottom: 4px; }

/* link preview under a bubble */
.lp {
  display: block; margin-top: 5px; max-width: min(340px, 78vw);
  border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border-soft);
  color: var(--text); animation: pop .25s var(--ease) both;
}
.lp img { width: 100%; height: 150px; object-fit: cover; }
.lp-tx { padding: 9px 12px 10px; }
.lp-tx small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
.lp-tx b { display: block; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-tx span { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg.me .reacts { justify-content: flex-end; }
.react {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 100px;
  background: var(--surface-2); border: 1.5px solid var(--border-soft); font-size: 13px; line-height: 1;
  animation: pop .2s var(--ease) both;
}
.react.mine { border-color: var(--accent); background: var(--accent-soft); }
.react b { font-size: 11.5px; font-weight: 800; }

.meta { display: flex; align-items: center; gap: 4px; margin: 3px 6px 0; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.msg.me .meta { justify-content: flex-end; }
.meta .edited { font-style: normal; opacity: .8; }
.tick { width: 15px; height: 15px; color: var(--text-faint); }
.tick.read { color: var(--accent); }
.msg.pending .meta::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--text-faint); border-top-color: transparent; animation: spin .8s linear infinite; }
.msg.failed .bubble { outline: 1.5px solid var(--danger); }
.msg.failed .meta { color: var(--danger); }

/* hover quick bar on desktop; on a phone the context sheet replaces it */
.quick {
  position: absolute; bottom: calc(100% - 4px); display: flex; gap: 1px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 100px; box-shadow: var(--shadow-1);
  opacity: 0; pointer-events: none; transform: translateY(4px) scale(.96); transition: all .15s var(--ease); z-index: 3;
}
.msg.me .quick { right: 0; } .msg.them .quick { left: 36px; }
.quick button { width: 32px; height: 32px; border-radius: 50%; font-size: 17px; display: grid; place-items: center; transition: transform .12s var(--ease); }
.quick button:hover { transform: scale(1.25); background: var(--surface-2); }
@media (hover: hover) { .msg:hover .quick { opacity: 1; pointer-events: auto; transform: none; } }
.msg.show-quick .quick { opacity: 1; pointer-events: auto; transform: none; }

/* swipe to reply */
.msg { transition: transform .2s var(--ease); }
.msg.swiping { transition: none; }
.swipe-hint { position: absolute; left: -34px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; }
.msg.me .swipe-hint { left: auto; right: -34px; }
.swipe-hint svg { width: 14px; height: 14px; }
.msg.swiping .swipe-hint { opacity: 1; }

/* the "you are up here, new stuff is down there" button */
.fab-down {
  position: absolute; right: 14px; bottom: calc(var(--bar) + 26px + var(--kb) + var(--sab)); z-index: 6;
  width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-2); display: grid; place-items: center; color: var(--text);
  transform: translateY(10px) scale(.9); opacity: 0; pointer-events: none; transition: all .2s var(--ease);
}
.fab-down.on { transform: none; opacity: 1; pointer-events: auto; }
.fab-down .badge { position: absolute; top: -6px; right: -4px; }

/* =====================================================
   PINNED, TYPING, REPLY, EDIT, MENTIONS
   ===================================================== */

.pinned { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border-soft); font-size: 13px; flex-shrink: 0; }
.pinned svg { width: 16px; height: 16px; color: var(--accent); }
.pinned span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.typing { display: flex; align-items: center; gap: 3px; padding: 4px 18px 6px; font-size: 12.5px; color: var(--text-faint); flex-shrink: 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: dots 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.typing span { margin-left: 6px; }
@keyframes dots { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.reply-strip, .edit-strip {
  display: flex; align-items: center; gap: 10px; margin: 0 10px; padding: 8px 8px 8px 12px;
  background: var(--surface); border-left: 3px solid var(--accent); border-radius: 12px 12px 0 0; font-size: 13px; flex-shrink: 0;
  animation: pop .2s var(--ease) both;
}
.reply-strip > div, .edit-strip > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reply-strip b, .edit-strip b { font-size: 12px; color: var(--accent); }
.reply-strip span, .edit-strip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); }

.mention-box {
  position: absolute; left: 12px; right: 12px; bottom: calc(var(--bar) + 20px + var(--kb) + var(--sab)); z-index: 7;
  max-height: 210px; overflow-y: auto; padding: 6px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border-soft); box-shadow: var(--shadow-2);
  animation: pop .18s var(--ease) both;
}
.mention-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 11px; text-align: left; }
.mention-item:hover, .mention-item.on { background: var(--surface-2); }
.mention-item b { font-size: 14px; } .mention-item small { display: block; font-size: 12px; color: var(--text-faint); }

/* =====================================================
   COMPOSER
   ===================================================== */

.composer {
  display: flex; align-items: flex-end; gap: 4px; flex-shrink: 0;
  padding: 8px 8px calc(8px + var(--kb) + var(--sab));
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid var(--border-soft);
  transition: padding .18s ease-out;
}
.composer .icon-btn { width: 40px; height: 40px; }
.input-wrap { flex: 1; min-width: 0; background: var(--surface); border-radius: 22px; padding: 0 6px; border: 1.5px solid transparent; transition: border-color .15s ease; }
.input-wrap:focus-within { border-color: var(--accent); }
#input { display: block; width: 100%; max-height: 132px; padding: 10px 10px; resize: none; line-height: 1.35; font-size: 16px; overflow-y: auto; scrollbar-width: none; }
#input::placeholder { color: var(--text-faint); }
.send {
  width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: var(--on-accent);
  display: grid; place-items: center; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .12s var(--ease); animation: pop .18s var(--ease) both;
}
.send:active { transform: scale(.88); }
.send svg { width: 19px; height: 19px; margin-left: 2px; }
.mic.rec { color: var(--danger); animation: recpulse 1s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { background: var(--danger-soft); } 50% { background: transparent; } }

.empty-thread { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.pane-thread:not(.has-chat) .empty-thread { display: flex; }
.pane-thread:not(.has-chat) .msgs, .pane-thread:not(.has-chat) .composer, .pane-thread:not(.has-chat) #threadBar { visibility: hidden; }
.empty-mark { width: 72px; height: 72px; border-radius: 22px; background: var(--surface); display: grid; place-items: center; color: var(--accent); margin-bottom: 18px; }
.empty-mark svg { width: 32px; height: 32px; }
.empty-thread h2 { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.empty-thread p { color: var(--text-dim); max-width: 300px; font-size: 14px; line-height: 1.55; margin: 0; }

/* =====================================================
   SHEETS, CONTEXT MENU, TOAST
   ===================================================== */

.sheet-host { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadein .2s ease; }
.sheet {
  position: relative; width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; scrollbar-width: none;
  padding: 8px 18px calc(22px + var(--sab)); background: var(--surface); border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.4); animation: up .3s var(--ease);
}
.sheet::-webkit-scrollbar { width: 0; }
@keyframes up { from { transform: translate3d(0, 40px, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 880px) {
  .sheet-host { align-items: center; }
  .sheet { border-radius: 26px; max-height: 84dvh; padding-bottom: 22px; animation: zoom .24s var(--ease); }
  .sheet .grip { display: none; }
}
@keyframes zoom { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.grip { width: 38px; height: 4px; border-radius: 2px; background: var(--border); margin: 6px auto 14px; }
.sheet h3 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.sheet .hint { font-size: 13px; color: var(--text-faint); line-height: 1.5; margin: 0 0 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field > span { font-size: 12px; font-weight: 700; color: var(--text-faint); }
.field input, .field textarea { width: 100%; padding: 12px 14px; background: var(--surface-2); border-radius: 13px; font-size: 16px; border: 1.5px solid transparent; }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.btn { width: 100%; padding: 14px; border-radius: 15px; background: var(--grad); color: var(--on-accent); font-weight: 700; font-size: 15px; margin-top: 6px; transition: transform .12s var(--ease); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--surface-2); color: var(--text); }
.btn.danger { background: transparent; color: var(--danger); }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 4px; text-align: left; border-bottom: 1px solid var(--border-soft); font-size: 15px; color: inherit; transition: background .12s ease; border-radius: 10px; }
.opt:hover { background: var(--surface-2); padding-left: 8px; }
.opt:last-child { border-bottom: none; }
.opt svg { color: var(--text-faint); }
.opt.danger { color: var(--danger); } .opt.danger svg { color: var(--danger); }
.opt small { display: block; font-size: 12px; color: var(--text-faint); }
.opt .tog { margin-left: auto; width: 40px; height: 24px; border-radius: 100px; background: var(--surface-2); position: relative; flex-shrink: 0; transition: background .15s ease; }
.opt .tog::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-faint); transition: all .15s var(--ease); }
.opt .tog.on { background: var(--accent); } .opt .tog.on::after { left: 19px; background: #fff; }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 12px; margin-bottom: 16px; }
.seg button { flex: 1; padding: 9px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--text-faint); }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.lock-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); font-size: 13px; line-height: 1.45; margin: 12px 0; }
.lock-note svg { color: var(--accent); flex-shrink: 0; width: 18px; height: 18px; }
.lock-note.open { background: var(--surface-2); } .lock-note.open svg { color: var(--text-faint); }
.sheet-center { text-align: center; padding-bottom: 6px; }
.sheet-center .avatar { margin: 6px auto 12px; }

/* the long press / right click menu */
.ctx { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; }
.ctx-bg { position: absolute; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadein .18s ease; }
.ctx-card { position: relative; width: min(300px, 88vw); animation: zoom .2s var(--ease); }
.ctx-emoji { display: flex; justify-content: space-between; padding: 8px; margin-bottom: 8px; border-radius: 100px; background: var(--surface); box-shadow: var(--shadow-2); }
.ctx-emoji button { width: 38px; height: 38px; border-radius: 50%; font-size: 24px; display: grid; place-items: center; transition: transform .12s var(--ease); }
.ctx-emoji button:active { transform: scale(1.35); }
.ctx-list { border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; padding: 4px; }
.ctx-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; text-align: left; }
.ctx-item:hover { background: var(--surface-2); }
.ctx-item svg { color: var(--text-faint); width: 20px; height: 20px; }
.ctx-item.danger { color: var(--danger); } .ctx-item.danger svg { color: var(--danger); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabs) + 22px + var(--sab)); z-index: 80;
  transform: translate3d(-50%, 20px, 0); opacity: 0; pointer-events: none;
  max-width: min(420px, 90vw); padding: 11px 18px; border-radius: 100px;
  background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; text-align: center;
  box-shadow: var(--shadow-2); transition: all .25s var(--ease);
}
.toast.show { transform: translate3d(-50%, 0, 0); opacity: 1; }
.toast.err { background: var(--danger); color: #fff; }

/* =====================================================
   EMOJI
   ===================================================== */

.emoji-host { position: fixed; left: 0; right: 0; bottom: calc(var(--kb) + var(--sab)); z-index: 30; height: 290px; background: var(--surface); border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; animation: up .25s var(--ease); }
@media (min-width: 880px) { .emoji-host { left: auto; right: 18px; bottom: 74px; width: 360px; border-radius: 20px; border: 1px solid var(--border-soft); box-shadow: var(--shadow-2); } }
.emoji-tabs { display: flex; padding: 6px 8px 0; gap: 2px; }
.emoji-tabs button { flex: 1; padding: 7px 0; border-radius: 10px; font-size: 18px; opacity: .5; }
.emoji-tabs button.on { opacity: 1; background: var(--surface-2); }
.emoji-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); padding: 6px 8px; gap: 2px; scrollbar-width: none; }
.emoji-grid button { aspect-ratio: 1; font-size: 26px; border-radius: 10px; display: grid; place-items: center; }
.emoji-grid button:active { background: var(--surface-2); transform: scale(1.2); }

/* =====================================================
   CALLS
   ===================================================== */

.call-host { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; flex-direction: column; animation: fadein .25s ease; }
.call-video { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, #23283a, #0b0d12 70%); }
.call-video video { width: 100%; height: 100%; object-fit: cover; }
.call-self { position: absolute; top: calc(16px + var(--sat)); right: 16px; width: 112px; height: 150px; border-radius: 18px; overflow: hidden; background: #111; box-shadow: var(--shadow-2); z-index: 2; border: 2px solid rgba(255,255,255,.18); }
.call-self video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.call-top { position: absolute; top: calc(60px + var(--sat)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; z-index: 2; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.call-top .avatar { box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 0 0 22px rgba(255,255,255,.03); margin-bottom: 8px; }
.call-top b { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.call-top small { font-size: 14.5px; opacity: .85; font-variant-numeric: tabular-nums; }
.call-actions { position: absolute; bottom: calc(40px + var(--sab)); left: 0; right: 0; display: flex; justify-content: center; gap: 20px; z-index: 2; }
.call-btn { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; display: grid; place-items: center; transition: transform .12s var(--ease), background .15s ease; }
.call-btn svg { width: 26px; height: 26px; }
.call-btn:active { transform: scale(.9); }
.call-btn.off { background: rgba(255,255,255,.9); color: #111; }
.call-btn.end { background: #E8564B; box-shadow: 0 8px 24px rgba(232,86,75,.45); }
.call-btn.accept { background: #35C48A; box-shadow: 0 8px 24px rgba(53,196,138,.45); animation: ring 1.2s ease-in-out infinite; }
@keyframes ring { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* =====================================================
   NOTIFICATIONS, STICKERS, EFFECTS, FOLDERS, THE TIER
   (drawn by extras.js)
   ===================================================== */

.push-offer { display: flex; align-items: center; gap: 10px; margin: 8px 10px 4px; padding: 11px 12px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 16px; animation: pop .25s var(--ease) both; }
.push-offer-tx { flex: 1; min-width: 0; }
.push-offer-tx b { display: block; font-size: 13.5px; font-weight: 700; }
.push-offer-tx span { display: block; font-size: 12px; color: var(--text-faint); line-height: 1.45; margin-top: 1px; }
.push-offer-yes { flex-shrink: 0; padding: 8px 13px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; }
.push-offer-no { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; color: var(--text-faint); font-size: 17px; line-height: 1; }

.stk-wrap { max-height: 46dvh; overflow-y: auto; margin: 0 -4px 6px; padding: 0 4px; scrollbar-width: none; }
.stk-pack + .stk-pack { margin-top: 16px; }
.stk-pack h5 { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; }
.stk-pack h5 em { font-style: normal; color: var(--accent); }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.stk-grid.effects { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
.stk, .stk-eff { aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; transition: background .12s ease, transform .12s var(--ease); }
.stk:hover, .stk-eff:hover { background: var(--surface-2); }
.stk:active, .stk-eff:active { transform: scale(.88); }
.stk img { width: 100%; height: 100%; object-fit: contain; }
.stk-eff { font-size: 27px; background: var(--surface-2); }
.stk-eff[data-locked] { opacity: .45; }
.stk-empty { text-align: center; padding: 22px 10px; }
.stk-empty b { display: block; font-size: 15px; font-weight: 700; }
.stk-empty span { display: block; font-size: 13px; color: var(--text-faint); margin-top: 4px; line-height: 1.5; }
.stk-store { max-height: 52dvh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: none; }
.stk-card { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.stk-card:last-child { border-bottom: none; }
.stk-card img, .stk-card-img { width: 46px; height: 46px; border-radius: 13px; object-fit: contain; background: var(--surface-2); flex-shrink: 0; }
.stk-card-tx { flex: 1; min-width: 0; }
.stk-card-tx b { display: block; font-size: 14.5px; font-weight: 700; }
.stk-card-tx small { display: block; font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.stk-btn { flex-shrink: 0; padding: 7px 14px; border-radius: 100px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; }
.stk-btn.off { background: var(--surface-2); color: var(--text-dim); }

.fx-layer { position: fixed; inset: 0; z-index: 85; pointer-events: none; overflow: hidden; }
.fx-layer span { position: absolute; top: -40px; will-change: transform, opacity; animation-name: fxfall; animation-timing-function: cubic-bezier(.2, .6, .35, 1); animation-fill-mode: both; }
@keyframes fxfall { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate3d(var(--dx, 0), 105vh, 0) rotate(260deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-layer { display: none; } }

.folder-bar { display: flex; gap: 6px; padding: 2px 12px 8px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.folder-bar::-webkit-scrollbar { display: none; }
.folder { flex-shrink: 0; padding: 6px 13px; border-radius: 100px; background: var(--surface); color: var(--text-dim); font-size: 13px; font-weight: 700; white-space: nowrap; transition: all .15s ease; }
.folder.on { background: var(--accent); color: var(--on-accent); }
#chatList .row[hidden] { display: none !important; }
.fld-list { margin-bottom: 4px; }
.fld-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-soft); }
.fld-row:last-child { border-bottom: none; }
.fld-edit { flex: 1; text-align: left; padding: 12px 4px; font-size: 15px; }
.fld-edit small { display: block; font-size: 12px; color: var(--text-faint); }
.fld-del { width: 32px; height: 32px; border-radius: 50%; color: var(--text-faint); font-size: 18px; line-height: 1; }

.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.wall { font-size: 11.5px; font-weight: 700; color: var(--text-dim); text-transform: capitalize; }
.wall span { display: block; aspect-ratio: 1; border-radius: 14px; margin-bottom: 5px; border: 2px solid transparent; background: var(--surface-2); }
.wall.on span { border-color: var(--accent); }
.wall[data-preview="dusk"]  span, .pane-thread[data-wall="dusk"]  .msgs { background-image: linear-gradient(160deg, #3b2f52, #6c4f6b 55%, #c98a76); }
.wall[data-preview="paper"] span, .pane-thread[data-wall="paper"] .msgs { background-image: linear-gradient(160deg, #efe6d8, #ddceb7); }
.wall[data-preview="mint"]  span, .pane-thread[data-wall="mint"]  .msgs { background-image: linear-gradient(160deg, #1f3d38, #3f7a68 60%, #9fd4b8); }
.wall[data-preview="ink"]   span, .pane-thread[data-wall="ink"]   .msgs { background-image: linear-gradient(160deg, #10131a, #232b3b 60%, #3c4a66); }
.wall[data-preview="sand"]  span, .pane-thread[data-wall="sand"]  .msgs { background-image: linear-gradient(160deg, #c9a271, #e8d3ae 55%, #f5ead6); }
.wall[data-preview="plum"]  span, .pane-thread[data-wall="plum"]  .msgs { background-image: linear-gradient(160deg, #2c1230, #5c2450 55%, #a9497c); }
.wall[data-preview="ocean"] span, .pane-thread[data-wall="ocean"] .msgs { background-image: linear-gradient(160deg, #0d2a40, #14567a 55%, #4fa5b8); }
.pane-thread[data-wall] .msgs { background-attachment: local; background-size: cover; background-position: center; }
.pane-thread[data-wall] .day, .pane-thread[data-wall] .sys { background: rgba(0,0,0,.35); color: #fff; backdrop-filter: blur(6px); }

.plus-btn svg { color: var(--text-faint); }
body[data-plus="1"] .plus-btn svg { color: var(--accent); fill: currentColor; }
.plus-list { margin: 0 0 16px; padding: 0 0 0 2px; list-style: none; }
.plus-list li { position: relative; padding: 5px 0 5px 24px; font-size: 14px; line-height: 1.45; }
.plus-list li::before { content: ''; position: absolute; left: 3px; top: 12px; width: 9px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* desktop only niceties */
@media (min-width: 880px) {
  .row { border-radius: 14px; }
  .msgs { padding: 14px 22px 10px; }
  .msg { max-width: 68%; }
}

/* =====================================================
   THE SHELL

   TengoChat is five destinations, not two panes. The list of chats is
   now one screen among several, and they all live in the first column
   with the navigation pinned under them. The thread still slides in
   over the top on a phone and still sits beside them on a desktop,
   which is the one piece of the old messenger layout worth keeping.
   ===================================================== */

.col1 {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--bg);
  transition: transform .34s var(--ease);
}
.col1 > .screen { position: absolute; inset: 0; }

/* the list screen keeps the messenger's internals, loses its old tabs */
#paneList .tabs { display: none; }

/* the dim-and-recede when the thread comes over the top */
.col1::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .34s var(--ease); z-index: 21;
}
body.thread-open .col1::after { opacity: 1; }
body.thread-open .col1 { transform: translate3d(-8%, 0, 0); }

@media (min-width: 880px) {
  .col1 { border-right: 1px solid var(--border-soft); }
  .col1::after { display: none; }
  body.thread-open .col1 { transform: none; }
}

/* the grip is a handle and a close button */
.grip { cursor: pointer; }
.sheet .grip { position: relative; }
.sheet .grip::after { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }