/* Cloves: precise navigation lettering and a flexible layout at every viewport. */
@font-face {
  font-family: 'Cloves Navigation';
  src: url('/static/assets/fonts/oxanium/oxanium.woff') format('woff');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; }
img, video, audio, canvas { max-width: 100%; }
button, input, textarea, select { max-width: 100%; }
button, input, textarea, select, .panel, .integration-card, .focus-panel, .record-top > *, .panel-heading > *, .inline-field > *, .quick-actions button > span, .account-menu-item > span { min-width: 0; }
.page-heading, .panel-heading, .integration-title, .record-top, .voice-test-result { flex-wrap: wrap; }
h1, h2, h3, .page-description, .form-help, .notice, .integration-card, .record-content, .record-title, .focus-name, .quick-actions, .account-menu-item, .configuration-note, .toast, .message-body, .citations, .login-help { overflow-wrap: anywhere; }
.button { white-space: normal; text-align: center; }
.inline-field > input { flex: 1 1 12rem; }
.inline-field > .button { flex: 0 1 auto; }
.inline-options > label { flex-wrap: wrap; }
.inline-options input[type=date] { max-width: 100%; }
.record-top > .badge { max-width: 100%; white-space: normal; }
.account-menu-item { min-height: 44px; }
.account-menu-heading #user-name { white-space: normal; overflow-wrap: anywhere; }
.account-menu { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)); overscroll-behavior: contain; }
.dialog-form { min-width: 0; }
dialog:not(.presence-dialog) { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.login-screen, .app-shell { min-height: 100vh; min-height: 100dvh; }
.login-story { min-height: 100vh; min-height: 100dvh; }
.login-form-wrap { padding-bottom: max(40px, var(--safe-bottom)); }
.sidebar {
  height: 100vh; height: 100dvh;
  padding-top: max(30px, var(--safe-top));
  padding-bottom: max(20px, var(--safe-bottom));
  overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin;
}
.sidebar .brand, .sidebar nav, .sidebar-bottom { flex-shrink: 0; }
.sidebar .brand { margin-bottom: clamp(34px, 6vh, 65px); }
.sidebar .nav-link { min-height: 46px; margin: 8px 0; padding: 9px 4px; white-space: normal; }
.sidebar .nav-link .nav-label,
.sidebar .nav-link:hover .nav-label,
.sidebar .nav-link:focus-visible .nav-label,
.sidebar .nav-link[aria-current=page] .nav-label {
  font-family: 'Cloves Navigation', 'Segoe UI', sans-serif;
  font-size: 15px; font-weight: 500; font-style: normal; line-height: 1.7; letter-spacing: .035em;
  color: #fff; transform: none; text-shadow: none; filter: none; transition: none;
}
.sidebar .nav-count { flex-shrink: 0; margin-left: 8px; }
.sidebar .nav-divider { height: 6px; margin: 8px 0; }
.sidebar-bottom { padding-top: 18px; }
.topbar { padding-left: max(17px, var(--safe-left)); padding-right: max(17px, var(--safe-right)); }
main { width: 100%; }
body[data-view=chat] main { padding-left: max(24px, var(--safe-left)); padding-right: max(24px, var(--safe-right)); }
.cosmic-stage.voice-default.chat-layout { min-height: 100vh; min-height: 100dvh; }
.cosmic-stage.voice-default .chat-presence { min-height: 100vh; min-height: 100dvh; }
.cosmic-stage.voice-default .chat-panel { min-width: 0; max-height: 78vh; max-height: 78dvh; }
.cosmic-stage.voice-default .messages { min-width: 0; }
.messages .message, .messages .message-body { min-width: 0; }
.messages .message.user { margin-left: 0; }
.chat-composer { min-width: 0; }
.composer-bottom { flex-wrap: wrap; }
.composer-bottom > div { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.chat-composer textarea { max-height: 36vh; max-height: 36dvh; }
.toast-region { max-width: calc(100vw - 32px - var(--safe-left) - var(--safe-right)); bottom: max(16px, var(--safe-bottom)); }

@media (min-width: 901px) {
  .app-shell { grid-template-columns: clamp(220px, 16vw, 280px) minmax(0,1fr); }
  .cosmic-stage.voice-default.chat-layout { grid-template-columns: minmax(0,1fr) minmax(220px, min(28%, 440px)); gap: clamp(12px, 2vw, 40px); }
}
@media (min-width: 2400px) {
  .app-shell { grid-template-columns: 300px minmax(0,1fr); }
  .sidebar { padding-left: 40px; padding-right: 28px; }
  .sidebar .nav-link .nav-label, .sidebar .nav-link:hover .nav-label, .sidebar .nav-link:focus-visible .nav-label, .sidebar .nav-link[aria-current=page] .nav-label { font-size: 16px; }
  body[data-view=chat] main { padding-right: max(5vw, var(--safe-right)); }
  .cosmic-stage.voice-default.chat-layout { grid-template-columns: minmax(0,1fr) minmax(300px, min(25%, 520px)); }
  .cosmic-stage.voice-default .chat-presence .orb-stage { width: min(100%, 94vh); width: min(100%, 94dvh); }
  .messages .message { font-size: 14px; }
  .messages .message.user { font-size: 13px; }
}
@media (max-width: 1180px) {
  .section-grid { grid-template-columns: minmax(0,1fr); }
  .section-grid > .panel { width: 100%; }
  .overview-top { grid-template-columns: minmax(0,1.4fr) minmax(230px,1fr); }
  .overview-bottom { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px) {
  .sidebar { width: min(280px, calc(100vw - 44px)); padding-left: max(24px, var(--safe-left)); }
  .sidebar .brand { margin-left: 2px; }
  .topbar { height: calc(58px + var(--safe-top)); padding-top: var(--safe-top); }
  main { padding: 24px max(20px, var(--safe-right)) max(24px, var(--safe-bottom)) max(20px, var(--safe-left)); }
  body[data-view=chat] main { padding-left: max(12px, var(--safe-left)); padding-right: max(12px, var(--safe-right)); }
  .cosmic-stage.voice-default.chat-layout { grid-template-columns: minmax(0,1fr); min-height: calc(100vh - 58px - var(--safe-top)); min-height: calc(100dvh - 58px - var(--safe-top)); }
  .cosmic-stage.voice-default .chat-presence { min-height: 0; }
  .cosmic-stage.voice-default .chat-presence .orb-stage { width: min(100%, 64vh); width: min(100%, 64dvh); }
  .cosmic-stage.voice-default .chat-panel { max-height: 32vh; max-height: 32dvh; padding: 0 12px max(18px, var(--safe-bottom)); }
  .cosmic-stage.voice-default .chat-panel:has(.chat-composer:not([hidden])) { max-height: none; }
  .cosmic-stage.voice-default .chat-panel:has(.chat-composer:not([hidden])) .messages { max-height: 32vh; max-height: 32dvh; }
  .chat-composer { margin-right: 0; margin-left: 0; }
  .chat-composer textarea { font-size: 16px; }
  .composer-bottom > span { display: none; }
  .integration-grid { gap: 16px; }
  .integration-card, .panel { padding: clamp(18px, 3vw, 24px); }
  .voice-test-grid { gap: 22px; }
}
@media (max-width: 700px) {
  .overview-top { grid-template-columns: minmax(0,1fr); }
  .focus-panel { margin-top: 16px; }
  .integration-grid, .voice-test-grid { grid-template-columns: minmax(0,1fr); }
  .voice-settings-form .inline-field { flex-wrap: wrap; }
  .voice-settings-form .inline-field input { flex-basis: 100%; }
  .voice-test-result { align-items: flex-start; }
  .page-heading { align-items: flex-start; }
  .today { white-space: normal; }
  .panel-heading select { max-width: 100%; }
}
@media (max-width: 650px) {
  .login-story { min-height: 0; padding-left: max(24px, var(--safe-left)); padding-right: max(24px, var(--safe-right)); }
  .login-form-wrap { padding-left: max(24px, var(--safe-left)); padding-right: max(24px, var(--safe-right)); }
  input:not([type=checkbox]), select, textarea, .stacked-form input, .stacked-form textarea, .inline-create > input, .voice-checks input, .voice-checks textarea { font-size: 16px; }
  .inline-options input[type=date] { width: 160px; }
  .record-actions .text-button { min-height: 44px; }
  .panel-heading > .text-button { white-space: normal; }
  .overview-foot { flex-wrap: wrap; }
  .inline-field select { font-size: 16px; }
  .account-menu-item { font-size: 13px; }
}
@media (max-width: 380px) {
  main { padding-left: max(14px, var(--safe-left)); padding-right: max(14px, var(--safe-right)); }
  .panel, .integration-card, .welcome-panel, .dialog-form { padding: 16px; }
  .login-story, .login-form-wrap { padding-left: max(20px, var(--safe-left)); padding-right: max(20px, var(--safe-right)); }
  .login-statement h1 { font-size: 32px; }
  .login-form h2 { font-size: 25px; }
  .spotify-device .inline-field { flex-wrap: wrap; }
  .spotify-device .inline-field select { flex-basis: 100%; }
  .playback-buttons { gap: 7px; }
  .playback-buttons .button { padding: 9px 11px; }
}
@media (max-height: 700px) {
  .sidebar { padding-top: max(18px, var(--safe-top)); padding-bottom: max(12px, var(--safe-bottom)); }
  .sidebar .brand { margin-bottom: 24px; }
  .sidebar .nav-link { min-height: 44px; margin: 3px 0; padding-top: 7px; padding-bottom: 7px; }
  .sidebar-bottom { padding-top: 12px; }
}
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  .cosmic-stage.voice-default.chat-layout { grid-template-columns: minmax(0,1fr) minmax(220px, 40%); gap: 12px; align-items: center; }
  .cosmic-stage.voice-default .chat-presence { grid-column: 1; grid-row: 1; }
  .cosmic-stage.voice-default .chat-presence .orb-stage { width: min(100%, 82vh); width: min(100%, 82dvh); }
  .cosmic-stage.voice-default .chat-panel { grid-column: 2; grid-row: 1; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); padding: 0 6px; }
}
@media (pointer: coarse) {
  .button, .icon-button, .text-button, .account-menu-item, summary { min-height: 44px; }
  .icon-button { min-width: 44px; }
  .text-button { padding-top: 10px; padding-bottom: 10px; }
}
@media (forced-colors: active) {
  .sidebar .nav-link .nav-label, .sidebar .nav-link:hover .nav-label, .sidebar .nav-link:focus-visible .nav-label, .sidebar .nav-link[aria-current=page] .nav-label { color: LinkText; }
}