/* Chat composer polish */
.chat-input-area {
  padding: 12px 24px 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

.chat-composer {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  padding: 6px 10px 6px 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.chat-composer:focus-within {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

.chat-textarea {
  min-height: 52px;
}

/* Markdown rendering */
.message-content .md-heading {
  margin: 0.85em 0 0.45em;
  line-height: 1.3;
  color: #f2f6ff;
  font-weight: 700;
}
.message-content .md-h1 { font-size: 1.45rem; }
.message-content .md-h2 { font-size: 1.25rem; }
.message-content .md-h3 { font-size: 1.1rem; }
.message-content .md-h4,
.message-content .md-h5,
.message-content .md-h6 { font-size: 1rem; }
.message-content .md-paragraph {
  margin: 0.55em 0;
  line-height: 1.65;
}
.message-content .md-list {
  margin: 0.55em 0 0.85em 1.25em;
  padding: 0;
}
.message-content .md-list li {
  margin: 0.35em 0;
  line-height: 1.55;
}
.message-content .md-quote {
  margin: 0.75em 0;
  padding: 0.65em 0.9em;
  border-left: 3px solid rgba(var(--accent-rgb), 0.55);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 10px 10px 0;
}
.message-content .md-quote p { margin: 0.35em 0; }
.message-content .code-block {
  margin: 0.75em 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  line-height: 1.5;
  white-space: pre-wrap;
}
.message-content .inline-code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.message-content a {
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.message-content .md-hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 1em 0;
}
.message-content .md-table-wrap {
  overflow-x: auto;
  margin: 0.75em 0;
}
.message-content .md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
.message-content .md-table th,
.message-content .md-table td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 10px;
  text-align: left;
}
.message-content .md-table th {
  background: rgba(255, 255, 255, 0.06);
}
.message-content .md-line-link {
  margin: 0.25em 0;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  word-break: break-all;
}
.message-content .md-spacer {
  height: 0.35em;
}

/* Queued messages */
.chat-message.user.queued {
  opacity: 0.82;
  border-style: dashed;
}
.message-queued-badge,
.queued-label {
  color: #f0c674;
}
.message-queued-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.message-queued-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(240, 198, 116, 0.12);
  border: 1px solid rgba(240, 198, 116, 0.35);
}
.message-queue-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.message-queue-remove:hover {
  background: rgba(255, 80, 80, 0.28);
  color: #fff;
}
#chat-queue-strip {
  display: none;
  max-width: 720px;
  margin: 0 auto 10px;
}
.chat-queue-strip-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}
.chat-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(240, 198, 116, 0.08);
  border: 1px dashed rgba(240, 198, 116, 0.28);
}
.chat-queue-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #f0c674;
}
.chat-queue-preview {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-queue-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.chat-queue-remove:hover {
  background: rgba(255, 80, 80, 0.25);
  color: #fff;
}

@media (max-width: 768px) {
  .chat-input-area {
    padding: 10px 12px 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .chat-composer {
    border-radius: 22px;
  }
}

.chat-cloud-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.session-actions-root {
  margin-left: auto;
  display: none;
  align-items: center;
}

.session-actions {
  position: relative;
}

.session-actions-toggle {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.session-actions-toggle:hover {
  background: rgba(0, 234, 255, 0.08);
  border-color: rgba(0, 234, 255, 0.25);
}

.session-actions-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 18, 32, 0.98);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1200;
}

.session-actions.open .session-actions-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.session-actions-id {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  padding: 6px 8px 8px;
  word-break: break-all;
}

.session-actions-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  cursor: pointer;
}

.session-actions-item:hover {
  background: rgba(0, 234, 255, 0.08);
}

.session-actions-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(12, 18, 32, 0.95);
  border: 1px solid rgba(0, 234, 255, 0.25);
  color: #e8f4ff;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10000;
  pointer-events: none;
}

