/* DEDICATED Team: the studio's look (black, bone, one orange) at app density. */

:root {
  --ink: #0A0A0B;
  --ink-2: #111113;
  --ink-3: #18181B;
  --ink-4: #202024;
  --rule: #2A2A2F;
  --rule-2: #36363C;
  --bone: #F2F1EC;
  --soft: #D6D5D0;
  --muted: #8E8D88;
  --accent: #FF5B23;
  --ok: #3DDC84;
  --warn: #F5C542;
  --danger: #E5484D;
  --discord: #5865F2;

  --display: "Archivo", "Arial Black", sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ink); color: var(--bone); font: 14px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--ink); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
svg { display: block; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  border: 2px solid var(--bone); background: var(--ink); color: var(--bone);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s, opacity 0.15s;
}
.btn:hover:not(:disabled) { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--bone); }
.btn:active:not(:disabled) { transform: none; box-shadow: none; }
.btn:disabled { opacity: 0.5; cursor: progress; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--ghost { border-color: var(--rule-2); }
.btn--danger { background: var(--danger); border-color: var(--danger); color: var(--ink); }
.btn--discord { background: var(--discord); border-color: var(--discord); color: #fff; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 11px; }
.btn--block { width: 100%; height: 46px; font-size: 13px; }
.icon-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; color: var(--muted); transition: color 0.15s, background 0.15s; }
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn:hover { color: var(--bone); background: var(--ink-4); }
.link-btn { color: var(--muted); font-size: 13px; font-weight: 500; }
.link-btn:hover { color: var(--accent); }
kbd { font: 600 11px var(--mono); padding: 1px 6px; border: 1px solid var(--rule-2); color: var(--muted); }

/* ---------- Gate: login, setup, unlock ---------- */

.gate { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.gate__card { width: min(420px, 100%); padding: 36px 32px; border: 2px solid var(--bone); background: var(--ink-2); box-shadow: 10px 10px 0 var(--accent); animation: rise 0.5s var(--ease) both; }
.gate__brand, .side__brand { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 18px; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; }
.gate__brand { margin-bottom: 28px; }
.gate__brand span, .side__brand span { font-family: var(--mono); font-stretch: normal; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.gate h1 { margin: 0 0 10px; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 34px; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; }
.gate p { margin: 0 0 22px; font-size: 15px; }
.gate__form { display: flex; flex-direction: column; gap: 14px; }
.gate__error, .form-error { margin: 0; padding: 10px 12px; border: 2px solid var(--accent); background: rgba(255, 91, 35, 0.1); color: var(--bone); font-size: 14px; }
.gate__note { padding: 10px 12px; border: 2px solid var(--rule-2); color: var(--soft); }
.gate .link-btn { display: block; margin: 18px auto 0; }
.fld { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 13px; color: var(--soft); }
.fld input { height: 44px; padding: 0 12px; background: var(--ink); border: 2px solid var(--rule-2); color: var(--bone); font-size: 15px; transition: border-color 0.15s; }
.fld input:focus { outline: none; border-color: var(--accent); }
.shake { animation: shake 0.4s ease; }

/* ---------- App shell ---------- */

.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100vh; }
.side { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; border-right: 1px solid var(--rule); background: var(--ink-2); }
.side__brand { padding: 4px 8px 14px; }
.side__new { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin-bottom: 10px; border: 1px solid var(--rule-2); background: var(--ink); font-weight: 600; transition: border-color 0.15s, background 0.15s; }
.side__new:hover { border-color: var(--accent); }
.side__new kbd { margin-left: auto; }
.side__icon { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; }
.side__icon svg { width: 16px; height: 16px; }
.side__nav { display: flex; flex-direction: column; gap: 2px; }
.side__link { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; color: var(--soft); font-weight: 500; border-left: 2px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.side__link:hover { background: var(--ink-3); color: var(--bone); }
.side__link.is-active { background: var(--ink-4); color: var(--bone); border-left-color: var(--accent); }
.side__foot { margin-top: auto; }
.side__me { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; text-align: left; transition: background 0.15s; }
.side__me:hover { background: var(--ink-3); }
.side__me-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.side__me-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__me-text small { color: var(--muted); font-size: 12px; }

.main { overflow: auto; outline: none; }
.vhead { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--rule); background: rgba(10, 10, 11, 0.92); backdrop-filter: blur(8px); }
.vhead h1 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: 18px; }
.vhead__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--rule-2); color: var(--soft); font-size: 13px; transition: border-color 0.15s, color 0.15s; }
.chip-btn svg { width: 12px; height: 12px; }
.chip-btn:hover { border-color: var(--muted); color: var(--bone); }
.chip-btn.is-on { border-color: var(--accent); color: var(--bone); }

.loading { padding: 40px 24px; color: var(--muted); }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 80px 24px; color: var(--muted); animation: rise 0.4s var(--ease) both; }
.empty h2 { margin: 0; color: var(--bone); font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: 22px; }
.empty p { margin: 0 0 12px; max-width: 42ch; }
.empty__icon svg { width: 36px; height: 36px; color: var(--accent); }

/* ---------- Status and priority icons ---------- */

.st { width: 15px; height: 15px; flex: none; }
.st--backlog { color: var(--muted); }
.st--todo { color: var(--soft); }
.st--in_progress { color: var(--warn); }
.st--in_review { color: var(--discord); }
.st--done { color: var(--ok); }
.st--canceled { color: var(--muted); }
.pr { width: 15px; height: 15px; flex: none; color: var(--soft); }
.pr--1 { color: var(--accent); }

/* ---------- Avatars and labels ---------- */

.av { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: var(--ink-4); color: var(--soft); font-weight: 700; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av--empty { width: 18px; height: 18px; border: 1px dashed var(--muted); background: none; }
.label { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border: 1px solid var(--rule-2); font-size: 12px; color: var(--soft); white-space: nowrap; }
.label i, .label-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.label-dot { display: inline-block; }

/* ---------- Board ---------- */

.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 12px; padding: 16px 24px 24px; min-height: calc(100vh - 56px); overflow-x: auto; align-items: start; }
.col { display: flex; flex-direction: column; min-height: 200px; border: 1px solid transparent; transition: border-color 0.15s, background 0.15s; }
.col.is-over { border-color: var(--accent); background: rgba(255, 91, 35, 0.04); }
.col__head { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px; }
.col__name { font-weight: 700; }
.col__count { color: var(--muted); font-size: 12px; }
.col__head .icon-btn { margin-left: auto; }
.col__list { display: flex; flex-direction: column; gap: 8px; padding: 4px; flex: 1; }
.col__empty { padding: 18px 10px; border: 1px dashed var(--rule); color: var(--muted); font-size: 13px; text-align: center; }

.card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border: 1px solid var(--rule); background: var(--ink-2);
  cursor: grab; user-select: none;
  animation: rise 0.3s var(--ease) both;
  transition: border-color 0.15s, transform 0.15s var(--ease), box-shadow 0.15s var(--ease), opacity 0.15s;
}
.card:hover { border-color: var(--rule-2); background: var(--ink-3); }
.card:active { cursor: grabbing; }
.card.is-dragging { opacity: 0.35; }
.card__top { display: flex; align-items: center; justify-content: space-between; }
.card__id { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.card__title { font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.card__title.is-locked, .row__title.is-locked { color: var(--muted); font-style: italic; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card__meta:empty { display: none; }
.meta { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.meta svg { width: 13px; height: 13px; }
.meta--date.is-late { color: var(--accent); }
.drop-line { height: 2px; background: var(--accent); margin: -5px 0; box-shadow: 0 0 0 2px rgba(255, 91, 35, 0.25); }

/* ---------- List (my issues) ---------- */

.groups { padding: 8px 0 40px; }
.group__head { position: sticky; top: 56px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 24px; background: var(--ink-2); border-bottom: 1px solid var(--rule); font-weight: 700; }
.row { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 24px; border-bottom: 1px solid var(--rule); transition: background 0.12s; animation: rise 0.3s var(--ease) both; }
.row:hover { background: var(--ink-2); }
.row__id { font-family: var(--mono); font-size: 12px; color: var(--muted); width: 64px; flex: none; }
.row__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.row__meta { display: flex; align-items: center; gap: 6px; }

/* ---------- Issue page ---------- */

.vhead--issue { gap: 8px; }
.crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 500; }
.crumb svg { width: 14px; height: 14px; }
.crumb:hover { color: var(--bone); }
.crumb__sep { color: var(--rule-2); }
.crumb__id { font-family: var(--mono); font-size: 13px; }
.issue { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: calc(100vh - 56px); }
.issue__main { padding: 32px clamp(20px, 4vw, 56px) 60px; max-width: 860px; width: 100%; transition: box-shadow 0.6s; }
.issue__main.saved { animation: saved 0.9s ease; }
.issue__title, .issue__desc { display: block; width: 100%; resize: none; overflow: hidden; border: 0; background: none; padding: 4px 0; outline: none; }
.issue__title { font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; }
.issue__desc { margin-top: 12px; min-height: 60px; font-size: 15px; line-height: 1.6; color: var(--soft); }
.issue__title:focus, .issue__desc:focus { box-shadow: inset 2px 0 0 var(--accent); padding-left: 10px; transition: padding 0.15s; }
.issue__props { border-left: 1px solid var(--rule); padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; background: var(--ink-2); }
.props__row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; min-height: 36px; }
.props__label { color: var(--muted); font-size: 13px; }
.props__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; line-height: 1.7; }

.prop-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.prop { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; max-width: 100%; padding: 0 9px; border: 1px solid var(--rule-2); background: var(--ink); color: var(--soft); font-size: 13px; text-align: left; transition: border-color 0.15s, color 0.15s; }
.prop:hover { border-color: var(--muted); color: var(--bone); }
.prop svg { width: 14px; height: 14px; }
.prop--date { cursor: pointer; }
.prop--date input { border: 0; background: none; color: inherit; font-size: 13px; color-scheme: dark; width: 120px; }
.issue__props .prop { border-color: transparent; background: none; padding: 0 6px; width: 100%; flex-wrap: wrap; }
.issue__props .prop:hover { border-color: var(--rule-2); background: var(--ink-3); }

/* Thread */
.thread { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--rule); }
.thread__title { margin: 0 0 16px; font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: 16px; }
.thread__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.msg-group { display: flex; flex-direction: column; gap: 8px; }
.msg { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--rule); background: var(--ink-2); animation: rise 0.3s var(--ease) both; }
.msg.is-new { animation: arrive 1.2s var(--ease) both; }
.msg__main { flex: 1; min-width: 0; }
.msg__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.msg__actions { margin-left: auto; display: flex; gap: 12px; opacity: 0; transition: opacity 0.15s; }
.msg:hover .msg__actions, .msg:focus-within .msg__actions { opacity: 1; }
.msg__body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.msg__body.is-deleted, .msg__body.is-locked { color: var(--muted); font-style: italic; }
.replies { display: flex; flex-direction: column; gap: 8px; margin-left: 40px; padding-left: 14px; border-left: 2px solid var(--rule); }
.reply-slot { margin-left: 54px; }
.act { display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--muted); font-size: 13px; }
.act b { color: var(--soft); font-weight: 600; }
.act__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-2); flex: none; }

.composer { display: flex; gap: 12px; align-items: flex-start; }
.composer--reply { margin-top: 4px; }
.composer__box { flex: 1; border: 1px solid var(--rule-2); background: var(--ink-2); transition: border-color 0.15s; }
.composer__box:focus-within { border-color: var(--accent); }
.composer__input { display: block; width: 100%; min-height: 54px; resize: none; overflow: hidden; border: 0; background: none; padding: 12px 14px; outline: none; line-height: 1.5; }
.composer--edit .composer__input { border: 1px solid var(--accent); background: var(--ink); }
.composer__bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 8px 8px 14px; }
.composer--edit .composer__bar { padding: 8px 0 0; }
.hint { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--muted); font-size: 12px; }
.hint svg { width: 12px; height: 12px; }

/* ---------- Team ---------- */

.team { display: flex; flex-direction: column; gap: 16px; padding: 24px; max-width: 880px; }
.panel { padding: 20px; border: 1px solid var(--rule); background: var(--ink-2); animation: rise 0.35s var(--ease) both; }
.panel--quiet { background: none; }
.panel h2 { margin: 0 0 6px; font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: 16px; }
.panel p { margin: 0 0 14px; }
.add-member { display: flex; gap: 8px; }
.inline-input { flex: 1; max-width: 320px; height: 32px; padding: 0 10px; border: 1px solid var(--rule-2); background: var(--ink); outline: none; }
.inline-input:focus { border-color: var(--accent); }
.members { display: flex; flex-direction: column; margin-top: 10px; }
.member { display: grid; grid-template-columns: 36px minmax(0, 1fr) 120px 170px; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); }
.member__name { display: flex; flex-direction: column; min-width: 0; }
.member__name b, .member__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member > :last-child { justify-self: end; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--rule-2); font-size: 12px; color: var(--muted); white-space: nowrap; }
.pill--ok { border-color: var(--ok); color: var(--ok); }
.pill--warn { border-color: var(--warn); color: var(--warn); }

/* ---------- Popover menu ---------- */

