/* ================= THE MESSAGE CENTER, IN THIS EXPERIENCE'S CLOTHES =================
   Not a second Message Center — JS/components/message-center.js's panel, filters, unread model
   and badge stay canonical; this file only restyles the markup, scoped under `.alt-app`. No
   selector here may hide a control, reorder filters, or change what a click does. */

.alt-app .modal-overlay#messageCenter{ background:rgba(4, 10, 20, .58); }
body.theme-light .alt-app .modal-overlay#messageCenter{ background:rgba(19, 32, 54, .34); }

/* The canonical card is 560×620, right beside a full application but cramped alone — capped so
   it never fills edge to edge on a large display. */
.alt-app .mc-card{
  background:var(--a-panel); border:1px solid var(--a-line-strong);
  border-radius:var(--a-r-lg); box-shadow:var(--a-shadow-lg);
  font-family:var(--a-body);
  width:min(50vw, 900px); max-width:min(94vw, 900px);
  height:min(72vh, 860px);
}
@media (max-width:1023px){
  .alt-app .mc-card{ width:min(94vw, 640px); height:min(86vh, 860px); }
}
.alt-app .mc-card .modal-title-row{
  border-bottom:1px solid var(--a-line); padding:12px var(--a-4);
}
.alt-app .mc-card h3{
  font:600 15px/1.2 var(--a-display); letter-spacing:.01em; color:var(--a-text);
}
/* The close button matches every shared dialog's — see alt-shared-dialogs.css, which owns
   `.mc-card .icon-btn`. */

/* The three filters draw as a tab strip: the active one is blue with a rule under it, because
   colour alone is never the signal. */
.alt-app .mc-card .modal-tabs{
  gap:2px; padding:0 var(--a-4); border-bottom:1px solid var(--a-line); background:transparent;
}
/* The underline is the tab's own bottom border, not an absolute bar — an absolutely-positioned
   bar at `bottom:-1px` forced a vertical scrollbar here (`.modal-tabs` has `overflow-x:auto`,
   and CSS computes the other axis to `auto` too). The 2px border replaces 2px of padding, so
   the strip stays the same height. */
.alt-app .mc-card .modal-tab{
  background:none; border:0; border-bottom:2px solid transparent; border-radius:0;
  padding:9px 12px 7px; color:var(--a-dim);
  font:600 13px/1 var(--a-body); letter-spacing:.01em;
}
.alt-app .mc-card .modal-tab:hover{ color:var(--a-text); }
.alt-app .mc-card .modal-tab.active{
  color:var(--a-blue-text); background:transparent; border-bottom-color:var(--a-blue);
}
.alt-app .mc-card .modal-tab:focus-visible{
  outline:2px solid var(--a-ring); outline-offset:-2px; border-radius:var(--a-r-sm);
}

.alt-app .mc-card .modal-pane{ background:transparent; padding:var(--a-3) var(--a-4); }
.alt-app .mc-card .modal-footer{
  border-top:1px solid var(--a-line); padding:10px var(--a-4); background:var(--a-raised);
}
/* Weight 600, the one value the suite uses for a button (`.a-btn` in alt-components.css,
   `.alt-app .btn` in okr-suite.css) — this rule said 500 once, a locally invented third answer
   that made the same control visibly lighter depending which page opened the panel from. */
.alt-app .mc-card .btn{
  background:var(--a-panel); border:1px solid var(--a-line-strong); color:var(--a-text);
  border-radius:var(--a-r-sm); font:600 13px/1 var(--a-body); height:var(--a-ctl);
  /* Stated because nothing else declares `.btn` geometry on a suite page — unsaid, buttons
     would take the user-agent default. Every button this panel draws carries `.small`, sized
     below, so this line is otherwise inert. */
  padding:0 var(--a-3);
}
/* `.small` is its own tier: 26px, matching the suite's other translations of a classic
   `.btn.small` (alt-components.css:363, alt-shared-dialogs.css:539, okr-suite.css:200) — not
   `--a-ctl`, which is the toolbar's control height, not this tier. Specificity
   (`.alt-app .mc-card .btn.small`, 0,4,0) beats okr-suite.css's `.alt-app .btn.small` regardless
   of link order, and nothing here reaches a classic page since `.alt-app` is absent there. */
