/* The quieter companion pages. Existing scripts own visibility and interaction. */
:is(#screen-settings, #screen-journal, #screen-chat, #screen-auth, #screen-tips) {
  --ip-action: var(--interface-action);
  --ip-on-action: var(--interface-on-action);
  --ip-selection: var(--interface-selected);
  color: var(--p-ink);
  background: var(--p-bg);
  font-family: var(--p-font);
}
:is(#screen-settings, #screen-journal, #screen-chat, #screen-auth, #screen-tips)
  :is(button, input, textarea, select) { font-family: inherit; }
:is(#screen-settings, #screen-chat, #screen-tips) .back-btn,
#screen-journal .journal-header .journal-button {
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: var(--p-muted);
  font: 500 14px/1.5 var(--p-font);
}
:is(#screen-settings, #screen-journal, #screen-chat, #screen-auth, #screen-tips)
  :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 4px;
}
:is(#screen-settings, #screen-auth) :is(.primary-btn, .secondary-btn) {
  min-height: 50px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--ip-action);
  box-shadow: none;
  color: var(--ip-on-action);
  font: 600 15px/1.6 var(--p-font);
  letter-spacing: 0;
}
:is(#screen-settings, #screen-auth) .secondary-btn {
  background: var(--p-paper);
  color: var(--p-ink);
  border-color: var(--p-line);
}

/* Settings are grouped by purpose, with consistent rows inside each group. */
#screen-settings > .setup-content,
#screen-settings[data-visual-settings] > .setup-content {
  width: 100%;
  max-width: 720px;
  padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(112px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
#screen-settings .setup-title {
  margin: 26px 0 12px;
  font-size: clamp(27px, 5.5vw, 34px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.035em;
}
#screen-settings .setup-title > .ui-icon { width: 22px; height: 22px; color: var(--p-muted); }
#screen-settings .sp-intro { margin: 0 0 24px; }
#screen-settings .sp-intro-title {
  margin: 0 0 8px;
  color: var(--p-ink);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.65;
}
#screen-settings .sp-intro > p:not(.sp-intro-title) { font-size: 13px; line-height: 1.8; }
#screen-settings #voice-guide-open {
  margin: 0;
  min-height: 48px;
  text-align: left;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
}
#screen-settings .sp-group {
  margin-top: 28px;
  border: 1px solid var(--p-line);
  border-radius: 18px;
  background: var(--p-paper);
}
#screen-settings .sp-group > h3 {
  margin: 0;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--p-line);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.02em;
}
#screen-settings[data-visual-settings] .settings-section {
  margin: 20px 0 0;
  padding: 24px;
  border: 1px solid var(--p-line);
  border-radius: 18px;
  background: var(--p-paper);
  box-shadow: none;
}
#screen-settings[data-visual-settings] .sp-group > .settings-section {
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#screen-settings[data-visual-settings] .sp-group > .settings-section + .settings-section { border-top: 1px solid var(--p-line); }
#screen-settings[data-visual-settings] .settings-label {
  margin-bottom: 14px;
  gap: 6px 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}
#screen-settings .settings-value {
  padding: 0;
  background: transparent;
  color: var(--p-muted);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#screen-settings[data-visual-settings] :is(.fx-btn, .style-btn) {
  padding: 14px 12px;
  min-height: 52px;
  border: 1px solid var(--p-line);
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
  text-align: left;
  transition: background-color 140ms ease, border-color 140ms ease;
}
#screen-settings[data-visual-settings] :is(.fx-btn, .style-btn).active {
  padding: 14px 12px;
  border: 1px solid color-mix(in srgb, var(--p-accent) 55%, var(--p-line));
  background: var(--ip-selection);
  box-shadow: none;
}
#screen-settings[data-visual-settings] :is(.fx-name, .style-name) { font-size: 14px; font-weight: 600; line-height: 1.5; }
#screen-settings[data-visual-settings] :is(.fx-desc, .style-desc) { margin-top: 5px; font-size: 12px; line-height: 1.6; }
#screen-settings[data-visual-settings] .settings-hint { margin-top: 12px; font-size: 12px; line-height: 1.8; }
#screen-settings[data-visual-settings] .settings-text {
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--p-line);
  border-radius: 12px;
  background: var(--p-bg);
  color: var(--p-ink);
  font-size: 16px;
  line-height: 1.5;
  box-shadow: none;
}
#screen-settings .settings-range { height: 44px; background: transparent; }
/* iOS' native menulist ignores the shared input padding/min-height. Keep the
   native picker and keyboard semantics, but size its visible control ourselves. */