.pop { position: fixed; z-index: 60; max-height: 340px; display: flex; flex-direction: column; border: 1px solid var(--rule-2); background: var(--ink-3); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55); animation: pop 0.16s var(--ease) both; }
.menu-filter { height: 36px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--rule-2); background: none; outline: none; }
.menu-list { overflow: auto; padding: 4px; }
.menu-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 0 8px; text-align: left; color: var(--soft); }
.menu-row:hover, .menu-row:focus-visible { background: var(--ink-4); color: var(--bone); outline: none; }
.menu-row__icon { display: inline-grid; place-items: center; }
.menu-row__icon svg { width: 14px; height: 14px; }
.menu-row__label { flex: 1; }
.menu-row__check { color: var(--accent); width: 12px; }
.menu-row--create { color: var(--accent); }
.menu-empty { padding: 10px; color: var(--muted); }

/* ---------- Modal ---------- */

.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; padding: 10vh 16px 16px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); animation: fade 0.2s ease both; }
.overlay.is-leaving { animation: fade 0.2s ease reverse both; }
.modal { width: min(460px, 100%); border: 2px solid var(--bone); background: var(--ink-2); box-shadow: 8px 8px 0 var(--accent); animation: pop 0.25s var(--ease) both; }
.modal--wide { width: min(640px, 100%); }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.modal__head h2 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: 16px; }
.modal__body { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.modal__body p { margin: 0; color: var(--soft); }
.modal__actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; }
.big-input { height: 44px; border: 0; border-bottom: 1px solid var(--rule-2); background: none; font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 20px; outline: none; }
.big-input:focus { border-bottom-color: var(--accent); }
.desc-input { min-height: 90px; resize: none; overflow: hidden; border: 1px solid var(--rule-2); background: var(--ink); padding: 10px 12px; outline: none; line-height: 1.5; }
.desc-input:focus { border-color: var(--accent); }

/* ---------- Motion ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes slide { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes arrive { 0% { opacity: 0; transform: translateY(8px); border-color: var(--accent); } 40% { opacity: 1; transform: none; border-color: var(--accent); } 100% { border-color: var(--rule); } }
@keyframes saved { 0% { box-shadow: inset 3px 0 0 transparent; } 30% { box-shadow: inset 3px 0 0 var(--ok); } 100% { box-shadow: inset 3px 0 0 transparent; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Small screens ---------- */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .side { flex-direction: row; align-items: center; gap: 4px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; }
  .side__brand { padding: 0 8px 0 2px; }
  .side__brand span, .side__new kbd, .side__me-text, .side__me .side__icon { display: none; }
  .side__new { margin: 0; height: 34px; }
  .side__nav { flex-direction: row; }
  .side__link { height: 34px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .side__link.is-active { border-bottom-color: var(--accent); }
  .side__foot { margin: 0 0 0 auto; }
  .issue { grid-template-columns: 1fr; }
  .issue__props { border-left: 0; border-top: 1px solid var(--rule); order: -1; }
  .vhead { padding: 0 16px; }
  .board { padding: 12px 16px 24px; grid-auto-columns: minmax(260px, 85vw); scroll-snap-type: x mandatory; }
  .col { scroll-snap-align: start; }
  .member { grid-template-columns: 36px minmax(0, 1fr); }
  .member > :nth-child(3), .member > :nth-child(4) { grid-column: 2; justify-self: start; }
}

/* ======================================================================
   Teams, filters, sub-tasks, projects, cycles, inbox, mentions, palette
   ====================================================================== */

.small { font-size: 12px; }
.team-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--c); flex: none; }
.team-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* Sidebar */
.side { overflow-y: auto; }
.side__top { display: flex; align-items: center; justify-content: space-between; }
.side__top .side__brand { padding-bottom: 14px; }
.side__search { margin: 0 4px 14px 0; }
.side__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { min-width: 20px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 700; animation: pop 0.25s var(--ease) both; }
.side__section { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 4px; padding: 0 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.side__teams { display: flex; flex-direction: column; gap: 2px; }
.side__key { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.side__sub { display: none; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 30px; color: var(--muted); font-size: 13px; border-left: 2px solid transparent; }
.side__sub:hover { color: var(--bone); background: var(--ink-3); }
.side__sub.is-active { color: var(--bone); background: var(--ink-4); border-left-color: var(--accent); }
.side__team.is-open .side__sub, .side__team:hover .side__sub { display: flex; }
.side__sub .side__icon svg { width: 13px; height: 13px; }

/* View heads */
.vhead__team { display: flex; align-items: center; gap: 10px; }
.vhead__team .muted { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.vhead h1 .count-pill { margin-left: 10px; }
.count-pill { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; background: var(--accent); color: var(--ink); font: 700 12px var(--body); vertical-align: middle; }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs > span:last-child { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Filters */
.filters { position: sticky; top: 56px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 24px; border-bottom: 1px solid var(--rule); background: rgba(10, 10, 11, 0.92); backdrop-filter: blur(8px); }
.search { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--rule-2); background: var(--ink); min-width: 220px; transition: border-color 0.15s; }
.search:focus-within { border-color: var(--accent); }
.search svg { width: 14px; height: 14px; color: var(--muted); }
.search input { flex: 1; border: 0; background: none; outline: none; font-size: 13px; }
.search input::-webkit-search-cancel-button { filter: invert(1); }
.board { min-height: calc(100vh - 108px); }

/* Cards */
.card__top { gap: 8px; }
.card__parent { display: inline-flex; align-items: center; gap: 3px; margin-right: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.card__parent svg { width: 11px; height: 11px; }
.card__top .card__id + .av, .card__top .card__id + .card__parent { margin-left: 0; }
.card__top > .av { margin-left: auto; }
.meta--project { max-width: 140px; }
.meta--project svg { flex: none; }
.meta--project { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Task page */
.props__sep { height: 1px; margin: 8px 0; background: var(--rule); }
.bell svg { width: 14px; height: 14px; }
.bell.is-on { color: var(--bone); }
.subtasks { margin-top: 28px; }
.subtasks__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.subtasks__head h2 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: 16px; }
.subtasks__head .icon-btn { margin-left: auto; }
.subtasks__list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.subtask { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; border-bottom: 1px solid var(--rule); transition: background 0.12s; animation: rise 0.3s var(--ease) both; }
.subtask:hover { background: var(--ink-2); }
.subtask__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subtask__title.is-done { color: var(--muted); text-decoration: line-through; }
.subtasks__input { width: 100%; height: 38px; margin-top: 6px; padding: 0 10px; border: 1px dashed var(--rule-2); background: none; outline: none; font-size: 14px; transition: border-color 0.15s; }
.subtasks__input:focus { border-style: solid; border-color: var(--accent); }

/* Progress bars */
.progress { position: relative; display: inline-block; width: 100px; height: 6px; background: var(--ink-4); overflow: hidden; flex: none; }
.progress i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--ok); transform-origin: left; animation: grow 0.8s var(--ease) both; }
.progress--sm { width: 60px; height: 4px; }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }

/* Mentions */
.mention { padding: 0 3px; background: rgba(88, 101, 242, 0.18); color: #B5BCFF; font-weight: 600; }
.mention--me { background: rgba(255, 91, 35, 0.18); color: var(--accent); }
.composer__box, .composer--edit { position: relative; }
.mention-box { position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 20; min-width: 240px; padding: 4px; border: 1px solid var(--rule-2); background: var(--ink-3); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55); animation: pop 0.14s var(--ease) both; }
.issue__main .mention-box { bottom: auto; top: 100%; }
.mention-opt { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; text-align: left; }
.mention-opt.is-active, .mention-opt:hover { background: var(--ink-4); }
.issue__main { position: relative; }

/* Projects */
.plist { padding: 8px 0 40px; }
.prow { display: grid; grid-template-columns: minmax(0, 2.2fr) 150px 90px minmax(0, 1.2fr) 100px 170px; align-items: center; gap: 14px; min-height: 52px; padding: 0 24px; border-bottom: 1px solid var(--rule); transition: background 0.12s; animation: rise 0.3s var(--ease) both; }
.prow:not(.prow--head):hover { background: var(--ink-2); }
.prow--head { min-height: 36px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); animation: none; }
.prow__name { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
.prow__name svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.prow__team, .prow__lead { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.prow__progress { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.pstatus { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--rule-2); font-size: 12px; white-space: nowrap; }
.pstatus::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pstatus--started::before { background: var(--warn); }
.pstatus--completed::before { background: var(--ok); }
.pstatus--paused::before { background: var(--discord); }
.pstatus--canceled { color: var(--muted); }
.project__head { padding: 28px 24px 22px; border-bottom: 1px solid var(--rule); }
.project__name { margin: 0 0 8px; font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: 30px; line-height: 1.1; }
.project__desc { margin: 0 0 14px; max-width: 70ch; color: var(--soft); white-space: pre-wrap; }
.project__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.prop--static { cursor: default; }
.prop--static:hover { border-color: var(--rule-2); color: var(--soft); }
.project__progress { display: flex; align-items: center; gap: 12px; }
.project__progress .progress { width: min(320px, 60vw); height: 8px; }
.empty--inline { padding: 32px 24px; }

/* Cycles */
.cycles { display: flex; flex-direction: column; gap: 10px; padding: 16px 24px 40px; }
.cycle { border: 1px solid var(--rule); background: var(--ink-2); animation: rise 0.3s var(--ease) both; }
.cycle--now { border-color: var(--accent); }
.cycle--past { opacity: 0.75; }
.cycle__head { list-style: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 52px; padding: 8px 16px; cursor: pointer; }
.cycle__head::-webkit-details-marker { display: none; }
.cycle__name { font-family: var(--display); font-stretch: 112%; font-weight: 900; font-size: 16px; }
.cycle__tag { padding: 2px 8px; border: 1px solid var(--rule-2); font-size: 12px; color: var(--soft); }
.cycle--now .cycle__tag { border-color: var(--accent); color: var(--accent); }
.cycle__progress { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12px; }
.cycle__body { border-top: 1px solid var(--rule); }
.cycle__body .groups { padding: 0; }
.cycle__body .group__head { position: static; }
.cycle__empty { margin: 0; padding: 16px; }
.cycle__add { display: block; padding: 12px 16px; }

/* Inbox */
.notes { display: flex; flex-direction: column; padding: 8px 0 40px; }
.note { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 24px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background 0.12s, opacity 0.18s, transform 0.18s; animation: rise 0.3s var(--ease) both; }
.note:hover { background: var(--ink-2); }
.note.is-leaving { opacity: 0; transform: translateX(16px); }
.note__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.note.is-unread .note__dot { background: var(--accent); }
.note__main { flex: 1; min-width: 0; }
.note__title { display: flex; gap: 10px; align-items: baseline; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note:not(.is-unread) .note__title { color: var(--soft); font-weight: 500; }
.note__what { font-size: 13px; color: var(--muted); }
.note__what b { color: var(--soft); font-weight: 600; }
.note__x { opacity: 0; }
.note:hover .note__x, .note:focus-within .note__x { opacity: 1; }

/* Members and team admin */
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.member__teams { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.teams-list { display: flex; flex-direction: column; margin-top: 10px; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.team-row .chip-btn { margin-left: auto; }
.form-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.form-row p { flex: 1; margin: 0 0 6px; }
.fld--inline { flex: none; }
.key-input { width: 90px; max-width: none; height: 36px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.fld-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--soft); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 28px; height: 28px; background: var(--c); border: 2px solid transparent; outline: 1px solid var(--rule-2); transition: transform 0.15s var(--ease); }
.swatch:hover { transform: scale(1.1); }
.swatch.is-on { border-color: var(--ink); outline: 2px solid var(--bone); }
.pick-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.pick-member { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--rule-2); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pick-member input { accent-color: var(--accent); }
.pick-member.is-on { border-color: var(--accent); background: rgba(255, 91, 35, 0.08); }
.check-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
.check-inline input { accent-color: var(--accent); }

/* Command palette */
.overlay--pal { place-items: start center; padding-top: 14vh; }
.pal { width: min(620px, 100%); border: 2px solid var(--bone); background: var(--ink-2); box-shadow: 8px 8px 0 var(--accent); animation: pop 0.2s var(--ease) both; }
.pal__search { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.pal__search svg { width: 16px; height: 16px; color: var(--muted); }
.pal__input { flex: 1; height: 54px; border: 0; background: none; outline: none; font-size: 16px; }
.pal__list { max-height: 50vh; overflow: auto; padding: 6px; }
.pal__group { padding: 10px 10px 4px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pal__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; text-align: left; color: var(--soft); border-left: 2px solid transparent; }
.pal__row.is-active { background: var(--ink-4); color: var(--bone); border-left-color: var(--accent); }
.pal__icon { display: inline-grid; place-items: center; width: 16px; flex: none; }
.pal__icon svg { width: 15px; height: 15px; }
.pal__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shortcuts { gap: 4px; }
.shortcut { display: flex; align-items: center; gap: 14px; min-height: 34px; border-bottom: 1px solid var(--rule); }
.shortcut kbd { min-width: 96px; text-align: center; }

@media (max-width: 1240px) {
  .prow { grid-template-columns: minmax(0, 2fr) 110px minmax(0, 1fr) 150px; }
  .prow > :nth-child(3), .prow > :nth-child(5) { display: none; }
}

@media (max-width: 900px) {
  .side__section, .side__teams { display: none; }
  .side__top .side__brand { padding-bottom: 0; }
  .side__search { margin: 0; }
  .filters { top: 0; position: static; padding: 10px 16px; }
  .search { min-width: 0; flex: 1 1 100%; }
  .prow { grid-template-columns: minmax(0, 1fr) auto; }
  .prow > :nth-child(n + 3) { display: none; }
  .prow--head { display: none; }
  .note { padding: 10px 16px; }
  .cycles { padding: 12px 16px 32px; }
}


/* ======================================================================
   Polish: motion only where it means something, and finishing touches
   ====================================================================== */

* { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
body { text-rendering: optimizeLegibility; }
.card__id, .row__id, .col__count, .badge, .count-pill, .progress + span, .cycle__tag, .pal kbd, .crumb__id { font-variant-numeric: tabular-nums; }

/* Entrance animations play on navigation only (#view.enter); live refreshes redraw silently. */
.card, .row, .subtask, .msg, .note, .prow, .panel, .cycle, .empty, .group { animation: none; }
.enter .vhead, .enter .filters { animation: fadeDown 0.28s var(--ease) both; }
.enter .board, .enter .groups, .enter .plist, .enter .cycles, .enter .notes, .enter .team, .enter .project, .enter .issue { animation: fadeUp 0.32s var(--ease) 0.04s both; }
.enter .card { animation: rise 0.38s var(--ease) both; animation-delay: calc(var(--i, 0) * 24ms + 60ms); }
.enter .row, .enter .prow, .enter .note, .enter .subtask { animation: rise 0.3s var(--ease) 0.08s both; }
.enter .panel, .enter .cycle, .enter .empty { animation: rise 0.35s var(--ease) 0.06s both; }
.msg.is-new { animation: arrive 1.2s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes popOut { to { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes beat { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(61, 220, 132, 0); } }

/* Cards glide to their new place when moved (View Transitions); only named elements animate. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(*) { animation-duration: 0.3s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

/* Cards, buttons and menus react to the pointer */
.card { transition: border-color 0.15s, background 0.15s, transform 0.18s var(--ease), box-shadow 0.18s var(--ease), opacity 0.15s; }
.card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.card.is-dragging { opacity: 0.4; transform: rotate(1.2deg) scale(0.98); }
.prop, .chip-btn, .icon-btn, .side__new { transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s var(--ease); }
.prop:active, .chip-btn:active, .side__new:active { transform: scale(0.97); }
.menu-row.is-checked .menu-row__check { animation: pop 0.22s var(--ease) both; }
.col { transition: border-color 0.2s, background 0.2s; }
.drop-line { animation: grow 0.18s var(--ease) both; transform-origin: left; }

/* Sidebar: the active marker slides in, team sub-items fade in */
.side__link { position: relative; border-left: 0; padding-left: 12px; }
.side__link::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--accent); transform: scaleY(0); transition: transform 0.25s var(--ease); }
.side__link.is-active::before { transform: none; }
.side__team.is-open .side__sub, .side__team:hover .side__sub { animation: fadeUp 0.2s var(--ease) both; }
.badge.pop { animation: pop 0.3s var(--ease) both; }
.live { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--muted); align-self: center; transition: background 0.3s; }
.live.is-on { background: var(--ok); animation: beat 2.4s ease-in-out infinite; }
.live.is-off { background: var(--warn); }

/* Toasts: icon, optional undo, and a bar that shows how long it stays */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; flex-direction: column; gap: 8px; }
.toast { position: relative; display: flex; align-items: center; gap: 10px; max-width: 380px; min-height: 44px; padding: 10px 14px; overflow: hidden; border: 1px solid var(--rule-2); background: var(--ink-3); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); animation: slide 0.32s var(--ease) both; }
.toast__icon { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; background: var(--ok); color: var(--ink); font: 800 11px var(--body); }
.toast--error .toast__icon { background: var(--accent); }
.toast__text { flex: 1; min-width: 0; }
.toast__action { flex: none; padding: 4px 8px; border: 1px solid var(--rule-2); font-size: 12px; font-weight: 700; color: var(--bone); transition: border-color 0.15s, color 0.15s; }
.toast__action:hover { border-color: var(--accent); color: var(--accent); }
.toast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ok); transform-origin: left; animation: drain var(--d, 4s) linear forwards; }
.toast--error .toast__bar { background: var(--accent); }
.toast.is-leaving { opacity: 0; transform: translateX(24px); transition: opacity 0.26s, transform 0.26s var(--ease); }

/* Loading skeletons */
.skel { display: block; max-width: 100%; background: linear-gradient(90deg, var(--ink-3) 25%, var(--ink-4) 50%, var(--ink-3) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel-gap { height: 22px; }
.skel-list { display: flex; flex-direction: column; padding: 12px 24px; }
.skel-row { display: flex; align-items: center; gap: 14px; height: 44px; border-bottom: 1px solid var(--rule); }
.issue__main .skel { margin-bottom: 12px; }
.issue__props .props__row .skel { margin: 0; }

.overlay.is-leaving .modal, .overlay.is-leaving .pal { animation: popOut 0.18s ease both; }
.gate__card { animation: rise 0.5s var(--ease) both; }
:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .skel, .live.is-on { animation: none !important; }
}

/* ---------- Work views: display options, selection, bulk bar ---------- */

.item { position: relative; }
.tick { position: absolute; left: 6px; top: 6px; z-index: 2; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--rule-2); background: var(--ink-2); color: transparent; font-size: 11px; font-weight: 800; opacity: 0; cursor: pointer; transition: opacity 0.12s, background 0.12s, border-color 0.12s, color 0.12s; }
.row .tick { position: static; flex: none; margin-left: -6px; opacity: 0; }
.item:hover .tick, .item.is-selected .tick, .item.is-focus .tick { opacity: 1; }
.tick[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.item.is-selected { background: rgba(255, 91, 35, 0.08); border-color: var(--accent); }
.item.is-focus:not(.is-selected) { border-color: var(--rule-2); background: var(--ink-3); }
.row.is-focus:not(.is-selected) { box-shadow: inset 2px 0 var(--accent); }
.card.is-selected { transform: none; }

.bulk { position: fixed; left: 50%; bottom: 22px; z-index: 55; display: flex; align-items: center; gap: 2px; padding: 6px; border: 1px solid var(--rule-2); background: var(--ink-3); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55); transform: translateX(-50%); animation: bulk-in 0.28s var(--ease) both; }
.bulk.is-leaving { opacity: 0; transform: translate(-50%, 12px); transition: opacity 0.18s, transform 0.18s var(--ease); }
.bulk__count { padding: 0 12px 0 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.bulk__btn { height: 30px; padding: 0 10px; font-size: 13px; font-weight: 500; color: var(--soft); transition: background 0.12s, color 0.12s; }
.bulk__btn:hover { background: var(--ink-4); color: var(--bone); }
.bulk__btn--danger:hover { color: var(--danger); }
.bulk__x { width: 30px; height: 30px; color: var(--muted); }
.bulk__x:hover { color: var(--bone); background: var(--ink-4); }
@keyframes bulk-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

.drop-line { height: 2px; margin: 2px 0; background: var(--accent); pointer-events: none; }
.group.is-over { background: rgba(255, 91, 35, 0.04); }
.group__list:empty, .group__empty { color: var(--muted); }
.group__empty { padding: 12px 24px; font-size: 13px; }
.group__head .icon-btn { margin-left: auto; opacity: 0; transition: opacity 0.12s; }
.group__head:hover .icon-btn, .col__head:hover .icon-btn { opacity: 1; }
.groups--work { padding-top: 0; }
.filters__spacer { flex: 1; }

.disp { display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.disp__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
.disp__label { color: var(--muted); font-size: 13px; }
.disp__select { height: 28px; max-width: 150px; padding: 0 6px; border: 1px solid var(--rule-2); background: var(--ink-2); font-size: 13px; }
.disp__reset { align-self: flex-end; margin-top: 4px; }
.segmented { display: inline-flex; border: 1px solid var(--rule-2); }
.segmented button { height: 28px; padding: 0 12px; font-size: 13px; color: var(--muted); transition: background 0.12s, color 0.12s; }
.segmented button.is-on { background: var(--ink-4); color: var(--bone); }
.disp__row--toggle input { accent-color: var(--accent); width: 16px; height: 16px; }

.meta--blocked { color: var(--danger); }
.meta--blocking { color: var(--warn); }
.meta--estimate { padding: 0 5px; border: 1px solid var(--rule-2); border-radius: 10px; color: var(--soft); }
.meta--date.is-soon { color: var(--warn); }
.prop--date.is-late, .prop--date.is-late input { color: var(--accent); }
.prop--date.is-soon, .prop--date.is-soon input { color: var(--warn); }

.tabs { display: flex; gap: 2px; padding: 0 24px; border-bottom: 1px solid var(--rule); }
.tab { position: relative; padding: 10px 12px; color: var(--muted); font-weight: 500; transition: color 0.15s; }
.tab:hover { color: var(--bone); }
.tab.is-on { color: var(--bone); }
.tab.is-on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--accent); }

/* ---------- Favorites and views in the sidebar ---------- */

.side__favs:empty { display: none; }
.side__hint { margin: 4px 12px; color: var(--muted); font-size: 12px; }
.fav.is-on { color: var(--warn); }
.fav svg { width: 15px; height: 15px; }

/* ---------- Task page: relations, reactions, resolved threads ---------- */

.relations { margin-top: 28px; }
.relations--empty { margin-top: 12px; }
.relations--empty .subtasks__head { margin-bottom: 0; }
.relations--empty h2 { font-size: 13px; color: var(--muted); font-weight: 700; }
.relation { gap: 12px; }
.relation__kind { width: 92px; flex: none; color: var(--muted); font-size: 12px; }
.relation__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.relation__x { opacity: 0; transition: opacity 0.12s; }
.relation:hover .relation__x { opacity: 1; }
.blocked-banner { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--danger); background: rgba(229, 72, 77, 0.08); color: var(--danger); font-size: 13px; font-weight: 500; }
.blocked-banner svg { width: 14px; height: 14px; }
.ident-link { font-family: var(--mono); font-size: 0.92em; color: var(--accent); }
.ident-link:hover { text-decoration: underline; }

