/* ============================================================
   P0 prototype — layout on top of SEKAI Design System
   Only layout/glue lives here; colours and type come from tokens.
   ============================================================ */

html.world-night {
  /* Sampled from the in-game Nightcord screenshots (2026-11-07) */
  --sekai-canvas: 79 72 105;      /* #4F4869 */
  --sekai-surface: 61 53 90;      /* #3D355A */
  --sekai-surface-hover: 70 63 96;
  --sekai-surface-raised: 107 103 130; /* #6B6782 — cards / input raised */
  --sekai-surface-sunken: 48 41 66;
  --sekai-fg: 246 243 250;
  --sekai-fg-muted: 189 185 202;
  --sekai-fg-subtle: 138 134 148;
}

:root {
  /* The design system asks for Inter + Noto Sans JP; this machine ships
     Noto Sans CJK, so keep the ordered fallback explicit. */
  --sekai-font-sans: "Inter", "Noto Sans CJK SC", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --sekai-font-mono: "JetBrains Mono", "DejaVu Sans Mono", "Noto Sans Mono", monospace;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

html, body { margin: 0; overscroll-behavior-y: none; }
body {
  font-family: var(--sekai-font-sans);
  color: rgb(var(--sekai-fg));
  background: rgb(var(--sekai-canvas));
  -webkit-font-smoothing: antialiased;
}

.icon { width: 20px; height: 20px; display: block; }
.icon-16 { width: 16px; height: 16px; }

:where(button):focus-visible,
:where(a):focus-visible,
:where(textarea):focus-visible {
  outline: 2px solid rgb(var(--sekai-accent) / .8);
  outline-offset: 2px;
}

/* ---------------- shell ---------------- */
.app-shell { position: relative; }

/* ---------------- sidebar ---------------- */
.side-brand {
  font-weight: var(--sekai-weight-semibold);
  font-size: var(--sekai-text-lg);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sekai-sidebar__header { gap: var(--sekai-space-sm); }

.sekai-sidebar__body { padding-bottom: var(--sekai-space-md); }

/* compact Minecraft status card above the channel list */
.side-server {
  flex: 0 0 auto;
  display: block;
  width: calc(100% - 2 * var(--sekai-space-sm));
  margin: 0 var(--sekai-space-sm) var(--sekai-space-sm);
  padding: 8px 10px;
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-md);
  background: rgb(var(--sekai-surface) / .38);
  color: rgb(var(--sekai-fg-muted));
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.side-server:hover { background: rgb(var(--sekai-surface-hover) / .5); }
.side-server:active { transform: translateY(1px); }
.side-server__row { display: flex; align-items: center; gap: 7px; }
.side-server__name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--sekai-text-sm); font-weight: 600; color: rgb(var(--sekai-fg));
}
.side-server__state {
  flex-shrink: 0;
  font-family: var(--sekai-font-mono); font-size: 10px;
  color: rgb(var(--sekai-fg-subtle));
}
.side-server__meta {
  display: block; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--sekai-font-mono); font-size: 10px;
  color: rgb(var(--sekai-fg-subtle));
}
.server-dot {
  width: 7px; height: 7px; flex-shrink: 0;
  border-radius: 999px; background: rgb(var(--sekai-fg-subtle));
}
.side-server[data-state="online"] .server-dot {
  background: rgb(var(--sekai-success));
  box-shadow: 0 0 0 3px rgb(var(--sekai-success) / .16);
}
.side-server[data-state="online"] .side-server__state { color: rgb(var(--sekai-success)); }
.side-server[data-state="offline"] .server-dot { background: rgb(var(--sekai-warning)); }
.side-server[data-state="offline"] .side-server__state { color: rgb(var(--sekai-warning)); }
.side-server[data-state="loading"] .server-dot {
  background: rgb(var(--sekai-accent));
  animation: server-pulse 1.15s ease-in-out infinite;
}
@keyframes server-pulse { 50% { opacity: .3; } }

.side-group { margin-bottom: var(--sekai-space-md); }
.side-group__head { display: flex; align-items: center; justify-content: space-between; padding-right: var(--sekai-space-sm); }
.group-caret { width: 12px; height: 12px; color: rgb(var(--sekai-fg-subtle)); }
.side-group .sekai-section-label {
  display: block;
  margin: var(--sekai-space-sm) 0 var(--sekai-space-2xs) var(--sekai-space-sm);
  font-family: var(--sekai-font-mono);
  font-size: var(--sekai-text-label);
  letter-spacing: .06em;
  text-transform: none;
}

.side-list { margin: 0; padding: 0; list-style: none; }

.sekai-channel {
  width: 100%;
  border: 0;
  border-radius: var(--sekai-radius-md);
  background: transparent;
  color: rgb(var(--sekai-fg-muted));
  text-align: left;
}
.sekai-channel:hover { background: rgb(var(--sekai-canvas) / .55); }
.sekai-channel.is-active { background: rgb(var(--sekai-canvas)); color: rgb(var(--sekai-fg)); }
.sekai-channel .chan-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sekai-channel .icon { color: rgb(var(--sekai-fg-subtle)); }
.sekai-channel.is-active .icon { color: rgb(var(--sekai-accent)); }

.unread-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgb(var(--sekai-accent));
  box-shadow: 0 0 0 3px rgb(var(--sekai-accent) / .16);
  flex-shrink: 0;
}
.unread-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgb(var(--sekai-accent));
  color: rgb(var(--sekai-fg-on-accent));
  font-family: var(--sekai-font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.chan-lock {
  font-family: var(--sekai-font-mono);
  font-size: 10px;
  color: rgb(var(--sekai-fg-subtle));
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-xs);
  padding: 1px 4px;
}

.side-dm { border-top: var(--sekai-hairline-divider); padding-top: var(--sekai-space-xs); }
.side-dm__empty {
  margin: var(--sekai-space-2xs) var(--sekai-space-sm);
  font-size: var(--sekai-text-sm);
  color: rgb(var(--sekai-fg-subtle));
}

.side-me {
  display: flex; align-items: center; gap: var(--sekai-space-sm);
  padding: var(--sekai-space-sm) var(--sekai-space-md);
  border-top: var(--sekai-hairline-divider);
  background: rgb(var(--sekai-surface-sunken) / .55);
}
.side-me__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.side-me__name { font-size: var(--sekai-text-sm); font-weight: 600; }
.side-me__role { font-family: var(--sekai-font-mono); font-size: 10px; color: rgb(var(--sekai-fg-subtle)); }

/* ---------------- top bar ---------------- */
.sekai-bar { gap: var(--sekai-space-sm); }
.bar-icon { display: flex; color: rgb(var(--sekai-fg-subtle)); }
.bar-topic {
  margin-left: var(--sekai-space-xs);
  font-size: var(--sekai-text-sm);
  color: rgb(var(--sekai-fg-subtle));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 42ch;
}
.bar-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 2px;
}
.bar-actions .sekai-window-dots { margin-left: var(--sekai-space-sm); }

.sekai-bar .bar-menu { display: none; }

.icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--sekai-radius-sm);
  background: transparent;
  color: rgb(var(--sekai-fg-muted));
  cursor: pointer;
  transition: background var(--sekai-dur-fast) ease-out, color var(--sekai-dur-fast) ease-out;
}
.icon-btn:hover { background: rgb(var(--sekai-surface-hover)); color: rgb(var(--sekai-fg)); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn--xs { width: 22px; height: 22px; font-size: 14px; }

.has-dot { position: relative; }
.has-dot::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 999px;
  background: rgb(var(--sekai-accent));
  box-shadow: 0 0 0 2px rgb(var(--sekai-surface));
}

/* ---------------- messages ---------------- */
.sekai-messages { scrollbar-gutter: stable; }

.day-divider {
  display: flex; align-items: center; gap: var(--sekai-space-md);
  margin: var(--sekai-space-md) var(--sekai-space-lg) var(--sekai-space-sm);
  font-family: var(--sekai-font-mono);
  font-size: var(--sekai-text-label);
  color: rgb(var(--sekai-fg-subtle));
}
.day-divider::before, .day-divider::after {
  content: ""; height: 1px; flex: 1;
  background: rgb(var(--sekai-line) / var(--sekai-line-a));
}

.new-divider {
  display: flex; align-items: center; gap: var(--sekai-space-md);
  margin: var(--sekai-space-sm) var(--sekai-space-lg);
  font-size: var(--sekai-text-label);
  color: rgb(var(--sekai-accent));
}
.new-divider::before, .new-divider::after {
  content: ""; height: 1px; flex: 1;
  background: rgb(var(--sekai-accent) / .45);
}