#screen-settings[data-visual-settings] select.settings-text {
  appearance: none;
  -webkit-appearance: none;
  min-height: 50px;
  padding-inline-end: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--p-muted) 50%), linear-gradient(135deg, var(--p-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
#screen-settings .settings-range::-webkit-slider-runnable-track { height: 4px; background: var(--p-line); }
#screen-settings .settings-range::-moz-range-track { height: 4px; background: var(--p-line); }
#screen-settings .settings-range::-webkit-slider-thumb {
  width: 24px; height: 24px; margin-top: -10px;
  background: var(--p-accent); border: 3px solid var(--p-paper); box-shadow: 0 1px 4px #0002;
}
#screen-settings .settings-range::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--p-accent); border: 3px solid var(--p-paper); box-shadow: 0 1px 4px #0002;
}
#screen-settings .settings-preview { padding: 16px; border: 0; border-radius: 12px; background: var(--p-bg); line-height: 1.8; }
#screen-settings .settings-preview strong { color: var(--p-ink); font-weight: 600; }
#screen-settings .sp-theme-swatch { height: 146px; background: #f3f5f4; border-color: #1c292414; border-radius: 9px; }
#screen-settings .sp-theme-classic { background: #191f1d; color: #f4f7f5; border-color: #ffffff20; }
#screen-settings .sp-theme-photo { background: #e8ece9; }
#screen-settings .sp-theme-classic .sp-theme-photo { background: #29312d; }
#screen-settings .sp-theme-top { font-weight: 600; letter-spacing: -.03em; }
#screen-settings .sp-theme-cta { background: #234b38; }
#screen-settings .sp-theme-classic .sp-theme-cta { background: #b4dfc8; }
#screen-settings .sp-selected { margin-top: 10px; font-size: 11px; }
#screen-settings .active > .sp-selected { font-weight: 600; }
#screen-settings .sp-style-portrait { background: var(--p-bg); }
#screen-settings .sp-coach-example { margin-top: 20px; border-color: var(--p-line); }
#screen-settings .sp-kicker { color: var(--p-muted); font-size: 12px; font-weight: 500; }
#screen-settings .sp-coach-example p { font-size: 14px; font-weight: 400; }
#screen-settings .sp-coach-example small { font-size: 12px; }
#screen-settings .sp-demo { margin-top: 22px; padding-top: 20px; }
#screen-settings :is(.sp-demo-copy, .sp-demo-note, .sp-demo-summary, .sp-fx-off) { font-size: 12px; line-height: 1.8; }
#screen-settings .sp-punch-choices { gap: 8px; }
#screen-settings .sp-punch-choices button { border-radius: 12px; color: var(--p-ink); font-size: 12px; font-weight: 500; }
#screen-settings .sp-punch-choices button[aria-pressed="true"] { background: var(--ip-selection); font-weight: 600; box-shadow: none; }
#screen-settings .sp-play { min-height: 48px; border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-bg); color: var(--p-ink); font-size: 14px; font-weight: 600; }
#screen-settings .sp-demo-status { font-size: 12px; }
#screen-settings .av-heading h4 { font-size: 16px; font-weight: 600; }
#screen-settings .av-heading > span { padding: 4px 8px; font-size: 11px; border: 0; border-radius: 8px; color: var(--p-muted); background: var(--p-bg); }
#screen-settings .av-portrait { background: var(--p-bg); }
#screen-settings .av-choice { border-radius: 13px; }
#screen-settings .av-choice[aria-pressed="true"] { background: var(--ip-selection); box-shadow: none; }
#screen-settings .av-choice strong { font-weight: 600; }
#screen-settings .av-selected { font-size: 11px; }
#screen-settings .av-choice[aria-pressed="true"] .av-selected { font-weight: 600; }
#screen-settings :is(.av-note, .av-scope, .av-status) { font-size: 12px; }
#screen-settings :is(.av-open, .av-close) { border-radius: 12px; background: var(--p-bg); color: var(--p-ink); font-size: 14px; font-weight: 600; }
#screen-settings .plan-chip { border: 0; background: var(--ip-selection); color: var(--p-accent); font-size: 12px; font-weight: 600; }
#screen-settings :is(.plan-desc, .tv-guide-row) { font-size: 13px; line-height: 1.85; }
#screen-settings :is(.plan-desc, .tv-guide-row) b { font-weight: 600; color: var(--p-ink); }
#screen-settings[data-visual-settings] #settings-save { margin-top: 28px; }
#screen-settings .policy-links { margin-top: 24px; }
#screen-settings .policy-links a { min-height: 44px; padding-block: 12px; color: var(--p-muted); font-size: 12px; }
#screen-settings .settings-version { padding-block: 8px; margin-top: 4px; font-size: 12px; letter-spacing: 0; }