.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.react { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 1px solid var(--rule-2); border-radius: 12px; font-size: 13px; transition: border-color 0.12s, background 0.12s, transform 0.15s var(--ease); }
.react span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.react:hover { border-color: var(--muted); transform: translateY(-1px); }
.react.is-on { border-color: var(--accent); background: rgba(255, 91, 35, 0.1); }
.react.is-on span { color: var(--bone); }
.react--add { width: 24px; padding: 0; justify-content: center; color: var(--muted); opacity: 0; }
.react--add svg { width: 13px; height: 13px; }
.msg:hover .react--add, .react--add:focus-visible, .reactions:has(.react.is-on) .react--add { opacity: 1; }
.emoji-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 8px; }
.emoji { height: 38px; font-size: 20px; transition: background 0.12s, transform 0.15s var(--ease); }
.emoji:hover { background: var(--ink-4); transform: scale(1.15); }

.resolved { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 12px; border: 1px solid var(--rule); color: var(--soft); font-size: 13px; text-align: left; transition: border-color 0.12s, background 0.12s; }
.resolved:hover { border-color: var(--rule-2); background: var(--ink-2); }
.resolved svg { width: 14px; height: 14px; }
.resolved .muted { margin-left: auto; }
.msg-group--resolved-open { opacity: 0.8; }

/* ---------- Team settings ---------- */

