/* Canonical Bulbam interface layer. Loaded after styles.css. */

:root {
  --brand: #7c4dff;
  --brand-strong: #6a3ee8;
  --brand-soft: color-mix(in srgb, var(--brand) 16%, Canvas);
  --danger: #d83d45;
  --success: #35a45a;
  --shell-max: 90rem;
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-font-scale="small"] { font-size: 90%; }
html[data-font-scale="medium"] { font-size: 100%; }
html[data-font-scale="large"] { font-size: 112.5%; }

body.signed-in-mode {
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 28rem),
    var(--surface-soft);
}

.signed-in-mode .site-header { display: none; }

.signed-in-mode main {
  width: min(var(--shell-max), calc(100% - 1.2rem));
  min-height: 100dvh;
  padding: 0.6rem 0;
}

.signed-in-mode .signed-in,
.signed-in-mode .messenger-shell {
  min-height: calc(100dvh - 1.2rem);
}

.signed-in-mode .messenger-shell {
  grid-template-columns: minmax(18rem, 23.5rem) minmax(0, 1fr);
  border-radius: 1.25rem;
  box-shadow: 0 22px 70px color-mix(in srgb, #000 18%, transparent);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 0.95rem 0.45rem;
}

.sidebar-brand-mark {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  font-weight: 900;
  font-size: 1.15rem;
  box-shadow: 0 7px 22px color-mix(in srgb, var(--brand) 30%, transparent);
}

.sidebar-brand strong {
  font-size: 1.18rem;
  letter-spacing: -0.02em;
}

.sidebar-heading {
  min-height: auto;
  padding: 0.35rem 0.75rem 0.65rem;
  border-bottom: 0;
}

.sidebar-heading h2 { font-size: 1rem; }

.sidebar-actions .icon-button,
.conversation-header .icon-button {
  border-color: transparent;
  background: transparent;
}

.sidebar-actions .icon-button:hover:not(:disabled),
.conversation-header .icon-button:hover:not(:disabled) {
  background: var(--surface-raised);
}

.chat-filter-wrap {
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m20 20-4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  padding: 0 0.7rem 0.55rem;
}

.chat-filter-wrap label { font-weight: 400; }

.chat-filter {
  min-height: 2.6rem;
  padding-left: 2.45rem;
  border: 0;
  background:
    var(--surface-raised)
    var(--search-icon) 0.8rem center / 1.05rem 1.05rem no-repeat;
}

.chat-filter::placeholder { color: var(--muted); }

.chat-list {
  gap: 0.15rem;
  padding: 0.25rem 0.45rem 0.65rem;
}

.chat-item {
  grid-template-columns: 2.65rem minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 0.65rem;
  align-items: center;
  min-height: 4.65rem;
  padding: 0.62rem 0.68rem;
  border-radius: 0.9rem;
}

.chat-avatar {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #4c78d4));
  color: white;
  font-weight: 900;
}

.chat-item > strong,
.chat-item > .chat-username,
.chat-item > .chat-preview {
  grid-column: 2;
  min-width: 0;
}

.chat-item > strong { grid-row: 1; }
.chat-item > .chat-username { grid-row: 2; display: none; }
.chat-item > .chat-preview { grid-row: 3; }

.chat-item.is-current {
  background: color-mix(in srgb, var(--brand) 21%, var(--surface));
  box-shadow: none;
}

.chat-item.is-current .chat-preview {
  color: color-mix(in srgb, var(--brand) 82%, CanvasText);
}

.conversation-pane {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--brand) 3.5%, transparent) 0 1px, transparent 1.5px) 0 0 / 26px 26px,
    color-mix(in srgb, var(--brand) 2.5%, var(--surface));
}

/* Keep the four conversation rows stable even when optional rows are hidden. */
.conversation-header { grid-row: 1; }
.call-banner { grid-row: 2; }
.conversation-empty,
.message-list { grid-row: 3; }
.composer { grid-row: 4; }

.conversation-header { padding: 0.62rem 0.85rem; }

.conversation-avatar {
  background: linear-gradient(145deg, var(--brand), #5265d5);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--brand) 24%, transparent);
}

#call-start {
  width: 2.85rem;
  height: 2.85rem;
}

.message-list {
  gap: 0.48rem;
  padding: 1.2rem clamp(0.75rem, 2.2vw, 1.8rem);
}