/* Journal: a single writing surface, native fields and a quiet calendar. */
#screen-journal .journal-shell {
  width: min(100%, 720px);
  padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(112px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  scroll-padding-bottom: 112px;
}
#screen-journal .journal-header { padding: 0 0 26px; }
#screen-journal .journal-header > span { display: none; }
#screen-journal .journal-title { margin-bottom: 26px; }
#screen-journal .journal-title h1 { margin-bottom: 10px; font-size: clamp(28px, 5.5vw, 34px); font-weight: 600; letter-spacing: -.035em; }
#screen-journal .journal-title p { font-size: 14px; line-height: 1.8; }
#screen-journal .journal-tabs { gap: 4px; padding: 4px; border: 0; border-radius: 14px; background: var(--p-raised); box-shadow: none; }
#screen-journal .journal-tabs button { min-height: 44px; border-radius: 10px; font-size: 14px; font-weight: 500; }
#screen-journal .journal-tabs button[aria-selected="true"] { background: var(--p-paper); color: var(--p-ink); box-shadow: 0 1px 3px #0000000a; font-weight: 600; }
#screen-journal :is(.journal-section, .journal-composer, .journal-calendar-review) {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--p-line);
  border-radius: 18px;
  background: var(--p-paper);
  box-shadow: none;
}
#screen-journal .journal-greeting { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; margin-bottom: 22px; }
#screen-journal .journal-mark { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--p-accent); font-size: 24px; }
#screen-journal h2 { font-size: 19px; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; }
#screen-journal .journal-greeting p { font-size: 13px; line-height: 1.8; }
#screen-journal .journal-button { min-height: 44px; border: 1px solid var(--p-line); border-radius: 12px; padding: 11px 14px; background: var(--p-paper); font-size: 13px; font-weight: 500; box-shadow: none; }
#screen-journal .journal-button.journal-primary { background: var(--ip-action); border-color: var(--ip-action); color: var(--ip-on-action); font-weight: 600; }
#screen-journal #journal-compose > .journal-button { margin-top: 6px; min-height: 50px; }
#screen-journal .journal-examples { gap: 8px; margin-top: 18px; }
#screen-journal .journal-examples .journal-button { padding-inline: 12px; background: transparent; font-size: 12px; }
#screen-journal label { font-size: 13px; gap: 8px; }
#screen-journal :is(textarea, input:not([type="file"]), select) {
  min-height: 50px;
  border: 1px solid var(--p-line);
  border-radius: 12px;
  background: var(--p-bg);
  font-size: 16px;
  line-height: 1.5;
}
#screen-journal #journal-input { min-height: 110px; padding: 15px; }
#screen-journal .journal-review { gap: 20px; }
#screen-journal .journal-review-context { padding: 12px 14px; background: var(--p-bg); font-size: 13px; }
#screen-journal .journal-flow-step { gap: 8px 14px; font-size: 12px; font-weight: 500; }
#screen-journal .journal-flow-step li::before { width: 22px; height: 22px; font-weight: 600; }
#screen-journal .journal-flow-step li[aria-current="step"]::before { background: var(--ip-action); color: var(--ip-on-action); }
#screen-journal .journal-kicker { font-size: 12px; font-weight: 500; letter-spacing: 0; }
#screen-journal .journal-compose-return,
#screen-journal .journal-entry-actions .journal-button { border: 0; background: transparent; color: var(--p-muted); }
#screen-journal .journal-compose-return { padding-inline: 0; }
#screen-journal .journal-entry-actions .journal-button { padding-inline: 10px; font-size: 12px; }
#screen-journal .journal-entry { padding-block: 20px; }
#screen-journal .journal-kind { margin-bottom: 6px; font-size: 12px; font-weight: 500; }
#screen-journal .journal-entry p { font-size: 14px; line-height: 1.85; }
#screen-journal .journal-empty { padding: 22px 0 8px; font-size: 14px; }
#screen-journal .journal-calendar { gap: 4px; }
#screen-journal .journal-day { min-height: 48px; border-radius: 12px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
#screen-journal .journal-day.has-record:not([aria-pressed="true"]) { background: var(--ip-selection); }
#screen-journal .journal-day[aria-current="date"] { border: 1px solid var(--p-accent); }
#screen-journal .journal-day[aria-pressed="true"] { background: var(--ip-action); color: var(--ip-on-action); }
#screen-journal .journal-weekday { font-size: 12px; padding-bottom: 12px; }
#screen-journal .journal-weight-value { font-size: 44px; font-weight: 500; letter-spacing: -.04em; }
#screen-journal .journal-chart figcaption { font-size: 12px; }
#screen-journal .journal-backup { margin-top: 28px; padding-top: 8px; }
#screen-journal .journal-backup > summary { min-height: 48px; font-size: 14px; }
#screen-journal .journal-privacy { margin-top: 20px; font-size: 12px; line-height: 1.85; }
#screen-journal .journal-calendar-action .journal-button { min-height: 44px; font-size: 12px; }