.alt-app .mc-card .btn.small{ height:26px; padding:0 9px; font-size:12px; }
.alt-app .mc-card .btn:hover{ border-color:var(--a-blue); color:var(--a-blue-text); }
.alt-app .mc-card .btn.primary{
  background:var(--a-blue-fill); border-color:transparent; color:#fff;
}

/* One row of the list — the unread marker is a leading-edge bar plus a weight change, the same
   treatment a status takes on a task row. */
.alt-app .mc-item{
  background:var(--a-raised); border:1px solid var(--a-line-soft);
  border-left:3px solid transparent; border-radius:var(--a-r);
  padding:9px 11px; margin-bottom:6px;
}
.alt-app .mc-item:hover{ border-color:var(--a-line-strong); }
.alt-app .mc-item.unread{ border-left-color:var(--a-blue); background:var(--a-blue-soft); }
.alt-app .mc-item .mc-author{ font:600 13px/1.3 var(--a-body); color:var(--a-text); }
.alt-app .mc-item .mc-verb{ font-weight:400; color:var(--a-dim); }
.alt-app .mc-item .mc-when,.alt-app .mc-item .mc-meta{ font-size:11px; color:var(--a-faint); }
.alt-app .mc-item .mc-body{ font-size:13px; line-height:1.5; color:var(--a-text); min-width:0; }
.alt-app .mc-item .mc-excerpt{
  margin:3px 0 4px; padding-left:9px; border-left:2px solid var(--a-line-strong);
  color:var(--a-dim); font-size:13px; line-height:1.5;
}
.alt-app .mc-item .mc-context{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:11px; color:var(--a-faint);
}
.alt-app .mc-item .mc-context .mc-task{ color:var(--a-text); font-weight:600; }
.alt-app .mc-item .mc-src{ color:var(--a-faint); }
.alt-app .mc-item .unread-dot{ background:var(--a-blue); }

/* The same quiet row as CSS/components.css's `.mc-item-unavailable`, reskinned — hover's
   stronger border is cancelled here since there's nothing to open, at the same specificity
   every other `.alt-app .mc-item` override uses. */
.alt-app .mc-item-unavailable:hover,.alt-app .mc-item-unavailable:focus-visible{
  border-color:var(--a-line-soft);
}
.alt-app .mc-item-unavailable .mc-excerpt{
  color:var(--a-faint); font-style:italic; border-left-color:var(--a-line-soft);
}
.alt-app .mc-item .mc-avatar{
  /* Not `--a-panel-2` — that name is never defined. alt-tokens.css has exactly two surface
     elevations (`--a-panel`, `--a-raised`) plus `--a-float`; there's no third role here. */
  background:var(--a-raised); border:1px solid var(--a-line-strong);
  color:var(--a-dim);
}
/* A column, and it says so — this rule once omitted `flex-direction` and inherited `column`
   from CSS/components.css while stating `align-items:center`, ragging the buttons' right edges
   instead of flush-aligning them. `flex-end` right-aligns the group without stretching buttons
   to match the longest one. */
.alt-app .mc-actions{
  display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:0 0 auto;
}
.alt-app .mc-list{ list-style:none; margin:0; padding:0; }
.alt-app .mc-empty,.alt-app .mc-loading{
  color:var(--a-dim); font-size:13px; text-align:center; padding:26px 10px;
}
.alt-app .mc-empty-head{ font:600 14px/1.3 var(--a-display); color:var(--a-text); }
.alt-app .mc-empty-sub{ font-size:13px; color:var(--a-dim); margin-top:4px; }
.alt-app .mc-empty-mark{ color:var(--a-green); }
.alt-app .mc-empty.err{ color:var(--a-red); }
.alt-app .mc-card a{ color:var(--a-blue-text); }
.alt-app .mc-card textarea,.alt-app .mc-card input[type="text"]{
  background:var(--a-bg); border:1px solid var(--a-line-strong); color:var(--a-text);
  border-radius:var(--a-r-sm); font:inherit; font-size:13px;
}
.alt-app .mc-card textarea:focus,.alt-app .mc-card input[type="text"]:focus{
  outline:none; border-color:var(--a-blue); box-shadow:0 0 0 2px var(--a-blue-soft);
}
/* The mention picker and the comment reply chip travel with the panel. */
.alt-app .mention-menu,.alt-app .cfg-popover{
  background:var(--a-float); border:1px solid var(--a-line-strong);
  border-radius:var(--a-r); box-shadow:var(--a-shadow);
}
.alt-app .mention-item{ color:var(--a-text); font-size:13px; }
.alt-app .mention-item.sel,.alt-app .mention-item:hover{ background:var(--a-blue-soft); }