.session-actions-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Message roles: clear user vs Atlas (all viewports) ── */
.chat-message.user,
.message.user-message {
  background: linear-gradient(145deg, rgba(22, 42, 72, 0.92), rgba(12, 22, 40, 0.96));
  border: 1px solid rgba(0, 234, 255, 0.22);
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 16px 18px;
}
.chat-message.user .message-role,
.message.user-message .message-role {
  color: rgba(0, 234, 255, 0.85);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.chat-message.user .message-content,
.message.user-message .message-content {
  color: #e8f4ff;
}

.chat-message.assistant,
.message.assistant-message {
  background: linear-gradient(
    145deg,
    rgba(219, 112, 147, 0.16) 0%,
    rgba(186, 85, 140, 0.09) 45%,
    rgba(120, 60, 110, 0.06) 100%
  );
  border: 2px solid rgba(200, 90, 130, 0.72);
  border-radius: 20px;
  box-shadow:
    0 10px 36px rgba(219, 112, 147, 0.14),
    0 0 0 1px rgba(255, 160, 190, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(219, 112, 147, 0.08);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  padding: 16px 18px;
}
.chat-message.assistant .message-role,
.message.assistant-message .message-role {
  color: rgba(255, 192, 210, 0.9);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.message-role-agent {
  display: flex;
  align-items: center;
  gap: 8px;
}
.message-role-agent-icon {
  flex-shrink: 0;
  color: rgba(0, 234, 255, 0.92);
  filter: drop-shadow(0 0 5px rgba(0, 234, 255, 0.45));
}
.message-role-agent-text {
  line-height: 1.2;
}
.chat-message.assistant .message-content,
.message.assistant-message .message-content {
  color: rgba(255, 244, 250, 0.96);
}
.chat-message.assistant .message-content .md-heading,
.message.assistant-message .message-content .md-heading {
  color: #fff5fa;
}
.chat-message.assistant .message-content .md-quote,
.message.assistant-message .message-content .md-quote {
  background: rgba(219, 112, 147, 0.12);
  border-left-color: rgba(255, 182, 203, 0.55);
}
.chat-message.assistant .message-content a,
.message.assistant-message .message-content a {
  color: #ffb6d9;
}
.chat-message.assistant .message-content .code-block,
.message.assistant-message .message-content .code-block {
  background: rgba(8, 10, 18, 0.45);
  border-color: rgba(255, 182, 203, 0.2);
}

.chat-messages {
  scroll-padding-top: 20px;
  scroll-padding-bottom: 28px;
}

/* ── Mobile chat: spacious composer + header buffer ── */
@media (max-width: 768px) {
  .chat-main:not(.welcome-state) .chat-cloud-bar {
    position: sticky;
    top: 0;
    z-index: 80;
    padding-top: calc(env(safe-area-inset-top, 0px) + 46px) !important;
    padding-left: 54px !important;
    padding-right: 12px !important;
    padding-bottom: 10px !important;
    background: linear-gradient(180deg, rgba(6, 10, 20, 0.94) 0%, rgba(6, 10, 20, 0.78) 100%) !important;
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid rgba(255, 182, 203, 0.12) !important;
  }

  .chat-main:not(.welcome-state) .chat-messages {
    padding-top: 18px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 16px !important;
  }

  .chat-main:not(.welcome-state) #chat-messages::before {
    content: '';
    display: block;
    flex-shrink: 0;
    height: 6px;
    width: 100%;
  }

  .chat-main:not(.welcome-state) .chat-message,
  .chat-main:not(.welcome-state) .message {
    scroll-margin-top: 18px;
    scroll-margin-bottom: 22px;
  }

  .chat-messages {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 12px !important;
  }

  .chat-input-area {
    max-height: none !important;
    overflow: visible !important;
    padding: 10px 14px 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(180deg, transparent 0%, rgba(6, 10, 20, 0.55) 28%, rgba(6, 10, 20, 0.92) 100%);
  }

  .chat-composer {
    padding: 12px 12px 12px 16px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  .chat-main.welcome-state .chat-textarea {
    min-height: 100px !important;
    max-height: min(38vh, 340px) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    padding: 10px 0 !important;
  }

  /* Active conversation: full-width bottom composer (not welcome hero layout) */
  .chat-main.active-chat:not(.welcome-state) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .chat-main.active-chat:not(.welcome-state) .chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .chat-main.active-chat:not(.welcome-state) .chat-input-area {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  .chat-main.active-chat:not(.welcome-state) .chat-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .chat-main.active-chat:not(.welcome-state) .chat-composer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .chat-main.active-chat:not(.welcome-state) .chat-composer-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    width: 100% !important;
  }

  .chat-main.active-chat:not(.welcome-state) .chat-textarea {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 48px !important;
    max-height: min(28vh, 140px) !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    padding: 8px 0 !important;
  }

  .chat-main.active-chat:not(.welcome-state) .chat-composer-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    flex-direction: row !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .chat-main.welcome-state {
    justify-content: space-between !important;
    align-items: stretch !important;
    padding: calc(var(--topbar-height, 52px) + env(safe-area-inset-top, 0px) + clamp(8px, 6dvh, 28px)) 0 0 !important;
    overflow: hidden !important;
  }

  .chat-main.welcome-state .chat-messages {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 4px 10px 8px !important;
    width: 100% !important;
  }

  .chat-main.welcome-state .welcome-message {
    padding: clamp(12px, 4dvh, 24px) 8px 8px !important;
    width: 100% !important;
  }

  .chat-main.welcome-state .welcome-logo-img.chat-welcome-logo {
    max-width: min(220px, 58vw) !important;
    min-width: 0 !important;
  }

  .chat-main.welcome-state .chat-input-area {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(180deg, transparent 0%, rgba(6, 10, 20, 0.75) 40%) !important;
  }

  .chat-main.welcome-state .chat-form {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .chat-main.welcome-state .chat-composer {
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 14px 12px !important;
    border-radius: 24px !important;
    background: linear-gradient(165deg, rgba(28, 38, 58, 0.95), rgba(14, 18, 32, 0.98)) !important;
    border: 1px solid rgba(0, 234, 255, 0.22) !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.04) inset,
      0 16px 48px rgba(0, 0, 0, 0.45),
      0 0 32px rgba(0, 234, 255, 0.08) !important;
  }

  .chat-main.welcome-state .chat-composer-row {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 10px !important;
  }

  .chat-main.welcome-state .chat-upload-btn {
    flex: 0 0 40px;
    align-self: flex-end;
    margin-bottom: 2px;
  }

  .chat-main.welcome-state .chat-textarea {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 118px !important;
    max-height: 200px !important;
    padding: 8px 4px 8px 0 !important;
    line-height: 1.5 !important;
  }

  .chat-main.welcome-state .chat-composer-actions {
    flex: 1 1 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 4px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .chat-main.welcome-state .gen-type-select {
    flex: 1 1 auto !important;
    max-width: calc(100% - 52px) !important;
    font-size: 12px !important;
    padding: 8px 28px 8px 12px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .chat-main.welcome-state .chat-send-btn {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(0, 234, 255, 0.25) !important;
  }

  .chat-message,
  .message {
    margin-bottom: 14px !important;
  }

  .chat-scroll-btn {
    bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    background: rgba(12, 18, 32, 0.92);
    border-color: rgba(0, 234, 255, 0.25);
  }

  @media (display-mode: standalone) {
    #chat-page .chat-main.welcome-state {
      padding-top: calc(env(safe-area-inset-top, 0px) + clamp(52px, 18dvh, 100px)) !important;
    }

    #chat-page .chat-main.welcome-state .welcome-message {
      padding-top: clamp(16px, 5dvh, 32px) !important;
    }
  }
}

@media (max-width: 480px) {
  .chat-main.welcome-state .chat-input-area {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .chat-main.welcome-state .chat-textarea {
    min-height: 112px !important;
    max-height: 188px !important;
  }
  .chat-main.welcome-state .chat-textarea {
    min-height: 96px !important;
  }
  .chat-main.active-chat:not(.welcome-state) .chat-textarea {
    min-height: 44px !important;
  }
}

/* Read-aloud voice picker (above composer) */
.chat-voice-picker-anchor {
  position: relative;
  max-width: 800px;
  margin: 0 auto 6px;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
}
.chat-voice-picker-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0, 234, 255, 0.35);
  background: rgba(6, 12, 24, 0.65);
  color: rgba(0, 234, 255, 0.95);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.chat-voice-picker-btn:hover {
  transform: scale(1.05);
  border-color: rgba(0, 234, 255, 0.65);
  background: rgba(0, 234, 255, 0.12);
}
.voice-picker-panel {
  display: none;
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  width: min(340px, calc(100% - 24px));
  max-height: min(420px, 55vh);
  overflow: auto;
  z-index: 120;
  border-radius: 16px;
  border: 1px solid rgba(255, 182, 203, 0.35);
  background: linear-gradient(160deg, rgba(22, 12, 28, 0.97), rgba(10, 14, 26, 0.98));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  padding: 12px 10px 10px;
}
.voice-picker-panel.open { display: block; }
.voice-picker-header { padding: 4px 8px 10px; }
.voice-picker-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #f5e8ff;
}
.voice-picker-hint {
  display: block;
  font-size: 11px;
  color: rgba(220, 200, 230, 0.65);
  margin-top: 4px;
}
.voice-picker-list { display: flex; flex-direction: column; gap: 8px; }
.voice-picker-item {
  text-align: left;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 12px;
  cursor: pointer;
  color: #f0e6f8;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.voice-picker-item:hover,
.voice-picker-item-previewing {
  border-color: rgba(0, 234, 255, 0.45);
  background: rgba(0, 234, 255, 0.08);
}
.voice-picker-item-active {
  border-color: rgba(255, 105, 180, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 105, 180, 0.25);
}
.voice-picker-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
}
.voice-picker-item-sub {
  display: block;
  font-size: 11px;
  color: rgba(220, 200, 230, 0.7);
  margin-top: 3px;
}
.voice-picker-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(219, 112, 147, 0.25);
  color: #ffb6d9;
  border: 1px solid rgba(255, 182, 203, 0.35);
}
.voice-picker-badge-ultra {
  background: rgba(0, 234, 255, 0.15);
  color: #7df9ff;
  border-color: rgba(0, 234, 255, 0.45);
}

/* Agent/user message action toolbar (new class — immune to stale msg-actions-bar grid cache) */
#chat-page .atlas-msg-actions {
  display: grid !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 10px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  opacity: 0.92;
}
#chat-page .chat-message.assistant > .atlas-msg-actions--agent {
  grid-template-columns: repeat(4, 48px) !important;
}
#chat-page .chat-message.user > .atlas-msg-actions--user {
  grid-template-columns: repeat(3, 48px) !important;
}
#chat-page .chat-message:hover > .atlas-msg-actions,
#chat-page .chat-message:focus-within > .atlas-msg-actions {
  opacity: 1;
}
#chat-page .atlas-msg-actions__btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  cursor: pointer;
  line-height: 1 !important;
  background: rgba(8, 12, 22, 0.72) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
#chat-page .atlas-msg-actions__btn svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}
#chat-page .atlas-msg-actions__btn--delete {
  color: #ff6b8a !important;
  border: 1px solid rgba(255, 77, 109, 0.55) !important;
  box-shadow: 0 0 12px rgba(255, 77, 109, 0.22) !important;
}
#chat-page .atlas-msg-actions__btn--copy {
  color: #5ee7ff !important;
  border: 1px solid rgba(0, 234, 255, 0.5) !important;
  box-shadow: 0 0 12px rgba(0, 234, 255, 0.2) !important;
}
#chat-page .atlas-msg-actions__btn--resubmit {
  color: #fde047 !important;
  border: 1px solid rgba(250, 204, 21, 0.55) !important;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.18) !important;
}
#chat-page .atlas-msg-actions__btn--speak {
  color: #86efac !important;
  border: 1px solid rgba(74, 222, 128, 0.55) !important;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.22) !important;
}
#chat-page .atlas-msg-actions__btn:hover {
  transform: scale(1.05);
  color: #fff !important;
}
#chat-page .atlas-msg-actions__btn--delete:hover {
  background: rgba(255, 77, 109, 0.22) !important;
}
#chat-page .atlas-msg-actions__btn--copy:hover {
  background: rgba(0, 234, 255, 0.16) !important;
}
#chat-page .atlas-msg-actions__btn--resubmit:hover {
  background: rgba(250, 204, 21, 0.16) !important;
}
#chat-page .atlas-msg-actions__btn--speak:hover,
#chat-page .atlas-msg-actions__btn--speak.is-active {
  background: rgba(74, 222, 128, 0.22) !important;
}
#chat-page .atlas-msg-actions__btn--copy.copied {
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.65) !important;
}
#chat-page .chat-message.user .atlas-msg-actions__btn--speak,
#chat-page .chat-message.user .msg-speak-btn {
  display: none !important;
}