.sekai-message { align-items: flex-start; }
.sekai-message__time { font-variant-numeric: tabular-nums; }
.sekai-message__text { line-height: 1.55; }
.sekai-message__text a { color: rgb(var(--sekai-accent)); text-decoration: none; }
.sekai-message__text a:hover { text-decoration: underline; }

.mention {
  color: rgb(var(--sekai-accent));
  background: rgb(var(--sekai-accent) / .14);
  border-radius: var(--sekai-radius-xs);
  padding: 0 4px;
  font-weight: 500;
}

.msg-edited {
  font-family: var(--sekai-font-mono);
  font-size: 10px;
  color: rgb(var(--sekai-fg-subtle));
  margin-left: 2px;
}

/* reactions */
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sekai-space-xs); }
.reaction {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 8px;
  border: var(--sekai-hairline);
  border-radius: 999px;
  background: rgb(var(--sekai-surface) / .6);
  color: rgb(var(--sekai-fg-muted));
  font-family: var(--sekai-font-mono);
  font-size: 11px;
  cursor: pointer;
}
.reaction:hover { background: rgb(var(--sekai-surface-hover)); color: rgb(var(--sekai-fg)); }
.reaction.is-mine { border-color: rgb(var(--sekai-accent) / .55); color: rgb(var(--sekai-accent)); }

/* reply chip */
.sekai-reply-chip { width: 100%; margin-bottom: var(--sekai-space-2xs); }

/* attachments */
.sekai-file-card { max-width: 460px; }
.sekai-file-name { display: block; }
.sekai-image-container { max-width: 420px; margin-top: var(--sekai-space-xs); }
.image-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 160px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgb(var(--sekai-accent) / .18), transparent 60%),
    linear-gradient(145deg, rgb(var(--sekai-surface-raised)), rgb(var(--sekai-surface-sunken)));
  color: rgb(var(--sekai-fg-subtle));
  font-family: var(--sekai-font-mono);
  font-size: var(--sekai-text-label);
  border: 1px dashed rgb(var(--sekai-line-strong) / .35);
  border-radius: var(--sekai-radius-md);
}
.image-placeholder .icon { width: 26px; height: 26px; opacity: .7; }
.sekai-image-caption { font-size: var(--sekai-text-label); color: rgb(var(--sekai-fg-subtle)); padding: var(--sekai-space-2xs) 2px 0; }

.sekai-code-wrapper { max-width: 620px; margin-top: var(--sekai-space-xs); }
.sekai-code-block { font-size: 12px; line-height: 1.6; }

/* AI helper card inside a message */
.ai-card {
  display: flex; align-items: center; gap: var(--sekai-space-md);
  margin-top: var(--sekai-space-sm);
  padding: var(--sekai-space-sm) var(--sekai-space-md);
  max-width: 520px;
  border: var(--sekai-hairline);
  border-left: 3px solid rgb(var(--sekai-accent));
  border-radius: var(--sekai-radius-sm);
  background: rgb(var(--sekai-surface-raised) / .55);
}
.ai-card__icon { color: rgb(var(--sekai-accent)); flex-shrink: 0; }
.ai-card__body { flex: 1; min-width: 0; }
.ai-card__title { font-size: var(--sekai-text-sm); font-weight: 600; }
.ai-card__desc { font-size: var(--sekai-text-label); color: rgb(var(--sekai-fg-subtle)); }

/* ---------------- composer ---------------- */
.sekai-composer { padding-top: var(--sekai-space-sm); }
.sekai-input-shell { align-items: flex-end; box-shadow: 0 1px 0 rgb(255 255 255 / .04) inset; }
.sekai-input-bare { max-height: 160px; line-height: 1.5; padding: 6px 0; }
.composer-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.send-btn {
  width: 34px; height: 34px; margin-left: 4px;
  display: none;
  align-items: center; justify-content: center;
  border: 0; border-radius: var(--sekai-radius-sm);
  background: rgb(var(--sekai-accent));
  color: rgb(var(--sekai-fg-on-accent));
  cursor: pointer;
  transition: filter var(--sekai-dur-fast), transform var(--sekai-dur-fast);
}
.send-btn:hover { filter: brightness(1.08); }
.send-btn:active { transform: translateY(1px) scale(.98); }

.composer-reply {
  display: flex; align-items: center; gap: var(--sekai-space-xs);
  margin-bottom: var(--sekai-space-xs);
  padding: 4px 10px;
  background: rgb(var(--sekai-surface-raised));
  border: var(--sekai-hairline);
  border-left: 2px solid rgb(var(--sekai-accent));
  border-radius: var(--sekai-radius-xs) var(--sekai-radius-xs) 0 0;
  font-size: var(--sekai-text-label);
  color: rgb(var(--sekai-fg-muted));
}
.composer-reply__author { color: rgb(var(--sekai-accent)); font-weight: 600; }
.composer-reply__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- roster ---------------- */
.app-roster {
  width: 240px; flex-shrink: 0;
  display: flex; flex-direction: column;
  padding: var(--sekai-space-md) var(--sekai-space-sm);
  background: rgb(var(--sekai-surface));
  border-left: var(--sekai-hairline-divider);
  overflow-y: auto;
}
.roster-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: var(--sekai-space-sm) var(--sekai-space-sm) var(--sekai-space-2xs);
  font-family: var(--sekai-font-mono);
  font-size: var(--sekai-text-label);
  letter-spacing: .06em;
  color: rgb(var(--sekai-fg-muted));
}
.roster-head--offline { margin-top: var(--sekai-space-lg); }
.roster-count { color: rgb(var(--sekai-fg-subtle)); }
.roster-list { margin: 0; padding: 0; list-style: none; }
.roster-name { font-size: var(--sekai-text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar-wrap .sekai-presence {
  position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px;
  box-shadow: 0 0 0 2px rgb(var(--sekai-surface));
}

/* ---------------- mobile ---------------- */
@media (max-width: 1100px) {
  .app-roster {
    position: fixed; right: 0; top: 0; bottom: 0; z-index: var(--sekai-z-overlay);
    transform: translateX(100%);
    transition: transform var(--sekai-dur-slow) ease;
    box-shadow: -8px 0 24px rgb(0 0 0 / .35);
  }
  .app-roster.is-open { transform: translateX(0); }
  .app-roster.is-open ~ .drawer-scrim,
  .drawer-scrim.is-open { display: block; }
}

@media (max-width: 900px) {
  .bar-topic { display: none; }
}

@media (max-width: 768px) {
  .sekai-bar .bar-menu { display: inline-flex; }
  .sekai-input-bare { font-size: var(--sekai-text-md); }
  .composer-actions .icon-btn:nth-child(2) { display: none; } /* 只隐藏“文字样式”，表情保留 */
  .side-dm { display: none; }
}

@media (max-width: 480px) {
  .bar-actions .icon-btn[title="消息"] { display: none; }
  .sekai-bar { padding-left: var(--sekai-space-sm); padding-right: var(--sekai-space-sm); }
}

.drawer-scrim {
  position: fixed; inset: 0; z-index: calc(var(--sekai-z-overlay) - 1);
  background: rgb(4 4 5 / .45);
  display: none;
}
.drawer-scrim.is-open { display: block; }

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

/* ---------------- small in-message marks ---------------- */
.pin-mark { display: inline-flex; color: rgb(var(--sekai-accent)); }
.pin-mark .icon { width: 14px; height: 14px; }

.solved-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sekai-space-xs);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(67 181 129 / .16);
  color: #7ddca8;
  font-size: var(--sekai-text-label);
}
.solved-chip .icon { width: 14px; height: 14px; }

.sekai-reply-chip .icon { width: 14px; height: 14px; }

.composer-reply[hidden] { display: none; }

.sekai-image-container {
  display: block;
  width: 100%;
  max-width: 420px;
}
.sekai-image-container .image-placeholder { width: 100%; }

.sekai-roster-item .sekai-badge {
  font-size: 10px;
  letter-spacing: 0;
  padding: 1px 5px;
  background: rgb(255 255 255 / .06);
}

/* Avatars: the vendor sets initials to 32px regardless of avatar size,
   which overflows the 28–40px circles. Scale initials per size. */
.sekai-avatar__initials { font-size: 16px; line-height: 1; }
.sekai-avatar--xs .sekai-avatar__initials { font-size: 11px; }
.sekai-avatar--sm .sekai-avatar__initials { font-size: 12px; }
.sekai-avatar--lg .sekai-avatar__initials { font-size: 26px; }
.sekai-avatar--xl .sekai-avatar__initials { font-size: 30px; }

.sekai-badge { line-height: 1.45; }