.message,
.message-empty {
  width: min(42rem, 78%);
  padding: 0.62rem 0.78rem;
  border: 0;
  box-shadow: 0 5px 18px color-mix(in srgb, #000 7%, transparent);
}

.message-mine {
  color: CanvasText;
  background: color-mix(in srgb, var(--brand) 34%, var(--surface));
  border-bottom-right-radius: 0.3rem;
}

.message-theirs {
  background: color-mix(in srgb, CanvasText 7%, var(--surface));
}

.message-author {
  color: color-mix(in srgb, var(--brand) 78%, CanvasText);
}

.message[role="group"]:focus-within {
  outline: 2px solid color-mix(in srgb, var(--brand) 68%, transparent);
  outline-offset: 2px;
}

.composer {
  margin: 0 0.72rem 0.72rem;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 1.35rem;
  background: color-mix(in srgb, Canvas 96%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, #000 10%, transparent);
  backdrop-filter: blur(18px);
}

.composer textarea {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.composer textarea:focus-visible { outline-offset: 0; }

.composer-action {
  width: 2.85rem;
  min-width: 2.85rem;
  height: 2.85rem;
  min-height: 2.85rem;
}

.voice-recording .voice-action {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent);
}

.voice-draft-panel {
  border-style: solid;
  background: color-mix(in srgb, CanvasText 6%, var(--surface));
}

.call-banner {
  margin: 0.6rem 0.8rem 0;
  border: 0;
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  box-shadow: inset 3px 0 0 var(--success);
}

/* Compact mode: one navigable row per message, inspired by the reference Telegram client. */
html[data-message-view="compact"] .message-list {
  padding: 0;
  background: color-mix(in srgb, Canvas 96%, transparent);
}

html[data-message-view="compact"] .message,
html[data-message-view="compact"] .message-empty {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0.85rem;
  background: transparent;
  box-shadow: none;
}

html[data-message-view="compact"] .message-mine {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 65%, transparent);
}

html[data-message-view="compact"] .message-author,
html[data-message-view="compact"] .message-meta { display: block; }

html[data-message-view="compact"] .message-author::after { content: none; }
html[data-message-view="compact"] .message p { margin: 0; }
html[data-message-view="compact"] .voice-message { margin: 0; }
html[data-message-view="compact"] .message-meta { text-align: right; white-space: nowrap; }
html[data-message-view="compact"] .retry-message { grid-column: 2 / -1; justify-self: start; }

/* Table view stays a semantic message list for screen readers but uses stable visual columns. */
html[data-message-view="table"] .message-list {
  align-content: start;
  gap: 0;
  padding: 0.65rem;
  background: var(--surface);
}

html[data-message-view="table"] .message,
html[data-message-view="table"] .message-empty {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr) minmax(7rem, 10rem);
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  padding: 0.68rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-message-view="table"] .message:first-child { border-top: 1px solid var(--border); }
html[data-message-view="table"] .message-mine { background: color-mix(in srgb, var(--brand) 7%, transparent); }
html[data-message-view="table"] .message p,
html[data-message-view="table"] .voice-message { margin: 0; }
html[data-message-view="table"] .message-meta { text-align: right; }
html[data-message-view="table"] .retry-message { grid-column: 2 / -1; justify-self: start; }

.appearance-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.appearance-controls label { min-width: 0; }

.settings-dialog { width: min(68rem, calc(100% - 1rem)); }

.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-grid > .card:first-child { grid-column: 1 / -1; }

.icon-button[data-icon="stop"]::before,
.voice-action[aria-pressed="true"]::before {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 0.16rem;
  background: currentColor;
  -webkit-mask: none;
  mask: none;
}

@media (max-width: 64rem) {
  .signed-in-mode .messenger-shell {
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  }

  html[data-message-view="table"] .message,
  html[data-message-view="table"] .message-empty {
    grid-template-columns: 7rem minmax(0, 1fr) 7rem;
  }
}

@media (max-width: 48rem) {
  .signed-in-mode main,
  .signed-in-mode .signed-in,
  .signed-in-mode .messenger-shell {
    min-height: 100dvh;
    width: 100%;
    padding: 0;
  }

  .signed-in-mode .messenger-shell {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .sidebar-brand { padding-top: calc(0.75rem + env(safe-area-inset-top)); }
  .chat-sidebar,
  .conversation-pane { min-height: 100dvh; }
  .conversation-header { padding-top: calc(0.55rem + env(safe-area-inset-top)); }
  .message-list { padding-inline: 0.6rem; }

  .message,
  .message-empty { width: min(34rem, 88%); }

  .composer { margin: 0 0.45rem calc(0.45rem + env(safe-area-inset-bottom)); }

  .settings-dialog {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .settings-grid { grid-template-columns: 1fr; }
  .settings-grid > .card:first-child { grid-column: 1; }
  .appearance-controls { grid-template-columns: 1fr; }

  html[data-message-view="table"] .message-list { padding: 0; }

  html[data-message-view="table"] .message,
  html[data-message-view="table"] .message-empty {
    grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.62rem 0.7rem;
  }

  html[data-message-view="table"] .message-meta {
    grid-column: 2;
    text-align: left;
  }
}