.team-settings { display: flex; flex-direction: column; gap: 10px; }
.fld.fld--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.fld--row .fld-label { margin: 0; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.check--block { align-items: flex-start; }
.check--block small { display: block; }
.check--block input { margin-top: 3px; }
.card .tick { left: auto; right: 10px; top: 10px; }
.card:hover .card__top > .av, .card.is-selected .card__top > .av, .card.is-focus .card__top > .av { opacity: 0; }
body:has(#bulk) .toasts { bottom: 76px; }
.relation { gap: 8px; }
.relation__kind { width: 70px; }

/* ---------- Onboarding ---------- */

.steps { display: flex; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.steps__dot { flex: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 3px solid var(--rule-2); font-size: 11px; font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); transition: border-color 0.4s var(--ease), color 0.3s; }
.steps__dot span { display: none; }
.steps__dot.is-done { border-top-color: var(--ok); color: var(--soft); }
.steps__dot.is-now { border-top-color: var(--accent); color: var(--bone); }
.fld small { font-weight: 400; line-height: 1.4; }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.meter i { height: 4px; background: var(--ink-4); transition: background 0.3s; }
.meter[data-level="1"] i:nth-child(-n+1) { background: var(--danger); }
.meter[data-level="2"] i:nth-child(-n+2) { background: var(--warn); }
.meter[data-level="3"] i:nth-child(-n+3) { background: var(--ok); }
.meter[data-level="4"] i { background: var(--ok); }
.tour { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.tour li { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--rule); background: var(--ink); animation: rise 0.5s var(--ease) both; animation-delay: calc(var(--i) * 80ms + 120ms); }
.tour__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: var(--accent); }
.tour__icon svg { width: 20px; height: 20px; }
.tour div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.tour b { color: var(--bone); font-size: 14px; }
.gate__card:has(.tour) { width: min(480px, 100%); }

/* ---------- Pass 2: triage, templates, milestones, updates, health ---------- */

.triage { padding: 8px 0 40px; }
.triage-row { display: flex; align-items: center; gap: 16px; padding: 10px 24px; border-bottom: 1px solid var(--rule); animation: rise 0.3s var(--ease) both; }
.triage-row:hover { background: var(--ink-2); }
.triage-row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.triage-row__main .muted { font-size: 12px; white-space: nowrap; }
.triage-row__actions { display: flex; gap: 6px; flex: none; }
.triage-banner { display: flex; align-items: center; gap: 10px; padding: 10px 24px; border-bottom: 1px solid var(--accent); background: rgba(255, 91, 35, 0.08); font-size: 13px; }
.triage-banner span { margin-right: auto; }
.tpl-row { display: flex; }
.side__sub .badge { margin-left: auto; }

.health { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.health i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.health--on_track { color: var(--ok); }
.health--at_risk { color: var(--warn); }
.health--off_track { color: var(--danger); }
.prow__status { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }

.milestones, .updates { margin: 28px 24px 0; }
.milestone { gap: 12px; }
.milestone .progress { width: 80px; }
.milestone-add { display: flex; gap: 8px; margin-top: 6px; }
.milestone-add .subtasks__input { margin-top: 0; flex: 1; }
.milestone-add .inline-input { height: 38px; }
.update { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--rule); animation: rise 0.3s var(--ease) both; }
.update header { display: flex; align-items: center; gap: 10px; }
.update p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.updates .composer__box { margin-bottom: 8px; }
.invite-link { width: 100%; font-family: var(--mono); font-size: 12px; }

/* ---------- Settings ---------- */

.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; max-width: 980px; padding: 24px; }
.settings__nav { position: sticky; top: 72px; align-self: start; display: flex; flex-direction: column; gap: 18px; }
.settings__group { display: flex; flex-direction: column; gap: 2px; }
.settings__title { margin-bottom: 4px; padding: 0 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.settings__link { position: relative; padding: 7px 10px; color: var(--soft); font-weight: 500; transition: background 0.15s, color 0.15s; }
.settings__link:hover { background: var(--ink-3); color: var(--bone); }
.settings__link.is-on { background: var(--ink-4); color: var(--bone); box-shadow: inset 2px 0 var(--accent); }
.settings__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; animation: rise 0.3s var(--ease) both; }
.settings__body .panel { margin: 0; }
.section__bar { display: flex; justify-content: flex-end; }
.profile-head { display: flex; align-items: center; gap: 14px; padding: 8px 0 16px; }
.profile-head div { display: flex; flex-direction: column; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; border-top: 1px solid var(--rule); }
.setting__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setting__text span { font-size: 13px; }
.setting__control { flex: none; }
.setting__control .inline-input { width: 260px; }
.setting__foot { display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--rule); }
@media (max-width: 760px) {
  .settings { grid-template-columns: 1fr; gap: 16px; }
  .settings__nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .setting { flex-direction: column; align-items: stretch; gap: 10px; }
  .setting__control .inline-input { width: 100%; }
}

/* ---------- Chat ---------- */

.chat { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: calc(100vh - 57px); border-top: 1px solid var(--rule); }
.chat__channels { display: flex; flex-direction: column; gap: 8px; padding: 12px 8px; border-right: 1px solid var(--rule); overflow-y: auto; }
.chat__channels > .link-btn { align-self: flex-start; padding: 6px 10px; }
.chat__channel-list { display: flex; flex-direction: column; gap: 2px; }
.chat__channel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; color: var(--soft); font-weight: 500; transition: background 0.15s, color 0.15s; }
.chat__channel:hover { background: var(--ink-3); color: var(--bone); }
.chat__channel.is-on { background: var(--ink-4); color: var(--bone); box-shadow: inset 2px 0 var(--accent); }
.chat__new-slot .inline-input { width: 100%; }
.chat__pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat__list { flex: 1; overflow-y: auto; padding: 16px 24px 8px; display: flex; flex-direction: column; }
.chat__older { align-self: center; margin-bottom: 12px; }
.chat__day { align-self: center; margin: 16px 0 8px; padding: 2px 12px; border: 1px solid var(--rule); color: var(--muted); font-size: 12px; }
.chat__empty { margin: auto; }
.chat__msg { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 6px 8px; margin: 0 -8px; transition: background 0.12s; }
.chat__msg:not(.is-grouped) { margin-top: 10px; }
.chat__msg:hover { background: var(--ink-2); }
.chat__main header { display: flex; align-items: baseline; gap: 8px; }
.chat__main header .muted { font-size: 12px; }
.chat__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__time { align-self: center; color: transparent; font-size: 11px; font-family: var(--mono); text-align: right; transition: color 0.12s; }
.chat__msg:hover .chat__time { color: var(--muted); }
.chat__actions { display: flex; gap: 10px; opacity: 0; transition: opacity 0.12s; }
.chat__msg:hover .chat__actions, .chat__msg:focus-within .chat__actions { opacity: 1; }
.chat__edit { display: flex; flex-direction: column; gap: 8px; }
.chat__edit > div { display: flex; gap: 6px; }
.chat__composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px 24px 16px; border-top: 1px solid var(--rule); }
.chat__input { flex: 1; min-height: 40px; max-height: 160px; padding: 9px 12px; resize: none; border: 1px solid var(--rule-2); background: var(--ink-2); outline: none; line-height: 1.4; transition: border-color 0.15s; }
.chat__input:focus { border-color: var(--accent); }
@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .chat__channels { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--rule); }
  .chat__channel-list { flex-direction: row; flex-wrap: wrap; }
}
.chat__group { margin: 14px 10px 4px; color: var(--muted); font-size: 13px; }
button.chat__channel { text-align: left; width: 100%; }

/* ---------- Chat dock ---------- */

.side__chat { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule); }
.side__chat + .side__foot { margin-top: 0; }
.dock__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; font-weight: 600; color: var(--bone); }
.dock__head:hover { background: var(--ink-3); }
.dock__list { display: flex; flex-direction: column; max-height: 190px; overflow-y: auto; }
.dock__row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; text-align: left; color: var(--soft); transition: background 0.12s, color 0.12s; }
.dock__row:hover { background: var(--ink-3); color: var(--bone); }
.dock__row.is-on { background: var(--ink-4); color: var(--bone); }
.dock__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock { position: fixed; left: 244px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; width: 340px; height: 440px; border: 1px solid var(--rule-2); background: var(--ink-2); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5); animation: rise 0.25s var(--ease) both; }
.dock__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.dock__bar span { display: flex; gap: 12px; }
.dock__messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.dock__empty { margin: auto; }
.dock__msg { display: flex; flex-direction: column; max-width: 88%; align-self: flex-start; }
.dock__msg:not(.is-grouped) { margin-top: 8px; }
.dock__msg.is-mine { align-self: flex-end; align-items: flex-end; }
.dock__who { font-size: 12px; font-weight: 600; }
.dock__msg p { margin: 0; padding: 6px 10px; background: var(--ink-4); white-space: pre-wrap; overflow-wrap: anywhere; }
.dock__msg.is-mine p { background: rgba(255, 91, 35, 0.18); }
.dock__composer { padding: 10px 12px; border-top: 1px solid var(--rule); }
.dock__composer .chat__input { width: 100%; }
@media (max-width: 900px) { .dock { left: 8px; right: 8px; width: auto; } }
.dock__new { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--rule-2); background: var(--ink-3); font-weight: 600; transition: border-color 0.15s, background 0.15s; }
.dock__new:hover { border-color: var(--accent); background: var(--ink-4); }
.chat__newbox { margin-top: auto; }

/* ---------- Chat icons, new chat window ---------- */

.dock__label { display: inline-flex; align-items: center; gap: 8px; }
.dock__label svg, .chat__send svg, .chat__newchannel svg { width: 15px; height: 15px; }
.chat__send { display: inline-flex; align-items: center; gap: 6px; }
.chat__ico { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--muted); flex: none; }
.chat__ico svg { width: 15px; height: 15px; }
.chat__channel { gap: 10px; justify-content: flex-start; }
.chat__channel .team-dot { margin: 0 6px; }
.chat__channel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__newbox { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.chat__newchannel { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; align-self: flex-start; }
.chat__act { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--muted); transition: color 0.12s, background 0.12s; }
.chat__act:hover { color: var(--bone); background: var(--ink-4); }
.chat__act svg { width: 14px; height: 14px; }
.chat__actions { align-self: start; gap: 2px; }
.dock__bar .icon-btn svg { width: 15px; height: 15px; }
.dock__bar span { gap: 4px; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-chips:empty { display: none; }
.pick-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--accent); background: rgba(255, 91, 35, 0.1); font-size: 13px; }
.pick-chip svg { width: 11px; height: 11px; }
.pick-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; border: 1px solid var(--rule); }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--rule); transition: background 0.12s; }
.pick-row:last-child { border-bottom: 0; }
.pick-row:hover { background: var(--ink-3); }
.pick-row.is-on { background: rgba(255, 91, 35, 0.08); }
.pick-row__name { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pick-row__name .muted { font-size: 12px; }
.pick-row__tick { width: 18px; height: 18px; color: var(--accent); }
.pick-row__tick svg { width: 16px; height: 16px; }
.pick-empty { padding: 16px; text-align: center; margin: 0; }
.modal__actions .btn svg { width: 15px; height: 15px; }

/* ---------- Chat motion, typing, receipts ---------- */

@keyframes msg-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes msg-in-own { from { opacity: 0; transform: translate(18px, 10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes bounce-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes fly { 0% { transform: none; } 45% { transform: translate(8px, -8px) scale(0.8); opacity: 0; } 55% { transform: translate(-8px, 8px) scale(0.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pane-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes dock-in { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes tick-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }

.chat__msg.is-new { animation: msg-in 0.42s var(--ease) both; }
.chat__msg.is-new.is-mine { animation-name: msg-in-own; }
.dock__msg.is-new { animation: msg-in 0.38s var(--ease) both; }
.dock__msg.is-new.is-mine { animation-name: msg-in-own; }
.chat.is-entering .chat__pane { animation: pane-in 0.35s var(--ease) both; }
.chat__channel { animation: rise 0.3s var(--ease) both; }
.chat__channel-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat__channel-typing { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 12px; }
.chat__send.is-flying svg { animation: fly 0.4s var(--ease); }
.chat__send { transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s; }
.chat__send:active { transform: scale(0.94); }
.dock { animation: dock-in 0.3s var(--ease) both; transition: opacity 0.18s, transform 0.18s var(--ease); }
.dock.is-leaving { opacity: 0; transform: translateY(16px) scale(0.97); }

.chat__typing { display: flex; align-items: center; gap: 8px; max-height: 0; padding: 0 24px; overflow: hidden; opacity: 0; color: var(--muted); font-size: 13px; transition: max-height 0.25s var(--ease), opacity 0.25s, padding 0.25s; }
.chat__typing.is-on { max-height: 30px; padding: 4px 24px; opacity: 1; }
.dock .chat__typing { padding-left: 14px; padding-right: 14px; }
.typing__dots { display: inline-flex; align-items: center; gap: 3px; }
.typing__dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: bounce-dot 1.2s ease-in-out infinite; }
.typing__dots i:nth-child(2) { animation-delay: 0.15s; }
.typing__dots i:nth-child(3) { animation-delay: 0.3s; }

.receipt { align-self: flex-end; display: inline-flex; align-items: center; gap: 5px; margin: 3px 4px 6px; color: var(--muted); font-size: 12px; }
.receipt svg { width: 15px; height: 12px; animation: tick-pop 0.3s var(--ease) both; }
.receipt--seen { color: var(--accent); }
.receipt--delivered { color: var(--soft); }

.chat__act.is-done { color: var(--ok); }
.chat__act.is-done svg { animation: tick-pop 0.3s var(--ease) both; }
.dock__bubble { display: flex; align-items: flex-start; gap: 4px; }
.dock__msg.is-mine .dock__bubble { flex-direction: row-reverse; }
.dock__bubble .chat__act { opacity: 0; margin-top: 4px; }
.dock__bubble:hover .chat__act, .dock__bubble .chat__act.is-done { opacity: 1; }

.pick-list.is-fresh .pick-row { animation: rise 0.3s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.pick-row { transition: background 0.12s, padding-left 0.18s var(--ease); }
.pick-row:hover { padding-left: 16px; }
.pick-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; }
.pick-ico .team-dot { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) {
  .chat__msg.is-new, .dock__msg.is-new, .dock, .chat__channel, .typing__dots i, .receipt svg { animation: none !important; }
}

/* ---------- Chat bubbles, composer, attachments ---------- */

.chat__msg { display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 2px 0; background: none; }
.chat__msg:hover { background: none; }
.chat__msg:not(.is-grouped) { margin-top: 10px; }
.chat__msg.is-mine { flex-direction: row-reverse; }
.chat__avatar-gap { width: 32px; flex: none; }
.bubble { position: relative; display: flex; flex-direction: column; gap: 4px; max-width: min(72%, 560px); padding: 8px 12px 6px; border-radius: 16px 16px 16px 4px; background: var(--ink-4); }
.chat__msg.is-grouped .bubble { border-radius: 16px 16px 16px 4px; }
.chat__msg.is-mine .bubble, .dock__msg.is-mine .bubble { border-radius: 16px 16px 4px 16px; background: var(--accent); color: var(--ink); }
.chat__msg.is-mine .bubble .muted, .dock__msg.is-mine .bubble .muted { color: rgba(10, 10, 11, 0.65); }
.chat__msg.is-mine .mention, .dock__msg.is-mine .mention { background: rgba(10, 10, 11, 0.18); color: var(--ink); }
.bubble__name { font-size: 12px; color: var(--accent); }
.bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble__time { align-self: flex-end; font-size: 11px; font-family: var(--mono); opacity: 0.6; }
.chat__actions { align-self: center; }
.chat__msg.is-mine .ident-link { color: var(--ink); text-decoration: underline; }

.chat__composer, .dock__composer { display: flex; flex-direction: column; gap: 8px; padding: 12px 24px 16px; border-top: 1px solid var(--rule); transition: background 0.15s; }
.dock__composer { padding: 10px 12px; }
.chat__composer.is-drop, .dock__composer.is-drop { background: rgba(255, 91, 35, 0.08); }
.chat__row { display: flex; align-items: flex-end; gap: 8px; }
.chat__row .chat__input { flex: 1; }
.chat__plus, .chat__send { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; transition: transform 0.15s var(--ease), background 0.15s, border-color 0.15s, color 0.15s; }
.chat__plus { border: 1px solid var(--rule-2); background: var(--ink-3); color: var(--soft); }
.chat__plus:hover { border-color: var(--accent); color: var(--bone); transform: rotate(90deg); }
.chat__plus svg { width: 18px; height: 18px; }
.chat__send { background: var(--accent); color: var(--ink); }
.chat__send:hover { transform: translateY(-2px); }
.chat__send:active { transform: scale(0.92); }
.chat__send svg { width: 18px; height: 18px; }
.chat__send.is-flying svg { animation: fly 0.4s var(--ease); }

.attach-strip { display: none; flex-wrap: wrap; gap: 8px; }
.attach-strip.is-on { display: flex; }
.attach-chip { display: flex; align-items: center; gap: 8px; max-width: 240px; padding: 4px 4px 4px 4px; border: 1px solid var(--rule-2); background: var(--ink-3); animation: rise 0.25s var(--ease) both; }
.attach-chip img { width: 36px; height: 36px; object-fit: cover; }
.attach-chip__icon { display: grid; place-items: center; width: 36px; height: 36px; background: var(--ink-4); }
.attach-chip__icon svg { width: 16px; height: 16px; }
.attach-chip__name { display: flex; flex-direction: column; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.atts { display: flex; flex-direction: column; gap: 6px; }
.att { display: flex; align-items: center; gap: 10px; text-align: left; }
.att--image { display: block; width: min(320px, 100%); min-height: 80px; padding: 0; overflow: hidden; border-radius: 10px; background: rgba(10, 10, 11, 0.25); cursor: zoom-in; }
.att--image img { display: block; width: 100%; max-height: 320px; object-fit: cover; animation: rise 0.3s var(--ease) both; }
.att__skeleton { display: block; height: 140px; background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.12), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.att--video, .att--file { padding: 8px 10px; border-radius: 10px; background: rgba(10, 10, 11, 0.25); transition: background 0.15s; }
.att--video:hover, .att--file:hover { background: rgba(10, 10, 11, 0.4); }
.att--player { max-width: min(320px, 100%); border-radius: 10px; }
.att__play, .att__icon, .att__dl { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; }
.att__play svg, .att__icon svg, .att__dl svg { width: 16px; height: 16px; }
.att__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.att__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.att.is-loading { opacity: 0.6; }
.att__error { padding: 12px; font-size: 12px; }
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0, 0, 0, 0.85); cursor: zoom-out; animation: fade-in 0.2s both; }
.lightbox img { max-width: 92vw; max-height: 90vh; animation: dock-in 0.25s var(--ease) both; }
.lightbox__x { position: absolute; top: 16px; right: 16px; }
.lightbox.is-leaving { opacity: 0; transition: opacity 0.18s; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* The small window uses the same bubbles. */
.dock__messages { gap: 2px; }
.dock__msg { max-width: 92%; }
.dock__bubble { display: flex; align-items: center; gap: 4px; }
.dock__msg.is-mine .dock__bubble { flex-direction: row-reverse; }
.dock .bubble { max-width: 100%; }
.dock__msg p { padding: 0; background: none; }
.dock__who { margin-bottom: 2px; }

/* ---------- Chat, second pass: time and actions under the bubble, composer as one box ---------- */

.chat__msg { align-items: flex-start; }
.chat__msg:not(.is-grouped) { margin-top: 12px; }
.chat__msg > .avatar, .chat__msg > .av { margin-top: 0; }
.msg__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: min(72%, 560px); }
.chat__msg.is-mine .msg__col { align-items: flex-end; }
.msg__col .bubble { max-width: 100%; padding: 8px 12px; }
.msg__meta { display: flex; align-items: center; gap: 8px; min-height: 22px; color: var(--muted); font-size: 11px; }
.chat__msg.is-mine .msg__meta { flex-direction: row-reverse; }
.msg__time { font-family: var(--mono); font-size: 11px; }
.msg__meta .receipt { margin: 0; align-self: auto; }
.msg__meta .chat__actions { opacity: 0; align-self: auto; }
.chat__msg:hover .msg__meta .chat__actions, .chat__msg:focus-within .msg__meta .chat__actions { opacity: 1; }
.chat__msg.is-mine .reactions { justify-content: flex-end; }
.chat__reactions { margin: 2px 0 0; }
.chat__reactions .react { background: var(--ink-3); }

.chat__composer { padding: 10px 24px 16px; border-top: 1px solid var(--rule); }
.chat__box { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px; border: 1px solid var(--rule-2); border-radius: 14px; background: var(--ink-2); transition: border-color 0.15s, box-shadow 0.15s; }
.chat__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 91, 35, 0.12); }
.chat__row { display: flex; align-items: flex-end; gap: 6px; }
.chat__box .chat__input { flex: 1; min-height: 34px; padding: 7px 4px; border: 0; background: transparent; }
.chat__box .chat__input:focus { border: 0; box-shadow: none; }
.chat__box .chat__plus { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--soft); }
.chat__box .chat__plus:hover { background: var(--ink-4); color: var(--bone); transform: rotate(90deg); }
.chat__box .chat__send { width: 32px; height: 32px; border-radius: 50%; }
.chat__box .chat__send svg, .chat__box .chat__plus svg { width: 16px; height: 16px; }
.chat__box .attach-strip { padding: 4px 4px 0; }
.chat__newbox .dock__new { margin-bottom: 2px; }
.chat__composer { display: block; }
.chat__channel { animation: none; }

/* ======================================================================
   Glass and depth: translucent surfaces over a soft, slowly moving glow
   ====================================================================== */

body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 12% 8%, rgba(255, 91, 35, 0.34), transparent 70%),
    radial-gradient(35% 40% at 88% 18%, rgba(88, 101, 242, 0.26), transparent 70%),
    radial-gradient(45% 40% at 70% 95%, rgba(61, 220, 132, 0.14), transparent 70%);
  animation: drift 28s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 4%, 0) scale(1.08); } }