/* Generated image full-screen preview (chat) */
.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 25000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 16, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.image-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(12, 18, 32, 0.96);
  border: 1px solid rgba(0, 234, 255, 0.22);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.image-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 0;
}
.image-lightbox-title {
  font-size: 15px;
  font-weight: 600;
  color: #e8ecf4;
}
.image-lightbox-close-top {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.image-lightbox-close-top:hover {
  background: rgba(255, 77, 109, 0.25);
  border-color: rgba(255, 77, 109, 0.45);
}
.image-lightbox-media {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-lightbox-image {
  max-width: 100%;
  max-height: min(62vh, 640px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  user-select: none;
  -webkit-user-drag: none;
}
.image-lightbox-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 14px 14px;
}
.image-lightbox-btn {
  flex: 1 1 140px;
  min-height: 48px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}
.image-lightbox-btn-save {
  color: #e0f2fe;
  background: rgba(0, 234, 255, 0.12);
  border-color: rgba(0, 234, 255, 0.45);
}
.image-lightbox-btn-save:hover {
  background: rgba(0, 234, 255, 0.22);
}
.image-lightbox-btn-save:disabled {
  opacity: 0.55;
  cursor: wait;
}
.image-lightbox-btn-done {
  color: #041018;
  background: linear-gradient(135deg, #00eaff, #22d3ee);
  border-color: rgba(0, 234, 255, 0.6);
}
.image-lightbox-btn-done:hover {
  filter: brightness(1.05);
}
html.atlas-image-lightbox-open #chat-page .chat-main {
  overflow: hidden;
}

/* Mobile: fixed + viewport-centered so overflow:hidden on .chat-main cannot clip the menu */
@media (max-width: 768px) {
  .chat-voice-picker-anchor {
    padding-left: 14px;
    padding-right: 14px;
    justify-content: center;
  }

  .voice-picker-panel.voice-picker-panel-fixed {
    position: fixed;
    z-index: 10050;
    max-height: min(420px, 52vh);
    box-sizing: border-box;
  }
}

/* =====================================================================
   ATL-002 · Nebula Bloom mobile chat — labelled breakpoint sections
   ---------------------------------------------------------------------
   All chat CSS lives in this file. Sections, per the platform rules:
     ≥1025     desktop       — unchanged in ATL-002 (later phase)
     768–1024  tablet        — unchanged in ATL-002 (later phase)
     ≤768      mobile        — ATL-002
     ≤480      small phones  — ATL-002
   Colours come from the theme palette that ThemeManager writes to :root
   as --nb-p-* / --nb-nebula-* (ui/theme.tokens.js). There are no
   per-theme CSS files and no [data-theme] blocks here.
   New mobile-only markup in views/chat.html ships with the `hidden`
   attribute, so wider viewports render exactly as before; the ≤768
   section reveals it.
   Rules written before this block are the pre-ATL-002 rules, kept as-is.
   ===================================================================== */

/* ── Section ≥1025 (desktop) ── no ATL-002 changes ─────────────────── */

/* ── Section 768–1024 (tablet) ── no ATL-002 changes ───────────────── */

/* ── Section ≤768 (mobile) ─────────────────────────────────────────── */

/* Outfit (OFL-1.1, self-hosted). Only downloaded when a ≤768 rule uses it. */
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@media (max-width: 768px) {
  /* Page backdrop: theme base colour + three nebula washes */
  #chat-page {
    --nbx-safe-top: env(safe-area-inset-top, 0px);
    --nbx-safe-bottom: env(safe-area-inset-bottom, 0px);
    --nbx-dur-theme: 280ms;
    --nbx-danger-soft: #FFB3C2; /* Delete icon/label (10.2-11.0:1 on the pill) */
    font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #fff;
    /* Starfield (round 2): static CSS dots in the theme star colour, no images and no
       animation, so prefers-reduced-motion is respected by construction. */
    --nbx-star: var(--nb-p-star, #fff);
    background:
      radial-gradient(circle at 23px 41px, color-mix(in srgb, var(--nbx-star) 85%, transparent) 0 1px, transparent 1.6px) 0 0 / 137px 151px repeat,
      radial-gradient(circle at 97px 12px, color-mix(in srgb, var(--nbx-star) 55%, transparent) 0 0.8px, transparent 1.4px) 0 0 / 173px 197px repeat,
      radial-gradient(circle at 61px 133px, color-mix(in srgb, var(--nbx-star) 70%, transparent) 0 1.1px, transparent 1.7px) 0 0 / 211px 241px repeat,
      radial-gradient(circle at 150px 80px, color-mix(in srgb, var(--nbx-star) 40%, transparent) 0 0.7px, transparent 1.3px) 0 0 / 229px 163px repeat,
      radial-gradient(circle at 11px 200px, color-mix(in srgb, var(--nbx-star) 60%, transparent) 0 0.9px, transparent 1.5px) 0 0 / 263px 277px repeat,
      radial-gradient(220px 170px at 18% 22%, color-mix(in srgb, var(--nb-p-nebula-a) calc(var(--nb-nebula-a-opacity, 0.55) * 100%), transparent) 0%, transparent 100%),
      radial-gradient(160px 140px at 100% 42%, color-mix(in srgb, var(--nb-p-nebula-b) calc(var(--nb-nebula-b-opacity, 0.45) * 100%), transparent) 0%, transparent 100%),
      radial-gradient(160px 140px at 0% 78%, color-mix(in srgb, var(--nb-p-nebula-c) calc(var(--nb-nebula-c-opacity, 0.6) * 100%), transparent) 0%, transparent 100%),
      var(--nb-p-bg);
  }
  #chat-page button,
  #chat-page select,
  #chat-page textarea {
    font-family: inherit;
  }

  /* Visible keyboard focus: 3px theme focus ring, 2px offset */
  #chat-page :focus-visible,
  #chat-mobile-menu-btn:focus-visible,
  #shell-mobile-menu-btn:focus-visible {
    outline: 3px solid var(--nb-p-focus) !important;
    outline-offset: 2px;
  }

  /* ---- Top bar: menu button (app shell) + capsule --------------------- */
  .voice-picker-clone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .voice-picker-clone input,
  .voice-picker-clone select {
    width: 100%;
    box-sizing: border-box;
    font: 14px/1.3 inherit;
    color: inherit;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px;
  }

  #chat-mobile-menu-btn,
  #shell-mobile-menu-btn {
    top: calc(max(var(--nbx-safe-top, env(safe-area-inset-top, 0px)), 26px) + 12px);
    left: 10px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #chat-mobile-menu-btn svg {
    width: 26px;
    height: 26px;
  }

  #chat-page .chat-main .chat-cloud-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 90 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-height: 60px;
    padding: calc(max(env(safe-area-inset-top, 0px), 26px) + 8px) 12px 8px 62px !important;
    background: transparent !important;
    border-bottom: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-sizing: border-box;
  }

  #chat-page .chat-control-capsule,
  #chat-page .chat-control-capsule[hidden] {
    order: 2;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 52px;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 26px;
    background: var(--nb-p-surface-900-a94);
    border: 1.5px solid var(--nb-p-accent-a85);
    box-shadow: 0 0 24px 0 var(--nb-p-accent-a25), inset 0 1px 0 #FFFFFF30;
  }
  #chat-page .session-actions-root {
    order: 1; /* r3: JS also moves it before the capsule in the DOM, so focus order = visual order */
  }
  #chat-page .session-actions-toggle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border-color: #FFFFFF24;
    background: var(--nb-p-surface-900-a94);
  }

  #chat-page .chat-capsule-btn,
  #chat-page #chat-voice-capsule-slot .chat-voice-picker-btn {
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    box-shadow: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: 600 15px/1.33 "Outfit", system-ui, sans-serif;
    cursor: pointer;
    transform: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1), transform 120ms cubic-bezier(0.2, 0, 0, 1);
  }
  #chat-page .chat-connectors-btn {
    padding: 0 14px 0 12px;
  }
  #chat-page .chat-capsule-icon,
  #chat-page .chat-voice-icon-capsule svg {
    color: var(--nb-p-accent);
    flex: none;
  }
  #chat-page .chat-capsule-icon--theme {
    filter: drop-shadow(0 0 4px var(--nb-p-accent));
  }
  #chat-page .chat-capsule-chevron {
    color: var(--nb-p-accent-soft);
    flex: none;
    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
  }
  #chat-page .chat-capsule-btn[aria-expanded="true"],
  #chat-page #chat-voice-capsule-slot .chat-voice-picker-btn[aria-expanded="true"] {
    background: var(--nb-p-surface-800);
  }
  #chat-page .chat-capsule-btn[aria-expanded="true"] .chat-capsule-chevron {
    transform: rotate(180deg);
  }
  #chat-page .chat-capsule-btn:active,
  #chat-page #chat-voice-capsule-slot .chat-voice-picker-btn:active {
    background-color: #FFFFFF24;
    transform: scale(0.97);
  }
  #chat-page .chat-capsule-divider {
    width: 1px;
    height: 26px;
    flex: none;
    background: #FFFFFF33;
  }
  #chat-page .chat-capsule-status {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Voice trigger inside the capsule: design icon instead of the legacy head icon */
  #chat-page #chat-voice-capsule-slot {
    display: flex;
  }
  #chat-page #chat-voice-capsule-slot .chat-voice-picker-btn > svg {
    display: none;
  }
  #chat-page .chat-voice-icon-capsule,
  #chat-page .chat-voice-icon-capsule[hidden] {
    display: flex;
  }
  #chat-page .chat-voice-icon-capsule svg {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 0 5px var(--nb-p-accent));
  }
  /* The anchor keeps hosting the panel (hook ID unchanged) but takes no space */
  #chat-page .chat-voice-picker-anchor {
    margin: 0 !important;
    padding: 0 !important;
    height: 0;
    min-height: 0;
  }

  /* ---- Connectors drop-down (menu button) — frosted see-through panel - */
  #chat-page .chat-cloud-bar .chat-cloud-icons {
    display: none;
  }
  #chat-page .chat-cloud-bar .chat-cloud-icons.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    z-index: 1000;
    top: calc(100% + 4px);
    left: 12px;
    right: 12px;
    padding: 6px 8px 10px;
    border-radius: 24px;
    background: var(--nb-p-surface-950-a35);
    -webkit-backdrop-filter: blur(6px) saturate(1.5);
    backdrop-filter: blur(6px) saturate(1.5);
    border: 1.5px solid var(--nb-p-accent-a85);
    /* last shadow = light 15% scrim over the page (design: connectors scrim) */
    box-shadow: 0 30px 60px #000000DD, 0 0 40px 0 var(--nb-p-accent-a20), 0 0 0 100vmax #00000026;
  }
  #chat-page .chat-cloud-bar .chat-cloud-icons.is-open::before {
    content: "Connectors";
    content: "Connectors" / "";
    display: block;
    padding: 10px 6px 8px 12px;
    font: 600 18px/1.33 "Outfit", system-ui, sans-serif;
    color: #fff;
    text-shadow: 0 0 6px var(--nb-p-surface-950-a70);
  }
  #chat-page .chat-cloud-bar .chat-cloud-icons.is-open .chat-cloud-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    height: auto;
    min-height: 60px;
    padding: 8px 8px 8px 10px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    color: #fff;
    transform: none;
    text-align: left;
    font: 500 17px/1.41 "Outfit", system-ui, sans-serif;
  }
  #chat-page .chat-cloud-bar .chat-cloud-icons.is-open .chat-cloud-btn + .chat-cloud-btn {
    border-top: 1px solid #FFFFFF1A;
  }
  #chat-page .chat-cloud-bar .chat-cloud-icons.is-open .chat-cloud-btn:focus-visible {
    outline-offset: -3px;
  }
  #chat-page .chat-cloud-bar .chat-cloud-icons.is-open .chat-cloud-btn:active {
    background-color: #FFFFFF24;
  }
  /* 42px icon tile around the existing 20px connector mark */
  #chat-page .chat-cloud-bar .chat-cloud-icons.is-open .chat-cloud-btn > svg {
    width: 42px;
    height: 42px;
    padding: 10px;
    box-sizing: border-box;
    flex: none;
    border-radius: 14px;
    background: var(--nb-p-tile);
    border: 1px solid #FFFFFF26;
    color: #fff;
  }
  #chat-page .chat-cloud-btn-label,
  #chat-page .chat-cloud-btn-label[hidden] {
    display: inline;
    flex: 1;
    text-shadow: 0 0 6px var(--nb-p-surface-950-a70);
  }
  #chat-page .chat-cloud-bar .chat-cloud-icons.is-open .chat-cloud-btn.connected::after {
    position: static;
    flex: none;
    width: 10px;
    height: 10px;
    margin-right: 10px;
  }

  /* ---- Welcome state -------------------------------------------------- */
  #chat-page .chat-main.welcome-state {
    padding: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  /* Let the welcome children (logo, hints) be ordered next to the greeting */
  #chat-page .chat-main.welcome-state #chat-messages,
  #chat-page .chat-main.welcome-state #welcome-container {
    display: contents !important;
  }
  #chat-page .chat-main.welcome-state .chat-cloud-bar { order: 0; }
  #chat-page .chat-main.welcome-state .welcome-logo-area,
  #chat-page .chat-main.welcome-state .welcome-tier-title { order: 1; }
  #chat-page .chat-main.welcome-state .chat-welcome-greeting { order: 2; }
  #chat-page .chat-main.welcome-state .welcome-hints { order: 3; }
  #chat-page .chat-main.welcome-state > :not(.chat-cloud-bar):not(.chat-welcome-greeting):not(#chat-messages) { order: 4; }
  #chat-page .chat-main.welcome-state .chat-input-area { order: 5; margin-top: auto !important; }

  #chat-page .chat-main.welcome-state .welcome-logo-area {
    display: flex;
    justify-content: flex-start;
    margin: 4px 20px 0;
    padding: 0;
  }
  #chat-page .chat-main.welcome-state .welcome-logo-img,
  #chat-page .chat-main.welcome-state .welcome-logo-img.chat-welcome-logo {
    width: 132px !important;
    max-width: 132px !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 12px;
    box-shadow: 0 0 18px var(--nb-p-accent-a33) !important;
    filter: none;
  }
  #chat-page .chat-main.welcome-state .welcome-tier-title {
    display: none;
  }
  #chat-page .chat-main .chat-welcome-greeting {
    display: none;
  }
  #chat-page .chat-main.welcome-state .chat-welcome-greeting,
  #chat-page .chat-main.welcome-state .chat-welcome-greeting[hidden] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 0 auto;
    min-height: min(440px, 56dvh);
    margin: 0 20px;
    padding: 28px 0 88px;
    overflow: hidden;
  }
  #chat-page .chat-welcome-greeting-title {
    margin: 0;
    font: 600 32px/1.26 "Outfit", system-ui, sans-serif;
    letter-spacing: 0;
    color: #fff;
    text-shadow: 0 0 24px var(--nb-p-accent-a33);
  }
  #chat-page .chat-welcome-greeting-em {
    display: block;
    color: var(--nb-p-accent-soft);
  }

  /* ---- Round 2: brand lockup, subtitle, shortcut chips ---------------- */
  /* The bundle's 256px logo image is replaced on mobile by the design's lockup
     (stand-in mark [[CONFIRM]] + wordmark + tagline) inside .chat-welcome-greeting. */
  #chat-page .chat-main.welcome-state .welcome-logo-area {
    display: none !important;
  }
  #chat-page .chat-brand-lockup {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
  }
  #chat-page .chat-brand-mark {
    width: 40px;
    height: 40px;
    flex: none;
    filter: drop-shadow(0 0 10px var(--nb-p-accent-a33));
  }
  #chat-page .chat-brand-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-top: 2px;
  }
  #chat-page .chat-brand-name {
    margin: 0;
    font: 600 18px/1.2 "Outfit", system-ui, sans-serif;
    color: #fff;
  }
  #chat-page .chat-brand-tagline {
    margin: 0;
    font: 400 13px/1.3 "Outfit", system-ui, sans-serif;
    letter-spacing: 0.02em;
    color: var(--nb-p-text-300);
  }
  #chat-page .chat-welcome-subtitle {
    margin: auto 0 0;
    font: 400 16px/1.4 "Outfit", system-ui, sans-serif;
    color: var(--nb-p-text-100);
  }
  #chat-page .chat-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
  }
  #chat-page .chat-shortcut-item {
    display: flex;
    min-width: 0;
  }
  #chat-page .chat-shortcut-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 12px 0 8px;
    border-radius: 16px;
    border: 1px solid #FFFFFF2E;
    background: linear-gradient(160deg, var(--nb-p-card-highlight), var(--nb-p-surface-900) 70%);
    box-shadow: inset 0 1px 0 #FFFFFF26, 0 6px 18px #00000077;
    color: #fff;
    font: 600 16px/1.2 "Outfit", system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #chat-page .chat-shortcut-chip:active {
    background: #FFFFFF24;
    transform: scale(0.97);
  }
  #chat-page .chat-shortcut-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--nb-p-accent-a14);
    border: 1px solid var(--nb-p-accent-a40);
    color: var(--nb-p-accent-soft);
  }
  #chat-page .chat-shortcut-icon svg {
    width: 18px;
    height: 18px;
  }
  #chat-page .chat-shortcut-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Active-state heading: exposed to assistive tech only (visually hidden) */
  #chat-page .chat-active-heading {
    display: none;
  }
  #chat-page .chat-main.active-chat .chat-active-heading,
  #chat-page .chat-main.active-chat .chat-active-heading[hidden] {
    display: block;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Connector stand-in marks (design assets, [[CONFIRM]]); GitHub keeps the existing mark */
  #chat-page .chat-cloud-bar .chat-cloud-icons.is-open .chat-cloud-btn > .chat-cloud-btn-icon,
  #chat-page .chat-cloud-bar .chat-cloud-icons.is-open .chat-cloud-btn > .chat-cloud-btn-icon[hidden] {
    display: block;
    width: 42px;
    height: 42px;
    padding: 9px;
    box-sizing: border-box;
    flex: none;
    border-radius: 14px;
    background: var(--nb-p-tile);
    border: 1px solid #FFFFFF26;
  }
  #chat-page .chat-cloud-bar .chat-cloud-icons.is-open .chat-cloud-btn:has(> .chat-cloud-btn-icon) > svg {
    display: none;
  }

  /* Mode: the custom combobox (r3) replaces the native select visually; the select stays in the
     DOM as the source of truth. The round-2 decorative chevron span stays hidden. */
  #chat-page .chat-main .gen-type-select {
    display: none !important;
  }

  /* Send pill: "Send" + arrow on welcome, 48px arrow circle in conversation */
  #chat-page .chat-main .chat-send-btn:not(.stop-btn) > svg {
    display: none;
  }
  #chat-page .chat-main .chat-send-btn:not(.stop-btn) .chat-send-arrow,
  #chat-page .chat-main .chat-send-btn:not(.stop-btn) .chat-send-arrow[hidden] {
    display: flex;
  }
  #chat-page .chat-main .chat-send-arrow svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  #chat-page .chat-main.welcome-state .chat-send-btn:not(.stop-btn) {
    width: auto !important;
    min-width: 104px;
    padding: 0 20px 0 22px !important;
    gap: 8px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  #chat-page .chat-main.welcome-state .chat-send-btn:not(.stop-btn) .chat-send-label,
  #chat-page .chat-main.welcome-state .chat-send-btn:not(.stop-btn) .chat-send-label[hidden] {
    display: inline;
    font: 700 17px/1 "Outfit", system-ui, sans-serif;
    color: var(--nb-p-bg);
  }

  /* ---- Message actions (r3, design M1) --------------------------------
     One row that never wraps, placed 8px under the bubble (absolutely positioned, so the DOM and
     wider viewports are unchanged; the bubble reserves the space with its bottom margin).
     Agent: Copy, Read aloud (labelled), Regenerate (icon, latest reply only), More (icon; holds
     Delete). User: Copy, Resend, Delete (icons), right-aligned. Order is set in the DOM by JS. */
  #chat-page .chat-message:has(> .atlas-msg-actions),
  #chat-page .chat-message.assistant {
    position: relative;
    overflow: visible !important;
    contain: layout style !important; /* no paint containment: the row and avatar sit outside */
  }
  #chat-page #chat-messages > .chat-message:has(> .atlas-msg-actions) {
    margin-bottom: calc(8px + 44px) !important; /* + the 16px thread gap */
  }
  #chat-page .chat-message > .atlas-msg-actions {
    position: absolute;
    top: calc(100% + 9px); /* 8px below the bubble's 1px border */
    left: -1px;
    right: -1px;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    opacity: 1;
    container-type: inline-size;
  }
  #chat-page .chat-message.user > .atlas-msg-actions {
    justify-content: flex-end !important;
  }
  #chat-page .chat-message.assistant > .atlas-msg-actions {
    left: -37px; /* spans the avatar column too: x = 16 */
    justify-content: flex-start !important;
  }
  #chat-page .chat-message > .atlas-msg-actions .atlas-msg-actions__btn,
  #chat-page .chat-message.assistant .atlas-msg-more {
    position: relative;
    flex: none;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 12px 0 10px !important;
    gap: 6px;
    border-radius: 22px !important;
    background: var(--nb-p-surface-900-a94) !important;
    border: 1px solid #FFFFFF24 !important;
    box-shadow: none !important;
    color: var(--nb-p-accent-soft) !important;
    cursor: pointer;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* icon-only: user row, Regenerate, More */
  #chat-page .chat-message.user > .atlas-msg-actions .atlas-msg-actions__btn,
  #chat-page .chat-message.assistant .atlas-msg-actions__btn--resubmit,
  #chat-page .chat-message.assistant .atlas-msg-more {
    width: 44px !important;
    padding: 0 !important;
  }
  #chat-page .chat-message > .atlas-msg-actions .atlas-msg-actions__btn--delete {
    color: var(--nbx-danger-soft) !important;
  }
  #chat-page .chat-message.assistant > .atlas-msg-actions .atlas-msg-actions__btn--delete,
  #chat-page .chat-message.assistant:has(~ .chat-message.assistant:not(.placeholder)) > .atlas-msg-actions .atlas-msg-actions__btn--resubmit {
    display: none !important;
  }
  #chat-page .chat-message.assistant .atlas-msg-actions__btn--resubmit[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
  }
  #chat-page .chat-message.assistant .atlas-msg-actions__btn--copy .atlas-msg-actions__label,
  #chat-page .chat-message.assistant .atlas-msg-actions__btn--copy .atlas-msg-actions__label[hidden],
  #chat-page .chat-message.assistant .atlas-msg-actions__btn--speak .atlas-msg-actions__label,
  #chat-page .chat-message.assistant .atlas-msg-actions__btn--speak .atlas-msg-actions__label[hidden] {
    display: inline;
    font: 600 14px/1.33 "Outfit", system-ui, sans-serif;
    color: var(--nb-p-text-100);
    white-space: nowrap;
  }
  /* Latest row is 302px wide (Copy 79.9 + Read aloud 116.1 + 2x44 + 3x6); narrower rows
     collapse Read aloud to its icon (right to left), so the row never wraps or scrolls. */
  @container (width < 302px) {
    #chat-page .chat-message.assistant:not(:has(~ .chat-message.assistant:not(.placeholder))) .atlas-msg-actions__btn--speak .atlas-msg-actions__label {
      display: none;
    }
    #chat-page .chat-message.assistant:not(:has(~ .chat-message.assistant:not(.placeholder))) .atlas-msg-actions__btn--speak {
      width: 44px !important;
      padding: 0 !important;
    }
  }
  @container (width < 252px) {
    #chat-page .chat-message.assistant .atlas-msg-actions__btn--speak .atlas-msg-actions__label {
      display: none;
    }
    #chat-page .chat-message.assistant .atlas-msg-actions__btn--speak {
      width: 44px !important;
      padding: 0 !important;
    }
  }
  #chat-page .chat-message.assistant .atlas-msg-more-wrap,
  #chat-page .chat-message.assistant .atlas-msg-more-wrap[hidden] {
    display: block;
    position: relative;
    flex: none;
  }
  #chat-page .chat-message.assistant .atlas-msg-menu {
    position: absolute;
    left: auto;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 30;
    min-width: 200px;
    margin: 0;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 20px;
    border: 1.5px solid var(--nb-p-accent-a85);
    background: var(--nb-p-surface-950);
    box-shadow: 0 20px 50px #000000DE;
  }
  #chat-page .chat-message.assistant .atlas-msg-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--nbx-danger-soft);
    font: 600 15px/1.33 "Outfit", system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  #chat-page .chat-message.assistant .atlas-msg-menu__item:focus-visible {
    outline-offset: -3px;
  }
  /* Tooltip (name) for icon-only buttons on keyboard focus; pointer hover shows the title. */
  #chat-page .chat-message > .atlas-msg-actions .atlas-msg-actions__btn--resubmit:focus-visible::after,
  #chat-page .chat-message.user > .atlas-msg-actions .atlas-msg-actions__btn:focus-visible::after,
  #chat-page .chat-message.assistant .atlas-msg-more:focus-visible::after {
    content: attr(aria-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 31;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--nb-p-surface-800);
    border: 1px solid #FFFFFF26;
    color: #fff;
    font: 500 13px/1.2 "Outfit", system-ui, sans-serif;
    white-space: nowrap;
    pointer-events: none;
  }
  #chat-page .chat-message.user > .atlas-msg-actions .atlas-msg-actions__btn:focus-visible::after {
    left: auto;
    right: 0;
    transform: none;
  }
  #chat-page .chat-message.assistant .atlas-msg-more:focus-visible::after {
    left: 0;
    transform: none;
  }

  /* Voice rows without optional API data degrade to the name only */
  #chat-page .voice-picker-panel .voice-picker-item-sub:empty {
    display: none;
  }

  /* ---- Composer dock (shared) ---------------------------------------- */
  #chat-page .chat-main .chat-input-area {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    transform: none !important;
    border-radius: 30px 30px 0 0;
    background: linear-gradient(180deg, var(--nb-p-dock-top-a95), var(--nb-p-dock-bottom-a97)) !important;
    border-top: 1.5px solid var(--nb-p-accent-a85);
    box-shadow: 0 -10px 40px 0 var(--nb-p-accent-a18), inset 0 1px 0 #FFFFFF26;
    position: relative;
    z-index: 3;
  }
  #chat-page .chat-main .chat-composer {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #chat-page .chat-main .chat-composer-row {
    display: grid !important;
    grid-template-columns: 44px auto minmax(0, 1fr) auto;
    grid-template-areas: "field field field field" "attach mode . send";
    column-gap: 10px !important;
    row-gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
  }
  #chat-page .chat-main .chat-composer-actions {
    display: contents !important;
  }
  #chat-page .chat-main .chat-textarea {
    grid-area: field;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border-radius: 20px !important;
    background: var(--nb-p-input) !important;
    border: 1.5px solid var(--nb-p-accent-a85) !important;
    color: #fff !important;
    caret-color: var(--nb-p-accent);
    font: 400 17px/1.41 "Outfit", system-ui, sans-serif !important;
    scrollbar-width: thin;
    scrollbar-color: var(--nb-p-accent-a85) transparent;
  }
  #chat-page .chat-main .chat-textarea::placeholder {
    color: var(--nb-p-text-300);
    opacity: 1;
  }
  /* compact field: one-line placeholder so the empty field stays single-line */
  #chat-page .chat-main.active-chat .chat-textarea::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #chat-page .chat-main .chat-upload-btn {
    grid-area: attach;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--nb-p-accent-a85) !important;
    background: transparent !important;
    color: var(--nb-p-accent-soft) !important;
    align-self: center !important;
  }
  #chat-page .chat-main .chat-upload-btn svg {
    width: 22px;
    height: 22px;
  }
  #chat-page .chat-main .chat-mode-picker,
  #chat-page .chat-main .chat-mode-picker[hidden] {
    grid-area: mode;
    display: block;
    min-width: 0;
  }
  #chat-page .chat-main .chat-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 44px;
    max-width: 100%;
    margin: 0;
    padding: 0 12px 0 14px;
    border-radius: 14px;
    border: 1.5px solid var(--nb-p-accent-a85);
    background: transparent;
    color: #fff;
    font: 600 15px/1.33 "Outfit", system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #chat-page .chat-main.active-chat .chat-mode-btn {
    max-width: 96px;
    padding: 0 8px 0 12px;
  }
  #chat-page .chat-main.active-chat .chat-mode-full,
  #chat-page .chat-main .chat-mode-btn.is-short .chat-mode-full,
  #chat-page .chat-main:not(.active-chat) .chat-mode-btn:not(.is-short) .chat-mode-short {
    display: none;
  }
  #chat-page .chat-main .chat-mode-btn-chevron {
    flex: none;
    color: var(--nb-p-accent-soft);
  }
  #chat-page .chat-main .chat-mode-btn[aria-expanded="true"] .chat-mode-btn-chevron {
    transform: rotate(180deg);
  }
  #chat-page .chat-main .chat-mode-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
  }
  #chat-page .chat-main .chat-mode-btn:active:not([aria-disabled="true"]) {
    background: #FFFFFF24;
    transform: scale(0.97);
  }
  #chat-page .chat-main .chat-mode-list {
    position: absolute;
    z-index: 40;
    width: min(260px, calc(100vw - 24px));
    box-sizing: border-box;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 24px;
    border: 1.5px solid var(--nb-p-accent-a85);
    background: var(--nb-p-surface-950);
    box-shadow: 0 20px 50px #000000DE, 0 0 40px 0 var(--nb-p-accent-a20);
  }
  #chat-page .chat-main .chat-mode-list:focus-visible {
    outline: none !important;
  }
  #chat-page .chat-main .chat-mode-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    color: #fff;
    font: 600 15px/1.33 "Outfit", system-ui, sans-serif;
    cursor: pointer;
  }
  #chat-page .chat-main .chat-mode-check {
    display: flex;
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--nb-p-accent);
    visibility: hidden;
  }
  #chat-page .chat-main .chat-mode-option[aria-selected="true"] {
    background: var(--nb-p-surface-800);
  }
  #chat-page .chat-main .chat-mode-option[aria-selected="true"] .chat-mode-check {
    visibility: visible;
  }
  #chat-page .chat-main .chat-mode-option.is-active {
    outline: 3px solid var(--nb-p-focus);
    outline-offset: -3px;
  }
  #chat-page .chat-main .chat-mode-option:active {
    background: #FFFFFF24;
    transform: scale(0.97);
  }
  #chat-page .chat-main .chat-send-btn {
    grid-area: send;
    justify-self: end;
    width: 48px !important;
    height: 48px !important;
    flex: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 24px !important;
    color: var(--nb-p-bg) !important;
    background: linear-gradient(135deg, var(--nb-p-accent-soft), var(--nb-p-accent) 55%, var(--nb-p-accent-2)) !important;
    box-shadow: 0 0 24px 0 var(--nb-p-accent-a53), inset 0 1px 0 #FFFFFF99 !important;
    transform: none;
    opacity: 1;
  }
  /* Designer r3 residual 2: the legacy `transition: all .12s` also animated the focus ring
     (offset 0 -> 2px, colour), so it was briefly thin/clipped. The ring now appears at full
     3px / 2px offset immediately; other properties keep their transition. */
  #chat-page .chat-main .chat-send-btn {
    transition: all 0.12s, outline 0s, outline-offset 0s;
  }
  #chat-page .chat-main .chat-send-btn svg {
    width: 20px;
    height: 20px;
  }
  /* Streaming: Stop pill replaces Send (aria-label "Stop generating" set in chat-input.js) */
  #chat-page .chat-main .chat-send-btn.stop-btn {
    width: auto !important;
    padding: 0 18px 0 14px !important;
    gap: 8px;
    background: var(--nb-p-accent-soft) !important;
    color: var(--nb-p-bg) !important;
    box-shadow: 0 0 18px var(--nb-p-accent-a40), inset 0 1px 0 #FFFFFF99 !important;
    font: 700 16px/1 "Outfit", system-ui, sans-serif !important;
    animation: none !important;
  }
  #chat-page .chat-main .chat-send-btn.stop-btn .stop-icon {
    font-size: 18px;
    line-height: 1;
  }
  #chat-page .chat-main .chat-send-btn.stop-btn::after {
    content: "Stop";
  }

  /* Welcome: tall field (design 292px on 844 tall; capped to the viewport) */
  #chat-page .chat-main.welcome-state .chat-textarea {
    min-height: min(292px, 34dvh) !important;
    max-height: 40dvh !important;
  }

  /* ---- Active conversation: compact single-line dock ----------------- */
  #chat-page .chat-main.active-chat .chat-input-area {
    padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    border-radius: 24px 24px 0 0;
  }
  #chat-page .chat-main.active-chat .chat-composer-row {
    grid-template-columns: 44px auto minmax(0, 1fr) auto;
    grid-template-areas: "attach mode field send";
    column-gap: 8px !important;
    align-items: end !important;
  }
  #chat-page .chat-main.active-chat .chat-textarea {
    min-height: 44px !important;
    max-height: 40dvh !important;
    padding: 9px 14px !important;
    border-radius: 22px !important;
    font-size: 17px !important;
    line-height: 1.41 !important;
  }
  #chat-page .chat-main.active-chat .chat-upload-btn,
  #chat-page .chat-main.active-chat .chat-mode-picker {
    margin-bottom: 2px !important;
    align-self: end !important;
  }

  /* Composing (expanded): multi-line draft gets its own full-width row above the tools */
  #chat-page .chat-main.active-chat .chat-input-area.chat-composer-expanded .chat-composer-row {
    grid-template-columns: 44px auto minmax(0, 1fr) auto;
    grid-template-areas: "field field field field" "attach mode . send";
    row-gap: 8px !important;
    align-items: center !important;
  }
  #chat-page .chat-main.active-chat .chat-input-area.chat-composer-expanded .chat-textarea {
    border-radius: 20px !important;
  }
  #chat-page .chat-main.active-chat .chat-input-area.chat-composer-expanded .chat-upload-btn,
  #chat-page .chat-main.active-chat .chat-input-area.chat-composer-expanded .chat-mode-picker {
    margin-bottom: 0 !important;
    align-self: center !important;
  }

  /* Streaming indicator: three 6px accent dots + visible (AT-hidden) status text */
  #chat-page .chat-message.placeholder .typing-indicator {
    align-items: center;
    gap: 4px;
  }
  #chat-page .chat-message.placeholder .typing-indicator > span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nb-p-accent);
  }
  #chat-page .chat-message.placeholder .typing-indicator::after {
    content: "Atlas AI is responding\2026" / "";
    margin-left: 8px;
    font: 400 14px/1.3 "Outfit", system-ui, sans-serif;
    color: var(--nb-p-text-300);
  }
  @media (prefers-reduced-motion: no-preference) {
    /* keyframes start on the visible frame, so a paused/disabled animation still shows the dots */
    #chat-page .chat-message.placeholder .typing-indicator > span {
      animation: nbx-dot 1.2s ease-in-out infinite;
    }
    #chat-page .chat-message.placeholder .typing-indicator > span:nth-child(2) { animation-delay: 0.2s; }
    #chat-page .chat-message.placeholder .typing-indicator > span:nth-child(3) { animation-delay: 0.4s; }
  }
  @keyframes nbx-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  /* ---- Thread ---------------------------------------------------------- */
  #chat-page .chat-main.active-chat .chat-messages {
    padding: 8px 16px 16px !important;
  }
  #chat-page .chat-main:not(.welcome-state) #chat-messages::before {
    height: 0;
  }
  #chat-page .chat-message.user,
  #chat-page .message.user-message {
    background: var(--nb-p-bubble-user);
    border: 1px solid var(--nb-p-accent-a40);
    border-radius: 20px 20px 6px 20px;
    box-shadow: none;
    margin-left: 12%;
    width: auto;
  }
  #chat-page .chat-message.assistant,
  #chat-page .message.assistant-message {
    background: var(--nb-p-surface-900);
    border: 1px solid #FFFFFF24;
    border-radius: 20px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #chat-page .chat-message .message-content,
  #chat-page .message .message-content {
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
  }
  #chat-page .chat-message.user .message-role,
  #chat-page .chat-message.assistant .message-role,
  #chat-page .message.user-message .message-role,
  #chat-page .message.assistant-message .message-role {
    color: var(--nb-p-accent-soft);
  }
  #chat-page .message-role-agent-icon {
    color: var(--nb-p-accent);
    filter: drop-shadow(0 0 5px var(--nb-p-accent-a67));
  }
  #chat-page .chat-message.assistant .message-content a,
  #chat-page .message.assistant-message .message-content a {
    color: var(--nb-p-accent-soft);
  }
  #chat-page .chat-message .message-meta,
  #chat-page .message .message-meta,
  #chat-page .chat-message .message-time,
  #chat-page .message .message-time {
    color: var(--nb-p-text-300);
    opacity: 1;
  }

  /* Scroll to latest */
  #chat-page .chat-scroll-btn {
    width: 44px;
    height: 44px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    background: var(--nb-p-surface-950);
    border: 1.5px solid var(--nb-p-accent-a85);
    color: var(--nb-p-accent);
    box-shadow: 0 0 40px 0 var(--nb-p-accent-a20), 0 8px 24px #00000099;
  }

  /* ---- Voice picker: bottom sheet with a single-select listbox -------- */
  #chat-page .voice-picker-panel.voice-picker-panel-sheet {
    width: auto;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 60px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
    border: 0;
    border-top: 1.5px solid var(--nb-p-accent-a85);
    border-radius: 30px 30px 0 0;
    background: var(--nb-p-surface-950);
    color: #fff;
    /* last shadow = 60% scrim over the page */
    box-shadow: 0 -20px 60px #000000CC, 0 0 40px 0 var(--nb-p-accent-a20), 0 0 0 100vmax #00000099;
  }
  #chat-page .voice-picker-panel-sheet::before {
    content: "";
    display: block;
    width: 44px;
    height: 5px;
    margin: 4px auto 6px;
    border-radius: 3px;
    background: #FFFFFF66;
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-header {
    padding: 6px 12px 10px;
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-title {
    font: 600 18px/1.33 "Outfit", system-ui, sans-serif;
    color: #fff;
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-hint {
    font: 400 13px/1.38 "Outfit", system-ui, sans-serif;
    color: var(--nb-p-text-300);
    margin-top: 2px;
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-list {
    gap: 2px;
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 8px 10px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    color: #fff;
    transform: none;
  }
  /* radio indicator (selection is also stated in text and aria-selected) */
  #chat-page .voice-picker-panel-sheet .voice-picker-item::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--nb-p-text-300);
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-item[aria-selected="true"] {
    background: var(--nb-p-surface-800);
    box-shadow: inset 0 0 0 1.5px var(--nb-p-accent);
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-item[aria-selected="true"]::before {
    border-color: var(--nb-p-accent);
    background: radial-gradient(circle, var(--nb-p-accent) 0 4.5px, transparent 5px);
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-item-previewing {
    background: #FFFFFF14;
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-item:focus-visible {
    outline-offset: -3px;
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-item:active {
    background-color: #FFFFFF24;
  }
  #chat-page .voice-picker-flag,
  #chat-page .voice-picker-flag[hidden] {
    display: block;
    flex: none;
    width: 28px;
    height: 21px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px #FFFFFFBF;
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-item-text {
    flex: 1;
    min-width: 0;
    display: block;
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-item-main {
    font: 600 17px/1.3 "Outfit", system-ui, sans-serif;
    color: #fff;
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-item-sub,
  #chat-page .voice-picker-item-accent,
  #chat-page .voice-picker-item-accent[hidden],
  #chat-page .voice-picker-item-selected,
  #chat-page .voice-picker-item-selected[hidden] {
    display: inline;
    font: 400 14px/1.4 "Outfit", system-ui, sans-serif;
    color: var(--nb-p-text-100);
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-item-sub {
    display: block;
  }
  #chat-page .voice-picker-item-has-accent .voice-picker-item-sub {
    display: none !important;
  }
  #chat-page .voice-picker-panel-sheet .voice-picker-badge {
    background: var(--nb-p-accent-a14);
    border-color: var(--nb-p-accent-a40);
    color: var(--nb-p-accent-soft);
  }
  #chat-page .voice-picker-cc,
  #chat-page .voice-picker-cc[hidden] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 38px;
    height: 26px;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #FFFFFF59;
    font: 700 13px/1 "Outfit", system-ui, sans-serif;
    letter-spacing: 0.78px;
    color: var(--nb-p-text-100);
  }

  /* Hover only where a real pointer can hover */
  @media (hover: hover) {
    #chat-page .chat-capsule-btn:hover,
    #chat-page #chat-voice-capsule-slot .chat-voice-picker-btn:hover,
    #chat-page .chat-cloud-bar .chat-cloud-icons.is-open .chat-cloud-btn:hover,
    #chat-page .voice-picker-panel-sheet .voice-picker-item:hover {
      background-color: #FFFFFF14;
    }
    #chat-page .chat-main .chat-send-btn:hover {
      filter: brightness(1.06);
      opacity: 1;
    }
  }

  /* Theme change cross-fade (280 ms); none when reduced motion is requested */
  @media (prefers-reduced-motion: no-preference) {
    #chat-page,
    #chat-page .chat-control-capsule,
    #chat-page .chat-input-area,
    #chat-page .chat-textarea,
    #chat-page .chat-message,
    #chat-page .message {
      transition: background-color var(--nbx-dur-theme), border-color var(--nbx-dur-theme), box-shadow var(--nbx-dur-theme), color var(--nbx-dur-theme);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #chat-page .chat-capsule-chevron,
    #chat-page .chat-capsule-btn {
      transition: none;
    }
  }

  /* Frosted panel fallbacks: opaque fill + 60% scrim */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #chat-page .chat-cloud-bar .chat-cloud-icons.is-open {
      background: var(--nb-p-surface-950);
      box-shadow: 0 30px 60px #000000DD, 0 0 40px 0 var(--nb-p-accent-a20), 0 0 0 100vmax #00000099;
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    #chat-page .chat-cloud-bar .chat-cloud-icons.is-open {
      background: var(--nb-p-surface-950);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: 0 30px 60px #000000DD, 0 0 40px 0 var(--nb-p-accent-a20), 0 0 0 100vmax #00000099;
    }
  }
  @media (forced-colors: active) {
    #chat-page .chat-cloud-bar .chat-cloud-icons.is-open,
    #chat-page .voice-picker-panel.voice-picker-panel-sheet,
    #chat-page .chat-control-capsule {
      background: Canvas;
      color: CanvasText;
      border-color: CanvasText;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: none;
    }
    #chat-page .chat-cloud-btn-label,
    #chat-page .chat-cloud-bar .chat-cloud-icons.is-open::before {
      text-shadow: none;
    }
  }

  /* ---- Round 3: composer stacking + long-draft scroll indicator -------- */
  #chat-page .chat-main.active-chat .chat-input-area.chat-composer-stacked .chat-composer-row {
    grid-template-columns: 44px auto minmax(0, 1fr) auto;
    grid-template-areas: "field field field field" "attach mode . send";
    row-gap: 8px !important;
    align-items: center !important;
  }
  #chat-page .chat-main.active-chat .chat-input-area.chat-composer-stacked .chat-upload-btn,
  #chat-page .chat-main.active-chat .chat-input-area.chat-composer-stacked .chat-mode-picker {
    margin-bottom: 0 !important;
    align-self: center !important;
  }
  #chat-page .chat-main .chat-textarea {
    scrollbar-width: none;
  }
  #chat-page .chat-main .chat-textarea::-webkit-scrollbar {
    display: none;
  }
  #chat-page .chat-main .chat-input-scroll.has-overflow {
    grid-area: field;
    display: block;
    position: relative;
    align-self: stretch;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
  }
  #chat-page .chat-main .chat-input-scroll.has-overflow::before {
    content: "";
    position: absolute;
    right: 4px;
    top: var(--nbx-thumb-top, 4px);
    width: 4px;
    height: var(--nbx-thumb-h, 24px);
    border-radius: 2px;
    background: var(--nb-p-accent-a70);
  }
  #chat-page .chat-main .chat-input-scroll.is-scrolled::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    height: 16px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(var(--nb-p-input), transparent);
  }

  /* ---- Round 3: streaming caret, reply status, stopped caption --------- */
  #chat-page .chat-stream-text {
    margin: 0 0 8px;
    white-space: pre-wrap;
  }
  #chat-page .chat-stream-caret {
    display: inline-block;
    width: 2px;
    height: 1.15em;
    margin-left: 2px;
    vertical-align: -0.2em;
    border-radius: 1px;
    background: var(--nb-p-accent);
  }
  @media (prefers-reduced-motion: no-preference) {
    #chat-page .chat-stream-caret {
      animation: nbx-caret 1000ms steps(1, end) infinite;
    }
  }
  @keyframes nbx-caret {
    0%, 55% { opacity: 1; }
    55.01%, 100% { opacity: 0; }
  }
  /* Status live region: standard sr-only (visually hidden, still announced). chat-window.js removes
     the `hidden` attribute at <=768px; nothing overrides [hidden] in CSS. */
  #chat-page .chat-response-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  #chat-page .chat-stopped-caption {
    margin: 6px 0 0;
    font: 400 13px/1.3 "Outfit", system-ui, sans-serif;
    color: var(--nb-p-text-300);
  }

  /* ---- Round 3: thread geometry, speaker headings, avatar (S6/S7) ------ */
  #chat-page .chat-main.active-chat .chat-messages {
    padding: 12px 16px 16px !important;
  }
  #chat-page .chat-turn-heading,
  #chat-page .chat-turn-heading[hidden] {
    display: block;
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #chat-page .chat-message.user > .message-role,
  #chat-page .chat-message.assistant > .message-role {
    display: none !important;
  }
  #chat-page .chat-message.user {
    max-width: 82% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 10px 14px !important;
    border-radius: 20px 20px 6px 20px !important;
  }
  #chat-page .chat-message.assistant {
    position: relative;
    width: auto !important;
    max-width: none !important;
    margin-left: 36px !important;
    margin-right: 0 !important;
    overflow: visible !important;
    padding: 12px 14px !important;
    border-radius: 6px 20px 20px 20px !important;
  }
  #chat-page .chat-message.assistant::before {
    content: "";
    position: absolute;
    left: -37px;
    top: 4px;
    width: 28px;
    height: 28px;
    background: url("/assets/brand/logo-stand-in.svg") center / contain no-repeat;
  }
  #chat-page .chat-main.active-chat #chat-messages {
    gap: 16px !important;
  }
  #chat-page .chat-message.user,
  #chat-page .chat-message.assistant,
  #chat-page .chat-message.system {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #chat-page .chat-main.active-chat:not(.welcome-state) .chat-message.system .message-content {
    max-height: min(28dvh, 200px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #chat-page .chat-message .message-time {
    display: block;
    margin-top: 4px;
  }
  #chat-page .chat-message .message-content > :first-child {
    margin-top: 0;
  }
  #chat-page .chat-message .message-content > :last-child {
    margin-bottom: 0;
  }

  /* ---- Round 3: session menu and Scroll to latest leave the tab order when hidden ---- */
  #chat-page .session-actions-menu {
    left: 0;
    right: auto;
    max-width: calc(100vw - 24px);
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    border: 1.5px solid var(--nb-p-accent-a85);
    background: var(--nb-p-surface-950);
  }
  #chat-page .session-actions.open .session-actions-menu {
    visibility: visible;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
  }
  #chat-page .session-actions-item {
    min-height: 44px;
  }
  @media (hover: hover) {
    #chat-page .session-actions-item:hover,
    #chat-page .session-actions-toggle:hover {
      background: #FFFFFF14;
      border-color: var(--nb-p-accent-a85);
    }
  }
  #chat-page .chat-scroll-btn:not(.visible) {
    visibility: hidden;
    transition: opacity 150ms, transform 150ms, visibility 0s linear 150ms;
  }
  #chat-page .chat-scroll-btn.visible {
    visibility: visible;
    transition: opacity 150ms, transform 150ms, visibility 0s;
  }

  @media (prefers-reduced-motion: no-preference) {
    #chat-page .chat-main .chat-mode-btn-chevron {
      transition: transform 200ms cubic-bezier(.2, 0, 0, 1);
    }
  }
  @media (forced-colors: active) {
    #chat-page .chat-stream-caret {
      background: CanvasText;
    }
    #chat-page .chat-main .chat-mode-list,
    #chat-page .chat-message.assistant .atlas-msg-menu {
      background: Canvas;
      color: CanvasText;
      border-color: CanvasText;
    }
    #chat-page .chat-main .chat-mode-check {
      color: CanvasText;
    }
  }
}