/* Chat keeps the conversation above a stable, keyboard-friendly composer. */
#screen-chat .chat-shell { max-width: 760px; }
#screen-chat .chat-head { padding: max(20px, env(safe-area-inset-top)) 24px 20px; gap: 20px; border-bottom: 1px solid var(--p-line); }
#screen-chat .chat-head h2 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; }
#screen-chat .chat-head p { margin-top: 5px; font-size: 12px; line-height: 1.6; }
#screen-chat .chat-log { padding: 28px 24px; gap: 24px; }
#screen-chat .chat-intro { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
#screen-chat .chat-intro img { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--p-raised); }
#screen-chat .chat-bubble { padding: 15px 17px; border-radius: 18px; font-size: 15px; line-height: 1.85; }
#screen-chat .chat-bubble.coach { border: 1px solid var(--p-line); border-top-left-radius: 6px; background: var(--p-paper); box-shadow: none; }
#screen-chat .chat-bubble.me { border-top-right-radius: 6px; background: var(--ip-action); color: var(--ip-on-action); }
#screen-chat .chat-suggest { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-paper); }
#screen-chat .chat-suggest button {
  min-height: 52px;
  padding: 15px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}
#screen-chat .chat-suggest button + button { border-top: 1px solid var(--p-line); }
#screen-chat .chat-suggest button:first-child { border-radius: 15px 15px 0 0; }
#screen-chat .chat-suggest button:last-child { border-radius: 0 0 15px 15px; }
#screen-chat .chat-suggest button:nth-child(n) { background: transparent; }
#screen-chat .chat-notice { padding: 0; border: 0; background: transparent; font-size: 12px; line-height: 1.85; }
#screen-chat .chat-details { margin-top: 6px; }
#screen-chat .chat-details summary { font-weight: 500; }
#screen-chat .chat-thread { gap: 18px; }
#screen-chat .chat-composer { padding: 16px 24px max(14px, env(safe-area-inset-bottom)); gap: 8px 10px; border-top: 1px solid var(--p-line); background: var(--p-bg); }
#screen-chat .chat-composer textarea { min-width: 0; min-height: 50px; padding: 12px 14px; border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-paper); font-size: 16px; }
#screen-chat .chat-send { width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--ip-action); color: var(--ip-on-action); box-shadow: none; }
#screen-chat .chat-reset { min-height: 44px; padding-inline: 12px; border: 1px solid var(--p-line); border-radius: 12px; font-size: 12px; font-weight: 500; line-height: 1.6; }
#screen-chat .chat-preview-note { margin: 0 24px 12px; padding: 12px 14px; background: var(--p-paper); }
#screen-chat .chat-bubble.sys { padding: 4px 8px; background: transparent; color: var(--p-muted); font-size: 12px; }