.app, .main { background: transparent; }

.side { background: rgba(17, 17, 19, 0.55); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border-right-color: rgba(242, 241, 236, 0.08); }
.vhead, .filters { background: rgba(10, 10, 11, 0.5); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: rgba(242, 241, 236, 0.08); }
.group__head { background: rgba(17, 17, 19, 0.6); backdrop-filter: blur(12px); }

.card, .panel, .col, .prow, .note, .tour li, .update, .cycle, .setting__text { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card, .panel { background: rgba(24, 24, 27, 0.55); border-color: rgba(242, 241, 236, 0.09); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px rgba(0, 0, 0, 0.25); }
.card:hover { background: rgba(32, 32, 36, 0.7); border-color: rgba(242, 241, 236, 0.18); transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 91, 35, 0.12); }
.row:hover, .note:hover, .prow:not(.prow--head):hover, .subtask:hover, .triage-row:hover { background: rgba(242, 241, 236, 0.05); }
.panel { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s; }
.panel:hover { border-color: rgba(242, 241, 236, 0.16); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 16px 40px rgba(0, 0, 0, 0.35); }

.pop, .toast { background: rgba(24, 24, 27, 0.72); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-color: rgba(242, 241, 236, 0.14); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; }
.overlay { background: rgba(5, 5, 7, 0.45); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.modal, .pal { background: rgba(20, 20, 23, 0.72); backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5); border: 1px solid rgba(242, 241, 236, 0.18); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 10px 10px 0 rgba(255, 91, 35, 0.35); }
.gate__card { background: rgba(20, 20, 23, 0.7); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border-color: rgba(242, 241, 236, 0.2); }
.lightbox { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* Chat */
.chat__channels { background: rgba(17, 17, 19, 0.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-right-color: rgba(242, 241, 236, 0.08); }
.chat__composer { background: rgba(10, 10, 11, 0.35); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-top-color: rgba(242, 241, 236, 0.08); }
.chat__box { background: rgba(24, 24, 27, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(242, 241, 236, 0.14); border-radius: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.bubble { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(40, 40, 46, 0.6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 18px rgba(0, 0, 0, 0.25); }
.chat__msg.is-mine .bubble { background: linear-gradient(135deg, rgba(255, 110, 55, 0.95), rgba(255, 91, 35, 0.88)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 24px rgba(255, 91, 35, 0.25); }
.chat__day { background: rgba(24, 24, 27, 0.55); backdrop-filter: blur(10px); border-color: rgba(242, 241, 236, 0.1); }

/* The send and plus buttons are squares, like the rest of the page. */
.chat__box .chat__send, .chat__box .chat__plus, .chat__send, .chat__plus { border-radius: 0; }
.chat__box .chat__send { width: 36px; height: 36px; box-shadow: 0 6px 16px rgba(255, 91, 35, 0.3); }
.chat__box .chat__plus { width: 36px; height: 36px; border: 1px solid rgba(242, 241, 236, 0.12); }
.chat__send:disabled { opacity: 0.6; cursor: progress; }

/* Motion with more depth */
.btn { transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s, opacity 0.2s; }
.btn--accent:hover:not(:disabled) { box-shadow: 3px 3px 0 var(--bone), 0 10px 30px rgba(255, 91, 35, 0.35); }
.side__link { transition: background 0.2s, color 0.2s, transform 0.25s var(--ease), padding-left 0.25s var(--ease); }
.side__link:hover { transform: translateX(3px); }
.chip-btn { transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s var(--ease); }
.chip-btn:hover { background: rgba(242, 241, 236, 0.06); transform: translateY(-1px); }
.col { transition: border-color 0.2s, background 0.2s, box-shadow 0.25s; }
.col.is-over { box-shadow: 0 0 0 1px rgba(255, 91, 35, 0.4), 0 20px 50px rgba(255, 91, 35, 0.1); }
.overlay .modal, .overlay .pal { animation: glass-in 0.35s var(--ease) both; }
@keyframes glass-in { from { opacity: 0; transform: translateY(18px) scale(0.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.pop { animation: glass-pop 0.22s var(--ease) both; }
@keyframes glass-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.toast { animation: glass-slide 0.4s var(--ease) both; }
@keyframes glass-slide { from { opacity: 0; transform: translateX(30px) scale(0.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
#view.enter > * { animation: view-in 0.45s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.cards .card, .col .card { animation-delay: calc(var(--i, 0) * 45ms); }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  #view.enter > *, .overlay .modal, .overlay .pal, .pop, .toast { animation: none !important; }
}
@supports not (backdrop-filter: blur(1px)) {
  .side, .vhead, .filters, .pop, .toast, .modal, .pal, .bubble { background: var(--ink-2); }
}

/* ======================================================================
   ASCII backdrop (not interactive) and glass everywhere
   ====================================================================== */

body::before { content: none; animation: none; }
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

:root { --glass: rgba(22, 22, 26, 0.5); --glass-strong: rgba(18, 18, 21, 0.62); --glass-line: rgba(242, 241, 236, 0.12); --glass-blur: blur(18px) saturate(1.5); }

/* Bars and panels */
.side { background: rgba(14, 14, 17, 0.5); }
.vhead, .filters { background: rgba(10, 10, 11, 0.42); }
.group__head { background: rgba(14, 14, 17, 0.5); }
.card, .panel { background: var(--glass); border-color: var(--glass-line); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 12px 32px rgba(0, 0, 0, 0.3); }
.card:hover { background: rgba(34, 34, 40, 0.58); border-color: rgba(242, 241, 236, 0.22); }
.col { background: rgba(242, 241, 236, 0.02); backdrop-filter: blur(6px); }
.col__head { backdrop-filter: none; }
.note, .prow, .row, .subtask, .triage-row, .update { background: rgba(242, 241, 236, 0.02); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.prow--head { background: transparent; backdrop-filter: none; }

/* Controls */
.btn--ghost, .chip-btn, .prop, .inline-input, .search, .disp__select, .big-input, .desc-input, .composer__box, .subtasks__input, .tick, .icon-btn:hover, .badge {
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
}
.btn--ghost, .chip-btn, .prop, .search, .disp__select, .inline-input { background: rgba(242, 241, 236, 0.05); border-color: var(--glass-line); }
.btn--ghost:hover, .chip-btn:hover, .prop:hover { background: rgba(242, 241, 236, 0.1); }
.composer__box, .big-input, .desc-input { background: rgba(10, 10, 11, 0.4); border-color: var(--glass-line); }
.segmented { background: rgba(242, 241, 236, 0.04); backdrop-filter: blur(10px); }
.label, .team-chip, .pill, .count-pill { backdrop-filter: blur(8px); background: rgba(242, 241, 236, 0.06); }

/* Floating things */
.pop, .toast { background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: rgba(242, 241, 236, 0.16); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.08) inset; }
.overlay { background: rgba(5, 5, 7, 0.4); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); }
.modal, .pal { background: rgba(18, 18, 21, 0.62); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); border: 1px solid rgba(242, 241, 236, 0.2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.1) inset, 10px 10px 0 rgba(255, 91, 35, 0.3); }
.gate__card { background: rgba(18, 18, 21, 0.6); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border: 1px solid rgba(242, 241, 236, 0.22); }
.menu-row:hover, .pop button:hover { background: rgba(242, 241, 236, 0.08); }

/* Chat */
.chat__channels { background: rgba(10, 10, 11, 0.4); }
.chat__composer { background: rgba(10, 10, 11, 0.35); }
.chat__box { background: rgba(26, 26, 30, 0.55); border-color: var(--glass-line); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 10px 30px rgba(0, 0, 0, 0.3); }
.bubble { background: rgba(44, 44, 50, 0.5); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 22px rgba(0, 0, 0, 0.28); }
.chat__msg.is-mine .bubble { background: linear-gradient(135deg, rgba(255, 112, 58, 0.85), rgba(255, 91, 35, 0.72)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 8px 26px rgba(255, 91, 35, 0.28); }
.chat__day { background: rgba(24, 24, 27, 0.5); border-color: var(--glass-line); }
.attach-chip, .att--video, .att--file { background: rgba(10, 10, 11, 0.35); backdrop-filter: blur(8px); }
.react { background: rgba(242, 241, 236, 0.06); backdrop-filter: blur(8px); }
.chat__plus { background: rgba(242, 241, 236, 0.06); backdrop-filter: blur(10px); }

/* Settings, inbox and the rest of the lists */
.settings__link.is-on, .chat__channel.is-on, .side__link.is-active { background: rgba(242, 241, 236, 0.09); backdrop-filter: blur(10px); }
.pick-list, .pick-chip { background: rgba(10, 10, 11, 0.35); backdrop-filter: blur(10px); }
.tour li, .setting { backdrop-filter: blur(8px); }

@media (prefers-reduced-motion: reduce) { .backdrop { opacity: 0.6; } }
@media (hover: none) { .backdrop { opacity: 0.5; } }
@supports not (backdrop-filter: blur(1px)) {
  .side, .vhead, .filters, .pop, .toast, .modal, .pal, .bubble, .card, .panel { background: var(--ink-2); }
}

/* ======================================================================
   Calmer colour: no harsh orange in the side panel and lists, and no glow on messages
   ====================================================================== */

/* Side panel */
.side__brand span, .gate__brand span { color: var(--muted); }
.badge, .count-pill { background: rgba(242, 241, 236, 0.16); color: var(--bone); border: 1px solid rgba(242, 241, 236, 0.12); }
.side__link::before { background: rgba(242, 241, 236, 0.55); }
.side__link.is-active, .settings__link.is-on, .chat__channel.is-on { box-shadow: none; }
.side__sub.is-active::before { background: rgba(242, 241, 236, 0.4); }
.side .team-dot, .side__teams .team-dot, .chat__channel .team-dot { filter: saturate(0.55); opacity: 0.85; }
.side__new:hover { border-color: rgba(242, 241, 236, 0.4); }
.side__section { color: var(--muted); }
.fav.is-on { color: var(--soft); }
.live, .live.is-on { background: var(--muted); animation: none; }

/* Lists and chips */
.chip-btn.is-on { border-color: rgba(242, 241, 236, 0.35); background: rgba(242, 241, 236, 0.1); }
.tab.is-on::after, .settings__link.is-on { border-color: rgba(242, 241, 236, 0.4); }
.tab.is-on::after { background: rgba(242, 241, 236, 0.5); }
.item.is-selected { border-color: rgba(242, 241, 236, 0.3); background: rgba(242, 241, 236, 0.07); }
.item.is-focus:not(.is-selected) { border-color: rgba(242, 241, 236, 0.18); }
.row.is-focus:not(.is-selected) { box-shadow: inset 2px 0 rgba(242, 241, 236, 0.4); }
.tick[aria-checked="true"] { background: rgba(242, 241, 236, 0.85); border-color: transparent; color: var(--ink); }
.pick-row.is-on, .pick-chip { background: rgba(242, 241, 236, 0.08); border-color: rgba(242, 241, 236, 0.25); }
.pick-row__tick { color: var(--soft); }
.chat__channel-typing, .bubble__name, .receipt--seen { color: var(--soft); }
.chat__box:focus-within { border-color: rgba(242, 241, 236, 0.35); box-shadow: none; }

/* Messages: no glow, a quiet tint for your own */
.bubble, .chat__msg.is-mine .bubble, .bubble:hover, .chat__msg.is-mine .bubble:hover { box-shadow: none; }
.chat__msg.is-mine .bubble { background: rgba(214, 112, 72, 0.42); border: 1px solid rgba(242, 241, 236, 0.1); color: var(--bone); }
.chat__msg.is-mine .bubble .muted { color: var(--soft); }
.chat__msg.is-mine .mention { background: rgba(242, 241, 236, 0.16); color: var(--bone); }
.chat__msg.is-mine .ident-link { color: var(--bone); }
.bubble { border: 1px solid rgba(242, 241, 236, 0.06); }
.chat__send { box-shadow: none; }
.chat__box .chat__send { box-shadow: none; background: rgba(214, 112, 72, 0.7); color: var(--bone); }
.react.is-on { background: rgba(242, 241, 236, 0.1); border-color: rgba(242, 241, 236, 0.3); }

/* The task page's property column and thread messages: the same frosted glass as the top bar */
.issue__props { background: rgba(10, 10, 11, 0.42); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); border-left-color: rgba(242, 241, 236, 0.1); }
.msg, .composer__box, .replies .msg { background: rgba(22, 22, 26, 0.5); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(242, 241, 236, 0.1); }
.subtasks__input, .subtask { backdrop-filter: blur(10px); }

/* ---------- Chat, bigger: names above the bubbles, avatars on both sides, the plus opens the box ---------- */

.chat__list { padding: 20px 28px 10px; }
.chat__msg { gap: 12px; }
.chat__msg:not(.is-grouped) { margin-top: 18px; }
.chat__avatar-gap { width: 38px; }
.msg__col { max-width: min(76%, 640px); gap: 3px; }
.msg__name { font-size: 14px; color: var(--soft); padding: 0 2px; }
.chat__msg.is-mine .msg__name { text-align: right; }
.bubble { padding: 11px 16px; font-size: 16px; line-height: 1.45; }
.bubble p, .chat__body { font-size: 16px; }
.msg__meta { font-size: 12px; min-height: 24px; }
.msg__time { font-size: 12px; }
.receipt { font-size: 13px; }
.chat__act svg { width: 15px; height: 15px; }
.chat__act { width: 28px; height: 28px; }
.react { height: 28px; font-size: 15px; }
.chat__channel { font-size: 15px; padding: 9px 12px; }
.chat__input, .chat__box .chat__input { font-size: 16px; min-height: 40px; }
.chat__day { font-size: 13px; }
.chat__typing { font-size: 14px; }
.att--image { width: min(380px, 100%); }
.att__name { font-size: 14px; }

/* No spin on the plus; the box itself reshapes to show the options */
.chat__box .chat__plus:hover, .chat__plus:hover { transform: none; }
.chat__box { transition: padding 0.3s var(--ease), border-color 0.2s, background 0.3s, box-shadow 0.3s; }
.attach-options { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.32s var(--ease), opacity 0.25s; }
.attach-options__inner { display: flex; gap: 8px; overflow: hidden; min-height: 0; }
.chat__box.is-open .attach-options { grid-template-rows: 1fr; opacity: 1; padding-bottom: 4px; }
.chat__box.is-open { padding-top: 10px; border-color: rgba(242, 241, 236, 0.3); }
.attach-option { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid rgba(242, 241, 236, 0.14); background: rgba(242, 241, 236, 0.06); color: var(--soft); font-size: 14px; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.attach-option:hover { background: rgba(242, 241, 236, 0.12); border-color: rgba(242, 241, 236, 0.3); color: var(--bone); }
.attach-option svg { width: 16px; height: 16px; }

.side__sub { display: none; }

/* A hover on a team in the side panel is only motion: the row slides and brightens, nothing opens */
.side__team .side__link { transition: background 0.2s, color 0.2s, transform 0.25s var(--ease), padding-left 0.25s var(--ease); }
.side__team .side__link:hover { transform: translateX(4px); background: rgba(242, 241, 236, 0.07); }

/* Animations that blur must not hold their last frame: a leftover filter makes the element a "backdrop root",
   and the glass inside it would then blur nothing but its own parent instead of the ASCII behind the page. */
#view.enter > * { animation: view-in 0.45s var(--ease) backwards; }
.overlay .modal, .overlay .pal { animation: glass-in 0.35s var(--ease) backwards; }
.pop { animation: glass-pop 0.22s var(--ease) backwards; }
.toast { animation: glass-slide 0.4s var(--ease) backwards; }

/* ======================================================================
   Chat that scales with the window, grouped by the minute; glass that is both see-through and frosted
   ====================================================================== */

.chat { --chat-text: clamp(14px, 0.55vw + 10px, 18px); --chat-gap: clamp(8px, 0.6vw + 4px, 14px); }
.bubble, .bubble p, .chat__body, .chat__box .chat__input, .chat__input { font-size: var(--chat-text); }
.chat__list { padding: clamp(10px, 1.6vw, 28px) clamp(12px, 2vw, 32px) 10px; }
.msg__col { max-width: min(78%, 68ch); }
.msg__name { font-size: calc(var(--chat-text) - 2px); }
.msg__time, .msg__meta, .receipt { font-size: calc(var(--chat-text) - 4px); }
.chat__channel { font-size: calc(var(--chat-text) - 1px); }
.chat__msg:not(.is-grouped) { margin-top: calc(var(--chat-gap) + 6px); }
.chat__msg.is-grouped { margin-top: 3px; }
.chat__msg.is-compact { padding-bottom: 0; }
.chat__msg.is-compact + .chat__msg.is-grouped { margin-top: 2px; }
.chat__input { resize: none; overflow: hidden; }

/* Message tools float over the bubble's corner on hover */
.msg__col { position: relative; }
.chat__actions { position: absolute; top: -16px; right: 8px; z-index: 3; display: flex; gap: 0; padding: 2px; opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.2s var(--ease); background: rgba(18, 18, 22, 0.55); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(242, 241, 236, 0.16); }
.chat__msg.is-mine .chat__actions { right: auto; left: 8px; }
.chat__msg:hover .chat__actions, .chat__msg:focus-within .chat__actions { opacity: 1; transform: none; }
.msg__meta .chat__actions { position: absolute; }

/* Glass: clearly see-through, with the blur softening what is behind it */
:root { --glass-clear: rgba(20, 20, 24, 0.26); --glass-clear-strong: rgba(18, 18, 22, 0.34); --glass-edge: rgba(242, 241, 236, 0.16); --glass-blur2: blur(18px) saturate(1.7) brightness(1.08); }
.side, .vhead, .filters, .chat__channels, .issue__props, .tabs { background: rgba(12, 12, 15, 0.3); backdrop-filter: var(--glass-blur2); -webkit-backdrop-filter: var(--glass-blur2); }
.card, .panel, .msg, .col, .composer__box, .chat__box, .note, .prow:not(.prow--head), .row, .subtask, .update, .project__head, .cycle {
  background: var(--glass-clear); backdrop-filter: var(--glass-blur2); -webkit-backdrop-filter: var(--glass-blur2); border-color: var(--glass-edge);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 10px 30px rgba(0, 0, 0, 0.2);
}
.row, .note, .prow:not(.prow--head), .subtask { box-shadow: none; background: rgba(12, 12, 15, 0.3); }
.col { background: rgba(12, 12, 15, 0.18); }
.card:hover { background: var(--glass-clear-strong); }
.chat__composer { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.bubble { background: rgba(48, 48, 54, 0.32); backdrop-filter: var(--glass-blur2); -webkit-backdrop-filter: var(--glass-blur2); border-color: var(--glass-edge); }
.chat__msg.is-mine .bubble { background: rgba(214, 112, 72, 0.3); border: 1px solid rgba(255, 150, 110, 0.35); }
.pop, .toast, .fly { background: var(--glass-clear-strong); backdrop-filter: var(--glass-blur2); -webkit-backdrop-filter: var(--glass-blur2); }
.modal, .pal, .gate__card { background: rgba(18, 18, 22, 0.4); backdrop-filter: blur(26px) saturate(1.8) brightness(1.08); -webkit-backdrop-filter: blur(26px) saturate(1.8) brightness(1.08); }
.btn--ghost, .chip-btn, .prop, .search, .disp__select, .inline-input { background: rgba(242, 241, 236, 0.07); }

/* ======================================================================
   A little more see-through: lighter tint and softer blur, so the field behind can still be seen moving
   ====================================================================== */

:root { --glass-clear: rgba(20, 20, 24, 0.16); --glass-clear-strong: rgba(18, 18, 22, 0.24); --glass-blur2: blur(9px) saturate(1.7) brightness(1.1); }

.side, .vhead, .filters, .chat__channels, .issue__props, .tabs { background: rgba(12, 12, 15, 0.2); }
.card, .panel, .msg, .col, .composer__box, .chat__box, .update, .project__head, .cycle, .subtasks__input, .relation, .blocked-banner {
  background: var(--glass-clear); backdrop-filter: var(--glass-blur2); -webkit-backdrop-filter: var(--glass-blur2);
}
.row, .note, .prow:not(.prow--head), .subtask, .triage-row { background: rgba(12, 12, 15, 0.2); backdrop-filter: var(--glass-blur2); -webkit-backdrop-filter: var(--glass-blur2); }
.col { background: rgba(12, 12, 15, 0.1); }
.card:hover { background: rgba(26, 26, 32, 0.28); }
.bubble { background: rgba(48, 48, 54, 0.2); backdrop-filter: var(--glass-blur2); -webkit-backdrop-filter: var(--glass-blur2); }
.chat__msg.is-mine .bubble { background: rgba(214, 112, 72, 0.2); border-color: rgba(255, 150, 110, 0.3); }
.pop, .toast, .fly { background: var(--glass-clear-strong); }
.modal, .pal, .gate__card { background: rgba(18, 18, 22, 0.3); backdrop-filter: blur(14px) saturate(1.8) brightness(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(1.1); }
.msg, .update { border-color: rgba(242, 241, 236, 0.13); }
.msg .msg__body, .row__title, .card__title { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }

/* ---------- Loading screen ---------- */

.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 20px); text-align: center; padding: 24px; }
.boot__title { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(36px, 9vw, 120px); line-height: 0.95; letter-spacing: -0.02em; color: var(--bone); animation: boot-in 0.7s var(--ease) both; }
.boot__sub { font-family: var(--mono); font-size: clamp(14px, 1.6vw, 22px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); animation: boot-in 0.7s 0.15s var(--ease) both; }
.boot__dots i { font-style: normal; animation: boot-dot 1.2s ease-in-out infinite; }
.boot__dots i:nth-child(2) { animation-delay: 0.2s; }
.boot__dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes boot-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes boot-dot { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .boot__title, .boot__sub, .boot__dots i { animation: none; } }

/* ---------- Entrance motion helpers (see reveal.js) ---------- */

.rv-word { display: inline-block; white-space: nowrap; }
.rv-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.rv-ch { display: inline-block; will-change: transform; }
.rv-w { display: inline-block; }
/* The script moves things in, so the old CSS entrance for the same elements is switched off. */
#view.enter > * { animation: none; }
#view .card, #view .row, #view .note, #view .prow, #view .panel, #view .subtask, #view .update, #view .cycle, #view .group, #view .empty { animation: none; }

/* Switching conversation only re-animates the title and the messages, never the frame around them */
.chat.is-entering .chat__pane { animation: none; }
.chat__channel { animation: none; }
#view .msg, #view .composer__box, #view .project__head, #view .empty, #view .col { animation: none; }

/* ---------- Sub-tasks folded under their parent ---------- */

.card-wrap, .row-wrap { display: flex; flex-direction: column; }
.col__list { gap: 8px; }
.card-wrap.has-subs > .card { border-bottom-color: transparent; }
.subtoggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: 1px solid var(--glass-edge, rgba(242, 241, 236, 0.16)); border-top: 1px dashed rgba(242, 241, 236, 0.12); background: rgba(20, 20, 24, 0.16); backdrop-filter: blur(9px) saturate(1.6); -webkit-backdrop-filter: blur(9px) saturate(1.6); color: var(--soft); font-size: 12px; text-align: left; transition: background 0.15s, color 0.15s; }
.subtoggle:hover { background: rgba(242, 241, 236, 0.07); color: var(--bone); }
.subtoggle__chev { display: inline-grid; place-items: center; width: 14px; height: 14px; transform: rotate(-90deg); transition: transform 0.25s var(--ease); }
.subtoggle__chev svg { width: 12px; height: 12px; }
.is-open > .subtoggle .subtoggle__chev { transform: none; }
.subtoggle__bar { position: relative; flex: 1; max-width: 90px; height: 3px; margin-left: auto; background: rgba(242, 241, 236, 0.12); overflow: hidden; }
.subtoggle__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--ok); }
.subs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease); }
.is-open > .subs { grid-template-rows: 1fr; }
.subs__inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(242, 241, 236, 0.12); border-top: 0; background: rgba(12, 12, 15, 0.22); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.is-open > .subs > .subs__inner { padding: 4px 0; }
.subcard { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px calc(22px + var(--depth, 0) * 16px); color: var(--soft); font-size: 13px; opacity: 0; transform: translateY(-4px); transition: background 0.12s, color 0.12s, opacity 0.25s, transform 0.3s var(--ease); }
.subcard::before { content: ""; position: absolute; left: calc(12px + var(--depth, 0) * 16px); top: 0; bottom: 0; width: 1px; background: rgba(242, 241, 236, 0.14); }
.is-open > .subs .subcard { opacity: 1; transform: none; }
.is-open > .subs .subcard:nth-child(2) { transition-delay: 0.03s; }
.is-open > .subs .subcard:nth-child(3) { transition-delay: 0.06s; }
.is-open > .subs .subcard:nth-child(n+4) { transition-delay: 0.09s; }
.subcard:hover { background: rgba(242, 241, 236, 0.06); color: var(--bone); }
.subcard__status svg, .subcard__pr svg { width: 13px; height: 13px; }
.subcard__id { font-family: var(--mono); font-size: 11px; color: var(--muted); flex: none; }
.subcard__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subcard.is-done .subcard__title { color: var(--muted); text-decoration: line-through; }
.row-wrap .subtoggle { padding-left: 52px; border-left: 0; border-right: 0; }
.row-wrap .subs__inner { border-left: 0; border-right: 0; }
.row-wrap .subcard { padding-left: calc(60px + var(--depth, 0) * 16px); }
.row-wrap .subcard::before { left: calc(50px + var(--depth, 0) * 16px); }

/* ---------- Side panel: collapsible teams, plain headings, the profile panel ---------- */

.side__section { font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--soft); }
.side__head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 2px; padding: 0 6px 0 4px; }
.side__head--plain { padding: 0 10px; color: var(--soft); font-size: 13px; font-weight: 600; }
.side__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; color: var(--soft); font-size: 13px; font-weight: 600; transition: color 0.15s, background 0.15s; }
.side__toggle:hover { color: var(--bone); background: rgba(242, 241, 236, 0.06); }
.side__chev { display: inline-grid; place-items: center; width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.side__chev svg { width: 12px; height: 12px; }
.side__group.is-collapsed .side__chev { transform: rotate(-90deg); }
.side__collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.34s var(--ease), opacity 0.25s; }
.side__collapse-inner { min-height: 0; overflow: hidden; }
.side__group.is-collapsed .side__collapse { grid-template-rows: 0fr; opacity: 0; }
.side__views:empty, .side__favs:empty { display: none; }

.side__me.is-away { opacity: 0; pointer-events: none; }
.acct { position: fixed; z-index: 70; display: flex; flex-direction: column; overflow: hidden; background: rgba(18, 18, 22, 0.5); border: 1px solid rgba(242, 241, 236, 0.18); backdrop-filter: blur(24px) saturate(1.7) brightness(1.08); -webkit-backdrop-filter: blur(24px) saturate(1.7) brightness(1.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 30px 70px rgba(0, 0, 0, 0.5); }
.acct__list { display: flex; flex-direction: column; padding: 6px 6px 0; }
.acct__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; color: var(--soft); font-size: 14px; font-weight: 500; text-align: left; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.25s var(--ease); }
.acct__item:hover { background: rgba(242, 241, 236, 0.08); border-color: rgba(242, 241, 236, 0.12); color: var(--bone); transform: translateX(3px); }
.acct__item.is-danger:hover { color: #ff8a8d; }
.acct__icon { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; }
.acct__icon svg { width: 16px; height: 16px; }
.acct__label { flex: 1; }
.acct__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-top: 6px; border-top: 1px solid rgba(242, 241, 236, 0.12); text-align: left; cursor: pointer; transition: background 0.15s; }
.acct__head:hover { background: rgba(242, 241, 236, 0.05); }
.acct__head .side__me-text { flex: 1; min-width: 0; }
.acct__chev { transition: transform 0.35s var(--ease); transform: rotate(180deg); }

/* The unread count always sits at the far right of its row, never next to the icon */
.side__link { display: flex; align-items: center; }
.side__link .side__label { flex: 1; min-width: 0; }
.side__link .badge { order: 99; margin-left: auto; flex: none; border: 0; background: rgba(242, 241, 236, 0.18); }
.side__link .side__icon { flex: none; width: 16px; height: 16px; }

/* ======================================================================
   Performance: the same look, with far fewer expensive layers.
   A backdrop blur is re-computed for every pixel behind the element whenever anything behind it moves, so it is
   kept on a few large surfaces and left off the many small things (cards, rows, bubbles, chips, buttons, badges).
   Those keep their translucent tint, and sit on top of a blurred parent where there is one.
   ====================================================================== */

.card, .row, .note, .prow, .prow--head, .subtask, .triage-row, .update, .msg, .bubble, .chat__day, .attach-chip, .att, .react, .chat__plus, .chat__act,
.btn--ghost, .chip-btn, .prop, .search, .disp__select, .inline-input, .big-input, .desc-input, .composer__box, .subtasks__input, .segmented, .label,
.team-chip, .pill, .count-pill, .badge, .tick, .pick-list, .pick-chip, .subtoggle, .subs__inner, .tabs, .group__head, .relation, .blocked-banner,
.project__head, .cycle, .settings__link, .chat__channel, .side__link, .icon-btn, .emoji-grid, .chat__composer, .att--image, .setting, .team-row, .member, .tour li {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* One blur per large area instead */
.groups, .plist, .notes, .thread__list, .subtasks__list, .settings__body, .chat__list, .project, .cycles, .triage {
  backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4);
}
.chat__list { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

/* Cheaper filters: no brightness pass, and the same saturation everywhere */
:root { --glass-blur2: blur(9px) saturate(1.4); --frost-blur: blur(14px) saturate(1.4); }
.modal, .pal, .gate__card, .acct { backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); }
.pop, .toast, .fly { backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); }

/* Without their own blur the small things are a touch more opaque, so text stays easy to read over the pattern */
.card { background: rgba(22, 22, 27, 0.34); }
.row, .note, .prow:not(.prow--head), .subtask, .triage-row { background: rgba(12, 12, 15, 0.3); }
.bubble { background: rgba(48, 48, 54, 0.38); }
.chat__msg.is-mine .bubble { background: rgba(214, 112, 72, 0.3); }
.msg, .update, .cycle, .project__head { background: rgba(22, 22, 26, 0.34); }
.btn--ghost, .chip-btn, .prop, .search, .disp__select, .inline-input { background: rgba(242, 241, 236, 0.08); }

/* Smaller, cheaper shadows on things that repeat; no shadow on the text itself */
.card, .panel, .msg, .update, .cycle, .col { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 12px rgba(0, 0, 0, 0.18); }
.bubble { box-shadow: none; }
.msg .msg__body, .row__title, .card__title { text-shadow: none; }
.side .team-dot, .side__teams .team-dot, .chat__channel .team-dot, .prop svg, .row__pr svg, .meta svg, .team-dot { filter: none; opacity: 0.88; }

/* Layers only where something is actually moving */
.rv-ch { will-change: auto; }
.chat__msg, .card, .row { contain: layout style; }
.backdrop { contain: strict; }

/* ---------- Dropdowns and switches that belong to the site ---------- */

.sel { position: relative; min-width: 150px; max-width: 100%; }
.sel__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 34px; padding: 0 12px; border: 1px solid rgba(242, 241, 236, 0.16); background: rgba(242, 241, 236, 0.08); color: var(--bone); font-size: 14px; text-align: left; transition: border-color 0.15s, background 0.15s; }
.sel__btn:hover { border-color: rgba(242, 241, 236, 0.32); background: rgba(242, 241, 236, 0.12); }
.sel.is-open .sel__btn { border-color: rgba(242, 241, 236, 0.4); background: rgba(242, 241, 236, 0.14); }
.sel__chev { display: inline-grid; place-items: center; width: 14px; height: 14px; color: var(--muted); transition: transform 0.3s var(--ease); }
.sel__chev svg { width: 13px; height: 13px; }
.sel.is-open .sel__chev { transform: rotate(180deg); color: var(--bone); }
.sel__drop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease); }
.sel.is-open .sel__drop { grid-template-rows: 1fr; }
.sel__inner { min-height: 0; overflow: hidden; }
.sel__list { display: flex; flex-direction: column; margin-top: 4px; padding: 4px; border: 1px solid rgba(242, 241, 236, 0.16); background: rgba(14, 14, 18, 0.5); max-height: 220px; overflow-y: auto; }
.sel__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; color: var(--soft); font-size: 14px; text-align: left; opacity: 0; transform: translateY(-6px); transition: background 0.12s, color 0.12s, opacity 0.25s, transform 0.3s var(--ease); }
.sel.is-open .sel__opt { opacity: 1; transform: none; }
.sel.is-open .sel__opt:nth-child(2) { transition-delay: 0.03s; }
.sel.is-open .sel__opt:nth-child(3) { transition-delay: 0.06s; }
.sel.is-open .sel__opt:nth-child(4) { transition-delay: 0.09s; }
.sel.is-open .sel__opt:nth-child(n+5) { transition-delay: 0.12s; }
.sel__opt:hover { background: rgba(242, 241, 236, 0.09); color: var(--bone); }
.sel__opt.is-on { color: var(--bone); }
.sel__tick { width: 14px; height: 14px; color: var(--soft); opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.25s var(--ease); }
.sel__opt.is-on .sel__tick { opacity: 1; transform: none; }
.sel__tick svg { width: 14px; height: 14px; }
.disp__row--select { align-items: flex-start; }
.disp__row--select .disp__label { padding-top: 7px; }
.disp__row--select .sel { width: 160px; }
.fld--row .sel { width: 220px; flex: none; }
.setting__control .sel { width: 200px; }

