@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p { margin: 0; }
  button, input, textarea { font: inherit; }
  button, summary, a { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  button:disabled { cursor: not-allowed; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    color-scheme: dark;
    --screen: #111719;
    --surface: #202527;
    --raised: #30383b;
    --ink: #f2f4e9;
    --muted: #b0bbbf;
    --accent: #b4ea68;
    --accent-ink: #192719;
    --outgoing: #c6e8a4;
    --line: #3d494d;
    --control-line: #657477;
    --pixel-secondary: #789fba;
    --danger: #ffb5a5;
    --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    color: var(--ink);
    background: var(--screen);
    -webkit-font-smoothing: antialiased;
  }
  body { min-width: 320px; overflow: hidden; }
  ::selection { background: var(--accent); color: var(--accent-ink); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }
  .icon { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
  .icon-small { width: 16px; height: 16px; }
  .pixel-icon { width: 24px; height: 24px; display: block; fill: currentColor; shape-rendering: crispEdges; }
  .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .noscript { position: fixed; inset: 0 0 auto; z-index: 10; padding: 16px; background: var(--raised); text-align: center; }
  button, a, summary { touch-action: manipulation; }
  button, .channel-link, .today-link { transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease; }
}

@layer layout {
  /* The small-screen layout is the default. The only scrolling surface is the chat. */
  .workspace { display: flex; position: fixed; inset: 0; width: 100%; height: 100vh; height: var(--app-height, 100dvh); overflow: hidden; }
  .main-panel { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; container: chat / inline-size; }
  .mobile-brand-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); background: var(--surface); }
  .channel-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; flex-shrink: 0; padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--line); border-bottom: 2px solid #080c0d; background: linear-gradient(#30383b, #202527); }
  .conversation { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; position: relative; background: var(--screen); }
  .conversation-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; flex-shrink: 0; padding: 12px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); font-size: .75rem; color: var(--muted); }
  .conversation-meta > span { display: flex; align-items: center; gap: 7px; }
  .message-scroll { flex: 1; min-height: 0; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--control-line) transparent; padding: 0 env(safe-area-inset-right) 20px env(safe-area-inset-left); background-image: radial-gradient(#b0bbbf0c 1px, transparent 1px); background-size: 16px 16px; }
  .message-scroll:focus-visible { outline-offset: -3px; }
  .messages { display: flex; flex-direction: column; min-height: calc(100% - 48px); }
  .composer-area { flex-shrink: 0; padding: 10px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 0 #080c0d40; }
  .sidebar { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; height: var(--app-height, 100dvh); width: min(320px, calc(100% - 44px)); padding: calc(20px + env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: var(--surface); border-right: 2px solid #080c0d; overflow-y: auto; overscroll-behavior: contain; z-index: 5; transform: translateX(-100%); visibility: hidden; transition: transform 180ms ease-out, visibility 180ms; }
  .sidebar > :not(.channel-list) { flex-shrink: 0; }
  .sidebar-open .sidebar { transform: translateX(0); visibility: visible; }
  .sidebar-backdrop { display: none; }
  .sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; border: 0; background: #0009; z-index: 4; }
  .sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sidebar-bottom { margin-top: auto; padding-top: 24px; }
}

@layer components {
  .brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); flex-shrink: 0; }
  .brand-wordmark { display: block; width: 123px; height: 21px; fill: currentColor; shape-rendering: crispEdges; }
  .brand-mark { display: grid; place-items: center; color: var(--accent); }
  .brand-mark .pixel-icon { width: 32px; height: 32px; }
  .icon-button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 10px; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 4px; }
  .icon-button:hover { background: var(--raised); color: var(--ink); }
  .icon-button:active { background: var(--screen); }
  .mobile-menu { flex-direction: column; gap: 4px; min-width: 48px; min-height: 52px; padding: 6px; color: var(--ink); background: var(--surface); border-color: var(--control-line); box-shadow: 0 2px 0 #080c0d; font-size: .6875rem; }
  .mobile-menu .icon { width: 20px; height: 20px; }
  .today-link { display: flex; align-items: center; gap: 10px; margin: 22px 0 28px; min-height: 48px; padding: 12px; background: var(--accent); color: var(--accent-ink); border-radius: 4px; box-shadow: 0 3px 0 #080c0d; font-size: .875rem; font-weight: 650; }
  .today-link .icon:last-child { margin-left: auto; }
  .today-link:hover { background: #cbf58e; }
  .today-link:active { background: #a1d559; }
  .channels-heading { display: flex; justify-content: space-between; padding: 0 10px; margin-bottom: 12px; color: var(--muted); }
  .channels-heading h2, .channels-heading > span { font: 600 .6875rem/1.4 var(--mono); letter-spacing: .08em; }
  .channel-list { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--control-line) transparent; }
  .channel-list > a { flex-shrink: 0; }
  .channel-link { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 10px; border-radius: 4px; color: var(--muted); font-size: .875rem; border-left: 3px solid transparent; }
  .channel-link:hover { background: var(--raised); color: var(--ink); }
  .channel-link.selected { background: #b4ea681a; border-left-color: var(--accent); color: var(--ink); font-weight: 600; }
  .channel-hash { width: 16px; height: 16px; }
  .channel-label { flex: 1; overflow-wrap: anywhere; }
  .today-badge { padding: 3px 5px; color: var(--accent); font: .6875rem/1.4 var(--mono); }
  .channel-count { font: .75rem/1 var(--mono); font-variant-numeric: tabular-nums; }
  .channels-empty { padding: 6px 12px 14px; font-size: .8125rem; color: var(--muted); line-height: 1.65; }
  .channel-list:has(.channel-link:not([hidden])) + .channels-empty { display: none; }
  .date-picker { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 8px; }
  .date-picker summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px; cursor: pointer; color: var(--muted); font-size: .875rem; list-style: none; }
  .date-picker summary:hover { color: var(--ink); }
  .date-picker summary::-webkit-details-marker { display: none; }
  .date-picker summary > .icon:last-child { margin-left: auto; }
  .date-picker[open] summary > .icon:last-child { transform: rotate(90deg); }
  .date-picker label { display: block; font-size: .8125rem; margin: 10px; color: var(--muted); }
  .date-input-row { display: flex; gap: 8px; padding: 0 4px 10px; }
  .date-input-row input { color-scheme: dark; background: var(--screen); color: var(--ink); border: 1px solid var(--control-line); border-radius: 4px; padding: 10px 8px; min-width: 0; width: 100%; min-height: 44px; font-size: 1rem; }
  .date-input-row button { display: grid; place-items: center; flex-shrink: 0; width: 44px; min-height: 44px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 4px; }
  .date-input-row button:hover { background: #cbf58e; }
  .date-input-row button:active { background: #a1d559; }
  .identity-panel { display: flex; align-items: center; gap: 12px; padding: 18px 6px 2px; border-top: 1px solid var(--line); }
  .avatar { width: 36px; height: 36px; border-radius: 4px; display: grid; place-items: center; flex-shrink: 0; color: var(--avatar-color); background: var(--screen); border: 1px solid var(--line); }
  .avatar .pixel-icon { width: 28px; height: 28px; }
  .avatar-0 { --avatar-color: #b4ea68; }
  .avatar-1 { --avatar-color: #c8aaf0; }
  .avatar-2 { --avatar-color: #efbd7a; }
  .avatar-3 { --avatar-color: #8fcde1; }
  .avatar-4 { --avatar-color: #f3a4b5; }
  .avatar-5 { --avatar-color: #8addb7; }
  .identity-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .identity-text strong { font-size: .8125rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
  .channel-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .header-hash { display: none; }
  .channel-title h1 { font: 700 1.125rem/1.3 var(--mono); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
  .channel-title p { margin-top: 5px; color: var(--muted); font-size: .6875rem; line-height: 1.5; }
  .channel-state { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--accent); font: .6875rem/1.5 var(--mono); white-space: nowrap; }
  .channel-state.is-closed { color: var(--muted); }
  .connection-dot { width: 6px; height: 6px; background: var(--accent); }
  .connection-dot.disconnected { background: var(--danger); }
  .date-divider { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px 20px; min-height: 48px; }
  .date-divider::before, .date-divider::after { content: ""; height: 1px; flex: 1; max-width: 120px; background: var(--line); }
  .date-divider span { font: .6875rem/1.5 var(--mono); color: var(--muted); text-align: center; }
  .empty-state { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-height: 230px; padding: 24px 16px; text-align: center; }
  .empty-illustration { display: block; width: 120px; height: 96px; margin: 0 0 24px; color: var(--accent); shape-rendering: crispEdges; }
  .empty-kicker { margin-bottom: 12px; color: var(--muted); font: .6875rem/1.5 var(--mono); letter-spacing: .12em; }
  .empty-state h2 { font-size: 1.375rem; font-weight: 650; letter-spacing: -.04em; }
  .empty-state p { color: var(--muted); font-size: .9375rem; line-height: 1.6; margin-top: 10px; }
  .text-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin-top: 14px; padding: 8px 10px; background: none; border: 0; color: var(--accent); font-size: .875rem; font-weight: 600; border-radius: 4px; }
  .text-link:hover { background: #b4ea6812; }
  .text-link:active { background: #b4ea6820; }
  .message { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; }
  .message .avatar { margin-top: 22px; }
  .message-content { min-width: 0; max-width: min(82%, 40rem); }
  .message-content header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 7px 2px; }
  .message-content strong { font-size: .75rem; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
  .message-content time { font: .6875rem/1.5 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
  .message-content p { position: relative; padding: 12px 14px; background: var(--raised); border-radius: 2px 6px 6px; box-shadow: 0 2px 0 #080c0d; font-size: 1.0625rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: initial; }
  .message-content p::before { content: ""; position: absolute; top: 0; left: -6px; width: 6px; height: 10px; background: var(--raised); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%); }
  .own-message { flex-direction: row-reverse; }
  .own-message .message-content header { justify-content: flex-end; margin-right: 2px; }
  .own-message .message-content p { background: var(--outgoing); color: var(--accent-ink); border-radius: 6px 2px 6px 6px; }
  .own-message .message-content p::before { left: auto; right: -6px; background: var(--outgoing); transform: scaleX(-1); }
  .you-badge { font: .6875rem/1.5 var(--mono); color: var(--accent); }
  .history-loader { text-align: center; margin: 4px 0 18px; }
  .history-loader button { min-height: 44px; border: 1px solid var(--control-line); background: var(--surface); padding: 10px 16px; border-radius: 4px; color: var(--ink); font-size: .8125rem; }
  .history-loader button:hover { background: var(--raised); }
  .history-loader button:active { background: var(--screen); }
  .history-loader button:disabled { opacity: .6; }
  .request-status:empty { display: none; }
  .request-status { margin: 0 4px 10px; padding: 10px 12px; border-left: 3px solid var(--danger); background: #ffb5a510; font-size: .8125rem; color: var(--danger); line-height: 1.5; }
  .request-status a { text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 8px; }
  .composer-identity { display: flex; align-items: center; gap: 8px; padding: 0 2px 10px; }
  .composer-identity .avatar { width: 32px; height: 32px; }
  .composer-identity .avatar .pixel-icon { width: 24px; height: 24px; }
  .character-count { font: .6875rem/1.5 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .character-count.over-limit { color: var(--danger); }
  .composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border: 1px solid var(--control-line); border-radius: 6px; background: var(--screen); box-shadow: inset 0 2px 0 #080c0d; }
  .composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .composer textarea { display: block; resize: none; border: 0; padding: 10px 8px; width: 100%; min-width: 0; height: 46px; min-height: 46px; max-height: 112px; overflow-y: auto; background: transparent; color: var(--ink); font-size: 1rem; line-height: 1.5; border-radius: 0; }
  .composer textarea:focus-visible { outline: none; }
  .send-button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; min-height: 46px; min-width: 48px; padding: 10px 14px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 2px; font-size: .875rem; font-weight: 700; box-shadow: inset 0 -3px 0 #19271920; }
  .send-button .icon { width: 20px; height: 20px; }
  .send-button:hover:not(:disabled) { background: #cbf58e; }
  .send-button:active:not(:disabled) { transform: scale(.96); }
  .send-button:disabled { background: var(--raised); color: var(--muted); box-shadow: none; }
  .send-button span { display: none; }
  .composer-hint { display: flex; justify-content: flex-end; color: var(--muted); font-size: .6875rem; line-height: 1.5; padding: 10px 4px 0; }
  .archive-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px; background: var(--screen); border: 1px solid var(--line); border-radius: 4px; }
  .archive-notice > .icon { color: var(--muted); }
  .archive-notice > div { flex: 1; min-width: 140px; }
  .archive-notice strong { font-size: .8125rem; font-weight: 600; }
  .archive-notice p { margin-top: 5px; font-size: .75rem; line-height: 1.6; color: var(--muted); }
  .archive-notice a { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: .8125rem; font-weight: 600; min-height: 44px; padding: 8px 0; white-space: nowrap; }
  .archive-notice a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .new-messages { align-self: center; position: absolute; bottom: 12px; border: 1px solid var(--accent); border-radius: 4px; min-height: 44px; padding: 10px 16px; background: var(--surface); color: var(--accent); box-shadow: 0 3px 0 #080c0d; font-size: .8125rem; z-index: 1; }
  .new-messages:hover { background: var(--raised); }
  .new-messages:active { background: var(--screen); }
  .htmx-request .send-button { opacity: .6; }
}

@layer responsive {
  @media (min-width: 761px) {
    .mobile-brand-bar, .mobile-menu, .sidebar-close, .sidebar-backdrop { display: none !important; }
    .sidebar { position: static; width: 272px; flex-shrink: 0; transform: none; visibility: visible; padding: 24px 16px 20px; transition: none; }
    .channel-header { min-height: 98px; padding: 20px 32px; border-top: 0; }
    .channel-title { gap: 16px; }
    .header-hash { display: block; color: var(--accent); font: 1.75rem/1 var(--mono); }
    .channel-title h1 { font-size: 1.375rem; }
    .channel-title p { font-size: .8125rem; }
    .channel-state { font-size: .75rem; }
    .conversation-meta { padding: 20px 32px 16px; }
    .date-divider { padding-inline: 32px; }
    .message { padding: 12px 32px; }
    .message-content strong { font-size: .8125rem; }
    .message-content time { font-size: .6875rem; }
    .composer-area { padding: 16px 28px 20px; }
    .composer-identity { gap: 12px; }
    .composer-identity .identity-text { flex: 0 1 auto; }
    .character-count { font-size: .75rem; }
    .send-button span { display: inline; }
    .composer textarea { padding: 12px; min-height: 48px; }
    .composer-hint { font-size: .75rem; }
    .empty-illustration { width: 160px; height: 128px; }
    .empty-state h2 { font-size: 1.75rem; }
  }
  @media (min-width: 1200px) {
    .message { padding-inline: max(32px, calc((100% - 860px) / 2)); }
    .composer-area { padding-inline: max(28px, calc((100% - 900px) / 2)); }
  }
  @media (max-width: 420px) {
    .channel-state { width: 100%; justify-content: flex-start; padding-left: 60px; margin-top: -7px; }
  }
  @media (max-height: 560px) {
    .mobile-brand-bar { display: none; }
    .channel-header { padding-block: 8px; padding-top: max(8px, env(safe-area-inset-top)); }
    .channel-title p { display: none; }
    .channel-state { width: auto; padding-left: 0; margin-top: 0; }
    .conversation-meta { padding-block: 8px; }
    .composer-area { padding-top: 6px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .composer-identity { padding-bottom: 4px; }
    .composer-hint { padding-top: 6px; }
    .empty-state { min-height: 170px; padding-block: 12px; }
    .empty-illustration { width: 64px; height: 52px; margin-bottom: 12px; }
    .empty-kicker { display: none; }
  }
  /* Remove secondary chrome when text scaling leaves little horizontal room. */
  @container chat (max-width: 20rem) {
    .mobile-brand-bar { display: none; }
    .channel-header { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 12px; padding-top: calc(12px + env(safe-area-inset-top)); }
    .mobile-menu { grid-column: 1; grid-row: 1 / span 2; }
    .channel-title { grid-column: 2; }
    .channel-title p { display: none; }
    .channel-state { grid-column: 2; justify-content: flex-start; width: auto; padding-left: 0; margin-top: 0; }
    .conversation-meta { padding-block: 8px; }
  }
  @media (prefers-contrast: more) {
    :root { --line: #7b8a90; --control-line: #b0bbbf; --muted: #d8e0e3; }
    .message-content p { outline: 1px solid var(--control-line); }
    .own-message .message-content p { outline-color: var(--outgoing); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
    .send-button:active:not(:disabled) { transform: none; }
  }
  @media (forced-colors: active) {
    .channel-link.selected { border-left-color: Highlight; }
    .message-content p, .avatar, .composer, .send-button, .text-link, .today-link { border: 1px solid ButtonText; }
    .connection-dot { background: CanvasText; }
    .message-content p::before { display: none; }
  }
}