/* Supporting content reads as a document, with fewer competing containers. */
#screen-tips > .tips-content { max-width: 720px; padding: max(20px, env(safe-area-inset-top)) 24px max(44px, env(safe-area-inset-bottom)); }
#screen-tips .tips-title { margin: 26px 0 30px; font-size: clamp(26px, 5.4vw, 34px); font-weight: 600; letter-spacing: -.035em; }
#screen-tips .tips-list { gap: 0; margin: 0; }
#screen-tips .tip-item { padding: 23px 0; gap: 18px; border: 0; border-top: 1px solid var(--p-line); border-radius: 0; background: transparent; box-shadow: none; }
#screen-tips .tip-icon { width: 32px; height: 32px; flex-basis: 32px; border: 0; border-radius: 0; background: transparent; color: var(--p-muted); }
#screen-tips .tip-icon .ui-icon { width: 25px; height: 25px; }
#screen-tips .tip-heading { font-size: 16px; font-weight: 600; line-height: 1.6; }
#screen-tips .tip-body p { margin: 6px 0 0; font-size: 14px; line-height: 1.85; }
#screen-tips :is(.install-guide, .disclaimer-box) { margin-top: 28px; padding: 24px; border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-paper); box-shadow: none; }
#screen-tips :is(.install-heading, .disclaimer-title) { font-size: 16px; font-weight: 600; line-height: 1.65; }
#screen-tips .install-platform { margin-top: 18px; }
#screen-tips .install-platform strong { font-size: 13px; font-weight: 600; color: var(--p-ink); }
#screen-tips :is(.install-platform p, .disclaimer-box p) { font-size: 13px; line-height: 1.85; }
#screen-tips .disclaimer-box p + p { margin-top: 12px; }
#screen-auth .auth-content { height: auto; min-height: min(580px, 100%); max-width: 480px; width: 100%; margin: auto; padding: 36px 28px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#screen-auth .opening-icon { color: var(--p-accent); background: transparent; box-shadow: none; filter: none; text-shadow: none; }
#screen-auth .auth-title { margin-top: 24px; font-size: 40px; font-weight: 600; letter-spacing: -.055em; }
#screen-auth .auth-sub { margin: 14px 0 28px; font-size: 15px; line-height: 1.85; }
#screen-auth .auth-input { min-height: 50px; border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-paper); box-shadow: none; text-align: left; font-size: 16px; }
#screen-auth .auth-input::placeholder { letter-spacing: 0; color: var(--p-muted); }
#screen-auth .auth-input:focus { box-shadow: none; }
#screen-auth :is(.auth-disclaimer, .auth-policy-link) { font-size: 12px; line-height: 1.85; }
#screen-auth .auth-disclaimer { margin-top: 30px; }
#screen-auth .lang-mini { gap: 4px; padding: 4px; border: 0; border-radius: 12px; background: var(--p-raised); }
#screen-auth .lang-btn { min-height: 44px; min-width: 56px; padding: 10px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--p-muted); font-weight: 500; }
#screen-auth .lang-btn.active { background: var(--p-paper); color: var(--p-ink); box-shadow: none; }