/* Switches in place of the system checkboxes */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 34px; height: 20px; margin: 0; border: 1px solid rgba(242, 241, 236, 0.22); background: rgba(242, 241, 236, 0.08); cursor: pointer; transition: background 0.25s var(--ease), border-color 0.25s; }
input[type="checkbox"]::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: var(--soft); transition: transform 0.3s var(--ease), background 0.25s; }
input[type="checkbox"]:checked { background: rgba(242, 241, 236, 0.28); border-color: rgba(242, 241, 236, 0.5); }
input[type="checkbox"]:checked::after { transform: translateX(14px); background: var(--bone); }
input[type="checkbox"]:hover { border-color: rgba(242, 241, 236, 0.4); }
input[type="checkbox"]:focus-visible { outline: 2px solid rgba(242, 241, 236, 0.5); outline-offset: 2px; }
.pick-member input[type="checkbox"], .tick { appearance: none; }
.disp__row--toggle input, .check input, .check-inline input { width: 34px; height: 20px; accent-color: initial; }

/* A panel with content that can grow (like the display options with a dropdown open) grows with it instead of overflowing */
.pop--panel { max-height: min(85vh, 620px); overflow-x: hidden; overflow-y: auto; display: block; transition: height 0.3s var(--ease); }
.pop--panel .disp { padding-bottom: 12px; }
.disp__row--select .sel { width: 170px; }
.disp__row--select .sel__list { max-height: 200px; }
.disp__label { white-space: nowrap; }
.disp__row--select .sel { width: 150px; }
.disp__row--select .sel__btn { padding: 0 10px; }
.disp__row--select .sel__list { max-height: 260px; }