.image-placeholder {
  background:
    radial-gradient(120% 90% at 20% 0%, rgb(var(--sekai-accent) / .16), transparent 60%),
    linear-gradient(145deg, rgb(var(--sekai-surface-hover)), rgb(var(--sekai-surface-sunken) / .9));
}

/* The roster is always visible on wide screens; its toggle only matters
   when the column is collapsed into an overlay. */

/* Presence dot sits outside the avatar edge so it never covers the initial. */
.avatar-wrap .sekai-presence {
  right: -3px;
  bottom: -3px;
}


/* Send only appears once there is something to send (reference parity). */
.sekai-input-shell.has-text .send-btn { display: inline-flex; }

/* debug: 确保滚动容器不会撑破 flex 布局 */
.sekai-messages { min-height: 0; }

/* ============================================================
   Sidebar extras: logo, file tool link
   ============================================================ */
.side-home { display: flex; align-items: center; gap: var(--sekai-space-sm); text-decoration: none; color: inherit; min-width: 0; }
.side-logo { width: 20px; height: 20px; flex-shrink: 0; opacity: .92; }
.side-nav-link { text-decoration: none; }
.chan-meta {
  font-family: var(--sekai-font-mono);
  font-size: 10px;
  color: rgb(var(--sekai-fg-subtle));
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-xs);
  padding: 1px 4px;
}
.side-tools { margin-top: var(--sekai-space-sm); padding-top: var(--sekai-space-sm); border-top: var(--sekai-hairline-divider); }

/* ============================================================
   Files page
   ============================================================ */
.files-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }

.files-tree {
  width: 232px; flex-shrink: 0;
  display: flex; flex-direction: column;
  padding: var(--sekai-space-md) var(--sekai-space-sm);
  background: rgb(var(--sekai-surface));
  border-right: var(--sekai-hairline-divider);
  overflow-y: auto;
}
.files-tree__head {
  margin: var(--sekai-space-2xs) var(--sekai-space-sm) var(--sekai-space-2xs);
  font-family: var(--sekai-font-mono);
  font-size: var(--sekai-text-label);
  letter-spacing: .06em;
  color: rgb(var(--sekai-fg-muted));
}
.tree-item {
  display: flex; align-items: center; gap: var(--sekai-space-sm);
  width: 100%; margin-bottom: 2px; padding: 7px 10px;
  border: 0; border-radius: var(--sekai-radius-md);
  background: transparent;
  color: rgb(var(--sekai-fg-muted));
  font: inherit; font-size: var(--sekai-text-md);
  text-align: left; cursor: pointer;
}
.tree-item:hover { background: rgb(var(--sekai-canvas) / .55); color: rgb(var(--sekai-fg)); }
.tree-item.is-active { background: rgb(var(--sekai-canvas)); color: rgb(var(--sekai-fg)); }
.tree-item .icon { width: 18px; height: 18px; color: rgb(var(--sekai-fg-subtle)); flex-shrink: 0; }
.tree-item span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count { font-family: var(--sekai-font-mono); font-size: var(--sekai-text-label); color: rgb(var(--sekai-fg-subtle)); }

.storage { margin-top: auto; padding: var(--sekai-space-md) var(--sekai-space-sm) 0; border-top: var(--sekai-hairline-divider); }
.storage__row { display: flex; justify-content: space-between; font-size: var(--sekai-text-label); color: rgb(var(--sekai-fg-muted)); }
.storage__num { font-family: var(--sekai-font-mono); color: rgb(var(--sekai-fg)); }
.storage__bar { height: 4px; margin: var(--sekai-space-xs) 0; border-radius: 999px; background: rgb(var(--sekai-surface-sunken)); overflow: hidden; }
.storage__bar i { display: block; height: 100%; background: rgb(var(--sekai-accent)); border-radius: inherit; }
.storage__hint { font-size: var(--sekai-text-meta); color: rgb(var(--sekai-fg-subtle)); line-height: 1.5; }

.files-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.files-toolbar {
  display: flex; align-items: center; gap: var(--sekai-space-sm);
  padding: var(--sekai-space-md) var(--sekai-space-lg) var(--sekai-space-sm);
  flex-shrink: 0;
}
.crumbs { font-size: var(--sekai-text-lg); font-weight: 600; flex: 1; min-width: 0; }
.files-toolbar__right { display: flex; align-items: center; gap: 4px; }
.chip {
  height: 26px; padding: 0 10px;
  border: var(--sekai-hairline); border-radius: 999px;
  background: transparent; color: rgb(var(--sekai-fg-muted));
  font-family: var(--sekai-font-mono); font-size: 11px;
  cursor: pointer;
}
.chip:hover { background: rgb(var(--sekai-surface-hover)); color: rgb(var(--sekai-fg)); }
.chip.is-active { border-color: rgb(var(--sekai-accent) / .5); color: rgb(var(--sekai-accent)); }
.toolbar-sep { width: 1px; height: 18px; margin: 0 6px; background: rgb(var(--sekai-line) / var(--sekai-line-a)); }
.icon-btn.is-active { background: rgb(var(--sekai-surface-hover)); color: rgb(var(--sekai-fg)); }

.upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; margin-left: 4px; padding: 0 12px;
  border: 0; border-radius: var(--sekai-radius-sm);
  background: rgb(var(--sekai-accent));
  color: rgb(var(--sekai-fg-on-accent));
  font-size: var(--sekai-text-sm); font-weight: 600;
  cursor: pointer;
}
.upload-btn:hover { filter: brightness(1.08); }
.upload-btn .icon { width: 16px; height: 16px; }

.files-dropzone {
  display: flex; align-items: center; justify-content: center; gap: var(--sekai-space-sm);
  margin: 0 var(--sekai-space-lg) var(--sekai-space-sm);
  padding: var(--sekai-space-md);
  border: 1px dashed rgb(var(--sekai-line-strong) / .4);
  border-radius: var(--sekai-radius-md);
  color: rgb(var(--sekai-fg-subtle));
  font-size: var(--sekai-text-sm);
  flex-shrink: 0;
}
.files-dropzone .icon { width: 18px; height: 18px; }
.files-dropzone.is-over { border-color: rgb(var(--sekai-accent)); color: rgb(var(--sekai-accent)); background: rgb(var(--sekai-accent) / .06); }

.files-list, .files-grid { flex: 1; overflow-y: auto; padding: 0 var(--sekai-space-lg) var(--sekai-space-lg); }

.file-row {
  display: flex; align-items: center; gap: var(--sekai-space-md);
  width: 100%; padding: 10px 12px; margin-bottom: 2px;
  border: 0; border-radius: var(--sekai-radius-md);
  background: transparent; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.file-row:hover { background: rgb(var(--sekai-surface-hover) / .55); }
.file-row__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--sekai-radius-sm);
  background: rgb(var(--sekai-surface-raised));
  color: rgb(var(--sekai-fg-muted));
}
.file-row__icon .icon { width: 20px; height: 20px; }
.file-row__main { flex: 1; min-width: 0; }
.file-row__name {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--sekai-text-md); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-row__meta {
  display: flex; gap: 8px;
  margin-top: 2px;
  font-family: var(--sekai-font-mono);
  font-size: 11px; color: rgb(var(--sekai-fg-subtle));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ver {
  flex-shrink: 0;
  padding: 0 5px;
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-xs);
  font-family: var(--sekai-font-mono);
  font-size: 10px;
  color: rgb(var(--sekai-fg-muted));
}
.file-row__actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--sekai-dur-fast); }
.file-row:hover .file-row__actions, .file-row:focus-visible .file-row__actions { opacity: 1; }

.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sekai-space-md); align-content: start; }
.file-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sekai-space-md);
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-md);
  background: rgb(var(--sekai-surface-raised) / .45);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.file-card:hover { border-color: rgb(var(--sekai-accent) / .45); background: rgb(var(--sekai-surface-raised) / .7); }