/* A press changes the control's surface without shifting the layout. */
:is(#screen-settings, #screen-journal, #screen-chat)
  :is(.style-btn, .fx-btn, .journal-button, .journal-tabs button, .chat-suggest button, .chat-send):not(:disabled):active {
  transform: none;
  box-shadow: none;
}
@media (hover: hover) {
  #screen-chat .chat-suggest button:hover,
  #screen-journal .journal-button:not(.journal-primary):hover { background: var(--p-raised); }
  #screen-settings[data-visual-settings] :is(.fx-btn, .style-btn):not(.active):hover { background: var(--p-bg); }
}
@media (max-width: 480px) {
  #screen-settings > .setup-content,
  #screen-settings[data-visual-settings] > .setup-content,
  #screen-journal .journal-shell,
  #screen-tips > .tips-content { padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); }
  #screen-settings .sp-group > h3 { padding: 20px 18px 16px; }
  #screen-settings[data-visual-settings] .settings-section,
  #screen-settings[data-visual-settings] .sp-group > .settings-section { padding: 20px 18px; }
  #screen-settings[data-visual-settings] .settings-style-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #screen-settings[data-visual-settings] .style-btn,
  #screen-settings[data-visual-settings] .style-btn.active { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 12px; text-align: left; }
  #screen-settings .style-btn .sp-style-portrait { grid-column: 1; grid-row: 1 / 4; margin: 0; border-radius: 10px; }
  #screen-settings .style-btn :is(.style-name, .style-desc, .sp-selected) { grid-column: 2; margin: 0; }
  #screen-settings[data-visual-settings] :is(.fx-name, .style-name) { font-size: 13px; }
  #screen-settings[data-visual-settings] :is(.fx-desc, .style-desc) { font-size: 12px; }
  #screen-settings[data-visual-settings] [data-sp-section="pose"] :is(.fx-btn, .fx-btn.active) { padding: 10px 5px; }
  #screen-settings[data-visual-settings] [data-sp-section="pose"] .fx-name { font-size: 12px; white-space: normal; }
  #screen-journal :is(.journal-section, .journal-composer, .journal-calendar-review) { padding: 20px 18px; }
  #screen-journal .journal-calendar { gap: 2px; }
  #screen-chat .chat-head { padding-inline: 18px; gap: 12px; }
  #screen-chat .chat-log { padding: 24px 18px; }
  #screen-chat .chat-composer { padding-inline: 18px; }
  #screen-chat .chat-preview-note { margin-inline: 18px; }
  #screen-tips :is(.install-guide, .disclaimer-box) { padding: 20px 18px; }
}
@media (max-width: 360px) {
  #screen-settings > .setup-content,
  #screen-settings[data-visual-settings] > .setup-content,
  #screen-journal .journal-shell,
  #screen-tips > .tips-content { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  #screen-settings .sp-group > h3 { padding-inline: 14px; }
  #screen-settings[data-visual-settings] .settings-section,
  #screen-settings[data-visual-settings] .sp-group > .settings-section,
  #screen-journal :is(.journal-section, .journal-composer, .journal-calendar-review) { padding-inline: 14px; }
  #screen-settings[data-visual-settings] .fx-btn,
  #screen-settings[data-visual-settings] .fx-btn.active { padding: 12px 9px; }
  #screen-journal .journal-day { font-size: 13px; }
  #screen-chat .chat-head h2 { font-size: 19px; }
  #screen-chat .chat-head,
  #screen-chat .chat-log,
  #screen-chat .chat-composer { padding-inline: 14px; }
  #screen-chat .chat-intro { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  #screen-chat .chat-intro img { width: 32px; height: 32px; }
  #screen-chat .chat-bubble { padding: 13px 14px; font-size: 14px; }
  #screen-chat .chat-preview-note { margin-inline: 14px; }
  #screen-auth .auth-content { padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-settings[data-visual-settings] :is(.fx-btn, .style-btn),
  #screen-chat :is(.chat-suggest button, .chat-send) { transition: none; }
}