/* Screens travel over one stationary wallpaper; chat remains mounted. */
.screen-viewport { position:relative; min-width:0; min-height:0; overflow:clip; isolation:isolate; }
.screen { position:absolute; inset:0; width:100%; height:100%; transition:transform 480ms cubic-bezier(.22,.75,.2,1); will-change:transform; }
.conversation { transform:translateX(0); }
.settings-screen { display:flex; flex-direction:column; transform:translateX(100%); color:#fff; background:transparent; }
.screen-viewport[data-view="settings"] .conversation { transform:translateX(-100%); }
.screen-viewport[data-view="settings"] .settings-screen { transform:translateX(0); }
.screen[inert] { pointer-events:none; }
.chat-header { height:68px; padding:0 26px; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0; text-shadow:0 1px 5px #061a13; }
.chat-header .avatar { width:39px; height:39px; font-size:30px; }
.identity h2 { font-size:19px; }
.header-actions .icon-button { width:36px; height:36px; }
.app-shell[data-scene="beach"] .chat-header { background:transparent; }
.settings-header { justify-content:space-between; flex-shrink:0; }
.settings-heading { display:flex; align-items:center; gap:12px; }
.settings-heading>svg { width:19px; height:19px; color:#e2edd4; }
.settings-heading h2 { font-size:18px; font-weight:550; }
.settings-header .icon-button { width:36px; height:36px; }
.settings-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#ffffff50 transparent; background:#12251ba6; }
.settings-content { max-width:620px; padding:30px 30px 20px; margin:auto; }
.settings-section + .settings-section { border-top:1px solid #ffffff26; padding-top:23px; margin-top:12px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:21px; }
.section-heading .eyebrow { color:#e4eeddc9; font-size:9px; margin-bottom:7px; }
.section-heading h3 { font-size:25px; font-weight:450; }
.section-heading .icon-button { width:36px; height:36px; }
.settings-screen .scene-options { gap:17px; }
.settings-screen .scene-option { background:#fff; color:#293927; outline-color:#ffffff55; }
.settings-screen .scene-option[aria-pressed="true"] { outline-color:#d7eea0; }
.settings-screen .scene-option img { height:132px; }
.settings-screen .scene-option>span { padding:11px 12px; }
.settings-screen .scene-option strong { font-size:12px; }
.settings-screen .scene-option small { font-size:10px; color:#63705a; }
.preference-row { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:73px; padding:17px 0; }
.preference-row>label:first-child { display:flex; flex-direction:column; gap:6px; cursor:pointer; min-width:0; }
.preference-row strong { font-size:13px; font-weight:500; }
.preference-row small { font-size:11px; color:#e4eeddc9; line-height:1.5; }
.section-label { font-size:9px; color:#e4eeddc9; font-weight:500; }
.settings-screen .switch>span { background:#a5b3a569; }
.settings-screen .switch input:checked+span { background:#d8eca9; }
.settings-screen .switch input:checked+span:after { background:#365034; }
.settings-screen :focus-visible { outline-color:#d6ed9b; }
.text-size-control { display:flex; align-items:center; gap:10px; width:164px; flex-shrink:0; }
.text-size-control>span:first-child { font-size:11px; }
.text-size-control>span:last-child { font-size:20px; }
.text-size-control input { accent-color:#d8eca9; width:110px; min-width:0; height:26px; cursor:pointer; }
.settings-screen #shared-files { color:#e9efdf; font-size:12px; margin:16px 0 20px; }
.settings-screen #shared-files:empty { display:none; }
.shared-file { display:flex; align-items:center; gap:12px; padding:10px 0; }
.shared-file>span { overflow-wrap:anywhere; min-width:0; }
.shared-file img { width:40px; height:40px; object-fit:cover; border-radius:6px; }
.shared-file>svg { width:24px; height:24px; }
.settings-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; color:#e4eedd9c; font-size:9px; }
.app-shell[data-text-size="1"] .bubble { font-size:16px; }
.app-shell[data-text-size="2"] .bubble { font-size:18px; }
.app-shell.reduce-motion *, .app-shell.reduce-motion *:before, .app-shell.reduce-motion *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
.chat-header .icon-button, .sidebar-heading .icon-button { background:#ffffff0d; border:1px solid #ffffff45; color:#fff; }
.home-button svg { stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.home-button { display:inline-flex; }
.settings-home-row { display:flex; align-items:center; gap:12px; width:100%; padding:3px 0 23px; margin-bottom:20px; border-bottom:1px solid #ffffff26; color:#fff; background:transparent; text-align:left; font-size:14px; }
.settings-home-row svg { width:20px; height:20px; }
.settings-home-row svg:last-child { margin-left:auto; width:16px; height:16px; }
.spaces-caption { margin-top:8px; color:#e4eeddc9; font-size:11px; line-height:1.5; }
.compose-area { position:relative; }
.attachment-menu { position:absolute; bottom:calc(100% - 5px); left:32px; width:230px; max-width:calc(100% - 40px); background:#f5f8f0fa; color:#2a3e30; border:1px solid #ffffffb0; border-radius:8px; padding:6px; box-shadow:0 8px 28px #10281d35; z-index:3; animation:arrive .16s ease-out; }
.attachment-menu button { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:10px 12px; background:transparent; border-radius:5px; text-align:left; font-size:13px; }
.attachment-menu button:hover,.attachment-menu button:focus-visible { background:#e4ecd9; }
.attachment-menu svg { width:19px; height:19px; }
.attachment-menu small { margin-left:auto; font-size:9px; color:#76846b; }
@media(max-width:700px){.attachment-menu { left:16px; }}
.chat-header .home-button { width:34px; height:34px; }
.list-actions { display:flex; gap:5px; }
.mobile-only { display:none; }
.sidebar { position:relative; padding:0 18px; color:#fff; background:transparent; border-color:#ffffff25; }
.sidebar:before { content:''; position:absolute; inset:68px 0 0; background:#12251ba6; z-index:-1; pointer-events:none; }
.sidebar-heading { height:68px; flex-shrink:0; padding-left:5px; text-shadow:0 1px 5px #061a13; border-bottom:0; }
.sidebar-heading h1 { font-size:17px; font-weight:550; }
.sidebar-heading .icon-button { width:34px; height:34px; }
.search { color:#fff; background:#ffffff10; border-color:#ffffff30; margin-top:22px; }
.search input { color:#fff; }
.search input::placeholder { color:#edf3e6c4; }
.conversation-filter { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:22px 5px 13px; }
.conversation-filter select { background:transparent; color:#e8eedfe0; border:0; padding:4px 0; max-width:calc(100% - 25px); font:inherit; font-size:11px; cursor:pointer; }
.conversation-filter option, .setting-select option { background:#f4f7f1; color:#263c2e; }
#conversation-count { font-size:10px; color:#edf3e6b0; }
.thread-list { gap:17px; padding:8px 0; }
.category-heading { font-size:9px; font-weight:500; color:#dce9cdba; text-transform:uppercase; margin:0 9px 9px; }
.thread { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 12px; min-height:57px; border-radius:6px; background:transparent; width:100%; border:1px solid transparent; }
.thread.active { background:#ffffff15; border-color:#ffffff38; }
.thread:hover { background:#ffffff13; }
.thread strong { white-space:normal; overflow-wrap:anywhere; color:#fff; font-size:13px; font-weight:450; line-height:1.45; }
.thread-time { font-size:9px; color:#edf3e6ad; flex-shrink:0; }
.empty-search { color:#e6efdc; }
.sidebar-bottom { padding:15px 5px 22px; }
.scene-shortcut { border-color:#ffffff26; }
.scene-shortcut small { color:#e0ebd4b8; }
.library-settings { display:flex; align-items:center; gap:10px; width:100%; padding:19px 0 4px; background:none; text-align:left; color:#fff; font-size:12px; }
.library-settings svg { width:16px; height:16px; }
.library-settings svg:last-child { margin-left:auto; }
.company { margin-top:26px; }
.company>span { color:#e0ebd4b8; font-size:9px; }
.preference-copy { display:flex; flex-direction:column; gap:6px; min-width:0; }
.preference-copy small { max-width:290px; }
#extended-settings>.settings-section, .shared-section { border-top:1px solid #ffffff26; margin-top:12px; padding-top:23px; }
.section-label { text-transform:uppercase; }
.setting-status { color:#e3edd2b5; font-size:10px; text-align:right; line-height:1.45; flex:0 0 87px; }
.setting-select { border:1px solid #ffffff40; border-radius:6px; background:#ffffff10; padding:8px 10px; color:#fff; width:87px; font-size:12px; }
.settings-content .preference-row+.preference-row { border-top:1px solid #ffffff12; }
.hide-timestamps .message-meta { display:none; }
.privacy-notice { color:#fff; display:flex; flex-direction:column; align-items:center; gap:15px; padding:32px 20px; text-shadow:0 1px 5px #061a13; }
.privacy-notice button { background:#e8f0df; color:#23432d; border-radius:6px; padding:10px 17px; font-size:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
dialog::backdrop { backdrop-filter:none; background:#10271d66; }
.call-control>span { backdrop-filter:none; }
@media(max-width:1050px) { .chat-header { padding:0 20px; } }
@media(max-width:700px) {
  .screen-viewport { width:100%; flex:1; transform:translateX(0); transition:transform 480ms cubic-bezier(.22,.75,.2,1); }
  .app-shell.show-sidebar .screen-viewport { display:block; transform:translateX(100%); }
  .sidebar { display:flex; position:absolute; inset:0; width:100%; height:100%; padding:0 22px; transform:translateX(-100%); transition:transform 480ms cubic-bezier(.22,.75,.2,1); }
  .app-shell.show-sidebar .sidebar { transform:translateX(0); }
  .app-shell.show-sidebar .conversation { display:flex; }
  .sidebar:before { inset:62px 0 0; }
  .sidebar-heading { height:62px; }
  .sidebar-heading h1 { font-size:19px; }
  .mobile-only { display:inline-flex; }
  .thread-list { gap:26px; }
  .thread { min-height:64px; padding:18px 13px; }
  .thread strong { font-size:15px; }
  .thread-time { font-size:10px; }
  .category-heading { font-size:10px; }
  .conversation-filter select { font-size:12px; }
  .search { padding:13px; }
  .search input { font-size:13px; }
  .chat-header { height:62px; padding:0 16px; }
  .header-actions .icon-button { width:34px; height:34px; }
  .chat-header .avatar { width:37px; height:37px; font-size:28px; }
  .settings-heading h2 { font-size:17px; }
  .settings-content { padding:23px 24px max(23px,env(safe-area-inset-bottom)); }
  .section-heading { margin-bottom:20px; }
  .section-heading h3 { font-size:23px; }
  .settings-screen .scene-options { gap:14px; }
  .settings-screen .scene-option img { height:122px; }
  .settings-screen .scene-option small { font-size:9px; }
  .settings-section + .settings-section { padding-top:19px; margin-top:8px; }
  .preference-row { min-height:72px; gap:12px; }
  .preference-row strong { font-size:12px; }
  .preference-row small { font-size:10px; }
  .text-size-control { width:136px; gap:8px; }
  .text-size-control input { width:88px; }
  .settings-footer { font-size:8px; }
  .setting-status { flex-basis:76px; font-size:9px; }
  .preference-copy small { max-width:220px; }
}
@media(max-width:360px) {
  .chat-header { padding:0 12px; gap:7px; }
  .chat-header .home-button { width:31px; height:31px; }
  .header-actions .icon-button { width:31px; height:31px; }
  .settings-content { padding-left:20px; padding-right:20px; }
  .settings-screen .scene-option img { height:100px; }
  .settings-screen .scene-option>span { padding:10px 8px; }
  .settings-screen .scene-option small { font-size:8px; }
  .text-size-control { width:120px; }
  .text-size-control input { width:72px; }
}