/* The look of the chat: the same design tokens as the Redmine theme
 * (ChkAI-Dev/redmine, docker/redmine/themes/chkai/stylesheets/application.css).
 * Light and dark follow the operating system. Colours come only from the tokens below.
 * One primary (blue) button per screen for its main action; status shown with colour and words.
 * The PC screen is design B (detailed design 1-10, 2026-10-16): a dark strip on the left, the conversation in
 * the middle and one panel on the right. Only the strip leaves the Redmine colours: its tokens (--side-*) are the
 * one set added here, for light and for dark. No JavaScript is used for menus or panels.
 */

:root {
  --surface-page: #efefef;
  --surface-panel: #ffffff;
  --surface-raised: #f5f5f5;
  --surface-input: #ffffff;
  --surface-hover: #e6e6e6;
  --border-muted: #e0e0e0;
  --border-default: #c8c8c8;
  --border-strong: #7d7d7d;
  --ink: #1c1c1c;
  --ink-muted: #565656;
  --ink-subtle: #666666;
  --accent: #0550ae;
  --accent-fill: #0969da;
  --on-accent: #ffffff;
  --focus-ring: var(--accent);
  --tab-active: #bc4c00;
  --status-new: #0550ae;
  --status-new-bg: #0550ae14;
  --status-progress: #7a4f00;
  --status-progress-bg: #7a4f0014;
  --status-resolved: #166a2e;
  --status-resolved-bg: #166a2e14;
  --status-rejected: #555555;
  --status-rejected-bg: #55555514;
  --status-danger: #b4161f;
  --status-danger-bg: #b4161f14;
  --shadow-overlay: 0 8px 24px 0 rgba(20, 20, 20, 0.18);
  --side-bg: #1f2328;
  --side-ink: #d6d9dd;
  --side-muted: #9198a1;
  --side-hover: #2d333b;
  --side-active: #0969da;
  --side-strong: #ffffff;
  --side-border: #ffffff14;
  color-scheme: light;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --font-sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
  --control-height: 36px;
  --side-width: 264px;
  --panel-width: 420px;
  --head-height: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: #121212;
    --surface-panel: #1a1a1a;
    --surface-raised: #232323;
    --surface-input: #0e0e0e;
    --surface-hover: #2b2b2b;
    --border-muted: #2b2b2b;
    --border-default: #3a3a3a;
    --border-strong: #767676;
    --ink: #ececec;
    --ink-muted: #adadad;
    --ink-subtle: #9a9a9a;
    --accent: #58a6ff;
    --accent-fill: #1f6feb;
    --on-accent: #ffffff;
    --tab-active: #f0883e;
    --status-new: #58a6ff;
    --status-new-bg: #58a6ff1a;
    --status-progress: #d29922;
    --status-progress-bg: #d299221a;
    --status-resolved: #3fb950;
    --status-resolved-bg: #3fb9501a;
    --status-rejected: #a8a8a8;
    --status-rejected-bg: #a8a8a81a;
    --status-danger: #ff7b72;
    --status-danger-bg: #ff7b721a;
    --shadow-overlay: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
    --side-bg: #0d1117;
    --side-ink: #d6d9dd;
    --side-muted: #9198a1;
    --side-hover: #1c2128;
    --side-active: #0969da;
    --side-strong: #ffffff;
    --side-border: #ffffff14;
    color-scheme: dark;
  }
}


/* --- Page, text, links ------------------------------------------------------------------------------------- */

