/* Suvrutta v13: shared finishing layer. Load after accessibility.css. */
:root {
  --experience-control-radius: 10px;
  --experience-dialog-radius: 20px;
  --experience-control-line: #758591;
  --experience-error: #ffc5b5;
}

/* Retain the editorial headings; make utility text easier to read. */
:is(.dialog-inner, .identity-inner) {
  padding: clamp(24px, 4vw, 40px);
}
:is(.dialog-inner, .identity-inner) h2 {
  padding-inline-end: 28px;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: balance;
}
:is(.dialog-inner, .identity-inner) > p {
  max-width: 65ch;
  line-height: 1.7;
}
:is(#account-status, #mfa-status, #vault-status, #profile-status,
    #profile-handoff-status, #contact-error, #chat-link-error) {
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
:is(#account-status, #mfa-status, #vault-status) {
  min-height: 1.65em;
  margin-block: 16px;
}
:is(.reading-body, .chat-bubble, .review-story-title, .person-row) {
  overflow-wrap: anywhere;
}
:is(.message-time, #word-count, #mfa-code) {
  font-variant-numeric: tabular-nums;
}

/* One navy surface language for account, vault, and everyday dialogs. */
dialog,
:is(#account-dialog, #mfa-dialog, #vault-dialog) {
  --paper: #101c28;
  --ink: #f1eee5;
  --muted: #b8c4ce;
  --accent: #e5cfa2;
  --line: #758591;
  --ground: #07111b;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #647383;
  border-radius: var(--experience-dialog-radius);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  box-shadow: 0 24px 80px #02081099;
}
dialog::backdrop {
  background: #030a13b8;
  backdrop-filter: blur(5px);
}
:is(#account-dialog, #mfa-dialog, #vault-dialog) p {
  color: var(--muted);
}
dialog :is(input, textarea, select):not([type=checkbox]):not([type=radio]) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  background: var(--ground) !important;
  border: 1px solid var(--experience-control-line) !important;
  border-radius: var(--experience-control-radius);
  color: var(--ink) !important;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px !important; /* Override older per-dialog field shorthands. */
  line-height: 1.5;
}
dialog :is(input, textarea)::placeholder {
  color: var(--muted);
  opacity: 1;
}
dialog select {
  width: 100%;
  min-height: 48px;
}
dialog input[readonly] {
  cursor: text;
}
#mfa-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .035em;
}
#mfa-enrollment {
  margin-block: 20px;
  padding-block: 16px;
  border-block: 1px solid #647383;
}
#mfa-form > .primary {
  margin-top: 20px;
}
dialog label {
  line-height: 1.6;
}
/* Existing consent input rules otherwise give checkboxes text-field spacing. */
dialog .consent input[type=checkbox] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--accent);
}

/* Predictable hit areas and feedback, without adding motion to layout. */
:is(.primary, .quiet, .google-button, .new-thread, .mode-pill) {
  min-height: 44px;
  border-radius: var(--experience-control-radius);
  line-height: 1.4;
}
:is(dialog .text-button, .person-row button, .profile-actions a,
    .details-actions button, .chat-actions button, .chat-starters button) {
  min-height: 44px;
}
.chat-pane-head .icon-button,
.chat-composer .icon-button {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}
.chat-send {
  width: 44px !important;
  height: 44px;
  flex-basis: 44px;
}
dialog .close {
  width: 44px;
  height: 44px;
  top: 8px;
  right: 8px;
  border-radius: var(--experience-control-radius);
  line-height: 1;
}
:is(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
:is(button, a, input, textarea, select, summary) {
  scroll-margin-block: 24px;
}
body[data-view=chat] .chat-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
button {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
button:disabled {
  cursor: not-allowed;
}
@media (hover: hover) {
  :is(dialog .close, .text-button, .message-edit):hover:not(:disabled) {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
:is(.primary, .quiet, .google-button):active:not(:disabled) {
  box-shadow: inset 0 0 0 2px currentColor;
}

/* Respect browser and native safe areas without concealing any controls. */
.composer-zone {
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}
.toast {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.storage-status {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
html[data-platform] body[data-view=chat] :is(.layout, #main) {
  height: calc(100dvh - env(safe-area-inset-top, 0px));
}
@media (max-width: 820px) {
  body[data-view=chat] .chat-pane-head {
    padding-inline-start: max(12px, env(safe-area-inset-left, 0px));
    padding-inline-end: max(12px, env(safe-area-inset-right, 0px));
  }
  .composer-zone {
    padding-inline-start: max(12px, env(safe-area-inset-left, 0px));
    padding-inline-end: max(12px, env(safe-area-inset-right, 0px));
  }
  .chat-composer textarea,
  .thread-search input {
    font-size: 16px;
  }
  .chat-actions {
    flex-wrap: wrap;
  }
  body[data-view=chat] .chat-actions button {
    min-height: 44px;
    padding-inline: 4px;
  }
}
@media (max-width: 480px) {
  dialog,
  :is(#account-dialog, #mfa-dialog, #vault-dialog) {
    width: calc(100% - 24px);
  }
  :is(.dialog-inner, .identity-inner) {
    padding: 28px 20px;
  }
  dialog :is(.primary, .quiet, .google-button) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .details-actions {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .chat-title-wrap {
    min-width: 0;
  }
  .chat-title-wrap h2 {
    overflow-wrap: anywhere;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  dialog, .chat-composer, .primary, .quiet {
    border: 1px solid ButtonText;
  }
  :is(button, a, input, textarea, select, summary):focus-visible {
    outline-color: Highlight;
  }
}

/* A quiet, readable path through security setup. */
.setup-overview{margin-block:1.5rem;padding-block:1.25rem;border-block:1px solid #36424b;}
.setup-overview h3{margin:0 0 1rem;color:var(--text,#f0e8d7);font-size:1.2rem;}
.setup-overview ol{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:1.1rem;}
.setup-overview li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.75rem;align-items:start;}
.setup-marker{display:grid;place-items:center;width:1.75rem;height:1.75rem;border:1px solid #879395;border-radius:50%;font-size:.8rem;color:#e9d5a2;}
.setup-overview .complete .setup-marker{border-color:#e9d5a2;background:#e9d5a2;color:#111b25;}
.setup-overview strong{color:#f0e8d7;font-size:.95rem;}
.setup-overview li p{margin:.35rem 0 0!important;font-size:.85rem!important;line-height:1.55;color:#bbc4c8;}
.setup-overview .eyebrow{font-size:.65rem;letter-spacing:.12em;}