/* SLOT Inbox. App register: dense, calm, black and white. Logical properties only, so it works in either direction. */

:root {
  --color-bg: #FFFFFF;
  --color-bg-sunken: #F4F4F5;
  --color-bg-raised: #FFFFFF;
  --color-bg-selected: #EDEDEF;
  --color-bg-bubble-in: #F1F1F3;
  --color-bg-bubble-out: #0B0B0C;
  --color-text-bubble-out: #FFFFFF;
  --color-text: #0B0B0C;
  --color-text-subtle: #5B5B63;
  --color-border: #E2E2E6;
  --color-bg-primary: #0B0B0C;
  --color-text-primary: #FFFFFF;
  --color-bg-warning: #FFF4E0;
  --color-text-warning: #7A4A00;
  --color-bg-danger: #FDECEC;
  --color-text-danger: #A3191B;
  --color-text-success: #1C6B3A;
  --color-focus: #2D5BFF;

  --space-050: 4px;
  --space-100: 8px;
  --space-150: 12px;
  --space-200: 16px;
  --space-300: 24px;

  --radius-100: 8px;
  --radius-200: 16px;
  --font: -apple-system, BlinkMacSystemFont, "SF Hebrew", "Segoe UI", Heebo, Arial, sans-serif;
  --font-size-body: 15px;
  --font-size-small: 13px;
  --bar-height: 56px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0B0B0C;
    --color-bg-sunken: #131315;
    --color-bg-raised: #18181B;
    --color-bg-selected: #232327;
    --color-bg-bubble-in: #1F1F23;
    --color-bg-bubble-out: #F4F4F5;
    --color-text-bubble-out: #0B0B0C;
    --color-text: #F4F4F5;
    --color-text-subtle: #A1A1AA;
    --color-border: #2A2A2F;
    --color-bg-primary: #F4F4F5;
    --color-text-primary: #0B0B0C;
    --color-bg-warning: #3A2A0A;
    --color-text-warning: #FFD58A;
    --color-bg-danger: #3B1214;
    --color-text-danger: #FFB4B4;
    --color-text-success: #7BD69B;
    --color-focus: #8FA8FF;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--font-size-body)/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Layout: two panes on wide screens, one at a time on phones. */
.app { display: grid; grid-template-columns: 340px 1fr; block-size: 100dvh; }

.list { border-inline-end: 1px solid var(--color-border); display: flex; flex-direction: column; min-block-size: 0; background: var(--color-bg-sunken); }
.thread { display: flex; flex-direction: column; min-block-size: 0; position: relative; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .app .thread { display: none; }
  .app.open .list { display: none; }
  .app.open .thread { display: flex; }
}

.bar {
  display: flex; align-items: center; gap: var(--space-150);
  min-block-size: calc(var(--bar-height) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--space-200) 0;
  border-block-end: 1px solid var(--color-border);
  background: var(--color-bg-raised);
}

.brand { margin: 0; margin-inline-end: auto; white-space: nowrap; font-size: 17px; font-weight: 800; letter-spacing: 0.04em; }
.brand-sub { font-weight: 500; letter-spacing: 0; color: var(--color-text-subtle); }

.btn {
  font: inherit; font-weight: 600; border-radius: var(--radius-100);
  border: 1px solid transparent; padding: var(--space-100) var(--space-150);
  cursor: pointer; min-block-size: 40px; white-space: nowrap;
}
.btn-primary { background: var(--color-bg-primary); color: var(--color-text-primary); }
.btn-subtle { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn[aria-busy="true"] { opacity: 0.6; }

.notice {
  margin: var(--space-150); padding: var(--space-150);
  border-radius: var(--radius-100); background: var(--color-bg-warning); color: var(--color-text-warning);
  font-size: var(--font-size-small);
}

/* Conversation list */
.chats { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.chat {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-150);
  inline-size: 100%; padding: var(--space-150) var(--space-200);
  border: 0; border-block-end: 1px solid var(--color-border);
  background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.chat:hover { background: var(--color-bg-selected); }
.chat[aria-current="true"] { background: var(--color-bg-selected); }
.chat-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-time { color: var(--color-text-subtle); font-size: var(--font-size-small); }
.chat-preview { color: var(--color-text-subtle); font-size: var(--font-size-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat.unread .chat-preview { color: var(--color-text); font-weight: 600; }
.badge {
  justify-self: end; min-inline-size: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--color-bg-primary); color: var(--color-text-primary);
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}
.empty, .pick { color: var(--color-text-subtle); padding: var(--space-300); text-align: center; }
.pick { margin: auto; }

/* Thread */
.back { display: none; padding-inline: var(--space-150); }
@media (max-width: 760px) { .back { display: inline-block; } }
.who { min-inline-size: 0; }
.who-name { margin: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-meta { margin: 0; color: var(--color-text-subtle); font-size: var(--font-size-small); }

.window { font-size: var(--font-size-small); padding: var(--space-100) var(--space-200); color: var(--color-text-subtle); border-block-end: 1px solid var(--color-border); }
.window.closed { background: var(--color-bg-warning); color: var(--color-text-warning); }
.window:empty { display: none; }

.messages {
  list-style: none; margin: 0; padding: var(--space-200);
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-100);
  background: var(--color-bg);
}
.msg { max-inline-size: min(78%, 560px); display: flex; flex-direction: column; gap: 2px; }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; }
.bubble {
  padding: var(--space-100) var(--space-150); border-radius: var(--radius-200);
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--color-bg-bubble-in);
}
.msg.in .bubble { border-start-start-radius: 4px; }
.msg.out .bubble { background: var(--color-bg-bubble-out); color: var(--color-text-bubble-out); border-start-end-radius: 4px; }
.bubble img, .bubble video { display: block; max-inline-size: 100%; max-block-size: 360px; border-radius: var(--radius-100); margin-block-end: var(--space-050); }
.bubble audio { display: block; inline-size: 260px; max-inline-size: 100%; }
.bubble a { color: inherit; }
.meta { font-size: 12px; color: var(--color-text-subtle); display: flex; gap: var(--space-050); align-items: center; }
.msg.out .meta { justify-content: flex-end; }
.meta .read { color: var(--color-focus); }
.meta .failed { color: var(--color-text-danger); }
.day { align-self: center; font-size: 12px; color: var(--color-text-subtle); padding: var(--space-050) var(--space-150); border-radius: 12px; background: var(--color-bg-sunken); }

/* Composer */
.composer {
  display: flex; gap: var(--space-100); align-items: flex-end;
  padding: var(--space-100) var(--space-150);
  padding-block-end: max(var(--space-100), env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--color-border); background: var(--color-bg-raised);
}
.composer textarea {
  flex: 1; resize: none; font: inherit; color: inherit;
  background: var(--color-bg-sunken); border: 1px solid var(--color-border);
  border-radius: 20px; padding: var(--space-100) var(--space-150);
  max-block-size: 40vh; min-block-size: 40px;
}
.composer-error { margin: 0; padding: var(--space-100) var(--space-200); background: var(--color-bg-danger); color: var(--color-text-danger); font-size: var(--font-size-small); }

.thread:not(.has-chat) .thread-bar,
.thread:not(.has-chat) .window,
.thread:not(.has-chat) .messages,
.thread:not(.has-chat) .composer,
.thread:not(.has-chat) .composer-error { display: none; }
.thread.has-chat .pick { display: none; }