html, body { background: var(--surface-page); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  color: var(--ink);
}
main { box-sizing: border-box; }
a, a:link, a:visited { color: var(--accent); text-decoration: none; }
a:hover, a:active { color: var(--accent); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
h1 { margin: 0 0 var(--space-4); font-size: 24px; line-height: 34px; font-weight: 700; color: var(--ink); }
h2 { margin: var(--space-5) 0 var(--space-2); font-size: 18px; line-height: 28px; font-weight: 700; color: var(--ink); }
h3 { margin: 0 0 var(--space-1); font-size: 14px; line-height: 22px; font-weight: 700; color: var(--ink); }
code, pre, kbd { font-family: var(--font-mono); }
code { padding: 0 var(--space-1); background: var(--surface-raised); border-radius: var(--radius-sm); }
pre {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
}
pre code { padding: 0; background: none; }
ol, ul { margin: 0; padding: 0; list-style: none; }
.hint, .meta { font-size: 12px; line-height: 18px; color: var(--ink-subtle); }
.meta { font-size: 13px; }
.empty { padding: var(--space-5); text-align: center; font-size: 13px; color: var(--ink-subtle); }
.read-more { margin: var(--space-2) 0; font-size: 13px; text-align: center; }
.read-more a + a { margin-inline-start: var(--space-3); }
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Controls: inputs and buttons (at least 36px tall) ------------------------------------------------------ */

input, select, textarea, button {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background-color: var(--surface-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
input[type="text"], input[type="search"], input[type="email"], select {
  box-sizing: border-box;
  min-block-size: var(--control-height);
  padding: 6px 10px;
}
textarea {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  line-height: 24px;
  resize: vertical;
}
input::placeholder, textarea::placeholder { color: var(--ink-subtle); }
input:focus, select:focus, textarea:focus { border-color: var(--focus-ring); outline: 2px solid var(--focus-ring); outline-offset: 0; }
input[type="checkbox"] { inline-size: 16px; block-size: 16px; accent-color: var(--accent-fill); }

input[type="submit"], button, a.button {
  box-sizing: border-box;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-height);
  padding: 6px var(--space-4);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--ink);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
}
input[type="submit"]:hover, button:hover, a.button:hover { background-color: var(--surface-hover); text-decoration: none; color: var(--ink); }
input[type="submit"].primary, button.primary {
  color: var(--on-accent);
  background-color: var(--accent-fill);
  border-color: var(--accent-fill);
}
input[type="submit"].primary:hover, button.primary:hover { background-color: var(--accent-fill); filter: brightness(1.12); }
button.danger { color: var(--status-danger); background-color: var(--surface-panel); border-color: var(--status-danger); }
button.danger:hover { background-color: var(--status-danger-bg); }
.small, input[type="submit"].small, a.button.small { min-block-size: 30px; padding: 2px 10px; font-size: 13px; }
a.button.on { color: var(--accent); border-color: var(--accent); }
input:disabled, textarea:disabled, button:disabled { color: var(--ink-subtle); background-color: var(--surface-raised); border-color: var(--border-default); cursor: not-allowed; }
form.button_to { display: inline-flex; margin: 0; }
form { margin: 0; }
form label { font-weight: 600; color: var(--ink-muted); }

form.stacked { display: flex; flex-direction: column; gap: var(--space-2); }
form.stacked input[type="text"] { width: 100%; }
.form-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-block-start: var(--space-2); }

.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline-start: 10px;
  color: var(--ink-subtle);
  background: var(--surface-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
}
.search-form:focus-within { border-color: var(--focus-ring); outline: 2px solid var(--focus-ring); }
.search-form input[type="search"] { flex: 1 1 auto; min-width: 0; padding-inline: 0; border: 0; background: transparent; }
.search-form input[type="search"]:focus { outline: 0; }
.search-form input[type="submit"] { min-block-size: 30px; margin: 2px; padding: 2px 12px; font-size: 13px; border-radius: var(--radius-pill); }

/* --- Badges and tags -------------------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-inline-size: 20px;
  block-size: 20px;
  margin-inline-start: auto;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent-fill);
  border-radius: var(--radius-pill);
}
.badge.mention { color: var(--surface-panel); background: var(--status-danger); }
.tag, .panel-kind, .kind-tag {
  display: inline-block;
  padding: 0 var(--space-2);
  font-size: 11px;
  line-height: 20px;
  font-weight: 700;
  border-radius: var(--radius-sm);
}
.tag { color: var(--ink-muted); background: var(--surface-raised); border: 1px solid var(--border-default); }
.kind-tag { border-radius: var(--radius-pill); }
.kind-tag.kind-mention { color: var(--status-progress); background: var(--status-progress-bg); }
.kind-tag.kind-reply { color: var(--status-resolved); background: var(--status-resolved-bg); }

/* --- Avatars: the first letter on one of six tones chosen on the server from the person's ID ----------------- */

.avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  color: var(--surface-panel);
  border-radius: var(--radius-md);
}
.avatar-sm { inline-size: 28px; block-size: 28px; font-size: 13px; }
.avatar-xs { inline-size: 18px; block-size: 18px; font-size: 10px; border-radius: var(--radius-sm); }
.avatar.tone-0 { background: var(--accent); }
.avatar.tone-1 { background: var(--status-resolved); }
.avatar.tone-2 { background: var(--tab-active); }
.avatar.tone-3 { background: var(--status-danger); }
.avatar.tone-4 { background: var(--status-progress); }
.avatar.tone-5 { background: var(--status-rejected); }

