/* MLQ Work - one stylesheet, light + dark */
:root {
  --bg: #f6f7fb; --panel: #ffffff; --panel-2: #f1f3f8; --line: #e3e6ee; --line-2: #d4d8e3;
  --text: #171a23; --muted: #626a7e; --faint: #8a91a3;
  --accent: #5a19ff; --accent-soft: #ece6ff; --accent-text: #4a10e0;
  --good: #1f9d63; --good-soft: #e3f6ec; --warn: #c97a00; --warn-soft: #fff3dc;
  --bad: #d23c3c; --bad-soft: #fde8e8; --info: #2f74d0; --info-soft: #e5effd;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06);
  --radius: 12px; --radius-sm: 8px;
  --side: 232px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1117; --panel: #171a23; --panel-2: #1e2230; --line: #272c3b; --line-2: #343a4d;
    --text: #e9ebf2; --muted: #a0a7b8; --faint: #747c90;
    --accent: #8b74ff; --accent-soft: #2a2450; --accent-text: #b9abff;
    --good: #3cc489; --good-soft: #15342a; --warn: #f0a93a; --warn-soft: #3a2d14;
    --bad: #f06a6a; --bad-soft: #3d1c1f; --info: #6aa5f5; --info-soft: #182a45;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1117; --panel: #171a23; --panel-2: #1e2230; --line: #272c3b; --line-2: #343a4d;
  --text: #e9ebf2; --muted: #a0a7b8; --faint: #747c90;
  --accent: #8b74ff; --accent-soft: #2a2450; --accent-text: #b9abff;
  --good: #3cc489; --good-soft: #15342a; --warn: #f0a93a; --warn-soft: #3a2d14;
  --bad: #f06a6a; --bad-soft: #3d1c1f; --info: #6aa5f5; --info-soft: #182a45;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 13px; font-weight: 650; text-transform: capitalize; letter-spacing: 0; color: var(--muted); }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 12px; }
.hidden { display: none !important; }

/* ---------- shell */
.app { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border-right: 1px solid var(--line); padding: 16px 12px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.brand .logo { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; display: block; flex: none; }
.brand { gap: 9px; align-items: center; } .brand .wordmark { height: 19px; width: auto; display: block; color: var(--text); flex: none; }
.brand-sub { font-weight: 500; font-size: 17px; letter-spacing: -.01em; color: var(--muted); line-height: 1; transform: translateY(1px); }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 550; text-decoration: none;
}
.nav a:hover { background: var(--panel-2); color: var(--text); }
.nav a.on { background: var(--accent-soft); color: var(--accent-text); }
.nav .count { margin-left: auto; font-size: 11px; background: var(--bad); color: #fff; border-radius: 10px; padding: 0 6px; min-width: 18px; text-align: center; }
.side .foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px; font-size: 12px; color: var(--muted); }
.main { min-width: 0; padding: 24px 28px 64px; }
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.topbar .grow { flex: 1; }
.search { position: relative; }
.search input { width: 260px; padding: 8px 12px 8px 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.search::before { content: "⌕"; position: absolute; left: 11px; top: 6px; color: var(--faint); font-size: 16px; }

/* ---------- building blocks */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.pad { padding: 16px 18px; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-h .grow { flex: 1; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: 2fr 1fr; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 14px 16px; cursor: pointer; }
.kpi .n { font-size: 26px; font-weight: 750; letter-spacing: -.02em; }
.kpi .l { color: var(--muted); font-size: 12px; font-weight: 550; }
.kpi.bad .n { color: var(--bad); } .kpi.warn .n { color: var(--warn); } .kpi.good .n { color: var(--good); }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--panel); cursor: pointer; font-weight: 550; white-space: nowrap;
}
.btn:hover { background: var(--panel-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn.good { background: var(--good); border-color: var(--good); color: #fff; }
.btn.bad { color: var(--bad); }
.btn:disabled { opacity: .5; cursor: default; }

.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; cursor: pointer; color: var(--muted); font-weight: 600; }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }

select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=tel], textarea {
  border: 1px solid var(--line-2); background: var(--panel); border-radius: 8px; padding: 7px 10px; min-width: 0;
}
textarea { width: 100%; min-height: 80px; resize: vertical; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters select { max-width: 190px; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: capitalize; white-space: nowrap; }
.st-requested { background: var(--panel-2); color: var(--muted); }
.st-in_progress { background: var(--info-soft); color: var(--info); }
.st-zap { background: var(--warn-soft); color: var(--warn); }
.st-changes { background: #fdeee2; color: #c4621b; }
.st-waiting { background: var(--panel-2); color: var(--faint); }
.st-review, .st-qc { background: var(--accent-soft); color: var(--accent-text); }
.st-delivery { background: var(--good-soft); color: var(--good); }
.st-done { background: var(--good-soft); color: var(--good); }
.st-reference { background: var(--panel-2); color: var(--faint); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-changes { background: #3a2716; color: #f3a565; } }
:root[data-theme="dark"] .st-changes { background: #3a2716; color: #f3a565; }

.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 12px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.s-free { color: var(--good); } .s-balanced { color: var(--info); } .s-busy { color: var(--warn); } .s-overloaded { color: var(--bad); } .s-off { color: var(--faint); }

.av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; position: relative; }
.av.sm { width: 22px; height: 22px; font-size: 10px; }
.av.lg { width: 36px; height: 36px; font-size: 13px; }
.av .pres { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--panel); background: var(--faint); }
.av .pres.online { background: var(--good); } .av .pres.idle { background: var(--warn); } .av .pres.dnd { background: var(--bad); }
.avs { display: inline-flex; } .avs .av + .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }

.bar { height: 6px; border-radius: 4px; background: var(--panel-2); overflow: hidden; position: relative; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }

/* ---------- lists of tasks */
.tasks { display: flex; flex-direction: column; }
.task {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 18px;
  border-bottom: 1px solid var(--line); cursor: pointer; align-items: center;
}
.task:last-child { border-bottom: 0; }
.task:hover { background: var(--panel-2); }
.task .t { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task .meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); grid-column: 1; }
.task .right { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 10px; }
.due { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.due.over { color: var(--bad); } .due.today { color: var(--warn); }
.group-h { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--panel-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.group-h .grow { flex: 1; }
.group + .group { border-top: 1px solid var(--line); }
.empty { padding: 28px; text-align: center; color: var(--faint); }

/* ---------- alerts feed */
.alert { display: grid; grid-template-columns: 0 1fr auto; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--line); align-items: start; }
.alert:last-child { border-bottom: 0; }
.alert .ic { font-size: 15px; line-height: 20px; overflow: visible; }
.alert .tt { font-weight: 580; }
.alert .bd { color: var(--muted); font-size: 12.5px; }
.alert.sev1 { box-shadow: inset 3px 0 0 var(--bad); } .alert.sev2 { box-shadow: inset 3px 0 0 var(--warn); } .alert.sev3 { box-shadow: inset 3px 0 0 var(--line-2); }
.alert.clickable { cursor: pointer; } .alert.clickable:hover { background: var(--panel-2); }

/* ---------- board */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 210px); }
.col-h { padding: 10px 12px; display: flex; gap: 8px; align-items: center; font-weight: 650; }
.col-b { padding: 0 8px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.kcard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.kcard:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.kcard .t { font-weight: 560; font-size: 13px; }
.kcard .m { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }

/* ---------- timeline */
.tl { display: grid; gap: 8px; overflow-x: auto; }
.tl-col { min-width: 170px; }
.tl-h { font-weight: 650; font-size: 12px; padding: 6px 4px; color: var(--muted); display: flex; justify-content: space-between; }
.tl-h.today { color: var(--accent-text); }
.tl-h.sun { opacity: .5; }

/* ---------- people */
.ptable { width: 100%; border-collapse: collapse; }
.ptable th { text-align: left; font-size: 11.5px; text-transform: capitalize; letter-spacing: 0; color: var(--faint); font-weight: 650; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ptable td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable tr.click { cursor: pointer; } .ptable tr.click:hover td { background: var(--panel-2); }
.heat { display: flex; gap: 3px; }
.heat i { width: 26px; height: 22px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; font-style: normal; font-weight: 650; color: var(--text); }
.who { display: flex; align-items: center; gap: 10px; }
.who .n { font-weight: 600; } .who .r { font-size: 12px; color: var(--muted); }

.strip { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 18px; }
.mate { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); cursor: pointer; }
.mate:hover { border-color: var(--line-2); }
.mate .n { font-weight: 600; font-size: 12.5px; }
.mate .b { width: 44px; }

/* ---------- drawer */
.scrim { position: fixed; inset: 0; background: rgba(10, 12, 20, .35); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); background: var(--panel); z-index: 41;
  border-left: 1px solid var(--line); box-shadow: -10px 0 40px rgba(0,0,0,.15); display: flex; flex-direction: column;
  animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateX(30px); opacity: .5; } to { transform: none; opacity: 1; } }
