/* ── Comms: discussion thread (.cm-) + groups management (.gr-) ─────────────
   Dark by default (app default); light-mode overrides at the bottom. */

/* Shared avatar (thread + groups) */
.cm-av {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; font-weight: 800; font-size: 11px;
  background-size: cover; background-position: center; overflow: hidden;
}

/* ── Thread slide-over ─────────────────────────────────────────────────────*/
.cm-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .18s; z-index: 5800;
}
.cm-backdrop.cm-on { opacity: 1; visibility: visible; }
.cm-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 100vw); z-index: 5850;
  display: flex; flex-direction: column; background: #0c1016; border-left: 1px solid #2a3545;
  box-shadow: -14px 0 40px rgba(0,0,0,.4); transform: translateX(100%); transition: transform .2s ease;
  font-family: 'Barlow', sans-serif; color: #dce3ed;
}
.cm-panel.cm-on { transform: translateX(0); }
.cm-over-body { flex: 1; min-height: 0; display: flex; }

/* thread shell — shared by the slide-over and the inline (work-order) mode */
.cm-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* inline thread inside the work-order Activity pane */
.wk-wo-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wk-wo-act:has(.wk-wo-thread) { overflow: hidden; }
.wk-wo-act .wk-dw-act-h { flex: none; }
.wk-wo-act-pop { margin-left: auto; border: 0; background: transparent; color: #5a6678; width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; cursor: pointer; }
.wk-wo-act-pop:hover { color: var(--accent, #d4f542); background: rgba(212, 245, 66, 0.08); }
.wk-wo-act-pop .material-symbols-outlined { font-size: 15px !important; }

.cm-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px; flex: none;
  border-bottom: 1px solid #1f2530; background: linear-gradient(90deg, rgba(212,245,66,.06), transparent);
}
.cm-head-ic { color: var(--accent, #d4f542); font-size: 20px !important; }
.cm-head-txt { flex: 1; min-width: 0; }
.cm-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-sub { font-size: 11.5px; color: #7a8a9b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-x { width: 30px; height: 30px; border: 0; background: transparent; color: #7a8a9b; border-radius: 7px; display: grid; place-items: center; }
.cm-x:hover { background: #141820; color: #dce3ed; }

.cm-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.cm-msg { display: flex; gap: 10px; }
.cm-msg-main { flex: 1; min-width: 0; }
.cm-msg-top { display: flex; align-items: baseline; gap: 8px; }
.cm-msg-who { font-weight: 800; font-size: 12px; color: #dce3ed; }
.cm-mine .cm-msg-who { color: var(--accent, #d4f542); }
.cm-msg-time { font-size: 10px; color: #5a6678; }
.cm-msg-del { margin-left: auto; border: 0; background: transparent; color: #5a6678; width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; opacity: 0; }
.cm-msg:hover .cm-msg-del { opacity: 1; }
.cm-msg-del:hover { color: #f87171; background: rgba(239,68,68,.12); }
.cm-msg-del .material-symbols-outlined { font-size: 15px !important; }
.cm-msg-text { font-size: 13.5px; line-height: 1.45; margin-top: 3px; color: #c3ccd8; white-space: pre-wrap; word-break: break-word; }
.cm-mention { color: var(--accent, #d4f542); font-weight: 700; }
.cm-tag { color: #60a5fa; font-weight: 700; }

/* task chip + actions under a #group-tagged message */
.cm-task { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; }
.cm-task-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px 3px 7px; border-radius: 999px; }
.cm-task-chip .material-symbols-outlined { font-size: 14px !important; }
.cm-task-taken { color: #f59e0b; background: rgba(245,158,11,.12); }
.cm-task-done  { color: #22c55e; background: rgba(34,197,94,.12); }
.cm-task-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid; font-family: inherit; font-weight: 700; font-size: 11.5px; padding: 4px 10px 4px 8px; border-radius: 999px; cursor: pointer; background: transparent; }
.cm-task-btn .material-symbols-outlined { font-size: 14px !important; }
.cm-task-take { color: var(--accent,#d4f542); border-color: rgba(212,245,66,.4); background: rgba(212,245,66,.07); }
.cm-task-take:hover { background: rgba(212,245,66,.14); }
.cm-task-finish { color: #22c55e; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.07); }
.cm-task-finish:hover { background: rgba(34,197,94,.16); }
.cm-task-undo { border: 0; background: transparent; color: #7a8a9b; font-family: inherit; font-weight: 700; font-size: 11px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.cm-task-undo:hover { color: #dce3ed; text-decoration: underline; }

.cm-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #7a8a9b; font-size: 13px; padding: 30px; }
.cm-empty .material-symbols-outlined { font-size: 30px !important; color: #3a4657; }
.cm-loading .material-symbols-outlined { animation: cm-spin 1s linear infinite; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cm-loading .material-symbols-outlined, .cm-panel { animation: none; transition: none; } }

/* autocomplete */
.cm-suggest { flex: none; border-top: 1px solid #1f2530; background: #101318; max-height: 200px; overflow-y: auto; }
.cm-sug-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; }
.cm-sug-item:hover { background: #141820; }
.cm-sug-hash { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; color: #60a5fa; background: rgba(59,130,246,.16); }
.cm-sug-label { font-size: 13px; font-weight: 600; }
.cm-sug-sub { font-size: 11px; color: #7a8a9b; margin-left: auto; }

/* composer */
.cm-composer { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #1f2530; background: #0c1016; }
.cm-input {
  flex: 1; resize: none; border: 1px solid #2a3545; background: #141820; color: #dce3ed;
  border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: 13.5px; line-height: 1.4;
  max-height: 140px; outline: none;
}
.cm-input:focus { border-color: #3a4657; }
.cm-input::placeholder { color: #5a6678; }
.cm-send { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 0; background: var(--accent, #d4f542); color: #0c1016; display: grid; place-items: center; }
.cm-send:hover { filter: brightness(1.06); }
.cm-send .material-symbols-outlined { font-size: 19px !important; }

/* work-order entry points */
.wk-cm-open-btn {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(212,245,66,.35);
  background: rgba(212,245,66,.06); color: var(--accent, #d4f542); font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; padding: 8px 14px; border-radius: 9px;
}
.wk-cm-open-btn:hover { background: rgba(212,245,66,.12); }
.wk-cm-open-btn .material-symbols-outlined { font-size: 16px !important; }

@media (max-width: 560px) { .cm-panel { width: 100vw; border-left: 0; } }

/* ── Groups management (.gr-) ──────────────────────────────────────────────*/
.gr-loading, .gr-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 30px; color: #7a8a9b; font-size: 13px; }
.gr-loading .material-symbols-outlined { animation: cm-spin 1s linear infinite; }
.gr-mut { color: #7a8a9b; font-weight: 500; font-size: 11.5px; }
.gr-head { display: flex; align-items: flex-start; gap: 14px; }
.gr-head .settings-save-btn { margin-left: auto; white-space: nowrap; }
.gr-desc { margin: 4px 0 0; font-size: 12.5px; color: #8a9aab; max-width: 60ch; }

.gr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.gr-card { background: #141820; border: 1px solid #1f2530; border-radius: 10px; padding: 13px; cursor: pointer; transition: border-color .12s; }
.gr-card:hover { border-color: #2a3545; }
.gr-card.gr-sel { border-color: var(--accent, #d4f542); }
.gr-card-top { display: flex; align-items: baseline; gap: 8px; }
.gr-card-name { font-weight: 800; font-size: 14.5px; }
.gr-card-handle { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: #60a5fa; }
.gr-card-meta { font-size: 11.5px; color: #7a8a9b; margin-top: 3px; }
.gr-avs { display: flex; margin-top: 10px; }
.gr-avs .cm-av { width: 26px; height: 26px; margin-right: -7px; border: 2px solid #141820; }
.gr-more-av { width: 26px; height: 26px; border-radius: 50%; background: #1f2530; border: 2px solid #141820; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #8a9aab; }

.gr-editor { border-color: #2a3545 !important; }
.gr-editor-h { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 12px; }
.gr-field { margin-bottom: 14px; }
.gr-field > label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #7a8a9b; margin-bottom: 6px; }
.gr-input { width: 100%; box-sizing: border-box; background: #141820; border: 1px solid #2a3545; border-radius: 8px; color: #dce3ed; padding: 9px 11px; font-family: inherit; font-size: 13.5px; outline: none; }
.gr-input:focus { border-color: #3a4657; }
.gr-handle-wrap { display: flex; align-items: center; gap: 6px; }
.gr-handle-wrap > span { color: #60a5fa; font-weight: 800; }
.gr-member-search-wrap { position: relative; margin-bottom: 8px; }
.gr-member-search-wrap .material-symbols-outlined { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 18px !important; color: #7a8a9b; pointer-events: none; }
.gr-input.gr-member-search { padding-left: 34px; }
.gr-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; }
.gr-members-empty { grid-column: 1 / -1; padding: 8px 2px; }
.gr-member { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 1px solid #1f2530; border-radius: 8px; background: #141820; cursor: pointer; }
.gr-member:hover { border-color: #2a3545; }
.gr-member-cb { accent-color: var(--accent, #d4f542); width: 15px; height: 15px; flex: none; }
.gr-member-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-editor-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.gr-editor-right { display: flex; gap: 8px; }
.gr-del { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #3a2530; background: rgba(239,68,68,.08); color: #f87171; font-family: inherit; font-weight: 700; font-size: 12.5px; padding: 8px 12px; border-radius: 8px; }
.gr-del:hover { background: rgba(239,68,68,.16); }
.gr-del .material-symbols-outlined { font-size: 16px !important; }
.gr-cancel { border: 1px solid #2a3545; background: #141820; color: #8a9aab; font-family: inherit; font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 8px; }
.gr-cancel:hover { color: #dce3ed; border-color: #3a4657; }

/* ── Light mode ─────────────────────────────────────────────────────────── */
body.light-mode .cm-panel { background: #fff; border-left-color: #dde2ec; box-shadow: -14px 0 40px rgba(0,0,0,.14); color: #1a2030; }
body.light-mode .cm-head { border-bottom-color: #e4e8f0; }
body.light-mode .cm-title { color: #1a2030; }
body.light-mode .cm-x:hover { background: #f0f3f8; color: #1a2030; }
body.light-mode .cm-msg-who { color: #1a2030; }
body.light-mode .cm-msg-text { color: #33404f; }
body.light-mode .cm-tag { color: #2563eb; }
body.light-mode .cm-suggest, body.light-mode .cm-composer { background: #f5f7fa; border-top-color: #e4e8f0; }
body.light-mode .cm-sug-item:hover { background: #eef1f6; }
body.light-mode .cm-input { background: #fff; border-color: #dde2ec; color: #1a2030; }
body.light-mode .cm-input::placeholder { color: #98a4b4; }
body.light-mode .cm-send { color: #0c1016; }
body.light-mode .gr-card, body.light-mode .gr-member, body.light-mode .gr-input { background: #fff; border-color: #e4e8f0; }
body.light-mode .gr-input { color: #1a2030; }
body.light-mode .gr-avs .cm-av, body.light-mode .gr-more-av { border-color: #fff; }
body.light-mode .gr-more-av { background: #e4e8f0; color: #5a6a7b; }
body.light-mode .gr-desc { color: #5a6a7b; }
body.light-mode .gr-cancel { background: #fff; border-color: #dde2ec; color: #5a6a7b; }

/* ── Inbox (.ci-) + sidebar badge ──────────────────────────────────────────*/
.nav-inbox-btn { position: relative; }
.nav-inbox-badge {
  position: absolute; top: 5px; right: 10px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  background: #ef4444; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 800;
  display: grid; place-items: center; line-height: 1; font-family: 'Barlow', sans-serif;
}
.nav-inbox-badge[hidden] { display: none; } /* display:grid above beats the UA [hidden] rule */

.ci-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .18s; z-index: 5800; }
.ci-backdrop.ci-on { opacity: 1; visibility: visible; }
.ci-panel { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5850; display: flex; flex-direction: column;
  background: #0c1016; color: #dce3ed; font-family: 'Barlow', sans-serif;
  opacity: 0; visibility: hidden; transform: scale(.99); transform-origin: center 42%; transition: opacity .18s ease, transform .2s ease; }
.ci-panel.ci-on { opacity: 1; visibility: visible; transform: scale(1); }
.ci-head { display: flex; align-items: center; gap: 9px; padding: 15px 20px; border-bottom: 1px solid #1f2530; }
.ci-head-ic { color: var(--accent,#d4f542); font-size: 20px !important; }
.ci-title { font-weight: 800; font-size: 15px; letter-spacing: .4px; }
.ci-back, .ci-markall, .ci-x { border: 0; background: transparent; color: #7a8a9b; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; }
.ci-back { margin-left: -4px; }
.ci-markall { margin-left: auto; }
.ci-back:hover, .ci-markall:hover, .ci-x:hover { background: #141820; color: #dce3ed; }
.ci-filters { display: flex; gap: 6px; padding: 12px 12px; border-bottom: 1px solid #1f2530; flex-wrap: wrap; width: 100%; max-width: 780px; margin: 0 auto; box-sizing: border-box; }
.ci-fchip { border: 1px solid #1f2530; background: #141820; color: #8a9aab; font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.ci-fchip.on { background: var(--accent,#d4f542); color: #0c1016; border-color: var(--accent,#d4f542); }
.ci-list { flex: 1; overflow-y: auto; min-height: 0; width: 100%; max-width: 780px; margin: 0 auto; }
.ci-item { position: relative; display: flex; gap: 11px; padding: 12px 14px 12px 18px; border-bottom: 1px solid #1f2530; cursor: pointer; }
.ci-item:hover { background: #101318; }
.ci-item .cm-av { width: 30px; height: 30px; flex: none; }
.ci-dot { position: absolute; left: 7px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent,#d4f542); }
.ci-main { flex: 1; min-width: 0; }
.ci-top { display: flex; align-items: baseline; gap: 8px; }
.ci-who { font-weight: 700; font-size: 12.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-unread .ci-who { font-weight: 800; }
.ci-time { font-size: 10.5px; color: #5a6678; white-space: nowrap; }
.ci-prev { font-size: 12.5px; color: #8a9aab; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; font-size: 10.5px; font-weight: 700; margin-top: 5px; }
.ci-ctx-kind { display: inline-flex; align-items: center; gap: 4px; color: #7a8a9b; }
.ci-ctx .material-symbols-outlined { font-size: 13px !important; }
.ci-car { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
          color: var(--accent,#d4f542); background: rgba(212,245,66,0.11); padding: 1px 8px 1px 6px; border-radius: 999px; }
.ci-car .material-symbols-outlined { color: var(--accent,#d4f542); }
.ci-task { margin-top: 7px; }
.ci-task-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 9px 2px 6px; border-radius: 999px; }
.ci-task-chip .material-symbols-outlined { font-size: 13px !important; }
.ci-task-chip.taken { color: #f59e0b; background: rgba(245,158,11,.12); }
.ci-task-chip.done  { color: #22c55e; background: rgba(34,197,94,.12); }
.ci-task-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid; font-family: inherit; font-weight: 700; font-size: 11px; padding: 3px 10px 3px 7px; border-radius: 999px; cursor: pointer; background: transparent; }
.ci-task-btn .material-symbols-outlined { font-size: 13px !important; }
.ci-task-btn.take { color: var(--accent,#d4f542); border-color: rgba(212,245,66,.4); background: rgba(212,245,66,.07); }
.ci-task-btn.take:hover { background: rgba(212,245,66,.14); }
.ci-task-btn.finish { color: #22c55e; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.07); }
.ci-task-btn.finish:hover { background: rgba(34,197,94,.16); }
.ci-side { display: flex; align-items: center; gap: 2px; align-self: center; }
.ci-go { border: 0; background: transparent; color: #7a8a9b; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; flex: none; }
.ci-go:hover { background: rgba(212,245,66,0.14); color: var(--accent,#d4f542); }
.ci-go .material-symbols-outlined { font-size: 18px !important; }
.ci-actions { display: flex; gap: 2px; opacity: 0; }
.ci-item:hover .ci-actions { opacity: 1; }
.ci-actions button { border: 0; background: transparent; color: #7a8a9b; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; }
.ci-actions button:hover { background: #1a2130; color: #dce3ed; }
.ci-actions .material-symbols-outlined { font-size: 17px !important; }
.ci-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #7a8a9b; font-size: 13px; padding: 40px 20px; }
.ci-list > .ci-empty { min-height: 60vh; }
.ci-empty .material-symbols-outlined { font-size: 30px !important; color: #3a4657; }
.ci-loading .material-symbols-outlined { animation: cm-spin 1s linear infinite; }

.ci-pop { position: fixed; z-index: 6100; width: 300px; background: #101318; border: 1px solid #2a3545; border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s, transform .12s; overflow: hidden; font-family: 'Barlow', sans-serif; color: #dce3ed; }
.ci-pop.on { opacity: 1; visibility: visible; transform: translateY(0); }
.ci-pop-h { padding: 9px 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #7a8a9b; border-bottom: 1px solid #1f2530; }
.ci-pop-b { max-height: 320px; overflow-y: auto; }
.ci-pop-item { display: flex; gap: 9px; padding: 9px 12px; border-bottom: 1px solid #1f2530; cursor: pointer; }
.ci-pop-item:hover { background: #141820; }
.ci-pop-item .cm-av { width: 26px; height: 26px; flex: none; }
.ci-pop-main { flex: 1; min-width: 0; }
.ci-pop-prev { font-size: 12px; color: #8a9aab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-pop-prev b { color: #dce3ed; font-weight: 700; }
.ci-pop-time { font-size: 10px; color: #5a6678; margin-top: 2px; }
.ci-pop-empty { padding: 20px; text-align: center; color: #7a8a9b; font-size: 12.5px; }
.ci-pop-open { width: 100%; border: 0; border-top: 1px solid #1f2530; background: transparent; color: var(--accent,#d4f542); font-family: inherit; font-weight: 700; font-size: 12px; padding: 10px; cursor: pointer; }
.ci-pop-open:hover { background: rgba(212,245,66,.06); }

@media (max-width: 560px) { .ci-pop { display: none; } }

/* ── Inbox v2: toolbar, bulk, snooze menu, reply, grouping, swipe, toast ─────*/
.ci-toolbar { display: flex; align-items: center; gap: 8px; padding: 0 12px 12px; border-bottom: 1px solid #1f2530; flex-wrap: wrap; width: 100%; max-width: 780px; margin: 0 auto; box-sizing: border-box; }
.ci-search { flex: 1 1 200px; display: flex; align-items: center; gap: 7px; background: #141820; border: 1px solid #2a3545; border-radius: 8px; padding: 7px 10px; min-width: 140px; }
.ci-search .material-symbols-outlined { font-size: 17px !important; color: #7a8a9b; }
.ci-search input { flex: 1; border: 0; background: transparent; color: #dce3ed; outline: 0; font-family: inherit; font-size: 13px; min-width: 0; }
.ci-search input::placeholder { color: #5a6678; }
.ci-tchip { border: 1px solid #1f2530; background: #141820; color: #8a9aab; font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ci-tchip .material-symbols-outlined { font-size: 15px !important; }
.ci-tchip.on { background: rgba(212,245,66,.14); color: var(--accent,#d4f542); border-color: rgba(212,245,66,.4); }
.ci-tool-btn { border: 1px solid #1f2530; background: #141820; color: #8a9aab; width: 34px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex: none; }
.ci-tool-btn:hover { color: #dce3ed; border-color: #3a4657; }
.ci-tool-btn.on { background: rgba(212,245,66,.14); color: var(--accent,#d4f542); border-color: rgba(212,245,66,.4); }
.ci-tool-btn .material-symbols-outlined { font-size: 18px !important; }

/* group-by-car section headers */
.ci-group-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 8px 18px; background: #0c1016; border-bottom: 1px solid #1f2530;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #8a9aab; }
.ci-group-h .material-symbols-outlined { font-size: 15px !important; color: var(--accent,#d4f542); }
.ci-group-h .ci-group-n { margin-left: auto; font-size: 11px; color: #5a6678; }

/* keyboard-active + selection */
.ci-item.ci-active { background: #121722; box-shadow: inset 3px 0 0 var(--accent,#d4f542); }
.ci-item.ci-sel { background: rgba(212,245,66,.06); }
.ci-check { flex: none; align-self: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #3a4657; display: grid; place-items: center; cursor: pointer; color: transparent; }
.ci-item.ci-sel .ci-check { background: var(--accent,#d4f542); border-color: var(--accent,#d4f542); color: #0c1016; }
.ci-check .material-symbols-outlined { font-size: 15px !important; }

/* direct vs task pill */
.ci-kind-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; }
.ci-kind-pill.direct { color: #60a5fa; background: rgba(96,165,250,.14); }
.ci-kind-pill.task { color: #f59e0b; background: rgba(245,158,11,.13); }
.ci-snoozed-in { color: #a855f7; background: rgba(168,85,247,.13); }

/* bulk action bar */
.ci-bulkbar { flex: none; display: none; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid #1f2530; background: #0e131b; }
.ci-bulkbar.on { display: flex; }
.ci-bulk-n { font-weight: 800; font-size: 12.5px; color: #dce3ed; }
.ci-bulk-sp { margin-left: auto; }
.ci-bulk-btn { border: 1px solid #2a3545; background: #141820; color: #b6c2d0; font-family: inherit; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ci-bulk-btn:hover { color: #fff; border-color: #3a4657; }
.ci-bulk-btn .material-symbols-outlined { font-size: 15px !important; }

/* inline reply composer under a row */
.ci-reply { padding: 0 14px 12px 47px; display: flex; gap: 8px; align-items: flex-end; }
.ci-reply textarea { flex: 1; resize: none; border: 1px solid #2a3545; background: #141820; color: #dce3ed; border-radius: 10px; padding: 8px 11px; font-family: inherit; font-size: 13px; line-height: 1.4; max-height: 120px; outline: none; }
.ci-reply textarea:focus { border-color: #3a4657; }
.ci-reply-send { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 0; background: var(--accent,#d4f542); color: #0c1016; display: grid; place-items: center; cursor: pointer; }
.ci-reply-send .material-symbols-outlined { font-size: 17px !important; }

/* snooze menu (shared floating menu) */
.ci-menu { position: fixed; z-index: 6200; min-width: 178px; background: #101318; border: 1px solid #2a3545; border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .1s, transform .1s; overflow: hidden; padding: 5px; }
.ci-menu.on { opacity: 1; visibility: visible; transform: translateY(0); }
.ci-menu button { width: 100%; display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: #c3ccd8; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 10px; border-radius: 7px; cursor: pointer; text-align: left; }
.ci-menu button:hover { background: #171d27; color: #fff; }
.ci-menu button .material-symbols-outlined { font-size: 16px !important; color: #7a8a9b; }
.ci-menu .ci-menu-t { padding: 6px 10px 3px; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #5a6678; }

/* clickable "new mention" toast */
.ci-toast { position: fixed; left: 74px; bottom: 18px; z-index: 6300; max-width: 320px; display: flex; align-items: center; gap: 10px;
  background: #141820; border: 1px solid #2a3545; border-left: 3px solid var(--accent,#d4f542); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  padding: 11px 13px; cursor: pointer; font-family: 'Barlow', sans-serif; color: #dce3ed; opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s; }
.ci-toast.on { opacity: 1; transform: translateY(0); }
.ci-toast .material-symbols-outlined { color: var(--accent,#d4f542); font-size: 20px !important; flex: none; }
.ci-toast-txt { font-size: 12.5px; line-height: 1.35; min-width: 0; }
.ci-toast-txt b { font-weight: 800; }
.ci-toast-sub { color: #8a9aab; font-size: 11px; margin-top: 1px; }
/* A phone has no sidebar to clear and a 60px tab bar to stay above — otherwise
   the "new mention" toast lands behind the bar, indented by a rail that isn't
   there. */
@media (max-width: 767px) {
  .ci-toast { left: 12px; right: 12px; max-width: none; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* swipe (mobile): translate the row + a colored edge hint (left = archive, right = snooze) */
.ci-item { transition: transform .18s ease, box-shadow .12s; }
.ci-item.ci-swiping { transition: none; }
.ci-item.ci-sw-left { box-shadow: inset -4px 0 0 #b45309; }
.ci-item.ci-sw-right { box-shadow: inset 4px 0 0 #15803d; }

/* thread jump-to-message flash */
.cm-msg.cm-flash { animation: cm-flash 1.6s ease; border-radius: 8px; }
@keyframes cm-flash { 0%,60% { background: rgba(212,245,66,.14); } 100% { background: transparent; } }

body.light-mode .ci-toolbar { border-bottom-color: #e4e8f0; }
body.light-mode .ci-search, body.light-mode .ci-tchip, body.light-mode .ci-tool-btn { background: #f0f3f8; border-color: #dde2ec; color: #5a6a7b; }
body.light-mode .ci-search input { color: #1a2030; }
body.light-mode .ci-group-h { background: #fff; border-bottom-color: #e4e8f0; color: #5a6a7b; }
body.light-mode .ci-item.ci-active { background: #eef3ff; }
body.light-mode .ci-menu, body.light-mode .ci-toast { background: #fff; border-color: #dde2ec; color: #1a2030; }
body.light-mode .ci-menu button { color: #33404f; }
body.light-mode .ci-menu button:hover { background: #f0f3f8; color: #1a2030; }
body.light-mode .ci-bulkbar { background: #f5f7fa; border-top-color: #e4e8f0; }
body.light-mode .ci-reply textarea { background: #fff; border-color: #dde2ec; color: #1a2030; }
body.light-mode .ci-toast-sub { color: #5a6a7b; }

/* ── Inbox v2: urgent flag + acknowledge ────────────────────────────────────*/
/* composer urgent toggle */
.cm-urgent { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #2a3545; background: #141820; color: #7a8a9b; display: grid; place-items: center; cursor: pointer; }
.cm-urgent:hover { color: #f87171; border-color: rgba(239,68,68,.4); }
.cm-urgent.on { background: rgba(239,68,68,.16); color: #f87171; border-color: rgba(239,68,68,.5); }
.cm-urgent .material-symbols-outlined { font-size: 19px !important; }

/* urgent message in a thread */
.cm-urgent-pill { display: inline-flex; align-items: center; gap: 2px; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #f87171; background: rgba(239,68,68,.14); padding: 1px 7px 1px 4px; border-radius: 999px; }
.cm-urgent-pill .material-symbols-outlined { font-size: 12px !important; }
.cm-urgent-msg .cm-msg-text { border-left: 2px solid rgba(239,68,68,.5); padding-left: 9px; }

/* acknowledge row under a message */
.cm-ackrow { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
.cm-ack-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #2a3545; background: transparent; color: #8a9aab; font-family: inherit; font-weight: 700; font-size: 11px; padding: 3px 10px 3px 7px; border-radius: 999px; cursor: pointer; }
.cm-ack-btn .material-symbols-outlined { font-size: 13px !important; }
.cm-ack-btn:hover { color: #dce3ed; border-color: #3a4657; }
.cm-ack-btn.on { color: var(--accent,#d4f542); border-color: rgba(212,245,66,.4); background: rgba(212,245,66,.08); }
.cm-ack-seen { font-size: 10.5px; color: #6a7a8b; }

/* urgent in the inbox list + reassign menu avatars */
.ci-item.ci-urgent { box-shadow: inset 3px 0 0 #ef4444; }
.ci-item.ci-urgent.ci-active { box-shadow: inset 3px 0 0 var(--accent,#d4f542); }
.ci-kind-pill.urgent { color: #f87171; background: rgba(239,68,68,.15); }
.ci-menu button .cm-av { width: 22px; height: 22px; flex: none; }

body.light-mode .cm-urgent { background: #f0f3f8; border-color: #dde2ec; color: #6a7a8b; }
body.light-mode .cm-ack-btn { border-color: #dde2ec; color: #5a6a7b; }
body.light-mode .cm-ack-seen { color: #6a7a8b; }



/* ══ Inbox on a phone (<=600px) ═══════════════════════════════════════════
   The same list, the same handlers, a different SHAPE. Three things were
   ABSENT rather than tight at 390px, and each is answered below:
     · .ci-actions is opacity:0 until :hover — acknowledge / mark read / snooze
       / archive simply did not exist on touch. They move behind one 44px ⋮.
     · .ci-side laid out those four invisible buttons anyway, so it claimed
       182px of a 390px row and every message truncated to ~15 characters. On a
       phone the side is one button and the preview gets two real lines.
     · head + filters + toolbar cost 200px before the first mention. The
       toolbar's four controls move into a sheet and search into an icon, so the
       chrome is a head and one control row.
   All of it is gated at 600px; above that these rules do nothing and the
   desktop markup is byte-for-byte what it was. */
.ci-ph-only { display: none; }
.ci-more    { display: none; }
.ci-sheet   { display: none; }
/* display:contents on a desktop → .ci-filters keeps its exact place in the
   panel's flex column, and the two phone buttons are simply not in the layout. */
.ci-fbar    { display: contents; }

@media (max-width: 600px) {
  /* ── head: back · title. Everything else is in the tools sheet ── */
  .ci-head { padding: 10px 12px; gap: 8px; }
  .ci-head-ic { display: none; }
  #ci-select, #ci-markall, #ci-x { display: none !important; }
  .ci-back { width: 40px; height: 40px; margin-left: -6px; }
  .ci-back .material-symbols-outlined { font-size: 22px !important; }
  .ci-title { font-size: 17px; }

  /* ── one control row: chips scroll, two buttons pin ── */
  .ci-fbar {
    display: flex; align-items: center; gap: 6px;
    padding: 0 10px 10px; border-bottom: 1px solid #1f2530;
  }
  .ci-filters {
    flex: 1; min-width: 0; padding: 0; border-bottom: 0; margin: 0;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .ci-filters::-webkit-scrollbar { display: none; }
  /* Four chips never fit 390px next to two buttons, so the row scrolls — the
     fade is what tells you that, instead of "Archived" looking clipped. */
  .ci-filters {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
  }
  .ci-fchip {
    flex: none; scroll-snap-align: start; min-height: 38px;
    padding: 9px 14px; font-size: 12.5px;
  }
  .ci-ph-only { display: grid; }
  #ci-search-btn, #ci-tools-btn { width: 40px; height: 40px; flex: none; }

  /* Search TAKES the row rather than adding one — and its own × closes it,
     because the icon that opened it goes away with the chips. */
  .ci-toolbar { display: none; }
  .ci-panel.ci-searching .ci-fbar { display: none; }
  .ci-panel.ci-searching .ci-toolbar {
    display: flex; padding: 0 10px 10px; border-bottom: 1px solid #1f2530;
  }
  .ci-panel.ci-searching #ci-types, .ci-panel.ci-searching #ci-group { display: none; }
  .ci-search { flex: 1 1 auto; padding: 8px 6px 8px 10px; }
  .ci-search input { font-size: 16px; }   /* under 16px iOS zooms in and stays there */
  .ci-search-x {
    display: grid; place-items: center; width: 34px; height: 34px; flex: none;
    border: 0; background: transparent; color: #7a8a9b; border-radius: 8px; cursor: pointer;
  }
  .ci-search-x .material-symbols-outlined { font-size: 18px !important; }

  /* ── the row: the message is the point ── */
  .ci-item { padding: 12px 6px 12px 16px; gap: 10px; align-items: flex-start; }
  .ci-item .cm-av { width: 34px; height: 34px; }
  .ci-dot { top: 20px; }
  .ci-who { font-size: 13.5px; }
  .ci-time { font-size: 11px; }
  .ci-prev {
    white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 13.5px; line-height: 1.36; margin-top: 4px;
  }
  .ci-ctx { margin-top: 7px; }
  .ci-car { max-width: 46vw; }
  .ci-side { align-self: flex-start; align-items: flex-start; }
  .ci-go, .ci-actions { display: none; }
  .ci-more {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    margin: -6px 0 0 0; border: 0; background: transparent; color: #7a8a9b;
    border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .ci-more .material-symbols-outlined { font-size: 20px !important; }
  .ci-more:active { background: #171d27; color: #dce3ed; }
  .ci-check { width: 24px; height: 24px; align-self: flex-start; margin-top: 5px; }
  .ci-task { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 8px; }
  .ci-task-btn { min-height: 38px; padding: 6px 14px 6px 11px; font-size: 12.5px; }
  .ci-task-chip { min-height: 38px; padding: 6px 12px 6px 9px; font-size: 12px; }

  /* ── the shared floating menu, as a bottom sheet ── */
  .ci-menu.ci-msheet {
    left: 8px; right: 8px; top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    min-width: 0; padding: 8px; border-radius: 16px;
    max-height: 74vh; overflow-y: auto; transform: translateY(14px);
  }
  .ci-menu.ci-msheet.on { transform: translateY(0); }
  /* Its own scrim — the menu already dismisses on an outside tap, this is what
     says so. z-index:-1 keeps it behind the menu's own background but above the
     list, because .ci-menu's z-index makes it a stacking context. */
  .ci-menu.ci-msheet::before {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background: rgba(0, 0, 0, .5);
  }
  .ci-menu.ci-msheet button {
    min-height: 44px; font-size: 14.5px; padding: 10px 12px; gap: 13px; border-radius: 10px;
  }
  .ci-menu.ci-msheet button .material-symbols-outlined { font-size: 20px !important; }
  .ci-menu.ci-msheet .ci-menu-t { padding: 8px 12px 7px; font-size: 11px; }
  .ci-menu-danger { color: #f87171 !important; }

  /* ── the tools sheet ── */
  .ci-sheet {
    display: block; position: fixed; inset: 0; z-index: 6250;
    background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden;
    transition: opacity .16s;
  }
  .ci-sheet.on { opacity: 1; visibility: visible; }
  .ci-sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #101318; border-top: 1px solid #2a3545; border-radius: 18px 18px 0 0;
    padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transition: transform .2s ease;
    font-family: 'Barlow', sans-serif; color: #dce3ed;
  }
  .ci-sheet.on .ci-sheet-panel { transform: translateY(0); }
  .ci-sheet-grip {
    width: 38px; height: 4px; border-radius: 999px; background: #2a3545; margin: 4px auto 10px;
  }
  .ci-sheet-t {
    padding: 8px 10px 4px; font-size: 10.5px; font-weight: 800;
    letter-spacing: .7px; text-transform: uppercase; color: #5a6678;
  }
  .ci-sheet-row {
    width: 100%; min-height: 46px; display: flex; align-items: center; gap: 13px;
    border: 0; background: transparent; color: #c3ccd8; font-family: inherit;
    font-size: 14.5px; font-weight: 600; padding: 10px 12px; border-radius: 10px;
    cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
  }
  .ci-sheet-row .material-symbols-outlined { font-size: 20px !important; color: #7a8a9b; flex: none; }
  .ci-sheet-row.on { color: var(--accent, #d4f542); }
  .ci-sheet-row.on .material-symbols-outlined { color: var(--accent, #d4f542); }
  .ci-sheet-row:active { background: #171d27; }
  .ci-sheet-row[disabled] { opacity: .4; }
  .ci-sheet-tick { margin-left: auto; }

  /* ── reply composer + bulk bar ── */
  .ci-reply { padding: 0 12px 12px; gap: 8px; }
  .ci-reply textarea { font-size: 16px; padding: 10px 12px; }
  .ci-reply-send { width: 44px; height: 44px; }
  .ci-bulkbar {
    flex-wrap: wrap; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .ci-bulk-n { flex: 1 1 100%; }
  .ci-bulk-sp { display: none; }
  .ci-bulk-btn { flex: 1; min-height: 38px; justify-content: center; padding: 8px 10px; }

  /* the empty state shouldn't push a short list off the screen */
  .ci-list > .ci-empty { min-height: 40vh; }
}

/* Light mode — the phone-only surfaces */
body.light-mode .ci-sheet-panel { background: #fff; border-top-color: #dde2ec; color: #1a2030; }
body.light-mode .ci-sheet-grip { background: #dde2ec; }
body.light-mode .ci-sheet-t { color: #8a9aab; }
body.light-mode .ci-sheet-row { color: #33415a; }
body.light-mode .ci-sheet-row:active { background: #f0f3f8; }
body.light-mode .ci-sheet-row.on,
body.light-mode .ci-sheet-row.on .material-symbols-outlined { color: #5a7a00; }
body.light-mode .ci-more:active { background: #eef1f6; color: #1a2030; }
body.light-mode .ci-search-x { color: #8a9aab; }
body.light-mode .ci-menu-danger { color: #dc2626 !important; }

/* `body.light-mode .ci-fchip` (0,2,1) outranks `.ci-fchip.on` (0,2,0), so in
   light mode the ACTIVE filter lost its highlight completely — all four chips
   read as off and nothing said which one you were on. Tinted rather than solid,
   matching how the rest of the app draws an active control in light mode. */
body.light-mode .ci-fchip.on { background: #e8f4cc; border-color: #c9dd96; color: #46600a; }
/* The light accent is #5a7a00; the inherited #0c1016 glyph on it is 2.4:1. */
body.light-mode .ci-reply-send { color: #fff; }

body.light-mode .ci-panel { background: #fff; border-left-color: #dde2ec; box-shadow: -14px 0 40px rgba(0,0,0,.14); color: #1a2030; }
body.light-mode .ci-head, body.light-mode .ci-filters, body.light-mode .ci-item { border-bottom-color: #e4e8f0; }
body.light-mode .ci-title, body.light-mode .ci-who { color: #1a2030; }
body.light-mode .ci-back:hover, body.light-mode .ci-markall:hover, body.light-mode .ci-x:hover { background: #f0f3f8; color: #1a2030; }
body.light-mode .ci-fchip { background: #f0f3f8; border-color: #dde2ec; color: #5a6a7b; }
body.light-mode .ci-item:hover { background: #f5f7fa; }
body.light-mode .ci-prev { color: #5a6a7b; }
body.light-mode .ci-actions button:hover { background: #eef1f6; color: #1a2030; }
body.light-mode .ci-go:hover { background: #eef1f6; color: #1a2030; }
body.light-mode .ci-pop { background: #fff; border-color: #dde2ec; box-shadow: 0 10px 34px rgba(0,0,0,.16); color: #1a2030; }
body.light-mode .ci-pop-item { border-bottom-color: #e4e8f0; }
body.light-mode .ci-pop-item:hover { background: #f5f7fa; }
body.light-mode .ci-pop-prev { color: #5a6a7b; }
body.light-mode .ci-pop-prev b { color: #1a2030; }