/* --- The frame: strip, conversation, panel ---------------------------------------------------------------- */

body.has-shell { display: flex; flex-direction: column; block-size: 100vh; block-size: 100dvh; overflow: hidden; }
.shell { display: flex; flex: 1; min-block-size: 0; }
.work { display: flex; flex: 1; min-inline-size: 0; background: var(--surface-panel); }

.side {
  display: flex;
  flex-direction: column;
  flex: none;
  inline-size: var(--side-width);
  color: var(--side-ink);
  background: var(--side-bg);
}
.side a, .side a:link, .side a:visited { color: var(--side-ink); }
.side a:hover { text-decoration: none; }
.side :focus-visible { outline-color: var(--side-strong); }
.side-label { display: block; font-size: 11px; line-height: 16px; color: var(--side-muted); }
.side-project { padding: 14px 14px 10px; border-block-end: 1px solid var(--side-border); }
.side .side-project-name { display: block; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--side-strong); overflow-wrap: anywhere; }
.side .side-project-name:hover { text-decoration: underline; }
.project-switcher { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; margin-block-start: var(--space-1); }
.project-switcher .side-label { display: inline; }
.side .project-switcher a { font-size: 12px; color: var(--side-muted); }
.side .project-switcher a:hover { color: var(--side-strong); text-decoration: underline; }

.side-nav { padding: var(--space-2); }
.side-nav a, .side-channels li a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 32px;
  padding: 0 10px;
  font-size: 14px;
  border-radius: var(--radius-md);
}
.side-nav a:hover, .side-channels li:hover { background: var(--side-hover); }
.side .side-nav a.on { color: var(--side-strong); background: var(--side-active); }
.side-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 10px 2px 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--side-muted);
}
.side .side-add { display: inline-flex; padding: 4px; color: var(--side-muted); border-radius: var(--radius-sm); }
.side .side-add:hover { color: var(--side-strong); background: var(--side-hover); }
.side-channels { flex: 1; min-block-size: 0; padding: 0 var(--space-2) var(--space-2); overflow: auto; }
.side-channels li { display: flex; align-items: center; padding-inline-end: var(--space-2); border-radius: var(--radius-md); }
.side-channels li a { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-channels .hash { opacity: 0.6; }
.side-channels li.unread a { font-weight: 700; color: var(--side-strong); }
.side-channels li.current { background: var(--side-active); }
.side-channels li.current a { color: var(--side-strong); }
.side-channels .badge { flex: none; }
.side-channels .unread.badge { color: var(--side-strong); background: var(--side-active); }
.side-channels li.current .unread.badge { color: var(--side-bg); background: var(--side-strong); }
.side-archived summary {
  margin: 10px 10px 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--side-muted);
  cursor: pointer;
}
.side .side-archived a { color: var(--side-muted); }
.side-me {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
  font-size: 13px;
  border-block-start: 1px solid var(--side-border);
}

/* --- The conversation in the middle ----------------------------------------------------------------------- */