.drawer .dh { padding: 18px 22px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.drawer .dh h2 { font-size: 18px; }
.drawer .db { padding: 18px 22px 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.facts { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; font-size: 13px; align-items: center; }
.facts dt { color: var(--muted); font-weight: 600; } .facts dd { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.desc { white-space: pre-wrap; word-break: break-word; background: var(--panel-2); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
.comment { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.comment .bubble { background: var(--panel-2); border-radius: 10px; padding: 9px 12px; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; }
.comment .who2 { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; padding: 3px 0; }
.check.done span { text-decoration: line-through; color: var(--faint); }
.att { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; }
.att img { width: 54px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--panel-2); }
.hist { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }

/* ---------- forms / modal */
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; background: rgba(10,12,20,.4); }
.modal .box { width: min(520px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login .box { width: min(400px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.login .brand { padding: 0 0 6px; }

/* ---------- toasts */
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--text); color: var(--bg); padding: 9px 14px; border-radius: 10px; font-weight: 550; box-shadow: var(--shadow); }

/* ---------- settings */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { border: 0; background: none; padding: 9px 12px; cursor: pointer; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--accent-text); border-bottom-color: var(--accent); }
.stbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.stbl th { text-align: left; color: var(--faint); font-size: 11.5px; text-transform: capitalize; letter-spacing: 0; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.stbl td { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.stbl input[type=text], .stbl input[type=number], .stbl input[type=email], .stbl select { width: 100%; padding: 5px 8px; }
.stbl select { min-width: 110px; }
.save-dot { color: var(--good); font-size: 12px; font-weight: 650; }

/* ---------- small screens */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 45; transform: translateX(-100%); transition: transform .18s; width: var(--side); box-shadow: var(--shadow); }
  .side.open { transform: none; }
  .menu-btn { display: inline-flex; }
  .main { padding: 16px 16px 64px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .search input { width: 100%; }
  .search { flex: 1; }
  .task { padding: 10px 14px; }
  .hide-sm { display: none; }
}

/* ---------- chat */
.chat { display: grid; grid-template-columns: 290px 1fr; height: calc(100vh - 110px); min-height: 420px; overflow: hidden; }
.chat .convs { border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; }
.conv { display: flex; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.conv:hover { background: var(--panel-2); } .conv.on { background: var(--accent-soft); }
.conv .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .p { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .u { margin-left: auto; background: var(--accent); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 7px; font-weight: 700; }
.thread { display: flex; flex-direction: column; min-width: 0; }
.thread .th { padding: 12px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.msgs { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.msg { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 4px 0; }
.msg.cont { padding-top: 0; } .msg.cont .av { visibility: hidden; height: 0; }
.msg .meta { font-size: 12px; color: var(--muted); } .msg .meta b { color: var(--text); margin-right: 6px; }
.msg .body { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.msg .atts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tagchip { display: inline-flex; gap: 4px; align-items: center; padding: 0 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); font-weight: 650; font-size: 12.5px; cursor: pointer; }
.composer { border-top: 1px solid var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.composer textarea { min-height: 44px; max-height: 180px; }
.suggest { position: absolute; bottom: 100%; left: 14px; right: 14px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; z-index: 5; }
.suggest div { padding: 7px 12px; cursor: pointer; font-size: 13px; display: flex; gap: 8px; }
.suggest div.on, .suggest div:hover { background: var(--accent-soft); }
.day-sep { text-align: center; font-size: 11.5px; color: var(--faint); margin: 12px 0 6px; font-weight: 650; }
@media (max-width: 900px) {
  .chat { grid-template-columns: 1fr; height: calc(100vh - 90px); }
  .chat.has-thread .convs { display: none; } .chat:not(.has-thread) .thread { display: none; }
}
.thread.drop { outline: 2px dashed var(--accent); outline-offset: -8px; background: var(--accent-soft); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 40px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--faint); cursor: pointer; padding: 6px; display: grid; place-items: center; }
.pw-eye:hover { color: var(--text); }
.login input { width: 100%; }

/* ---------- task card v2 */
.tc { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px 11px 14px;
  border-bottom: 1px solid var(--line); cursor: pointer; position: relative; }
.tc::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tc); }
.tc:last-child { border-bottom: 0; }
.tc:hover { background: var(--panel-2); }
.tc-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--panel); color: transparent;
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: all .12s; }
.tc-check:hover { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.tc.is-done .tc-check { border-color: var(--good); background: var(--good); color: #fff; }
.tc.is-done .tc-title { text-decoration: line-through; color: var(--faint); }
.tc-main { min-width: 0; }
.tc-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--muted); }
.tc-right { display: flex; align-items: center; gap: 12px; }
.ic-n { display: inline-flex; align-items: center; gap: 3px; color: var(--faint); font-size: 12px; }
.ic-n.warn { color: var(--warn); }
.team { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--tc);
  background: color-mix(in srgb, var(--tc) 12%, transparent); padding: 1px 8px; border-radius: 999px; }
.duepill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.duepill.over { background: var(--bad-soft); color: var(--bad); }
.duepill.today { background: var(--warn-soft); color: var(--warn); }
.duepill.soon { background: var(--info-soft); color: var(--info); }
.avs .av { width: 28px; height: 28px; font-size: 11px; box-shadow: 0 0 0 2px var(--panel); }
.avs .av.sm { width: 22px; height: 22px; font-size: 10px; }
.avs .av + .av { margin-left: -8px; }
.avs .av.more { background: var(--panel-2); color: var(--muted); }
.nobody { width: 28px; height: 28px; border-radius: 50%; border: 2px dashed var(--line-2); color: var(--faint); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; }
.toast { display: flex; align-items: center; gap: 14px; }
.toast-btn { background: none; border: 0; color: var(--accent-soft); font-weight: 750; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- team panels (home) */
.teams { display: flex; flex-direction: column; gap: 14px; }
.tp { border-left: 4px solid var(--tc); }
.tp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap; }
.tp > summary::-webkit-details-marker { display: none; }
.tp > summary .chev { transition: transform .15s; color: var(--faint); }
.tp[open] > summary .chev { transform: rotate(90deg); }
.tp-name { font-size: 16px; font-weight: 750; color: var(--text); min-width: 70px; }
.tp-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.stat { font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.stat.bad { background: var(--bad-soft); color: var(--bad); } .stat.warn { background: var(--warn-soft); color: var(--warn); }
.tp-body { border-top: 1px solid var(--line); }
.people-row { display: flex; gap: 10px; padding: 14px 18px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.pcard { min-width: 178px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--panel); }
.pcard:hover { border-color: var(--line-2); }
.pcard.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pcard .top { display: flex; align-items: center; gap: 8px; }
.pcard .n { font-weight: 650; font-size: 13px; }
.pcard .s { font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; }
.chips { display: flex; gap: 6px; padding: 12px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.fchip { border: 1px solid var(--line-2); background: var(--panel); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.fchip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.fchip .c { opacity: .7; font-weight: 700; }
.sec-h { padding: 10px 18px 6px; font-size: 11.5px; font-weight: 750; letter-spacing: 0; text-transform: capitalize; color: var(--faint); display: flex; gap: 8px; align-items: center; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.sec-h.bad { color: var(--bad); }
.more-link { padding: 10px 18px; font-size: 12.5px; color: var(--accent-text); cursor: pointer; font-weight: 650; }
@media (max-width: 900px) { .tc { grid-template-columns: 24px minmax(0,1fr); } .tc-right { grid-column: 2; } }

/* ---------- shell v2: calmer sidebar, profile menu, search, tab bar */
.nav-sep { height: 1px; background: var(--line); margin: 8px 10px; }
.nav a span:not(.count) { flex: 1; }
.search-btn { margin: 10px 4px 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--faint); cursor: pointer; font-weight: 550; }
.search-btn:hover { color: var(--text); border-color: var(--line-2); }
kbd { margin-left: auto; font: 600 10.5px/1 ui-monospace, monospace; padding: 3px 5px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--faint); background: var(--panel); }
.me-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 10px; border: 0; background: none; cursor: pointer; text-align: left; }
.me-btn:hover { background: var(--panel-2); }
.me-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.me-txt b { color: var(--text); font-size: 13px; }
.dotx { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-right: 6px; vertical-align: middle; }
.dotx.online { background: var(--good); } .dotx.idle { background: var(--warn); } .dotx.dnd { background: var(--bad); }
.menu-pop { position: fixed; left: 12px; bottom: 64px; width: 240px; z-index: 55; padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: pop .12s ease-out; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.menu-pop .mp-head { display: flex; gap: 10px; align-items: center; padding: 8px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-pop button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 550; }
.menu-pop button:hover { background: var(--panel-2); }
.menu-pop button.bad { color: var(--bad); }
.mp-va { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; font-weight: 550; }
.mp-va select { max-width: 120px; padding: 4px 6px; }
.tabbar { display: none; }
.side .foot { gap: 4px; }

/* ---------- command palette */
.pal-wrap { position: fixed; inset: 0; z-index: 70; background: rgba(10,12,20,.35); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.pal { width: min(640px, calc(100vw - 24px)); overflow: hidden; animation: pop .12s ease-out; }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--faint); }
.pal-in input { flex: 1; border: 0; background: none; font-size: 16px; outline: none; padding: 0; color: var(--text); }
.pal-list { max-height: 56vh; overflow-y: auto; padding: 6px; }
.pal-h { font-size: 11px; font-weight: 750; letter-spacing: 0; text-transform: capitalize; color: var(--faint); padding: 10px 10px 4px; }
.pal-i { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.pal-i.on { background: var(--accent-soft); }
.pal-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }

/* ---------- motion + focus */
.tc, .pcard, .kcard, .btn, .fchip, .nav a { transition: background .12s, border-color .12s, box-shadow .12s, transform .12s; }
.tc.leaving { opacity: 0; transform: translateX(16px); transition: all .25s; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.empty-big { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty-big .em { font-size: 34px; margin-bottom: 8px; }
.empty-big b { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }
.done-today { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--good); background: var(--good-soft); padding: 4px 10px; border-radius: 999px; }

/* ---------- phones */
@media (max-width: 900px) {
  body { overflow-x: hidden; }
  .main { padding: 14px 12px 90px; max-width: 100vw; overflow-x: hidden; }
  .topbar { gap: 8px; }
  .topbar h1 { font-size: 20px; }
  .topbar .grow { display: none; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; background: var(--panel); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--muted);
    text-decoration: none; padding: 4px 10px; border-radius: 10px; position: relative; }
  .tabbar a.on { color: var(--accent-text); }
  .tabbar .count { position: absolute; top: 0; right: 4px; font-size: 10px; background: var(--bad); color: #fff; border-radius: 8px; padding: 0 5px; }
  .menu-btn { display: none !important; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 10px 12px; } .kpi .n { font-size: 22px; }
  .tc { grid-template-columns: 24px minmax(0, 1fr); padding: 10px 12px; gap: 10px; }
  .tc-right { grid-column: 2; justify-content: space-between; }
  .tc-title { white-space: normal; }
  .tp > summary { padding: 12px 14px; }
  .tp-stats { width: 100%; }
  .menu-pop { left: 8px; right: 8px; width: auto; bottom: 74px; }
  .drawer { width: 100vw; }
  .chat { height: calc(100vh - 150px); }
}

/* =====================================================================
   Calm layer (Apple-like): one quiet canvas, soft white surfaces, few lines,
   big confident headings, one accent colour used sparingly.
   ===================================================================== */
:root {
  --bg: #f5f5f7; --panel: #ffffff; --panel-2: #f5f5f7; --line: #ececf0; --line-2: #d9d9de;
  --text: #1d1d1f; --muted: #6e6e73; --faint: #a1a1a6;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  --radius: 18px; --radius-sm: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #000; --panel: #1c1c1e; --panel-2: #2c2c2e; --line: #2c2c2e; --line-2: #3a3a3c;
    --text: #f5f5f7; --muted: #a1a1a6; --faint: #6e6e73; --shadow: none; }
}
:root[data-theme="dark"] { --bg: #000; --panel: #1c1c1e; --panel-2: #2c2c2e; --line: #2c2c2e; --line-2: #3a3a3c;
  --text: #f5f5f7; --muted: #a1a1a6; --faint: #6e6e73; --shadow: none; }

body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 14px; letter-spacing: -.005em; }
h1 { font-size: 30px; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.main { padding: 36px 44px 80px; max-width: 1280px; }
.topbar { margin-bottom: 26px; }
.card { border: 0; box-shadow: var(--shadow); border-radius: var(--radius); }
.card-h { border-bottom: 1px solid var(--line); padding: 16px 20px; }
.side { background: var(--bg); border-right: 0; padding: 22px 14px; }
.nav a { padding: 9px 12px; font-weight: 550; color: var(--muted); border-radius: 10px; }
.nav a.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.nav a.on svg { color: var(--accent); }
.search-btn { background: var(--panel); border: 0; box-shadow: var(--shadow); }
.kpis { gap: 14px; margin-bottom: 22px; }
.kpi { padding: 18px 20px; }
.kpi .n { font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.kpi .l { font-size: 13px; color: var(--muted); }
.kpi:hover { transform: translateY(-1px); }
.btn { border-radius: 999px; border: 0; background: var(--panel-2); padding: 8px 14px; }
.btn:hover { background: var(--line); }
.btn.primary { background: var(--accent); }
.btn.small { padding: 5px 11px; }
.seg { background: var(--line); border: 0; border-radius: 999px; }
.seg button { border-radius: 999px; }
.fchip { border: 0; background: var(--panel); box-shadow: var(--shadow); }
.fchip.on { background: var(--text); color: var(--bg); }
select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=tel], textarea {
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); }
.search input { border: 0; box-shadow: var(--shadow); border-radius: 999px; }
.tc { padding: 14px 20px 14px 16px; border-bottom: 1px solid var(--line); }
.tc::before { width: 3px; top: 14px; bottom: 14px; opacity: .85; }
.tc-title { font-size: 14.5px; font-weight: 590; }
.chip { border: 0; background: var(--panel-2); }
.pill { border-radius: 999px; padding: 2px 9px; font-size: 10.5px; }
.sec-h { background: transparent; border-bottom: 0; padding: 18px 20px 6px; }
.tp { border-left: 0; }
.tp > summary { padding: 18px 22px; }
.tp-name { font-size: 19px; letter-spacing: -.02em; }
.tp-name::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tc); margin-right: 10px; vertical-align: 2px; }
.stat { background: var(--panel-2); }
.pcard { border: 0; background: var(--panel-2); border-radius: 14px; }
.pcard.on { background: var(--panel); box-shadow: 0 0 0 2px var(--accent); }
.people-row, .chips { border-bottom: 0; }
.alert { border-bottom: 1px solid var(--line); padding: 14px 20px; }
.drawer { border-left: 0; border-radius: 22px 0 0 22px; }
.toast { border-radius: 999px; padding: 10px 18px; background: rgba(29,29,31,.92); color: #fff; backdrop-filter: blur(10px); }
.toast-btn { color: #b9a6ff; }
.empty { padding: 36px; }
@media (max-width: 900px) {
  .main { padding: 18px 14px 96px; }
  h1 { font-size: 24px; }
  .side { background: var(--panel); }
  .drawer { border-radius: 0; }
}
.grid > *, .tasks, .card { min-width: 0; }
@media (max-width: 900px) { .grid, .g3 { grid-template-columns: minmax(0, 1fr) !important; } .topbar > div[style*="width"] { flex: 1; } }
/* ---------- notifications bell + panel */
.bell { position: fixed; top: 22px; right: 26px; z-index: 35; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--panel);
  box-shadow: var(--shadow); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.bell:hover { transform: translateY(-1px); }
.bell-n { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 750; display: grid; place-items: center; }
.notif-pop { position: fixed; top: 70px; right: 22px; width: min(400px, calc(100vw - 16px)); max-height: 76vh; z-index: 60; display: flex; flex-direction: column; overflow: hidden; animation: pop .12s ease-out; }
.np-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.np-h b { font-size: 16px; }
.np-list { overflow-y: auto; flex: 1; }
.np-i { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.np-i:hover { background: var(--panel-2); }
.np-i.unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.np-i.unread .np-t > div:first-child { font-weight: 650; }
.np-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; font-size: 11px; flex: none; }
.np-t { min-width: 0; font-size: 13.5px; }
.np-b { color: var(--muted); font-size: 12.5px; max-height: 2.8em; overflow: hidden; }
.np-m { color: var(--faint); font-size: 11.5px; margin-top: 2px; }
.np-f { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--line); }
.np-enable { margin: 10px 16px 0; border: 0; background: var(--accent-soft); color: var(--accent-text); font-weight: 650; border-radius: 10px; padding: 9px; cursor: pointer; }
.topbar { padding-right: 56px; }
@media (max-width: 900px) { .bell { top: 12px; right: 12px; width: 36px; height: 36px; } .notif-pop { top: 56px; right: 8px; } }

/* presence text: green when in the app, grey when not */
.pres-t { color: var(--faint); } .pres-t.online { color: var(--good); } .pres-t.idle { color: var(--warn); } .pres-t.dnd { color: var(--bad); }
.av .pres.offline { background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--faint); }
.dotx.offline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }

/* =====================================================================
   Motion: short, soft, and never in the way (respects "reduce motion")
   ===================================================================== */
:root { --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tickpop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

.main.enter > * { animation: enter .32s var(--ease-out) both; }
.main.enter > *:nth-child(2) { animation-delay: .03s; } .main.enter > *:nth-child(3) { animation-delay: .06s; } .main.enter > *:nth-child(n+4) { animation-delay: .09s; }

/* drawer + scrim in and out */
.scrim { animation: fade .2s ease both; }
.drawer { animation: slidein .28s var(--ease-out) both; }
.swap .drawer, .swap .scrim { animation: none; }
.closing .scrim { animation: fade .18s ease reverse both; }
.closing .drawer { animation: slidein .2s var(--ease) reverse both; }

/* dialogs, menus, panels, toasts */
.modal { animation: fade .16s ease both; } .modal .box { animation: rise .24s var(--ease-out) both; }
.modal.closing { animation: fade .15s ease reverse both; } .modal.closing .box { animation: rise .15s ease reverse both; }
.menu-pop, .notif-pop, .pal { animation: rise .2s var(--ease-out) both; transform-origin: top right; }
.menu-pop { transform-origin: bottom left; }
.pal-wrap { animation: fade .15s ease both; }
.toast { animation: rise .26s var(--ease-out) both; }

/* team panels open smoothly */
.tp { interpolate-size: allow-keywords; }
.tp::details-content { height: 0; overflow: clip; transition: height .3s var(--ease-out), content-visibility .3s allow-discrete; }
.tp[open]::details-content { height: auto; }
.tp[open] > summary .chev { transform: rotate(90deg); }

/* completing a task: tick fills, row folds away */
.tc, .kcard { overflow: hidden; }
.ticked [data-complete] { background: var(--good) !important; border-color: var(--good) !important; color: #fff !important; animation: tickpop .3s var(--ease) both; }
.tc.leaving, .kcard.leaving { height: 0 !important; min-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0 !important; margin-bottom: 0 !important; border-width: 0 !important; transition: height .23s var(--ease), opacity .16s ease, padding .23s var(--ease), margin .23s var(--ease); }

/* touch feedback */
.btn:active, .fchip:active, .nav a:active, .pcard:active, .kpi:active, [data-complete]:active { transform: scale(.97); }
.tc:hover, .kcard:hover { background: var(--panel-2); }
.kpi, .pcard { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

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

/* Every label, button, tab and heading in Title Case (user text, dates and messages are left alone) */
h1, h2, h3, .btn, .nav a span, .tabbar a span, .fchip, .seg button, .tabs button, .modes button, .kpi .l, .stat, .pill, .sec-h,
.menu-pop button, label.f, th, .empty, .tp-stats, .card-h h2, .pal-h, .more-link, .team, .np-h b, .day-sep, .search-btn, .mp-va { text-transform: capitalize; }
.sec-h { font-size: 12.5px; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.ptable th, .stbl th { font-size: 12px; font-weight: 600; letter-spacing: 0; }

/* to-dos: one line to add, a calendar icon for the date */
.td-add { display: flex; align-items: center; gap: 6px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.td-add input[type=text] { flex: 1; border: 0; background: none; padding: 6px 0; font-size: 14px; outline: none; box-shadow: none; }
.td-date { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--faint); cursor: pointer; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.td-date:hover { background: var(--panel-2); color: var(--text); }
.td-date input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.td-date input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.td-x { opacity: 0; border: 0; background: none; color: var(--faint); cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: opacity .15s; }
.check:hover .td-x { opacity: 1; } .td-x:hover { color: var(--bad); background: var(--panel-2); }
@media (hover: none) { .td-x { opacity: .6; } }

/* ---------- task drawer, decluttered */
.drawer .dh { gap: 12px; padding: 16px 22px 16px; }
.dh-top { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.drawer .dh h2 { font-size: 21px; line-height: 1.25; letter-spacing: -.015em; text-transform: none; }
.dh-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dh-acts .btn { display: inline-flex; align-items: center; gap: 7px; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 9px; border: 0; background: none; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
.tagcopy { cursor: pointer; border: 0; font: inherit; font-size: 12px; } .tagcopy:hover { background: var(--line); }
.facts2 { display: flex; flex-direction: column; gap: 2px; }
.f2 { display: grid; grid-template-columns: 74px 1fr; align-items: center; min-height: 38px; gap: 12px; }
.f2 .k { color: var(--faint); font-size: 13px; font-weight: 550; }
.f2 .v { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.own { display: inline-flex; align-items: center; gap: 7px; font-weight: 560; }
.due-edit { position: relative; cursor: pointer; display: inline-flex; }
.due-edit input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.due-edit input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.due-edit .duepill { padding: 5px 10px; font-size: 12.5px; }
select.plain { border: 0; background: var(--panel-2); border-radius: 8px; padding: 6px 10px; font-weight: 560; cursor: pointer; }
.drawer .desc { background: var(--panel-2); border-radius: 12px; padding: 14px 16px; line-height: 1.55; white-space: pre-wrap; }
.dsec { margin-top: 18px; } .dsec h3 { margin-bottom: 10px; }
.atts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.comment .cbody { min-width: 0; flex: 1; }
.comment .who2 { display: flex; align-items: center; gap: 8px; } .comment .who2 > span:not(.cacts) { color: var(--faint); font-size: 12px; }
.cacts { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.comment:hover .cacts, .cacts:focus-within { opacity: 1; }
@media (hover: none) { .cacts { opacity: 1; } }
.cacts button { border: 0; background: none; color: var(--muted); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.cacts button:hover { background: var(--panel-2); color: var(--accent); }
.cbox textarea { min-height: 44px; resize: vertical; }
.cbox .row { margin-top: 8px; }
details.more { border-top: 1px solid var(--line); padding-top: 10px; }
details.more > summary { cursor: pointer; color: var(--muted); font-weight: 600; list-style: none; padding: 6px 0; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .2s; }
details.more[open] > summary::before { transform: rotate(90deg); }
details.more .facts { margin: 8px 0 14px; }

/* quotes in chat (forwarded comments) */
.quote { border-left: 3px solid var(--accent); background: var(--panel-2); padding: 6px 10px; border-radius: 0 8px 8px 0; color: var(--muted); margin: 2px 0 4px; white-space: pre-wrap; }
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow: auto; }
.who.pick { border: 0; background: none; text-align: left; padding: 7px 8px; border-radius: 10px; cursor: pointer; width: 100%; font: inherit; color: inherit; }
.who.pick:hover { background: var(--panel-2); }
.hidden { display: none !important; }

/* ---------- media: thumbnails in the drawer, full-screen viewer */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.media { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 0; padding: 0; cursor: zoom-in; background: var(--panel-2); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .25s, transform .3s var(--ease-out); }
.media img.ok { opacity: 1; } .media:hover img { transform: scale(1.04); }
.media .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; background: linear-gradient(transparent, rgba(0,0,0,.35)); }
.media .mname { position: absolute; left: 8px; right: 8px; bottom: 6px; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.media.doc { display: grid; place-items: center; cursor: pointer; color: var(--muted); font-weight: 700; }
.files { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.files a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.files a:hover { background: var(--panel-2); }
.files .fn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 560; }
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(8, 9, 12, .94); display: flex; flex-direction: column; animation: fade .18s ease both; }
.viewer.closing { animation: fade .15s ease reverse both; }
.vw-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #fff; }
.vw-name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vw-n { color: #aaa; font-size: 13px; }
.vw-btn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; text-decoration: none; font-size: 16px; }
.vw-btn:hover { background: rgba(255,255,255,.18); }
.vw-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 64px 24px; }
.vw-stage img, .vw-stage video { max-width: 100%; max-height: 100%; border-radius: 8px; animation: rise .25s var(--ease-out) both; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.vw-stage iframe { width: min(1000px, 100%); height: 100%; border: 0; border-radius: 8px; background: #fff; }
.vw-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font-size: 30px; cursor: pointer; }
.vw-nav:hover { background: rgba(255,255,255,.18); } .vw-nav.prev { left: 12px; } .vw-nav.next { right: 12px; }
.vw-load { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vw-err { color: #ddd; } .vw-err a { color: #b9a6ff; }
@media (max-width: 700px) { .vw-stage { padding: 0 8px 16px; } .vw-nav { width: 36px; height: 52px; } }
.media.cimg { display: block; width: min(260px, 100%); margin: 6px 0; }

/* ---------- client logos: horizontal, fixed height, readable in light and dark */
.clogo { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.clogo img { height: 14px; width: auto; max-width: 72px; object-fit: contain; display: block; }
.clogo.md img { height: 18px; max-width: 110px; } .clogo.lg img { height: 24px; max-width: 160px; } .clogo.xl img { height: 36px; max-width: 220px; }
/* single-colour logos flip with the theme; pale / deep colour logos get a small backing so they never vanish */
:root:not([data-theme="dark"]) .clogo.tone-light img { filter: invert(1); }
[data-theme="dark"] .clogo.tone-dark img { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clogo.tone-dark img { filter: invert(1); } :root:not([data-theme]) .clogo.tone-light img { filter: none; } }
.clogo.tone-pale { background: #1d1d1f; padding: 2px 5px; border-radius: 5px; }
[data-theme="dark"] .clogo.tone-pale { background: none; padding: 0; }
.clogo.tone-deep { padding: 0; }
[data-theme="dark"] .clogo.tone-deep { background: #f2f2f4; padding: 2px 5px; border-radius: 5px; }
.logo-cell { display: flex; align-items: center; gap: 8px; }
.logo-drop { width: 150px; height: 44px; border: 1.5px dashed var(--line-2); border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--faint); font-size: 12px; font-weight: 600; position: relative; overflow: hidden; }
.logo-drop:hover, .logo-drop.over { border-color: var(--accent); color: var(--accent); }
.logo-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .clogo.tone-pale { background: none; padding: 0; }
  :root:not([data-theme]) .clogo.tone-deep { background: #f2f2f4; padding: 2px 5px; border-radius: 5px; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fchip .clogo { margin: -2px 0; }

/* ---------- For you: approvals · reviews · unread */
.foryou { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; margin-bottom: 18px; overflow: hidden; }
.fy-col { padding: 12px 8px 10px; border-right: 1px solid var(--line); min-width: 0; }
.fy-col:last-child { border-right: 0; }
.fy-h { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; font-weight: 650; font-size: 13px; color: var(--muted); }
.fy-h span { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; font-weight: 700; }
.fy-more { margin-left: auto; font-size: 12px; font-weight: 600; }
.fy-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; min-height: 44px; transition: background .15s; }
.fy-row.click { cursor: pointer; } .fy-row.click:hover { background: var(--panel-2); }
.fy-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fy-t b { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fy-t span { color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fy-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--panel-2); display: grid; place-items: center; font-weight: 700; color: var(--accent); flex: none; }
.fy-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel); cursor: pointer; display: grid; place-items: center; color: var(--muted); flex: none; transition: all .15s; }
.fy-btn.yes:hover { background: var(--good); border-color: var(--good); color: #fff; } .fy-btn.no:hover { background: var(--bad); border-color: var(--bad); color: #fff; }
.fy-row.leaving { opacity: .4; pointer-events: none; }
@media (max-width: 700px) { .fy-col { border-right: 0; border-bottom: 1px solid var(--line); } .fy-col:last-child { border-bottom: 0; } }
.tl-col.empty .tl-h { writing-mode: vertical-rl; transform: rotate(180deg); justify-content: flex-end; height: 120px; padding: 10px 4px; opacity: .55; }
.tl-col.empty .tl-h span:last-child { display: none; }
.grow { flex: 1; }
.media .mname { opacity: 0; transition: opacity .15s; } .media:hover .mname { opacity: 1; }
.clogo img { height: 16px; max-width: 84px; }

/* cards never get squashed inside scrolling columns */
.col-b > *, .tasks > *, .tl-col .col-b > * { flex-shrink: 0; }

/* collapsible groups */
details.group > summary { list-style: none; cursor: pointer; user-select: none; }
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary .chev { color: var(--faint); transition: transform .2s var(--ease); flex: none; }
details.group[open] > summary .chev { transform: rotate(90deg); }
details.group:not([open]) > summary { border-bottom: 0; }
.gcount { color: var(--faint); font-size: 12.5px; font-weight: 600; }
details.group.plain > summary.group-h { background: none; position: static; padding: 14px 18px; border-bottom: 1px solid var(--line); }
details.group.plain > summary h2 { margin: 0; font-size: 16px; } details.group.plain > summary h2.bad { color: var(--bad); }
details.group { interpolate-size: allow-keywords; }
details.group::details-content { height: 0; overflow: clip; transition: height .28s var(--ease-out), content-visibility .28s allow-discrete; }
details.group[open]::details-content { height: auto; }
button.more-link { border: 0; background: none; width: 100%; text-align: left; padding: 10px 18px; color: var(--accent); font-weight: 600; cursor: pointer; font-size: 13px; }
button.more-link:hover { background: var(--panel-2); }

/* inbox rows: avatar · text · time, nothing overlapping */
.irow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 18px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; transition: background .15s; }
.irow:last-child { border-bottom: 0; } .irow:hover { background: var(--panel-2); }
.irow:not(.read)::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
.irow.read { opacity: .65; }
.irow-ic { padding-top: 1px; } .irow-ic .av { width: 30px; height: 30px; font-size: 12px; }
.irow-m { min-width: 0; } .irow .tt { font-weight: 600; } .irow .bd { color: var(--muted); font-size: 13px; white-space: pre-wrap; max-height: 2.9em; overflow: hidden; overflow-wrap: anywhere; margin-top: 2px; }
.irow-t { color: var(--faint); font-size: 12px; white-space: nowrap; padding-top: 2px; }

/* notification settings */
.nset { display: flex; flex-direction: column; }
.nrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.nrow > div:first-child { display: flex; flex-direction: column; } .nrow b { font-weight: 600; } .nrow span { color: var(--faint); font-size: 12.5px; }
.nrow.sub { padding-top: 0; border-bottom: 1px solid var(--line); }
.tchips { display: flex; gap: 6px; flex-wrap: wrap; }
.nnote { color: var(--faint); font-size: 12.5px; padding-top: 10px; }
.seg.wide button { white-space: nowrap; }
.modal .box:has(.nset) { width: min(600px, calc(100vw - 32px)); }
.np-h .seg { margin-left: auto; margin-right: 4px; }
.ficon { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; flex: none; vertical-align: -5px; margin-right: 6px; }
.ficon svg { display: block; }
a .ficon { margin-right: 5px; }

/* notices: coloured icon tile + who did it, card name headline, small coloured tag */
.nic { position: relative; width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center; flex: none;
  color: var(--nc); background: color-mix(in srgb, var(--nc) 14%, transparent); }
.nic-av { position: absolute; right: -5px; bottom: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel); line-height: 0; }
.av.xs { width: 17px; height: 17px; font-size: 8px; }
.av.xs .pres { display: none; }
.ntag { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  color: var(--nc); background: color-mix(in srgb, var(--nc) 13%, transparent); vertical-align: 1px; white-space: nowrap; flex: none; }
.irow .tt, .np-tt, .fy-t b { display: flex; align-items: center; min-width: 0; }
.ttx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irow-ic { padding-top: 0; } .irow { grid-template-columns: 36px minmax(0, 1fr) auto; }
.irow .bd, .np-b, .fy-t > span { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-height: none !important; display: block; }
.irow .bd .ficon, .np-b .ficon, .fy-t .ficon { width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; }
.irow .bd .ficon svg, .np-b .ficon svg, .fy-t .ficon svg { width: 15px; height: 15px; }
.np-i { align-items: flex-start; gap: 12px; }
.fy-row .nic { width: 30px; height: 30px; border-radius: 9px; }

/* ---------- WhatsApp + Browser tabs (Windows app) */
.main:has(.pane-host) { padding: 0 !important; max-width: none !important; }
.pane-host { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.pane-area { flex: 1; min-height: 0; background: var(--panel); }
.pane-host.wa .pane-area { margin: 0; }
.btabs { display: flex; align-items: flex-end; gap: 2px; padding: 8px 12px 0; overflow-x: auto; flex: none; }
.btab { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border-radius: 10px 10px 0 0; min-width: 120px; max-width: 220px;
  cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 560; transition: background .15s; }
.btab:hover { background: var(--panel-2); } .btab.on { background: var(--panel); color: var(--text); box-shadow: 0 -1px 0 var(--line) inset; }
.btab img { width: 16px; height: 16px; flex: none; } .btab span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btab-x { border: 0; background: none; color: var(--faint); width: 20px; height: 20px; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; flex: none; }
.btab-x:hover { background: var(--line); color: var(--text); }
.btab-new { border: 0; background: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 20px; margin: 0 0 3px 4px; }
.btab-new:hover { background: var(--panel-2); }
.bbar { display: flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.bbar .icon-btn { font-size: 20px; } .bbar .icon-btn:disabled { opacity: .35; cursor: default; }
.addr { flex: 1; height: 34px; border-radius: 999px; border: 1px solid transparent; background: var(--panel-2); padding: 0 16px; font-size: 13.5px; outline: none; }
.addr:focus { border-color: var(--accent); background: var(--panel); }
.ntp { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 9vh 24px 40px; background: var(--panel); }
.ntp-q { width: min(620px, 100%); height: 50px; border-radius: 999px; border: 1px solid var(--line-2); padding: 0 24px; font-size: 16px; box-shadow: var(--shadow); outline: none; }
.ntp-q:focus { border-color: var(--accent); }
.ntp-grid { display: grid; grid-template-columns: repeat(auto-fill, 104px); gap: 10px; justify-content: center; width: min(900px, 100%); }
.ntp-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 14px; text-decoration: none; color: var(--text); font-size: 12.5px; font-weight: 560; text-align: center; transition: background .15s, transform .15s; }
.ntp-tile:hover { background: var(--panel-2); transform: translateY(-1px); }
.ntp-tile img { width: 36px; height: 36px; border-radius: 10px; background: var(--panel-2); padding: 6px; }
.ntp-tile span { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntp h3 { align-self: center; } .ntp-note { color: var(--faint); font-size: 12.5px; text-align: center; max-width: 520px; }
body:has(.pane-host) .bell { display: none; }

/* people on a card: + to add, × to remove, picker popover */
.own { position: relative; padding-right: 4px; }
.own-x { border: 0; background: none; color: var(--faint); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; opacity: 0; transition: opacity .15s; }
.own:hover .own-x { opacity: 1; } .own-x:hover { background: var(--bad); color: #fff; }
@media (hover: none) { .own-x { opacity: .7; } }
.own-add { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--line-2); background: none; color: var(--muted); cursor: pointer; font-size: 17px; line-height: 1; display: grid; place-items: center; transition: all .15s; }
.own-add:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
[data-members] { cursor: pointer; border-radius: 999px; transition: box-shadow .15s; } [data-members]:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.nobody[data-members] { font-size: 15px; }
.mem-pop { position: fixed; z-index: 75; padding: 8px; display: flex; flex-direction: column; gap: 6px; animation: rise .18s var(--ease-out) both; box-shadow: var(--shadow); }
.mem-pop input { height: 34px; border-radius: 9px; }
.mem-list { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.mem-i { display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 6px 8px; border-radius: 9px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.mem-i:hover:not([disabled]) { background: var(--panel-2); } .mem-i[disabled] { opacity: .4; cursor: default; }
.mem-i .n { flex: 1; font-weight: 560; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mem-i .r { color: var(--faint); font-size: 12px; }
.mem-ck { width: 18px; color: var(--accent); font-weight: 800; text-align: center; }
.mem-i.on { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.clogo img, .clogo.md img, .clogo.lg img, .clogo.xl img { max-width: none; object-fit: contain; }

/* Projects overview */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.proj { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; text-decoration: none; color: inherit; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.proj:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.proj-top { display: flex; align-items: center; gap: 8px; min-height: 30px; } .proj-top b { font-size: 14px; }
.proj-n { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.proj-bar { display: flex; gap: 2px; height: 6px; border-radius: 99px; overflow: hidden; background: var(--panel-2); }
.proj-bar i { display: block; min-width: 6px; }
.proj-teams { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); font-weight: 560; }
.proj-teams span { display: inline-flex; align-items: center; gap: 5px; } .proj-teams i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.proj-late { color: var(--bad); font-size: 12px; font-weight: 650; }
.sub-h { display: flex; align-items: center; gap: 8px; padding: 10px 18px 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--line); }
.sub-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--faint)); } .sub-h span { color: var(--faint); font-weight: 600; }
[id^="proj-"] { scroll-margin-top: 12px; }

/* Drive / Docs links: real name, quick actions on hover */
.dlink { position: relative; display: inline-flex; align-items: center; vertical-align: middle; max-width: 100%; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--line); padding: 2px 4px 2px 6px; margin: 1px 2px; gap: 2px; }
.dlink .dl-main { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; color: var(--text); font-weight: 560; font-size: 13px; }
.dlink .ficon { width: 16px; height: 16px; margin-right: 6px; } .dlink .ficon svg { width: 16px; height: 16px; }
.dlink .dname { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-acts { display: inline-flex; gap: 1px; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .2s var(--ease), opacity .15s; }
.dlink:hover .dl-acts, .dlink:focus-within .dl-acts { max-width: 60px; opacity: 1; margin-left: 4px; }
@media (hover: none) { .dl-acts { max-width: 90px; opacity: 1; margin-left: 4px; } }
.dl-acts button { border: 0; background: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.dl-acts button:hover { background: var(--panel); color: var(--accent); }
.dlink:hover { border-color: var(--line-2); }

/* @mentions: a picker under the comment box, and names shown as chips */
.mention { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); padding: 0 5px; border-radius: 6px; font-weight: 600; }
.mention-pop { position: absolute; left: 0; bottom: calc(100% + 6px); width: 280px; max-width: 100%; z-index: 20; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 5px; animation: rise .16s var(--ease-out) both; }
.mp-i { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.mp-i.on, .mp-i:hover { background: var(--panel-2); } .mp-i b { font-weight: 600; } .mp-i .mp-d { color: var(--faint); font-size: 12px; margin-left: auto; }

/* first-time setup: connect Trello + Google */
.setup { display: flex; flex-direction: column; gap: 14px; }
.st-step { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.st-step > div { flex: 1; display: flex; flex-direction: column; } .st-step b { font-weight: 650; } .st-step span:not(.st-n) { color: var(--faint); font-size: 13px; }
.st-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); font-weight: 700; color: var(--muted); flex: none; }
.st-n.ok { background: var(--good); color: #fff; animation: tickpop .3s var(--ease) both; }

/* content formats */
.fmt { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--panel-2); white-space: nowrap; }
.fmt svg { flex: none; color: var(--accent); }
.fmt-empty { border: 1px dashed var(--line-2); background: none; color: var(--faint); } .fmt-empty svg { color: var(--faint); }
[data-fmt] { cursor: pointer; } [data-fmt]:hover .fmt, [data-fmt].fmt:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.fmt-pop { position: fixed; z-index: 76; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; animation: rise .18s var(--ease-out) both; box-shadow: var(--shadow); }
.fmt-pop button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 10px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 560; color: var(--text); text-align: left; }
.fmt-pop button svg { color: var(--accent); width: 16px; height: 16px; flex: none; }
.fmt-pop button:hover { background: var(--panel-2); } .fmt-pop button.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.fmt-pop .clear { grid-column: 1 / -1; justify-content: center; color: var(--faint); }
.fy-logo { width: 64px; flex: none; display: flex; align-items: center; justify-content: center; }
/* new task */
.nt { display: flex; flex-direction: column; gap: 12px; }
.nt-title { font-size: 19px; font-weight: 650; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px 0 10px; outline: none; background: none; }
.nt-row { display: grid; grid-template-columns: 70px 1fr; align-items: start; gap: 10px; }
.nt-k { color: var(--faint); font-size: 13px; font-weight: 600; padding-top: 6px; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-chips .fchip { display: inline-flex; align-items: center; gap: 6px; } .nt-chips .fchip svg { color: var(--accent); }
.nt-chips .fchip.on svg { color: inherit; }
.modal .box:has(.nt) { width: min(680px, calc(100vw - 32px)); }
.nt input[type=datetime-local] { width: 220px; }
.nt .seg { display: inline-flex; width: auto; justify-self: start; }

/* ---------- bottom-right notification cards */
.pn-stack { position: fixed; right: 18px; bottom: 18px; z-index: 95; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.pn { pointer-events: auto; position: relative; overflow: hidden; width: min(360px, calc(100vw - 32px)); display: grid; grid-template-columns: 34px 1fr 20px; gap: 12px; align-items: start;
  padding: 13px 12px 14px 14px; border-radius: 16px; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); cursor: pointer;
  animation: pnIn .42s cubic-bezier(.16, 1, .3, 1) both; }
.pn.out { animation: pnOut .26s ease both; }
@keyframes pnIn { from { opacity: 0; transform: translateX(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pnOut { to { opacity: 0; transform: translateX(24px) scale(.97); } }
.pn-ic .nic { width: 34px; height: 34px; }
.pn-t { font-weight: 650; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pn-s { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-s .ficon { width: 14px; height: 14px; } .pn-s .ficon svg { width: 14px; height: 14px; }
.pn-x { border: 0; background: none; color: var(--faint); font-size: 17px; line-height: 1; cursor: pointer; padding: 0; width: 20px; height: 20px; border-radius: 6px; }
.pn-x:hover { background: var(--panel-2); color: var(--text); }
.pn-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); opacity: .5; transform-origin: left; animation: pnBar linear both; }
.pn.hold .pn-bar { animation-play-state: paused; }
@keyframes pnBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.pn:hover { border-color: var(--line-2); }
@media (max-width: 700px) { .pn-stack { right: 8px; left: 8px; bottom: 76px; align-items: stretch; } .pn { width: auto; } }
.pn-s .ntag { margin: 0 5px 0 0; }
/* notices from a person: their photo, with a small coloured badge for the kind */
.nic.nic-person { background: none; }
.nic.nic-person .av { width: 100%; height: 100%; font-size: 13px; }
.nic-badge { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nc); color: #fff; box-shadow: 0 0 0 2px var(--panel); }
.fy-row .nic-badge { width: 16px; height: 16px; }

/* ---------- project page */
.proj-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; flex-wrap: wrap; }
.proj-head .icon-btn { font-size: 24px; text-decoration: none; }
.proj-logo { min-height: 44px; display: flex; align-items: center; } .proj-logo h1 { margin: 0; }
.proj-stats { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(220px, 1.6fr); gap: 12px; margin-bottom: 18px; }
.proj-teambar { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 18px; }
.proj-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.proj-main { display: flex; flex-direction: column; gap: 16px; } .proj-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.plinks { display: flex; flex-direction: column; padding: 6px 10px 10px; }
.plink { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.plink:last-child { border-bottom: 0; } .plink .dlink { margin: 0; } .plink .dlink .dname { max-width: 220px; }
.pl-t { color: var(--faint); font-size: 12px; padding-left: 4px; cursor: pointer; } .pl-t:hover { color: var(--accent); }
.plink.pinned::before { content: "📌"; position: absolute; right: 26px; top: 10px; font-size: 11px; }
.pl-x { position: absolute; right: 2px; top: 8px; border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 15px; opacity: 0; } .plink:hover .pl-x { opacity: 1; }
.sv { padding: 10px 18px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13.5px; } .sv:hover { background: var(--panel-2); } .sv:last-child { border-bottom: 0; }
.open-proj { margin-left: 14px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; opacity: 0; transition: opacity .15s; }
summary:hover .open-proj { opacity: 1; }
@media (max-width: 1100px) { .proj-body { grid-template-columns: 1fr; } .proj-side { position: static; } .proj-stats { grid-template-columns: repeat(2, 1fr); } .proj-teambar { grid-column: 1 / -1; } }
.duepill.donep { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); }
.proj-head { padding-right: 56px; }
.tscope { display: flex; gap: 6px; flex-wrap: wrap; }
.tscope .fchip { display: inline-flex; align-items: center; gap: 6px; }
.tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
.you { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.fchip.on .you { background: rgba(255,255,255,.25); color: inherit; }
body:has(#va-exit) .bell { top: 56px; }

/* ---------- Windows app: MLQ's own title bar (frameless, rounded window) */
html.desk { --tb: 36px; }
#tbar { position: fixed; top: 0; left: 0; right: 0; height: var(--tb, 36px); z-index: 120; display: flex; align-items: stretch; background: var(--bg); }
#tbar .tb-drag { flex: 1; }
.tb-btns { display: flex; align-items: center; gap: 2px; padding: 0 8px; }
.tb-b { width: 40px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: default; transition: background .15s, color .15s; }
.tb-b:hover { background: var(--panel-2); color: var(--text); }
.tb-x:hover { background: #e5484d; color: #fff; }
html.desk body { padding-top: var(--tb); }
html.desk .side { top: var(--tb); height: calc(100vh - var(--tb)); }
html.desk .app, html.desk .login { min-height: calc(100vh - var(--tb)); }
html.desk .bell { top: calc(var(--tb) + 14px); }
html.desk .pane-host { height: calc(100vh - var(--tb)); }
html.desk .chat { height: calc(100vh - 110px - var(--tb)); }
html.desk .col { max-height: calc(100vh - 210px - var(--tb)); }
html.desk .scrim, html.desk .drawer, html.desk .modal, html.desk .viewer, html.desk .pal-wrap { top: var(--tb); }
html.desk:not(.win-max) body { border: 1px solid var(--line); }
html.desk #splash { top: 0; }

/* ---------- personal notes */
.notes { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; height: calc(100vh - 120px); min-height: 460px; background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
html.desk .notes { height: calc(100vh - 120px - var(--tb)); }
.nt-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.nt-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 10px; } .nt-head h1 { margin: 0; font-size: 22px; }
.nt-q { margin: 0 14px 8px; height: 34px; border-radius: 10px; }
.nt-items { overflow-y: auto; flex: 1; padding: 0 8px 12px; }
.nt-sec { font-size: 12px; font-weight: 650; color: var(--faint); padding: 10px 8px 4px; }
.nt-i { padding: 10px 10px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.nt-i:hover { background: var(--panel-2); } .nt-i.on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.nt-it { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-pin { color: var(--accent); font-size: 9px; margin-right: 6px; vertical-align: 2px; }
.nt-is { color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.nt-ed { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.nt-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.nt-bar .icon-btn.on { color: var(--accent); }
.nt-back { display: none; }
.nt-saved { color: var(--faint); font-size: 12px; transition: color .2s; } .nt-saved.busy { color: var(--accent); }
.nt-body { flex: 1; border: 0; outline: none; resize: none; padding: 22px 28px; font-size: 15px; line-height: 1.65; background: transparent; box-shadow: none; border-radius: 0; font-family: inherit; }
.nt-body::first-line { font-size: 21px; font-weight: 700; }
.nt-links { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 28px 16px; } .nt-links:empty { display: none; }
@media (max-width: 900px) {
  .notes { grid-template-columns: 1fr; height: calc(100vh - 160px); }
  .notes.has-note .nt-list { display: none; } .notes:not(.has-note) .nt-ed { display: none; }
  .nt-back { display: grid; }
}

/* ---------- chat, refreshed: sectioned list, bubbles, inline actions, rounded composer, profile panel */
.chat { grid-template-columns: 270px minmax(0, 1fr); height: calc(100vh - 72px); padding: 0; overflow: hidden; }
.chat.with-prof { grid-template-columns: 270px minmax(0, 1fr) 290px; }
html.desk .chat { height: calc(100vh - 72px - var(--tb)); }
.chat .convs { background: var(--panel-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.cv-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 8px 18px; } .cv-head h2 { margin: 0; font-size: 18px; }
.cv-search { display: flex; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 0 10px; height: 34px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--faint); }
.cv-search input { border: 0; background: none; outline: none; box-shadow: none; padding: 0; height: 100%; flex: 1; font-size: 13px; }
.cv-list { overflow-y: auto; flex: 1; padding: 0 8px 12px; }
.cv-sec { font-size: 12px; font-weight: 650; color: var(--faint); padding: 12px 10px 4px; }
.conv { border: 0; border-radius: 10px; padding: 7px 10px; gap: 10px; margin: 1px 0; }
.conv .av { width: 30px; height: 30px; }
.conv:hover { background: var(--panel); } .conv.on { background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.conv .cv-m { min-width: 0; flex: 1; } .conv .n { font-weight: 560; font-size: 13.5px; } .conv.unread .n { font-weight: 750; }
.conv .p { font-size: 12px; color: var(--faint); }
.conv .u { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: #e5484d; flex: none; }
.thread .th { padding: 10px 16px; gap: 10px; min-height: 58px; }
.th-hash { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-2); font-weight: 800; color: var(--muted); }
.th-n { font-weight: 700; font-size: 15px; } .th-s { font-size: 12px; color: var(--faint); } .th-s.online { color: var(--good); }
.th-avs { display: flex; } .th-avs .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); } .th-more { font-size: 12px; color: var(--faint); margin-left: 6px; align-self: center; }
.icon-btn.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.msgs { padding: 14px 22px; gap: 0; }
.msg { position: relative; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 6px 8px; border-radius: 10px; margin: 0 -8px; }
.msg:hover { background: var(--panel-2); }
.msg.cont { padding-top: 1px; } .msg .av { width: 36px; height: 36px; }
.m-time { font-size: 10.5px; color: var(--faint); opacity: 0; text-align: right; padding-top: 8px; white-space: nowrap; } .msg.cont:hover .m-time { opacity: 1; }
.msg .meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; } .msg .meta b { font-size: 13.5px; margin: 0; } .msg .meta span { font-size: 11.5px; color: var(--faint); }
.msg .bubble { display: inline-block; max-width: min(640px, 100%); background: var(--panel-2); border-radius: 4px 14px 14px 14px; padding: 8px 12px; white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.5; }
.msg:hover .bubble { background: var(--panel); }
.msg.mine .bubble { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.msg.cont .bubble { border-radius: 14px; }
.msg .quote { border-left: 3px solid var(--line-2); background: none; padding: 0 0 0 10px; color: var(--muted); font-style: italic; margin: 2px 0 6px; border-radius: 0; }
.m-acts { position: absolute; right: 10px; top: -12px; display: none; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 2px; box-shadow: var(--shadow); }
.msg:hover .m-acts { display: flex; }
.m-acts button { border: 0; background: none; width: 28px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); cursor: pointer; } .m-acts button:hover { background: var(--panel-2); color: var(--accent); }
.day-sep { position: relative; text-align: center; margin: 16px 0 8px; } .day-sep::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.day-sep span { position: relative; background: var(--panel); padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; }
.composer { border-top: 0; padding: 6px 18px 16px; }
.cp-box { position: relative; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); padding: 4px 48px 8px 12px; transition: border-color .15s, box-shadow .15s; }
.cp-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.cp-tools { display: flex; gap: 2px; padding: 2px 0 2px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.cp-b { border: 0; background: none; width: 30px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); cursor: pointer; } .cp-b:hover { background: var(--panel-2); color: var(--text); }
.cp-box textarea { width: 100%; border: 0; outline: none; box-shadow: none; resize: none; background: none; padding: 6px 0; min-height: 24px; max-height: 180px; font-size: 14px; line-height: 1.5; }
.cp-send { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--text); color: var(--bg); display: grid; place-items: center; cursor: pointer; transition: transform .12s; }
.cp-send:hover { transform: scale(1.06); } .cp-send:active { transform: scale(.94); }
.cp-box .mention-pop { bottom: calc(100% + 8px); }
.prof { border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 10px 18px 18px; overflow-y: auto; animation: slidein .25s var(--ease-out) both; }
.pf-top { align-self: stretch; display: flex; justify-content: flex-end; }
.pf-av .av.xl, .av.xl { width: 104px; height: 104px; font-size: 34px; } .pf-av { margin: 6px 0 12px; } .pf-av .pres { width: 16px; height: 16px; right: 4px; bottom: 4px; border-width: 3px; }
.pf-n { font-size: 19px; font-weight: 750; text-align: center; } .pf-t { color: var(--faint); font-size: 13px; text-align: center; margin-top: 2px; }
.pf-st { margin-top: 10px; font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.pf-st.online { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.pf-lines { align-self: stretch; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 11px; }
.pf-l { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); } .pf-l svg { color: var(--faint); flex: none; } .pf-l a { color: inherit; } .pf-l span { min-width: 0; overflow-wrap: anywhere; }
.pf-acts { align-self: stretch; display: flex; gap: 8px; margin-top: auto; padding-top: 18px; } .pf-acts > * { flex: 1; justify-content: center; text-align: center; }
@media (max-width: 1100px) { .chat.with-prof { grid-template-columns: 240px minmax(0, 1fr); } .chat .prof { display: none; } }

/* who's online (sidebar, every screen) */
.onl { margin: 8px 6px 0; padding: 10px 10px 8px; border-radius: 12px; background: var(--panel); }
.ol-h { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; color: var(--muted); margin-bottom: 8px; }
.ol-n { margin-left: auto; color: var(--faint); font-weight: 600; }
.ol-avs { display: flex; flex-wrap: wrap; gap: 6px; }
.ol-p { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; transition: transform .15s var(--ease); }
.ol-p:hover { transform: translateY(-2px) scale(1.08); }
.ol-p .av { width: 28px; height: 28px; font-size: 11px; }
.ol-none, .ol-more { font-size: 12px; color: var(--faint); align-self: center; }
@media (max-width: 900px) { .onl { display: none; } }

/* profile required fields */
.req{color:var(--red,#e5484d);font-style:normal;margin-left:2px}
.f.bad input{border-color:var(--red,#e5484d);box-shadow:0 0 0 3px color-mix(in srgb,var(--red,#e5484d) 18%,transparent)}
.pf-err{color:var(--red,#e5484d);font-size:12px}
.av.team-av{background:none;overflow:hidden;border-radius:28%}.av.team-av img{width:100%;height:100%;object-fit:cover}

/* quick status picker */
.st-pop{position:fixed;z-index:80;min-width:180px;padding:6px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow),0 12px 40px rgba(0,0,0,.14);display:flex;flex-direction:column;gap:2px;animation:stIn .16s cubic-bezier(.2,.8,.2,1)}
.st-pop.out{opacity:0;transform:translateY(4px);transition:.14s}
@keyframes stIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.st-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;background:none;border:0;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.st-opt:hover{background:var(--panel-2)}.st-opt.on{background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:600}
.st-for{display:flex;flex-wrap:wrap;gap:4px;padding:8px 6px 4px;margin-top:4px;border-top:1px solid var(--line)}
.st-for button{border:1px solid var(--line);background:none;color:var(--muted);font:inherit;font-size:11.5px;padding:4px 9px;border-radius:999px;cursor:pointer}
.st-for button.on{background:var(--text);color:var(--panel);border-color:var(--text)}
#me-status{cursor:pointer;border-radius:6px}#me-status:hover{text-decoration:underline}

/* updating screen + Settings → Updates */
#upd{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);animation:updIn .3s ease}
#upd.out{opacity:0;transition:opacity .3s}
@keyframes updIn{from{opacity:0}to{opacity:1}}
.upd-box{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(340px,80vw);text-align:center}
.upd-logo svg{height:30px;width:auto;color:var(--text)}
.upd-box b{font-size:16px}
.upd-bar{width:100%;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.upd-bar i{display:block;height:100%;width:4%;border-radius:inherit;background:linear-gradient(90deg,#7b5cff,#4b2bff);transition:width .4s cubic-bezier(.2,.8,.2,1)}
#upd.bad .upd-bar i{background:var(--bad)}
.upd-box span{font-size:12.5px;color:var(--muted)}
.upd-panel{display:flex;flex-direction:column;gap:14px;max-width:520px}
.upd-live{font-size:13px;color:var(--muted)}.upd-live b{color:var(--text)}
.upd-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px;border:1.5px dashed var(--line-2);border-radius:14px;cursor:pointer;transition:.15s}
.upd-drop:hover,.upd-drop.over{border-color:var(--accent);background:var(--accent-soft)}
.upd-panel #push{align-self:flex-start}
.upd-hist{display:flex;flex-direction:column;gap:6px;font-size:12.5px;border-top:1px solid var(--line);padding-top:12px}
.upd-hist div{display:flex;justify-content:space-between}
.upd-inst{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:12px}.upd-inst .ui-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}

/* compact numbers strip on Home */
.kstrip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ks{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:inherit;font-size:12.5px;font-weight:550;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s}
.ks b{font-size:15px;font-weight:750;color:var(--text)}
.ks.bad b{color:var(--bad)}.ks.warn b{color:var(--warn)}.ks.good b{color:var(--good)}
.ks.zero{opacity:.6}
.ks:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
/* needs attention */
.fy-t span.fy-bad{color:var(--bad)}.fy-t span.fy-warn{color:var(--warn)}
.fy-tog{border:0;background:none;color:var(--accent);cursor:pointer;font:inherit;font-size:12px;font-weight:600;padding:0}
.fy-list.all{max-height:360px;overflow:auto}
.logo-size{display:inline-flex;gap:2px}

/* due date picker */
.due-btn{border:0;cursor:pointer;font:inherit}
.dp{position:fixed;z-index:200;width:292px;padding:12px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow),0 16px 48px rgba(0,0,0,.16);display:flex;flex-direction:column;gap:12px;animation:stIn .16s cubic-bezier(.2,.8,.2,1)}
.dp.out{opacity:0;transform:translateY(4px);transition:.14s}
.dp button{font:inherit;cursor:pointer}
.dp-quick{display:flex;flex-wrap:wrap;gap:6px}
.dp-quick button,.dp-t button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:550;transition:.15s}
.dp-quick button:hover,.dp-t button:hover{border-color:var(--accent);color:var(--accent)}
.dp-quick button.on,.dp-t button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.dp-m{display:flex;align-items:center;justify-content:space-between;padding:0 2px 6px}
.dp-m b{font-size:13.5px}
.dp-m button{width:28px;height:28px;border-radius:8px;border:0;background:none;color:var(--muted);font-size:18px;line-height:1}
.dp-m button:hover{background:var(--panel-2);color:var(--text)}
.dp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.dp-g i{font-style:normal;font-size:11px;color:var(--faint);font-weight:600;padding:2px 0 4px}
.dp-d{height:34px;border:0;border-radius:10px;background:none;color:var(--text);font-size:13px;transition:background .12s}
.dp-d:hover{background:var(--panel-2)}
.dp-d.past{color:var(--faint)}
.dp-d.today{color:var(--accent);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--accent-soft)}
.dp-d.on{background:var(--accent);color:#fff;font-weight:700}
.dp-t{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-top:1px solid var(--line);padding-top:12px}
.dp-t input{border:1px solid var(--line);border-radius:999px;padding:4px 8px;font:inherit;font-size:12.5px;background:var(--panel);color:var(--text);width:116px}
.dp-f{display:flex;align-items:center;gap:8px}
.dp-sum{flex:1;font-size:12.5px;color:var(--muted);font-weight:550}
.dp-clear{border:0;background:none;color:var(--bad);font-size:12.5px;font-weight:600;padding:0}
#nt-d.set{background:var(--accent-soft);color:var(--accent-text)}

/* chat attachments: pending previews + images in messages */
.pend.has{padding:10px 12px 0}
.pend-row{display:flex;gap:8px;flex-wrap:wrap}
.pf{position:relative;width:76px;height:76px;border-radius:12px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;animation:stIn .2s cubic-bezier(.2,.8,.2,1)}
.pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf:not(.done) img{filter:brightness(.75)}
.pf-ic svg{width:26px;height:26px}
.pf-n{font-size:10.5px;color:var(--muted);max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-bar{position:absolute;left:8px;right:8px;bottom:8px;height:4px;border-radius:9px;background:rgba(255,255,255,.45);overflow:hidden}
.pf-bar i{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .25s}
.pf-ok{position:absolute;right:6px;bottom:6px;width:20px;height:20px;border-radius:50%;background:var(--good);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;animation:stIn .25s}
.pf-x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:10px;cursor:pointer;opacity:0;transition:opacity .15s}
.pf:hover .pf-x{opacity:1}
.pend-hint{font-size:12px;color:var(--muted);padding:6px 2px 0;font-weight:550}
#send.ready{animation:sendPulse 1.6s ease-in-out infinite}
@keyframes sendPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
.att-img{display:inline-block;max-width:min(360px,100%);border-radius:12px;overflow:hidden;border:1px solid var(--line);line-height:0}
.att-img img{display:block;max-width:100%;max-height:340px;height:auto;object-fit:cover;background:var(--panel-2)}
.att-img.broken img{display:none}
.att-img.broken::after{content:attr(title);display:block;padding:10px 14px;line-height:1.3;font-size:13px;color:var(--accent)}
.att-img.wait{line-height:1.3}
.att-wait{display:flex;flex-direction:column;gap:2px;padding:12px 14px;min-width:200px}
.att-wait b{font-weight:560;font-size:13px;color:var(--text)}
.att-wait i{font-style:normal;font-size:11.5px;color:var(--accent)}

/* message edit / delete */
.m-edited{margin-left:6px;font-size:11px;color:var(--faint);font-weight:500;white-space:nowrap}
.m-edit{width:min(560px,100%)}
.m-edit textarea{width:100%;resize:none;border:1.5px solid var(--accent);border-radius:12px;padding:8px 12px;font:inherit;background:var(--panel);color:var(--text);outline:0;box-shadow:0 0 0 3px var(--accent-soft)}
.m-edit-h{font-size:11px;color:var(--faint);padding:4px 2px 0}
.m-acts .m-del:hover{color:var(--bad)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}

/* new messages glide in; "is typing" */
.msg.m-in{animation:msgIn .32s cubic-bezier(.2,.9,.25,1) both}
.msg.mine.m-in{animation-name:msgInMine}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes msgInMine{from{opacity:0;transform:translateY(12px) scale(.97);transform-origin:bottom left}to{opacity:1;transform:none}}
.msg.m-tmp .bubble{opacity:.7}
.msg.m-tmp .m-acts{display:none}
.typing{height:0;overflow:hidden;display:flex;align-items:center;gap:8px;padding:0 22px;font-size:12px;color:var(--muted);font-weight:550;opacity:0;transition:height .2s ease,opacity .2s ease}
.typing.on{height:24px;opacity:1}
.tdots{display:inline-flex;gap:3px;align-items:center;padding:5px 7px;border-radius:999px;background:var(--panel-2)}
.tdots i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:tdot 1.2s infinite ease-in-out}
.tdots i:nth-child(2){animation-delay:.15s}.tdots i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
tr.grp-start td{border-top:2px solid var(--line-2)}

/* chat videos: poster + play, opens in the viewer */
.att-vid{position:relative;display:block;width:min(360px,100%);border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#111;line-height:0;cursor:pointer}
.att-vid img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover}
.att-vid-blank{display:block;aspect-ratio:16/9;background:linear-gradient(135deg,#1b1b22,#0d0d10)}
.att-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s}
.att-vid:hover .att-play{transform:scale(1.08);background:var(--accent)}
.att-vid-n{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 8px;line-height:1.3;font-size:12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw-frame{width:min(1100px,92vw);height:min(640px,78vh);border:0;border-radius:12px;background:#000}
.att-img{cursor:zoom-in}
/* the chat fills the window exactly, so the page itself never scrolls */
.main:has(> .card.chat){padding-bottom:20px}
.card.chat{height:calc(100vh - var(--tb, 0px) - 72px)}
.viewer .vw-stage iframe.vw-frame{width:min(1100px,92vw,calc(78vh * 16 / 9));height:auto;aspect-ratio:16/9;max-height:80vh;border:0;border-radius:12px;background:#000}
html:has(.card.chat), html:has(.card.chat) body{overflow:hidden}

/* viewer: pictures always fit the screen; zoom with the wheel */
.vw-stage{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.vw-stage img.vw-img{max-width:100%;max-height:calc(100vh - var(--tb, 0px) - 84px);object-fit:contain;user-select:none;transform-origin:center center;will-change:transform}
.vw-zoom{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);border:0;border-radius:999px;padding:5px 12px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.vw-zoom.on{opacity:1;pointer-events:auto}

/* Final assets (locked) and 30-day clean-up */
.att-wrap{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:100%}
.att-wrap.final > .att-img,.att-wrap.final > .att-vid,.att-wrap.final > .att{box-shadow:0 0 0 2.5px #e8b21a,0 6px 22px rgba(232,178,26,.25);border-color:transparent}
.att-final{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#e8b21a;color:#1a1300;font-size:11px;font-weight:750;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:auto;z-index:2}
.att-mark{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);color:#fff;font:inherit;font-size:11.5px;font-weight:650;cursor:pointer;opacity:0;transform:translateY(-2px);transition:opacity .15s,transform .15s,background .15s;z-index:2}
.att-wrap:hover .att-mark{opacity:1;transform:none}
.att-mark:hover{background:#e8b21a;color:#1a1300}
.att-left{font-size:11px;color:var(--warn);font-weight:600;padding-left:2px}
.att-gone{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px dashed var(--line-2);border-radius:12px;color:var(--muted);max-width:360px}
.att-gone span{display:flex;flex-direction:column;min-width:0}.att-gone b{font-weight:560;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.att-gone i{font-style:normal;font-size:11.5px;color:var(--faint)}
.finals-pill{border:0;border-radius:999px;padding:5px 11px;background:#e8b21a;color:#1a1300;font:inherit;font-size:12px;font-weight:700;cursor:pointer;margin-right:4px}
.finals-pill:hover{filter:brightness(1.05)}
.atts{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.att-wrap > .att-vid{width:360px;max-width:100%}
.att-wrap{max-width:min(360px,100%)}
.att-mark,.att-final{white-space:nowrap}

/* replies: a quote of the original above the message (click to jump), and a "Replying to" bar above the box */
.m-reply{display:flex;align-items:center;gap:8px;max-width:min(460px,100%);margin:2px 0 4px;padding:5px 10px 5px 0;border:0;border-radius:10px;background:var(--panel-2);color:var(--muted);font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.m-reply:hover{background:color-mix(in srgb,var(--accent) 10%,var(--panel-2))}
.m-reply-bar{align-self:stretch;width:3px;border-radius:3px;background:var(--accent);flex:none}
.m-reply img{width:30px;height:30px;border-radius:6px;object-fit:cover;flex:none}
.m-reply-t{display:flex;flex-direction:column;min-width:0;font-size:12px;line-height:1.35}
.m-reply-t b{color:var(--text);font-weight:650}
.m-reply-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg.flash{animation:msgFlash 1.6s ease}
@keyframes msgFlash{0%,25%{background:color-mix(in srgb,var(--accent) 18%,transparent)}100%{background:transparent}}
.rp-bar{display:flex;align-items:center;gap:10px;margin:0 18px 6px;padding:8px 12px;border-radius:12px;background:var(--panel-2);border-left:3px solid var(--accent);color:var(--muted);font-size:12.5px;animation:stIn .18s cubic-bezier(.2,.8,.2,1)}
.rp-t{flex:1;min-width:0;display:flex;gap:6px;align-items:baseline;white-space:nowrap;overflow:hidden}
.rp-t b{color:var(--text)}.rp-t span{overflow:hidden;text-overflow:ellipsis;color:var(--faint)}
.rp-bar button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px;border-radius:6px}
.rp-bar button:hover{background:var(--line);color:var(--text)}

/* chat: layout always keeps the composer on screen */
.card.chat{grid-template-rows:minmax(0,1fr)}
.thread{min-height:0;overflow:hidden}
.msgs{min-height:0}
.composer,.typing,.rp-bar{flex:none}
@media (max-width:900px){
  .card.chat{grid-template-columns:minmax(0,1fr)}
  .card.chat{height:calc(100vh - var(--tb, 0px) - 140px)}
}
/* tasks linked in a message: the message stays the hero, the task is a neat card under it */
.tagchip.small{font-size:11.5px;padding:1px 6px;font-weight:650}
.tcards{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px;max-width:min(460px,100%)}
.tcard{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.tcard:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.tc-logo{flex:none;display:flex;align-items:center;justify-content:center;min-width:44px}
.tc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tc-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px}
.tc-tag{color:var(--faint);font-weight:600}
.tcard .pill,.tcard .duepill{font-size:11px}
html.desk #upd{top:var(--tb)}

/* no truncation: names and titles wrap onto the next line; long previews show two full lines */
.task .t, .tc-title, .fy-t b, .dlink .dname, .nt-it, .files .fn, .att-gone b, .vw-name, .conv .n, .mem-i .n, .pal-main, .tc-name {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere;
  -webkit-line-clamp: unset !important; display: block;
}
.dlink .dname { max-width: none !important; }
.dlink { max-width: 100%; align-items: flex-start; }
.dlink .dl-main { align-items: flex-start; }
.conv .p, .irow .bd, .np-b, .fy-t > span, .pn-s, .nt-is, .m-reply-t span, .att-vid-n, .ttx {
  white-space: normal !important; text-overflow: clip !important; overflow: hidden;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.rp-t { white-space: normal; flex-wrap: wrap; }
.rp-t span { overflow: visible; text-overflow: clip; }
.att-vid-n { padding-top: 22px; }
.fy-chev{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--muted)}
.fy-chev:hover{background:var(--panel-2);color:var(--accent)}
.fy-list.all{max-height:none}

/* who's who: designation · team, phone */
.th-n{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.th-role{font-size:12px;font-weight:550;color:var(--muted)}
.th-s{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.th-phone{border:0;background:none;padding:0;font:inherit;font-size:12px;color:var(--muted);cursor:pointer}
.th-phone::before{content:"·";margin-right:8px;color:var(--faint)}
.th-phone:hover{color:var(--accent)}
.ol-list{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.ol-row{display:flex;align-items:center;gap:9px;padding:5px 6px;border:0;border-radius:9px;background:none;font:inherit;text-align:left;cursor:pointer;width:100%}
.ol-row:hover{background:var(--panel-2)}
.ol-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ol-t b{font-size:12.5px;font-weight:600;color:var(--text)}
.ol-t span{font-size:11px;color:var(--faint);overflow-wrap:anywhere}
.ol-none,.ol-more{font-size:12px;color:var(--faint);padding:4px 6px}
.me-txt .me-role{font-size:11px;color:var(--faint);line-height:1.25;overflow-wrap:anywhere}
.fy-fmt{font-style:normal;display:flex;margin:2px 0 1px}.fy-fmt .fmt{font-size:11px}
.duepill.done{background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--good)}

/* add a Final file to a card: one search box, a short list, done */
.cpk{position:fixed;z-index:210;width:340px;max-width:calc(100vw - 24px);padding:10px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow),0 16px 48px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:8px;animation:stIn .16s cubic-bezier(.2,.8,.2,1)}
.cpk.out{opacity:0;transform:translateY(4px);transition:.14s}
.cpk-h{font-size:12px;font-weight:700;color:var(--muted);padding:2px 4px}
.cpk-q{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;background:var(--panel);color:var(--text);outline:0}
.cpk-q:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cpk-list{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow:auto}
.cpk-i{display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:10px;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--text)}
.cpk-i.on,.cpk-i:hover{background:var(--panel-2)}
.cpk-logo{flex:none;min-width:44px;display:flex;justify-content:center}
.cpk-t{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cpk-t b{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.cpk-t span{font-size:11px;color:var(--faint)}
.cpk-new{border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:2px}
.cpk-plus{flex:none;min-width:44px;text-align:center;font-size:18px;color:var(--accent);font-weight:700}
.att-addcard{border:1px dashed var(--line-2);background:none;border-radius:999px;padding:4px 10px;font:inherit;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer}
.att-addcard:hover{border-color:var(--accent);color:var(--accent)}
.att-card{display:inline-flex;align-items:center;gap:8px;max-width:100%;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:4px 10px 4px 6px;font:inherit;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;text-align:left}
.att-card:hover{border-color:var(--accent)}
.att-card span{overflow-wrap:anywhere}
.cpk-none{font-size:12px;color:var(--faint);padding:8px}.cpk-list{max-height:260px}
.clogo img{border-radius:4px}
.switch-row{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}.switch-row input{width:18px;height:18px;accent-color:var(--accent)}
#msg a{color:var(--accent);font-weight:600;margin-left:4px}

/* profile pictures a size up everywhere (easier to tell people apart) */
.av { width: 32px; height: 32px; font-size: 12.5px; }
.av.sm { width: 28px; height: 28px; font-size: 11.5px; }
.av.lg { width: 44px; height: 44px; font-size: 15px; }
.av.xs { width: 20px; height: 20px; font-size: 9px; }
.av .pres { width: 10px; height: 10px; }
.avs .av { width: 32px; height: 32px; } .avs .av.sm { width: 28px; height: 28px; }
.irow-ic .av { width: 36px; height: 36px; font-size: 13px; }
.conv .av { width: 36px; height: 36px; }
.msg .av { width: 40px; height: 40px; }
.ol-row .av { width: 32px; height: 32px; }
.me-btn .av { width: 34px; height: 34px; }
.av.xl, #pv .av.lg { width: 64px; height: 64px; font-size: 22px; }
.ol-t .ol-c{font-size:10.5px;color:var(--faint);overflow-wrap:anywhere}
.pn-row{display:flex;gap:6px}
.pn-row select{flex:none;width:auto;max-width:150px}
.pn-row input{flex:1;min-width:0}
.m-sys{font-style:normal;font-size:10.5px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:999px;margin-left:6px}
.send-review{font-weight:700}
.waiting-chip{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);font-weight:600}
.btn.done-toggle{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good);border-color:transparent;font-weight:700}
.btn.done-toggle:hover{background:var(--panel-2);color:var(--muted)}
.btn.done-toggle:hover::after{content:" · Undo";font-weight:600}

/* a roomier sidebar so the online list reads in full */
:root { --side: 264px; }
.onl { margin: 8px 4px 0; padding: 10px 8px 8px; }
.ol-row { padding: 6px 6px; align-items: flex-start; }
.ol-row .av { margin-top: 2px; }
.ol-t b { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ol-st { font-style: normal; font-size: 10.5px; font-weight: 650; padding: 0 6px; border-radius: 999px; line-height: 16px; }
.ol-st.online { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.ol-st.idle { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.ol-st.dnd { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.ol-st.offline { color: var(--faint); background: var(--panel-2); }
.ol-t .ol-c, .ol-t span { overflow-wrap: normal; word-break: normal; }
.ol-t .ol-c { font-size: 10.5px; white-space: normal; }
/* not done yet: a quiet outline; done: solid green */
.btn.mark-done{background:none;border:1.5px solid color-mix(in srgb,var(--good) 45%,transparent);color:var(--good);font-weight:650}
.btn.mark-done:hover{background:color-mix(in srgb,var(--good) 10%,transparent);border-color:var(--good)}
.btn.good.done-toggle{background:var(--good);color:#fff;border-color:var(--good)}
.btn.good.done-toggle:hover{background:var(--panel-2);color:var(--muted);border-color:var(--line)}
.sent-chip{display:inline-flex;align-items:center;gap:6px;color:var(--accent);background:var(--accent-soft);font-weight:650;padding:6px 12px}
.sent-chip svg{width:14px;height:14px}

/* Drive previews */
.vw-html{display:flex;align-items:center;justify-content:center;width:100%;height:100%;animation:rise .25s var(--ease-out) both}
.dp-file{display:flex;flex-direction:column;align-items:center;gap:10px;color:#eee;text-align:center;max-width:520px}
.dp-file img{max-width:min(520px,80vw);max-height:56vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.dp-file b{font-size:15px}.dp-file span{font-size:12.5px;color:#aaa}
.dp-ic svg{width:56px;height:56px}
.dp-folder{width:min(1100px,92vw);max-height:calc(100vh - var(--tb,0px) - 100px);display:flex;flex-direction:column;gap:14px;color:#eee}
.dp-fh{display:flex;align-items:center;gap:10px;font-size:15px}.dp-fh span{color:#999;font-size:12.5px}
.dp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;overflow:auto;padding:2px}
.dp-tile{display:flex;flex-direction:column;gap:6px;padding:8px;border:0;border-radius:12px;background:rgba(255,255,255,.06);color:#eee;font:inherit;cursor:pointer;text-align:left;transition:background .15s,transform .15s}
.dp-tile:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.dp-thumb{aspect-ratio:4/3;border-radius:8px;background:rgba(0,0,0,.35);display:grid;place-items:center;overflow:hidden}
.dp-thumb img{width:100%;height:100%;object-fit:cover}.dp-thumb svg{width:34px;height:34px}
.dp-n{font-size:12px;line-height:1.3;overflow-wrap:anywhere}
.dp-empty{color:#aaa;padding:20px}
.viewer{animation:vwIn .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes vwIn{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1}}
/* online card: room for a full e-mail */
:root { --side: 284px; }

/* card chats */
.av.card-av{background:var(--panel-2);border-radius:10px;overflow:hidden;width:44px;padding:0 3px}
.av.card-av .clogo img{max-width:100%;height:auto!important;width:100%!important}
.card-th{align-items:flex-start;gap:10px}
.ct-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ct-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ct-name{border:0;background:none;padding:0;font:inherit;font-size:16px;font-weight:700;color:var(--text);cursor:pointer;text-align:left;overflow-wrap:anywhere}
.ct-name:hover{color:var(--accent)}
.ct-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.ct-tag{color:var(--faint);font-weight:650}
.ct-owners{display:inline-flex}.ct-owners .av{margin-right:-4px;box-shadow:0 0 0 2px var(--panel)}
.ct-brief-t{border:0;background:var(--panel-2);border-radius:999px;padding:3px 10px;font:inherit;font-size:11.5px;font-weight:650;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.ct-brief-t:hover{color:var(--accent)}
.ct-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ct-brief{margin:0 18px 8px;padding:12px 14px;border-radius:12px;background:var(--panel-2);font-size:13px;line-height:1.5;max-height:220px;overflow:auto;animation:stIn .2s cubic-bezier(.2,.8,.2,1);white-space:pre-wrap;overflow-wrap:anywhere}
.m-sys.ext{color:#0079bf;background:color-mix(in srgb,#0079bf 12%,transparent)}
.btn.small.mark-done{padding:5px 12px}

/* ---- task drawer, tidier ---- */
.drawer .dh { gap: 10px; padding: 16px 22px 16px; }
.dh-top { gap: 10px; }
.dh-where { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.dh-where b { font-size: 13.5px; }
.dh-where span { font-size: 12px; color: var(--faint); }
.drawer .dh h2 { font-size: 20px; margin: 2px 0 2px; }
.dh-acts { align-items: center; }
.dh-acts .more-btn { margin-left: auto; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.dg { background: var(--panel); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dg .k { font-size: 11.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.dg .v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; }
.dg select.plain { max-width: 100%; }
.drawer .db { gap: 4px; }
.drawer .dsec { margin-top: 18px; }
.drawer .dsec h3 { font-size: 12px; font-weight: 650; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.drawer .desc.clamp { max-height: 9.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.linkbtn { background: none; border: 0; color: var(--accent); font-weight: 600; font-size: 13px; padding: 6px 0; cursor: pointer; }
.drawer details.more { margin-top: 22px; }
.dmenu { position: fixed; z-index: 400; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.16); padding: 6px; min-width: 210px; animation: pop .14s var(--ease-out) both; }
.dmenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; text-align: left; }
.dmenu button:hover { background: var(--panel-2); }
.dmenu svg { color: var(--muted); flex: none; }
@media (max-width: 520px) { .dgrid { grid-template-columns: 1fr; } }
/* stacked faces: the earlier one sits on top, so every online dot stays visible */
.avs > .av, .th-avs > .av { position: relative; }
.avs > :nth-child(1) { z-index: 10; } .avs > :nth-child(2) { z-index: 9; } .avs > :nth-child(3) { z-index: 8; } .avs > :nth-child(4) { z-index: 7; }
.avs > :nth-child(5) { z-index: 6; } .avs > :nth-child(6) { z-index: 5; } .avs > :nth-child(7) { z-index: 4; } .avs > :nth-child(8) { z-index: 3; }
.avs > :nth-child(9) { z-index: 2; } .avs > :nth-child(10) { z-index: 1; }
/* For You rows: each task sits in its own soft tile — calm, but clearly separate */
.fy-col { display: flex; flex-direction: column; gap: 6px; }
.fy-list { display: flex; flex-direction: column; gap: 6px; }
.fy-col .fy-row { border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--panel-2) 35%, var(--panel)); padding: 8px 12px; border-radius: 12px; transition: background .15s, border-color .15s, transform .15s; }
.fy-col .fy-row.click:hover { background: var(--panel-2); border-color: var(--line); transform: translateY(-1px); }
/* admin roster: the profile cell */
.pf-cell { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 6px 2px 2px; border-radius: 999px; cursor: pointer; font: inherit; white-space: nowrap; }
.pf-cell:hover { background: var(--panel-2); }
.pf-st { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.pf-st.ok { color: #138a4b; background: color-mix(in srgb, #1fbf6a 14%, transparent); }
.pf-st.warn { color: #b45309; background: color-mix(in srgb, #f59e0b 16%, transparent); }
/* capacity bar: its own deep green (not the online green) on a visible track */
:root { --cap-low: #0b6b4f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cap-low: #2a9d7c; } }
:root[data-theme="dark"] { --cap-low: #2a9d7c; }
.pcard .bar { background: color-mix(in srgb, var(--text) 9%, transparent); height: 5px; margin: 10px 0 2px; }
.pcard .bar > i { min-width: 6px; }
/* leave card inside a chat */
.lv-card { margin-top: 6px; max-width: 360px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.lv-card.gone { color: var(--faint); font-size: 13px; padding: 8px 12px; }
.lv-top { display: flex; align-items: center; gap: 10px; }
.lv-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft, var(--panel-2)); color: var(--accent); flex: none; }
.lv-m { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.lv-m b { font-size: 13.5px; } .lv-m span { font-size: 12.5px; color: var(--muted); }
.lv-st { font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lv-st.good { color: var(--good); background: var(--good-soft); } .lv-st.warn { color: var(--warn); background: var(--warn-soft); }
.lv-st.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); } .lv-st.faint { color: var(--faint); background: var(--panel-2); }
.lv-r { font-size: 13px; color: var(--text); background: var(--panel-2); border-radius: 9px; padding: 7px 10px; }
.lv-acts { display: flex; gap: 8px; }
.lv-chat { display: inline-flex; align-items: center; gap: 6px; }
.lv-del { color: var(--faint); } .lv-del:hover { color: var(--bad); }
.s-free { color: var(--cap-low); }
.p-rm { color: var(--faint); opacity: .5; } tr:hover .p-rm { opacity: 1; } .p-rm:hover { color: var(--bad); }
.pn-row { display: flex; gap: 8px; width: 100%; } .pn-row select { flex: none; width: 118px; } .pn-row input { flex: 1; min-width: 0; width: auto; }
.drawer .desc.clamp:not(.long) { max-height: none; -webkit-mask-image: none; mask-image: none; }
.av.card-av { color: var(--accent); display: grid; place-items: center; }
.tc-check.ro { cursor: default; } .tc-check.ro:hover { border-color: var(--line-2); background: var(--panel); color: transparent; }
.tc-check.ro.blank { border-style: dashed; opacity: .55; }
.tc.is-done .tc-check.ro:hover { border-color: var(--good); background: var(--good); color: #fff; }
.chip.done-chip { color: var(--good); background: var(--good-soft); display: inline-flex; align-items: center; gap: 6px; }
/* People → Workload: tidy week strip, quieter team breaks */
.ptable .heat { gap: 4px; }
.ptable .heat i { width: 32px; height: 24px; border-radius: 7px; }
.ptable .heat-h i { height: auto; background: none !important; color: var(--faint); font-size: 11px; font-weight: 600; }
tr.grp-start td { border-top: 0; box-shadow: inset 0 1px 0 var(--line-2); }
tr.grp-start + tr td, tr.grp-start td { }
/* freelancer login card */
.fl-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.fl-ok { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--good-soft); color: var(--good); animation: pop .3s var(--ease-out) both; }
.fl-creds { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.fl-c { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; }
.fl-c + .fl-c { border-top: 1px solid var(--line); }
.fl-c span { color: var(--faint); font-size: 12.5px; font-weight: 600; }
.fl-c b { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 15px; letter-spacing: .01em; user-select: all; word-break: break-all; }
.fl-all { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
.fl-all.done { background: var(--good); border-color: var(--good); }
.lv-when { font-weight: 500; color: var(--muted); margin-left: 6px; }
.pn-row input[type=tel], .pn-row #pn { width: 100% !important; flex: 1 1 auto; }
.grp-bar { width: 4px; height: 16px; border-radius: 3px; background: var(--tc); flex: none; margin-right: 2px; }
/* project logo + its name */
.pj-mark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pj-mark.row { flex-direction: row; align-items: center; gap: 10px; }
.pj-name { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.pj-mark.row .pj-name { font-size: 13px; color: var(--text); }
.proj-top { min-height: 62px; align-items: flex-start; }
/* timeline: only days with cards, roomy columns */
.tl { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; padding-bottom: 8px; }
.tl-col { flex: 0 0 260px; min-width: 260px; }
.tl-h { padding: 6px 6px 8px; font-size: 12.5px; }
.tl-h.late { color: var(--bad); }
.tl-h span:last-child { color: var(--faint); font-weight: 600; }
/* For You tiles: white with a hairline, lift softly on hover */
.fy-col .fy-row { background: var(--panel); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
.fy-col .fy-row.click:hover { background: var(--panel); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 4px 14px rgba(16, 24, 40, .07); transform: translateY(-1px); }
.fy-col .fy-row { padding: 13px 14px; min-height: 64px; gap: 12px; } .fy-col, .fy-list { gap: 8px; }
/* close (×) on a chat in the list: shows on hover */
.conv { position: relative; }
.cv-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; border: 0; background: var(--panel); color: var(--faint); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, background .15s; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.conv:hover .cv-x { opacity: 1; } .cv-x:hover { color: var(--text); background: var(--panel-2); }
@media (hover: none) { .cv-x { opacity: .7; } }
/* the open animation must not hold the transform, or zoom/pan can't move the picture */
.vw-stage img.vw-img { animation-fill-mode: backwards; }
/* emoji + GIF picker */
.emo-pop { position: fixed; z-index: 450; width: 352px; height: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 48px rgba(16,24,40,.18); display: flex; flex-direction: column; overflow: hidden; animation: pop .16s var(--ease-out) both; }
.emo-top { padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 8px; }
.emo-tabs { display: flex; gap: 4px; background: var(--panel-2); border-radius: 10px; padding: 3px; }
.emo-tabs button { flex: 1; border: 0; background: none; border-radius: 8px; padding: 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.emo-tabs button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.emo-q { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; font: inherit; font-size: 13.5px; background: var(--panel); color: var(--text); }
.emo-cats { display: flex; gap: 2px; padding: 0 8px 4px; border-bottom: 1px solid var(--line); }
.emo-cats button { flex: 1; border: 0; background: none; font-size: 17px; padding: 5px 0; border-radius: 8px; cursor: pointer; }
.emo-cats button:hover { background: var(--panel-2); }
.emo-body { flex: 1; overflow-y: auto; padding: 4px 8px 10px; }
.emo-h { font-size: 11.5px; font-weight: 650; color: var(--faint); padding: 10px 4px 4px; }
.emo-grid { display: grid; grid-template-columns: repeat(8, 1fr); }
.emo-grid button { border: 0; background: none; font-size: 22px; line-height: 1; padding: 6px 0; border-radius: 8px; cursor: pointer; transition: transform .1s, background .1s; }
.emo-grid button:hover { background: var(--panel-2); transform: scale(1.15); }
.emo-empty { text-align: center; color: var(--faint); font-size: 13px; padding: 40px 12px; line-height: 1.6; grid-column: 1 / -1; }
.emo-empty span { font-size: 12px; }
.gif-grid { columns: 2; column-gap: 6px; }
.gif-grid button { display: block; width: 100%; border: 0; padding: 0; margin: 0 0 6px; border-radius: 10px; overflow: hidden; background: var(--panel-2); cursor: pointer; break-inside: avoid; }
.gif-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-grid button:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.gif-by { font-size: 10.5px; color: var(--faint); text-align: right; padding: 4px 12px 8px; }
.m-gif { display: block; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 14px; overflow: hidden; max-width: min(300px, 100%); margin-top: 2px; }
.m-gif img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
.bubble.jumbo { background: none !important; font-size: 34px; line-height: 1.15; padding: 0 2px; box-shadow: none; }
.gif-grid .emo-empty { column-span: all; display: block; } .gif-grid:has(> .emo-empty) { columns: 1; }
.app-bad { color: var(--bad); font-weight: 600; }

/* ---------- task: a centred card instead of a side panel. Pops in fast, closes faster */
.scrim { background: rgba(12, 14, 24, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.drawer, html.desk .drawer {
  top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
  width: min(780px, calc(100vw - 32px)); height: auto; max-height: min(880px, calc(100vh - 48px));
  border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgba(10, 12, 24, .28), 0 4px 14px rgba(10, 12, 24, .08);
  animation: taskIn .2s cubic-bezier(.2, .9, .25, 1.15) both; overflow: hidden;
}
html.desk .drawer { top: calc(50% + var(--tb) / 2); max-height: min(880px, calc(100vh - var(--tb) - 40px)); }
@keyframes taskIn { from { opacity: 0; transform: translate(-50%, -48%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes taskOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -49%) scale(.97); } }
.closing .drawer { animation: taskOut .13s ease-in both; }
.closing .scrim { animation: fade .13s ease reverse both; }
.swap .drawer { animation: none; }
.drawer .db { min-height: 0; flex: 1 1 auto; }
@media (max-width: 700px) {
  .drawer, html.desk .drawer { top: auto; bottom: 0; left: 0; transform: none; width: 100vw; max-height: 92vh; border-radius: 22px 22px 0 0; animation: sheetIn .22s ease-out both; }
  .closing .drawer { animation: sheetIn .15s ease-in reverse both; }
}
@keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* task card: the comment box stays pinned at the bottom, however long the card is */
.drawer .dfoot { flex: none; border-top: 1px solid var(--line); padding: 12px 22px 14px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.drawer .dfoot .cbox { display: flex; align-items: flex-end; gap: 10px; }
.drawer .dfoot textarea { flex: 1; min-height: 42px; max-height: 160px; resize: none; border-radius: 12px; padding: 10px 13px; line-height: 1.4; }
.drawer .dfoot .btn { height: 42px; padding: 0 18px; }
.drawer .dfoot #lk { align-self: flex-start; }
.drawer .db { overflow-anchor: none; }   /* comments loading in mustn't scroll the card away from its top */
/* People → Delivery */
.st-per { margin-bottom: 14px; display: inline-flex; }
.st-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.st-k { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.st-k b { font-size: 26px; letter-spacing: -.02em; } .st-k span { font-size: 12.5px; color: var(--faint); font-weight: 600; }
.st-k b.good { color: var(--cap-low); } .st-k b.warn { color: var(--warn); } .st-k b.bad { color: var(--bad); }
.st-n { font-size: 16px; }
.st-ot { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.st-ot .bar { flex: 0 0 110px; height: 6px; }
.st-ot span.good { color: var(--cap-low); font-weight: 650; } .st-ot span.warn { color: var(--warn); font-weight: 650; } .st-ot span.bad { color: var(--bad); font-weight: 650; }
.st-note { margin: 12px 4px; }
/* project Library */
.lib { padding: 16px 18px 20px; }
.lib-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.lib-q { flex: 1; min-width: 200px; } .lib-q input { width: 100%; }
.lib-scan { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 8px 2px; }
.spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.lib-m { font-size: 12px; font-weight: 650; color: var(--faint); margin: 16px 2px 8px; display: flex; gap: 8px; }
.lib-m span { font-weight: 600; opacity: .7; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lib-t { display: flex; flex-direction: column; gap: 6px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: var(--text); min-width: 0; }
.lib-th { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; transition: transform .15s, box-shadow .15s; }
.lib-th img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; } .lib-th img.ok { opacity: 1; }
.lib-th.ic svg { width: 30px; height: 30px; }
.lib-t:hover .lib-th { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16, 24, 40, .1); }
.lib-play { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 12px; }
.lib-n { font-size: 12.5px; font-weight: 600; line-height: 1.3; word-break: break-word; }
.lib-s { font-size: 11.5px; color: var(--faint); line-height: 1.3; margin-top: -3px; }
/* Business */
.biz-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.biz-n { display: flex; align-items: center; gap: 10px; } .biz-n img { width: 20px; height: 20px; border-radius: 5px; }
.biz-n div { display: flex; flex-direction: column; } .biz-n span { font-size: 12px; color: var(--faint); }
.biz-dot { width: 20px; height: 20px; border-radius: 6px; background: var(--panel-2); }
.biz-o { display: inline-flex; align-items: center; gap: 7px; }
.biz-off td { opacity: .55; }
.duepill.late { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.duepill.soon { color: var(--warn); background: var(--warn-soft); }
/* update on its way: a quiet chip, bottom left */
#upd-chip { position: fixed; left: 18px; bottom: 18px; z-index: 300; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); box-shadow: 0 6px 20px rgba(16,24,40,.1); animation: pop .2s var(--ease-out) both; }
.lv-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; }
.fy-t span.fy-soon { color: var(--info); }
/* Settings → Task Types: lead & admin time */
.wr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; padding: 4px 20px 20px; }
.wr { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.wr b { font-size: 13.5px; } .wr .faint { grid-column: 1; }
.wr-in { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 4px; }
.wr-in input { width: 64px; text-align: right; } .wr-in i { font-style: normal; color: var(--faint); }
.drawer .db > * { flex-shrink: 0; }   /* a long card scrolls; its sections never get squeezed */
#upd-chip { left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; animation: none; }
#upd-chip button { border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 12.5px; font-weight: 650; padding: 6px 12px; cursor: pointer; }
#upd-chip button:disabled { opacity: .7; }
/* New Task: brief with attachments */
.nt-brief { border: 1px solid var(--line); border-radius: 12px; padding: 4px 6px 8px; transition: border-color .15s, background .15s; }
.nt-brief.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.nt-brief textarea { border: 0 !important; box-shadow: none !important; width: 100%; resize: vertical; background: transparent; }
.nt-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; }
.nt-file { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border-radius: 8px; padding: 4px 6px 4px 4px; font-size: 12.5px; max-width: 100%; }
.nt-file img { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; }
.nt-file span { word-break: break-all; }
.nt-file button { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; }
.nt-attach { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; padding: 6px 6px 0; }
.drawer.dropping { outline: 2px dashed color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: -8px; }
/* group picture + description */
.grp-av { overflow: hidden; } .grp-av img { width: 100%; height: 100%; object-fit: cover; }
.th-grp { width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--panel-2); color: var(--muted); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; overflow: hidden; flex: none; display: grid; place-items: center; }
.th-grp img { width: 100%; height: 100%; object-fit: cover; }
.th-grp:hover { box-shadow: 0 0 0 2px var(--accent); }
.th-gname { border: 0; background: none; padding: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; }
.th-gname:hover { color: var(--accent); }
.th-desc { font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; max-width: 640px; }
.th-adddesc { border: 0; background: none; padding: 0; font: inherit; color: var(--faint); cursor: pointer; }
.th-adddesc:hover { color: var(--accent); }
.grp-pic { width: 64px; height: 64px; border-radius: 18px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 700; overflow: hidden; }
.grp-pic img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- link previews in chat: one tidy card under a message that shares a link */
.lp-wrap{margin-top:6px;max-width:440px}
.lp-wait{display:none}
.lp-in{animation:lpIn .22s ease-out}
@keyframes lpIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.lp{display:flex;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;color:var(--text);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.lp:hover{border-color:var(--line-2);box-shadow:var(--shadow);text-decoration:none}
.lp-img{position:relative;flex:none;width:92px;min-height:92px;background:var(--panel-2)}
.lp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lp-play{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;padding-left:2px;backdrop-filter:blur(2px)}
.lp-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:10px 12px;justify-content:center}
.lp-site{font-size:11px;font-weight:600;color:var(--faint)}
.lp-t b{font-size:13px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.lp-d{font-size:12px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.lp-brand{flex:none;width:44px;margin:10px 0 10px 10px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;background:var(--faint);align-self:center}
.lp-mini .lp-t{padding:8px 12px}
.lp-brand.ig{background:linear-gradient(45deg,#f9a73d,#e1306c 50%,#8a3ab9)}
.lp-brand.yt{background:#ff0033}.lp-brand.tt{background:#111}.lp-brand.x{background:#111}
.lp-brand.li{background:#0a66c2}.lp-brand.fb{background:#1877f2}.lp-brand.th{background:#111}
.lp-mini{display:inline-flex;max-width:100%}
.lp-mini .lp-brand{width:36px;height:36px;border-radius:10px;font-size:15px;margin:8px 0 8px 8px}
.lp-mini .lp-t{padding:7px 14px 7px 11px;gap:1px}

/* ---------- steps (checklists): New Task + the card */
.nt-steps{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.nt-steps .fchip{align-self:flex-start}
.stp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.stp-list li{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 6px;border-radius:7px}
.stp-list li:hover{background:var(--panel-2)}
.stp-n{flex:none;width:18px;height:18px;border-radius:50%;background:var(--panel-2);color:var(--muted);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.stp-list .stp-t{flex:1;min-width:0;overflow-wrap:anywhere}
.stp-list button,.stp-x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:16px;line-height:1;padding:0 4px;opacity:0;transition:opacity .12s}
.stp-list li:hover button,.stp:hover .stp-x{opacity:1}
.stp-list button:hover,.stp-x:hover{color:var(--bad)}
.stp-in{width:100%;border:1px dashed var(--line-2);background:transparent;border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;color:var(--text);outline:none;transition:border-color .15s,background .15s}
.stp-in:focus{border-style:solid;border-color:var(--accent);background:var(--panel)}
.stp-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.stp-h h3{margin:0}
.stp-p{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);font-weight:600}
.stp-bar{width:70px;height:5px;border-radius:3px;background:var(--panel-2);overflow:hidden}
.stp-bar i{display:block;height:100%;background:var(--good);border-radius:3px;transition:width .25s ease}
.stp-l{display:flex;flex-direction:column;gap:1px;margin-bottom:8px}
.stp-ln{font-size:12px;font-weight:600;color:var(--muted);margin:4px 0 2px}
.stp{display:flex;align-items:flex-start;gap:9px;padding:5px 6px;border-radius:8px;font-size:13px;line-height:1.4}
.stp:hover{background:var(--panel-2)}
.stp .stp-t{flex:1;min-width:0;overflow-wrap:anywhere;transition:color .15s}
.stp-c{flex:none;width:18px;height:18px;margin-top:1px;border-radius:5px;border:1.6px solid var(--line-2);background:var(--panel);color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s,border-color .15s,color .15s}
.stp-c:hover{border-color:var(--good)}
.stp.done .stp-c{background:var(--good);border-color:var(--good);color:#fff}
.stp.done .stp-t{color:var(--faint);text-decoration:line-through}
.stp-l .stp-in{margin-top:4px}
.stp-add0{border:1px dashed var(--line-2);background:none;border-radius:8px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.stp-add0:hover{border-color:var(--accent);color:var(--accent-text)}

/* ---------- leaves: admin adds / edits from the calendar */
td.lv-cell{cursor:pointer}
td.lv-cell:hover{box-shadow:inset 0 0 0 2px var(--accent-soft)}
.lv-quick{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 4px}
#upd-chip:not(:has(button)){padding-right:16px}

/* New Task: a small, clean pill in the bottom-right corner */
.fab{position:fixed;right:24px;bottom:22px;z-index:34;height:38px;padding:0 15px 0 12px;display:flex;align-items:center;gap:7px;border:0;border-radius:19px;background:var(--accent);color:#fff;font:inherit;font-size:13px;font-weight:650;cursor:pointer;box-shadow:0 1px 2px rgba(16,24,40,.12),0 2px 6px rgba(16,24,40,.08);transition:transform .12s,filter .15s}
.fab svg{width:16px;height:16px}
.fab:hover{filter:brightness(1.08)}
.fab:active{transform:scale(.97)}
html[data-route=chat] .fab,html[data-route=browser] .fab,html[data-route=whatsapp] .fab{display:none}

/* ---------- team chats: their own section, team-coloured badges, a colour line under the header */
.av.tdept-av{border-radius:11px;background:var(--tc);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.3px;display:flex;align-items:center;justify-content:center}
.th.th-team{box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--tc) 55%,transparent)}
.th .av.tdept-av{width:40px;height:40px;font-size:11.5px}
button.th-avs{border:0;background:none;padding:2px 4px;border-radius:999px;cursor:pointer;font:inherit;display:flex;align-items:center;transition:background .15s}
button.th-avs:hover{background:var(--panel-2)}
.mem-list{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow:auto;margin:6px -6px}
.mem-list .mem-i{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px}
.mem-list .mem-i:hover{background:var(--panel-2)}
.mem-list .mem-i .n{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13.5px;font-weight:600}
.mem-list .mem-i .r{font-size:11.5px;font-weight:500;color:var(--faint)}
.mem-rm{opacity:0;transition:opacity .12s}
.mem-i:hover .mem-rm,.mem-rm:focus{opacity:1}
.mem-rm:hover{color:var(--bad)}
.adm-opts{display:flex;flex-direction:column;gap:8px;margin:4px 0}
.adm-o{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.adm-o b{font-size:13.5px}
.adm-o span{font-size:12px;color:var(--muted)}
.adm-o:hover{border-color:var(--line-2);background:var(--panel-2)}
.adm-o.bad b{color:var(--bad)}
.adm-o.bad:hover{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:var(--bad-soft)}
/* client chats: a new message shows, but softly (they only notify when you're @tagged) */
.conv.quiet.unread .u{background:var(--line-2)}
.conv.quiet.unread .n{font-weight:600}
/* New Task: repeat row; a picked project keeps its logo readable */
.nt-rep{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.nt-rep .seg button{font-size:12.5px}
#nt-c .fchip.on{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
/* card comment box: pasted screenshots waiting to go up with the comment */
.cm-files{display:flex;flex-wrap:wrap;gap:8px}
.cm-files:not(:empty){margin-bottom:8px}
.cmf{position:relative;display:flex;align-items:center;height:64px;min-width:64px;max-width:220px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel-2);animation:lpIn .2s ease-out}
.cmf img{height:100%;width:auto;max-width:220px;object-fit:cover;display:block}
.cmf-n{padding:0 12px;font-size:12px;font-weight:600;overflow-wrap:anywhere}
.cmf button{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
/* repeat picker: one row of choices, day dots or a day of the month under it when needed */
.rp-seg{flex-wrap:wrap}
.rp-seg button{font-size:12.5px}
.rp-days{display:flex;gap:6px;margin-top:8px}
.rp-d{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.rp-d:hover{border-color:var(--accent)}
.rp-d.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rp-month{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--muted)}
.rp-month select{width:auto;padding:5px 8px}
.f > span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
/* chat list: a slim scrollbar that only shows on hover */
.cv-list{scrollbar-width:thin;scrollbar-color:transparent transparent}
.cv-list:hover{scrollbar-color:var(--line-2) transparent}
.cv-list::-webkit-scrollbar{width:8px}
.cv-list::-webkit-scrollbar-button{display:none;height:0}
.cv-list::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
.cv-list:hover::-webkit-scrollbar-thumb{background:var(--line-2)}
/* pictures posted on cards, shown in the card chat */
.m-timg{display:block;margin:6px 0 2px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);cursor:zoom-in;overflow:hidden;max-width:min(360px,100%)}
.m-timg img{display:block;max-width:100%;max-height:280px;object-fit:contain}
.m-timg:not(.ok){padding:6px 10px;cursor:pointer}
.m-timg-l{font-size:12.5px;font-weight:600;color:var(--accent-text)}
.m-timg-l::before{content:"🖼 "}
/* P&L: tool icons and the rate note */
.biz-ic{flex:none;width:28px;height:28px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.biz-ic img{width:18px;height:18px;object-fit:contain}
.biz-ic b{font-size:13px;color:var(--muted)}
.biz-fx{font-style:normal;color:var(--faint)}
/* first sign-in: pick your name */
.claim-box{gap:12px}
.claim-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:46vh;overflow:auto}
.claim-p{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font:inherit;font-weight:600;font-size:14px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.claim-p:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.claim-p:disabled{opacity:.5;cursor:default}
/* Google not connected: a clear bar across the top */
#gbar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;max-width:min(760px,calc(100vw - 32px));padding:10px 10px 10px 16px;border-radius:14px;background:#fff4e5;color:#7a4a00;border:1px solid #f5c983;box-shadow:0 6px 24px rgba(16,24,40,.12);animation:lpIn .25s ease-out}
#gbar svg{flex:none;color:#d98200}
#gbar span{display:flex;flex-direction:column;font-size:12.5px;line-height:1.35}
#gbar b{font-size:13.5px;color:#4d2e00}
#gbar .btn{flex:none;background:#d98200;color:#fff;border:0;font-weight:650}
#gbar .btn:hover{filter:brightness(1.06)}
html.desk #gbar{top:calc(var(--tb, 0px) + 8px)}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]) #gbar{background:#3a2a10;color:#f3d4a0;border-color:#6b4a14}:root:not([data-theme=light]) #gbar b{color:#ffe4b5}}
:root[data-theme=dark] #gbar{background:#3a2a10;color:#f3d4a0;border-color:#6b4a14}
:root[data-theme=dark] #gbar b{color:#ffe4b5}
html.gbar-on .main{padding-top:100px}
html.gbar-on .card.chat, html.gbar-on.desk .chat{height:calc(100vh - var(--tb, 0px) - 140px)}
@media (max-width:900px){html.gbar-on .card.chat{height:calc(100vh - var(--tb, 0px) - 210px)}}
/* chat list: a little more room so names fit on one line */
@media (min-width: 901px) {
  .chat { grid-template-columns: 320px minmax(0, 1fr); }
  .chat.with-prof { grid-template-columns: 320px minmax(0, 1fr) 290px; }
}
@media (min-width: 901px) and (max-width: 1100px) { .chat.with-prof { grid-template-columns: 280px minmax(0, 1fr); } }
/* DM header: full name bold, @handle in colour with status, then phone · e-mail */
.th-handle{display:flex;align-items:center;gap:8px;margin-top:1px;font-size:12.5px}
.th-at{color:var(--accent-text);font-weight:600}
.th-handle .th-s::before{content:"·";margin-right:8px;color:var(--faint)}
.th-contact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:1px}
.th-contact .th-phone:first-child::before{content:none}
.th-contact .th-phone{color:var(--faint)}
/* profile: @ before the username */
.un-row{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding-left:10px}
.un-row b{color:var(--faint);font-weight:600}
.un-row input{border:0 !important;box-shadow:none !important;background:transparent !important;padding-left:4px !important}
/* chat attachments: copy the Drive link (shows on hover) */
.att-wrap{position:relative}
.att-copy{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:5px;padding:4px 9px;border:0;border-radius:999px;background:rgba(17,17,20,.72);color:#fff;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;opacity:0;transition:opacity .15s;backdrop-filter:blur(4px)}
.att-wrap:hover .att-copy{opacity:1}
.att-copy:hover{background:rgba(17,17,20,.9)}
.vw-copy{width:auto !important;padding:0 12px !important;font-size:12.5px !important;font-weight:600}
/* chat list: Unread section + message counts; # chat chips */
.cv-sec.cv-unread{color:var(--accent-text)}
.u-n{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:750;display:flex;align-items:center;justify-content:center;margin-left:auto}
.chatchip{display:inline-flex;align-items:center;border:0;background:var(--accent-soft);color:var(--accent-text);font:inherit;font-size:.92em;font-weight:600;padding:1px 7px;border-radius:6px;cursor:pointer}
.chatchip:hover{filter:brightness(.96)}
.chatchip.off{opacity:.6;cursor:default}
.sg-chat{display:flex;align-items:center;gap:8px}
.sg-chat .sg-av .av{width:22px;height:22px;font-size:9px;border-radius:6px}
.sg-chat em{margin-left:auto;font-style:normal;font-size:11px;color:var(--faint)}
/* chat: use more of a wide screen */
html[data-route=chat] .main{max-width:1640px}
.ppl-h{font-size:16px;margin:4px 2px 12px}.ppl-h ~ .ppl-h{margin-top:26px}
/* DM header, tidier: name + status dot / @handle · role / contact */
.th-n{display:flex;align-items:center;gap:7px}
.th-dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.th-dot.online{background:var(--good)}.th-dot.idle{background:var(--warn)}.th-dot.dnd{background:var(--bad)}
.th-handle{gap:0;color:var(--muted)}
.th-rl::before{content:"·";margin:0 7px;color:var(--faint)}
.th-contact{font-size:11.5px}
.th-contact .th-phone{font-size:11.5px}
/* online box: full name, @handle, role */
.ol-h{color:var(--accent-text);font-size:11.5px;font-weight:600}
/* DM header, tidier: name + status dot / @handle · role / contact */
.th-n{display:flex;align-items:center;gap:7px}
.th-dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.th-dot.online{background:var(--good)}.th-dot.idle{background:var(--warn)}.th-dot.dnd{background:var(--bad)}
.th-handle{gap:0;color:var(--muted)}
.th-rl::before{content:"·";margin:0 7px;color:var(--faint)}
.th-contact{font-size:11.5px}
.th-contact .th-phone{font-size:11.5px}
/* online box: full name, @handle, role */
.ol-h{color:var(--accent-text);font-size:11.5px;font-weight:600}
/* @people and #chats look different: people in purple, chats in teal with a hash */
.chatchip{background:color-mix(in srgb,#0f9b8e 13%,transparent) !important;color:#0b7d72 !important}
:root[data-theme=dark] .chatchip{color:#5fd4c7 !important}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .chatchip{color:#5fd4c7 !important}}
.ol-t .ol-c{margin-top:3px;line-height:1.45;color:var(--faint);overflow-wrap:anywhere}
/* online box: two clean lines, phone / e-mail as small icons (hover shows, click copies) */
.ol-row{display:flex;align-items:center;gap:9px;cursor:pointer}
.ol-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ol-l1{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;line-height:1.25}
.ol-l1 b{font-size:13px}
.ol-l1 .ol-h{font-size:11px;font-weight:600;color:var(--accent-text)}
.ol-l2{font-size:11px;color:var(--faint);line-height:1.3}
.ol-ic{flex:none;display:flex;gap:4px;opacity:.55;transition:opacity .15s}
.ol-row:hover .ol-ic{opacity:1}
.ol-i{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer}
.ol-i:hover{background:var(--panel-2);color:var(--accent-text)}
.ol-row{position:relative}
.ol-l1{flex-wrap:nowrap}
.ol-l1 b{white-space:nowrap}
.ol-l1 .ol-h{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ol-ic{position:absolute;right:6px;top:50%;transform:translateY(-50%);opacity:0;background:var(--panel);border-radius:9px;padding:2px;box-shadow:0 2px 8px rgba(16,24,40,.12)}
.ol-row:hover .ol-ic{opacity:1}
.ol-ic{top:50%;box-shadow:none;background:linear-gradient(90deg,transparent,var(--panel-2) 14px);padding:2px 2px 2px 16px;border-radius:0 9px 9px 0}
/* online box v3: name / @handle / role / e-mail, full card on hover */
.ol-t{gap:0}
.ol-t > b{font-size:13px;line-height:1.3}
.ol-t .ol-h{font-size:11px;font-weight:600;color:var(--accent-text);line-height:1.3}
.ol-t .ol-l2{font-size:11px;color:var(--muted);line-height:1.35;margin-top:2px}
.ol-t .ol-mail{font-size:11px;color:var(--faint);line-height:1.35;overflow-wrap:anywhere}
.ol-row{align-items:flex-start}
.ol-row .av{margin-top:2px}
.ol-card{position:fixed;z-index:70;width:270px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(16,24,40,.16);padding:14px;animation:lpIn .16s ease-out}
.olc-top{display:flex;gap:11px;align-items:center}
.olc-top .av{width:44px;height:44px}
.olc-top b{display:block;font-size:14.5px}
.olc-h{display:block;font-size:12px;font-weight:600;color:var(--accent-text)}
.olc-r{display:block;font-size:12px;color:var(--muted)}
.olc-st{display:flex;align-items:center;gap:7px;margin:10px 0 6px;font-size:12px;color:var(--muted)}
.olc-st i{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.olc-st.online i{background:var(--good)}.olc-st.idle i{background:var(--warn)}.olc-st.dnd i{background:var(--bad)}
.olc-ls{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:8px}
.olc-l{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;padding:6px 6px;border-radius:8px;font:inherit;font-size:12.5px;color:var(--text);text-align:left;cursor:default}
.olc-l[data-olcopy]{cursor:pointer}
.olc-l[data-olcopy]:hover{background:var(--panel-2)}
.olc-l svg{flex:none;color:var(--faint)}
.olc-l span{flex:1;min-width:0;overflow-wrap:anywhere}
.olc-l em{font-style:normal;font-size:11px;color:var(--accent-text);opacity:0;transition:opacity .12s}
.olc-l:hover em{opacity:1}
.olc-hint{margin-top:8px;font-size:11px;color:var(--faint);text-align:center}
.ol-t .ol-h, .olc-h{color:var(--faint) !important;font-weight:500 !important}
.ol-t .ol-l2{margin-top:1px}
/* hover card: compact */
.ol-card{padding:11px 12px;width:256px}
.olc-top{gap:10px}
.olc-top .av{width:40px;height:40px}
.olc-top b{font-size:14px;line-height:1.25}
.olc-h,.olc-r{line-height:1.3}
.olc-st{margin:7px 0 5px;font-size:11.5px}
.olc-ls{gap:0;padding-top:5px}
.olc-l{padding:3px 6px;font-size:12px;gap:8px}
.olc-l svg{width:13px;height:13px}
.olc-hint{margin-top:5px;font-size:10.5px}
/* hover card rows: a small tinted icon tile per line */
.olc-l{padding:3px 4px}
.olc-i{flex:none;width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-style:normal}
.olc-i svg{width:12px !important;height:12px !important;color:currentColor !important}
.olc-i.ph{background:#e3f6ec;color:#1f9d63}
.olc-i.ml{background:#e5effd;color:#2f74d0}
.olc-i.dc{background:#ecebff;color:#5865f2}
.olc-i.bd{background:#fde8f1;color:#d6407f}
:root[data-theme=dark] .olc-i{filter:saturate(.9) brightness(.9)}
.olc-l span{font-weight:500}
/* DM header v3: name + status / @handle · role on the left; phone & e-mail as tidy chips on the right */
.th-n{gap:10px}
.th-stat{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:var(--muted)}
.th-stat i{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.th-stat.online i{background:var(--good)}.th-stat.online{color:var(--good)}
.th-stat.idle i{background:var(--warn)}.th-stat.dnd i{background:var(--bad)}
.th-handle{font-size:12px;margin-top:1px}
.th-handle .th-at{color:var(--faint);font-weight:500}
.th-handle .th-rl{color:var(--muted)}
.th-cards{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.th-cc{display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 3px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font:inherit;font-size:12px;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}
.th-cc:hover{background:var(--panel-2);border-color:var(--line-2)}
.th-cc .olc-i{width:22px;height:22px;border-radius:50%}
.th-cc svg{width:12px;height:12px}
@media (max-width:1100px){.th-cards{display:none}}
/* chat page: sits close to the sidebar, no big gap */
html[data-route=chat] .main{padding-left:12px;padding-right:20px}
/* icon tiles: quiet and neutral (no rainbow) */
.olc-i.ph,.olc-i.ml,.olc-i.dc,.olc-i.bd{background:var(--panel-2);color:var(--muted)}
.olc-l:hover .olc-i,.th-cc:hover .olc-i{color:var(--text)}
/* receipts on my messages: ✓ sent, ✓✓ delivered (grey), ✓✓ read (blue) */
.rc{display:inline-flex;align-items:center;margin-left:8px;vertical-align:-1px;color:var(--faint)}
.rc.read{color:#2f8cff}
.rc.wait{opacity:.7}
.rc-solo{display:flex;justify-content:flex-start;margin-top:2px}
.ntest{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 10px}

/* ---- emoji reactions ---- */
.rx { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rx.has { margin-top: 6px; }
.rx-c { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s cubic-bezier(.3,1.6,.5,1); }
.rx-c:hover { border-color: var(--line-2); transform: translateY(-1px); }
.rx-c:active { transform: scale(.92); transition-duration: .08s; }
.rx-c.mine { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-text); }
.rx-e { font-size: 15px; line-height: 1; display: inline-block; transition: transform .25s cubic-bezier(.3,1.8,.5,1); }
.rx-c:hover .rx-e { transform: scale(1.18) rotate(-6deg); }
.rx-n { font-variant-numeric: tabular-nums; min-width: 7px; display: inline-block; }
.rx-c.rx-in { animation: rxIn .42s cubic-bezier(.3,1.7,.5,1); }
.rx-c.rx-in .rx-e { animation: rxWiggle .55s .08s ease-out; }
.rx-c.rx-bump .rx-n { animation: rxCount .32s cubic-bezier(.3,1.5,.5,1); }
.rx-c.rx-bump .rx-e { animation: rxWiggle .5s ease-out; }
@keyframes rxIn { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rxWiggle { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-12deg); } 60% { transform: scale(.95) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes rxCount { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* who reacted: a small tag above the chip */
.rx-c::after { content: attr(data-who); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translate(-50%, 4px); white-space: nowrap;
  background: var(--text); color: var(--panel); font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 7px; pointer-events: none;
  opacity: 0; transition: opacity .15s, transform .15s; z-index: 5; }
.rx-c:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .25s; }
.rx-add { display: none; width: 26px; height: 26px; border-radius: 999px; border: 1px dashed var(--line-2); background: none; color: var(--faint);
  place-items: center; cursor: pointer; transition: color .15s, border-color .15s, transform .2s cubic-bezier(.3,1.6,.5,1); }
.rx.has .rx-add { display: grid; opacity: 0; }
.msg:hover .rx.has .rx-add, .msg.rx-open .rx.has .rx-add, .msg.rx-open-add .rx.has .rx-add { opacity: 1; }
.rx-add:hover { color: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.msg.rx-open .m-acts { display: flex; }
.msg.rx-open-add .m-acts, .msg.rx-open-add:hover .m-acts { display: none; }
/* the quick bar */
.rx-bar { position: fixed; z-index: 3000; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(16,24,40,.16), 0 2px 6px rgba(16,24,40,.08); animation: rxBarIn .2s cubic-bezier(.3,1.4,.5,1); }
.rx-bar.rx-out { animation: rxBarOut .14s ease-in forwards; }
.rx-bar button { width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  animation: rxPop .34s calc(var(--i) * 28ms) cubic-bezier(.3,1.8,.5,1) backwards; transition: transform .2s cubic-bezier(.3,1.8,.5,1), background .15s; }
.rx-bar button:hover { transform: translateY(-4px) scale(1.28); background: var(--panel-2); }
.rx-bar button:active { transform: scale(.9); transition-duration: .06s; }
.rx-bar button.mine { background: var(--accent-soft); }
.rx-bar .rx-more { color: var(--muted); font-size: 0; }
.rx-bar .rx-more:hover { color: var(--accent); transform: rotate(90deg) scale(1.1); }
.rx-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
@keyframes rxBarIn { from { transform: scale(.7) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rxBarOut { to { transform: scale(.85); opacity: 0; } }
@keyframes rxPop { from { transform: scale(.2) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.rx-spark { position: fixed; z-index: 3001; font-size: 15px; pointer-events: none; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .rx-c, .rx-bar, .rx-bar button, .rx-e { animation: none !important; transition: none !important; } }
.rx-c:focus:not(:focus-visible), .rx-add:focus:not(:focus-visible), .rx-bar button:focus:not(:focus-visible) { outline: none; }
.th-rl, .th-at { white-space: nowrap; }
.dmenu .dm-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.dmenu button.dm-bad { color: var(--bad); }
.dmenu button.dm-bad:hover { background: var(--bad-soft); }
/* a picture still on its way up: shown from your computer straight away, with a small spinner */
.att-up { position: relative; display: inline-block; }
.att-up a { pointer-events: none; }
.att-up img { filter: saturate(.85) brightness(.92); transition: filter .3s; }
.att-spin { position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; border-radius: 50%;
  border: 2.2px solid rgba(255,255,255,.45); border-top-color: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.18); animation: attSpin .8s linear infinite; }
@keyframes attSpin { to { transform: rotate(360deg); } }
/* copying from the chat: only the words come along, not the buttons, ticks or reaction counts */
.msgs .rx, .msgs .m-acts, .msgs .rc, .msgs .rc-solo, .msgs .att-copy, .msgs .att-mark, .msgs .att-addcard, .msgs .m-edited, .msgs .day-sep { user-select: none; }
/* your status at the bottom: a small pill with a chevron, so it reads as something you can change */
#me-status { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin: 3px 0 0 -6px; padding: 2px 7px 2px 6px;
  border-radius: 999px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
#me-status:hover { text-decoration: none; background: var(--panel); border-color: var(--line-2); color: var(--text); }
#me-status .ms-chev { color: var(--faint); opacity: .7; transition: transform .2s, opacity .15s; }
#me-status:hover .ms-chev { opacity: 1; transform: translateY(1px); }
/* away: why + back in */
.st-pop.st-away { width: 300px; padding: 14px; gap: 6px; }
.aw-h { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.aw-l { font-size: 11.5px; font-weight: 600; color: var(--faint); margin-top: 6px; }
.aw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-chips button, .aw-time { border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.aw-chips button:hover, .aw-time:hover { border-color: var(--line-2); background: var(--panel-2); }
.aw-chips button.on, .aw-time.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-text); font-weight: 600; }
.aw-time { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; }
.aw-time input { border: 0; background: none; font: inherit; font-size: 12.5px; color: inherit; padding: 0; width: 84px; }
.aw-in { border: 1px solid var(--line); background: var(--panel-2); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text); margin-top: 2px; }
.aw-in:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.aw-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
/* outside someone's work hours */
.ol-off { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--faint);
  background: var(--panel-2); border-radius: 999px; padding: 1px 6px 1px 5px; vertical-align: 1px; }
/* Files: drop zone */
.fz { margin-top: 10px; border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 12px 14px; cursor: pointer; color: var(--muted);
  font-size: 13px; transition: border-color .18s, background .18s, color .18s, transform .18s cubic-bezier(.3,1.5,.5,1); }
.fz:hover, .fz:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 4%, transparent); outline: none; }
.fz-t { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 550; }
.fz-t u { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
.fz-drop { display: none; }
.drawer.dropping .fz { border-color: var(--accent); border-style: solid; background: var(--accent-soft); color: var(--accent-text); transform: scale(1.015); padding: 22px 14px; }
.drawer.dropping .fz .fz-idle { display: none; } .drawer.dropping .fz .fz-drop { display: inline; }
.drawer.dropping .fz svg { animation: fzBob .9s ease-in-out infinite; }
@keyframes fzBob { 50% { transform: translateY(-3px); } }
.fz-up { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.fz-f { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); background: var(--panel-2); border-radius: 8px; padding: 7px 10px; animation: rxBarIn .2s ease-out; }
.fz-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: attSpin .8s linear infinite; flex: none; }
.pick-list .pick-h { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; padding: 10px 10px 4px; }
.pick-list .pick-h:first-child { padding-top: 2px; }
/* With Client: our part is done, the client has it (teal: calm, "waiting on someone else") */
.st-client { background: color-mix(in srgb, #0f8a8a 14%, transparent); color: #0f8a8a; }
.due.client { color: #0f8a8a; font-weight: 600; }
.duepill.client { background: color-mix(in srgb, #0f8a8a 13%, transparent); color: #0f8a8a; }
.chip.client-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, #0f8a8a 12%, transparent); color: #0f8a8a; font-weight: 600; }
.btn.to-client { display: inline-flex; align-items: center; gap: 6px; }
.btn.to-client:hover { background: color-mix(in srgb, #0f8a8a 12%, transparent); color: #0f8a8a; }
.ks.info b { color: #0f8a8a; }
:root[data-theme="dark"] .st-client, :root[data-theme="dark"] .due.client, :root[data-theme="dark"] .duepill.client, :root[data-theme="dark"] .chip.client-chip, :root[data-theme="dark"] .ks.info b { color: #45c4c4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-client, :root:not([data-theme="light"]) .due.client, :root:not([data-theme="light"]) .duepill.client, :root:not([data-theme="light"]) .chip.client-chip, :root:not([data-theme="light"]) .ks.info b { color: #45c4c4; } }
.dl-acts button.busy { animation: dlPulse .8s ease-in-out infinite; pointer-events: none; }
@keyframes dlPulse { 50% { opacity: .35; transform: translateY(1px); } }
/* ---------- publishing ---------- */
.pf-b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--pc); color: #fff; font-size: 11px; font-weight: 800; flex: none; }
.pf-b.sm { width: 16px; height: 16px; border-radius: 5px; font-size: 9.5px; }
.pf-b.xs { width: 13px; height: 13px; border-radius: 4px; font-size: 8px; }
.pub-m { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.modal .box:has(.pub-m) { width: min(600px, calc(100vw - 32px)); }
.pub-m h2 { margin: 0; }
.pub-h { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pub-fa { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow: auto; }
.pub-opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.pub-opt:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.pub-opt span { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pub-opt b { font-size: 13px; overflow-wrap: anywhere; }
.aw-chips button .pf-b { margin-right: 6px; vertical-align: -3px; }
.pub-links { display: flex; flex-direction: column; gap: 6px; }
.pub-l { display: grid; grid-template-columns: 20px 90px 1fr; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; transition: transform .2s; }
.pub-l input { border: 1px solid var(--line); background: var(--panel-2); border-radius: 9px; padding: 8px 10px; font: inherit; font-weight: 400; font-size: 13px; color: var(--text); }
.pub-l input:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.pub-l.pop { animation: rxIn .45s cubic-bezier(.3,1.7,.5,1); }
.pub-sec { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin-top: 12px; }
.pub-go { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .15s, transform .15s; }
.pub-link:hover { border-color: var(--line-2); transform: translateY(-1px); }
.pub-asset { font-weight: 600; overflow-wrap: anywhere; }
.pub-st { font-weight: 700; } .pub-st.ok { color: var(--good); } .pub-st.q { color: #0f8a8a; }
.pub-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pub-admin { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pub-strip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px; background: color-mix(in srgb, #0f8a8a 9%, var(--panel)); border: 1px solid color-mix(in srgb, #0f8a8a 25%, transparent); }
.pub-strip.published { background: color-mix(in srgb, var(--good) 8%, var(--panel)); border-color: color-mix(in srgb, var(--good) 25%, transparent); }
.pub-ic { font-size: 18px; }
.pub-tx { flex: 1; display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); min-width: 0; } .pub-tx b { color: var(--text); font-size: 13.5px; }
.pub-tx a { color: inherit; }
.lnk { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
/* content calendar */
.cc-sum { font-size: 13px; color: var(--muted); }
.cc-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cc-nav { display: flex; align-items: center; gap: 8px; } .cc-nav h2 { margin: 0; min-width: 170px; text-align: center; }
.cc-f { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-f button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; min-height: 28px; }
.cc-f button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.cc-late { font-size: 12.5px; color: var(--warn); background: var(--warn-soft); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.cc-w, .cc-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cc-w span { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; padding: 0 6px 6px; }
.cc-d { min-height: 112px; border-radius: 12px; background: var(--panel-2); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cc-d.out { opacity: .45; } .cc-d.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cc-n { font-size: 12px; font-weight: 700; color: var(--muted); padding: 2px 4px; } .cc-d.today .cc-n { color: var(--accent-text); }
.cc-i { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 6px 7px; cursor: pointer; font: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.cc-i:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--line-2); }
.cc-i.queued { border-style: dashed; }
.cc-l { display: flex; align-items: center; min-height: 14px; } .cc-l .client-logo, .cc-l img { max-height: 14px; }
.cc-t { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.cc-p { display: flex; gap: 3px; } .cc-p em { font-style: normal; font-size: 10.5px; color: #0f8a8a; font-weight: 600; }
.cc-up { margin-top: 14px; } .cc-up h2 { margin-top: 0; }
.cc-row { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px; border-radius: 9px; font: inherit; text-align: left; cursor: pointer; }
.cc-row:hover { background: var(--panel-2); } .cc-row span { flex: 1; font-weight: 600; text-align: left; } .cc-row > :first-child { width: 90px; flex: none; display: flex; } .cc-row em { font-style: normal; color: var(--muted); font-size: 12.5px; }
@media (max-width: 900px) { .cc-d { min-height: 80px; } .cc-t { font-size: 11px; } }
/* ---------- client assets ---------- */
.ast { position: relative; transition: box-shadow .2s; }
.ast.dropping { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.ast-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ast-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ast-cats button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; transition: background .15s, border-color .15s; }
.ast-cats button span { font-size: 11px; color: var(--faint); font-weight: 600; }
.ast-cats button.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-text); font-weight: 600; }
.ast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ast-t { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); transition: transform .18s, box-shadow .18s, border-color .18s; }
.ast-t:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }
.ast-th { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; border: 0; padding: 0; cursor: pointer; background: var(--panel-2); overflow: hidden; position: relative; }
.ast-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ast-t:hover .ast-th img { transform: scale(1.04); }
.ast-th.ic .ficon, .ast-th.ic .ficon svg { width: 44px !important; height: 44px !important; display: grid; place-items: center; }
.ast-font { font: 700 34px/1 Georgia, serif; color: var(--muted); }
.ast-meta { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ast-meta b { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.ast-meta span { font-size: 11.5px; color: var(--faint); }
.ast-meta em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ast-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(6px); box-shadow: var(--shadow); opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
.ast-t:hover .ast-acts, .ast-t:focus-within .ast-acts { opacity: 1; transform: none; }
.ast-acts button { width: 28px; height: 28px; border: 0; background: none; border-radius: 7px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.ast-acts button:hover { background: var(--panel-2); color: var(--accent); } .ast-acts button.bad:hover { color: var(--bad); }
.ast-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 36px 16px; color: var(--muted); font-size: 13px; }
.ast-empty b { color: var(--text); font-size: 15px; }
.ast-drop { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1.5px dashed var(--line-2); border-radius: 12px; color: var(--muted); font-size: 13px; font-weight: 550; cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.ast-drop:hover, .ast.dropping .ast-drop { border-color: var(--accent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ast-or { text-align: center; font-size: 12px; color: var(--faint); margin: 4px 0; }
button.fz { width: 100%; background: none; font: inherit; }
/* project side: starred links / assets, compact with "show all" */
.side-more { display: block; width: calc(100% - 20px); margin: 0 10px 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.side-more:hover { background: var(--panel-2); color: var(--accent-text); }
.pl-star { position: absolute; right: 2px; top: 8px; border: 0; background: none; color: var(--faint); cursor: pointer; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; opacity: .55; transition: opacity .15s, color .15s, transform .2s cubic-bezier(.3,1.7,.5,1); }
.plink:hover .pl-star { opacity: 1; } .pl-star:hover { transform: scale(1.15); color: #e0a800; } .pl-star.on { color: #e0a800; opacity: 1; }
.plink.pinned::before { content: none; }
.plink .pl-t { padding-right: 28px; }
.all-links .al-body { max-height: 60vh; overflow: auto; display: flex; flex-direction: column; }
.side-assets { display: flex; flex-direction: column; padding: 4px 10px 8px; }
.sa { display: flex; align-items: center; gap: 6px; text-align: left; border: 0; background: none; padding: 7px 6px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); }
.sa:hover { background: var(--panel-2); } .sa i { font-style: normal; color: #e0a800; font-size: 12px; }
.ast-acts button.on { color: #e0a800; }
.ast-star { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--panel) 90%, transparent); color: #e0a800; font-size: 13px; box-shadow: var(--shadow); }
/* a new version is ready: MLQ waits here until it's in */
#upd-gate { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(12px); animation: updIn .3s ease; }
#upd-gate.out { opacity: 0; transition: opacity .3s; }
.ug-box { width: min(420px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: 0 20px 60px rgba(16,24,40,.18);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: rise .3s var(--ease-out) both; }
.ug-box b { font-size: 17px; } .ug-box span { font-size: 13px; color: var(--muted); } .ug-box .btn { margin-top: 8px; min-width: 160px; justify-content: center; }
.ug-box em { font-style: normal; font-size: 12px; color: var(--faint); }
#old-copy { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  background: var(--warn-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: 14px; padding: 10px 14px; font-size: 12.5px; box-shadow: var(--shadow); }
#old-copy span { color: var(--muted); }
/* seen by (group / card chats): tiny photos under the newest message each person has read */
.seen-by { display: flex; justify-content: flex-start; align-items: center; gap: 2px; margin-top: 4px; animation: rxIn .3s ease-out; }
.seen-by .av { width: 16px !important; height: 16px !important; font-size: 8px !important; box-shadow: 0 0 0 1.5px var(--panel); }
.seen-by .av img { width: 100%; height: 100%; }
.seen-by .sb-more { font-size: 10px; color: var(--faint); margin-left: 3px; }
/* chips with a platform badge: badge and words line up on one centre line */
.aw-chips button { display: inline-flex; align-items: center; gap: 7px; line-height: 1.2; }
.aw-chips button .pf-b { margin: 0; vertical-align: middle; }
.pub-who button .av { width: 20px !important; height: 20px !important; font-size: 9px !important; }
.pub-more { border-style: dashed !important; color: var(--muted) !important; }
.pub-who.hidden { display: none; }
/* For You columns: fold / unfold */
.fy-tog svg { transition: transform .32s cubic-bezier(.3,1.4,.5,1); }
.fy-tog { transition: background .15s, transform .15s; } .fy-tog:active { transform: scale(.88); }
.fy-row.fy-in { animation: fyIn .32s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes fyIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* content: tiles and Coming Up carry status, timing, platforms and the asset */
.cc-up { padding: 16px 18px; } .cc-up-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .cc-up-h h2 { margin: 0; } .cc-up-h span { font-size: 12px; color: var(--faint); font-weight: 700; }
.cc-row { display: grid; grid-template-columns: 90px 1fr auto auto 120px; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
.cc-row:last-child { border-bottom: 0; } .cc-row:hover { border-radius: 10px; }
.cc-row-l { display: flex; align-items: center; }
.cc-row-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .cc-row-m b { font-size: 13.5px; }
.cc-row-m > span { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cc-row-m q { color: var(--faint); font-style: italic; quotes: "“" "”"; }
.cc-when { font-style: normal; text-align: right; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.st-late .cc-when { color: var(--bad); } .st-ok .cc-when { color: var(--good); }
.cc-pf { display: inline-flex; gap: 3px; align-items: center; }
.pf-ghost { opacity: .45; filter: saturate(.6); }
.cc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #0f8a8a; flex: none; }
.st-ok .cc-dot { background: var(--good); } .st-late .cc-dot { background: var(--bad); }
.cc-asset { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, transform .15s; }
.cc-asset:hover { color: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.cc-l { justify-content: space-between; width: 100%; gap: 6px; } .cc-l .cc-asset { width: 18px; height: 18px; border-radius: 6px; }
.cc-i .cc-p { align-items: center; gap: 4px; width: 100%; flex-wrap: wrap; }
.cc-i .cc-p em { font-size: 10.5px; font-weight: 650; color: #0f8a8a; font-style: normal; }
.cc-i.st-ok .cc-p em { color: var(--good); } .cc-i.st-late .cc-p em { color: var(--bad); }
.cc-i .cc-pf { margin-left: auto; }
.cc-i.st-late { border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
@media (max-width: 900px) { .cc-row { grid-template-columns: 60px 1fr auto; } .cc-row .cc-pf, .cc-row .cc-asset { display: none; } }
.fy-t .fy-client { color: #0f8a8a; }
/* calendar post tile: a little more room to breathe */
.cc-i { gap: 7px; padding: 9px 10px 10px; border-radius: 11px; }
.cc-i .cc-l { min-height: 18px; margin-bottom: 1px; }
.cc-i .cc-t { line-height: 1.38; }
.cc-i .cc-p { margin-top: 2px; }
.cc-d { gap: 6px; }
/* sidebar footer: @username next to the full name (staff only) */
.me-txt b .me-handle { font-weight: 500; font-size: 11.5px; color: var(--faint); margin-left: 3px; letter-spacing: 0; }
/* folder uploads: progress cards, bottom right */
#fup-box { position: fixed; right: 22px; bottom: 90px; z-index: 120; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.fup { width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(0,0,0,.14); pointer-events: auto; animation: fupIn .28s cubic-bezier(.2,.8,.2,1); transition: opacity .35s, transform .35s; }
.fup.out { opacity: 0; transform: translateY(8px); }
.fup-h { display: flex; gap: 8px; align-items: center; color: var(--accent); }
.fup-h b { color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.fup-bar { height: 5px; border-radius: 9px; background: var(--panel-2); margin: 10px 0 7px; overflow: hidden; }
.fup-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 9px; transition: width .3s ease; }
.fup.ok .fup-bar i { background: var(--good); }
.fup.bad .fup-bar i { background: var(--bad); }
.fup-s { font-size: 12px; color: var(--muted); }
@keyframes fupIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
/* mark one notice read without opening it: a small tick that shows on hover */
.rd-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; flex: none; opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s, background .15s, color .15s, border-color .15s; }
.irow:hover .rd-btn, .np-i:hover .rd-btn, .fy-note:hover .rd-btn, .rd-btn:focus-visible { opacity: 1; transform: none; }
.rd-btn:hover { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
@media (hover: none) { .rd-btn { opacity: .8; transform: none; } }
.irow .rd-btn { position: absolute; right: 16px; top: 50%; margin-top: -14px; }
.irow:not(.read):hover .irow-t { color: transparent; }
.irow-t { transition: color .15s; }
.np-i .rd-btn { align-self: center; margin-left: auto; }
.fy-note { align-items: center; } .fy-note .fy-t { flex: 1; min-width: 0; }
.np-i.np-gone { opacity: 0; transform: translateX(14px); transition: opacity .22s, transform .22s; }
.fy-note.leaving { opacity: 0; transform: translateX(14px); transition: opacity .22s, transform .22s; }
/* workload: Today and Next 5 Days share one shape: a word + %, one bar, one quiet line */
.wl-tbl td.wl-today, .wl-tbl td.wl-next { min-width: 210px; width: 26%; }
.wc { display: flex; flex-direction: column; gap: 6px; max-width: 260px; }
.wc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wc-top em { font-style: normal; font-size: 11.5px; color: var(--faint); font-weight: 600; }
.wc-l { font-size: 12px; font-weight: 650; }
.wc-bar { height: 6px; border-radius: 9px; background: var(--panel-2); overflow: hidden; }
.wc-bar i { display: block; height: 100%; border-radius: 9px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.wc-segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.wc-segs .dseg { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; display: block; }
.wc-segs .dseg:first-child { border-radius: 9px 3px 3px 9px; } .wc-segs .dseg:last-child { border-radius: 3px 9px 9px 3px; }
.wc-segs .dseg b { display: block; height: 100%; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.wc-segs .dseg.leave { background: repeating-linear-gradient(45deg, var(--line-2), var(--line-2) 2px, transparent 2px, transparent 4px); }
.wc-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-good { background: var(--cap-low, var(--good)); } .t-info { background: var(--info); } .t-warn { background: var(--warn); } .t-bad { background: var(--bad); } .t-none { background: transparent; }
/* how busy today: one colour that deepens with the day */
.wc-l.tw-none { color: var(--faint); } .wc-l.tw-good, .wc-l.tw-info { color: var(--accent-text); } .wc-l.tw-warn, .wc-l.tw-bad { color: var(--accent); }
.wc-bar i.tw-good { background: color-mix(in srgb, var(--accent) 45%, transparent); } .wc-bar i.tw-info { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.wc-bar i.tw-warn, .wc-bar i.tw-bad { background: var(--accent); } .wc-bar i.tw-none { background: var(--line-2); }
.wc-bar.shimmer { background: linear-gradient(90deg, var(--panel-2), var(--line), var(--panel-2)); background-size: 200% 100%; animation: wcShim 1.2s linear infinite; }
@keyframes wcShim { to { background-position: -200% 0; } }
/* folded group headers (Work → People): what needs attention, at a glance */
.gsum { display: inline-flex; gap: 6px; margin-left: 10px; flex-wrap: wrap; }
.gs { font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.gs.late { background: var(--bad-soft); color: var(--bad); } .gs.today { background: var(--warn-soft); color: var(--warn); }
.gs.rev { background: var(--info-soft); color: var(--info); } .gs.ok { background: var(--good-soft); color: var(--good); }
details.group[open] .gsum { opacity: .55; }
/* publishing planned when the card was made: lighter, dashed, until it's sent to the Social team */
.pub-st.pl { color: var(--accent-text); }
.cc-i.st-pl { border-style: dashed; background: color-mix(in srgb, var(--accent) 4%, var(--panel)); }
.cc-i.st-pl .cc-dot, .cc-row.st-pl .cc-dot { background: var(--accent); opacity: .55; }
.cc-i.st-pl em, .cc-row.st-pl .cc-row-m > span { color: var(--accent-text); }
.pub-strip.planned { border-style: dashed; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.nt-pub { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.nt-pubx { display: flex; flex-direction: column; gap: 8px; animation: fupIn .22s ease; }
.nt-pday { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.nt-pday input { padding: 5px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; }
/* daily posting log: add the day's posts (title + pasted links), and the day's posts view */
.pst { display: flex; flex-direction: column; gap: 12px; }
.modal .box:has(.pst) { width: min(660px, calc(100vw - 32px)); }
.pst-h { display: flex; align-items: center; gap: 12px; } .pst-h h2 { margin: 0; } .pst-h > div { flex: 1; min-width: 0; }
.pst-day { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.pst-day input { padding: 5px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; }
.pst-list { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow-y: auto; padding: 2px; }
.pst-post { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; animation: fupIn .22s ease; }
.pst-post:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.pst-top { display: flex; align-items: center; gap: 8px; }
.pst-n { width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.pst-title { flex: 1; border: 0; background: transparent; font: inherit; font-weight: 650; font-size: 14px; color: var(--text); padding: 4px 2px; outline: none; }
.pst-x { border: 0; background: none; color: var(--faint); font-size: 18px; cursor: pointer; padding: 0 4px; } .pst-x:hover { color: var(--bad); }
.pst-links { width: 100%; resize: none; border: 1px dashed var(--line-2); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 12.5px; background: var(--panel-2); color: var(--text); min-height: 44px; }
.pst-links:focus { outline: none; border-style: solid; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--panel); }
.pst-found { display: flex; flex-wrap: wrap; gap: 6px; } .pst-found:empty { display: none; }
.pst-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none; padding: 3px 9px 3px 4px; border-radius: 99px; background: var(--panel-2); }
.pst-chip em { font-style: normal; color: var(--muted); font-weight: 500; }
.pst-warn { font-size: 11.5px; color: var(--warn); align-self: center; }
.pst-add { align-self: flex-start; border: 1px dashed var(--line-2); background: none; color: var(--accent-text); font: inherit; font-weight: 650; font-size: 13px; padding: 7px 14px; border-radius: 10px; cursor: pointer; }
.pst-add:hover { background: var(--accent-soft); border-color: transparent; }
.pst-foot { display: flex; align-items: center; gap: 8px; }
.pst-rows { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.pst-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.pst-row:last-child { border-bottom: 0; }
.pst-time { font-size: 12px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.pst-ln { display: inline-flex; gap: 5px; } .pst-ln a { text-decoration: none; transition: transform .12s; } .pst-ln a:hover { transform: translateY(-1px); }
.cc-batch .cc-t { display: flex; flex-direction: column; } .cc-at { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.nt-pubh { margin-top: -2px; }
.pj-pubs { display: flex; flex-direction: column; padding: 4px 8px; }
.pj-pub { display: grid; grid-template-columns: 78px 1fr auto; gap: 8px; align-items: center; text-align: left; border: 0; background: none; padding: 7px 6px; border-radius: 9px; cursor: pointer; font: inherit; color: var(--text); }
.pj-pub:hover { background: var(--panel-2); }
.pj-pd { font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; } .pj-pt { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-pb { display: inline-flex; gap: 3px; }
/* hidden means hidden, whatever layout the panel has */
.nt-pubx[hidden], .nt-pubh[hidden], .nt-pday span[hidden] { display: none !important; }
.pst-fmt { border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 650; padding: 3px 10px; border-radius: 99px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.pst-fmt:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent-text); }
.pst-fmt.set { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; } .pst-fmt.none { border-style: dashed; color: var(--faint); }
.pst-ft { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--panel-2); padding: 1px 7px; border-radius: 99px; }
.cc-fmt { display: block; margin-top: 3px; } .cc-fmt .fmt, .pub-fmt .fmt { font-size: 10.5px; padding: 1px 6px; }
.cc-row-m b .fmt { font-size: 10.5px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; }
.pub-fmt { margin: 2px 0 2px; }
/* card title: click to rename */
.dtitle { cursor: text; border-radius: 8px; transition: background .12s; margin-left: -6px; padding: 2px 6px; }
.dtitle:hover { background: var(--panel-2); }
.dtitle-in { width: 100%; font: inherit; font-weight: inherit; font-size: inherit; color: var(--text); border: 0; outline: none; background: var(--panel-2); border-radius: 8px; padding: 2px 6px; margin: -2px -6px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
/* calendar tile: who published it (or will), top right */
.cc-r { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.cc-who { display: inline-flex; align-items: center; margin-left: auto; }
.cc-who .av { width: 20px; height: 20px; font-size: 9px; box-shadow: 0 0 0 2px var(--panel); }
.cc-who .av + .av { margin-left: -6px; }
.cc-l .cc-who img { max-height: none; width: 100%; height: 100%; }
.pub-by { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 2px 0 4px; } .pub-by .av + b { margin-right: 6px; }
.p-del:hover { color: var(--bad); }
.past-m { margin-top: 14px; } .pm-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); }
.pm-row .who { opacity: .75; }
.fl-link { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 650; color: var(--muted); }
.fl-link input { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-weight: 500; }
/* ===== ZAP: drop everything. Its own hot red-orange, a pulsing bolt, impossible to miss ===== */
:root { --zap: #ff3d2e; --zap-2: #ff8a00; --zap-soft: #fff0ec; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --zap-soft: #3a1714; } }
:root[data-theme="dark"] { --zap-soft: #3a1714; }
@keyframes zapPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,61,46,0)); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(255,61,46,.65)); } }
@keyframes zapGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,61,46,.35); } 50% { box-shadow: 0 0 0 6px rgba(255,61,46,0); } }
.zap-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: linear-gradient(135deg, var(--zap), var(--zap-2)); padding: 2px 7px 2px 5px; border-radius: 99px; margin-right: 6px; vertical-align: 1px; }
.zap-pill svg { animation: zapPulse 1.6s ease-in-out infinite; }
.tc.is-zap { --tc: var(--zap) !important; background: linear-gradient(90deg, var(--zap-soft), transparent 60%); }
.tc.is-zap::before { width: 4px !important; background: linear-gradient(180deg, var(--zap), var(--zap-2)) !important; }
.kcard.is-zap { background: linear-gradient(180deg, var(--zap-soft), var(--panel) 70%); animation: zapGlow 2.4s ease-in-out infinite; }
/* the bar on every page */
.zapbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 18px; color: #fff;
  background: linear-gradient(100deg, var(--zap), var(--zap-2)); box-shadow: 0 6px 20px rgba(255,61,46,.28); }
.zapbar[hidden] { display: none; }
.zb-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); flex: none; }
.zb-ic svg { animation: zapPulse 1.4s ease-in-out infinite; }
.zb-tx { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; flex: 1; font-size: 13px; }
.zb-tx b { font-weight: 800; letter-spacing: .02em; } .zb-card { font-weight: 600; } .zb-meta { opacity: .85; font-size: 12px; }
.zb-more { font-size: 12px; font-weight: 700; background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 99px; cursor: pointer; }
.zb-open { border: 0; background: #fff; color: var(--zap); font: inherit; font-weight: 800; font-size: 12.5px; padding: 7px 14px; border-radius: 99px; cursor: pointer; }
.zb-open:hover { transform: translateY(-1px); }
/* on the card */
.zap-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; margin-bottom: 12px; color: #fff;
  background: linear-gradient(100deg, var(--zap), var(--zap-2)); animation: zapGlow 2.4s ease-in-out infinite; }
.zap-banner .zb-ic svg { animation: zapPulse 1.4s ease-in-out infinite; }
.zbn-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .zbn-tx b { font-weight: 800; }
.zbn-note { font-weight: 600; } .zbn-meta { font-size: 12px; opacity: .85; }
.zap-banner .btn { background: rgba(255,255,255,.22); color: #fff; border-color: transparent; }
.dmenu .dm-zap { color: var(--zap); font-weight: 700; } .dmenu .dm-zap svg { color: var(--zap); }
.zap-btn { background: linear-gradient(135deg, var(--zap), var(--zap-2)); color: #fff; border: 0; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.zap-btn:hover { filter: brightness(1.05); }
.zap-ask { display: flex; flex-direction: column; gap: 10px; } .zap-ask-h { display: flex; gap: 12px; align-items: center; } .zap-ask-h h2 { margin: 0; }
.zap-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--zap), var(--zap-2)); flex: none; }
/* the full-screen alert when one comes in */
.modal:has(.zap-pop) { background: rgba(60, 8, 4, .55); backdrop-filter: blur(3px); }
.modal .box:has(.zap-pop) { width: min(440px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.zap-pop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 26px 22px;
  background: radial-gradient(120% 70% at 50% 0%, var(--zap-soft), var(--panel) 70%); }
.zp-bolt { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--zap), var(--zap-2)); animation: zapGlow 1.6s ease-in-out infinite; margin-bottom: 4px; }
.zp-bolt svg { animation: zapPulse 1.2s ease-in-out infinite; }
.zp-k { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--zap); text-transform: uppercase; }
.zap-pop h2 { margin: 2px 0 0; font-size: 20px; }
.zp-note { margin: 4px 0 0; font-size: 14px; color: var(--text); background: var(--panel); border: 1px solid color-mix(in srgb, var(--zap) 25%, var(--line)); border-radius: 12px; padding: 10px 12px; }
.zp-by { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.zp-acts { display: flex; gap: 8px; margin-top: 10px; }
.zap-list-h { display: flex; align-items: center; gap: 8px; color: var(--zap); } .zap-list { display: flex; flex-direction: column; gap: 6px; }
.zl-row { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--text); }
.zl-row > span:last-child { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .zap-pill svg, .zb-ic svg, .zp-bolt, .zp-bolt svg, .kcard.is-zap, .zap-banner { animation: none !important; } }
/* the bar floats over the top of the content column (outside the grid), and the page makes room for it */
.zapbar { position: fixed; top: 0; left: var(--side); right: 0; }
.app.has-zap .main { padding-top: 76px; }
@media (max-width: 900px) { .zapbar { left: 0; } }

/* tenure: how long a freelancer works with us */
.ten-chip{display:inline-flex;align-items:center;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:600;background:var(--panel-2);color:var(--muted);white-space:nowrap;vertical-align:1px}
.ten-chip.ten-soon,.ten-chip.ten-last{background:rgba(245,158,11,.14);color:#b45309}
.ten-chip.ten-ended{background:rgba(239,68,68,.12);color:var(--bad)}
.ten-chip.ten-upcoming{background:var(--accent-soft);color:var(--accent)}
.ten-soon,.ten-last{color:#b45309}.ten-ended{color:var(--bad)}
.olc-ten{font-size:11.5px;color:var(--muted);margin:-2px 0 6px 15px}
.olc-ten.ten-soon,.olc-ten.ten-last{color:#b45309}.olc-ten.ten-ended{color:var(--bad)}
.olc-msg{display:block;width:100%;margin-top:8px;padding:7px;border:0;border-radius:9px;background:var(--panel-2);font:inherit;font-size:12px;font-weight:600;color:var(--text);cursor:pointer}
.olc-msg:hover{background:var(--accent-soft);color:var(--accent)}
.av[data-pc]{cursor:pointer}
.wc-segs .dseg.gone{background:transparent;border:1px dashed var(--line-2)}
.chip-btn{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;color:var(--muted)}
.chip-btn:hover{border-color:var(--accent);color:var(--accent)}
/* handover */
.ho{display:flex;flex-direction:column;gap:12px;max-width:560px}
.ho-h{display:flex;gap:14px;align-items:flex-start}.ho-h h2{margin:0 0 4px}
.ho-g{display:flex;flex-wrap:wrap;gap:8px}
.ho-k{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;cursor:pointer}
.ho-list{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:4px}
.ho-r{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;font-size:12.5px;border-radius:8px}
.ho-r+.ho-r{border-top:1px solid var(--line)}
.ho-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ho-r.ok .ho-n::before{content:"✓ ";color:var(--good);font-weight:700}
.ho-r.bad .ho-n{color:var(--bad)}
.olc-l span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsec-h{display:flex;align-items:center;justify-content:space-between}
.desc-ed{font-size:11.5px;font-weight:600;text-transform:none;letter-spacing:0;opacity:.7}.desc-ed:hover{opacity:1}
.desc-in{width:100%;box-sizing:border-box;resize:vertical;min-height:90px;padding:12px 14px;border:1px solid var(--accent);border-radius:12px;background:var(--panel-2);color:var(--text);font:inherit;font-size:13.5px;line-height:1.5;outline:none}
.add-brief{border:1px dashed var(--line-2);background:none;border-radius:10px;padding:7px 12px;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer}.add-brief:hover{border-color:var(--accent);color:var(--accent)}
.who .n{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.who .n .chip,.who .n .ten-chip{margin:0;vertical-align:0}
.who .r .ten-chip{margin-left:6px;vertical-align:1px;font-size:10.5px}
.biz-gone{margin-top:16px}
.biz-gone .biz-off td{opacity:.6}
.biz-gone .biz-ic img,.biz-gone .biz-ic b{filter:grayscale(1);opacity:.7}
.biz-gone .biz-o .av{filter:grayscale(1)}
.biz-tbl{table-layout:fixed;width:100%}.biz-tbl td{overflow:hidden;text-overflow:ellipsis}
.biz-key{display:inline-flex;margin-left:6px;color:var(--muted);vertical-align:-1px}
.cred{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel-2);display:flex;flex-direction:column;gap:8px}
.cred-h{display:flex;align-items:center;gap:6px;font-size:13px}.cred-h svg{color:var(--muted)}
.cred-row{display:flex;gap:4px;align-items:center}.cred-row input{flex:1;min-width:0}
/* client channels (Content tab) */
.ch-card{margin-top:16px}
.ch-list{display:flex;flex-direction:column}
.ch-c{display:flex;align-items:center;gap:16px;padding:10px 4px}.ch-c+.ch-c{border-top:1px solid var(--line)}
.ch-cl{width:120px;flex:none;display:flex;align-items:center}
.ch-items{display:flex;flex-wrap:wrap;gap:8px}
.ch-i{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;font-size:12.5px;font-weight:600;transition:.12s}
.ch-i:hover{border-color:var(--accent)}
.ch-key{display:inline-flex;color:var(--muted)}
.ch-cp{width:24px;height:24px;opacity:.55}.ch-i:hover .ch-cp{opacity:1}
.f > span.cred-row{display:flex;align-items:center;gap:4px;margin:6px 0 0;font-size:inherit;font-weight:400;color:inherit}.cred-row .icon-btn{flex:none}
/* hover card grows to fit a long e-mail (up to a point), then trims with … */
.ol-card{width:max-content;min-width:256px;max-width:min(360px,calc(100vw - 24px))}
/* "New": a freelancer's first 2 days on MLQ */
.new-pill{display:inline-flex;align-items:center;margin-left:6px;padding:0 6px;height:16px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#047857;background:rgba(16,185,129,.14);vertical-align:2px;line-height:1}
.new-spark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:50%;color:#d97706;background:rgba(245,158,11,.15);vertical-align:-3px;animation:sparkIn .5s ease-out}
.new-spark svg{filter:drop-shadow(0 0 2px rgba(245,158,11,.35))}
@keyframes sparkIn{from{transform:scale(.4) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
/* sparkle + "New" */
.new-spark{width:auto;height:18px;padding:0 7px 0 5px;gap:3px;border-radius:999px}
.new-spark b{font-size:10.5px;font-weight:700;letter-spacing:.01em;color:#b45309;line-height:1}
/* "New": a little sprout, icon only (a freelancer's first 2 days) */
.new-spark{width:20px;height:20px;padding:0;gap:0;border-radius:7px;color:#16a34a;background:rgba(34,197,94,.14)}
.new-spark svg{filter:none}
.new-spark{width:21px;height:21px;border-radius:7px;color:#15803d;background:rgba(34,197,94,.15)}
/* starred links: the link chip stops before the star (long names trim with …) */
.plink{padding-right:34px}
.plink .dlink{max-width:100%;min-width:0;overflow:hidden}
.plink .dlink .dname{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "New" sprout: a touch smaller */
.new-spark{width:18px;height:18px;border-radius:6px;vertical-align:-3px}
.new-spark svg{width:12px;height:12px}
/* Add Assets: one row per asset */
.ar-m{min-width:min(680px,calc(100vw - 48px))}
.ar-head,.ar-row{display:grid;grid-template-columns:1.2fr .8fr 1.6fr 28px;gap:8px;align-items:center}
.ar-head{font-size:11.5px;font-weight:600;color:var(--muted);padding:0 2px}
.ar-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;padding:2px}
.ar-row .aw-in{margin:0;min-width:0}
.ar-row select.aw-in{padding-right:8px}
.ar-x{opacity:.5}.ar-row:hover .ar-x{opacity:1}
.ar-more{align-self:flex-start;border:1px dashed var(--line-2);background:none;border-radius:10px;padding:7px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.ar-more:hover{border-color:var(--accent);color:var(--accent)}
/* project page: a wider side column (links, assets, ideas) */
@media (min-width: 1101px) { .proj-body { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (min-width: 1500px) { .proj-body { grid-template-columns: minmax(0, 1fr) 400px; } }
.ar-m{min-width:0}
.modal .box:has(.ar-m){width:min(760px,calc(100vw - 32px));max-width:none}
/* sprout: ~10% smaller, centred on the name's line */
.new-spark{width:16px;height:16px;border-radius:5px;margin-left:5px;vertical-align:middle;position:relative;top:-1px}
.new-spark svg{width:11px;height:11px}
.ol-t > b .new-spark{margin-left:-2px;align-self:center;top:0}
/* GIF button beside the emoji button in the message box */
.cp-gif span{display:inline-flex;align-items:center;justify-content:center;height:17px;padding:0 4px;border:1.6px solid currentColor;border-radius:5px;font-size:9.5px;font-weight:800;letter-spacing:.03em;line-height:1}
/* cancel a picture that's still uploading after you pressed send */
.att-up{position:relative}
.att-cancel{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:12px;cursor:pointer;display:grid;place-items:center;z-index:2}
.att-cancel:hover{background:rgba(220,38,38,.9)}
.ol-t .new-spark,.olc-top .new-spark{color:#15803d;background:rgba(34,197,94,.15);opacity:1;display:inline-flex;font-size:inherit}