/* SkyRock Crew Chat: two-pane messenger. Channel list | conversation; panes swap on phones. */
:root {
  --bg: #eef1f4; --panel: #ffffff; --ink: #18212b; --muted: #5f6c79; --line: #d9dfe5;
  --accent: #1f5f8b; --accent-ink: #ffffff; --mine: #d8e8f4; --theirs: #ffffff; --hi: #e8a33d; --danger: #b3382c;
  --wall: #e4e9ee;
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11161c; --panel: #18202a; --ink: #e6ebf0; --muted: #93a0ad; --line: #2a3542;
    --accent: #6fb0dc; --accent-ink: #0d1620; --mine: #1e3a52; --theirs: #1f2933; --hi: #f0b45a; --danger: #e07a6e;
    --wall: #0e1318; color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.45 var(--body); overflow: hidden; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; font-size: 16px; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.primary { border: 0; background: var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 12px 16px; font-weight: 600; }
.primary:disabled { opacity: .5; }
.ghost { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 10px; padding: 8px 12px; }
.small { padding: 7px 12px; font-size: 14px; border-radius: 8px; }

/* ---------- sign in ---------- */
.auth { height: 100%; overflow-y: auto; display: grid; place-items: center;
  padding: calc(24px + var(--st)) max(20px, var(--sr)) calc(24px + var(--sb)) max(20px, var(--sl)); }
.authbox { width: 100%; max-width: 380px; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 24px; }
.logo img { border-radius: 16px; margin-bottom: 8px; }
.logo b { font: 700 38px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.logo span { font: 600 15px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
#authForm { display: flex; flex-direction: column; gap: 14px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.tabs button { border: 0; background: transparent; padding: 9px; border-radius: 8px; font-weight: 600; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
#authForm label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
#authForm input { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 10px; padding: 12px; font-weight: 400; }
.err { margin: 0; color: var(--danger); font-size: 14px; }
.fine { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- app shell ---------- */
.app { height: 100%; display: grid; grid-template-columns: 340px 1fr; max-width: 1200px; margin: 0 auto; }
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); }
.list { border-right: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 8px; flex: none; min-height: 56px;
  padding: calc(8px + var(--st)) max(12px, var(--sr)) 8px max(16px, var(--sl)); border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.brand b { font: 700 27px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.brand span { font: 600 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.iconbtn { border: 0; background: transparent; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex: none; }
.iconbtn:active, .iconbtn:hover { background: var(--bg); color: var(--ink); }
.iconbtn svg { width: 23px; height: 23px; }

.banner { margin: 10px max(12px, var(--sr)) 0 max(12px, var(--sl)); padding: 10px 12px; border-radius: 10px; background: var(--mine); font-size: 14px; }
.banner.action { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.banner .share { width: 16px; height: 16px; vertical-align: -3px; }
.account { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px max(16px, var(--sr)) 10px max(16px, var(--sl)); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.newch { display: flex; flex-direction: column; gap: 8px; padding: 10px max(12px, var(--sr)) 10px max(16px, var(--sl)); border-bottom: 1px solid var(--line); background: var(--panel); }
.newrow { display: flex; gap: 8px; align-items: center; }
label.newrow span { font-size: 13px; color: var(--muted); flex: none; }
.newch input, .newch select { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 8px 10px; }
.newerr { margin: 0; color: var(--danger); font-size: 13px; }

/* sub-channels sit under their job, indented with a guide line */
.group-toggle { flex: none; width: 28px; height: 28px; margin-left: -6px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; display: grid; place-items: center; }
.group-toggle:hover { background: var(--line); color: var(--ink); }
.group-toggle svg { width: 16px; height: 16px; transition: transform .15s; }
.group-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.chrow { display: flex; align-items: center; border-bottom: 1px solid var(--line); padding-left: max(10px, var(--sl)); }
.chrow .ch { border-bottom: 0; padding-left: 4px; }
.chrow.sub { padding-left: calc(max(10px, var(--sl)) + var(--depth, 1) * 22px); background: color-mix(in srgb, var(--bg) calc(25% + var(--depth, 1) * 15%), var(--panel)); }
.chrow.sub .ch { padding-block: 9px; }
.chrow.sub .tag { width: 34px; height: 34px; font-size: 15px; border-radius: 8px; background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.chrow.sub .chname::before { content: "# "; color: var(--muted); font-weight: 500; }
.chrow .ch[aria-current="true"] { background: transparent; }
.chrow:has(.ch[aria-current="true"]) { background: var(--mine); }
.subcount { font-size: 12px; color: var(--muted); font-weight: 500; margin: 2px auto 0 6px; flex: none; }
.subbtn { flex: none; white-space: nowrap; }

.channels { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 var(--sb); -webkit-overflow-scrolling: touch; }
.ch { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 12px max(16px, var(--sr)) 12px max(16px, var(--sl)); border-bottom: 1px solid var(--line); }
.ch:active, .ch:hover { background: var(--bg); }
.ch[aria-current="true"] { background: var(--mine); }
.tag { flex: none; width: 46px; height: 46px; border-radius: 11px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 700 24px/1 var(--display); }
.chmain { flex: 1; min-width: 0; }
.chtop { display: flex; justify-content: space-between; gap: 8px; }
.chname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chtime { color: var(--muted); font-size: 12px; flex: none; font-variant-numeric: tabular-nums; }
.chlast { color: var(--muted); font-size: 14px; display: flex; gap: 6px; align-items: center; min-width: 0; }
.chlast span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--hi); }
.hint { padding: 24px max(16px, var(--sr)) 24px max(16px, var(--sl)); color: var(--muted); font-size: 15px; }
.hint strong { color: var(--ink); display: block; font: 700 21px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }

/* ---------- conversation ---------- */
.chat { background: var(--wall); }
.chattitle { flex: 1; min-width: 0; }
.chattitle b { display: block; font: 700 23px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chattitle small { color: var(--muted); font-size: 12.5px; }
.chat .tag { width: 38px; height: 38px; font-size: 20px; border-radius: 9px; }
.back { display: none; margin-left: -8px; }

.msgs { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 4px;
  padding: 14px max(12px, var(--sr)) 14px max(12px, var(--sl));
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px; background-color: var(--wall); }
.day { align-self: center; margin: 10px 0 6px; background: var(--panel); color: var(--muted); font: 600 12.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); }
.msg { max-width: min(80%, 520px); align-self: flex-start; background: var(--theirs); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 6px 10px 5px; min-width: 0; }
.msg.mine { align-self: flex-end; background: var(--mine); border-color: transparent; border-radius: 14px 4px 14px 14px; }
.msg.cont { border-radius: 14px; }
.msg.first { margin-top: 6px; }
.who { font-weight: 600; font-size: 13px; margin-bottom: 1px; }
.txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.meta { float: right; margin: 5px 0 0 10px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.photo-img { display: block; max-width: 100%; max-height: 320px; border-radius: 9px; margin: 2px 0 4px; background: var(--bg); cursor: zoom-in; }
.delbtn { margin-top: 6px; border: 0; background: var(--danger); color: #fff; border-radius: 6px; padding: 4px 10px; font-size: 13px; }
.empty, .nochat { margin: auto; text-align: center; max-width: 34ch; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.empty strong, .nochat b { display: block; color: var(--ink); font: 700 21px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }

.status { flex: none; font-size: 13px; color: var(--danger); padding: 6px max(16px, var(--sl)); background: var(--panel); }
.pending { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px max(16px, var(--sr)) 8px max(16px, var(--sl)); background: var(--panel); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.pending img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.pending span { flex: 1; min-width: 0; }
.compose { flex: none; display: flex; gap: 8px; align-items: flex-end; background: var(--panel); border-top: 1px solid var(--line);
  padding: 8px max(10px, var(--sr)) calc(8px + var(--sb)) max(10px, var(--sl)); }
.compose textarea { flex: 1; min-width: 0; resize: none; max-height: 140px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 20px; padding: 9px 14px; line-height: 1.35; }
.photo { cursor: pointer; }
.send { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.send:disabled { opacity: .45; }
.send svg { width: 20px; height: 20px; }

.viewer { position: fixed; inset: 0; z-index: 20; background: #000; display: grid; place-items: center; padding: calc(56px + var(--st)) 0 var(--sb); }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer button { position: absolute; top: calc(10px + var(--st)); right: max(12px, var(--sr)); color: #fff; border-color: #fff6; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .app.in-chat .list { display: none; }
  .app:not(.in-chat) .chat { display: none; }
  .list { border-right: 0; }
  .back { display: grid; }
}
@media (prefers-reduced-motion: no-preference) {
  .msg.new { animation: pop .16s ease-out; }
  @keyframes pop { from { transform: translateY(4px); opacity: .6; } }
}

/* breadcrumb under the chat header for nested channels */
.crumbs { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 6px max(16px, var(--sr)) 6px max(16px, var(--sl)); background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.crumbs button { border: 0; background: transparent; color: var(--accent); padding: 2px 4px; border-radius: 5px; font-size: 13px; font-weight: 600; }
.crumbs button:hover { background: var(--bg); }
.crumbs .sep { opacity: .6; }
.crumbs .here { color: var(--ink); font-weight: 600; padding: 2px 4px; }

/* file attachments in messages */
.filecard { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 2px 0 4px; min-width: 0; max-width: 300px; }
.msg.mine .filecard { background: color-mix(in srgb, var(--panel) 55%, var(--mine)); }
.filecard:hover { border-color: var(--accent); }
.ficon { flex: none; width: 38px; height: 46px; border-radius: 5px; display: grid; place-items: end center; padding-bottom: 6px; color: #fff; font: 700 11px/1 var(--body); letter-spacing: .04em; position: relative; background: var(--muted); }
.ficon::before { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent var(--panel) transparent transparent; }
.ficon.pdf { background: #c4443a; } .ficon.doc { background: #2f6fd0; } .ficon.xls { background: #23864b; }
.ficon.cad { background: #8a5cc7; } .ficon.zip { background: #9a6b3f; } .ficon.img { background: #1f9e8f; }
.fmeta { min-width: 0; display: flex; flex-direction: column; }
.fname { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsize { font-size: 12px; color: var(--muted); }

/* per-channel files sheet */
.sheet { position: fixed; inset: 0; z-index: 15; background: rgb(0 0 0 / .45); display: flex; align-items: flex-end; justify-content: center; }
.sheet-card { width: 100%; max-width: 560px; max-height: 80%; display: flex; flex-direction: column; background: var(--panel); border-radius: 16px 16px 0 0; padding-bottom: var(--sb); }
@media (min-width: 761px) { .sheet { align-items: center; } .sheet-card { border-radius: 16px; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px max(16px, var(--sr)) 12px max(16px, var(--sl)); border-bottom: 1px solid var(--line); }
.sheet-head b { display: block; font: 700 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.sheet-head small { color: var(--muted); font-size: 13px; }
.filelist { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; }
.filelist li { padding: 4px max(12px, var(--sr)) 4px max(12px, var(--sl)); }
.filelist .filecard { max-width: none; background: transparent; border-color: transparent; }
.filelist .filecard:hover { background: var(--bg); }
.filelist .empty-files { padding: 24px 16px; text-align: center; color: var(--muted); }

/* deep channel rows: let names shorten instead of pushing the time off screen */
.chrow .ch { width: auto; flex: 1; min-width: 0; }
.chtop { min-width: 0; align-items: baseline; }
.chname { min-width: 0; }
@media (max-width: 760px) {
  .chrow.sub { padding-left: calc(max(10px, var(--sl)) + var(--depth, 1) * 14px); }
  .chrow.sub .group-toggle { width: 24px; }
}
.banner.action .primary { flex: none; white-space: nowrap; }

/* file pickers stay in the page (not display:none) so iPhones always open them */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.iconbtn.plus { background: var(--accent); color: var(--accent-ink); width: 36px; height: 36px; }
.iconbtn.plus:hover, .iconbtn.plus:active { background: var(--accent); color: var(--accent-ink); filter: brightness(1.1); }
.iconbtn.plus svg { width: 20px; height: 20px; }
.sheet-body { display: flex; flex-direction: column; gap: 12px; padding: 16px max(16px, var(--sr)) calc(16px + var(--sb)) max(16px, var(--sl)); }
.sheet-body input { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 12px; }
.status.ok { color: var(--muted); }

/* warning banner: sits above the app and pushes it down, so it never covers buttons or the message box */
body { display: flex; flex-direction: column; }
body > .app, body > .auth { flex: 1; min-height: 0; height: auto; width: 100%; }
.problem { flex: none; display: flex; gap: 10px; align-items: flex-start; background: var(--danger); color: #fff; font-size: 14px; line-height: 1.4;
  padding: calc(10px + var(--st)) max(10px, var(--sr)) 10px max(14px, var(--sl)); }
.problem span { flex: 1; min-width: 0; }
.problem-x { flex: none; border: 0; background: rgb(255 255 255 / .2); color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; }
body.has-problem .bar { padding-top: 8px; }

/* send button and mic swap places, like WhatsApp: mic when the box is empty */
.compose .mic { display: none; }
.compose.no-text .mic { display: grid; }
.compose.no-text #sendBtn { display: none; }

/* recording bar */
.recbar { flex: none; display: flex; align-items: center; gap: 10px; background: var(--panel); border-top: 1px solid var(--line);
  padding: 8px max(10px, var(--sr)) calc(8px + var(--sb)) max(10px, var(--sl)); }
.rec-del { color: var(--danger); }
.rec-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); }
.recbar.paused .rec-dot { background: var(--muted); animation: none; }
@media (prefers-reduced-motion: no-preference) { .rec-dot { animation: recpulse 1s ease-in-out infinite; } @keyframes recpulse { 50% { opacity: .25; } } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.2em; }
.rec-label { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* audio player in messages */
.aplayer { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 300px; padding: 4px 0; }
.aplay { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.aplay svg { width: 18px; height: 18px; }
.atrack { flex: 1; height: 28px; position: relative; cursor: pointer; touch-action: none; }
.atrack::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--line); }
.afill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--accent); width: 0; }
.aknob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); left: 0; }
.atime { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.8em; text-align: right; }
.aspeed { flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; font-size: 12px; font-weight: 700; padding: 3px 7px; }
.amic { flex: none; color: var(--accent); display: grid; place-items: center; }
.amic svg { width: 18px; height: 18px; }
.aname { display: block; font-size: 13px; color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.aname:hover { text-decoration: underline; }
.ficon.aud { background: #c2477e; }

/* video messages */
.videomsg { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 4px; }
.videomsg video { display: block; width: min(280px, 64vw); max-height: 380px; border-radius: 10px; background: #000; }
.vnote { font-size: 13px; color: var(--danger); max-width: 280px; }
.ficon.vid { background: #3d5fae; }

/* ---------- v9: search ---------- */
.searchpane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.searchbar { display: flex; gap: 8px; padding: 10px max(12px, var(--sr)) 10px max(12px, var(--sl)); border-bottom: 1px solid var(--line); }
.searchbar input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 9px 12px; }
.results { list-style: none; margin: 0; padding: 0 0 var(--sb); overflow-y: auto; flex: 1; }
.results li button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  padding: 10px max(16px, var(--sr)) 10px max(16px, var(--sl)); }
.results li button:hover, .results li button:active { background: var(--bg); }
.rmeta { display: flex; gap: 6px; align-items: baseline; font-size: 12px; color: var(--muted); }
.rmeta b { color: var(--accent); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rmeta span:last-child { margin-left: auto; flex: none; }
.rtext { font-size: 14.5px; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rtext mark { background: color-mix(in srgb, var(--hi) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.rkind { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.results .none { padding: 24px 16px; color: var(--muted); text-align: center; }
.msg.flash { outline: 3px solid var(--hi); outline-offset: 2px; }

/* ---------- v9: tool strip + job info ---------- */
.tools { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 7px max(12px, var(--sr)) 7px max(12px, var(--sl)); background: var(--panel); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tools::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 6px 11px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.chip b { color: var(--accent); font-variant-numeric: tabular-nums; }
.chip.on { border-color: var(--accent); background: var(--mine); }
.jobinfo { flex: none; background: color-mix(in srgb, var(--hi) 14%, var(--panel)); border-bottom: 1px solid var(--line);
  padding: 9px max(14px, var(--sr)) 9px max(14px, var(--sl)); font-size: 14px; display: grid; gap: 4px; max-height: 40vh; overflow-y: auto; }
.jirow { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.jirow > span:first-child { flex: none; width: 1.4em; text-align: center; }
.jirow > div { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.jirow a { color: var(--accent); font-weight: 600; }
.jifrom { font-size: 12px; color: var(--muted); }
.jiacts { display: flex; gap: 8px; margin-top: 2px; }
.copybtn { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; font-size: 12px; padding: 1px 7px; margin-left: 6px; color: var(--muted); }
.fl { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.fl input, .fl textarea { font-weight: 400; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 10px 12px; resize: vertical; }
.sheet-body.scroll { overflow-y: auto; }
.sheet-card.tall { max-height: 92%; }
.sheet-card form.sheet-body, .sheet-card .sheet-body { min-height: 0; }

/* ---------- v9: checklist ---------- */
.checklist { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; min-height: 80px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 9px max(16px, var(--sr)) 9px max(16px, var(--sl)); border-bottom: 1px solid var(--line); }
.checklist input[type=checkbox] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.citem { flex: 1; min-width: 0; }
.ctext { overflow-wrap: anywhere; }
.done .ctext { text-decoration: line-through; color: var(--muted); }
.cby { font-size: 12px; color: var(--muted); }
.cdel { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 16px; padding: 2px 6px; border-radius: 6px; }
.cdel:hover { color: var(--danger); background: var(--bg); }
.cprogress { padding: 8px max(16px, var(--sr)) 4px max(16px, var(--sl)); font-size: 13px; color: var(--muted); }
.cbar { height: 6px; border-radius: 3px; background: var(--line); margin-top: 5px; overflow: hidden; }
.cbar > div { height: 100%; background: #3d9a4a; }
.checkadd { display: flex; gap: 8px; align-items: flex-end; padding: 10px max(12px, var(--sr)) calc(10px + var(--sb)) max(12px, var(--sl)); border-top: 1px solid var(--line); }
.checkadd textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 9px 12px; }
.empty-check { padding: 20px 16px; color: var(--muted); text-align: center; }

/* ---------- v9: daily logs ---------- */
.exportrow { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.exportrow .fl { flex: 1 1 120px; }
.exportbtn { text-decoration: none; display: inline-flex; align-items: center; height: 40px; }
.loglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.loglist button { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.loglist b { display: block; }
.loglist span { font-size: 13px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logphotos { display: flex; gap: 6px; flex-wrap: wrap; }
.logphotos .lp { position: relative; width: 72px; height: 72px; }
.logphotos img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.logphotos .lp button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--danger); color: #fff; font-size: 12px; line-height: 22px; padding: 0; }
.logphotos .lp.busy img { opacity: .4; }
.formrow { display: flex; gap: 10px; }
.formrow > * { flex: 1; }
.logview h3 { margin: 0 0 2px; font: 700 22px/1.15 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.logview .lvmeta { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.logview dl { margin: 0; display: grid; gap: 10px; }
.logview dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.logview dd { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.logview .lvphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.logview .lvphotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; max-width: 100%; }
.logcard { display: flex; gap: 10px; align-items: center; width: 100%; max-width: 300px; text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 9px 11px; margin: 2px 0 4px; color: inherit; }
.msg.mine .logcard { background: color-mix(in srgb, var(--panel) 55%, var(--mine)); }
.logcard .lcicon { flex: none; font-size: 24px; }
.logcard b { display: block; font-size: 14px; }
.logcard span { font-size: 12.5px; color: var(--muted); }

/* ---------- v9: waiting-to-send messages ---------- */
.msg.queued { opacity: .75; border-style: dashed; border-color: var(--muted); }
.qnote { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.offline { flex: none; background: var(--muted); color: #fff; font-size: 13px; text-align: center; padding: 5px 12px; }
.jiacts { align-items: center; }
.jiacts .jifrom { margin-right: auto; }

/* ---------- v10: Boxmx ---------- */
.pxhead { display: grid; gap: 4px; }
.pxhead h3 { margin: 0; font: 700 22px/1.15 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.pxmeta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--muted); align-items: center; }
.pxbadge { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: var(--mine); color: var(--accent); }
.pxbadge.late { background: color-mix(in srgb, var(--danger) 18%, var(--panel)); color: var(--danger); }
.pxacts { display: flex; gap: 8px; flex-wrap: wrap; }
.pxacts a, .pxacts button { text-decoration: none; display: inline-flex; align-items: center; }
.pxtasks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pxtasks li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.pxtasks input[type=checkbox] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.pxtask { flex: 1; min-width: 0; }
.pxtask .tn { overflow-wrap: anywhere; }
.pxtasks li.done .tn { text-decoration: line-through; color: var(--muted); }
.pxtask .ts { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.pxtask .ts .late { color: var(--danger); font-weight: 600; }
.pxtask a { color: var(--accent); }
.pxpick { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pxpick button { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.pxpick button:disabled { opacity: .55; }
.pxpick b { display: block; }
.pxpick span { font-size: 13px; color: var(--muted); }
.pxnote { font-size: 13px; color: var(--muted); }
.pxerr { color: var(--danger); font-size: 14px; }
.msg.sys { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.msg.sys .who::before { content: "🔗 "; }
.msglink { color: var(--accent); overflow-wrap: anywhere; }

/* ---------- v12: Boxmx tabs (Chats · Projects · To-Do · Time) ---------- */
.app:not(.tab-chats) .chats-only { display: none !important; }
.tabview { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tvscroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 max(14px, var(--sr)) 18px max(14px, var(--sl)); }
.tvtools { flex: none; display: grid; gap: 8px; padding: 10px max(14px, var(--sr)) 10px max(14px, var(--sl)); border-bottom: 1px solid var(--line); }
.tvtools input, .todoadd textarea, .sheet-body select, .fl select { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; }
.tvh { margin: 16px 0 6px; font: 700 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tvh small { font: 600 13px var(--body); letter-spacing: 0; text-transform: none; color: var(--accent); margin-left: 4px; }
.tvempty { color: var(--muted); font-size: 14px; padding: 8px 0; list-style: none; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 7px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--muted); }
.seg button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.seg b { color: var(--accent); font-variant-numeric: tabular-nums; }

.tabbar { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--panel);
  padding: 4px max(4px, var(--sr)) calc(4px + var(--sb)) max(4px, var(--sl)); }
.tabbar button { position: relative; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.tabbar svg { width: 25px; height: 25px; }
.tabbar button[aria-current="true"] { color: var(--accent); }
.tbadge { position: absolute; top: 1px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font: 700 11px/18px var(--body); font-style: normal; }
.tdot { position: absolute; top: 4px; left: calc(50% + 9px); width: 10px; height: 10px; border-radius: 50%; background: #2fa84f; box-shadow: 0 0 0 2px var(--panel); }
.app:has(.tabbar:not([hidden])) .channels { padding-bottom: 0; }

.timerpill { flex: none; display: flex; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, #2fa84f 14%, var(--panel));
  padding: 8px max(14px, var(--sr)) 8px max(14px, var(--sl)); text-align: left; font-size: 14px; }
.tp-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2fa84f; }
.tp-time { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-task { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.tp-stop { flex: none; font-weight: 700; color: var(--danger); }
@media (prefers-reduced-motion: no-preference) { .tp-dot, .tdot { animation: recpulse 1.4s ease-in-out infinite; } }

/* projects */
.projlist { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 12px; }
.projlist > li > button { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; display: grid; gap: 4px;
  padding: 12px max(16px, var(--sr)) 12px max(16px, var(--sl)); }
.projlist > li > button:active, .projlist > li > button:hover { background: var(--bg); }
.pj-top { display: flex; gap: 8px; align-items: baseline; }
.pj-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.pj-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--muted); align-items: center; }
.pj-meta .late { color: var(--danger); font-weight: 600; }
.pj-meta .mine { color: var(--accent); font-weight: 600; }
.pj-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pj-bar > div { height: 100%; background: var(--accent); }

/* to-do */
.todoadd { flex: none; display: flex; gap: 8px; align-items: flex-end; padding: 10px max(14px, var(--sr)) 10px max(14px, var(--sl)); border-bottom: 1px solid var(--line); }
.todoadd textarea { flex: 1; min-width: 0; resize: none; max-height: 140px; }
.todos, .mytasks { list-style: none; margin: 0; padding: 0; }
.todos li, .mytasks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.todos input[type=checkbox] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.todos .tdtext { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.todos li.done .tdtext { text-decoration: line-through; color: var(--muted); }
.todos .tdx { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 15px; padding: 0 4px; }
.tododone { margin-top: 10px; }
.tododone summary { font: 700 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 0; cursor: pointer; }
.mytasks .mt { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 0; }
.mt .tn { display: block; font-weight: 600; overflow-wrap: anywhere; }
.mt .ts { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 3px 8px; }
.mt .ts .late { color: var(--danger); font-weight: 700; }
.playbtn { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: #2fa84f; display: grid; place-items: center; font-size: 14px; }
.playbtn.on { background: #2fa84f; border-color: #2fa84f; color: #fff; }
.playbtn svg { width: 16px; height: 16px; }

/* time */
.timecard { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; background: var(--bg); }
.timecard.on { border-color: #2fa84f; background: color-mix(in srgb, #2fa84f 10%, var(--panel)); }
.timecard .big { font: 700 44px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.timecard .what { font-weight: 600; overflow-wrap: anywhere; }
.timecard .what small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.timecard .row { display: flex; gap: 8px; }
.timecard .row select { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 10px; padding: 10px; font-size: 16px; }
.stopbtn { border: 0; background: var(--danger); color: #fff; border-radius: 10px; padding: 12px 16px; font-weight: 700; }
.totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.totals div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.totals small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.totals b { font: 700 28px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.manual { border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; margin-bottom: 12px; }
.manual summary { padding: 11px 0; font-weight: 600; color: var(--accent); cursor: pointer; }
.manual form { display: grid; gap: 10px; padding-bottom: 12px; }
.manual .fl select { width: 100%; }
.formrow3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.formrow3 input { min-width: 0; width: 100%; }
.weekseg { margin-bottom: 6px; }
.tday { margin: 14px 0 4px; display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; }
.tday span:last-child { font-variant-numeric: tabular-nums; color: var(--accent); }
.tentry { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tentry .te-main { flex: 1; min-width: 0; }
.tentry .te-main b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.tentry .te-main small { color: var(--muted); font-size: 12.5px; }
.tentry .te-dur { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.tentry .tdx { flex: none; border: 0; background: transparent; color: var(--muted); padding: 0 2px; }

/* Chat | Tasks inside a project chat */
.chatseg { flex: none; margin: 7px max(12px, var(--sr)) 0 max(12px, var(--sl)); }
.taskpane { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--panel);
  padding: 12px max(14px, var(--sr)) calc(16px + var(--sb)) max(14px, var(--sl)); display: flex; flex-direction: column; gap: 12px; }
.pxtasks li .playbtn { margin-left: 2px; }
.pxtasks .mine-tag { color: var(--accent); font-weight: 700; }
.app.tasks-on .msgs, .app.tasks-on .compose, .app.tasks-on .status, .app.tasks-on .pending, .app.tasks-on .recbar, .app.tasks-on .jobinfo { display: none !important; }

/* ---------- v13: files in Boxmx ---------- */
.filesseg { margin: 10px max(16px, var(--sr)) 0 max(16px, var(--sl)); flex: none; }
.bxfile { display: flex; gap: 10px; align-items: center; padding: 10px max(16px, var(--sr)) 10px max(16px, var(--sl)); border-bottom: 1px solid var(--line); list-style: none; }
.bxmain { flex: 1; min-width: 0; }
.bxmain b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.bxmain small { color: var(--muted); font-size: 12.5px; }
.bxfile .ghost { flex: none; color: var(--accent); border-color: var(--accent); }

/* ---------- v14: create projects and tasks ---------- */
.createrow { display: flex; gap: 8px; }
.createrow button { flex: 1; }
.ghost.accent { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.tvhbtn { float: right; border: 0; background: transparent; color: var(--accent); font: 600 14px var(--body); letter-spacing: 0; text-transform: none; padding: 0; }
.formrow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.formrow2 input, .formrow2 select { min-width: 0; width: 100%; }
.fl select { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; font-weight: 400; }
.pickgrid { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 6px 12px 6px 8px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.pick:has(input:checked) { border-color: var(--accent); background: var(--mine); }
.picknote { font-size: 12.5px; font-weight: 400; color: var(--muted); }