.center { display: flex; flex: 1; flex-direction: column; min-inline-size: 0; }
.center-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  block-size: var(--head-height);
  padding: 0 20px;
  border-block-end: 1px solid var(--border-muted);
}
.center-head h1 { margin: 0; font-size: 18px; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center-head .search-form { flex: 0 1 300px; margin-inline-start: auto; }
.center-scroll { flex: 1; min-block-size: 0; padding: var(--space-2) 20px; overflow: auto; }
/* A long list opens scrolled to its newest end, by the box (no JavaScript scrolls it); a short one starts at the top. */
.stick-bottom { display: flex; flex-direction: column-reverse; }
.stick-bottom > * { margin-block-end: auto; }
.center-compose { flex: none; padding: var(--space-2) 20px 18px; }

.date-sep { display: flex; align-items: center; gap: var(--space-2); margin: 10px 0 4px; font-size: 12px; color: var(--ink-subtle); }
.date-sep::after { flex: 1; block-size: 1px; content: ""; background: var(--border-muted); }
.unread-line { display: flex; align-items: center; gap: var(--space-2); margin: 6px 0; font-size: 12px; font-weight: 700; color: var(--status-danger); }
.unread-line::before, .unread-line::after { flex: 1; block-size: 1px; content: ""; background: var(--status-danger); }
.unread-line::before { flex: 0 0 12px; }

.message { position: relative; display: flex; gap: var(--space-3); padding: var(--space-2) 10px; border-radius: var(--radius-md); }
.message:hover, .message:focus-within { background: var(--surface-raised); }
.message.current { background: var(--status-new-bg); }
.message:target, .message.focused { background: var(--status-progress-bg); }
.message-main { flex: 1; min-inline-size: 0; }
.message-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.author { font-weight: 700; color: var(--ink); }
.message time, .search-result time, .bell-item time, .version time { font-size: 12px; color: var(--ink-subtle); }
.edited { font-size: 12px; color: var(--ink-subtle); }
.body { overflow-wrap: anywhere; }
.body p { margin: 0 0 var(--space-1); }
.body p:last-child { margin-block-end: 0; }
.body ul { margin: 2px 0 var(--space-1); padding-inline-start: 1.5em; list-style: disc; }
.body ol { margin: 2px 0 var(--space-1); padding-inline-start: 1.5em; list-style: decimal; }
.body .mention { padding: 0 3px; font-weight: 700; color: var(--status-progress); background: var(--status-progress-bg); border-radius: var(--radius-sm); }
.body.deleted { margin: 0; font-style: italic; color: var(--ink-subtle); }
.body.deleted a { margin-inline-start: var(--space-2); font-style: normal; font-size: 13px; }

.reactions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-block-start: var(--space-1); }
.reactions button.reaction {
  min-block-size: 24px;
  padding: 0 var(--space-2);
  font-size: 12px;
  font-weight: 400;
  background: var(--surface-raised);
  border-color: var(--border-muted);
  border-radius: var(--radius-pill);
}
.reactions button.reaction.mine { color: var(--accent); background: var(--status-new-bg); border-color: var(--accent-fill); }

.message-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 6px; font-size: 13px; }
.replies-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px 1px 4px;
  background: var(--surface-panel);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-pill);
}
.new-replies {
  padding: 1px var(--space-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--status-resolved);
  background: var(--status-resolved-bg);
  border-radius: var(--radius-pill);
}

/* The menu of a message shows on pointing at it or moving the keyboard into it (:hover and :focus-within). */
.message-actions {
  position: absolute;
  inset-block-start: -14px;
  inset-inline-end: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  pointer-events: none;
}
.message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; pointer-events: auto; }
.message-actions button, .message-actions a {
  min-block-size: 28px;
  min-inline-size: 28px;
  padding: 0 6px;
  font-weight: 400;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
}
.message-actions a { display: inline-flex; align-items: center; justify-content: center; }
.message-actions button:hover, .message-actions a:hover { color: var(--ink); background: var(--surface-hover); }
.message-actions .sep { inline-size: 1px; align-self: stretch; margin: 4px 2px; background: var(--border-muted); }

.composer, .edit-box { position: relative; background: var(--surface-input); border: 1px solid var(--border-default); border-radius: 12px; }
.composer:focus-within, .edit-box { border-color: var(--accent-fill); }
.edit-box { margin-block-start: var(--space-1); }
.composer textarea, .edit-box textarea { display: block; min-block-size: 64px; border: 0; border-radius: 12px 12px 0 0; background: transparent; }
.composer textarea:focus, .edit-box textarea:focus { outline: 0; }
.composer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 8px 10px;
  border-block-start: 1px solid var(--border-muted);
}
.composer-bar .hint { flex: 1; }
.edit-box .errors { margin: var(--space-2) var(--space-2) 0; }

.recipients summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 30px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
}
.recipients summary::-webkit-details-marker { display: none; }
.recipients[open] summary { color: var(--accent); border-color: var(--accent); }
.recipient-list {
  position: absolute;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-inline-size: 240px;
  max-block-size: 280px;
  padding: var(--space-2);
  overflow: auto;
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}
.recipient-list label { display: flex; gap: var(--space-2); align-items: center; padding: 4px 6px; font-weight: 400; color: var(--ink); border-radius: var(--radius-sm); }
.recipient-list label:hover { background: var(--surface-hover); }

/* --- The channel list: one card per channel --------------------------------------------------------------- */