.file-card__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sekai-radius-sm); background: rgb(var(--sekai-surface-sunken)); color: rgb(var(--sekai-fg-muted)); }
.file-card__icon .icon { width: 22px; height: 22px; }
.file-card__name { font-size: var(--sekai-text-sm); font-weight: 600; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.file-card__meta { font-family: var(--sekai-font-mono); font-size: 11px; color: rgb(var(--sekai-fg-subtle)); }

.file-empty { padding: var(--sekai-space-3xl); text-align: center; color: rgb(var(--sekai-fg-subtle)); font-size: var(--sekai-text-sm); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 8px 14px; border-radius: var(--sekai-radius-sm);
  background: rgb(var(--sekai-surface-raised));
  border: var(--sekai-hairline);
  color: rgb(var(--sekai-fg));
  font-size: var(--sekai-text-sm);
  box-shadow: 0 8px 24px rgb(0 0 0 / .35);
  z-index: var(--sekai-z-modal);
}
.toast[hidden] { display: none; }
.img-broken {
  display: inline-flex; align-items: center;
  margin-top: var(--sekai-space-xs);
  padding: 4px 9px;
  border: 1px dashed rgb(var(--sekai-line-strong) / .3);
  border-radius: var(--sekai-radius-xs);
  color: rgb(var(--sekai-fg-subtle));
  font-size: var(--sekai-text-label);
}
.toast.is-error { border-color: rgb(var(--sekai-danger) / .55); color: rgb(var(--sekai-danger)); }

@media (max-width: 900px) {
  .files-tree { width: 200px; }
  .file-row__meta span:nth-child(2) { display: none; }
}

@media (max-width: 768px) {
  .files-body { flex-direction: column; }
  .files-tree {
    width: 100%; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: var(--sekai-hairline-divider);
    padding: var(--sekai-space-sm);
    gap: 4px;
  }
  .files-tree__head, .storage, .tree-count { display: none; }
  .tree-item { width: auto; margin: 0; flex-shrink: 0; }
  .files-toolbar { padding: var(--sekai-space-sm) var(--sekai-space-md); }
  .files-dropzone { margin: 0 var(--sekai-space-md) var(--sekai-space-sm); }
  .files-list, .files-grid { padding: 0 var(--sekai-space-md) var(--sekai-space-md); }
  .files-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .file-row__meta span:nth-child(n+3) { display: none; }
  .upload-btn span { display: none; }
  .upload-btn { padding: 0 9px; }
}

/* [hidden] must beat the display rules above */
.files-list[hidden], .files-grid[hidden] { display: none !important; }

/* Compact drop hint: it is a hint, not a banner. */
.files-dropzone {
  justify-content: flex-start;
  margin-bottom: var(--sekai-space-xs);
  padding: 10px var(--sekai-space-md);
  font-family: var(--sekai-font-mono);
  font-size: 11px;
}

/* Type tint: zip files read a little warmer than plain text. */
.file-row__icon .icon, .file-card__icon .icon { color: rgb(var(--sekai-fg-muted)); }

/* File rows: hairline separators instead of card edges. */
.file-row { border-bottom: 1px solid rgb(var(--sekai-line) / var(--sekai-line-a)); border-radius: 0; }
.file-row:last-child { border-bottom: 0; }
.file-row:hover { border-bottom-color: transparent; }
.files-list { padding-bottom: var(--sekai-space-sm); }

/* Type accents so the list reads at a glance. */
.file-row[data-type="zip"] .file-row__icon .icon,
.file-card[data-type="zip"] .file-card__icon .icon { color: rgb(var(--sekai-accent)); }

/* Names must be able to ellipsis inside a flex row. */
.file-name-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-row__name { min-width: 0; }
.file-row { max-width: 100%; }

/* ============================================================
   Motion polish
   ============================================================ */
@keyframes ft-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ft-pop  { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* new messages rise, they do not slide the whole list */
.sekai-message.is-new { animation: ft-rise 160ms cubic-bezier(.2,.7,.3,1); }

/* channel switch: quick dip instead of a hard cut */
.sekai-messages { transition: opacity 90ms ease, transform 90ms ease; }
.sekai-messages.is-switching { opacity: .45; transform: translateY(2px); }

/* scrim + drawer */
.drawer-scrim {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.sekai-sidebar { transition: left 220ms cubic-bezier(.2,.8,.2,1); }
.app-roster { transition: transform 220ms cubic-bezier(.2,.8,.2,1); }

/* small controls */
.icon-btn, .chip, .upload-btn, .send-btn, .tree-item, .file-row {
  transition: background 120ms ease, color 120ms ease, transform 80ms ease, filter 120ms ease, border-color 120ms ease;
}
.icon-btn:active, .chip:active, .tree-item:active { transform: translateY(1px); }

/* toast enters from the composer edge */
.toast { animation: ft-rise 180ms cubic-bezier(.2,.7,.3,1); }

/* reply preview slides in */
.composer-reply:not([hidden]) { animation: ft-rise 140ms ease-out; }

/* file cards lift (edge + shadow, per the design rules) */
.file-card { transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease; }
.file-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(0 0 0 / .22); }

/* unread badges pop once when they appear */
.unread-count, .unread-dot { animation: ft-pop 180ms cubic-bezier(.2,.8,.2,1); }

/* search field grows instead of jumping */
.crumbs .sekai-input { transition: width 160ms ease, max-width 160ms ease; width: 120px; }
.crumbs .sekai-input:focus { width: 220px; }

@media (prefers-reduced-motion: reduce) {
  .sekai-message.is-new, .sekai-message.is-pending, .toast, .composer-reply:not([hidden]), .unread-count, .unread-dot, .sk { animation: none; }
  .sekai-messages.is-switching { transform: none; }
}

/* Mobile: thumb-sized controls, notch-safe chrome, no pull-to-refresh in the app shell. */
@media (max-width: 768px) {
  .sekai-bar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--sekai-bar-height) + env(safe-area-inset-top));
  }
  .sekai-sidebar__header {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--sekai-bar-height) + env(safe-area-inset-top));
  }
  .icon-btn { width: 40px; height: 40px; }
  .send-btn { width: 40px; height: 40px; }
  .sekai-channel { min-height: 42px; }
  .user-menu button, .user-menu a { min-height: 42px; }
  .app-roster { width: min(86vw, 300px); }
  .app-roster > * { min-width: min(86vw, 300px); }
  .emoji-palette { max-width: calc(100vw - 24px); }
}
@media (max-width: 480px) {
  .sekai-bar { padding-left: var(--sekai-space-sm); padding-right: var(--sekai-space-sm); }
  .bar-actions { gap: 4px; }
  .sekai-message__body { max-width: 100%; }
}

/* ============================================================
   Auth page bits
   ============================================================ */
.auth-stamp {
  display: block;
  margin-top: var(--sekai-space-md);
  font-family: var(--sekai-font-mono);
  font-size: var(--sekai-text-micro);
  letter-spacing: .12em;
  color: rgb(var(--sekai-fg-subtle));
}
.auth-tabs {
  display: flex; gap: 4px;
  margin: 0 0 var(--sekai-space-lg);
  padding: 3px;
  background: rgb(var(--sekai-surface-sunken));
  border-radius: var(--sekai-radius-sm);
}
.auth-tab {
  flex: 1; height: 30px;
  border: 0; border-radius: var(--sekai-radius-xs);
  background: transparent; color: rgb(var(--sekai-fg-muted));
  font: inherit; font-size: var(--sekai-text-sm);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.auth-tab:hover { color: rgb(var(--sekai-fg)); }
.auth-tab.is-active { background: rgb(var(--sekai-canvas)); color: rgb(var(--sekai-fg)); font-weight: 600; }
.auth-form { display: flex; flex-direction: column; gap: var(--sekai-space-md); }
.auth-form[hidden] { display: none; }
.auth-submit { margin-top: var(--sekai-space-xs); width: 100%; }
.auth-back {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: var(--sekai-space-xl);
  font-size: var(--sekai-text-label);
}
.auth-note { color: rgb(var(--sekai-fg-subtle)); font-size: var(--sekai-text-meta); }
.side-login {
  display: flex; align-items: center; justify-content: center;
  margin: var(--sekai-space-sm) var(--sekai-space-sm) 0;
  padding: 7px 10px;
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-md);
  color: rgb(var(--sekai-accent));
  font-size: var(--sekai-text-sm);
  text-decoration: none;
}
.side-login:hover { background: rgb(var(--sekai-canvas) / .55); }

/* The vendor auth logo rule targets a wide wordmark; our mark is square. */
.sekai-auth__logo img { width: 48px; height: 48px; }
.sekai-auth__logo::after { content: none; }
@media (max-width: 480px) {
  .sekai-auth__logo img { width: 56px; height: 56px; }
}

/* ============================================================
   Admin panel
   ============================================================ */
.admin-page { min-height: 100dvh; background: rgb(var(--sekai-canvas)); }
.admin-top {
  height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 0 var(--sekai-space-lg);
  background: rgb(var(--sekai-surface));
  border-bottom: var(--sekai-hairline-divider);
}
.admin-top strong { font-size: var(--sekai-text-md); }
.admin-top__sep { width: 1px; height: 16px; background: rgb(var(--sekai-line) / var(--sekai-line-a)); margin: 0 4px; }
.admin-top__label { font-family: var(--sekai-font-mono); font-size: 11px; color: rgb(var(--sekai-fg-muted)); letter-spacing: .08em; }
.admin-top__link { margin-left: auto; font-size: var(--sekai-text-sm); color: rgb(var(--sekai-accent)); text-decoration: none; }
.admin-top__link:hover { text-decoration: underline; }