/* ================= THE WATCHING TAB =================
   A third row kind, same card/rail/avatar/timestamp/unread treatment as every other row — only
   the row's CONTENT differs (an eye glyph, a change verb), not a new colour vocabulary.
   `--a-blue`/`--a-green`/`--a-amber`/`--a-red`/`--a-gold` already cover attention/status/
   emphasis; nothing here hides a control or authors a z-index (JS/core/layers.js owns the stack). */

/* `.mc-tab-watching` is a hook for a future need and deliberately declares nothing; the tab
   itself is a `.modal-tab`, built by the component, not markup. */

/* The eye leads — it answers "why am I shown this" before the sentence does, so it carries the
   accent weight, not the faint context-line weight. */
.alt-app .mc-item.mc-watch .mc-src{ color:var(--a-blue-text); }

/* Actor takes the same weight as a mention's author so both lists scan as one column of names;
   the verb stays quiet, like `.mc-verb` elsewhere. */
.alt-app .mc-item.mc-watch .mc-watch-actor{
  font:600 13px/1.3 var(--a-body); color:var(--a-text);
}
.alt-app .mc-item.mc-watch .mc-watch-verb{ font-weight:400; color:var(--a-dim); }

/* One shade quieter than a quoted comment — this is context, not the news. Hidden outright
   (not just styled) when the task has no body text. */
.alt-app .mc-item.mc-watch .mc-excerpt{
  border-left-color:var(--a-line); color:var(--a-faint);
}

/* ================= THE DEDUPE OVERLAY'S FOLD =================
   A folded row (JS/services/message-dedupe.js) reads exactly like any other `.mc-item` — what's
   new is a quiet disclosure beneath it: a toggle plus, once pressed, an indented list of the
   repeats it speaks for. The list is `hidden`, never removed from the DOM. Reuses the row's own
   text classes (`.mc-author`/`.mc-verb`/`.mc-when`) rather than inventing a fourth vocabulary. */
.alt-app .mc-fold{ margin-top:6px; }
.alt-app .mc-fold-list{
  list-style:none; margin:6px 0 0; padding:2px 0 2px 10px;
  border-left:2px dashed var(--a-line);
  display:flex; flex-direction:column; gap:5px;
}
/* One shade quieter than the row above it — same demotion `.mc-watch .mc-excerpt` gives a
   task's own text: these are superseded repeats, not the news. */
.alt-app .mc-fold-row{ font-size:12px; }
.alt-app .mc-fold-row .mc-author{ font-size:12px; color:var(--a-dim); }
.alt-app .mc-fold-row .mc-when{ margin-left:4px; }

/* ================= MOTION =================
   The row's own motion lives in CSS/components.css's unscoped `.mc-item` rules — a stylesheet's
   declaration count is not a page's resolved style. This file adds motion only for its OWN
   chrome: the tabs, buttons, fields and mention rows, each easing on `--dur-micro` (140ms,
   linear — sys_design-system.md §2b), same primitive as every other hover/tab/badge in the suite. */
/* The focus ring itself is not eased — `.mc-card textarea:focus`'s box-shadow must be true the
   frame the keyboard arrives; only the border colour travels with it. */
/* Reduced motion is answered at the token: alt-tokens.css zeroes `--dur-micro` on `.alt-app`
   under `prefers-reduced-motion: reduce`. */
.alt-app .mc-card .modal-tab,
.alt-app .mc-card .btn,
.alt-app .mc-card textarea,
.alt-app .mc-card input[type="text"],
.alt-app .mention-item{
  transition:background-color var(--dur-micro, 140ms) linear,
             border-color     var(--dur-micro, 140ms) linear,
             color            var(--dur-micro, 140ms) linear,
             opacity          var(--dur-micro, 140ms) linear;
}