:root {
  --bg: #f4f2ee; --panel: #fff; --rail: #14171c; --rail-ink: #c9ccd2; --ink: #1c1f24; --muted: #6d727b;
  --line: #e6e2da; --accent: #e8563a; --accent-ink: #fff; --bubble-in: #f0ede7; --bubble-out: #1c1f24; --bubble-out-ink: #f6f4f0;
  --sel: #fbeae5; --warn: #fff4d6; --warn-ink: #7a5a00;
  --email: #6b7280; --wix: #3d5afe; --messenger: #0a7cff; --instagram: #d6249f; --whatsapp: #1fa855;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1114; --panel: #171a1f; --ink: #e8e6e1; --muted: #8b9098; --line: #262a31; --bubble-in: #22262d;
    --bubble-out: #e8563a; --bubble-out-ink: #fff; --sel: #2a1d1a; --warn: #3a3018; --warn-ink: #f0d58a; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
button { font: inherit; cursor: pointer; border: 0; border-radius: 8px; }
input, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }

.logo { font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: #fff; }
.logo span { color: var(--accent); margin-left: 2px; }

/* login */
.login { height: 100%; display: grid; place-items: center; background: var(--rail); }
.login form { width: min(340px, 90vw); display: grid; gap: 12px; }
.login .logo { font-size: 32px; }
.login p { color: var(--rail-ink); margin: 0 0 8px; }
.login input { padding: 12px 14px; border-radius: 10px; border: 1px solid #333842; background: #1d2128; }
.login button { padding: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.err { color: #ff8a73; min-height: 1.2em; font-size: 14px; }

/* layout */
.app { display: grid; grid-template-columns: 230px 340px 1fr; height: 100dvh; }
.rail { background: var(--rail); color: var(--rail-ink); padding: 18px 12px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.rail .logo { padding: 0 8px; }
.rail nav { display: grid; gap: 2px; flex: 1; align-content: start; }
.rail .group { margin: 14px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #7b818b; }
.rail .f { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; color: inherit; text-align: left; font-size: 14px; }
.rail .f:hover { background: #1f242b; }
.rail .f.on { background: #262b33; color: #fff; }
.rail .f .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rail .f .n { margin-left: auto; font-size: 12px; background: var(--accent); color: #fff; border-radius: 10px; padding: 0 7px; line-height: 18px; }
.rail .f .n:empty { display: none; }
.rail-foot { display: grid; gap: 4px; }
.ghost { background: none; color: inherit; padding: 8px 10px; text-align: left; font-size: 13px; opacity: .8; }
.ghost:hover { opacity: 1; background: rgba(127,127,127,.12); }

.list { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.list header { display: flex; gap: 8px; padding: 14px 14px 8px; }
.list input[type=search] { flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.menu-btn { display: none; background: none; color: var(--ink); font-size: 20px; }
.tabs { display: flex; gap: 4px; padding: 0 14px 10px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; color: var(--muted); padding: 6px 10px; font-size: 13px; font-weight: 500; }
.tabs button.on { background: var(--ink); color: var(--panel); }
#convList { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#convList li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
#convList li:hover { background: var(--bg); }
#convList li.sel { background: var(--sel); }
#convList .meta { min-width: 0; }
#convList .top { display: flex; gap: 6px; align-items: baseline; }
#convList .nm { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#convList .pv { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
#convList li.unread .nm, #convList li.unread .pv { color: var(--ink); font-weight: 700; }
#convList .rt { text-align: right; font-size: 11px; color: var(--muted); display: grid; gap: 4px; justify-items: end; align-content: start; }
#convList .badge { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; line-height: 17px; font-weight: 600; }
.acct { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-list { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; }

.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bubble-in); display: grid; place-items: center; font-weight: 700; position: relative; background-size: cover; background-position: center; color: var(--muted); }
.avatar .ch { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--panel); }

.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; color: #fff; }

.thread { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.thread .empty { margin: auto; color: var(--muted); }
.thread-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line); }
.thread-head .who { min-width: 0; flex: 1; }
.thread-head .name { font-weight: 700; }
.thread-head .sub { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.thread-head .actions { display: flex; gap: 4px; }
.thread-head .actions .ghost { border: 1px solid var(--line); opacity: 1; }
.back { display: none; background: none; color: var(--ink); font-size: 28px; line-height: 1; padding: 0 6px; }
.notes { padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--line); }
.notes textarea { width: 100%; min-height: 64px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--bg); resize: vertical; }

.msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.day { align-self: center; font-size: 11px; color: var(--muted); margin: 12px 0 4px; }
.m { max-width: min(560px, 78%); padding: 9px 13px; border-radius: 16px; word-wrap: break-word; font-size: 14px; line-height: 1.45; }
.m.in { align-self: flex-start; background: var(--bubble-in); border-bottom-left-radius: 4px; }
.m.out { align-self: flex-end; background: var(--bubble-out); color: var(--bubble-out-ink); border-bottom-right-radius: 4px; }
.m .tx { white-space: pre-wrap; }
.m .subj { font-weight: 700; font-size: 12px; margin-bottom: 4px; opacity: .8; }
.m .t { font-size: 10px; opacity: .6; margin-top: 4px; text-align: right; }
.m.failed { outline: 2px solid #e24b4b; }
.m .fail { font-size: 12px; color: #ffb3b3; margin-top: 4px; }
.m.in .fail { color: #c33; }
.m img { max-width: 240px; border-radius: 10px; display: block; margin-top: 4px; }
.m a { color: inherit; }
.warn { margin: 0 18px 8px; padding: 8px 12px; border-radius: 8px; background: var(--warn); color: var(--warn-ink); font-size: 13px; }

.composer { background: var(--panel); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.quick { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.quick:empty { display: none; }
.quick button { flex: none; background: var(--bg); color: var(--ink); border: 1px solid var(--line); font-size: 12px; padding: 5px 10px; border-radius: 14px; }
.composer .row { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); max-height: 180px; }
.composer .send { background: var(--accent); color: #fff; padding: 10px 18px; font-weight: 600; }
.composer .send:disabled { opacity: .5; }

/* mobile: one pane at a time */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; inset: 0 30% 0 0; z-index: 10; transform: translateX(-100%); transition: transform .2s; }
  .app.menu .rail { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
  .menu-btn, .back { display: block; }
  .thread { display: none; }
  .app.reading .list { display: none; }
  .app.reading .thread { display: flex; height: 100dvh; }
}