/* The typed-in letters are clipped by their word, so they start out of sight and rise into view */
.rv-word { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.rv-ch { display: inline-block; }

/* The bar under the tabs slides between them */
.tabs { position: relative; }
.tab.is-on::after { content: none; }
.tabs__bar { position: absolute; bottom: -1px; height: 2px; background: rgba(242, 241, 236, 0.7); transition: left 0.38s var(--ease), width 0.38s var(--ease); pointer-events: none; }

/* Entrances belong to the motion system (motion.js); CSS only handles hover, focus and open/closed. */
.chat__msg.is-new, .dock__msg.is-new { animation: none; }

/* ======================================================================
   Chat: grouped list, one scale for everything, frosted writing box, site colours
   ====================================================================== */

/* Everything in the chat is sized from one font size that follows the window */
.chat { --u: clamp(14px, 0.5vw + 10px, 18px); font-size: var(--u); }
.chat__msg .av { width: 2.5em; height: 2.5em; font-size: 0.8em; }
.chat__avatar-gap { width: 2.5em; }
.bubble, .bubble p, .chat__body { font-size: 1em; }
.msg__name { font-size: 0.88em; }
.msg__time, .msg__meta, .receipt { font-size: 0.74em; }
.chat__channel { font-size: 0.95em; }

/* The writing box: frosted glass, with controls that scale with the text */
.chat__composer { padding: 0.7em clamp(12px, 2vw, 32px) 1em; background: transparent !important; border-top: 0; }
.chat__box { background: rgba(20, 20, 24, 0.3) !important; backdrop-filter: blur(14px) saturate(1.5) !important; -webkit-backdrop-filter: blur(14px) saturate(1.5) !important; border: 1px solid rgba(242, 241, 236, 0.18); padding: 0.4em 0.5em; gap: 0.5em; border-radius: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 10px 30px rgba(0, 0, 0, 0.25); }
.chat__box:focus-within { border-color: rgba(242, 241, 236, 0.38); background: rgba(24, 24, 28, 0.38) !important; }
.chat__row { align-items: center; gap: 0.4em; }
.chat__box .chat__input { font-size: 1em; min-height: 2.6em; padding: 0.55em 0.3em; line-height: 1.4; }
.chat__box .chat__plus, .chat__box .chat__send { width: 2.6em; height: 2.6em; flex: none; display: inline-grid; place-items: center; }
.chat__box .chat__plus { border: 0 !important; background: transparent !important; color: var(--soft); backdrop-filter: none !important; }
.chat__box .chat__plus:hover { color: var(--bone); background: rgba(242, 241, 236, 0.08) !important; }
.chat__box .chat__plus svg, .chat__box .chat__send svg { width: 1.15em; height: 1.15em; }
.chat__box .chat__send { background: var(--accent) !important; color: var(--ink); border: 0; }
.chat__box .chat__send:hover { transform: translateY(-1px); }
.chat__box .chat__send:disabled { opacity: 0.6; }
.chat__input::-webkit-contacts-auto-fill-button, .chat__input::-webkit-credentials-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; }