.admin-wrap { max-width: 980px; margin: 0 auto; padding: var(--sekai-space-lg) var(--sekai-space-lg) 72px; }
.admin-tabs {
  display: inline-flex; gap: 4px; padding: 3px; margin-bottom: var(--sekai-space-lg);
  background: rgb(var(--sekai-surface-sunken)); border-radius: var(--sekai-radius-sm);
}
.admin-tab {
  height: 30px; padding: 0 16px; border: 0; border-radius: var(--sekai-radius-xs);
  background: transparent; color: rgb(var(--sekai-fg-muted));
  font: inherit; font-size: var(--sekai-text-sm); cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.admin-tab:hover { color: rgb(var(--sekai-fg)); }
.admin-tab.is-active { background: rgb(var(--sekai-canvas)); color: rgb(var(--sekai-fg)); font-weight: 600; }

.admin-card {
  padding: var(--sekai-space-lg);
  margin-bottom: var(--sekai-space-md);
  background: rgb(var(--sekai-surface));
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-lg);
}
.admin-h { margin: 0 0 var(--sekai-space-md); font-size: var(--sekai-text-md); font-weight: 600; }
.field-row { display: flex; flex-wrap: wrap; gap: var(--sekai-space-sm); align-items: flex-end; }
.field-row .grow { flex: 1; min-width: 160px; }
.field-row .sekai-field { margin: 0; }
.admin-list { display: flex; flex-direction: column; }

.admin-row {
  display: flex; align-items: center; gap: var(--sekai-space-sm);
  padding: 10px 0;
  border-bottom: 1px solid rgb(var(--sekai-line) / var(--sekai-line-a));
}
.admin-row:last-child { border-bottom: 0; }
.admin-row__main { flex: 1; min-width: 0; }
.admin-row__name { display: flex; align-items: center; gap: 8px; font-size: var(--sekai-text-md); }
.admin-row__meta { margin-top: 2px; font-family: var(--sekai-font-mono); font-size: 11px; color: rgb(var(--sekai-fg-subtle)); }
.admin-row__actions { display: flex; gap: 4px; align-items: center; }
.admin-group { margin-top: var(--sekai-space-md); }
.admin-group:first-child { margin-top: 0; }
.admin-group__name {
  margin: 0 0 4px; font-family: var(--sekai-font-mono);
  font-size: var(--sekai-text-label); letter-spacing: .06em; color: rgb(var(--sekai-fg-muted));
}
.mini-btn {
  height: 26px; padding: 0 9px;
  border: var(--sekai-hairline); border-radius: var(--sekai-radius-xs);
  background: transparent; color: rgb(var(--sekai-fg-muted));
  font: inherit; font-size: 11px; cursor: pointer;
}
.mini-btn:hover { background: rgb(var(--sekai-surface-hover)); color: rgb(var(--sekai-fg)); }
.mini-btn--danger:hover { color: rgb(var(--sekai-danger)); border-color: rgb(var(--sekai-danger) / .5); }
.mini-btn .icon { width: 14px; height: 14px; }

.tag {
  padding: 0 5px; border: var(--sekai-hairline); border-radius: var(--sekai-radius-xs);
  font-family: var(--sekai-font-mono); font-size: 10px; color: rgb(var(--sekai-fg-muted));
}
.tag--accent { color: rgb(var(--sekai-accent)); border-color: rgb(var(--sekai-accent) / .4); }
.admin-new-code {
  margin: var(--sekai-space-md) 0 0;
  padding: 10px 14px;
  border: 1px dashed rgb(var(--sekai-accent) / .5);
  border-radius: var(--sekai-radius-sm);
  font-family: var(--sekai-font-mono);
  font-size: var(--sekai-text-lg);
  letter-spacing: .12em;
  color: rgb(var(--sekai-accent));
}
.admin-empty { padding: var(--sekai-space-lg) 0; color: rgb(var(--sekai-fg-subtle)); font-size: var(--sekai-text-sm); }
.admin-forbidden { max-width: 420px; margin: 18vh auto; text-align: center; color: rgb(var(--sekai-fg-muted)); }

/* admin page bits */
.invite-code { font-family: var(--sekai-font-mono); letter-spacing: .08em; color: rgb(var(--sekai-accent)); }
.mini-select { height: 28px; padding: 0 6px; font-size: var(--sekai-text-sm); }

/* multiple hover actions */
.msg-actions {
  position: absolute; top: -12px; right: var(--sekai-space-md); z-index: var(--sekai-z-raised);
  display: flex; gap: 4px;
  opacity: 0; transform: translateY(4px) scale(.96); pointer-events: none;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.sekai-message:hover .msg-actions, .msg-actions:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.msg-actions .sekai-message__action {
  position: static; opacity: 1; transform: none; pointer-events: auto;
}

/* live-mode states */
.sekai-composer.is-readonly .sekai-input-shell { opacity: .55; }
.sekai-composer.is-readonly .sekai-input-bare { cursor: not-allowed; }
.msg-deleted { color: rgb(var(--sekai-fg-subtle)); font-style: italic; font-size: var(--sekai-text-sm); }
.msg-loading { padding: var(--sekai-space-lg); color: rgb(var(--sekai-fg-subtle)); font-size: var(--sekai-text-sm); text-align: center; }
.msg-empty { padding: 56px var(--sekai-space-lg); text-align: center; color: rgb(var(--sekai-fg-subtle)); }
.msg-empty strong { display: block; margin-bottom: 6px; color: rgb(var(--sekai-fg-muted)); font-size: var(--sekai-text-md); }

/* Admin form widths: fields should not stretch the full card. */
.admin-card .field-row .sekai-field.grow { max-width: 360px; }
.admin-card .field-row > .sekai-btn { margin-bottom: 1px; }

/* Initials must follow the identity ink, not the muted foreground. */
.sekai-avatar__initials { color: inherit; }

/* Guest preview: make it explicit that nothing is sent. */
.guest-banner {
  margin-bottom: var(--sekai-space-sm);
  padding: 8px 12px;
  border: 1px dashed rgb(var(--sekai-accent) / .45);
  border-radius: var(--sekai-radius-sm);
  background: rgb(var(--sekai-accent) / .06);
  font-size: var(--sekai-text-sm);
  color: rgb(var(--sekai-fg-muted));
}
.guest-banner a { color: rgb(var(--sekai-accent)); }
.preview-badge {
  align-self: center;
  margin-left: var(--sekai-space-xs);
  padding: 0 5px;
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-xs);
  font-family: var(--sekai-font-mono);
  font-size: 10px;
  color: rgb(var(--sekai-fg-subtle));
}

/* Tap (mobile) shows the message actions; hover shows them on desktop. */
.sekai-message.is-actions-open .msg-actions { opacity: 1; transform: none; pointer-events: auto; }

/* Guest empty state */
.guest-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sekai-space-sm); }
.guest-login-btn { margin-top: var(--sekai-space-sm); text-decoration: none; }

/* Emoji palette */
.emoji-palette {
  position: fixed;
  z-index: var(--sekai-z-modal);
  display: flex; flex-wrap: wrap; gap: 2px;
  width: 232px; padding: 6px;
  background: rgb(var(--sekai-surface-raised));
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-md);
  box-shadow: 0 10px 28px rgb(0 0 0 / .35);
}
.emoji-palette[hidden] { display: none; }
.emoji-palette .emoji-grid button {
  width: 34px; height: 34px;
  border: 0; border-radius: var(--sekai-radius-sm);
  background: transparent; font-size: 18px; line-height: 1;
  cursor: pointer;
}
.emoji-palette .emoji-grid button:hover { background: rgb(var(--sekai-surface-hover)); }

/* Reply chips inside live messages */
.sekai-message .sekai-reply-chip { margin-bottom: 4px; }

/* Live reply chip: button reset + left-accent bar, not a full-width bar */
.sekai-message > .sekai-message__body .sekai-reply-chip {
  width: auto;
  max-width: min(100%, 560px);
  margin-bottom: 4px;
  padding: 2px 10px 2px 8px;
  border: 0;
  border-left: 2px solid rgb(var(--sekai-accent-deep));
  border-radius: var(--sekai-radius-xs);
  background: rgb(var(--sekai-surface-raised) / .45);
  text-align: left;
  cursor: pointer;
}
.sekai-message > .sekai-message__body .sekai-reply-chip:hover { background: rgb(var(--sekai-surface-hover) / .55); }
.sekai-message > .sekai-message__body .sekai-reply-chip .sekai-reply-content {
  flex: 0 1 auto;
  text-align: left;
  font-weight: 400;
}