/* ── Section ≤480 (small phones) ───────────────────────────────────── */
@media (max-width: 480px) {
  #chat-page .chat-welcome-greeting-title {
    font-size: clamp(26px, 8.2vw, 32px);
  }
  #chat-page .chat-main .chat-input-area {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ≤380 (375/360 phones): when the conversation's session-actions button sits next to the
     capsule, the Connectors text label is visually hidden; its name stays for assistive tech. */
  @media (max-width: 380px) {
    #chat-page .chat-main.active-chat .chat-connectors-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    #chat-page .chat-main.active-chat .chat-connectors-btn {
      padding: 0 10px 0 12px;
      gap: 4px;
    }
  }
}

/* Wide screens: keep the five-color theme control visible. The rest of the mobile capsule stays phone-only. */
@media (min-width: 769px) {
  #chat-page .chat-control-capsule,
  #chat-page .chat-control-capsule[hidden] {
    display: flex;
    align-items: center;
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 40;
    height: 44px;
    padding: 3px;
    border-radius: 22px;
    background: var(--nb-p-surface-900-a94, rgba(18, 10, 28, 0.94));
    border: 1.5px solid var(--nb-p-accent-a85, rgba(0, 234, 255, 0.45));
  }
  #chat-page .chat-connectors-btn,
  #chat-page .chat-voice-capsule-slot,
  #chat-page .chat-capsule-divider {
    display: none;
  }
}