/* Bubbles in the site's own neutral glass; only the primary button keeps the orange */
.chat__msg.is-mine .bubble { background: rgba(242, 241, 236, 0.15); border: 1px solid rgba(242, 241, 236, 0.22); color: var(--bone); }
.bubble { background: rgba(48, 48, 54, 0.3); }
.chat__msg.is-mine .bubble .muted { color: var(--soft); }

/* The grouped list */
.chatgrp { display: flex; flex-direction: column; margin-bottom: 4px; }
.chatgrp__head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px; color: var(--soft); font-size: 0.9em; font-weight: 600; text-align: left; transition: color 0.15s; }
.chatgrp__head:hover { color: var(--bone); }
.chatgrp__title { flex: 1; }
.chatgrp.is-collapsed .side__chev { transform: rotate(-90deg); }
.chatgrp__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.34s var(--ease), opacity 0.25s; }
.chatgrp__inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
.chatgrp.is-collapsed .chatgrp__body { grid-template-rows: 0fr; opacity: 0; }
.chat__channel-list { padding-bottom: 8px; }
button.chat__channel { width: calc(100% - 8px); text-align: left; }

/* The writing box: clearly frosted glass, with even spacing */
.chat__box {
  background: linear-gradient(180deg, rgba(242, 241, 236, 0.1), rgba(242, 241, 236, 0.05)) !important;
  backdrop-filter: blur(16px) saturate(1.6) brightness(1.3) !important; -webkit-backdrop-filter: blur(16px) saturate(1.6) brightness(1.3) !important;
  border: 1px solid rgba(242, 241, 236, 0.22);
  padding: 0.55em 0.6em; gap: 0.5em;
}
.chat__box:focus-within { background: linear-gradient(180deg, rgba(242, 241, 236, 0.14), rgba(242, 241, 236, 0.07)) !important; border-color: rgba(242, 241, 236, 0.4); }
.chat__row { gap: 0.55em; }
.chat__box .chat__input { padding: 0.6em 0.2em; }
.chat__box .chat__plus, .chat__box .chat__send { width: 2.8em; height: 2.8em; }
.chat__box .chat__plus svg { width: 1.3em; height: 1.3em; }
.chat__box .chat__send svg { width: 1.2em; height: 1.2em; }
.chat__composer { padding: 0.8em clamp(14px, 2.2vw, 34px) 1.1em; }

/* Plus and send sit at equal distances from the box edges, and are centred in its height */
.chat__box .chat__row { align-items: center; }
.chat__box .chat__plus { margin-left: -0.75em; }
.chat__box .chat__input { align-self: stretch; display: block; }
.chat__box { gap: 0 !important; }
.chat__box .attach-strip.is-on { margin-bottom: 0.5em; }
.chat__box.is-open .attach-options { padding-bottom: 0.5em; }

/* The profile button looks like the open panel, only without the entries: the same frame, glass and spacing */
.side__me { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; background: rgba(18, 18, 22, 0.5); border: 1px solid rgba(242, 241, 236, 0.18); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; transition: background 0.2s, border-color 0.2s; }
.side__me:hover { background: rgba(28, 28, 32, 0.5); border-color: rgba(242, 241, 236, 0.3); }
.side__me .side__me-text { flex: 1; min-width: 0; }
.acct__head { margin-top: 6px; }

/* Profile: the button does not animate; its arrow turns, and the panel pops up above it */
.side__me.is-away { opacity: 1; pointer-events: auto; }
.side__me .side__icon { transition: transform 0.3s var(--ease); }
.side__me.is-open .side__icon { transform: rotate(180deg); }
.acct { transform-origin: bottom center; }
.acct__list { padding: 6px; }

/* Profile panel: it slides out from under the button, so it is clipped to the space above it */
.acct-clip { position: fixed; z-index: 70; overflow: hidden; pointer-events: auto; }
.acct { position: relative; left: auto; bottom: auto; width: 100%; transform-origin: bottom center; }

/* The writing box is back to its normal brightness */
.chat__box {
  background: rgba(20, 20, 24, 0.3) !important;
  backdrop-filter: blur(14px) saturate(1.5) !important; -webkit-backdrop-filter: blur(14px) saturate(1.5) !important;
  border: 1px solid rgba(242, 241, 236, 0.18);
}
.chat__box:focus-within { background: rgba(24, 24, 28, 0.38) !important; border-color: rgba(242, 241, 236, 0.38); }

/* Chat rows: the avatar and the gap that replaces it are exactly the same width, so every bubble in a stack lines up */
.chat__msg { --av: 2.6em; }
.chat__msg > .av, .chat__msg > .avatar { width: var(--av) !important; height: var(--av) !important; min-width: var(--av); flex: none; font-size: 1em !important; }
.chat__avatar-gap { width: var(--av) !important; min-width: var(--av); flex: none; }
.chat__msg.is-mine { justify-content: flex-start; }
.chat__msg > .av { font-size: calc(var(--av) * 0.42) !important; }
.chat { --av: calc(var(--u) * 2.6); }
.chat__msg { --av: calc(var(--u) * 2.6); }

/* Chat groups: the plus sits in the group's own header */
.chatgrp__bar { display: flex; align-items: center; justify-content: space-between; padding-right: 6px; }
.chatgrp__bar .chatgrp__head { flex: 1; }
.chatgrp__plus { width: 24px; height: 24px; color: var(--muted); }
.chatgrp__plus svg { width: 14px; height: 14px; }
.chatgrp__plus:hover { color: var(--bone); background: rgba(242, 241, 236, 0.08); }
.chat__channels { padding-bottom: 12px; }

/* Side panel: Teams header lines up with the rows around it; icons never get a frame */
.side__head { margin: 12px 0 2px; padding: 0 6px 0 12px; }
.side__toggle { gap: 10px; padding: 7px 0; font-size: 14px; font-weight: 500; color: var(--soft); background: none; }
.side__toggle:hover { background: none; color: var(--bone); }
.side__chev { width: 16px; height: 16px; }
.side__chev svg { width: 14px; height: 14px; }
.side__head .icon-btn { width: 24px; height: 24px; color: var(--muted); }
.side__head .icon-btn svg { width: 14px; height: 14px; }
.side__head .icon-btn:hover { color: var(--bone); background: rgba(242, 241, 236, 0.08); }
.side__icon { border: 0 !important; background: none !important; box-shadow: none !important; outline: 0; padding: 0; }
.side__link:focus { outline: none; }
.side__link:focus-visible { outline: 1px solid rgba(242, 241, 236, 0.4); outline-offset: -1px; }
.side__link { -webkit-tap-highlight-color: transparent; }
.side__link .badge[hidden] { display: none !important; }

/* Sub-teams sit under their parent, indented, with a thin line to show they belong to it */
.side__team--sub { position: relative; margin-left: 14px; }
.side__team--sub::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: rgba(242, 241, 236, 0.14); }
.side__team--sub .side__link { padding-left: 14px; }
.team-row--sub { padding-left: 28px; }

/* ---------- Invitations in the inbox, and team chips on members ---------- */

.invites { display: flex; flex-direction: column; gap: 8px; padding: 16px 24px 8px; }
.invite { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(22, 22, 27, 0.4); border: 1px solid rgba(242, 241, 236, 0.16); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset; transition: opacity 0.2s, transform 0.25s var(--ease); }
.invite.is-busy { opacity: 0.5; pointer-events: none; }
.invite__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invite__text .muted { font-size: 12px; }
.invite__actions { display: flex; gap: 8px; flex: none; }

.member__teams { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.team-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid rgba(242, 241, 236, 0.16); background: rgba(242, 241, 236, 0.06); font-size: 12px; color: var(--soft); }
.team-chip--pending { border-style: dashed; color: var(--muted); }
.team-chip__wait { font-size: 11px; opacity: 0.8; }
.team-chip__x { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; color: var(--muted); transition: color 0.15s, background 0.15s; }
.team-chip__x:hover { color: var(--bone); background: rgba(242, 241, 236, 0.12); }
.team-chip__x svg { width: 10px; height: 10px; }
.team-chip--add { width: 24px; padding: 0; justify-content: center; border-style: dashed; color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.team-chip--add:hover { color: var(--bone); border-color: rgba(242, 241, 236, 0.4); }
.team-chip--add svg { width: 12px; height: 12px; }
@media (max-width: 760px) { .invite { flex-wrap: wrap; } .invite__actions { width: 100%; } }

/* Desktop app download links under the login button; hidden inside the app itself. */
.gate__apps { margin: 16px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
.gate__apps a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.gate__apps a:hover { color: var(--accent); }
html.is-desktop .gate__apps { display: none; }

/* A new version of the desktop app is ready: a small mark on the profile button, the menu entry in the accent colour. */
.side__update { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; background: var(--accent); color: var(--ink); }
.side__update[hidden] { display: none; }
.side__update svg { width: 12px; height: 12px; transform: rotate(180deg); }
.acct__item.is-update { color: var(--accent); }
.acct__item.is-update .acct__icon svg { transform: rotate(180deg); }