/* Upload tray */
.upload-tray {
  margin: 0 var(--sekai-space-lg) var(--sekai-space-sm);
  padding: 10px var(--sekai-space-md);
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-md);
  background: rgb(var(--sekai-surface-raised) / .6);
}
.upload-tray[hidden] { display: none; }
.upload-name { font-size: var(--sekai-text-sm); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-bar { height: 4px; border-radius: 999px; background: rgb(var(--sekai-surface-sunken)); overflow: hidden; }
.upload-bar i { display: block; height: 100%; width: 0; background: rgb(var(--sekai-accent)); transition: width 120ms ease; }
.upload-status { margin-top: 5px; font-family: var(--sekai-font-mono); font-size: 11px; color: rgb(var(--sekai-fg-subtle)); }

/* Guest gate on files page */
.files-gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 64px var(--sekai-space-lg);
  color: rgb(var(--sekai-fg-subtle)); text-align: center;
}
.files-gate strong { color: rgb(var(--sekai-fg)); font-size: var(--sekai-text-lg); }
.files-gate .sekai-btn { text-decoration: none; margin-top: 6px; }

/* Row action buttons */
.file-row__actions button { width: 28px; height: 28px; }
.file-row__actions .icon { width: 16px; height: 16px; }

/* On touch screens there is no hover: keep row actions visible. */
@media (hover: none), (max-width: 768px) {
  .file-row__actions { opacity: 1; }
}

/* ============================================================
   Search overlay
   ============================================================ */
.search-overlay {
  position: fixed; inset: 0; z-index: calc(var(--sekai-z-modal) + 1);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh var(--sekai-space-lg);
  background: rgb(4 4 5 / .5);
  backdrop-filter: blur(2px);
}
.search-overlay[hidden] { display: none; }
.search-panel {
  width: min(720px, 100%);
  max-height: 78vh;
  display: flex; flex-direction: column;
  background: rgb(var(--sekai-surface));
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-lg);
  box-shadow: 0 24px 64px rgb(0 0 0 / .45);
  overflow: hidden;
}
.search-head { display: flex; gap: var(--sekai-space-sm); padding: var(--sekai-space-md); border-bottom: var(--sekai-hairline-divider); }
.search-head .sekai-input { flex: 1; }
.search-filters {
  display: flex; flex-wrap: wrap; gap: var(--sekai-space-sm); align-items: center;
  padding: var(--sekai-space-sm) var(--sekai-space-md);
  border-bottom: var(--sekai-hairline-divider);
}
.search-filters .sekai-input { height: 30px; padding: 0 8px; font-size: var(--sekai-text-sm); width: auto; }
.search-filters #search-channel { min-width: 120px; }
.search-filters #search-from { width: 140px; }
.search-filters #search-before { width: 150px; }
.search-count { margin-left: auto; font-family: var(--sekai-font-mono); font-size: 11px; color: rgb(var(--sekai-fg-subtle)); }
.search-results { overflow-y: auto; padding: var(--sekai-space-xs) 0; }
.search-hit {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; padding: 9px var(--sekai-space-md);
  border: 0; border-bottom: 1px solid rgb(var(--sekai-line) / var(--sekai-line-a));
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.search-hit:hover { background: rgb(var(--sekai-surface-hover) / .55); }
.search-hit__meta { font-family: var(--sekai-font-mono); font-size: 11px; color: rgb(var(--sekai-fg-subtle)); }
.search-hit__body { font-size: var(--sekai-text-sm); line-height: 1.5; color: rgb(var(--sekai-fg)); }
.search-hit mark { background: rgb(var(--sekai-accent) / .25); color: rgb(var(--sekai-fg)); border-radius: 3px; padding: 0 2px; }
.search-empty { padding: 40px 16px; text-align: center; color: rgb(var(--sekai-fg-subtle)); font-size: var(--sekai-text-sm); }
@media (max-width: 640px) {
  .search-overlay { padding: 0; }
  .search-panel { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
}

/* Touch: no tap highlight, and long-press opens message actions. */
.sekai-message { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .sekai-message__action { width: 34px; height: 34px; }
  .msg-actions .sekai-message__action { box-shadow: 0 2px 6px rgb(0 0 0 / .35); }
}

/* ============================================================
   Message grouping + chat file cards (match the in-game app)
   ============================================================ */
.sekai-message.is-continuation { padding-top: 2px; padding-bottom: 2px; }
.avatar-spacer { width: 40px; flex-shrink: 0; }
.sekai-message__body { max-width: 780px; }

/* file card in chat */
.chat-file {
  display: flex; align-items: center; gap: var(--sekai-space-md);
  width: min(420px, 100%);
  margin-top: var(--sekai-space-xs);
  padding: 10px 14px;
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-md);
  background: rgb(var(--sekai-surface-hover) / .55);
  color: inherit; text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.chat-file:hover { background: rgb(var(--sekai-surface-hover) / .8); border-color: rgb(var(--sekai-accent) / .35); }
.chat-file__icon {
  position: relative;
  width: 40px; height: 48px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1.5px solid rgb(var(--sekai-fg-muted));
  border-radius: var(--sekai-radius-xs);
  color: rgb(var(--sekai-fg));
}
.chat-file__icon .icon { width: 20px; height: 20px; opacity: .95; }
.chat-file__ext { font-family: var(--sekai-font-mono); font-size: 8px; letter-spacing: .04em; line-height: 1; }
.chat-file__main { flex: 1; min-width: 0; }
.chat-file__name { display: block; font-size: var(--sekai-text-lg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-file__meta { display: block; margin-top: 2px; font-size: var(--sekai-text-label); color: rgb(var(--sekai-fg-muted)); }
.chat-file__dl { flex-shrink: 0; color: rgb(var(--sekai-fg-muted)); }
.chat-file__dl .icon { width: 22px; height: 22px; }
.chat-file:hover .chat-file__dl { color: rgb(var(--sekai-fg)); }

/* upload progress above composer */
.chat-upload {
  margin-bottom: var(--sekai-space-sm);
  padding: 8px 12px;
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-sm);
  background: rgb(var(--sekai-surface-raised) / .6);
}
.chat-upload[hidden] { display: none; }
.chat-upload__name { font-size: var(--sekai-text-sm); margin-bottom: 5px; }
.chat-upload__bar { height: 3px; border-radius: 999px; background: rgb(var(--sekai-surface-sunken)); overflow: hidden; }
.chat-upload__bar i { display: block; height: 100%; width: 0; background: rgb(var(--sekai-accent)); transition: width 120ms ease; }

@media (max-width: 768px) {
  .avatar-spacer { width: 40px; }
  .chat-file { width: 100%; }
}

/* Fidelity pass: lighter borderless file cards, icon label inside, bold chevron */
.chat-file {
  width: min(340px, 100%);
  padding: 10px 12px;
  border: 0;
  background: rgb(255 255 255 / .14);
}
.chat-file:hover { background: rgb(255 255 255 / .19); }
.chat-file__icon {
  width: 32px; height: 40px;
  border: 0;
  display: block;
  position: relative;
  color: rgb(var(--sekai-fg));
}
.chat-file__icon .icon { width: 32px; height: 40px; }
.chat-file__ext {
  position: absolute; left: 0; right: 0; bottom: 6px;
  text-align: center; font-size: 8px;
}
.chat-file__main { padding-left: 2px; }
.chat-file__dl .icon { width: 22px; height: 22px; }

/* Visible thin scrollbar like the app window */
.sekai-messages { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .18) transparent; }
.sekai-messages::-webkit-scrollbar { width: 8px; }
.sekai-messages::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .18); border-radius: 999px; }

/* Avatar images */
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Roster collapsed by default; toggle from the top bar */


/* ============================================================
   Colour + chrome sync with the in-game app
   ============================================================ */
.sekai-bar { background: rgb(var(--sekai-canvas)); }
.sekai-composer {
  background: rgb(var(--sekai-surface));
  border-top: var(--sekai-hairline-divider);
  padding: 10px var(--sekai-space-lg);
}
.sekai-input-shell {
  min-height: 46px;
  padding: 6px 12px;
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-md);
  background: transparent;
}
.sekai-input-shell:focus-within { border-color: rgb(var(--sekai-line-strong) / .45); }