.channel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); padding: var(--space-3) 0; }
.channel-card, .channel-card:link, .channel-card:visited {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
  color: var(--ink);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg);
}
.channel-card:hover { color: var(--ink); text-decoration: none; border-color: var(--accent-fill); }
.card-name { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.card-note { font-size: 13px; color: var(--ink-muted); }
.channel-card.new-card { flex-direction: row; align-items: center; justify-content: center; color: var(--accent); border-style: dashed; }
.list-archived { display: none; }

/* --- The panel on the right ------------------------------------------------------------------------------- */

.panel {
  display: flex;
  flex: none;
  flex-direction: column;
  inline-size: var(--panel-width);
  background: var(--surface-panel);
  border-inline-start: 1px solid var(--border-muted);
}
.panel-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  block-size: var(--head-height);
  padding: 0 var(--space-4);
  border-block-end: 1px solid var(--border-muted);
}
.panel-head h2 { margin: 0; font-size: 16px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-kind { flex: none; color: var(--on-accent); background: var(--accent-fill); }
.panel-close, .panel-close:link, .panel-close:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  margin-inline-start: auto;
  color: var(--ink-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.panel-close:hover { color: var(--ink); background: var(--surface-hover); }
.panel-note { margin: 0; padding: var(--space-2) var(--space-4); font-size: 12px; color: var(--ink-subtle); border-block-end: 1px solid var(--border-muted); }
.panel-scroll { flex: 1; min-block-size: 0; padding: var(--space-2) var(--space-3); overflow: auto; }
.panel-body { padding: 20px; }
.panel-search .panel-body { padding: var(--space-3) var(--space-4); }
.panel-search .panel-body .hint { margin: 0; }
.panel-compose { flex: none; padding: var(--space-2) var(--space-3) 14px; }

.bell-item, .bell-item:link, .bell-item:visited { display: flex; gap: 10px; padding: var(--space-3); color: var(--ink); border-radius: var(--radius-md); }
.bell-item, .bell-item:link, .bell-item:visited { margin-block-end: var(--space-1); background: var(--status-new-bg); }
.bell-item:hover { color: var(--ink); text-decoration: none; background: var(--surface-hover); }
.bell-text { display: flex; flex-direction: column; min-inline-size: 0; }
.bell-where { font-size: 12px; color: var(--ink-subtle); }
.bell-where b { color: var(--ink); }
.bell-body {
  display: -webkit-box;
  font-size: 13px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.search-result a, .search-result a:link, .search-result a:visited { display: block; padding: 10px var(--space-3); color: var(--ink); border-radius: var(--radius-md); }
.search-result a:hover { text-decoration: none; background: var(--surface-raised); }
.search-where { display: block; font-size: 12px; color: var(--ink-subtle); }
.search-where b, .search-where .author { color: var(--ink); }
.search-result .body { display: block; }
.search-result mark { color: inherit; background: var(--status-progress-bg); border-radius: 2px; }

.danger-zone { margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-muted); }
.danger-zone p { margin: 0 0 10px; font-size: 13px; color: var(--ink-muted); }
.panel-settings .hint { margin-block-start: var(--space-4); }

.versions { margin-block-start: var(--space-4); }
.version { position: relative; margin-inline-start: var(--space-2); padding: 0 0 var(--space-4) 22px; border-inline-start: 2px solid var(--border-muted); }
.version::before {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: -7px;
  box-sizing: border-box;
  inline-size: 12px;
  block-size: 12px;
  content: "";
  background: var(--surface-panel);
  border: 2px solid var(--border-strong);
  border-radius: 50%;
}
.version.now::before { background: var(--accent-fill); border-color: var(--accent-fill); }
.version-head { display: block; margin-block-end: var(--space-1); font-size: 12px; color: var(--ink-subtle); }
.version-head b { color: var(--ink); }
.version-body { padding: 10px var(--space-3); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-raised); border-radius: var(--radius-md); }

/* --- Notices: a card with a coloured top edge, words first ------------------------------------------------- */

.errors, .flash, .realtime-offline { color: var(--ink); }
.errors {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger);
  border-radius: var(--radius-md);
}
.errors p { margin: 0; }
.flash {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--status-resolved-bg);
  border: 1px solid var(--status-resolved);
  border-radius: var(--radius-md);
}

body.notice-page { display: grid; place-items: center; min-block-size: 100vh; }
body.notice-page.dimmed { background: color-mix(in srgb, var(--side-bg) 55%, var(--surface-page)); }
.notice-screen {
  max-inline-size: 560px;
  margin: var(--space-5) var(--space-4);
  padding: 28px 32px;
  color: var(--ink);
  background: var(--surface-panel);
  border: 1px solid var(--border-muted);
  border-block-start: 4px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}