/* Phone and tablet: every chat mode fits the visible screen. */
@media (max-width: 1024px) {
  .shell-content.chat-shell-content {
    min-height: 0;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
  }

  html:has(#chat-page) {
    overflow: hidden;
    height: 100%;
  }

  html:has(#chat-page) body {
    overflow: hidden;
    overscroll-behavior: none;
    width: 100%;
    min-height: 100%;
  }

  #chat-page {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  #chat-page .chat-main {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: 100%;
    max-height: 100dvh;
    box-sizing: border-box;
  }

  #chat-page .chat-main.active-chat:not(.welcome-state) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #chat-page .chat-main.welcome-state .chat-welcome-greeting {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 0 auto;
    min-height: min(440px, 56dvh);
    max-height: none;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    padding: 28px 0 88px;
    margin-left: max(12px, env(safe-area-inset-left, 0px));
    margin-right: max(12px, env(safe-area-inset-right, 0px));
  }

  #chat-page .chat-welcome-greeting-title {
    font-size: clamp(20px, 4.6dvh, 32px);
    line-height: 1.2;
  }

  #chat-page .chat-brand-lockup {
    margin-bottom: 16px;
  }

  #chat-page .chat-welcome-subtitle {
    margin-top: auto;
  }

  #chat-page .chat-shortcuts {
    margin-top: 12px;
    gap: 10px 10px;
  }

  #chat-page .chat-shortcut-chip {
    min-height: clamp(36px, 5.6dvh, 48px);
    font-size: clamp(13px, 3.5vw, 16px);
  }

  #chat-page .chat-main.welcome-state .chat-input-area {
    flex: 0 1 auto !important;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    max-height: min(46dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 168px));
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
  }

  /* Active chat: pin composer above keyboard; do not flex-shrink or translate (was clipping send). */
  #chat-page .chat-main.active-chat:not(.welcome-state) .chat-input-area {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--atlas-keyboard-offset, 0px));
    z-index: 50;
    flex: none !important;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(calc(-1 * var(--atlas-dock-lift, 0px))) translateZ(0);
    -webkit-transform: translateY(calc(-1 * var(--atlas-dock-lift, 0px))) translateZ(0);
  }

  html.atlas-keyboard-open body:has(#chat-page) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* Image and video settings sit inside the composer. They must not shrink the welcome stack. */
  #chat-page .chat-main.welcome-state .chat-input-area {
    flex: 1 1 auto !important;
    max-height: none;
    min-height: 0;
  }

  #chat-page .chat-main.welcome-state .media-settings-inline,
  #chat-page .chat-main.welcome-state .credit-estimator {
    flex: none;
    width: 100%;
  }

  #chat-page .chat-main.welcome-state .chat-textarea {
    min-height: clamp(64px, 14dvh, 140px) !important;
    max-height: 22dvh !important;
  }

  #chat-page .chat-form,
  #chat-page .chat-composer,
  #chat-page .composer-settings,
  #chat-page .chat-composer-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #chat-page .composer-setting-select {
    max-width: 100%;
  }

  #chat-page .chat-main.active-chat .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(
      var(--atlas-composer-inset, 112px) + env(safe-area-inset-bottom, 0px) + var(--atlas-keyboard-offset, 0px) + 20px
    ) !important;
    scroll-padding-bottom: calc(
      var(--atlas-composer-inset, 112px) + env(safe-area-inset-bottom, 0px) + 20px
    );
  }

  html.atlas-keyboard-open #chat-page .chat-main.active-chat:not(.welcome-state) .chat-scroll-btn {
    bottom: calc(var(--atlas-composer-inset, 112px) + var(--atlas-keyboard-offset, 0px) + 12px);
  }
}

.voice-picker-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.voice-picker-close {
  margin-left: auto;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-radius: 10px;
  padding: 6px 14px;
  font: 600 13px/1.2 "Outfit", system-ui, sans-serif;
  cursor: pointer;
}
.voice-picker-close:active {
  background: rgba(0, 229, 255, 0.15);
}
.voice-picker-clone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 12px 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.voice-picker-clone input,
.voice-picker-clone select {
  width: 100%;
  box-sizing: border-box;
  font: 14px/1.3 inherit;
  color: #fff;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 8px;
}

.composer-project-notice {
  max-width: 720px;
  margin: 0 auto 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font: 400 13px/1.45 "Outfit", Inter, system-ui, sans-serif;
  color: rgba(232, 236, 244, 0.92);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.22);
}