.chat-file { background: rgb(var(--sekai-surface-raised)); }
.chat-file:hover { background: rgb(var(--sekai-surface-raised)); filter: brightness(1.06); }

/* Slightly larger message avatars, matching the app window */
.sekai-message > .sekai-avatar { width: 44px; height: 44px; }
.sekai-message > .sekai-avatar .sekai-avatar__initials { font-size: 18px; }
.avatar-spacer { width: 44px; }
@media (max-width: 768px) {
  .sekai-message > .sekai-avatar { width: 40px; height: 40px; }
  .avatar-spacer { width: 40px; }
  .sekai-composer { padding: 8px var(--sekai-space-md); }
}

/* ============================================================
   UX pass: online chip, collapsible roster, pinned sidebar footer
   ============================================================ */
.online-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  border: var(--sekai-hairline); border-radius: 999px;
  background: transparent; color: rgb(var(--sekai-fg-muted));
  font-family: var(--sekai-font-mono); font-size: 11px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.online-chip:hover { background: rgb(var(--sekai-surface-hover)); color: rgb(var(--sekai-fg)); }
.online-dot { width: 6px; height: 6px; border-radius: 999px; background: #43b581; box-shadow: 0 0 0 2px rgb(67 181 129 / .18); }

/* rosters animates by width instead of disappearing */
.app-roster {
  width: 240px;
  overflow: hidden;
  transition: width 200ms cubic-bezier(.2,.8,.2,1), padding 200ms ease, border-color 200ms ease;
}
.app-roster > * { min-width: 240px; }
.app-roster.is-closed { width: 0; padding-left: 0; padding-right: 0; border-left-color: transparent; }

/* sidebar: channel list scrolls, tools/DM stay pinned above the user card */
.sekai-sidebar__body { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
#channel-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .18) transparent; }
#channel-nav::-webkit-scrollbar { width: 8px; }
#channel-nav::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .18); border-radius: 999px; }
.side-tools, .side-dm { flex: 0 0 auto; }

/* admin entry sits above the user card */
.side-admin {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 var(--sekai-space-sm) var(--sekai-space-xs);
  padding: 7px 10px;
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-md);
  color: rgb(var(--sekai-accent));
  font-size: var(--sekai-text-sm);
  text-decoration: none;
}
.side-admin:hover { background: rgb(var(--sekai-canvas) / .55); }
.side-admin[hidden] { display: none; }

/* user menu */
.user-menu {
  position: fixed; left: 8px; bottom: 108px; z-index: var(--sekai-z-modal);
  width: 220px; padding: 6px;
  background: rgb(var(--sekai-surface-raised));
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-md);
  box-shadow: 0 16px 40px rgb(0 0 0 / .4);
  transform-origin: bottom left;
  animation: ft-menu-in 140ms cubic-bezier(.2,.8,.2,1);
}
@keyframes ft-menu-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.user-menu[hidden] { display: none; }
.user-menu button, .user-menu a {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px;
  border: 0; border-radius: var(--sekai-radius-sm);
  background: transparent; color: rgb(var(--sekai-fg));
  font: inherit; font-size: var(--sekai-text-sm); text-align: left;
  text-decoration: none; cursor: pointer;
}
.user-menu button:hover, .user-menu a:hover { background: rgb(var(--sekai-surface-hover)); }
.user-menu .is-danger { color: rgb(var(--sekai-danger)); }

/* palette / search / toast motion */
.emoji-palette { opacity: 0; transform: translateY(4px) scale(.97); pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; }
.emoji-palette.is-open { opacity: 1; transform: none; pointer-events: auto; }
.search-overlay { animation: ft-fade 140ms ease-out; }
@keyframes ft-fade { from { opacity: 0; } to { opacity: 1; } }
.search-panel { animation: ft-menu-in 180ms cubic-bezier(.2,.8,.2,1); }
.toast { animation: ft-toast 180ms cubic-bezier(.2,.8,.2,1); }
@keyframes ft-toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.admin-brand { color: inherit; text-decoration: none; }
.admin-brand:hover { color: rgb(var(--sekai-accent)); }

.side-me { cursor: pointer; }
@media (max-width: 1100px) {
  .app-roster { transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
  .app-roster.is-closed { display: none; }
  .app-roster.is-open { display: flex; }
}

/* ============================================================
   Roster as a small floating "liquid" panel
   ============================================================ */
.app-roster {
  position: fixed;
  top: 56px;
  right: 14px;
  bottom: auto;
  z-index: var(--sekai-z-modal);
  width: 264px;
  max-height: min(62vh, 460px);
  padding: 8px;
  background: rgb(var(--sekai-surface-raised));
  border: var(--sekai-hairline);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgb(0 0 0 / .45);
  overflow-y: auto;
  transform-origin: calc(100% - 26px) -10px;
  transform: scale(.32, .06) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 140ms ease,
    transform 260ms cubic-bezier(.22, 1.35, .36, 1),
    border-radius 260ms ease,
    visibility 260ms;
  border-radius: 999px;
}
.app-roster.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  border-radius: 18px;
}
.app-roster.is-closed { display: block; } /* legacy class no longer hides */

/* Connector droplet: makes the panel feel pulled out of the chip */
.app-roster::before {
  content: "";
  position: absolute; top: -6px; right: 18px;
  width: 34px; height: 14px;
  background: inherit;
  border-radius: 999px;
  opacity: .9;
}

@media (max-width: 1100px) {
  .app-roster {
    position: fixed;
    top: 52px;
    right: 8px;
    bottom: auto;
    width: calc(100vw - 16px);
    max-height: 66vh;
    transform-origin: calc(100% - 28px) -8px;
    transform: scale(.4, .08) translateY(-4px);
  }
  .app-roster.is-open { transform: none; }
}

/* Back-to-latest pill */
.jump-latest {
  position: absolute;
  right: 24px;
  bottom: 92px;
  z-index: var(--sekai-z-raised);
  height: 28px;
  padding: 0 12px;
  border: var(--sekai-hairline);
  border-radius: 999px;
  background: rgb(var(--sekai-surface-raised));
  color: rgb(var(--sekai-fg));
  font-family: var(--sekai-font-mono);
  font-size: 11px;
  box-shadow: 0 6px 18px rgb(0 0 0 / .35);
  cursor: pointer;
  animation: ft-toast 160ms ease-out;
}
.jump-latest[hidden] { display: none; }
.sekai-main { position: relative; }

/* Message skeleton */
.msg-skeleton { display: flex; gap: 12px; padding: 10px 16px; }
.msg-skeleton__avatar { width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0; }
.msg-skeleton__lines { flex: 1; padding-top: 4px; }
.msg-skeleton__line { height: 10px; margin-bottom: 8px; border-radius: 6px; }
.msg-skeleton__line--short { width: 32%; }
.msg-skeleton__line--mid { width: 58%; }
.sk {
  background: linear-gradient(90deg, rgb(255 255 255 / .06) 25%, rgb(255 255 255 / .14) 45%, rgb(255 255 255 / .06) 65%);
  background-size: 220% 100%;
  animation: sk-shimmer 1.2s linear infinite;
}
@keyframes sk-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* Avatar fade-in */
.avatar-img { animation: ft-fade 180ms ease-out; background: rgb(var(--sekai-surface-sunken)); }

/* Upload progress easing */
.upload-bar i, .chat-upload__bar i, #upload-bar { transition: width 220ms cubic-bezier(.2,.8,.2,1); }

/* Unified press feedback */
.sekai-btn:active, .online-chip:active, .chip:active, .upload-btn:active, .send-btn:active,
.user-menu button:active, .mini-btn:active { transform: translateY(1px) scale(.98); }

/* FIX: composer text was bottom-aligned */
.sekai-input-shell { align-items: center; }
.sekai-input-bare { padding: 0; line-height: 1.5; }

/* Pending message */
.sekai-message.is-pending { opacity: .68; animation: ft-rise 160ms cubic-bezier(.2,.7,.3,1); }
.pending-hint { font-family: var(--sekai-font-mono); font-size: 10px; color: rgb(var(--sekai-fg-subtle)); margin-left: 6px; }