.notice-screen.tone-warning { border-block-start-color: var(--status-progress); }
.notice-screen.tone-danger { border-block-start-color: var(--status-danger); }
.notice-screen h1 { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-2); font-size: 20px; line-height: 30px; }
.notice-screen h1 .icon { inline-size: 20px; block-size: 20px; }
.notice-screen p { margin: 0 0 var(--space-3); color: var(--ink-muted); }
.notice-screen form.resend { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.notice-screen form.resend textarea, .notice-screen form.resend input[type="text"] { width: 100%; }

.realtime-offline {
  flex: none;
  margin: 0;
  padding: 6px var(--space-4);
  font-size: 13px;
  font-weight: 700;
  color: var(--status-progress);
  background: var(--status-progress-bg);
  border-block-end: 1px solid var(--border-muted);
}
.realtime-offline[hidden] { display: none; }

/* --- Pages without a project (the bell when in no project, the local sign-in) ------------------------------- */

main.bell, main.dev-login {
  max-width: 960px;
  margin: var(--space-5) auto;
  padding: var(--space-5);
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
main.bell li { padding: var(--space-2) 0; border-block-start: 1px solid var(--border-muted); }

/* --- Without a pointer that hovers, the message menu stays in view under the message ------------------------ */

@media (hover: none) {
  .message { flex-wrap: wrap; }
  .message-actions {
    position: static;
    flex: 1 1 100%;
    flex-wrap: wrap;
    margin-inline-start: 48px;
    border-radius: var(--radius-md);
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
  }
}

/* --- Narrow screens (phones): one column. The phone look is to be designed later; this keeps it usable. ---- */

@media (max-width: 900px) {
  body.has-shell { display: block; block-size: auto; overflow: visible; }
  .shell, .work { display: block; }
  .side { inline-size: auto; }
  .side-section, .side-channels, .side-me { display: none; }
  .side-nav { display: flex; gap: var(--space-1); padding-block-start: 0; }
  .center-head { flex-wrap: wrap; block-size: auto; padding: var(--space-3) var(--space-4); }
  .center-head .search-form { flex: 1 1 100%; margin-inline-start: 0; }
  .center-scroll { padding: var(--space-2) var(--space-3); overflow: visible; }
  .stick-bottom { display: block; }
  .center-compose { padding: var(--space-2) var(--space-3) var(--space-4); }
  .panel { inline-size: auto; border-inline-start: 0; border-block-start: 1px solid var(--border-muted); }
  .panel-scroll { overflow: visible; }
  .list-archived { display: block; margin-block-start: var(--space-3); }
  .list-archived summary { font-weight: 600; color: var(--ink-muted); cursor: pointer; }
  .list-archived li { padding: var(--space-2) 10px; border-block-start: 1px solid var(--border-muted); }
  .message { flex-wrap: wrap; }
  .message-actions {
    position: static;
    flex: 1 1 100%;
    flex-wrap: wrap;
    margin-inline-start: 48px;
    border-radius: var(--radius-md);
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
  }
  .notice-screen { padding: var(--space-5) var(--space-4); }
}

/* --- First sign-in page (same card as Redmine's sign-in page; detailed design 1-10) ----------------------------- */

body.signin-page { display: flex; justify-content: center; padding: var(--space-7) var(--space-4); }
.signin-card {
  align-self: flex-start;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 440px;
  padding: var(--space-6) var(--space-6) var(--space-5);
  text-align: center;
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.signin-card__product { margin: 0 0 var(--space-5); font-size: 32px; line-height: 44px; font-weight: 700; color: var(--ink); }
.signin-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 64px;
  block-size: 64px;
  margin-block-end: var(--space-4);
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.signin-card__mark svg { inline-size: 40px; block-size: 40px; }
.signin-card__title { margin: 0 0 var(--space-2); font-size: 20px; line-height: 30px; font-weight: 700; color: var(--ink); }
.signin-card__lead { margin: 0 0 var(--space-5); font-size: 14px; line-height: 24px; color: var(--ink-muted); }
/* Break the lead between its two phrases, not in the middle of a word. */
.signin-card__lead span { display: inline-block; }
.signin-card__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: 48px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 700;
  color: var(--on-accent);
  text-decoration: none;
  background: var(--accent-fill);
  border: 1px solid var(--accent-fill);
  border-radius: var(--radius-md);
}
.signin-card__button:link, .signin-card__button:visited, .signin-card__button:hover, .signin-card__button:active {
  color: var(--on-accent);
  text-decoration: none;
}
.signin-card__button:hover { filter: brightness(1.12); }
.signin-card__button svg { inline-size: 20px; block-size: 20px; }