/* Files skeleton */
.file-skeleton { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.file-skeleton__icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.file-skeleton__lines { flex: 1; }
.file-skeleton__line { height: 10px; margin-bottom: 7px; border-radius: 6px; }
.file-skeleton__line--short { width: 30%; }

/* ============================================================
   Collapsible channel groups + larger DM area
   ============================================================ */
.side-group__head { cursor: pointer; user-select: none; border-radius: var(--sekai-radius-xs); }
.side-group__head:hover .sekai-section-label { color: rgb(var(--sekai-fg)); }
.side-list {
  max-height: 1200px;
  overflow: hidden;
  transition: max-height 240ms cubic-bezier(.2,.8,.2,1), opacity 160ms ease;
}
.side-group.is-collapsed .side-list { max-height: 0; opacity: 0; pointer-events: none; }
.group-caret { transition: transform 160ms ease; }
.side-group.is-collapsed .group-caret { transform: rotate(-90deg); }

/* DM area takes real space and sits above the file tool */
.side-dm {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--sekai-space-sm) var(--sekai-space-sm) 0;
  margin-top: var(--sekai-space-xs);
  border-top: var(--sekai-hairline-divider);
}
.side-dm .side-group__head { margin: 0 var(--sekai-space-sm); }
.side-dm__empty {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  border: 1px dashed rgb(var(--sekai-line-strong) / .25);
  border-radius: var(--sekai-radius-md);
  font-size: var(--sekai-text-sm);
  color: rgb(var(--sekai-fg-subtle));
}
@media (max-width: 768px) {
  .side-dm { display: none; }
}

/* ============================================================
   Roster: curtain-out from the online chip (no ellipse morph)
   ============================================================ */
.app-roster {
  border-radius: 18px;
  transform-origin: calc(100% - 26px) 0;
  transform: translateY(-6px) scale(.985);
  clip-path: inset(0 0 100% 0 round 18px);
  transition:
    opacity 120ms ease,
    transform 220ms cubic-bezier(.16, 1, .3, 1),
    clip-path 260ms cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear 240ms;
}
.app-roster.is-open {
  transform: none;
  clip-path: inset(0 0 0 0 round 18px);
  transition:
    opacity 120ms ease,
    transform 220ms cubic-bezier(.16, 1, .3, 1),
    clip-path 260ms cubic-bezier(.16, 1, .3, 1),
    visibility 0s;
}
.app-roster::before { display: none; }
@media (max-width: 1100px) {
  .app-roster { transform: translateY(-6px) scale(.985); }
  .app-roster.is-open { transform: none; }
}

/* ============================================================
   Sticker picker + chat stickers
   ============================================================ */
.emoji-palette {
  width: 344px;
  max-height: min(56vh, 440px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--sekai-radius-lg);
}
.emoji-palette .pane { padding: 10px 10px 6px; }
.emoji-palette .pane-title {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 2px 6px;
  font-family: var(--sekai-font-mono);
  font-size: 10px; letter-spacing: .06em; color: rgb(var(--sekai-fg-subtle));
}
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-grid button {
  width: 100%; aspect-ratio: 1; border: 0; border-radius: var(--sekai-radius-sm);
  background: transparent; font-size: 17px; line-height: 1; cursor: pointer;
}
.emoji-grid button:hover { background: rgb(var(--sekai-surface-hover)); }
.sticker-pane { border-top: var(--sekai-hairline-divider); padding: 8px 10px 6px; display: flex; flex-direction: column; min-height: 0; }
.sticker-cats { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; }
.sticker-cat {
  flex-shrink: 0; height: 22px; padding: 0 8px;
  border: var(--sekai-hairline); border-radius: 999px;
  background: transparent; color: rgb(var(--sekai-fg-muted));
  font-size: 11px; cursor: pointer;
}
.sticker-cat.is-active { color: rgb(var(--sekai-accent)); border-color: rgb(var(--sekai-accent) / .5); }
.sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; overflow-y: auto; }
.sticker-grid button {
  border: 1px solid transparent; border-radius: var(--sekai-radius-sm);
  background: rgb(0 0 0 / .08); padding: 2px; cursor: pointer;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.sticker-grid button:hover { border-color: rgb(var(--sekai-accent) / .5); background: rgb(255 255 255 / .06); }
.sticker-grid img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sticker-grid .empty { grid-column: 1 / -1; padding: 18px 4px; text-align: center; color: rgb(var(--sekai-fg-subtle)); font-size: 11px; }
.sticker-pager {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 6px 0 2px;
  font-family: var(--sekai-font-mono); font-size: 11px; color: rgb(var(--sekai-fg-subtle));
}
.sticker-pager button {
  width: 26px; height: 22px; border: var(--sekai-hairline); border-radius: var(--sekai-radius-xs);
  background: transparent; color: rgb(var(--sekai-fg-muted)); cursor: pointer;
}
.sticker-pager button:disabled { opacity: .35; cursor: default; }
.palette-foot {
  border-top: var(--sekai-hairline-divider); padding: 6px 10px;
  display: flex; justify-content: flex-end;
  font-size: 11px;
}
.palette-foot a { color: rgb(var(--sekai-accent)); text-decoration: none; }
.palette-foot a:hover { text-decoration: underline; }
.emoji-palette.is-react .sticker-pane, .emoji-palette.is-react .palette-foot { display: none; }
.emoji-palette.is-react .emoji-grid { grid-template-columns: repeat(8, 1fr); }

/* Sticker messages */
.chat-sticker {
  display: block;
  max-width: 168px; max-height: 168px;
  margin-top: var(--sekai-space-xs);
  border-radius: var(--sekai-radius-md);
  image-rendering: auto;
}

/* Sticker page */
.sticker-preview {
  width: 96px; height: 96px; object-fit: contain;
  border: var(--sekai-hairline); border-radius: var(--sekai-radius-sm);
  background: rgb(0 0 0 / .15);
}
.sticker-thumb {
  width: 44px; height: 44px; object-fit: contain;
  border-radius: var(--sekai-radius-xs);
  background: rgb(0 0 0 / .15);
  flex-shrink: 0;
}
.admin-hint { margin: var(--sekai-space-sm) 0 0; font-size: var(--sekai-text-label); color: rgb(var(--sekai-fg-subtle)); }

/* sticker buttons must not inherit the 34px emoji sizing */
.emoji-palette .sticker-cat { width: auto; height: 24px; white-space: nowrap; }
.emoji-palette .sticker-grid button { width: auto; height: auto; aspect-ratio: 1; }

.emoji-palette .sticker-tools { display: inline-flex; align-items: center; gap: 6px; }
.emoji-palette .sticker-tools .mini-btn { height: 20px; padding: 0 6px; font-size: 10px; }

/* keep small action labels on one line */
.admin-row__actions .mini-btn { white-space: nowrap; flex-shrink: 0; }
.admin-row__actions { flex-shrink: 0; }
.admin-row__actions .mini-select { min-width: 96px; }

/* AI admin */
.admin-h-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sekai-space-md); }
.admin-h-row .admin-h { margin: 0; }
.sekai-textarea { min-height: 96px; resize: vertical; }
.ai-memory { padding: 8px 0; border-bottom: 1px solid rgb(var(--sekai-line) / var(--sekai-line-a)); }
.ai-memory:last-child { border-bottom: 0; }
.ai-memory__meta { font-family: var(--sekai-font-mono); font-size: 11px; color: rgb(var(--sekai-fg-subtle)); margin-bottom: 4px; }
.ai-memory__text { font-size: var(--sekai-text-sm); line-height: 1.6; }

.ai-fixed {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  width: 100%;
  padding: 10px 12px;
  border: var(--sekai-hairline);
  border-radius: var(--sekai-radius-sm);
  background: rgb(var(--sekai-surface-sunken));
  font-family: var(--sekai-font-mono);
  font-size: 11px;
  color: rgb(var(--sekai-fg-muted));
}

/* Inline image attachments */
.chat-image {
  display: block; margin-top: var(--sekai-space-xs);
  padding: 0; border: var(--sekai-hairline); border-radius: var(--sekai-radius-md);
  background: rgb(0 0 0 / .12); overflow: hidden; cursor: zoom-in;
  max-width: min(320px, 100%);
}
.chat-image img { display: block; max-width: 100%; max-height: 240px; object-fit: contain; }
.chat-image__meta {
  display: block; padding: 4px 8px;
  font-family: var(--sekai-font-mono); font-size: 10px; color: rgb(var(--sekai-fg-muted));
  text-align: left;
}
.chat-image:hover { border-color: rgb(var(--sekai-accent) / .4); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: calc(var(--sekai-z-modal) + 2);
  display: flex; align-items: center; justify-content: center;
  background: rgb(0 0 0 / .78);
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--sekai-radius-md); box-shadow: 0 24px 80px rgb(0 0 0 / .6); }
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border: var(--sekai-hairline); border-radius: 999px;
  background: rgb(var(--sekai-surface-raised)); color: rgb(var(--sekai-fg));
  font-size: 20px; cursor: pointer;
}

.chan-icon-text {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; font-size: 15px; line-height: 1;
}