:root {
  --accent-gradient:linear-gradient(90deg,var(--violet),var(--azure));--accent-line-height:2.5px;
  --bg-void:#0a0a0f;--bg-deep:#0f0f18;--bg-surface:#14141f;--bg-card:#1a1a28;--bg-elevated:#202033;--bg-hover:#252538;
  --border-subtle:rgba(255,255,255,0.06);--border-mid:rgba(255,255,255,0.12);--border-accent:rgba(99,102,241,0.4);
  --violet:#6366f1;--violet-light:#818cf8;--violet-soft:rgba(99,102,241,0.15);
  --azure:#38bdf8;--azure-soft:rgba(56,189,248,0.12);
  --emerald:#34d399;--rose:#f472b6;--amber:#fbbf24;--coral:#fb7185;
  --text-primary:#f1f1f8;--text-secondary:#9494b0;--text-muted:#9494ad;
  --radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:999px;
  --nav-h:84px;
  --font-display:'Syne',sans-serif;--font-body:'DM Sans',sans-serif;--font-mono:'JetBrains Mono',monospace;
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);--ease-smooth:cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--bg-void);color:var(--text-primary)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:2px}
#app{height:100vh;display:flex;flex-direction:column;overflow:hidden;position:relative;max-width:520px;margin:0 auto}
#page-container{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(var(--nav-h) + 12px);scroll-behavior:smooth}
.page{display:none;animation:fadeIn 0.3s var(--ease-smooth)}
.page.active{display:block}

/* TOPBAR */
#topbar{height:58px;background:rgba(10,10,15,0.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 14px;position:sticky;top:0;z-index:100;flex-shrink:0}
.topbar-brand{font-family:var(--font-display);font-size:21px;font-weight:800;background:linear-gradient(135deg,var(--violet-light),var(--azure));-webkit-background-clip:text;-webkit-text-fill-color:transparent;cursor:pointer}
.topbar-right{display:flex;align-items:center;gap:8px}
.icon-btn{width:34px;height:34px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:16px;color:var(--text-secondary);position:relative}
.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.notif-ring{position:absolute;top:3px;right:3px;width:7px;height:7px;background:var(--rose);border-radius:50%;border:1.5px solid var(--bg-void)}

/* BOTTOM NAV */
#bottom-nav{height:var(--nav-h);background:rgba(10,10,15,0.96);backdrop-filter:blur(24px);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-around;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:200;padding:0 6px}
.nav-tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;cursor:pointer;border-radius:var(--radius-md);transition:all .25s var(--ease-spring);position:relative}
.nav-tab .ni{font-size:21px;transition:transform .3s var(--ease-spring)}
.nav-tab .nl{max-width:100%;font-size:10px;line-height:1.2;text-align:center;overflow-wrap:anywhere;font-weight:500;color:var(--text-muted);letter-spacing:.3px;transition:color .2s}
.nav-tab.active .nl{color:var(--violet-light)}
.nav-tab.active .ni{transform:scale(1.12)}
.nav-tab.active::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:2.5px;background:var(--accent-gradient);border-radius:0 0 3px 3px}
.nbadge{position:absolute;top:5px;right:calc(50% - 22px);min-width:16px;height:16px;background:var(--rose);border-radius:8px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;border:2px solid var(--bg-void);padding:0 3px}

/* MODAL */
.overlay{position:fixed;inset:0;background:rgba(5,5,10,.9);backdrop-filter:blur(16px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:14px}
.overlay.hidden{display:none}
.modal-box{background:var(--bg-surface);border:1px solid var(--border-mid);border-radius:var(--radius-xl);width:100%;max-width:460px;max-height:94vh;overflow-y:auto;animation:popIn .24s var(--ease-smooth)}
@keyframes popIn{from{opacity:0;transform:scale(.9) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* FORMS */
.form-wrap{padding:0 22px 22px}
.modal-top{padding:26px 22px 16px;text-align:center}
.modal-logo{font-family:var(--font-display);font-size:26px;font-weight:800;background:linear-gradient(135deg,var(--violet-light),var(--azure));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.modal-sub{font-size:13px;color:var(--text-secondary);margin-top:4px;line-height:1.5}
.steps{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:20px}
.sdot{width:7px;height:7px;border-radius:50%;background:var(--bg-elevated);transition:all .3s}
.sdot.active{background:var(--violet);width:22px;border-radius:3.5px}
.sdot.done{background:var(--emerald)}
.fl{font-size:11px;font-weight:600;color:var(--text-secondary);letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px;display:block}
.fl .req{color:var(--violet-light);margin-left:2px}
.fl .opt{font-size:10px;font-weight:400;color:var(--text-muted);text-transform:none;letter-spacing:0;margin-left:4px}
.fi,.fs,.ft{width:100%;background:var(--bg-deep);border:1px solid var(--border-mid);border-radius:var(--radius-sm);padding:11px 13px;color:var(--text-primary);font-family:var(--font-body);font-size:14px;transition:all .2s;outline:none;appearance:none;-webkit-appearance:none}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.fi::placeholder,.ft::placeholder{color:var(--text-muted)}
.fs{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235a5a75' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;cursor:pointer}
.fs option{background:var(--bg-surface)}
.fg{margin-bottom:14px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lang-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.ltag{display:inline-flex;align-items:center;gap:5px;background:var(--violet-soft);border:1px solid var(--border-accent);color:var(--violet-light);padding:4px 10px 4px 11px;border-radius:var(--radius-full);font-size:12px;font-weight:500;cursor:default}
.ltag .rx{font-size:13px;opacity:.6;cursor:pointer;transition:opacity .15s}
.ltag .rx:hover{opacity:1}
.upload-zone{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;border:2px dashed var(--border-mid);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s;background:var(--bg-deep);text-align:center}
.upload-zone:hover{border-color:var(--violet);background:var(--violet-soft)}
.upload-preview{width:68px;height:68px;border-radius:50%;object-fit:cover;border:3px solid var(--violet)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 22px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s var(--ease-smooth);border:none;outline:none;letter-spacing:.1px}
.btn-p{background:linear-gradient(135deg,var(--violet),#4f46e5);color:#fff;box-shadow:0 4px 14px rgba(99,102,241,.3)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.45)}
.btn-p:active{transform:scale(.98)}
.btn-s{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-mid)}
.btn-s:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-full{width:100%}
.btn-sm{padding:7px 14px;font-size:12px;border-radius:8px}

/* SECTION HEADER */
.sh{padding:18px 14px 10px;display:flex;align-items:center;justify-content:space-between}
.st{font-family:var(--font-display);font-size:18px;font-weight:700}
.sa{font-size:13px;color:var(--violet-light);cursor:pointer;font-weight:500}

/* STORIES */
.stories{display:flex;gap:10px;padding:10px 14px;overflow-x:auto;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.sitem{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;cursor:pointer}
.sring{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--azure));padding:2px;transition:transform .2s var(--ease-spring)}
.sring:hover{transform:scale(1.08)}
.sring-in{width:100%;height:100%;border-radius:50%;border:2px solid var(--bg-surface);overflow:hidden;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:20px}
.slabel{font-size:10px;color:var(--text-secondary);max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.sadd{background:var(--bg-elevated);border:2px dashed var(--border-mid)}

/* COMPOSE BAR */
.compose-bar{display:flex;align-items:center;gap:9px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin:8px 12px 4px;padding:10px 12px;cursor:pointer;transition:border-color .2s}
.compose-bar:hover{border-color:var(--border-accent)}
.cph{font-size:13px;color:var(--text-muted);flex:1}
.cacts{display:flex;gap:5px}
.cact{width:30px;height:30px;background:var(--bg-elevated);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;border:none;transition:all .2s;color:var(--text-secondary)}
.cact:hover{background:var(--bg-hover);color:var(--violet-light)}

/* POSTS */
.pcard{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin:7px 11px;overflow:hidden;transition:border-color .2s}
.pcard:hover{border-color:var(--border-mid)}
.phead{display:flex;align-items:center;gap:9px;padding:12px 12px 8px}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.av-sm{width:34px;height:34px;font-size:13px}
.av-md{width:42px;height:42px;font-size:16px}
.pauthor{font-size:14px;font-weight:600}
.pmeta{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);margin-top:1px;flex-wrap:wrap}
.lbadge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:var(--radius-full);font-size:10px;font-weight:700;font-family:var(--font-mono);white-space:nowrap;flex-shrink:0;width:auto;min-width:0}
.lb-learn{background:var(--azure-soft);border:1px solid rgba(56,189,248,.2);color:var(--azure);width:auto;flex-shrink:0}
.lb-native{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.2);color:var(--emerald);width:auto;flex-shrink:0}
.lb-pair{background:linear-gradient(135deg,rgba(56,189,248,.1),rgba(99,102,241,.1));border:1px solid rgba(99,102,241,.25);color:var(--text-primary);gap:4px}
.pbody{padding:2px 12px 10px}
.ptext{font-size:14px;line-height:1.65;color:var(--text-primary)}
.corr-orig{background:rgba(244,114,182,.15);border-bottom:2px solid var(--rose);color:var(--rose);padding:1px 3px;border-radius:3px;text-decoration:line-through;font-size:13px}
.pfooter{display:flex;align-items:center;padding:8px 12px 12px;gap:0;border-top:1px solid var(--border-subtle)}
.actbtn{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:8px;font-size:12px;color:var(--text-secondary);cursor:pointer;transition:all .2s;background:transparent;border:none;font-family:var(--font-body);font-weight:500}
.actbtn:hover{background:var(--bg-elevated);color:var(--text-primary)}
.actbtn.liked{color:var(--rose)}
.sp{flex:1}

/* AUDIO MESSAGE */
.audio-msg{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-elevated);border-radius:12px;margin-top:8px}
.play-btn{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--violet),#4f46e5);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;transition:transform .2s var(--ease-spring);flex-shrink:0}
.play-btn:hover{transform:scale(1.08)}
.waveform{flex:1;height:28px;display:flex;align-items:center;gap:2px}
.wave-bar{width:3px;border-radius:2px;background:var(--violet-light);opacity:.5;animation:waveAnim 1.2s ease-in-out infinite alternate}
.wave-bar:nth-child(odd){animation-delay:.1s}
.wave-bar:nth-child(3n){animation-delay:.25s}
@keyframes waveAnim{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.audio-dur{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);flex-shrink:0}

/* MESSAGES */
.chat-item{display:flex;align-items:center;gap:11px;padding:13px 12px;margin:4px 0;border-radius:var(--radius-md);cursor:pointer;transition:background .15s;position:relative;touch-action:manipulation}
.chat-item:hover{background:var(--bg-card)}
.chat-meta{flex:1;min-width:0}
.cname{font-size:14px;font-weight:600;margin-bottom:1px}
.cpreview{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctime{font-size:10px;color:var(--text-muted)}
.chat-aside{display:flex;align-items:center;gap:4px;flex-shrink:0}
.chat-inbox-controls{padding:12px 23px 12px;display:flex;flex-direction:column;gap:15px}
.chat-inbox-controls[hidden],.chat-selection-toolbar[hidden],.chat-load-more[hidden]{display:none}
.chat-inbox-controls .fi{width:100%;margin:0;min-width:0}
.chat-filter-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}
.chat-filter-row .sort-chip{font-family:var(--font-body);line-height:1.4}
.chat-filter-row .sort-chip[aria-pressed="true"]{background:var(--violet-soft);border-color:var(--border-accent);color:var(--violet-light)}
.chat-section-container{display:flex;flex-direction:column}
.chat-section-container[hidden]{display:none}
.chat-section-container .active{font-weight:600;background:var(--violet-soft)}
#chat-navigation-sheet .sheet-title{font-size:18px}
#chat-navigation-sheet .sheet{overscroll-behavior:contain}
.chat-selection-toolbar{display:flex;flex-direction:column;gap:12px;padding-top:2px}
.chat-selection-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--text-secondary)}
.chat-selection-summary label{display:flex;align-items:center;gap:7px;min-height:32px;cursor:pointer}
.chat-selection-summary input,.chat-select-checkbox{accent-color:var(--violet-light);width:18px;height:18px;flex-shrink:0;cursor:pointer}
.chat-item.selected{background:var(--violet-soft)}
.chat-item.selecting{gap:9px}
.chat-item .chat-avatar-wrap{position:relative;flex-shrink:0}
.chat-online-dot{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:var(--emerald);border:2px solid var(--bg-void)}
.chat-unread-count{font-size:11px;min-width:20px;padding:3px 5px;text-align:center;border-radius:10px;background:var(--violet-soft);color:var(--text-primary)}
.chat-aside{max-width:32%;flex-wrap:wrap;justify-content:flex-end}
.chat-load-more{display:block;margin:14px auto 20px;max-width:calc(100% - 46px)}

/* CHAT WINDOW */
.chat-win{visibility:hidden;position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:520px;height:100%;background:var(--bg-void);z-index:300;display:flex;flex-direction:column;transition:transform .35s var(--ease-smooth)}
.chat-win.open{transform:translateX(-50%) translateY(0) !important;visibility:visible !important}
.cwin-head{display:flex;align-items:center;gap:9px;padding:11px 14px;background:rgba(10,10,15,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
.cwin-back{font-size:19px;color:var(--text-secondary);cursor:pointer;padding:3px 7px 3px 0}
.cwin-info{flex:1}
.cwin-name{font-size:15px;font-weight:600}
.cwin-status{font-size:11px;color:var(--emerald)}
.msgs-area{flex:1;overflow-y:auto;padding:12px 13px;display:flex;flex-direction:column;gap:9px}
.mrow{display:flex;gap:7px;align-items:flex-end}
.mrow.me{flex-direction:row-reverse}
.mrow:not(.me){align-items:flex-start}
.mrow:not(.me)>.message-stack{padding-top:4px}
.bubble{max-width:74%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.5;position:relative}
.b-other{background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-primary);border-bottom-left-radius:3px}
.b-me{background:linear-gradient(135deg,var(--violet),#4f46e5);color:#fff;border-bottom-right-radius:3px}
.btime{font-size:10px;color:var(--text-muted);margin-top:2px}
.mrow.me .btime{text-align:right}
.message-action-target{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.message-action-target:focus-visible{outline:2px solid var(--azure);outline-offset:3px}
.message-heart{font-size:14px;line-height:1;margin-top:4px}
.deleted-message{font-style:italic;opacity:.75}
.message-menu-option{width:100%;background:transparent;border:0;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);text-align:left;font-family:var(--font-body);min-height:48px}
.message-menu-option:focus-visible{outline:2px solid var(--azure);outline-offset:-2px}
.cin-area{padding:9px 11px;border-top:1px solid var(--border-subtle);background:var(--bg-surface);display:flex;align-items:flex-end;gap:7px}
.cinput{flex:1;background:var(--bg-card);border:1px solid var(--border-mid);border-radius:18px;padding:9px 14px;color:var(--text-primary);font-family:var(--font-body);font-size:14px;resize:none;outline:none;min-height:40px;max-height:90px;line-height:1.4;transition:border-color .2s}
.cinput:focus{border-color:var(--violet)}
.cinput::placeholder{color:var(--text-muted)}
.sendbtn{width:40px;height:40px;background:linear-gradient(135deg,var(--violet),#4f46e5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;border:none;flex-shrink:0;transition:transform .2s var(--ease-spring);color:#fff}
.sendbtn:hover{transform:scale(1.08)}
/* Audio record btn */
.rec-btn{width:40px;height:40px;background:var(--bg-elevated);border:1px solid var(--border-mid);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:all .2s;flex-shrink:0}
.rec-btn.recording{background:rgba(251,113,133,.2);border-color:rgba(251,113,133,.5);animation:recPulse 1s ease-in-out infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,113,133,.3)}50%{box-shadow:0 0 0 8px rgba(251,113,133,0)}}

/* CONNECT */
.filter-bar{display:flex;gap:7px;padding:6px 12px 4px;overflow-x:auto;scrollbar-width:none}
.filter-bar::-webkit-scrollbar{display:none}
.fchip{flex-shrink:0;padding:6px 13px;border-radius:var(--radius-full);font-size:12px;font-weight:500;border:1px solid var(--border-mid);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:all .2s;white-space:nowrap}
.fchip.on{background:var(--violet-soft);border-color:var(--border-accent);color:var(--violet-light)}
.fchip:hover{color:var(--text-primary)}

/* PROFILE */
.prof-banner{height:90px;background:linear-gradient(135deg,rgba(99,102,241,.35),rgba(56,189,248,.2),rgba(244,114,182,.15));border-bottom:1px solid var(--border-subtle);position:relative;overflow:hidden}
.prof-banner::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.prof-hero{padding:0 14px 16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.prof-av-wrap{position:relative;margin-top:-32px;z-index:2}
.prof-av{width:72px;height:72px;border-radius:50%;border:3px solid var(--bg-surface);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:28px;font-weight:700;color:#fff;overflow:hidden}
.pname{font-family:var(--font-display);font-size:19px;font-weight:700}
.ploc{font-size:12px;color:var(--text-secondary)}
.pstats{display:flex;gap:22px}
.pstat-n{font-family:var(--font-display);font-size:17px;font-weight:700;text-align:center}
.pstat-l{font-size:10px;color:var(--text-muted);text-align:center}
.badge{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 9px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);min-width:58px}
.badge-i{font-size:20px}
.badge-n{font-size:9px;color:var(--text-muted);text-align:center;font-weight:500}
.setting-row:not(:last-child){border-bottom:1px solid var(--border-subtle)}
.toggle{width:44px;height:24px;border-radius:12px;position:relative;cursor:pointer;transition:background .25s;flex-shrink:0}
.toggle.on{background:var(--violet)}
.toggle.off{background:var(--bg-elevated);border:1px solid var(--border-mid)}
.toggle-knob{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:3px;transition:left .25s var(--ease-spring)}
.toggle.on .toggle-knob{left:23px}
.toggle.off .toggle-knob{left:3px}

/* SHEETS */
.sheet-overlay{position:fixed;inset:0;background:rgba(5,5,10,.84);backdrop-filter:blur(12px);z-index:800;display:none;align-items:flex-end;justify-content:center}
.sheet-overlay.open{display:flex}
.sheet{background:var(--bg-surface);border:1px solid var(--border-mid);border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:100%;max-width:520px;padding:22px;animation:sheetUp .24s var(--ease-smooth);max-height:88vh;overflow-y:auto}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-handle{width:36px;height:3px;background:var(--border-mid);border-radius:2px;margin:0 auto 18px}
.sheet-title{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:14px}

/* AI RESULT */
.ai-box{background:var(--bg-deep);border:1px solid rgba(52,211,153,.2);border-radius:var(--radius-md);padding:12px 13px;margin-bottom:12px}
.ai-label{font-size:10px;font-weight:700;color:var(--emerald);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.ai-item{display:flex;gap:7px;font-size:13px;color:var(--text-secondary);margin-bottom:5px;line-height:1.5}
.ai-icon{flex-shrink:0;margin-top:1px}
.ai-corrected{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.15);border-radius:8px;padding:8px 10px;margin-top:6px;font-size:13px;color:var(--text-primary);line-height:1.6}
.ai-thinking{display:flex;align-items:center;gap:5px;color:var(--violet-light);font-size:13px}
.dot{width:5px;height:5px;background:var(--violet);border-radius:50%;animation:dp 1.2s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes dp{0%,60%,100%{transform:scale(.7);opacity:.4}30%{transform:scale(1.2);opacity:1}}

/* RECORDING INDICATOR */
.rec-indicator{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(244,114,182,.1);border:1px solid rgba(244,114,182,.25);border-radius:var(--radius-sm);font-size:13px;color:var(--rose);margin-bottom:8px}
.rec-dot{width:8px;height:8px;background:var(--rose);border-radius:50%;animation:recDot 1s ease-in-out infinite}
@keyframes recDot{0%,100%{opacity:1}50%{opacity:.2}}

/* TOAST */
.toast{position:fixed;bottom:calc(var(--nav-h) + 14px);left:50%;transform:translateX(-50%) translateY(16px);background:var(--bg-elevated);border:1px solid var(--border-mid);color:var(--text-primary);padding:9px 16px;border-radius:var(--radius-full);font-size:13px;font-weight:500;z-index:20010;opacity:0;transition:all .3s var(--ease-spring);pointer-events:none;white-space:nowrap;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* Attach menu */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.profile-menu-item { display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border-subtle); }
.profile-menu-item:last-child { border-bottom:none; }
.profile-menu-item:hover { background:var(--bg-elevated); }
.profile-menu-item .icon { font-size:20px;width:28px;text-align:center; }
.profile-menu-item .label { font-size:14px;font-weight:500; }
.profile-menu-item .sublabel { font-size:11px;color:var(--text-muted);margin-top:1px; }
.profile-menu-item.danger .label { color:var(--rose); }

/* Keep settings navigation and search visible while only the option list scrolls. */
#profile-menu-sheet .settings-panel{display:flex;flex-direction:column;max-height:85vh;max-height:85dvh;overflow:hidden;padding-top:12px}
.settings-header{flex:none;min-width:0;padding-bottom:10px}
.settings-title-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.settings-title-row h2{font-size:20px;font-weight:700;margin:0;line-height:1.3;outline:none}
.settings-back{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-elevated);color:var(--text-primary);font-size:27px;cursor:pointer}
.settings-account{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:14px}
.settings-account .av{flex:none}
.settings-account-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.settings-account-text strong,.settings-account-text span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-account-text strong{font-size:14px}
.settings-account-text span{font-size:12px;color:var(--text-muted)}
.settings-search{position:relative}
.settings-search .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}
.settings-search input{width:100%;padding-right:44px;font-size:16px}
.settings-search input::-webkit-search-cancel-button{-webkit-appearance:none}
#settings-search-clear{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:transparent;color:var(--text-secondary);font-size:23px;cursor:pointer}
#settings-status{font-size:12px;color:var(--text-muted);padding-top:9px;min-height:25px}
.settings-content{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-card)}
.settings-row{width:100%;font:inherit;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);padding:13px 14px;gap:10px;min-height:60px}
.settings-row-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.settings-row .label,.settings-row .sublabel{display:block;overflow-wrap:anywhere}
.settings-row .sublabel{font-size:12px;line-height:1.4}
.settings-category-count{flex:none;font-size:12px;min-width:25px;text-align:center;padding:4px 7px;border-radius:8px;color:var(--text-secondary);background:var(--bg-elevated)}
.settings-result-category{font-size:11px;color:var(--violet-light);line-height:1.5}
.settings-empty{font-size:13px;color:var(--text-secondary);line-height:1.6;padding:18px;margin:0}
.settings-version{flex:none;padding-top:10px;font-size:11px}
.settings-row:focus-visible,.settings-back:focus-visible,#settings-search-clear:focus-visible{outline:2px solid var(--violet-light);outline-offset:-3px}
.settings-overlay [hidden]{display:none!important}
@media(max-height:500px){.settings-account{display:none}.settings-title-row{margin-bottom:8px}.settings-header{padding-bottom:6px}.settings-version{padding-top:6px}#profile-menu-sheet .settings-panel{max-height:95vh;max-height:95dvh}}

.toggle-row { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle); }
.toggle-row:last-child { border-bottom:none; }
.toggle-row .tlabel { font-size:14px;font-weight:500; }
.toggle-row .tsub { font-size:11px;color:var(--text-muted);margin-top:2px; }

.correction-bubble { background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.2);border-radius:var(--radius-md);padding:10px 14px;margin:4px 0; }
.corr-strike { text-decoration:line-through;color:var(--rose);font-size:13px; }
.corr-fixed  { color:var(--emerald);font-size:13px;font-weight:500; }

.follower-item { display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--border-subtle); }
.follower-item:last-child { border-bottom:none; }

.view-item { display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border-subtle); }

.sort-bar { display:flex;gap:5px;padding:4px 10px 2px;overflow-x:auto;scrollbar-width:none; }
.sort-bar::-webkit-scrollbar { display:none; }
.sort-chip { flex-shrink:0;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:600;border:1px solid var(--border-mid);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;white-space:nowrap; }
.sort-chip.active { background:var(--violet-soft);border-color:var(--border-accent);color:var(--violet-light); }


/* ── PROFILE SPACING FIXES ───────────────────────────────────────────────────*/
.prof-hero { gap: 6px; padding-bottom: 12px; }
.pstats { gap: 20px; }
.badge { min-width: 62px; padding: 10px 10px; }
#page-profile .sh { padding: 14px 12px 8px; }


/* Info rows inside cards */
.view-item { padding: 10px 14px; }
.follower-item { padding: 11px 14px; }

/* User profile fullscreen page back-button area */
.msgs-area{flex:1;overflow-y:auto;padding:12px 12px 8px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.cin-area{flex-shrink:0;display:flex;gap:8px;padding:10px 12px 16px;border-top:1px solid var(--border-subtle);align-items:flex-end;background:var(--bg-void)}
.cwin-head{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border-subtle);background:rgba(10,10,15,.97);backdrop-filter:blur(12px)}

/* Connect cards — full width */


/* ── CHAT BUBBLE WIDTH FIX ───────────────────────────────────────────────────*/

/* ── CONNECT CARD SPACING ────────────────────────────────────────────────────*/






/* ── CONNECT GRID — FULL SPACE ───────────────────────────────────────────────*/







/* ── VERBINDEN LAYOUT ─────────────────────────────────────────────────────────*/
.ugrid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 80px;
}
/* user-card-v2 replaced by uc-card */
/* ── WELCOME SCREEN ─────────────────────────────────────────────────────────*/
#welcome-screen{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:var(--bg-void);padding:20px}
.welcome-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(99,102,241,.25) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(56,189,248,.15) 0%,transparent 60%);pointer-events:none}
.welcome-content{position:relative;z-index:1;width:100%;max-width:400px;text-align:center;animation:fadeIn .6s ease}
.welcome-logo{font-size:64px;margin-bottom:12px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.welcome-title{font-family:var(--font-display);font-size:34px;font-weight:800;background:linear-gradient(135deg,var(--violet-light),var(--azure));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px}
.welcome-sub{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:28px}
.welcome-features{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;text-align:left;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px}
.wf-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary)}
.wf-item span{font-size:18px;width:28px;text-align:center}
.welcome-btn{margin-bottom:10px}

/* ── REG TYPE BUTTONS ────────────────────────────────────────────────────────*/
.reg-type-btn{flex:1;padding:9px;border-radius:var(--radius-sm);border:1px solid var(--border-mid);background:var(--bg-elevated);color:var(--text-secondary);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}
.reg-type-btn.active{background:var(--violet-soft);border-color:var(--border-accent);color:var(--violet-light)}

/* ── STORY FULLSCREEN FIX ───────────────────────────────────────────────────*/
#story-overlay{touch-action:none}
@keyframes heartPop{0%{transform:translate(-50%,-50%) scale(0);opacity:1}60%{transform:translate(-50%,-50%) scale(1.3);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ── MOBILE GLOBAL FIXES ────────────────────────────────────────────────────*/
* { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size:16px !important; } /* prevents iOS zoom */
.fi,.fs,.ft,.cinput { font-size:16px !important; }

/* ── POST CARD IMPROVEMENTS ──────────────────────────────────────────────────*/
.pcard{margin:6px 10px;border-radius:var(--radius-lg)}
.pcard img{max-width:100%;border-radius:10px;display:block}

/* ── POST DETAIL ─────────────────────────────────────────────────────────────*/
#post-detail-overlay .pcard{margin:8px 10px}

/* ── FIX PROFILE FEED SCROLL ─────────────────────────────────────────────────*/
#pfeed{padding-bottom:100px}

/* ── USER PROFILE PAGE BIO SPACING ──────────────────────────────────────────*/
/* ── CHAT WINDOW MOBILE FIX ──────────────────────────────────────────────────*/
.chat-win{left:0;transform:translateY(100%);max-width:100vw}
.chat-win.open{transform:translateY(0) !important}
@media(min-width:521px){.chat-win{left:50%;transform:translateX(-50%) translateY(100%);max-width:520px}.chat-win.open{transform:translateX(-50%) translateY(0) !important}}

/* ── COMPOSE SHEET MOBILE ────────────────────────────────────────────────────*/
.sheet{padding:20px 16px}
@media(max-width:380px){.sheet{padding:16px 14px}}

/* ── FEED MOBILE ─────────────────────────────────────────────────────────────*/
@media(max-width:380px){.pcard{margin:5px 8px}.pfooter .actbtn{padding:5px 7px;font-size:11px}}

/* ── STORY LIKE ANIMATION ───────────────────────────────────────────────────*/
#story-heart-btn{transition:transform .2s var(--ease-spring)}

/* Fix lbadge in profile lang display */
#prof-langs-display .lbadge,
#prof-langs-display > div{
  align-items:center !important;
}

/* ── CHAT BUBBLE ALIGNMENT ───────────────────────────────────────────────────*/
.mrow { display:flex; gap:8px; align-items:flex-end; padding:0 10px; }
.mrow.me { flex-direction:row-reverse; padding:0 10px; }
.mrow .av-sm { margin-top:2px; flex-shrink:0; }
.bubble { max-width:75%; word-break:break-word; word-wrap:break-word; overflow-wrap:break-word; }
.b-me { background:linear-gradient(135deg,var(--violet),#4f46e5); color:#fff; border-radius:18px 5px 18px 18px; padding:10px 14px; }
.b-other { background:var(--bg-card); border:1px solid var(--border-subtle); color:var(--text-primary); border-radius:5px 18px 18px 18px; padding:10px 14px; }

/* ── CHAT ITEM DELETE/FAV BUTTONS ────────────────────────────────────────────*/
.chat-item { position:relative; }
.chat-item button { opacity:0; transition:opacity .2s; }
.chat-item:hover button { opacity:.7; }
.chat-item:active button { opacity:1; }
@media(hover:none){ .chat-item button { opacity:.5 !important; } }

/* ── DELETE NOTIFICATION ─────────────────────────────────────────────────────*/

/* ── GROUP CHAT ───────────────────────────────────────────────────────────────*/
#group-chat-overlay { background:var(--bg-void); }
#gc-msgs { scroll-behavior:smooth; }

/* ── PROFILE LANG ROW ────────────────────────────────────────────────────────*/
#prof-langs-display > div { transition:background .15s; }
#prof-langs-display > div:hover { background:var(--bg-elevated); border-radius:8px; }

/* ── VIEW ITEM ───────────────────────────────────────────────────────────────*/
.view-item { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border-subtle); }
.view-item:last-child { border-bottom:none; }

/* ── BADGES SHEET ─────────────────────────────────────────────────────────────*/
#badges-sheet-content > div { transition:opacity .2s; }

/* ── DELETE NOTIFICATION ─────────────────────────────────────────────────────*/
.del-notif { pointer-events:none; }

/* ════════════════════════════════════════════════════════════════
   VERBINDEN – USER CARDS  (modern, production-ready)
════════════════════════════════════════════════════════════════ */

/* Grid container */



/* ════════════════════════════════════════════════════════════════
   VERBINDEN – HELLOTALK STYLE LIST
════════════════════════════════════════════════════════════════ */

.ugrid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0 90px;
}

/* Card */
.ht-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.ht-card:active { background: var(--bg-elevated); }
@media(hover:hover){ .ht-card:hover { background: var(--bg-card); } }

/* Avatar column */
.ht-av-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  width: 72px;
}
.ht-av {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  position: relative;
  border: 0;
  flex-shrink: 0;
}
.ht-name-flag {
  margin-left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  border: 0;
  box-shadow: none;
}

/* Info column */
.ht-info {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

/* Name row */
.ht-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.ht-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-display);
  line-height: 1.2;
}
.ht-name-group{display:inline-flex;align-items:center;gap:3px;min-width:0;max-width:100%;flex:0 1 auto}
.ht-name-group .ht-name-flag{flex-shrink:0}
#partner-search{margin:10px 0 12px}

/* Language badges */
.ht-langs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ht-lang {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: .3px;
}
.ht-lang.native {
  background: rgba(52,211,153,.15);
  color: #34d399;
  border: 1px solid rgba(52,211,153,.25);
}
.ht-lang.learn {
  background: rgba(56,189,248,.12);
  color: #38bdf8;
  border: 1px solid rgba(56,189,248,.22);
}
.ht-arrow {
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 2px;
}

/* Bio */
.ht-bio {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tags */
.ht-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top:9px;
}
.ht-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.ht-tag.green {
  background: rgba(34,197,94,.08);
  color: #22c55e;
  border-color: rgba(34,197,94,.2);
}
.ht-tag.purple {
  background: rgba(99,102,241,.1);
  color: var(--violet-light);
  border-color: rgba(99,102,241,.2);
}

/* ════════════════════════════════════════════════════════════
   REELS – TikTok / Instagram style
════════════════════════════════════════════════════════════ */
#page-container:has(#page-reels.active) {
  min-height: 0;
  overflow: hidden;
  padding-bottom: var(--nav-h);
}
#page-reels.active { display:flex; flex-direction:column; height:100%; min-height:0; }
#page-reels > .sh { flex-shrink:0; }
#reels-feed {
  flex: 1;
  min-height: 0;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: auto;
  -webkit-overflow-scrolling: touch;
  background: #000;
}
#reels-feed::-webkit-scrollbar { display: none; }
#reels-feed .reel-card { height:100%; }
.reel-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:44px; min-height:44px; padding:4px; border:0; border-radius:22px;
  background:transparent; color:#fff; font:20px var(--font-body); cursor:pointer;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.reel-btn:hover { background:transparent; }
.reel-btn:focus-visible { outline:2px solid var(--violet-light); outline-offset:3px; }
.reel-action-icon{font-size:20px;line-height:1.1}
.reel-action-count{font-size:10px;line-height:1.2}
.reel-filters{display:flex;align-items:center;gap:10px;padding:0 16px 14px;flex-shrink:0;min-width:0}
.reel-filters .fi{flex:1;min-width:0;margin:0}
.reel-filters .level-trigger{width:auto;flex:0 1 44%;min-width:0;margin:0;font-size:12px;min-height:42px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reel-field-help{margin-top:6px;font-size:11px;color:var(--text-muted);line-height:1.4}
.reels-empty{padding:48px 20px;text-align:center;color:var(--text-muted)}
.reel-text{max-height:35%;overflow-y:auto;overflow-wrap:anywhere;pointer-events:auto;line-height:1.5;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.reel-title{font-size:16px;font-weight:700;margin:0 0 4px}
.reel-caption{font-size:13px;white-space:pre-wrap}
.reel-hashtags{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:5px}
.reel-hashtag{padding:0;border:0;background:transparent;color:var(--azure);font:12px var(--font-body);cursor:pointer;overflow-wrap:anywhere}
#create-reel-sheet textarea{resize:vertical}

.reel-card {
  height: calc(100vh - var(--nav-h) - 58px);
  width: 100%;
  position: relative;
  scroll-snap-align: start;
  overflow: hidden;
  background: #000;
}
.reel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.7) 0%,
    rgba(0,0,0,.1) 40%,
    rgba(0,0,0,.05) 60%,
    rgba(0,0,0,.2) 100%
  );
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 76px 32px 16px;
}
.reel-user { display:flex; align-items:center; gap:9px; cursor:pointer; pointer-events:auto; }
.reel-actions {
  position: absolute;
  right: 6px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  z-index: 2;
}

@media(max-height:500px){
  .reel-actions{flex-direction:row;bottom:8px;right:8px;gap:2px}
  .reel-overlay{padding:8px 208px 12px 12px;gap:5px}
  .reel-text{max-height:50%}
}

/* Profile tabs */
.prof-tabs {
  display: flex;
  background: var(--bg-void);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 5;
}
.prof-tab {
  flex: 1;
  padding: 11px 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  font-family: var(--font-body);
}
.prof-tab.active {
  color: var(--violet-light);
  border-bottom-color: var(--violet);
}
.prof-tab-content { display: none; }
.prof-tab-content.active { display: block; overflow-y: auto; padding-bottom: 80px; }

/* Prof cards */
.prof-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.prof-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.prof-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.prof-card-action {
  font-size: 12px;
  color: var(--violet-light);
  background: var(--violet-soft);
  border: none;
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
}
.sbg.selected { outline: 2px solid white; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Viewport and display cutouts on Android and mobile browsers. */
#app{height:100dvh;padding-top:env(safe-area-inset-top);box-sizing:border-box}
#bottom-nav{height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
#page-container{padding-bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom))}
#cwin{height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}
.reels-more{height:100%;min-height:140px;border-radius:0;scroll-snap-align:start;scroll-snap-stop:always;margin:0}
.profile-reels-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px}
.profile-reel{aspect-ratio:9/16;border:0;padding:0;background:var(--bg-elevated);border-radius:8px;overflow:hidden;cursor:pointer;position:relative}
.profile-reel video,.profile-reel img{width:100%;height:100%;object-fit:cover}
.profile-reel-views{position:absolute;bottom:6px;left:6px;display:flex;align-items:center;gap:4px;font-size:12px;color:#fff;text-shadow:0 1px 4px #000}
.profile-reel-views svg{width:14px;height:14px;flex-shrink:0;filter:drop-shadow(0 1px 2px #000)}
.empty-state{padding:24px;text-align:center;color:var(--text-muted)}
.correction-header{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.correction-header b{flex:1;min-width:0;overflow-wrap:anywhere}
.correction-note{font-size:12px;color:var(--text-muted);font-style:italic;white-space:pre-wrap}
.story-text{padding:60px 24px;text-align:center;font-size:22px;font-weight:800;color:#fff;line-height:1.5;font-family:var(--font-display);white-space:pre-wrap;overflow-wrap:anywhere;max-height:100%;overflow-y:auto}
#story-reply::placeholder{color:rgba(255,255,255,.8);opacity:1}
.ptext,.corr-strike,.corr-fixed,.reel-caption{overflow-wrap:anywhere;white-space:pre-wrap}

/* Dialogs and full-screen chat use the actual Android viewport and safe areas. */
.sheet{max-height:calc(100dvh - 24px - env(safe-area-inset-top));overflow-y:auto;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.modal-box{max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
#group-chat-overlay,#room-chat-overlay,#post-detail-overlay{height:100dvh!important;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}
#story-overlay{height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}
#gc-msgs,#room-msgs,#msgs-area{min-height:0;overflow-wrap:anywhere}
#room-msg-input{min-width:0}
.story-control{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:40px;min-height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font:18px var(--font-body);cursor:pointer}
button:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--violet-light);outline-offset:3px}

/* Profile relationship lists leave the page behind them visible. */
.social-list-overlay{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.social-person{width:100%;background:transparent;border:0;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);text-align:left;cursor:pointer;font:inherit}
.social-person-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.profile-hint,.last-online{font-size:11px;color:var(--text-muted);margin-top:4px}
.online-dot{width:8px;height:8px;flex-shrink:0;background:var(--emerald);border-radius:50%}
.chat-item{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#message-actions-menu,#chat-actions-menu{z-index:1100}

.social-person-languages{display:flex;flex-wrap:wrap;gap:3px}
.follow-person-row{cursor:default;gap:12px}
.follow-person-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0;background:transparent;border:0;color:inherit;text-align:left;font:inherit;cursor:pointer;min-height:44px}
.follow-person-title{display:flex;align-items:center;gap:6px;min-width:0}
.follow-person-title strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.follow-person-title .profile-age{flex-shrink:0;white-space:nowrap;padding:2px 7px}
.follow-list-action{flex:0 1 auto;max-width:42%;min-height:36px;padding:8px 10px;margin:0;font-size:11px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}

/* Message context stays readable on small screens; scrolling keeps working. */
.cinput,#message-actions-menu .sheet,#chat-actions-menu .sheet{scrollbar-width:none;-ms-overflow-style:none}
.cinput::-webkit-scrollbar,#message-actions-menu .sheet::-webkit-scrollbar,#chat-actions-menu .sheet::-webkit-scrollbar{display:none}
.chat-reply-preview{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--border-subtle);background:var(--bg-card);flex-shrink:0}
.chat-reply-preview[hidden]{display:none}
.chat-reply-preview>div{flex:1;min-width:0;font-size:12px;border-left:3px solid var(--emerald);padding-left:9px}
.chat-reply-preview strong,.chat-reply-quote strong{display:block;color:var(--emerald);font-size:12px}
#chat-reply-text{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-reply-quote{border-left:3px solid var(--emerald);background:rgba(0,0,0,.12);padding:7px 9px;margin-bottom:8px;border-radius:4px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:120px;overflow:auto}
.chat-correction-label{font-size:11px;color:var(--text-secondary);margin-bottom:5px}
.chat-correction-original,.chat-correction-text,.chat-correction-note,.chat-correction-unavailable{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-correction-original,.chat-correction-unavailable{color:var(--text-secondary)}
.chat-correction-text{color:var(--emerald);margin-top:5px}
.chat-correction-note{font-size:12px;margin-top:7px;color:var(--text-secondary)}

/* Profile highlights and independent learning levels. */
.profile-highlights{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:0 12px 14px}
.profile-highlights.is-public{grid-template-columns:1fr}
.profile-highlight{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:15px;border:1px solid var(--border-mid);border-radius:18px;text-align:left;color:var(--text-primary);font:inherit;overflow:hidden}
.profile-highlight[hidden]{display:none}
.streak-highlight{background:linear-gradient(135deg,rgba(52,211,153,.13),var(--bg-card));border-color:rgba(52,211,153,.22)}
.views-highlight{background:linear-gradient(135deg,rgba(129,140,248,.16),var(--bg-card));border-color:rgba(129,140,248,.23);cursor:pointer;transition:border-color .2s}
.views-highlight:hover{border-color:var(--violet-light)}
.highlight-heading{display:flex;align-items:center;justify-content:space-between;width:100%;gap:5px;font-size:12px;font-weight:600;color:var(--text-secondary)}
.highlight-heading svg{width:22px;height:22px;flex-shrink:0;color:var(--emerald)}
.views-highlight .highlight-heading svg{color:var(--violet-light)}
.highlight-heading>span{min-width:0;overflow-wrap:anywhere}

.highlight-number{display:block;font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1.2;margin:9px 0 4px}
.streak-highlight .highlight-number{color:var(--emerald)}
.highlight-description{font-size:11px;color:var(--text-secondary)}
.highlight-footnote{margin-top:auto;padding-top:10px;font-size:10px;color:var(--text-muted)}
.visitor-preview{display:flex;min-height:32px;margin:5px 0 7px;padding-left:3px}
.visitor-preview:empty{display:none}
.visitor-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;margin-left:-3px;border:2px solid var(--bg-card);border-radius:50%;background:var(--violet);color:white;font-size:12px;font-weight:600;overflow:hidden}
.visitor-avatar img{width:100%;height:100%;object-fit:cover}
.profile-bio,.profile-goal-text{font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.profile-bio.is-placeholder{color:var(--text-muted)}
.profile-goal-text{margin-top:10px}
.profile-goals{display:flex;gap:6px;flex-wrap:wrap}
.goal-tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:500;border:1px solid var(--border-mid);background:var(--bg-elevated);color:var(--text-secondary)}
.goal-learning{background:rgba(52,211,153,.09);border-color:rgba(52,211,153,.22);color:var(--emerald)}
.goal-friendship{background:rgba(56,189,248,.09);border-color:rgba(56,189,248,.22);color:var(--azure)}
.purpose-options{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.purpose-option{display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--bg-elevated);border:1px solid var(--border-mid);border-radius:12px;cursor:pointer;font-size:12px;color:var(--text-secondary)}
.purpose-option:has(input:checked){border-color:var(--violet-light);color:var(--text-primary);background:var(--violet-soft)}
.purpose-option input{accent-color:var(--violet);width:16px;height:16px}
.purpose-text{min-height:82px;resize:vertical}
.field-hint,.level-system-hint{display:block;font-size:11px;color:var(--text-muted);line-height:1.5;margin:4px 0 8px}
.learning-language-row{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid var(--border-subtle);min-width:0}
.learning-language-row>div{flex:1;min-width:0}
.learning-language-row label{display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.learning-language-row .level-system-hint{font-size:10px;margin:3px 0 0}
.learning-language-row select{max-width:52%;min-width:0;flex:1;font-size:12px;padding:8px}
.language-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;min-width:0;padding:12px 14px;border:1px solid var(--border-mid);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text-primary);font:inherit;font-size:14px;line-height:1.4;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.language-trigger::after{content:'';width:8px;height:8px;border-right:2px solid var(--violet-light);border-bottom:2px solid var(--violet-light);transform:rotate(45deg);flex-shrink:0;margin:0 3px 4px}
.language-trigger:hover{background:var(--bg-hover);border-color:var(--border-accent)}
.language-trigger:focus-visible,.language-picker-sheet button:focus-visible,.language-picker-option:focus-within{outline:2px solid var(--azure);outline-offset:3px}
.learning-language-row .level-trigger{flex:1;max-width:55%;font-size:12px;padding:9px 10px}
.lang-tags .rx{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:2px 4px;min-width:24px;min-height:24px}
.language-picker-overlay{z-index:1400;background:rgba(10,10,15,.35);backdrop-filter:blur(4px);overscroll-behavior:contain}
.language-picker-overlay.transparent-picker{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.transparent-picker .language-picker-header h2{background:transparent}
.password-field{position:relative;width:100%;min-width:0}
.password-field>input{width:100%;padding-inline-end:48px}
.password-visibility{position:absolute;inset-inline-end:2px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--text-secondary);cursor:pointer}
.password-visibility:hover,.password-visibility[aria-pressed="true"]{color:var(--violet-light)}
.password-visibility:focus-visible{outline:2px solid var(--violet);outline-offset:-3px}
.language-picker-sheet{display:flex;flex-direction:column;padding:0;max-height:min(86vh,720px);max-height:min(86dvh,720px);overflow:hidden;border-color:var(--border-accent);box-shadow:0 -10px 60px rgba(0,0,0,.24)}
.language-picker-header{flex-shrink:0;padding:18px 20px 12px;border-bottom:1px solid var(--border-subtle)}
.language-picker-header .sheet-handle{margin-bottom:16px}
.language-picker-header h2{font-family:var(--font-display);font-size:21px;line-height:1.25;overflow-wrap:anywhere}
.language-picker-description{font-size:12px;color:var(--text-secondary);line-height:1.5;margin:7px 0 14px}
.language-picker-search .fi{width:100%;min-height:46px;border-radius:var(--radius-md);font-size:16px}
.language-picker-search .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}
.language-picker-sort{display:flex;gap:6px;padding:5px;margin-top:12px;background:var(--bg-deep);border-radius:12px}
.language-picker-sort button{flex:1;border:0;border-radius:9px;background:transparent;color:var(--text-secondary);font:inherit;font-size:13px;font-weight:600;min-height:36px;cursor:pointer}
.language-picker-sort button[aria-pressed="true"]{background:var(--violet-soft);color:var(--violet-light);box-shadow:inset 0 0 0 1px var(--border-accent)}
.language-picker-selected{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;max-height:86px;overflow:auto}
.language-picker-chip{border:1px solid var(--border-accent);border-radius:999px;background:var(--violet-soft);color:var(--text-primary);font:inherit;font-size:11px;padding:6px 10px;cursor:pointer;overflow-wrap:anywhere}
.language-picker-list{flex:1;min-height:0;overflow-y:auto;padding:8px 12px;overscroll-behavior:contain;touch-action:pan-y}
.language-picker-option{display:flex;align-items:center;gap:12px;min-height:54px;padding:12px;border-radius:12px;cursor:pointer;border:1px solid transparent;color:var(--text-primary);font-size:14px;margin:2px 0}
.language-picker-option:hover{background:var(--bg-hover)}
.language-picker-option.is-selected{background:var(--violet-soft);border-color:var(--border-accent)}
.language-picker-option:has(input:disabled){opacity:.4;cursor:default}
.language-picker-flag{font-size:21px;width:28px;flex-shrink:0;text-align:center}
.language-picker-name{flex:1;min-width:0;overflow-wrap:anywhere}
.language-picker-rank{font-size:10px;font-weight:700;padding:4px 7px;border-radius:7px;background:var(--bg-elevated);color:var(--violet-light);flex-shrink:0}
.language-picker-option input{appearance:none;-webkit-appearance:none;position:relative;width:20px;height:20px;flex-shrink:0;border:1px solid var(--text-muted);border-radius:6px;background:var(--bg-deep);cursor:inherit}
.language-picker-option input:checked{background:var(--violet);border-color:var(--violet)}
.language-picker-option input:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border-right:2px solid white;border-bottom:2px solid white;transform:rotate(45deg)}
.language-picker-option input[type="radio"]{border-radius:50%}
.language-picker-option input[type="radio"]:checked::after{left:5px;top:5px;width:8px;height:8px;border:0;border-radius:50%;background:white;transform:none}
.language-picker-footer{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border-subtle);background:var(--bg-surface)}
.language-picker-status{flex:1;font-size:11px;line-height:1.5;color:var(--text-secondary);overflow-wrap:anywhere}
.language-picker-done{min-width:92px;min-height:44px}
.language-picker-empty{padding:28px 12px;text-align:center;color:var(--text-secondary);font-size:13px}
@media(min-width:640px){.language-picker-overlay{align-items:center;padding:24px}.language-picker-sheet{border-radius:24px;width:min(100%,480px);max-height:min(86dvh,720px)}.language-picker-header .sheet-handle{display:none}}
@media(max-height:520px){.language-picker-sheet{max-height:94dvh}.language-picker-header{padding:10px 16px 8px}.language-picker-header .sheet-handle{display:none}.language-picker-header h2{font-size:17px}.language-picker-description{margin:4px 0 7px}.language-picker-sort{margin-top:7px}.language-picker-selected{max-height:38px;margin-top:6px}.language-picker-footer{padding:8px 16px}.language-picker-option{min-height:46px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.language-picker-sheet{animation:none}}
.language-remove{background:none;border:none;color:var(--text-muted);font-size:22px;padding:4px;cursor:pointer;flex-shrink:0}
.language-edit-actions{display:flex;gap:8px}
.language-edit-actions{margin-top:16px}
.language-edit-actions .btn{flex:1}
.profile-view-row{width:100%;text-align:left;border:none;background:transparent;color:var(--text-primary);font:inherit;cursor:pointer}
@media(min-width:768px){.profile-highlights{gap:14px}.profile-highlight{padding:20px}.highlight-number{font-size:38px}}


/* Consistent profile sections, personal cover and language-exchange cards. */
#prof-tab-profile.active{display:flex;flex-direction:column;gap:12px;padding:8px 12px 96px}
#prof-tab-profile .profile-section{min-width:0}
#prof-tab-profile .prof-card{margin:0}
.profile-help-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.help-card{min-width:0}
.help-card.help-teach{background:linear-gradient(135deg,rgba(52,211,153,.07),var(--bg-card));border-color:rgba(52,211,153,.18)}
.help-card.help-learn{background:linear-gradient(135deg,rgba(56,189,248,.08),var(--bg-card));border-color:rgba(56,189,248,.18)}
.help-eyebrow{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;margin-bottom:7px;color:var(--emerald)}
.help-learn .help-eyebrow{color:var(--azure)}
.help-card .prof-card-header{align-items:flex-start;gap:10px}
.help-card-title{font-size:14px;font-weight:600;line-height:1.5;margin:0;color:var(--text-primary);overflow-wrap:anywhere}
.help-card .prof-card-action{flex-shrink:0;margin-top:2px}
.prof-banner{height:auto;aspect-ratio:3/1;min-height:100px;max-height:180px}
.prof-banner::after{pointer-events:none}
.prof-banner.has-cover::after{background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.22))}
.profile-cover-image{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.profile-cover-edit{position:absolute;top:12px;right:12px;z-index:2;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 12px;font:inherit;font-size:11px;font-weight:600;color:white;background:rgba(15,15,24,.64);cursor:pointer}
.profile-cover-edit[hidden]{display:none}
.cover-preview{width:100%;aspect-ratio:3/1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:14px;border:1px solid var(--border-mid);background:linear-gradient(135deg,var(--violet-soft),var(--bg-elevated));margin:6px 0 14px;color:var(--text-muted);font-size:12px}
.cover-preview img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.cover-position-field{margin-top:14px}
.cover-position-field input{width:100%;accent-color:var(--violet);margin:8px 0}
.cover-remove{display:block;margin:16px auto 0;border:none;background:transparent;color:var(--text-secondary);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;padding:8px}
@media(min-width:521px){.profile-help-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.help-card .prof-card-header{flex-direction:column;gap:6px}}


/* Avoid reflow animations and clipped multi-line status messages. */
.icon-btn{transition:background-color .2s,color .2s,border-color .2s}
.nav-tab{transition:background-color .2s,color .2s}
.fi,.fs,.ft{transition:border-color .2s,box-shadow .2s,background-color .2s}
.btn,.actbtn,.cact,.rec-btn,.fchip,.reg-type-btn{transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s var(--ease-smooth)}
.toast{white-space:normal;overflow-wrap:anywhere;width:max-content;max-width:min(460px,calc(100vw - 24px));border-radius:18px;transition:opacity .2s,transform .2s var(--ease-smooth)}
.cname,.cwin-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwin-info{min-width:0}
.cwin-head .cwin-back,.cwin-head>button{flex-shrink:0}
.ht-name{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pname,.sheet-title{overflow-wrap:anywhere}
.ht-tag{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* Post comments and profile stories */
.comment-entry{display:flex;gap:8px;padding:10px 0;border-bottom:1px solid var(--border-subtle);touch-action:pan-y;-webkit-touch-callout:none}
.comment-action-target{-webkit-user-select:none;user-select:none}
.comment-main{flex:1;min-width:0}.comment-header{display:flex;align-items:baseline;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.comment-text-row{display:flex;align-items:center;gap:8px;min-width:0}
.comment-text-row .comment-content{flex:1;min-width:0}
.comment-author{font-size:13px;font-weight:600;overflow-wrap:anywhere}.comment-time{font-size:11px;color:var(--text-muted)}
.comment-content{font-size:13px;color:var(--text-secondary);line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.comment-content textarea{-webkit-user-select:text;user-select:text}.comment-pinned{font-size:11px;color:var(--emerald);margin-left:auto}
.comment-correction{margin-top:8px;padding:10px;background:var(--bg-elevated);border-radius:10px;font-size:13px;overflow-wrap:anywhere}
.comment-correction-author{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}.comment-correction-author>span{flex:1;min-width:0;overflow-wrap:anywhere}
.comment-correction del,.comment-correction ins{display:block;white-space:pre-wrap}.comment-correction del{color:var(--rose)}.comment-correction ins{color:var(--emerald);text-decoration:none}
.comment-correction p{margin:6px 0 0;color:var(--text-muted)}.comment-correction-original{padding:12px;margin-bottom:12px;border-radius:10px;background:var(--bg-elevated);color:var(--rose);overflow-wrap:anywhere}
.post-image-error{text-align:center;padding:20px;color:var(--text-muted)}.post-image-error[hidden]{display:none}
#story-overlay .story-control,#story-overlay .btn{font-size:11px;flex-shrink:0}#story-overlay .story-control{min-width:32px}
.icon-btn[hidden],.notification-count[hidden],.notification-unread[hidden],.profile-story-ring[hidden]{display:none}
.notification-bell svg{width:20px;height:20px}.notification-count{position:absolute;right:-6px;top:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:10px;background:var(--rose);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center}
.feed-filters{display:flex;gap:7px;padding:8px 14px 14px;overflow-x:auto;scrollbar-width:none}.feed-filters::-webkit-scrollbar{display:none}
.feed-filters button{flex-shrink:0;padding:7px 12px;border:1px solid var(--border-subtle);border-radius:20px;background:var(--bg-elevated);color:var(--text-secondary);font:inherit;font-size:12px;cursor:pointer}
.feed-filters button:first-child{margin-left:auto}.feed-filters button:last-child{margin-right:auto}
.feed-filters button.active{background:rgba(99,102,241,.16);border-color:var(--violet);color:var(--violet-light)}
.prof-av-wrap #pav{position:relative;z-index:1}.profile-story-ring{position:absolute;inset:-7px;border:3px solid var(--violet);border-right-color:var(--azure);border-bottom-color:var(--azure);border-radius:50%;background:transparent;cursor:pointer;padding:0;z-index:0}
.profile-story-ring:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px}
.story-touch-surface{position:absolute;inset:0 0 80px;display:flex;z-index:1;touch-action:none;-webkit-user-select:none;user-select:none}
.story-tap-zone{width:33.333%;height:100%;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}
.story-tap-zone:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:-5px}
.avatar-change-preview{width:90px;height:90px;border-radius:50%;margin:12px auto;display:flex;align-items:center;justify-content:center;font-size:36px;border:3px solid var(--bg-elevated);overflow:hidden}
.notification-toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.notification-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 8px;border:0;border-bottom:1px solid var(--border-subtle);border-radius:8px;background:transparent;color:var(--text-secondary);font:inherit;font-size:13px;cursor:pointer}
.notification-row.unread{background:rgba(99,102,241,.08)}.notification-copy{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.5}.notification-copy strong{color:var(--text-primary)}.notification-copy time{display:block;font-size:11px;color:var(--text-muted);margin-top:3px}
.notification-unread{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--violet-light)}
.edit-post-preview{margin:12px 0;border-radius:12px;overflow:hidden}.edit-post-preview[hidden]{display:none}.edit-post-preview img{display:block;max-height:220px;width:100%;object-fit:cover}

.story-add-badge{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border:2px solid var(--bg-surface);border-radius:50%;background:var(--violet);color:white;font-size:18px;line-height:16px;text-align:center;pointer-events:none}
.profile-age{font-size:11px;font-weight:700;color:var(--age-color);background:color-mix(in srgb,var(--age-color) 13%,transparent);border:1px solid color-mix(in srgb,var(--age-color) 28%,transparent);padding:2px 9px;border-radius:999px}
.post-menu-trigger{width:36px;height:36px;flex-shrink:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-muted);font-size:24px;cursor:pointer}
.post-menu-trigger:focus-visible{outline:2px solid var(--violet-light);outline-offset:2px}

/* Comment replies remain flat, including at small phone widths. */
.comment-reply-preview{display:flex;gap:10px;align-items:center;margin:8px 12px 8px;padding:9px 12px;border-left:3px solid var(--violet-light);background:var(--bg-elevated);border-radius:8px;font-size:12px}
.comment-reply-preview[hidden]{display:none}
.comment-reply-preview>div{flex:1;min-width:0}
.comment-reply-preview strong,.comment-reply-quote strong{display:block;color:var(--violet-light);font-size:11px;margin-bottom:3px}
.comment-reply-preview span,.comment-reply-quote span{display:block;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-muted)}
.comment-reply-preview span{max-height:48px;overflow:hidden}
.comment-reply-preview button{display:flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border:0;background:transparent;color:var(--text-primary);font:22px var(--font-body);padding:0;cursor:pointer}
.comment-reply-quote{border-left:2px solid var(--violet-light);padding:6px 9px;margin:5px 0 7px;background:var(--bg-elevated);border-radius:5px;font-size:12px;overflow-wrap:anywhere}
.comment-reply-unavailable{color:var(--text-muted);font-style:italic}

.chat-rules{align-self:stretch;padding:16px;margin:8px 0 16px;background:var(--bg-card,#171b2b);border:1px solid rgba(96,165,250,.24);border-radius:16px;color:var(--text);font-size:13px;line-height:1.6}
.chat-rules h3{font-size:16px;margin:0 0 8px}.chat-rules ul{margin:0;padding-left:20px}.chat-rules li+li{margin-top:5px}
.chat-rules-image{display:block;width:100%;max-width:320px;height:auto;object-fit:contain;margin:0 auto 14px;border-radius:10px}
.chat-image-preview{width:min(220px,100%);overflow:hidden;border-radius:12px;cursor:pointer}
.chat-image-preview img{width:100%;height:auto;display:block;border-radius:12px}
.chat-image-preview:focus-visible{outline:2px solid var(--violet-light);outline-offset:2px}
.video-player{width:100%;min-width:0;margin:6px 0;overflow:hidden;border-radius:12px;background:transparent;border:0;box-shadow:none}
.bubble .video-player{width:min(240px,100%)}
.video-player video{display:block;width:100%;max-height:240px;object-fit:contain;background:transparent;cursor:pointer}
.video-controls{padding:8px;display:grid;gap:6px}
.video-control-row{display:flex;gap:7px;align-items:center;min-width:0}
.video-controls button{flex:none;min-height:32px;padding:4px 8px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-elevated);color:var(--text-primary);font:inherit;font-size:11px;cursor:pointer}
.video-controls input[type=range]{flex:1;width:0;min-width:25px;accent-color:var(--violet-light);height:28px;margin:0;cursor:pointer;touch-action:pan-x}
.video-controls input:disabled{opacity:.35;cursor:default}
.video-time{flex:none;color:var(--text-secondary);font-size:11px;font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
.video-viewer-overlay{align-items:center;padding:12px;background:rgba(0,0,0,.94);z-index:1500}
.video-viewer-dialog{width:min(100%,1000px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;min-width:0}
.video-player-enlarged{margin:0;display:flex;flex-direction:column;max-height:inherit}
.video-player-enlarged video{max-height:calc(100dvh - 130px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0;flex:1;object-fit:contain}
.video-player-enlarged .video-controls{flex:none;padding:10px 12px}
.video-player-enlarged .video-controls button{font-size:13px;min-height:38px}
.video-player-enlarged .video-controls input[type=range]{min-height:34px}
.video-player video:focus-visible,.video-controls button:focus-visible{outline:2px solid var(--violet-light);outline-offset:-2px}
.e2ee-dialog{display:flex!important;position:fixed;inset:0;z-index:10000;background:rgba(8,12,24,.85);align-items:center;justify-content:center;padding:16px}.e2ee-dialog .sheet{max-height:90dvh;overflow:auto;transform:none!important;width:min(100%,480px);border-radius:20px;padding:24px;background:var(--bg-card,#171b2b)}
.e2ee-code{display:block;width:100%;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;min-height:85px;box-sizing:border-box;background:var(--bg-input,#0b1020);color:var(--text,#fff);border:1px solid #526480;border-radius:10px;padding:12px;font-family:monospace;font-size:15px;margin:16px 0}.e2ee-error{color:#fb7185}.e2ee-dialog p{line-height:1.6}.e2ee-dialog button+button{margin-top:10px}.chat-security-button{border:0;padding:0;background:transparent;color:#60a5fa;font-size:11px;cursor:pointer}

/* Only the avatar opens an author profile. Image dialogs retain the full image. */
.post-author-avatar{display:block;flex:0 0 auto;border:0;border-radius:50%;padding:0;background:transparent;cursor:pointer}
.profile-view-name{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.profile-view-name .profile-age{font-size:12px;white-space:nowrap}
.image-viewer-overlay{z-index:1100;background:var(--bg-void);backdrop-filter:none;-webkit-backdrop-filter:none;align-items:stretch}
.image-viewer-dialog{display:flex;flex-direction:column;width:100%;max-width:1280px;height:100dvh;min-width:0;min-height:0;margin:auto;box-sizing:border-box;padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.image-viewer-stage{position:relative;flex:1;min-height:0;min-width:0;overflow:hidden;overscroll-behavior:contain;touch-action:none;cursor:zoom-in}
.image-viewer-stage>img{position:absolute;display:block;object-fit:contain;max-width:none;max-height:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
.image-viewer-stage.is-zoomed{cursor:grab}
.image-viewer-stage.is-zoomed:active{cursor:grabbing}
#post-detail-overlay.post-detail-open{display:flex!important;flex-direction:column;overflow:hidden!important}
.post-detail-toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;background:var(--bg-void)}
#post-detail-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.image-viewer-error{position:absolute;inset:0;align-content:center}
/* Private conversation controls stay usable on narrow phones and in landscape. */
.cwin-info{min-width:0}
.cwin-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-options-button{flex-shrink:0;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--text-primary);font-size:28px;cursor:pointer}
.chat-options-button:focus-visible,.message-retry:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.message-delivery.failed{color:var(--rose)}
.message-retry{margin-top:4px;padding:6px 10px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-elevated);color:var(--text-primary);font:inherit;font-size:12px;cursor:pointer}
#chat-media-sheet .sheet{overflow-y:auto;max-height:85dvh}
.chat-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 0}
.chat-media-item{margin:0;min-width:0;overflow:hidden}
.chat-media-item button{display:block;width:100%;border:0;padding:0;background:transparent;cursor:pointer}
.chat-media-item img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.chat-media-item video,.chat-media-item audio{display:block;width:100%;max-width:100%;border-radius:12px}
.chat-media-item:has(audio){grid-column:1/-1}
.chat-media-item figcaption{font-size:12px;color:var(--text-secondary);overflow-wrap:anywhere;padding-top:6px}
@media(min-width:600px){.chat-media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Chat and comment interaction polish */
.bubble.image-message{background:transparent;border:0;padding:0;box-shadow:none}
.profile-menu-item.danger,.profile-menu-item.danger .label,.message-menu-option,.btn-s{color:var(--text-primary)!important}
.comment-heart{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:0 0 32px;min-height:36px;min-width:32px;padding:0;margin-top:0;background:transparent;border:0;color:var(--text-primary);cursor:pointer}
.comment-heart>span:first-child,.post-like-button>span:first-child{display:inline-flex;align-items:center;justify-content:center;flex:0 0 19px;width:19px}
.comment-heart-count,.post-like-count{font-variant-numeric:tabular-nums;display:inline-block;min-width:4ch;text-align:left}
.comment-heart-count{min-width:2ch;text-align:center;font-size:10px;line-height:1.1;min-height:11px}
.pfooter .actbtn{padding:6px 4px;gap:3px}
.pfooter .post-like-button{flex:0 0 48px;width:48px;transform:none}
.pfooter .post-like-button>span:first-child{flex:0 0 16px;width:16px}
.pfooter .post-like-count{flex:0 1 auto;min-width:0;text-align:left;font-size:11px}
.pfooter .post-comment-button>span:first-child{display:inline-flex;align-items:center;justify-content:center;flex:0 0 14px;width:14px}
.pfooter .post-comment-button>span:last-child{font-size:11px}

/* Connect preferences and private saved profiles. */
.connect-filter-button{padding:7px 12px;border-radius:12px;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);font:inherit;font-size:12px;cursor:pointer}
.connect-filter-button.active{border-color:var(--violet);color:var(--azure)}
#connect-saved-tab{font-family:var(--font-body)}
.connect-card-controls{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 40px}
.connect-save-button{width:40px;height:36px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:10px}
.connect-bookmark-icon{display:block;width:19px;height:21px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h12v17l-6-4-6 4z' fill='none' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h12v17l-6-4-6 4z' fill='none' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.connect-save-button.saved{color:var(--azure)}
.connect-save-button.saved .connect-bookmark-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h12v17l-6-4-6 4z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h12v17l-6-4-6 4z' fill='white'/%3E%3C/svg%3E")}
.connect-save-button:disabled{opacity:.5;cursor:wait}
.connect-save-button:focus-visible,.connect-filter-button:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
.connect-preferences{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}
.connect-goal,.connect-conversation{padding:3px 7px;border:1px solid var(--border-subtle);border-radius:8px;font-size:10px;color:var(--text-secondary);overflow-wrap:anywhere;max-width:100%}
.connect-goal{color:var(--azure);background:rgba(59,130,246,.07)}
.connect-goal-text{font-size:11px;color:var(--text-secondary);line-height:1.5;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 7px}
.connect-empty{padding:36px 16px;text-align:center;color:var(--text-muted);font-size:13px}
#connect-load-more{margin:12px 0}
#connect-filters-sheet .sheet{max-height:85dvh;overflow-y:auto;overscroll-behavior:contain}
.connect-filter-group{border:0;padding:0;min-width:0;margin:16px 0}
.connect-filter-group legend{font-size:13px;font-weight:600;margin-bottom:9px;color:var(--text-primary)}
.connect-filter-choices{display:flex;flex-wrap:wrap;gap:7px}
.connect-filter-choices .purpose-option{min-width:0;max-width:100%}
.connect-filter-choices .purpose-option span{overflow-wrap:anywhere}
.connect-timezone-option{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-secondary);line-height:1.5;margin:14px 0 8px}
.connect-timezone-option input{flex-shrink:0;accent-color:var(--violet);width:17px;height:17px}
.connect-timezone-option:has(input:disabled){opacity:.55}
.profile-conversation{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:12px;color:var(--text-secondary)}
.chat-typing{padding:0 13px 10px;flex-shrink:0}
.chat-typing .message-stack{min-width:0;flex:1}
.chat-typing .bubble{width:fit-content;max-width:none}
.chat-typing-dots{display:flex;align-items:center;gap:4px;min-height:20px}
.chat-typing-dots>span{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--text-secondary);animation:typingPulse 1.1s infinite}
.chat-typing-dots>span:nth-child(2){animation-delay:.15s}.chat-typing-dots>span:nth-child(3){animation-delay:.3s}
@keyframes typingPulse{0%,70%,100%{opacity:.4;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.chat-typing-dots>span{animation:none;opacity:.8}}

/* Optional, user-written notes stay attached to their native language. */
.native-dialect-editor:empty{display:none}
.native-dialect-editor{margin-top:10px;min-width:0}
.native-dialect-field{margin-top:10px;min-width:0}
.native-dialect-field .fi{width:100%;min-width:0;font-size:16px}
.native-dialect-note{font-size:11px;line-height:1.4;color:var(--text-secondary);margin-top:3px;overflow-wrap:anywhere;white-space:normal;max-width:100%}
.native-language-summary{display:inline-flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%;vertical-align:top}
.ht-langs{align-items:flex-start}
.ht-langs .native-dialect-note{max-width:180px}

/* Microphone: elapsed time left, live amplitude centre, controls right. */
.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}
.chat-recording-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;min-height:56px;background:var(--bg-void);border-top:1px solid var(--border-subtle);flex-shrink:0}
.chat-recording-bar[hidden]{display:none}
.chat-recording-time{font-family:var(--font-mono);font-size:13px;min-width:38px;color:var(--text-primary);font-variant-numeric:tabular-nums;flex-shrink:0}
.chat-recording-waveform{display:flex;align-items:center;justify-content:center;gap:3px;height:34px;flex:1;min-width:0;overflow:hidden}
.chat-recording-waveform span{display:block;width:3px;min-width:2px;height:3px;max-height:32px;flex-shrink:1;border-radius:3px;background:var(--violet-light);transition:height 60ms linear}
.chat-recording-bar.paused .chat-recording-waveform{opacity:.45}
.chat-recording-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.chat-recording-action{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--text-primary);cursor:pointer;touch-action:manipulation}
.chat-recording-action:hover{background:var(--bg-elevated)}
.chat-recording-action:focus-visible,.rec-btn:focus-visible{outline:2px solid var(--violet-light);outline-offset:2px}
.rec-btn:disabled{opacity:.5;cursor:wait}
.rec-btn{color:var(--text-primary)}

/* Media players and their media-only wrappers have no frame or background. */
.bubble:has(> .voice-player),.bubble:has(> .video-player),.audio-msg:has(> .voice-player){background:transparent;border:0;box-shadow:none}
.voice-player{--audio-progress:0%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:8px;width:min(270px,60vw);max-width:100%;min-width:0;box-sizing:border-box;padding:0;border-radius:0;background:transparent;color:var(--text-primary);border:0;box-shadow:none}
.voice-player audio{display:none}
.audio-msg .voice-player{width:100%}
.voice-player button{display:flex;align-items:center;justify-content:center;flex-shrink:0;border:0;cursor:pointer;touch-action:manipulation;color:var(--text-primary)}
.voice-play{width:38px;height:38px;padding:0;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--azure))}
.voice-play-icon{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid white;margin-left:3px}
.voice-play.is-playing .voice-play-icon{width:11px;height:14px;border:0;margin:0;display:flex;justify-content:space-between}
.voice-play.is-playing .voice-play-icon::before,.voice-play.is-playing .voice-play-icon::after{content:'';width:4px;height:14px;border-radius:1px;background:white}
.voice-seek{min-width:0;display:block;appearance:none;-webkit-appearance:none;width:100%;height:24px;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:pan-x}
.voice-seek::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--violet-light) 0 var(--audio-progress),var(--border-mid) var(--audio-progress) 100%)}
.voice-seek::-moz-range-track{height:4px;border-radius:4px;background:var(--border-mid)}
.voice-seek::-moz-range-progress{height:4px;border-radius:4px;background:var(--violet-light)}
.voice-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border:0;border-radius:50%;background:var(--violet-light);margin-top:-4px}
.voice-seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--violet-light)}
.voice-seek:disabled{cursor:default;opacity:.55}
.voice-time-row{display:flex;align-items:center;justify-content:flex-end;gap:3px;white-space:nowrap;font-family:var(--font-mono);font-size:10px;font-variant-numeric:tabular-nums;line-height:1.5;color:var(--text-secondary)}
.voice-error{grid-column:1/-1;font-size:11px;line-height:1.4;color:var(--text-secondary);overflow-wrap:anywhere}
.voice-error[hidden]{display:none}
.voice-player button:focus-visible,.voice-player input:focus-visible{outline:2px solid var(--violet-light);outline-offset:2px}
/* View once keeps media out of history thumbnails and ordinary galleries. */
.view-once-attach{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.view-once-attach[hidden]{display:none}
.view-once-mode{border:1px solid var(--border-mid);border-radius:9px;background:transparent;color:var(--text-secondary);padding:5px 8px;font:inherit;font-size:11px;cursor:pointer}
.view-once-mode[aria-pressed=true]{border-color:var(--violet-light);color:var(--text-primary);background:var(--violet-soft)}
.view-once-bubble{display:flex;align-items:center;gap:12px;min-width:150px;max-width:100%;min-height:44px;box-sizing:border-box;padding:2px 5px;border:0;background:transparent;color:var(--text-primary);text-align:left;font:inherit;cursor:pointer}
.view-once-bubble:disabled{cursor:default;color:var(--text-secondary);opacity:.8}
.view-once-symbol{width:27px;height:27px;border:1px solid var(--violet-light);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.view-once-bubble strong{display:block;font-size:13px;font-weight:600}.view-once-bubble small{display:block;margin-top:2px;font-size:11px;color:var(--text-secondary)}
.view-once-overlay{z-index:3200;background:var(--bg-void);padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));align-items:center;justify-content:center}
.view-once-dialog{width:min(680px,100%);max-height:100%;min-width:0;overflow:auto;background:var(--bg-void);border-radius:14px}
.view-once-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:13px;color:var(--text-secondary)}
.view-once-header .btn{padding:8px 12px}.view-once-status{padding:32px 12px;text-align:center;font-size:13px;color:var(--text-secondary)}
.view-once-content[hidden],.view-once-status[hidden]{display:none}
.view-once-content .image-viewer-stage{height:min(75dvh,800px);width:100%}
.view-once-content .video-player{width:100%;max-width:100%;margin:0}.view-once-content video{max-height:70dvh;object-fit:contain}
.view-once-mode:focus-visible,.view-once-bubble:focus-visible{outline:2px solid var(--violet-light);outline-offset:2px}

/* Bundled sticker pack and composer alignment. */
.chat-attachment-button{width:40px;height:40px;flex:0 0 40px;border-radius:50%;margin:0;padding:0}
.cwin-head .cwin-info{display:flex;flex-direction:column;justify-content:center;gap:2px}
.cwin-head .cwin-name{line-height:20px}
.cwin-head #cwin-status{line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwin-head .chat-security-icon{display:flex;align-items:center;justify-content:center;width:32px;height:40px;flex:0 0 32px;padding:0;color:var(--text-secondary)}
.sticker-picker-panel{display:flex;flex-direction:column;max-height:min(76dvh,680px);padding-bottom:max(18px,env(safe-area-inset-bottom));overflow:hidden}
.sticker-picker-panel>.sheet-handle,.sticker-picker-panel>.sheet-title{flex-shrink:0}
.sticker-packs{display:flex;gap:8px;overflow-x:auto;flex:0 0 auto;padding:0 0 10px;border-bottom:1px solid var(--border-subtle)}
.sticker-pack{display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:12px;padding:5px 12px 5px 5px;background:transparent;color:var(--text-primary);font:inherit;cursor:pointer}
.sticker-pack[aria-selected=true]{background:var(--bg-elevated);border-color:var(--border-mid)}
.sticker-pack img{width:48px;height:48px;object-fit:contain;border-radius:8px}
.sticker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:10px;padding:12px 0;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.sticker-choice{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-width:0;border:0;border-radius:12px;padding:3px;background:transparent;cursor:pointer;touch-action:manipulation}
.sticker-choice:hover,.sticker-choice:focus-visible{background:var(--bg-elevated)}
.sticker-choice:disabled{opacity:.55}
.sticker-choice img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.sent-sticker{display:block;width:160px;height:160px;max-width:100%;object-fit:contain;user-select:none;-webkit-user-select:none;pointer-events:none}
.bubble.sticker-message{background:transparent;border:0;padding:0;box-shadow:none;max-width:min(180px,65vw)}
.comment-content:has(.sent-sticker){flex:0 1 140px}
.comment-content .sent-sticker,#reel-comment-list .sent-sticker{width:140px;height:140px}
.comment-sticker-button{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-secondary);cursor:pointer}
.comment-sticker-button:hover{background:var(--bg-elevated);color:var(--text-primary)}
.comment-attachment-glyph{display:block;position:relative;box-sizing:border-box;width:13px;height:21px;border:2px solid currentColor;border-radius:7px;transform:rotate(40deg)}
.comment-attachment-glyph::after{content:"";position:absolute;box-sizing:border-box;left:2px;top:3px;width:5px;height:11px;border:1.5px solid currentColor;border-top:0;border-radius:0 0 4px 4px}
.sticker-button-glyph{display:block;position:relative;width:20px;height:20px;border:1.8px solid currentColor;border-radius:5px 5px 8px 5px}
.sticker-button-glyph:before{content:'';position:absolute;left:4px;top:5px;width:2px;height:2px;border-radius:50%;background:currentColor;box-shadow:7px 0 currentColor}
.sticker-button-glyph>span{position:absolute;left:3px;top:7px;width:10px;height:6px;border-bottom:1.8px solid currentColor;border-radius:0 0 50% 50%}
.reel-comment-compose{display:flex;align-items:center;gap:8px}
.reel-comment-compose .fi{flex:1;min-width:0}
.reel-comment-avatar,.reel-author-avatar{display:block;flex-shrink:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:50%}
.reel-author-avatar.has-story{padding:3px;background:linear-gradient(135deg,var(--violet),var(--azure))}
.reel-author-avatar.has-story .av{border:2px solid var(--bg-surface)}
.reel-comments-overlay .sheet{height:min(68dvh,620px);max-height:88dvh;display:flex;flex-direction:column;overflow:hidden;padding:18px 16px calc(14px + env(safe-area-inset-bottom));min-width:0}
.reel-comments-overlay .sheet-handle,.reel-comments-overlay .sheet-title,.reel-comments-tabs,.reel-comment-footer{flex-shrink:0}
.reel-comments-tabs{display:flex;justify-content:center;gap:8px;padding-bottom:10px}
.post-comments-tabs{padding:12px 12px 6px}
.post-comment-avatar{display:flex;flex:0 0 32px;width:32px;height:32px;border:0;padding:0;background:transparent;cursor:pointer}
.post-comment-avatar .av{width:32px;height:32px}
.post-replies-toggle,.post-replies-more{display:block;padding:8px 0;border:0;background:transparent;color:var(--azure);font:inherit;font-size:12px;cursor:pointer}
.post-comment-thread>.post-replies-toggle,.post-comment-thread>.post-comment-replies{margin-left:40px}
.post-comment-replies .post-comment-thread>.post-replies-toggle,.post-comment-replies .post-comment-thread>.post-comment-replies{margin-left:12px}
.post-comment-replies{min-width:0;border-left:1px solid var(--border-subtle);padding-left:8px}
.post-comment-replies[hidden]{display:none}
.post-comment-replies .comment-action-target{padding-top:10px;padding-bottom:10px}
@media(max-width:360px){.post-comment-thread>.post-comment-replies{margin-left:28px}.post-comment-replies .post-comment-replies{margin-left:0!important}}
#reel-comment-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#reel-comment-list::-webkit-scrollbar{display:none}
.reel-comment-footer{padding-top:12px;border-top:1px solid var(--border-subtle)}
.reel-comment-compose{margin:0}
.reel-comment-compose .fi{margin:0;min-height:40px}
.reel-comment-compose .sendbtn{width:40px;height:40px;flex:0 0 40px;align-self:center}
.reel-composer-avatar{display:flex;align-items:center;flex:0 0 32px}
.reel-composer-avatar .av{width:32px;height:32px}
.reel-comment-footer .comment-reply-preview{margin:0 0 12px}
.reel-comment-correction del,.reel-comment-correction ins{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.reel-comment-correction del{color:var(--text-muted)}
.reel-comment-correction ins{color:var(--emerald);text-decoration:none;margin-top:4px}
.reel-comment-correction p{font-size:12px;color:var(--text-secondary);margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.reel-correct-trigger{align-self:flex-end;flex-shrink:0;padding:0 0 10px;border:0;background:transparent;color:var(--azure);font:12px var(--font-body);cursor:pointer}
.reel-comment-target,.reel-correction-target{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.reel-comment-target .av{width:32px;height:32px}
.reel-comment-avatar{align-self:flex-start}
.reel-comment-target .comment-content:has(.sent-sticker){flex:1;min-width:0}
.reel-comment-target .comment-heart{align-self:center}
.reel-correction-field{font-size:11px;color:var(--text-muted);margin-bottom:6px}
.reel-corrections-overlay .comment-correction{background:transparent;border-bottom:1px solid var(--border-subtle);border-radius:0;padding:12px 0}
.reel-corrections-overlay .comment-correction p{white-space:pre-wrap}
#reel-saved-filter{margin-left:auto;margin-right:12px}
@media(max-height:500px){.reel-comments-overlay .sheet{height:88dvh;padding-top:10px}.reel-comments-overlay .sheet-handle{margin-bottom:8px}.reel-comments-overlay .sheet-title{margin-bottom:8px}.reel-comments-tabs{padding-bottom:6px}.reel-comment-footer{padding-top:8px}}
@media(min-width:600px){.sticker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-height:500px){.sticker-picker-panel{max-height:90dvh}.sticker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.reel-replies-toggle,.reel-replies-more{display:block;padding:8px 0;border:0;background:transparent;color:var(--azure);font:inherit;font-size:12px;cursor:pointer}
#startup-notifications{z-index:11000}
.notification-permission-copy{font-size:14px;line-height:1.6;color:var(--text-secondary);margin:0 0 18px}
.reel-comment-thread>.reel-replies-toggle,.reel-comment-thread>.reel-comment-replies{margin-left:40px}
.reel-comment-replies .reel-comment-thread>.reel-replies-toggle,.reel-comment-replies .reel-comment-thread>.reel-comment-replies{margin-left:12px}
.reel-comment-replies{min-width:0;border-left:1px solid var(--border-subtle);padding-left:8px}
.reel-comment-replies[hidden]{display:none}
.reel-comment-replies .reel-comment-target{padding-top:10px;padding-bottom:10px}
@media(max-width:360px){.reel-comment-thread>.reel-comment-replies{margin-left:28px}.reel-comment-replies .reel-comment-replies{margin-left:0!important}}

/* Post metadata and shared app confirmations */
.post-title{margin:0 0 8px;font-size:17px;line-height:1.4;font-weight:750;overflow-wrap:anywhere;white-space:pre-wrap;color:var(--text-primary)}
.post-hashtags{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:10px}.post-hashtag{padding:0;border:0;background:transparent;color:var(--violet-light);font:inherit;font-size:12px;cursor:pointer;overflow-wrap:anywhere;text-align:left;max-width:100%}
.post-hashtag-search{display:flex;gap:8px;align-items:center;margin:0 0 16px}.post-hashtag-search .fi{min-width:0;flex:1}.post-hashtag-search button{flex-shrink:0}.post-hashtag-status{display:flex;align-items:center;justify-content:center;gap:10px;margin:-4px 0 14px;color:var(--violet-light);font-size:12px}.post-hashtag-status[hidden]{display:none}
.post-edit-tags{margin-top:14px}.nav-profile-tab{border:0;background:transparent;justify-content:center;color:inherit;font:inherit}.nav-profile-avatar{width:30px;height:30px;border-radius:50%;flex:0 0 30px}.nav-profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}.nav-profile-tab.active .nav-profile-avatar{box-shadow:0 0 0 2px var(--violet-light)}
.confirmation-overlay{z-index:11000;background:rgba(7,10,23,.55);backdrop-filter:blur(5px)}.confirmation-panel .sheet-title{font-size:19px;margin:0 0 12px}.confirmation-panel p{margin:0 0 22px;line-height:1.6;color:var(--text-secondary);font-size:14px;overflow-wrap:anywhere}.confirmation-actions{display:flex;gap:10px}.confirmation-actions .btn{flex:1;color:#fff}.confirmation-panel{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
@media(prefers-reduced-motion:reduce){.confirmation-panel{animation:none}}

/* Shared accessible community sheets, matching the existing Vareyo palette. */
.chat-request-banner{flex-shrink:0;padding:12px 16px;border-bottom:1px solid var(--border-subtle);background:var(--bg-deep);font-size:.875rem;line-height:1.5;max-height:35dvh;overflow-y:auto}
.request-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.request-actions .btn{flex:1;min-height:44px;white-space:normal}
.learning-notes-list,.chat-search-results,.moderation-reports,.moderation-history,.safety-updates{margin-top:16px;max-height:50dvh;overflow-y:auto;overflow-wrap:anywhere}
.learning-note{padding:14px 0;border-bottom:1px solid var(--border-subtle);font-size:.9375rem;line-height:1.6}.learning-note p{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0}.learning-corrected{color:var(--emerald)}
.moderation-status{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.moderation-status button{min-height:44px;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-mid);border-radius:var(--radius-full);padding:8px 12px}.moderation-status button[aria-pressed="true"]{background:var(--violet-soft);border-color:var(--violet)}
.report-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0;font-size:.9375rem;line-height:1.6}.moderation-actions{margin:16px 0}.moderation-actions button,.role-choices button{min-height:48px}
#display-settings .toggle{flex-shrink:0;border:0}#display-settings .toggle-row{gap:16px}.toggle-row .tsub{line-height:1.5;margin-top:5px}
:focus-visible{outline:2px solid var(--azure);outline-offset:3px}.large-text{font-size:20px}
.large-text .bubble,.large-text .post-txt,.large-text .comment-text,.large-text .reel-comment-content,.large-text .fi,.large-text .ft,.large-text #cinput,.large-text .profile-menu-item{font-size:1rem!important;line-height:1.6!important}
.large-text .cname,.large-text #cwin-name,.large-text .tlabel,.large-text .label{font-size:1rem!important;line-height:1.4!important}.large-text .tsub,.large-text .sublabel,.large-text .field-hint,.large-text .cpreview,.large-text #cwin-status{font-size:.8rem!important;line-height:1.5!important}
.large-text .chat-item{min-height:94px;height:auto}.large-text .cwin-head{height:auto;min-height:76px}.large-text .fi,.large-text #cinput{height:auto;min-height:48px}.large-text .sheet{overflow-y:auto;max-height:90dvh}.large-text .settings-row{height:auto;min-height:68px}.large-text .settings-row-text{white-space:normal}
.settings-row,.request-actions button,.moderation-actions button{min-height:44px}.message-menu-option{min-height:48px;white-space:normal}.reduce-motion *, .reduce-motion *::before,.reduce-motion *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(max-width:360px){.request-actions{gap:6px}.request-actions .btn{padding:8px;font-size:.8rem}.moderation-status{gap:6px}.large-text .cwin-head{gap:8px;padding-inline:10px}}

/* Your Vareyo Week reuses Vareyo's theme and sheet navigation. */
.weekly-overlay{z-index:16000;align-items:center;padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));background:var(--bg-void)}
.weekly-overlay .sheet{width:100%;max-width:520px;max-height:100%;height:100%;border-radius:0;display:flex;flex-direction:column;padding:18px 20px;background:linear-gradient(160deg,var(--bg-deep),var(--bg-void));border:0;overflow:hidden;animation:none}
.weekly-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;color:var(--text-secondary);font-size:12px}.weekly-close{border:0;background:transparent;color:var(--text-primary);font-size:30px;min-width:44px;min-height:44px;cursor:pointer}
.weekly-progress{display:flex;gap:5px;margin:10px 0 20px;flex-shrink:0}.weekly-progress span{height:3px;background:var(--bg-elevated);border-radius:var(--radius-full);flex:1}.weekly-progress span.on{background:var(--accent-gradient)}
.weekly-page{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:0 4px 22px;animation:fadeIn .2s var(--ease-smooth);touch-action:pan-y}.weekly-hero{margin:10px 0 26px}.weekly-brand{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:16px}
.weekly-period{font-size:13px;font-weight:600;color:var(--azure);line-height:1.6}.weekly-caption{color:var(--text-secondary);font-size:12px;line-height:1.7;margin:8px 0 14px}.weekly-heading{font-family:var(--font-display);font-size:clamp(26px,7vw,36px);line-height:1.15;letter-spacing:-.6px;margin:0 0 16px;overflow-wrap:anywhere}.weekly-story{font-size:17px;line-height:1.6;color:var(--text-secondary);margin-bottom:24px}.weekly-languages{color:var(--azure);font-size:17px;line-height:1.7}
.weekly-metrics{list-style:none;display:flex;flex-direction:column;gap:24px;margin:28px 0}.weekly-metrics li{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--border-subtle);padding-bottom:18px}.weekly-metrics strong{font-family:var(--font-display);font-size:44px;min-width:60px;color:var(--text-primary)}.weekly-metrics span{font-size:15px;line-height:1.6;color:var(--text-secondary)}.weekly-comparison{border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:22px;color:var(--azure);line-height:1.7}
.weekly-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;padding-top:14px;border-top:1px solid var(--border-subtle);font-size:12px;color:var(--text-secondary)}.weekly-overlay .btn{min-height:44px;white-space:normal}.weekly-footer .btn{min-width:90px}.weekly-footer .btn:disabled{opacity:.35}
.weekly-goals{display:grid;grid-template-columns:1fr;gap:8px;margin:18px 0}.weekly-goal{display:flex;flex-direction:column;text-align:left;gap:6px;width:100%;min-height:66px;padding:14px 16px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);color:var(--text-primary);font:inherit;cursor:pointer}.weekly-goal span{font-size:12px;color:var(--text-secondary);line-height:1.5}.weekly-goal[aria-pressed=true]{border-color:var(--violet-light);background:var(--violet-soft)}.weekly-goal:disabled{opacity:.6}
.weekly-focus-actions{display:flex;gap:10px;margin:12px 0}.weekly-goal-status,.weekly-share-status{color:var(--azure);font-size:14px;line-height:1.6;margin:14px 0}.weekly-share-preview{max-width:228px;aspect-ratio:9/16;margin:14px auto 24px;border:1px solid var(--border-accent);border-radius:var(--radius-lg);overflow:hidden}.weekly-share-preview canvas{width:100%;height:auto;display:block}.weekly-offline{font-size:12px;line-height:1.5;margin-top:10px;color:var(--text-secondary)}
.weekly-settings-fields{display:flex;flex-direction:column;gap:12px;margin-top:20px}.weekly-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;line-height:1.5}.weekly-switch input{width:24px;height:24px;accent-color:var(--violet-light);margin:10px}.weekly-notification-orbit{display:grid;place-items:center;font-size:28px;width:44px;height:44px;border-radius:50%;background:var(--azure-soft);flex-shrink:0}.weekly-history-btn{margin-top:12px}.weekly-overlay button:focus-visible{outline:2px solid var(--azure);outline-offset:3px}.weekly-heading:focus{outline:none}
@media(min-width:600px){.weekly-overlay{padding:24px}.weekly-overlay .sheet{height:min(920px,100%);border:1px solid var(--border-subtle);border-radius:var(--radius-xl)}}
@media(prefers-reduced-motion:reduce){.weekly-page{animation:none}}.reduce-motion .weekly-page{animation:none}.large-text .weekly-story{font-size:19px}.large-text .weekly-caption,.large-text .weekly-goal span{font-size:14px}.large-text .weekly-metrics span{font-size:17px}

.weekly-history-overlay{z-index:16001}.weekly-history-overlay .sheet{max-height:80dvh;overflow-y:auto}.weekly-history-overlay .btn{min-height:44px;margin-top:10px}

/* Hashtag controls share the contextual header action. */
.hashtag-search-button svg{width:20px;height:20px}
.hashtag-search-button[hidden],.post-hashtag-search[hidden],#reel-hashtag-search[hidden]{display:none!important}
.language-pair-arrow{display:inline-flex;align-items:center;justify-content:center;align-self:center;line-height:1;font-size:10px;opacity:.5}
.post-comment-compose input,.reel-comment-compose input{height:40px;min-height:40px;line-height:20px;box-sizing:border-box;padding-top:10px;padding-bottom:10px;margin:0;align-self:center}
.post-comment-compose .av,.reel-composer-avatar{flex-shrink:0;align-self:center}
.post-comment-compose button,.reel-comment-compose button{align-self:center}

.comment-media{display:block;width:min(220px,100%);margin:6px 0;min-width:0;overflow:hidden;border:0;padding:0;background:transparent;border-radius:12px}
.comment-image{cursor:pointer}.comment-image img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain}.comment-media .video-player{margin:0}.comment-media .video-player video{max-height:220px}
.comment-media-preview{position:relative;margin:10px 12px 14px;width:min(220px,calc(100% - 24px));border-radius:12px;overflow:hidden}.comment-media-preview[hidden]{display:none}.comment-media-preview img,.comment-media-preview video{display:block;width:100%;max-height:200px;object-fit:contain}.comment-media-preview>button{position:absolute;top:4px;right:4px;width:32px;height:32px;border:0;border-radius:50%;background:var(--bg-surface);color:var(--text-primary);font-size:24px;cursor:pointer}#notification-settings .toggle{flex-shrink:0;border:0}#notification-settings .toggle-row{gap:16px}

/* The native app uses the entire phone in portrait and landscape. */
.vareyo-native #app,.vareyo-native #bottom-nav,.vareyo-native .chat-win,.vareyo-native .sheet{max-width:none}
.vareyo-native #app{width:100%;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.vareyo-native #bottom-nav{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
.keyboard-open #bottom-nav{visibility:hidden;pointer-events:none}
.keyboard-open #page-container{padding-bottom:16px}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){#app,#bottom-nav,.chat-win{max-width:none}}
.post-hashtag-search{width:calc(100% - 12px);margin-left:6px;margin-right:6px;gap:10px}
.post-hashtag-search .fi{flex:1;max-width:none}
.hashtag-submit{flex:none;width:36px;height:36px;background:transparent;border:0}
.search-glyph{position:relative;display:block;width:16px;height:16px;border:1.8px solid currentColor;border-radius:50%;margin:-3px 3px 0 0}
.search-glyph::after{content:'';position:absolute;width:7px;height:1.8px;background:currentColor;right:-5px;bottom:-3px;transform:rotate(45deg);border-radius:2px}
.language-pair-side{display:inline-flex;align-items:center;gap:3px;line-height:1.3}
.language-pair-flag{display:inline-flex;align-items:center;line-height:1}
.language-pair-arrow{position:relative;width:11px;height:10px;flex:none;align-self:center}
.language-pair-arrow::before{content:'';position:absolute;top:4px;left:0;width:10px;height:1px;background:currentColor}
.language-pair-arrow::after{content:'';position:absolute;right:0;top:2px;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

/* Full settings use the available screen, with a fixed title and one scroll area. */
.fullscreen-settings{align-items:stretch!important;padding:0!important;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg-void)}
.fullscreen-settings>.sheet,#profile-menu-sheet.fullscreen-settings>.settings-panel{width:100%;max-width:none;height:100%;max-height:100%;min-height:0;border:0;border-radius:0;animation:none;display:flex;flex-direction:column;overflow:hidden;padding:calc(16px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.fullscreen-settings>.sheet>.sheet-handle{display:none}
.sheet-form-header{flex:none;padding-bottom:16px;background:inherit}
.sheet-form-header .sheet-title{margin:0;line-height:1.4;font-size:20px}
.sheet-form-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:16px;padding-bottom:12px}
.fullscreen-settings .sheet-form-body .field-hint,.fullscreen-settings p,.fullscreen-settings .tsub{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.fullscreen-settings>.language-picker-sheet{padding:0}
.fullscreen-settings .language-picker-header{padding-top:calc(16px + env(safe-area-inset-top))}
.fullscreen-settings .language-picker-footer{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.fullscreen-settings .language-picker-header,.fullscreen-settings .language-picker-footer{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
#privacy-settings .toggle{border:0;box-shadow:none;outline-offset:4px}
#privacy-settings .toggle:focus-visible{outline:2px solid var(--azure)}
#privacy-settings .toggle-row{gap:16px}
#privacy-settings .toggle-row>div:first-child{min-width:0}
#page-container{min-height:0;min-width:0}
#page-profile{min-width:0;overflow:visible}
.prof-tab-content.active{overflow:visible}
.profile-joined{font-size:11px;color:var(--text-muted);padding:4px 0;text-align:center}
@media(orientation:landscape) and (max-height:600px){
  #page-container{overflow-y:auto;overscroll-behavior:contain}
  #page-container:has(#page-reels.active){overflow:hidden}
  .prof-banner{min-height:80px;max-height:110px}
  .prof-hero{padding-bottom:14px}
  .profile-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-highlights.is-public{grid-template-columns:1fr}
  .fullscreen-settings .settings-header{padding-bottom:8px}
}

/* Feedback uses the existing full-screen settings shell and shared controls. */
#feedback-form-sheet>.sheet,#my-feedback-sheet>.sheet,#admin-feedback-sheet>.sheet,#feedback-detail-sheet>.sheet{padding-left:max(clamp(24px,3vw,32px),env(safe-area-inset-left));padding-right:max(clamp(24px,3vw,32px),env(safe-area-inset-right))}
#feedback-form-sheet .sheet-form-header,#feedback-form-sheet .sheet-form-body,#my-feedback-sheet .sheet-form-header,#my-feedback-sheet .sheet-form-body,#admin-feedback-sheet .sheet-form-header,#admin-feedback-sheet .sheet-form-body,#feedback-detail-sheet .sheet-form-header,#feedback-detail-sheet .sheet-form-body{width:100%;max-width:880px;margin-left:auto;margin-right:auto}
.feedback-form{display:flex;flex-direction:column;gap:12px;width:100%;margin:0 auto}
.feedback-form .fl{margin-top:8px;margin-bottom:0}
.feedback-form .field-hint{margin:0;white-space:normal;line-height:1.6}
.feedback-form .ft{min-height:100px;resize:vertical}
.feedback-choice{justify-content:flex-start;text-align:left;white-space:normal;background:transparent;border-color:transparent;box-shadow:none;padding-left:0;padding-right:0;color:var(--text-primary)}
.feedback-choice:hover{background:transparent;color:var(--violet-light)}
.feedback-choice:focus-visible{outline:2px solid var(--violet-light);outline-offset:-2px}
.feedback-consent{display:flex;align-items:center;gap:12px;line-height:1.5;margin-top:8px;cursor:pointer}
.feedback-consent input{appearance:none;width:20px;height:20px;flex-shrink:0;border:1px solid var(--border-mid);border-radius:5px;background:var(--bg-deep);position:relative;cursor:pointer}
.feedback-consent input:checked{background:var(--violet);border-color:var(--violet)}
.feedback-consent input:checked::after{content:'';display:block;position:absolute;left:6px;top:3px;width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}
.feedback-consent input:focus-visible{outline:2px solid var(--violet-light);outline-offset:3px}
.feedback-status{min-height:1.5em;color:var(--text-secondary);font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.feedback-image{display:block;border:0;background:transparent;padding:0;width:100%;cursor:pointer;margin:12px 0}
.feedback-image img{display:block;max-height:360px;max-width:100%;width:auto;height:auto;object-fit:contain;margin:0 auto;border-radius:12px}
.feedback-filters{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.feedback-states{display:flex;flex-wrap:wrap;gap:8px}
.feedback-states>button{appearance:none;min-height:44px;padding:8px 14px;border:1px solid var(--border-mid);border-radius:var(--radius-full);background:var(--bg-card);color:var(--text-secondary);font-family:var(--font-body);font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.feedback-states>button[aria-pressed=true]{background:var(--violet-soft);border-color:var(--border-accent);color:var(--violet-light)}
.feedback-states>button:hover{color:var(--text-primary)}
.feedback-states>button:focus-visible{outline:2px solid var(--violet-light);outline-offset:2px}
.feedback-list{display:flex;flex-direction:column;gap:8px}
.feedback-card{display:flex;align-items:center;gap:10px;width:100%;text-align:left;min-height:60px;padding:10px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-primary);cursor:pointer}
.feedback-card:hover{background:var(--bg-hover)}
.feedback-card .settings-row-text{min-width:0;flex:1}.feedback-card .label{white-space:normal;overflow-wrap:anywhere}
.feedback-badge{font-size:12px;font-weight:600;line-height:1.5;color:var(--text-secondary);white-space:normal;flex-shrink:0;max-width:35%}
.feedback-detail-title{margin:0 0 8px;overflow-wrap:anywhere;line-height:1.5}
.feedback-section-title{font-size:15px;margin:20px 0 8px;font-weight:600}
.feedback-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7;margin:0}
.feedback-history{border-left:2px solid var(--border-mid);padding-left:14px;margin-bottom:20px}
#my-feedback-sheet .sheet-form-body,#admin-feedback-sheet .sheet-form-body,#feedback-detail-sheet .sheet-form-body{display:block}
@media(max-height:500px) and (orientation:landscape){.feedback-image img{max-height:240px}}

/* Full-screen profile editors use the available space without changing signup. */
#profile-goals-sheet .sheet-form-body,#profile-help-sheet .sheet-form-body{padding:22px clamp(16px,4vw,40px);}
#profile-goals-sheet .purpose-options,#profile-goals-sheet .connect-filter-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 26px;}
#profile-goals-sheet .purpose-option{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;margin:0;padding:16px;border:1px solid var(--border-mid);border-radius:var(--radius-md);color:var(--text-primary);font-size:15px;line-height:1.45;white-space:normal;background:var(--bg-card);}
#profile-goals-sheet .purpose-option:has(input:checked){background:rgba(99,102,241,.14);border-color:var(--violet);}
#profile-goals-sheet .purpose-option input{flex-shrink:0;width:18px;height:18px;accent-color:var(--violet);}
#profile-goals-sheet .purpose-option input,#profile-goals-sheet .connect-timezone-option input{appearance:none;position:relative;border:1px solid var(--border-mid);background:var(--bg-deep);border-radius:5px;cursor:pointer;}
#profile-goals-sheet input[type=radio]{border-radius:50%;}
#profile-goals-sheet .purpose-option input:checked,#profile-goals-sheet .connect-timezone-option input:checked{border-color:var(--violet-light);background:var(--violet);}
#profile-goals-sheet input[type=checkbox]:checked::after{content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);}
#profile-goals-sheet input[type=radio]:checked::after{content:'';position:absolute;inset:4px;background:white;border-radius:50%;}
#profile-goals-sheet input:focus-visible{outline:2px solid var(--azure);outline-offset:3px;}
#profile-goals-sheet .connect-filter-group{margin-top:26px;}
#profile-goals-sheet .purpose-text{min-height:140px;}
.purpose-timezone{margin:20px 0 24px;padding:18px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-card);}
.purpose-timezone h3{font-size:15px;margin:0 0 10px;font-weight:600;}
.purpose-timezone-offset{font-size:22px;font-weight:600;color:var(--text-primary);}
.purpose-timezone .connect-timezone-option{margin:16px 0 10px;align-items:flex-start;font-size:14px;}
.purpose-timezone .connect-timezone-option input{margin-top:3px;}
.purpose-timezone .field-hint{margin:0;line-height:1.6;}
#profile-help-sheet .purpose-text{min-height:clamp(160px,35dvh,360px);margin-top:10px;}
#notifications-delete-all,#notifications-delete-all:hover,#notifications-delete-all:focus-visible{background:transparent;box-shadow:none;border-color:transparent;}
#page-posts .compose-bar[hidden]{display:none;}
#page-posts .post-hashtag-search{width:auto;margin:12px 16px 10px;}
.media-placeholder{background-image:url("assets/branding/No_Image.png")!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;}
img.media-pending{opacity:0!important;}
.post-image-frame.media-placeholder{min-height:180px;}
@media(max-width:360px){#profile-goals-sheet .purpose-options,#profile-goals-sheet .connect-filter-choices{grid-template-columns:1fr;}}
@media(orientation:landscape){
  .prof-banner.has-cover{height:clamp(60px,calc(100dvh - 200px - var(--profile-back-height,0px)),220px);aspect-ratio:auto;min-height:0;max-height:none;}
  #page-profile.is-foreign-profile{--profile-back-height:75px;}
  .prof-banner.has-cover .profile-cover-image{object-fit:contain;}
}


/* Text fields retain their existing border without a second focus halo. */
.confirmation-overlay.social-list-overlay{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):focus,textarea:focus,[contenteditable=true]:focus{outline:none!important;box-shadow:none!important}
#feedback-form-sheet .sheet-form-body,#my-feedback-sheet .sheet-form-body,#admin-feedback-sheet .sheet-form-body,#feedback-detail-sheet .sheet-form-body{width:calc(100% + 12px);max-width:892px;margin-right:-12px;padding-right:12px;scrollbar-gutter:stable}
#feedback-form-sheet .sheet-form-body{padding-bottom:24px}
.compose-bar .cact{width:auto;min-width:88px;padding:8px 10px;font-size:12px;white-space:normal}
#gc-avatar-preview{width:84px;height:84px;object-fit:cover;border-radius:50%;margin:12px auto;display:block}
#gc-avatar-preview[hidden]{display:none}
#gc-emoji{background:transparent!important;border:0;padding:0;width:40px!important;height:40px!important;cursor:pointer}
#gc-emoji .av{width:40px;height:40px}
.group-list-item{width:100%;border:0;background:transparent;color:var(--text-primary);text-align:left;font:inherit}
.group-list-item .cname,.group-list-item .cpreview{display:block}
.group-info-photo{display:flex;justify-content:center;margin:12px 0}
.group-info-photo>.av{width:80px;height:80px;flex:none}
.group-info-name{text-align:center;overflow-wrap:anywhere;margin:12px 0 18px}
.group-info-body{display:flex;flex-direction:column;gap:10px}
.group-section-title{font-size:14px;margin:18px 0 8px;color:var(--text-secondary);font-weight:600}
.group-member-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border-subtle);min-width:0}
.group-member-row .av{flex:none}
.group-member-name{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px}
.group-admin-badge{font-size:11px;color:var(--violet-light);flex:none}
.group-member-options{min-height:36px;font-size:12px;padding:8px}
.group-warning{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;padding:12px 0;border-bottom:1px solid var(--border-subtle)}
.group-warning-form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.group-invitation{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--border-subtle)}
.group-invitation-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.group-invitation-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.group-message-row{display:flex;gap:8px;align-items:flex-start;max-width:92%;margin:4px 0}
.group-message-row>.group-message-avatar{margin-top:20px;flex:none}
.group-message-own{align-self:flex-end;justify-content:flex-end}
.group-message-content{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.group-message-own .group-message-content{align-items:flex-end}
.group-message-author{font-size:11px;color:var(--text-muted);line-height:18px;margin-left:4px}
.group-message-content>.bubble{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
.group-message-status{font-size:10px;color:var(--text-muted);margin:3px 4px 0}
.group-message-image{display:block;border:0;padding:0;background:transparent;max-width:240px;cursor:pointer}
.group-message-image img{display:block;max-width:100%;max-height:300px;object-fit:contain;border-radius:12px}
#group-chat-overlay{height:100dvh!important;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}

#gc-input{min-width:0}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){#group-chat-overlay{max-width:none!important}}
.pull-refresh-indicator{position:fixed;z-index:150;height:4px;background:var(--bg-elevated);pointer-events:none;overflow:hidden}
.pull-refresh-indicator>span{display:block;height:100%;background:var(--accent-gradient);border-radius:3px;transition:width .08s linear}
.pull-refresh-indicator.loading>span{width:40%!important;animation:pullLoading 1s ease-in-out infinite}
@keyframes pullLoading{from{transform:translateX(-100%)}to{transform:translateX(350%)}}
@media(prefers-reduced-motion:reduce){.pull-refresh-indicator.loading>span{animation:none;width:100%!important}}

.group-composer .rec-btn{width:40px;height:40px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border-mid);color:var(--text-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.group-composer .cinput{min-width:0;flex:1;margin:0}.group-composer .icon-btn{flex-shrink:0}
.group-composer{padding:9px 11px;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));gap:7px;align-items:flex-end;background:var(--bg-surface)}
.group-composer .cinput{box-sizing:border-box;min-height:40px;max-height:90px}
.group-message-avatar,.group-member-avatar{appearance:none;background:transparent;border:0;padding:0;cursor:pointer;display:flex;width:34px;height:34px;flex:none}
.group-message-avatar>.av{width:34px;height:34px;flex:none}
.group-info-photo{appearance:none;background:transparent;border:0;padding:0;cursor:pointer}
.group-system-hint{font-size:11px;line-height:1.5;color:var(--text-muted);align-self:center;max-width:100%;overflow-wrap:anywhere;text-align:center;padding:5px 12px}
.group-message-target{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.group-message-target:focus-visible{outline:2px solid var(--violet-light);outline-offset:3px}
.group-message-heart{background:transparent;border:0;padding:3px 4px;color:#ff75a6;font-size:14px;cursor:pointer}
.group-message-quote{display:flex;flex-direction:column;font-size:11px;line-height:1.5;padding:5px 8px;margin-bottom:6px;border-left:2px solid var(--violet-light);opacity:.85;max-width:100%;overflow-wrap:anywhere}
.group-message-correction{display:flex;flex-direction:column;gap:5px}.group-message-correction del{opacity:.65}.group-message-correction span{font-size:12px;opacity:.85}
.group-message-editor-form{display:flex;flex-direction:column;gap:10px}.group-message-editor-form textarea{max-height:35dvh;resize:vertical}
.group-reply-preview{display:flex;align-items:center;gap:10px;margin:4px 12px 10px;padding:8px 10px;border-left:2px solid var(--violet-light)}
.group-reply-preview[hidden]{display:none}.group-reply-preview>div{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text-secondary)}
.group-silent-leave{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;margin:8px 0}
.feedback-delete{margin-top:12px}.feedback-states>button{padding:6px 12px;line-height:1.2}
.compose-choose-image{margin:0 0 10px;align-self:flex-start}
.group-sticker-bubble{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
.group-voice-retry{display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap;color:var(--text-secondary)}.group-voice-retry[hidden]{display:none}
#gc-rec-bar{flex-shrink:0}#gc-options{flex-shrink:0}#gc-name{overflow-wrap:anywhere}

/* Follow lists remain compact in portrait, landscape and with the keyboard open. */
#profile-follow-list .sheet{max-height:50dvh;display:flex;flex-direction:column;overflow:hidden;gap:10px}
#profile-follow-list .sheet-handle,#profile-follow-list .sheet-title,#profile-follow-list .follow-list-search,#profile-follow-list .follow-list-more,#profile-follow-list .follow-list-close{flex-shrink:0}
#profile-follow-list .follow-list-rows{min-height:0;overflow-y:auto;overscroll-behavior:contain}
#profile-follow-list .follow-person-title{display:flex;align-items:center;gap:6px}
#profile-follow-list .follow-person-title:has(+.mutual-follow-badge){transform:translateY(3px)}
#profile-views-list .sheet{max-height:50vh;max-height:50dvh;display:flex;flex-direction:column;overflow:hidden;gap:8px}
#profile-views-list .sheet-handle,#profile-views-list .sheet-title,#profile-views-list .profile-views-close{flex-shrink:0}
#profile-views-list .sheet-handle,#profile-views-list .sheet-title{margin-bottom:4px}
#profile-views-list .profile-views-rows{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#profile-views-list .profile-views-close{margin:0}
.mutual-follow-badge{display:block;font-size:11px;color:var(--azure);margin-top:3px}
.follow-request-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.follow-request-profile{display:flex;align-items:center;gap:12px;flex:1;min-width:140px;text-align:left;border:0;background:none;color:inherit;padding:0}
.follow-request-actions{display:flex;gap:6px;margin-left:auto}
.follow-request-actions .btn{white-space:nowrap}

/* Registration and login fill the Android viewport; their content can scroll. */
#reg-overlay{padding:0;background:var(--bg-surface);backdrop-filter:none;align-items:stretch}
#reg-overlay > .modal-box{width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;animation:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#reg-overlay .modal-top,#reg-overlay .form-wrap{width:100%;max-width:800px;margin-left:auto;margin-right:auto}

/* First-use introduction: local completion, existing auth flow, full viewport. */
#welcome-screen{padding:0;align-items:stretch;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#welcome-screen .welcome-content{max-width:1040px;min-height:100%;margin:0 auto;padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(12px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;animation:none}
.onboarding-stage{flex:1;display:flex;flex-direction:column;min-height:0;touch-action:pan-y}
.onboarding-toolbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:48px;padding:0 6px}
.onboarding-brand{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--azure)}
.onboarding-text-button{border:0;background:transparent;box-shadow:none;color:var(--text-secondary);font:600 13px var(--font-body);padding:10px 12px;min-height:44px;cursor:pointer;line-height:1.4}
.onboarding-text-button:focus-visible,.onboarding-picture-button:focus-visible{outline:2px solid var(--azure);outline-offset:3px}
.onboarding-cover-layout{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0}
.onboarding-image-frame{position:relative;flex-shrink:0;width:min(100%,calc((100vh - 170px)*941/1672));width:min(100%,calc((100dvh - 170px)*941/1672));min-width:180px;max-width:480px}
.onboarding-welcome-image{display:block;width:100%;height:auto;aspect-ratio:941/1672;object-fit:contain}
.onboarding-picture-button{position:absolute;left:10.1%;top:84.5%;width:79.8%;height:8.9%;display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(110deg,#a03bfb,#555bff 35%,#00c4ec);color:white;border:1px solid rgba(140,230,255,.65);border-radius:999px;box-shadow:0 0 12px rgba(81,116,255,.35);font:700 clamp(16px,2.8vh,28px) var(--font-body);cursor:pointer;padding:0 12px;line-height:1.1}
.onboarding-picture-button svg,.onboarding-primary svg{width:22px;height:22px;flex-shrink:0}
.onboarding-cover-controls{width:100%;max-width:480px}
.onboarding-progress{display:flex;align-items:center;justify-content:center;gap:7px;height:20px;margin:4px 0}
.onboarding-progress span{height:5px;width:5px;border-radius:6px;background:var(--border-mid)}
.onboarding-progress span.current{width:22px;background:var(--accent-gradient)}
.onboarding-login{width:100%;max-width:480px}
.onboarding-legal{flex-shrink:0;font-size:11px;color:var(--text-muted);text-align:center;line-height:1.7;padding:0 8px 12px}
.onboarding-page{width:100%;max-width:480px;flex:1;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 12px 0;text-align:center}
.onboarding-hero{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:24px;color:var(--azure);background:linear-gradient(135deg,rgba(140,92,255,.18),rgba(0,200,240,.08));border:1px solid var(--border-subtle);margin-bottom:20px}
.onboarding-hero svg{width:40px;height:40px}
.onboarding-page h1{font:800 clamp(24px,6vw,32px) var(--font-display);color:var(--text-primary);line-height:1.15;margin:0 0 12px;outline:none}
.onboarding-description{color:var(--text-secondary);font-size:14px;line-height:1.6;margin:0 0 20px;max-width:360px}
.onboarding-features{display:flex;flex-direction:column;gap:12px;width:100%;list-style:none;margin:0;padding:0;text-align:left}
.onboarding-feature{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-card)}
.onboarding-feature-icon{color:var(--violet-light);display:flex;flex-shrink:0}
.onboarding-feature-icon svg{width:28px;height:28px}
.onboarding-feature h2{font:700 15px var(--font-body);color:var(--text-primary);margin:0 0 4px}
.onboarding-feature p{color:var(--text-secondary);font-size:13px;line-height:1.45;margin:0}
.onboarding-page-controls{width:100%;padding-top:18px}
.onboarding-primary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px}
.onboarding-stage button{touch-action:manipulation}
.onboarding-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(orientation:landscape) and (max-height:600px){
 .onboarding-toolbar{min-height:44px}
 .onboarding-cover-layout{flex-direction:row;gap:28px;justify-content:center}
 .onboarding-image-frame{width:calc((100vh - 94px)*941/1672);width:calc((100dvh - 94px)*941/1672);min-width:130px}
 .onboarding-cover-controls{width:min(42%,340px)}
 .onboarding-picture-button{font-size:12px;gap:6px;padding:0 4px}
 .onboarding-picture-button svg{width:16px;height:16px}
 .onboarding-page{max-width:820px;display:grid;grid-template-columns:minmax(180px,.9fr) minmax(250px,1.2fr);grid-template-rows:auto 1fr;align-items:center;column-gap:28px;padding:4px 12px}
 .onboarding-hero{display:none}
 .onboarding-page h1{grid-column:1;grid-row:1;font-size:26px;margin:14px 0 6px}
 .onboarding-description{grid-column:1;grid-row:2;align-self:start;margin:8px 0}
 .onboarding-features{grid-column:2;grid-row:1/3;gap:7px}
 .onboarding-feature{padding:10px 12px;gap:10px}
 .onboarding-feature h2{font-size:14px}
 .onboarding-feature p{font-size:12px}
 .onboarding-page-controls{grid-column:1/3;grid-row:3;padding-top:4px;display:grid;grid-template-columns:1fr 1fr;gap:2px 28px;align-items:center}
 .onboarding-page-controls .onboarding-progress{grid-column:1/3;margin:0;height:12px}
 .onboarding-primary{min-height:44px}
 .onboarding-legal{padding-bottom:6px}
}
@media(max-width:350px){.onboarding-page{padding:8px 4px 0}.onboarding-hero{width:56px;height:56px;margin-bottom:12px}.onboarding-feature{padding:12px}.onboarding-features{gap:8px}.onboarding-description{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){#welcome-screen *{animation:none!important;transition:none!important}}
/* Welcome artwork has no embedded copy: real translated text and controls. */
.onboarding-stage{flex:1 0 auto}
.onboarding-cover-layout{position:relative;flex:1 0 auto;justify-content:center;padding-bottom:4px}
.onboarding-image-frame{width:min(100%,calc((100vh - 214px)*941/1672));width:min(100%,calc((100dvh - 214px)*941/1672));min-width:160px}
.onboarding-cover-copy{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:min(90%,350px);text-align:center}
.onboarding-cover-copy h1{font:800 clamp(24px,6vw,32px) var(--font-display);color:var(--text-primary);line-height:1.1;max-width:300px;margin:0 auto 14px;outline:none}
.onboarding-cover-copy p{color:var(--text-secondary);font-size:14px;line-height:1.5;max-width:290px;margin:0 auto}
.onboarding-cover-controls{padding:0 12px;max-width:390px}
.onboarding-cover-controls .onboarding-primary{background:linear-gradient(110deg,#9254f7,#6264ff 42%,#12bdec);border:1px solid rgba(135,155,255,.4);border-radius:18px}
.onboarding-icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}
.onboarding-primary .onboarding-icon{width:22px;height:22px}
.onboarding-page{flex:1 0 auto}
@media(max-height:650px) and (orientation:portrait){.onboarding-cover-copy{top:12px}.onboarding-cover-copy h1{font-size:24px;margin-bottom:8px}.onboarding-cover-copy p{font-size:12px;max-width:240px}}
@media(orientation:landscape) and (max-height:600px){
 .onboarding-cover-layout{display:grid;grid-template-columns:auto minmax(220px,360px);grid-template-rows:auto auto;gap:0 32px;align-content:center;justify-content:center}
 .onboarding-image-frame{width:calc((100vh - 100px)*941/1672);width:calc((100dvh - 100px)*941/1672);min-width:130px;grid-column:1;grid-row:1/3}
 .onboarding-cover-copy{position:static;transform:none;width:100%;grid-column:2;grid-row:1;align-self:end;padding:0 12px 12px}
 .onboarding-cover-copy h1{font-size:28px}
 .onboarding-cover-copy p{font-size:13px}
 .onboarding-cover-controls{width:100%;grid-column:2;grid-row:2;align-self:start}
 .onboarding-cover-controls .onboarding-primary{min-height:44px}
}
.reel-menu-btn{min-height:40px;justify-content:center}
.reel-timeline{position:absolute;z-index:3;bottom:6px;left:14px;right:74px;display:flex;align-items:center;gap:8px;color:#fff;font-size:10px;text-shadow:0 1px 3px #000}
.reel-timeline input{min-width:0;flex:1;height:24px;margin:0;accent-color:#33ceff;background:transparent}
.reel-timeline time{min-width:27px;font-variant-numeric:tabular-nums}
.reel-card:has(.reel-timeline) .reel-overlay{padding-bottom:40px}
@media(orientation:landscape) and (max-height:500px){.reel-timeline{right:14px}.reel-actions{bottom:36px}.reel-card:has(.reel-timeline) .reel-overlay{padding-right:250px;padding-bottom:70px}}
.reel-menu-btn .reel-action-icon{line-height:1;font-size:28px}
.reel-upload-progress{display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--text-muted);font-size:12px}
.reel-upload-progress[hidden]{display:none}
.reel-upload-progress progress{flex:1;min-width:0;height:7px;border:0;border-radius:20px;overflow:hidden;accent-color:var(--accent)}
.reel-upload-progress progress::-webkit-progress-bar{background:var(--bg-deep);border-radius:20px}
.reel-upload-progress progress::-webkit-progress-value{background:linear-gradient(90deg,#8755ff,#00c4f4);border-radius:20px}
.reel-upload-progress progress::-moz-progress-bar{background:linear-gradient(90deg,#8755ff,#00c4f4)}
.nav-tab.feature-unavailable,.prof-tab.feature-unavailable,.btn.feature-unavailable{color:var(--text-muted);filter:grayscale(1);opacity:.5;cursor:pointer}
.feature-unavailable .ni{filter:grayscale(1)}
.registration-contact-error{color:var(--rose);font-size:13px;line-height:1.5;margin-top:8px}
.registration-contact-error[hidden]{display:none}
.registration-field-error{color:var(--rose);font-size:13px;line-height:1.5;margin-top:8px;overflow-wrap:anywhere}
#s1 [aria-invalid="true"]{border-color:var(--rose)}
.registration-contact-error p{margin:0 0 8px}

/* Posts discovery and optional learning intent use the app's existing palette. */
.feed-scope-tabs{display:flex;gap:6px;padding:5px;background:var(--bg-deep);border:1px solid var(--border-subtle);border-radius:14px;margin:4px 12px 12px}
.feed-scope-tabs button{display:flex;align-items:center;justify-content:center;flex:1;min-height:40px;padding:12px 12px 8px;border:0;border-radius:10px;background:transparent;color:var(--text-secondary);font:600 14px/20px var(--font-body);cursor:pointer}
.feed-scope-tabs button.selected{background:var(--bg-card);color:var(--text-primary);box-shadow:0 2px 8px #0002}
.feed-purpose-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 12px 12px}
.feed-purpose-filters button,.post-purpose button{background:transparent;border:1px solid var(--border-mid);border-radius:20px;color:var(--text-secondary);padding:8px 12px;font:500 12px var(--font-body);cursor:pointer;min-height:36px}
.feed-purpose-filters button.active,.post-purpose button.selected{border-color:var(--violet);color:var(--text-primary);background:color-mix(in srgb,var(--violet) 14%,transparent)}
.post-purpose{border:0;padding:0;margin:8px 0 18px;display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.post-purpose legend{color:var(--text-secondary);font-size:12px;padding:0;margin-bottom:9px}
.post-purpose-badge{display:inline-block;color:var(--text-secondary);font-size:12px;border:1px solid var(--border-mid);border-radius:9px;padding:4px 9px;margin-bottom:8px}
.task-swap{margin-left:auto;max-width:40%;padding:5px 6px;border:0;background:transparent;color:var(--text-secondary);font:500 11px var(--font-body);cursor:pointer}
.learning-task-footer{flex-wrap:wrap;row-gap:8px}.task-swap:disabled{opacity:.45}
.connect-options-button{width:34px;height:34px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--text-secondary);font-size:24px;cursor:pointer}
.ht-av-col .connect-options-button{width:44px;height:44px}
.ht-av-col .connect-presence{margin:0;max-width:100%;text-align:center;font-size:10px;line-height:1.35;overflow-wrap:anywhere}
.ht-av-col .connect-presence[data-online="true"]{color:var(--emerald)}
.dismissed-profile-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-subtle)}
.dismissed-profile-row>span{flex:1;min-width:0;overflow-wrap:anywhere}.connect-hidden-link{background:transparent;border:0;color:var(--text-muted);font:12px var(--font-body);padding:8px 0;margin-left:12px;cursor:pointer}

#dismissed-profiles-sheet .sheet{max-height:50dvh;overflow-y:auto;padding-bottom:max(20px,env(safe-area-inset-bottom))}.dismissed-profile-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}

/* Story controls share a single row below the progress bars. */
#story-overlay{touch-action:auto}
.story-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.story-header{position:relative;padding:14px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent)}
.story-progress-bars{display:flex;gap:3px;margin-bottom:8px}
.story-progress-track{flex:1;height:3px;border-radius:2px;overflow:hidden}
#story-prog{height:100%;background:#fff;width:0%;transition:none}
.story-toolbar{display:flex;align-items:center;gap:6px;min-height:44px}
#story-overlay .story-toolbar .story-control{width:40px;height:44px;min-width:40px;min-height:44px;padding:0;background:transparent}
.story-icon{display:block;position:relative;width:24px;height:24px;pointer-events:none}
.story-icon-dots::before{content:"";position:absolute;left:3px;top:10px;width:4px;height:4px;background:currentColor;border-radius:50%;box-shadow:7px 0 currentColor,14px 0 currentColor}
.story-icon-play::before{content:"";position:absolute;left:7px;top:4px;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.story-icon-pause::before,.story-icon-pause::after{content:"";position:absolute;top:4px;left:6px;width:4px;height:16px;border-radius:1px;background:currentColor}
.story-icon-pause::after{left:14px}
.story-toolbar .av{flex-shrink:0}
.story-author{flex:1;min-width:0;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.story-author-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.story-age{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:rgba(255,255,255,.8)}
#story-overlay .story-toolbar #story-sound-btn{width:auto;min-width:48px;font-size:11px}
.story-footer{position:relative;z-index:2;margin-top:auto;padding:12px max(14px,env(safe-area-inset-right)) 16px max(14px,env(safe-area-inset-left));background:linear-gradient(0deg,rgba(0,0,0,.7),transparent)}
.story-caption{max-height:25dvh;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:6px 0 12px;white-space:pre-wrap;overflow-wrap:anywhere;color:#fff;font-size:15px;line-height:1.5;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.story-reply-row{display:flex;gap:8px;align-items:center}
.story-views{display:flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:transparent;cursor:pointer;color:#fff;font-family:var(--font-body);font-size:14px;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px #000}
.story-views svg{display:block;width:22px;height:22px;flex-shrink:0;filter:drop-shadow(0 1px 2px #000)}
#story-reply{flex:1;min-width:0;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:22px;padding:9px 14px;color:#fff;font:14px var(--font-body);outline:none;-webkit-appearance:none}
.story-reply-send,.story-heart{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);border:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;cursor:pointer;flex-shrink:0}
.story-heart{font-size:22px;transition:transform .2s}
.story-publish-overlay .sheet{padding-left:20px;padding-right:20px}
[data-story-preview]{margin-bottom:16px}
[data-story-preview] img,[data-story-preview] video{display:block;width:100%;max-height:38dvh;object-fit:contain;border-radius:12px}
.story-optional{color:var(--text-muted);font-weight:400}
#story-caption-input{min-height:80px;max-height:22dvh;resize:vertical;margin-top:6px}
.story-publish-actions{display:flex;gap:10px;margin-top:16px}
.story-publish-actions .btn{flex:1;min-width:0}

.changelog-screen .sheet{padding:0;background:var(--bg-deep)}
.changelog-screen .sheet-form-header{padding:calc(20px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left))}
.changelog-screen .sheet-form-body{padding:14px max(24px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));scrollbar-gutter:stable}
.changelog-screen .changelog-list{display:flex;flex-direction:column;gap:10px}
.changelog-screen .changelog-list-item{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:16px 0;white-space:normal}
.changelog-screen .changelog-list-item strong{font-weight:500;color:var(--text-primary)}
.changelog-screen .changelog-list-item .field-hint{margin:0}
.changelog-viewer{z-index:820}
.changelog-viewer .sheet{position:relative;display:flex;flex-direction:column;max-width:none;width:100%;height:100%;max-height:none}
.changelog-viewer .sheet-form-body.changelog-scroll{padding:0;overflow-y:auto;flex:1;min-height:0;scrollbar-gutter:auto}
.changelog-cover{height:290px;position:relative;overflow:hidden;background:#060a25}
.changelog-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 57%}
.changelog-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,26,.3),transparent 35%,var(--bg-deep));pointer-events:none}
.changelog-brand,.changelog-version{position:absolute;left:max(24px,env(safe-area-inset-left));z-index:1;letter-spacing:0}
.changelog-brand{top:max(20px,env(safe-area-inset-top));font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--text-primary)}
.changelog-version{bottom:12px;color:#b4b4cc;font-size:12px}
.changelog-copy{padding:14px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left));width:100%;max-width:650px;margin:0 auto;overflow-wrap:anywhere}
.changelog-eyebrow{color:var(--violet-light);font-size:12px;letter-spacing:1px;font-weight:500;margin-bottom:7px}
.changelog-screen .sheet-title:focus,.changelog-copy h1:focus{outline:none}
.changelog-copy h1{font-family:var(--font-display);font-size:27px;line-height:1.25;font-weight:500;letter-spacing:-.4px}
.changelog-intro{color:var(--text-secondary);margin-top:10px;font-size:14px;line-height:1.55}
.changelog-date{font-size:12px;color:var(--text-secondary);margin-top:7px}
.changelog-section{margin-top:24px}
.changelog-section h2{font-size:15px;font-weight:500;color:var(--text-primary)}
.changelog-section ul{padding-left:18px;margin-top:8px;color:var(--text-secondary);font-size:14px;line-height:1.65}
.changelog-section li{padding-left:4px;margin:5px 0}
.changelog-section li::marker{color:var(--violet-light)}
.changelog-footer{flex-shrink:0;width:100%;padding:14px max(24px,env(safe-area-inset-right)) calc(max(14px,env(safe-area-inset-bottom)) + 8px) max(24px,env(safe-area-inset-left));background:var(--bg-deep)}
.changelog-footer .btn{width:100%;max-width:602px;margin:0 auto;display:flex;min-height:46px}
.changelog-form{max-width:650px;margin:0 auto;display:flex;flex-direction:column;gap:12px;min-width:0}
.changelog-form .fl{margin-bottom:-6px}
.changelog-form .field-hint{margin:0}
.changelog-form .ft{min-height:105px}
.changelog-cover-thumbnail{height:140px;width:100%;object-fit:cover;object-position:center 57%;border-radius:var(--radius-sm);background:var(--bg-card)}
.changelog-editor-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.changelog-editor-actions .btn{white-space:normal;min-height:44px;text-align:center;padding:11px 14px}
.changelog-start-option{display:flex;align-items:center;gap:10px;color:var(--text-primary);padding:12px 0;font-size:14px;line-height:1.5;overflow:hidden}
.changelog-start-option input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--violet);box-shadow:none}
.changelog-form-status{min-height:20px;font-size:13px;color:var(--text-secondary);line-height:1.5;overflow-wrap:anywhere}
#developer-access .sheet-form-body{display:flex;flex-direction:column;gap:12px}
@media(min-width:750px) and (orientation:landscape){.changelog-viewer .sheet-form-body.changelog-scroll{display:grid;grid-template-columns:minmax(280px,40%) 1fr;align-items:start}.changelog-cover{height:100%;min-height:360px}.changelog-cover img{position:absolute;inset:0;object-position:center 60%}.changelog-copy{padding-top:32px;padding-bottom:32px}}
@media(max-height:500px){.changelog-footer{padding-top:8px;padding-bottom:calc(max(8px,env(safe-area-inset-bottom)) + 8px)}.changelog-cover{height:200px}}
#story-viewers-sheet .sheet{max-height:50vh;max-height:50dvh;display:flex;flex-direction:column;overflow:hidden;gap:8px}
#story-viewers-sheet .sheet-handle,#story-viewers-sheet .sheet-title,#story-viewers-sheet .btn{flex-shrink:0;margin-bottom:0}
#story-viewers-sheet .story-viewer-rows{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.story-viewer-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-subtle)}
.story-viewer-row:last-child{border-bottom:0}
.story-viewer-info{flex:1;min-width:0;overflow-wrap:anywhere}
.story-viewer-time{display:block;margin-top:3px;color:var(--text-muted);font-size:11px;line-height:1.4}

/* Shared quiet loading/error states retain the app's existing button styling. */
.list-status{grid-column:1/-1;padding:24px 16px;text-align:center;color:var(--text-secondary);font:400 13px/1.6 var(--font-body);overflow-wrap:anywhere}
.list-status p{margin:0 0 12px}.list-status .btn{min-height:44px;max-width:100%;white-space:normal}
.sheet-form-body{scrollbar-gutter:stable}

/* Consistent application icons and touch targets. */
.app-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;vertical-align:middle;pointer-events:none}
.app-icon>svg{display:block;width:100%;height:100%;overflow:visible}
.app-icon[data-app-icon="heart"][data-icon-filled="true"]{color:#f43f5e}
.nav-tab .ni.app-icon{width:24px;height:24px}
.icon-btn,.post-menu-trigger,.notification-menu-trigger,.password-visibility,.tasks-close,.image-viewer-close,.video-viewer-close,.chat-recording-action,.comment-sticker-button,.comment-heart{min-width:48px;min-height:48px}
.icon-btn{width:48px;height:48px;flex-shrink:0}
.nav-tab{min-height:48px}
.post-menu-trigger{width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.pfooter .actbtn{min-height:48px;min-width:48px;gap:3px;justify-content:flex-start}
.pfooter .post-like-button{flex:0 0 auto;min-width:60px;width:auto}
.pfooter .post-like-count{min-width:4ch;text-align:left}
.pfooter .post-like-button>.app-icon{width:20px;height:20px;flex-basis:20px}
.comment-heart{flex-basis:48px;gap:2px}
.comment-heart>.app-icon{width:20px;height:20px;flex-basis:20px}
.post-comment-compose>button:last-child,.sendbtn{min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center}
.comment-sticker-button{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.message-menu-option{min-height:48px;display:flex;align-items:center;gap:12px}
.sticker-pack,.sticker-choice,.rx,.reel-reply-clear{min-width:48px;min-height:48px}
.voice-play,.voice-retry,.video-play,.video-enlarge{min-width:48px;min-height:48px}
.voice-player{grid-template-columns:48px minmax(0,1fr) auto}
.rec-btn{min-width:48px;min-height:48px}
.icon-control{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.voice-seek,.video-seek{min-height:44px}
.password-visibility{inset-inline-end:0}
.stable-post-image{position:relative;width:100%;max-height:none;min-height:0}
.stable-post-image>img{position:absolute;inset:0}
.post-image-frame.stable-post-image.media-placeholder{min-height:0}
.stable-post-image .post-image-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;background:var(--bg-card)}
.stable-post-image .post-image-error[hidden]{display:none}
@media(max-width:360px){.topbar-right{gap:4px}.pfooter .actbtn{padding-left:4px;padding-right:4px}}

/* Feed choices reuse the existing settings surfaces and accent tokens. */
.feed-preferences-heading{font-size:1rem;line-height:1.4;margin:0 0 8px;color:var(--text-primary)}
.feed-registration-choice>.field-hint,#feed-preferences-sheet .sheet-form-body>.field-hint{font-size:.8125rem;line-height:1.5;color:var(--text-secondary)}
.feed-mode-options{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:14px 0}
.feed-mode-card{display:flex;align-items:flex-start;gap:12px;width:100%;min-width:0;min-height:80px;padding:14px;text-align:left;color:var(--text-primary);font:inherit;background:var(--bg-card);border:1px solid var(--border-mid);border-radius:var(--radius-lg);cursor:pointer;transition:border-color 140ms ease,background-color 140ms ease}
.feed-mode-card.selected{border-color:var(--violet);background:var(--bg-elevated)}
.feed-mode-card:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.feed-mode-card>.feed-mode-icon{width:24px;height:24px;flex:0 0 24px;color:var(--violet-light);margin-top:2px}
.feed-mode-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:6px;overflow-wrap:anywhere}
.feed-mode-copy strong{font-size:.875rem;font-weight:600;line-height:1.4}
.feed-mode-copy>span{color:var(--text-secondary);font-size:.8125rem;line-height:1.5}
.feed-mode-card>.feed-mode-check{flex:0 0 20px;width:20px;height:20px;color:var(--violet-light);visibility:hidden;margin-top:2px}
.feed-mode-card.selected>.feed-mode-check{visibility:visible}
.feed-mode-card:disabled{cursor:wait}
.feed-preferences-status{font-size:.8125rem;line-height:1.5;color:var(--text-secondary);overflow-wrap:anywhere;margin:12px 0}
.feed-preferences-status:empty{display:none}
.feed-preferences-save{min-height:48px;margin:16px 0 8px}
.feed-notification-icon.app-icon{flex:0 0 32px;width:32px;height:32px;color:var(--violet-light)}
.feed-notification-description{display:block;line-height:1.5;overflow-wrap:anywhere;margin-top:6px}
.feed-notification-action{display:block;color:var(--violet-light);font-weight:600;margin-top:8px}
.reduce-motion .feed-mode-card{transition:none}
@media(prefers-reduced-motion:reduce){.feed-mode-card{transition:none}}

/* Optional registration details and an uninterrupted blocked-account settings surface. */
.registration-optional{font-weight:400;color:var(--text-muted);margin-left:4px}
#blocked-users-sheet.fullscreen-settings{background:transparent}
.blocked-user-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.blocked-user-row>span{min-width:0;overflow-wrap:anywhere}
.blocked-users-status{color:var(--text-secondary);line-height:1.5}

/* Short landscape sheets keep their 50% cap; scroll the complete content instead of collapsing the rows. */
@media(max-height:520px){
 #profile-follow-list .sheet{padding:8px 14px;gap:6px;overflow-y:auto;overscroll-behavior:contain}
 #profile-follow-list .sheet-handle{display:none}
 #profile-follow-list .sheet-title{margin:0}
 #profile-follow-list .follow-list-search{margin:0;min-height:40px;padding-top:8px;padding-bottom:8px}
 #profile-follow-list .follow-list-rows{flex-shrink:0;overflow:visible}
 #profile-follow-list .follow-list-close{margin:0}
}
.auth-signup{border:0;padding:4px;background:none;color:var(--violet-light);font:inherit;font-weight:600;cursor:pointer}
.report-field-error{color:var(--rose);font-size:13px;margin:8px 0}
.report-field-error[hidden]{display:none}

/* Attachment review stays inside the chat until the user presses Send. */
#attach-preview.camera-photo-preview #attach-thumb{width:96px!important;height:96px!important;flex:0 0 96px}
#attach-preview>div:nth-child(2){min-width:0}#attach-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-attachment-preview{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--border-subtle);background:var(--bg-card);min-width:0}
.chat-attachment-preview[hidden]{display:none}
.chat-photo-thumbnail{width:96px;height:96px;flex:0 0 96px;padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--bg-elevated)}
.chat-photo-thumbnail img{width:100%;height:100%;object-fit:contain}.chat-attachment-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--text-secondary)}
.chat-attachment-remove{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--text-secondary)}
.group-message-text{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-height:480px){#attach-preview.camera-photo-preview #attach-thumb,.chat-photo-thumbnail{width:64px!important;height:64px!important;flex-basis:64px!important}.chat-attachment-preview{padding-block:6px}}

/* A photo and its caption share one message, with normal chat alignment. */
.bubble.image-message{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:220px;max-width:75%}
.mrow.me .image-message,.group-message-own .image-message{align-items:flex-end}
.image-message>.chat-image-preview,.image-message>.group-message-image{width:100%;max-width:none;align-self:stretch}
.image-message>.group-message-image img{width:100%}
.group-message-content>.bubble.image-message{max-width:100%}
.chat-photo-caption{width:fit-content;max-width:100%;box-sizing:border-box;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}

/* Reel preparation and playback feedback uses the existing app controls. */
.reel-media-status{position:absolute;z-index:3;top:45%;left:12%;right:22%;padding:14px;border-radius:var(--radius-md);background:rgba(7,11,29,.88);color:#fff;text-align:center;display:grid;gap:10px}.reel-media-status[hidden]{display:none}.reel-preview-placeholder{display:grid;place-items:center;width:100%;height:100%;min-height:120px;color:var(--text-muted)}

/* Ordered media in existing post and reel cards. */
.media-carousel{position:relative;min-width:0;width:100%;margin:6px 0;border-radius:12px;overflow:hidden;background:var(--bg-deep);isolation:isolate}
.post-image-frame.media-carousel{background:transparent}
#page-container:has(#page-posts.active),#post-detail-content{scrollbar-gutter:stable}
.media-carousel-track{position:absolute;inset:0;display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y}
.media-carousel-track::-webkit-scrollbar{display:none}
.media-carousel-slide{position:relative;flex:0 0 100%;width:100%;height:100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.media-carousel-slide>img{display:block;width:100%;height:100%;object-fit:contain}
.post-image-frame.media-carousel .media-carousel-slide{height:auto;align-self:flex-start}
.post-image-frame.media-carousel .media-carousel-slide>img{height:auto}
.media-carousel-controls{position:absolute;z-index:4;bottom:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;max-width:calc(100% - 12px);padding:0 3px;border-radius:24px;background:rgba(7,9,27,.72);color:#fff}
.media-carousel-controls>button{width:44px;height:44px;min-width:44px;padding:0;border:0;background:transparent;color:inherit;font-size:26px;cursor:pointer}
.media-carousel-controls>button:disabled{opacity:.3;cursor:default}
.media-carousel-controls>div{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:44px}
.media-carousel-position{font-size:11px;font-variant-numeric:tabular-nums;line-height:1.2}
.media-carousel-dots{display:flex;gap:4px;padding:0 2px}
.media-carousel-dots i{display:block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35)}
.media-carousel-dots i.on{background:var(--violet-light,#a78bfa)}
.reel-card>.reel-carousel{position:absolute;inset:0;height:100%;margin:0;border-radius:0;aspect-ratio:auto!important}
.reel-carousel .media-carousel-controls{bottom:auto;top:10px}
.media-selection-list{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.media-selection-item{display:flex;align-items:center;gap:5px;padding:4px;border:1px solid var(--border-subtle);border-radius:12px;min-width:0;background:var(--bg-deep)}
.media-selection-thumb{flex:0 0 52px;width:52px;height:52px;border:0;padding:0;overflow:hidden;border-radius:8px;background:var(--bg-card);color:var(--text-primary);font-size:24px}
.media-selection-thumb img{width:100%;height:100%;object-fit:cover}
.media-selection-name{min-width:0;flex:1;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.media-selection-action{flex:0 0 44px;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--text-primary);font-size:22px;cursor:pointer}
.media-selection-action:disabled{opacity:.3;cursor:default}
.media-selection-action:focus-visible,.media-carousel-controls button:focus-visible{outline:2px solid var(--violet-light);outline-offset:-2px}
.media-selection-player{display:block;width:100%;max-height:220px;border-radius:12px;margin:8px 0}
@media(prefers-reduced-motion:reduce){.media-carousel-track{scroll-behavior:auto}}
.reduce-motion .media-carousel-track{scroll-behavior:auto}

.media-selection-error{display:block;white-space:normal;overflow-wrap:anywhere;font-size:11px;line-height:1.4;margin-top:4px;color:var(--danger,#f87171)}

/* Post gallery controls share the same safe-area layout as the enlarged image. */
.image-viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;min-height:56px;padding-top:4px;color:var(--text-primary)}
.image-viewer-toolbar button{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation}
.image-viewer-toolbar button:disabled{opacity:.35;cursor:default}
.image-viewer-toolbar button:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.image-viewer-toolbar .app-icon{width:25px;height:25px}
.image-viewer-toolbar .image-viewer-like.liked{color:#f43f5e}
.image-viewer-navigation{display:flex;align-items:center;justify-content:center;min-width:0;gap:2px}
.image-viewer-position{min-width:38px;text-align:center;font-size:13px;color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.image-viewer-next>.app-icon{transform:rotate(180deg)}
.image-viewer-actions-overlay{z-index:1200}

.post-image-count{display:block;margin:4px 0 8px;padding:8px 10px;min-height:44px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font:inherit;font-size:12px;cursor:pointer}.post-image-count:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* Shared dialog rhythm: the same headings, field and action sizes across features. */
.app-action-sheet .btn{min-height:48px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.app-action-sheet .message-menu-option{min-height:48px;line-height:1.4}.app-action-sheet .fi{min-height:48px;line-height:1.4}.app-action-sheet .ft{line-height:1.5}.app-action-sheet .sheet-form-header .sheet-title{margin:0}.app-action-sheet .language-edit-actions,.app-action-sheet .confirmation-actions{gap:12px}.app-action-sheet .btn:disabled{cursor:default;opacity:.55}.list-status{overflow-wrap:anywhere;line-height:1.5}.list-status-error .btn{min-height:48px}

.chat-mute-option{display:flex;align-items:center;gap:12px}.chat-mute-option .app-icon,.chat-muted-status{width:20px;height:20px;flex-shrink:0}.chat-muted-status{margin-left:7px;vertical-align:middle;color:var(--text-muted)}.profile-public-id{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:.8125rem;color:var(--text-secondary);margin:8px 0;overflow-wrap:anywhere}.profile-id-edit{background:none;border:0;color:var(--azure);padding:8px;min-height:44px}#profile-id-editor .btn{margin-top:12px}

.chat-attachment-strip{display:flex;gap:8px;overflow-x:auto;max-width:100%;flex-basis:100%;padding:4px}.chat-attachment-strip button{padding:0;flex:0 0 52px;width:52px;height:52px;border:1px solid var(--border-accent);border-radius:10px;background:var(--bg-deep)}.chat-attachment-strip img{width:100%;height:100%;object-fit:contain;border-radius:10px}#attach-preview:has(.chat-attachment-strip){flex-wrap:wrap}

/* Group polls, private account export and forwarding reuse Vareyo tokens. */
.poll-create-form,.account-export-form{display:flex;flex-direction:column;gap:12px;min-width:0;padding-bottom:24px}
.poll-option-editor{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.poll-option-editor .fl{grid-column:1/-1;margin-bottom:0}.poll-option-editor .fi{min-width:0}.poll-option-editor .btn{min-height:44px}
.poll-create-options{display:flex;flex-direction:column;gap:14px}.poll-checkbox-row{display:flex;align-items:center;gap:12px;min-height:48px;overflow-wrap:anywhere;cursor:pointer}.poll-checkbox-row input,.forward-target input{width:22px;height:22px;flex-shrink:0;accent-color:var(--violet)}
.group-poll{width:300px;max-width:100%;min-width:0;overflow-wrap:anywhere}.group-poll h3{font-size:1em;line-height:1.4;margin:10px 0;white-space:pre-wrap}.poll-heading{display:flex;justify-content:space-between;gap:12px;font-size:.8em;color:var(--text-secondary)}
.poll-answer-list{display:flex;flex-direction:column;gap:8px}.poll-answer{position:relative;isolation:isolate;display:flex;align-items:center;gap:9px;min-height:48px;padding:10px;border:1px solid var(--border-mid);border-radius:12px;overflow:hidden;cursor:pointer}.poll-answer input{flex-shrink:0;width:20px;height:20px;accent-color:var(--violet)}.poll-answer-text{min-width:0;flex:1;overflow-wrap:anywhere;white-space:pre-wrap}.poll-answer-count{flex-shrink:0;font-size:.8em}.poll-answer-bar{position:absolute;z-index:-1;inset:0 auto 0 0;background:var(--violet);opacity:.16;pointer-events:none}.poll-answer.selected{border-color:var(--violet)}.poll-vote-button{width:100%;min-height:44px;margin-top:8px}
.forwarded-label{font-size:.75em;color:var(--text-secondary);margin-bottom:6px;line-height:1.4}.forward-preview{padding:12px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-deep);white-space:pre-wrap;overflow-wrap:anywhere}.forward-targets{display:flex;flex-direction:column;gap:8px;margin:12px 0}.forward-target{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer}.forward-target span{flex:1;min-width:0;overflow-wrap:anywhere}.forward-target small{color:var(--text-muted);overflow-wrap:anywhere}.export-status{white-space:pre-wrap;overflow-wrap:anywhere;min-height:24px}

.poll-create-form .field-error{color:var(--coral,#ff6b81);overflow-wrap:anywhere;white-space:pre-wrap}

/* Onboarding: supplied artwork with translated interface and responsive controls. */
#welcome-screen{background:#0a0a0f;isolation:isolate}
#welcome-screen .welcome-bg{background:radial-gradient(ellipse at 35% 26%,rgba(104,71,230,.2),transparent 54%),radial-gradient(ellipse at 85% 39%,rgba(0,190,239,.1),transparent 47%),linear-gradient(180deg,#0e0d1b 0%,#0a0a0f 80%)}
#welcome-screen .welcome-content{max-width:520px;width:100%;height:100dvh;min-height:530px;padding:max(10px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));animation:none}
#onboarding-stage{flex:1;min-height:0;display:flex;flex-direction:column}
.onboarding-toolbar{min-height:44px;padding:0;gap:16px}
.onboarding-brand-wrap{display:flex;align-items:center;gap:9px;color:#6bc5ff}
.onboarding-brand-wrap .onboarding-icon{width:24px;height:24px}
.onboarding-brand-wrap svg{width:24px;height:24px;stroke-width:1.5}
.onboarding-brand{font:800 24px var(--font-display);letter-spacing:-.7px;background:linear-gradient(100deg,#9b8cfc,#25c8f1);color:transparent;background-clip:text;-webkit-background-clip:text}
.onboarding-text-button{font:500 13px var(--font-body);color:#a8a6bb;min-height:44px;padding:10px 0}
.onboarding-cover-layout{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;position:relative;padding:0}
.onboarding-image-frame{flex:1 1 auto;align-self:stretch;min-height:160px;width:100%;max-width:420px;max-height:410px;position:relative;margin:0 auto}
.onboarding-image-frame:before{content:"";position:absolute;inset:12% 3% 5%;background:radial-gradient(ellipse,rgba(117,58,239,.12),transparent 67%);pointer-events:none}
.onboarding-welcome-image{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(29,45,105,.18))}
.onboarding-cover-copy{position:static;transform:none;width:100%;max-width:390px;padding:0 0 8px;flex-shrink:0}
.onboarding-cover-copy h1{font:800 clamp(22px,6.95vw,30px)/1.12 var(--font-display);letter-spacing:-1.15px;color:#f5f4ff;max-width:none;margin:0 auto 12px}
.onboarding-cover-copy h1 span,.onboarding-page h1 span{color:#80ccff}
.onboarding-cover-copy p{color:#aaa7be;font-size:14px;line-height:1.55;max-width:300px;margin:0 auto;letter-spacing:.03px}
.onboarding-cover-controls{width:100%;max-width:390px;padding:0;flex-shrink:0;margin-top:6px}
.onboarding-progress{height:18px;gap:6px;margin:0 0 11px}
.onboarding-progress span{height:4px;width:6px;border-radius:5px;background:#303044}
.onboarding-progress span.current{width:24px;background:linear-gradient(90deg,#9b83ff,#28c8ed)}
.onboarding-progress span.complete{background:#6a62bd}
#onboarding-stage .onboarding-primary{min-height:54px;padding:15px 20px;border-radius:18px;background:linear-gradient(105deg,#8658ed 0%,#6364ed 49%,#12b9e8 100%);border:1px solid rgba(166,172,255,.27);box-shadow:0 6px 25px rgba(80,75,195,.19);font:700 15px var(--font-body);gap:12px;line-height:1.25;color:#fff}
.onboarding-primary .onboarding-icon,.onboarding-primary svg{width:20px;height:20px;flex-shrink:0}
.onboarding-login{max-width:none;font-size:12px;min-height:44px;margin:3px 0 0;color:#aaa7be}
.onboarding-login strong{font-weight:600;color:#f1f0fa;margin-left:3px}
.onboarding-legal{font:400 10px/1.6 var(--font-body);color:#77758d;padding:3px 0 5px;flex-shrink:0}
.onboarding-legal a{color:#9290a8!important;text-decoration:none}
.onboarding-legal span{color:#77758d!important}
.onboarding-page{width:100%;max-width:390px;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 0 0;margin:0 auto}
.onboarding-hero{width:68px;height:68px;border-radius:23px;margin:0 0 20px;border:1px solid rgba(123,120,241,.2);background:linear-gradient(140deg,rgba(126,81,238,.2),rgba(30,169,222,.1));color:#93c7ff;flex-shrink:0}
.onboarding-hero .onboarding-icon,.onboarding-hero svg{width:34px;height:34px}
.onboarding-page h1{font:800 clamp(28px,7.5vw,34px)/1.12 var(--font-display);letter-spacing:-1px;margin:0 0 14px;color:#f5f4ff;outline:none}
.onboarding-description{font-size:14px;line-height:1.55;color:#aaa7be;margin:0 0 24px;max-width:295px}
.onboarding-features{gap:10px;width:100%;margin:0;padding:0}
.onboarding-feature{padding:14px 15px;gap:14px;border:1px solid rgba(153,146,203,.12);border-radius:18px;background:rgba(28,27,44,.83);align-items:center}
.onboarding-feature-icon{color:#99a1ff;width:25px;flex-shrink:0}
.onboarding-feature-icon svg,.onboarding-feature-icon .onboarding-icon{width:25px;height:25px}
.onboarding-feature h2{font-size:14px;font-weight:600;line-height:1.35;margin:0 0 4px;letter-spacing:.05px}
.onboarding-feature p{font-size:12px;line-height:1.5;color:#a7a4ba;margin:0}
.onboarding-page-controls{width:100%;padding:20px 0 0;margin-top:auto;display:block}
@media(min-height:850px) and (orientation:portrait){.onboarding-image-frame{max-height:510px}.onboarding-cover-copy{padding-bottom:12px}.onboarding-cover-controls{margin-top:10px}.onboarding-page{padding-top:35px}.onboarding-features{gap:13px}.onboarding-feature{padding:18px 16px}}
@media(max-height:650px) and (orientation:portrait){#welcome-screen .welcome-content{padding-top:5px;padding-inline:20px}.onboarding-image-frame{min-height:130px;max-height:300px}.onboarding-cover-copy h1{font-size:clamp(22px,6.95vw,28px);margin-bottom:8px}.onboarding-cover-copy p{font-size:12px;max-width:265px}.onboarding-cover-copy{padding-bottom:4px}.onboarding-cover-controls{margin-top:3px}.onboarding-progress{margin-bottom:7px;height:14px}#onboarding-stage .onboarding-primary{min-height:48px;padding:12px 17px}.onboarding-login{margin-top:0;min-height:44px;font-size:11px}.onboarding-legal{font-size:9px;padding-bottom:2px}.onboarding-page{padding-top:5px}.onboarding-hero{width:48px;height:48px;border-radius:16px;margin-bottom:10px}.onboarding-hero svg{width:26px;height:26px}.onboarding-page h1{font-size:26px;margin-bottom:9px}.onboarding-description{font-size:12px;line-height:1.45;margin-bottom:12px}.onboarding-feature{padding:10px 12px;gap:10px;border-radius:15px}.onboarding-feature h2{font-size:12px;margin-bottom:3px}.onboarding-feature p{font-size:11px;line-height:1.4}.onboarding-features{gap:7px}.onboarding-page-controls{padding-top:12px}}
@media(orientation:landscape) and (max-height:600px){#welcome-screen .welcome-content{max-width:1000px;min-height:340px;padding-top:4px;padding-inline:24px;height:100dvh}.onboarding-toolbar{min-height:40px}.onboarding-cover-layout{display:grid;grid-template-columns:minmax(150px,40%) minmax(260px,390px);grid-template-rows:1fr auto;gap:0 30px;align-content:center;justify-content:center}.onboarding-image-frame{grid-column:1;grid-row:1/3;align-self:stretch;min-width:0;min-height:0;height:100%;max-height:none;width:100%;margin:0}.onboarding-cover-copy{grid-column:2;grid-row:1;align-self:end;padding-bottom:14px;width:100%}.onboarding-cover-copy h1{font-size:30px;margin-bottom:9px}.onboarding-cover-copy p{font-size:12px;max-width:290px}.onboarding-cover-controls{grid-column:2;grid-row:2;align-self:start;width:100%;margin:0}.onboarding-progress{height:12px;margin-bottom:6px}#onboarding-stage .onboarding-primary{min-height:44px;padding:10px 18px}.onboarding-login{min-height:44px;margin:0}.onboarding-legal{padding:2px 0 0;font-size:9px}.onboarding-page{max-width:880px;display:grid;grid-template-columns:1fr 1.25fr;grid-template-rows:1fr auto;gap:0 32px;align-content:center;align-items:center;padding:4px 0 0}.onboarding-page .onboarding-hero{display:none}.onboarding-page h1{grid-column:1;grid-row:1;align-self:start;font-size:29px;margin:22px 0 12px}.onboarding-description{grid-column:1;grid-row:1;align-self:center;font-size:12px;line-height:1.5;max-width:260px;padding-top:72px;margin:0}.onboarding-features{grid-column:2;grid-row:1;gap:7px}.onboarding-feature{padding:10px 12px;gap:10px}.onboarding-feature h2{font-size:12px}.onboarding-feature p{font-size:11px}.onboarding-page-controls{grid-column:1/3;grid-row:2;display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:32px;padding-top:8px;margin-top:0}.onboarding-page-controls .onboarding-progress{grid-column:1/3;margin-bottom:4px;height:10px}.onboarding-page-controls .onboarding-login{margin:0}.onboarding-primary{min-height:44px}}
@media(prefers-reduced-motion:reduce){#welcome-screen *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the chat rules readable without dominating the conversation. */
#onboarding-stage{flex:1 0 auto}
.onboarding-cover-layout,.onboarding-page{flex:1 0 auto}
.onboarding-page h1,.onboarding-description,.onboarding-features,.onboarding-page-controls{flex-shrink:0}
.onboarding-page h1,.onboarding-cover-copy h1,.onboarding-feature h2,.onboarding-feature p{overflow-wrap:anywhere}
@media(orientation:landscape) and (max-height:600px){
 .onboarding-page{grid-template-rows:auto 1fr auto}
 .onboarding-page h1{grid-row:1;align-self:end;margin:12px 0 8px}
 .onboarding-description{grid-row:2;align-self:start;padding-top:0}
 .onboarding-features{grid-row:1/3}
 .onboarding-page-controls{grid-row:3}
}
.chat-rules-image{width:100%;max-width:192px;height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto 14px;border-radius:0}
@media(orientation:landscape) and (max-height:600px){.chat-rules-image{max-width:112px;margin-bottom:10px}}

/* Location and public ID have separate centered rows and full touch targets. */
.profile-meta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-width:0}
.profile-meta .ploc:empty{display:none}
.profile-meta:has(.ploc:empty):not(:has(.profile-public-id)){display:none}
.profile-meta .profile-public-id{margin:0;gap:5px;max-width:100%;min-width:0;font-size:12px;line-height:1.35}
.profile-meta .profile-public-id>span{min-width:0;overflow-wrap:anywhere}
.profile-meta .profile-id-edit{padding:2px 6px;min-width:44px;min-height:44px;flex-shrink:0}

/* Personal notebook: the existing fullscreen and dialog lifecycle is shared. */
.profile-learning-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:10px;width:100%;max-width:460px;margin:0 auto}
.profile-learning-actions .profile-learning-level{flex:1 1 145px;min-height:48px;margin:0;padding:9px 12px}
.profile-notebook-button{gap:8px}
.profile-notebook-button .app-icon{width:22px;height:22px;flex:none;color:var(--violet-light)}
.notebook-screen{z-index:1200}
.notebook-screen.fullscreen-settings>.sheet{padding:calc(16px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:var(--bg-void)}
.notebook-screen .sheet-form-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;background:transparent}
.notebook-screen .sheet-title{background:none;box-shadow:none;overflow-wrap:anywhere;min-width:0}
.notebook-screen .sheet-form-body{padding:0 2px 12px;scrollbar-gutter:stable}
.notebook-screen .sheet-form-header,.notebook-screen .sheet-form-body,.notebook-screen .notebook-footer{width:100%;max-width:none;margin-left:0;margin-right:0}
.notebook-subtitle{color:var(--text-secondary);font-size:14px;margin:0 0 18px;line-height:1.5}
.notebook-search{position:relative;display:flex;align-items:center;margin-bottom:14px}
.notebook-search>.app-icon{position:absolute;left:14px;width:20px;height:20px;color:var(--text-secondary);pointer-events:none}
.notebook-search .fi{padding-left:44px;min-width:0;box-shadow:none}
.notebook-screen .fi,.notebook-screen .ft{font-size:16px;box-shadow:none;line-height:1.5}
.notebook-filters{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 0 8px;scrollbar-width:thin}
.notebook-filter{flex:none;min-height:44px;padding:9px 16px;border:1px solid var(--border-mid);border-radius:999px;background:var(--bg-card);color:var(--text-secondary);font:500 13px var(--font-body);cursor:pointer}
.notebook-filter[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
.notebook-count{color:var(--text-secondary);font-size:13px;margin:12px 0}
.notebook-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.notebook-card{padding:14px 16px 16px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-card);min-width:0;overflow-wrap:anywhere}
.notebook-card-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:4px}
.notebook-note-name{flex:1;min-width:0;border:0;background:none;color:var(--text-primary);font:700 18px/1.4 var(--font-body);text-align:start;overflow-wrap:anywhere;min-height:44px;padding:6px 0;cursor:pointer}
.notebook-more{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--text-secondary);border-radius:12px;cursor:pointer}
.notebook-more .app-icon{width:22px;height:22px}
.notebook-badge{display:inline-block;max-width:100%;font-size:12px;line-height:1.4;padding:3px 10px;border:1px solid var(--border-accent);border-radius:999px;color:var(--violet-light);background:var(--violet-soft)}
.notebook-badge[data-category="adjective"]{color:var(--azure);border-color:rgba(56,189,248,.3);background:var(--azure-soft)}
.notebook-badge[data-category="noun"]{color:var(--amber);border-color:rgba(251,191,36,.25);background:rgba(251,191,36,.08)}
.notebook-screen .notebook-note-text{color:var(--text-secondary);font-size:14px;line-height:1.6;white-space:pre-wrap;margin-top:10px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.notebook-footer{flex:none;display:flex;flex-direction:column;gap:8px;padding-top:12px}
.notebook-private{color:var(--text-secondary);font-size:11px;line-height:1.5;text-align:center;margin:0}
.notebook-screen .notebook-footer .btn{min-height:48px;font-size:15px;padding:12px 16px;white-space:normal}
.notebook-screen .notebook-footer .app-icon{width:20px;height:20px;flex:none}
.notebook-form{padding-top:4px}
.notebook-form .fl{text-transform:none;letter-spacing:0;font-size:14px;line-height:1.5;color:var(--text-primary);margin-bottom:8px}
.notebook-form .fg{margin-bottom:20px}
.notebook-category{width:100%;min-height:48px;line-height:1.5;white-space:normal;text-align:start;font-size:16px;box-shadow:none}
.notebook-screen .ft{resize:vertical;min-height:180px;max-height:55dvh}
.notebook-counter{color:var(--text-secondary);font-size:12px;text-align:end;margin-top:8px}
.notebook-error{color:var(--coral);font-size:13px;line-height:1.5;overflow-wrap:anywhere;margin-top:6px}
.notebook-error:empty{display:none}
.notebook-delete{background:none;border:0;box-shadow:none;min-height:48px;color:var(--coral);font:500 14px var(--font-body);padding:10px 12px;cursor:pointer}
.notebook-status{font-size:14px;line-height:1.6;color:var(--text-secondary);overflow-wrap:anywhere}
.notebook-status:not(:empty){padding:16px 0}.notebook-status .btn{margin-top:12px}
.notebook-options{z-index:1600}.notebook-options .sheet-title{background:none;box-shadow:none;overflow-wrap:anywhere}
.notebook-options .message-menu-option{display:flex;padding:12px 0;font-size:15px;line-height:1.5}
.notebook-destructive{color:var(--coral)}
.notebook-screen button:focus-visible,.notebook-options button:focus-visible{outline:2px solid var(--violet-light);outline-offset:2px}
@media(min-width:700px){.notebook-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:359px){.notebook-screen.fullscreen-settings>.sheet{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.notebook-card{padding:12px}.notebook-filter{padding-inline:12px}}
@media(orientation:landscape) and (max-height:500px){.notebook-screen.fullscreen-settings>.sheet{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}.notebook-screen .sheet-form-header{padding-bottom:6px}.notebook-screen .notebook-footer{gap:4px;padding-top:6px}.notebook-private{font-size:10px}.notebook-screen .ft{min-height:120px}}

/* The active marker follows the round photo, not the frame canvas. */
.nav-profile-tab.active .nav-profile-avatar.avatar-framed{box-shadow:none}.nav-profile-tab.active .nav-profile-avatar.avatar-framed>:first-child:not(.avatar-frame-overlay){box-shadow:0 0 0 2px var(--violet-light)}

/* Connect filters share the fullscreen settings lifecycle and custom pickers. */
#connect-filters-sheet.fullscreen-settings>.sheet{height:100%;max-height:100%;overflow:hidden;background:var(--bg-void);padding:calc(20px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
#connect-filters-sheet .sheet-form-header{display:block;background:transparent;padding-bottom:0}#connect-filters-sheet .sheet-title{font-size:22px;line-height:1.35;margin-bottom:8px}#connect-filters-sheet .sheet-form-header .field-hint{margin:0 0 10px;line-height:1.6}
#connect-filters-sheet .sheet-form-body{display:flex;flex-direction:column;overflow:hidden;min-height:0}#connect-filter-form{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
.connect-filter-tabs{display:flex;gap:26px;flex:none;border-bottom:1px solid var(--border-mid);margin-bottom:0}.connect-filter-tabs button{background:none;border:0;border-bottom:2px solid transparent;min-height:48px;padding:10px 0 12px;color:var(--text-secondary);font:inherit;font-size:14px;font-weight:600;cursor:pointer}.connect-filter-tabs button[aria-selected="true"]{color:var(--text-primary);border-bottom-color:var(--violet-light)}.connect-filter-tabs .premium-crown{width:16px;height:16px;flex-basis:16px}
.connect-filter-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:20px 3px 20px 0;scrollbar-width:thin;scrollbar-color:var(--border-mid) transparent}.connect-filter-pane[hidden]{display:none}.connect-filter-pane{min-width:0}.connect-filter-section{min-width:0;margin-bottom:24px}.connect-filter-heading{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin:0 0 4px}.connect-filter-section h3{font-size:14px;line-height:1.5;margin:0 0 12px}.connect-filter-section .connect-filter-heading{font-size:11px;margin-bottom:4px}
.connect-filter-choice{position:relative;display:block;text-align:start;width:100%;background:transparent;border:0;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);padding:13px 22px 13px 0;font:inherit;cursor:pointer;min-height:62px}.connect-filter-label{display:block;color:var(--text-secondary);font-size:12px;margin-bottom:4px}.connect-filter-value{display:block;font-size:15px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}.connect-filter-chevron{position:absolute;right:4px;bottom:22px;width:7px;height:7px;transform:rotate(45deg);border-right:1.5px solid var(--text-secondary);border-bottom:1.5px solid var(--text-secondary)}.connect-filter-choice:disabled{opacity:.5;cursor:default}
.connect-filter-timezone{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;line-height:1.5;padding:20px 0 4px;min-height:48px}.connect-filter-timezone input{width:20px;height:20px;flex:none;accent-color:var(--violet-light)}
.connect-filter-premium-intro h3{font-size:16px;margin:0 0 6px}.connect-filter-premium-intro p{margin:0;line-height:1.6}.connect-filter-access{margin:10px 0 22px}.connect-filter-access:empty{display:none}.connect-filter-premium-intro{margin-bottom:24px}.connect-filter-pane[data-locked="true"] .connect-filter-section{opacity:.55}
.connect-filter-age-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.connect-filter-any{background:none;border:0;min-height:44px;padding:4px 8px;font:inherit;font-size:12px;color:var(--text-secondary);cursor:pointer}.connect-filter-any[aria-pressed="true"]{color:var(--violet-light)}.connect-filter-age-values{display:flex;gap:25px}.connect-filter-age-values label{display:block;min-width:0;flex:1;font-size:12px;color:var(--text-secondary)}.connect-filter-age-number,.connect-filter-city{appearance:none;-webkit-appearance:none;display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--border-mid);border-radius:0;padding:9px 0;color:var(--text-primary);font:inherit;font-size:16px;line-height:1.5;outline-offset:3px}.connect-filter-age-number{appearance:textfield}.connect-filter-age-number::-webkit-inner-spin-button,.connect-filter-age-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.connect-filter-age-number[aria-invalid="true"]{border-color:var(--rose)}.connect-filter-city::placeholder{color:var(--text-muted)}
.connect-filter-range{position:relative;height:48px;min-height:48px;margin-top:8px}.connect-filter-range-track{position:absolute;left:0;right:0;top:22px;height:3px;border-radius:9px;background:linear-gradient(to right,var(--border-mid) 0 var(--cf-min,0%),var(--violet-light) var(--cf-min,0%) var(--cf-max,100%),var(--border-mid) var(--cf-max,100%) 100%)}.connect-filter-age-slider{appearance:none;-webkit-appearance:none;position:absolute;left:0;top:0;width:100%;height:48px;padding:0;margin:0;background:none;pointer-events:none}.connect-filter-age-slider::-webkit-slider-runnable-track{background:transparent;border:0;height:3px}.connect-filter-age-slider::-moz-range-track{background:transparent;border:0;height:3px}.connect-filter-age-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border:0;border-radius:50%;background:var(--violet-light);pointer-events:auto;cursor:grab}.connect-filter-age-slider::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--violet-light);pointer-events:auto;cursor:grab}.connect-filter-age-slider:focus-visible{outline:2px solid var(--violet-light);outline-offset:-3px}
.connect-filter-genders{display:flex;flex-wrap:wrap;gap:10px}.connect-filter-genders button{background:none;border:1px solid var(--border-mid);border-radius:24px;min-height:44px;padding:8px 15px;color:var(--text-primary);font:inherit;font-size:13px;cursor:pointer}.connect-filter-genders button[aria-checked="true"]{background:var(--theme-button,var(--violet));border-color:transparent;color:var(--theme-on-button,#fff)}.connect-filter-privacy{font-size:12px;line-height:1.7;color:var(--text-secondary);border-top:1px solid var(--border-subtle);padding-top:20px;margin:28px 0 0}
.connect-filter-status{font-size:13px;line-height:1.5;color:var(--rose);flex:none;margin:0;overflow-wrap:anywhere}.connect-filter-status:not(:empty){padding:8px 0}.connect-filter-actions{display:flex;gap:10px;flex:none;padding:14px 0 4px;border-top:1px solid var(--border-subtle);background:var(--bg-void)}.connect-filter-actions .btn{min-height:48px;min-width:0;padding:10px 12px;box-shadow:none;white-space:normal;overflow-wrap:anywhere}.connect-filter-actions .btn-p{flex:1}.connect-filter-actions .btn-s{background:transparent;flex:0 1 130px}.connect-filter-tabs button:focus-visible,.connect-filter-choice:focus-visible,.connect-filter-genders button:focus-visible,.connect-filter-any:focus-visible{outline:2px solid var(--violet-light);outline-offset:2px}
@media(min-width:700px){.connect-filter-pane:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}.connect-filter-premium-intro,.connect-filter-access,.connect-filter-privacy{grid-column:1/-1}.connect-filter-actions{justify-content:flex-end}.connect-filter-actions .btn{max-width:260px}.connect-filter-actions .btn-s{max-width:160px}}
@media(max-height:500px){#connect-filters-sheet.fullscreen-settings>.sheet{padding-top:calc(12px + env(safe-area-inset-top))}#connect-filters-sheet .sheet-title{font-size:19px;margin-bottom:3px}#connect-filters-sheet .sheet-form-header .field-hint{margin-bottom:4px}.connect-filter-tabs button{min-height:44px;padding:7px 0}.connect-filter-scroll{padding-top:12px}.connect-filter-actions{padding-top:8px}}

/* One theme-aware accent for active indicator lines throughout the app. */
.lab-tab,.connect-filter-tabs button{position:relative}
.lab-tab[aria-selected=true],.connect-filter-tabs button[aria-selected=true]{border-bottom-color:transparent}
.lab-tab[aria-selected=true]::after,.connect-filter-tabs button[aria-selected=true]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:var(--accent-line-height);background:var(--accent-gradient);border-radius:3px;pointer-events:none}
.profile-meta .profile-public-id.profile-id-own{position:relative;width:max-content;max-width:100%;min-height:24px;padding-inline:44px;gap:0}
.profile-meta .profile-id-own .profile-id-edit{position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0}
.profile-id-edit .app-icon{width:17px;height:17px}

.sticker-packs{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:4px;overflow:visible}
.sticker-pack{position:relative;flex-direction:column;justify-content:flex-start;gap:4px;min-width:0;padding:6px 3px 10px;border:0;border-radius:0;font-size:12px;line-height:1.35;text-align:center;overflow-wrap:anywhere}
.sticker-pack img{width:32px;height:32px;border-radius:6px;flex:none}.sticker-pack[aria-selected=true]{background:transparent;border-color:transparent}
.sticker-pack[aria-selected=true]::after{content:'';position:absolute;bottom:-1px;left:3px;right:3px;height:var(--accent-line-height);background:var(--accent-gradient);border-radius:3px}
.sticker-grid[data-premium-locked=true] .sticker-choice{opacity:.5}.sticker-access-status{font-size:12px;color:var(--text-secondary);min-height:0;margin:4px 0 0}.sticker-access-status:empty{display:none}
.prof-tab{position:relative}.prof-tab.active{border-bottom-color:transparent}.prof-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:var(--accent-line-height);background:var(--accent-gradient);border-radius:3px}
.sticker-grid[data-pack=premium]{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:18px;padding:18px 6px 20px}
.sticker-grid[data-pack=premium] .sticker-choice{align-self:start;width:100%;max-width:160px;max-height:none;padding:10px}
@media(orientation:landscape) and (max-height:520px) and (min-width:560px){.sticker-grid[data-pack=premium]{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Premium hub: scoped presentation; purchase stays disabled throughout beta. */
#premium-hub.fullscreen-settings>.sheet{padding:0;background:var(--bg-void)}
#premium-hub .ph-header{width:100%;max-width:940px;margin:0 auto;position:relative;padding:calc(16px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));background:var(--bg-void)}
#premium-hub .sheet-title{font:600 21px/1.4 var(--font-display);padding-right:48px;margin:0}
#premium-hub .ph-close{display:grid;place-items:center;position:absolute;top:calc(9px + env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text-secondary)}
#premium-hub .ph-close .app-icon{width:21px;height:21px}
#premium-hub .ph-tabs{display:flex;gap:26px;align-items:center;border-bottom:1px solid var(--border-subtle);margin-top:13px}
#premium-hub .ph-tab{min-height:48px;padding:10px 0;position:relative;background:none;border:0;font:500 13px/1.45 var(--font-body);color:var(--text-muted)}
#premium-hub .ph-tab[aria-pressed=true]{color:var(--text-primary)}
#premium-hub .ph-tab[aria-pressed=true]::after{position:absolute;content:"";left:0;right:0;bottom:-1px;height:var(--accent-line-height,2.5px);border-radius:3px;background:var(--accent-gradient)}
#premium-hub .ph-scroll{padding:0 max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left));width:100%;max-width:940px;margin:0 auto;scrollbar-gutter:stable}
#premium-hub .ph-state{font-size:12px;color:var(--text-secondary);line-height:1.5}
#premium-hub .ph-state:not(:empty){padding-top:12px}
#premium-hub .ph-active{color:var(--azure);font-size:12px}
#premium-hub .ph-retry{background:none;border:0;color:var(--azure);min-height:44px;padding:6px 10px;font:inherit}
#premium-hub .ph-hero{padding:24px 0 5px}
#premium-hub .ph-eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--azure);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
#premium-hub .ph-eyebrow::before{content:"";display:inline-block;width:23px;height:2px;border-radius:2px;background:var(--accent-gradient)}
#premium-hub .ph-hero h2{font:600 clamp(26px,7vw,34px)/1.18 var(--font-display);letter-spacing:-.8px;color:var(--text-primary);max-width:350px;margin:12px 0}
#premium-hub .ph-hero p{font-size:14px;color:var(--text-secondary);margin:0}
#premium-hub .ph-features{padding-top:10px}
#premium-hub .ph-feature{padding:17px 0;border-bottom:1px solid var(--border-subtle)}
#premium-hub .ph-feature h3{font:500 14px/1.45 var(--font-body);margin:0 0 5px;color:var(--text-primary)}
#premium-hub .ph-feature p{font-size:13px;line-height:1.6;color:var(--text-secondary);margin:0}
#premium-hub .ph-gallery-link,#premium-hub .ph-back{display:block;width:100%;min-height:48px;padding:13px 0;background:none;border:0;text-align:start;font:500 13px/1.5 var(--font-body);color:var(--azure)}
#premium-hub .ph-content-head{padding:23px 0 17px}
#premium-hub .ph-content-head h2,#premium-hub .ph-detail-title{font:600 23px/1.3 var(--font-display);letter-spacing:-.4px;margin:0 0 6px;color:var(--text-primary)}
#premium-hub .ph-content-head p,#premium-hub .ph-detail-copy{font-size:13px;color:var(--text-secondary);margin:0}
#premium-hub .ph-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 13px}
#premium-hub .ph-content-tile{min-width:0;padding:0 0 3px;text-align:start;background:none;border:0;color:var(--text-primary)}
#premium-hub .ph-content-tile h3{font:500 13px/1.45 var(--font-body);margin:8px 0 2px;overflow-wrap:anywhere}
#premium-hub .ph-content-tile p{font-size:11px;line-height:1.5;color:var(--text-secondary);margin:0}
#premium-hub .ph-tile-art{height:124px;display:flex;align-items:center;justify-content:center;position:relative;border-radius:13px;overflow:hidden;background:var(--bg-card)}
#premium-hub .ph-content-tile:focus-visible{outline:2px solid var(--violet-light);outline-offset:4px;border-radius:13px}
#premium-hub .ph-theme-grid{height:100%;width:100%;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
#premium-hub .ph-theme-mini{position:relative;border-radius:7px;overflow:hidden;background:var(--ph-sample-bg)}
#premium-hub .ph-mini-brand{position:absolute;top:9px;left:8px;width:23px;height:3px;border-radius:2px;background:var(--ph-sample-light)}
#premium-hub .ph-mini-received{position:absolute;top:21px;left:8px;width:33px;height:9px;border-radius:4px;background:var(--ph-sample-accent);opacity:.35}
#premium-hub .ph-mini-sent{position:absolute;bottom:9px;right:7px;width:30px;height:10px;border-radius:4px 4px 2px 4px;background:var(--ph-sample-light)}
#premium-hub .ph-sticker-collage{height:100%;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:3px 11px}
#premium-hub .ph-sticker-collage img{display:block;width:100%;height:57px;object-fit:contain}
#premium-hub .ph-chat-sample{position:relative;height:100%;width:100%;display:flex;align-items:center;isolation:isolate}
#premium-hub .ph-chat-sample>img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;opacity:.65;z-index:-1}
#premium-hub .ph-chat-copy{padding:10px;width:100%;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
#premium-hub .ph-chat-message{max-width:96%;background:#1b1828;color:#f5eefc;border:1px solid #6e4e90;border-radius:9px 9px 9px 3px;font-size:11px;line-height:1.4;padding:6px 8px;overflow-wrap:anywhere}
#premium-hub .ph-chat-sent{align-self:flex-end;background:linear-gradient(115deg,#6c4aa8,#a374c1);border-color:#dfb5dc;border-radius:9px 9px 3px 9px}
#premium-hub .ph-frame-collage{height:100%;width:100%;position:relative}
#premium-hub .ph-frame{position:relative;aspect-ratio:1;min-width:0;width:100%}
#premium-hub .ph-frame-collage>.ph-frame{position:absolute;width:66%;top:5%;left:-3%}
#premium-hub .ph-frame-collage>.ph-frame:last-child{width:61%;left:auto;right:-2%;top:13%}
#premium-hub .ph-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
#premium-hub .ph-frame-avatar{position:absolute;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#b8c5ed,#6a69ae);color:#fff;font:500 21px/1 var(--font-body)}
#premium-hub .ph-lab-sample{padding:14px 13px;width:100%}
#premium-hub .ph-lab-sample strong{font-size:12px;font-weight:500;display:block;margin-bottom:8px}
#premium-hub .ph-mini-copy{font-size:11px;color:var(--text-secondary);margin:0}
#premium-hub .ph-sample-progress{height:4px;border-radius:4px;background:var(--bg-elevated);margin:8px 0}
#premium-hub .ph-sample-progress span{display:block;width:60%;height:100%;border-radius:inherit;background:var(--accent-gradient)}
#premium-hub .ph-sample-task{font-size:11px;line-height:1.5;margin:3px 0;color:var(--text-primary)}
#premium-hub .ph-filter-sample{padding:8px 13px;width:100%}
#premium-hub .ph-filter-sample div{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 0;border-bottom:1px solid var(--border-subtle);font-size:11px}
#premium-hub .ph-filter-sample div:last-child{border:0}
#premium-hub .ph-filter-sample span{color:var(--text-secondary)}
#premium-hub .ph-filter-sample strong{font-weight:500;color:var(--text-primary)}
#premium-hub .ph-language-perk{display:flex;align-items:center;gap:12px;margin:21px 0 0;padding:14px 0;border-top:1px solid var(--border-subtle)}
#premium-hub .ph-language-perk>strong{font-size:23px;font-weight:500;color:var(--azure)}
#premium-hub .ph-language-perk p{font-size:12px;margin:0}
#premium-hub .ph-language-perk small{font-size:11px;color:var(--text-secondary);display:block;margin-top:3px}
#premium-hub .ph-footer{flex:none;padding:13px max(24px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));width:100%;max-width:940px;margin:0 auto;border-top:1px solid var(--border-subtle);background:var(--bg-void)}
#premium-hub .ph-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#premium-hub .ph-plan{min-width:0;display:flex;flex-direction:column;gap:3px;padding:9px 12px;border:1px solid var(--border-mid);border-radius:12px;background:transparent;color:var(--text-primary);text-align:start;font:inherit}
#premium-hub .ph-plan[aria-pressed=true]{border-color:transparent;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--accent-gradient) border-box}
#premium-hub .ph-plan-caption{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12px}
#premium-hub .ph-radio{display:grid;place-items:center;width:14px;height:14px;flex:none;border:1px solid var(--text-muted);border-radius:50%}
#premium-hub .ph-plan[aria-pressed=true] .ph-radio{border-color:var(--azure)}
#premium-hub .ph-plan[aria-pressed=true] .ph-radio::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--azure)}
#premium-hub .ph-price{font-size:22px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
#premium-hub .ph-plan-period{font-size:11px;color:var(--text-secondary);line-height:1.4}
#premium-hub .ph-reference{font-size:11px;color:var(--text-secondary);line-height:1.45;margin:8px 0}
#premium-hub .ph-buy:disabled{display:block;width:100%;min-height:46px;border-radius:13px;border:1px solid var(--border-mid);background:var(--bg-elevated);color:var(--text-muted);opacity:1;box-shadow:none;transform:none;cursor:not-allowed;filter:none}
#premium-hub .ph-beta{font-size:12px;text-align:center;color:var(--text-secondary);margin:7px 0 0}
#premium-hub .ph-back{color:var(--text-secondary);font-size:12px;padding:10px 0}
#premium-hub .ph-detail-title{margin-top:5px}
#premium-hub .ph-detail-copy{margin-bottom:18px}
#premium-hub .ph-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#premium-hub .ph-detail-grid figure{margin:0;min-width:0}
#premium-hub .ph-detail-grid figure>img{display:block;width:100%;height:175px;object-fit:contain}
#premium-hub .ph-detail-grid figcaption{font-size:12px;color:var(--text-secondary);margin-top:7px}
#premium-hub .ph-theme-full{min-height:160px;display:flex;flex-direction:column;gap:14px;padding:12px 10px;background:var(--ph-sample-bg);border-radius:12px;color:var(--ph-sample-text)}
#premium-hub .ph-theme-full strong{font-size:12px;font-weight:500}
#premium-hub .ph-sample-message{display:block;max-width:96%;padding:8px;background:color-mix(in srgb,var(--ph-sample-accent) 24%,var(--ph-sample-bg));border-radius:9px 9px 9px 3px;font-size:11px;line-height:1.5}
#premium-hub .ph-sample-sent{margin-left:auto;border-radius:9px 9px 3px 9px}
#premium-hub .ph-detail-backgrounds{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
#premium-hub .ph-detail-backgrounds figure>img{height:170px;object-fit:cover;border-radius:12px}
#premium-hub .ph-detail-subhead{font-size:15px;font-weight:500;margin:23px 0 15px}
#premium-hub .ph-bubble-preview{position:relative;padding:15px;border-radius:15px 15px 5px 15px;background:linear-gradient(125deg,#f6c2e1,#eda5cf);color:#33152b;font-size:13px;line-height:1.6;margin:20px 10px}
#premium-hub .ph-bubble-preview::after{content:"";position:absolute;inset:-18px;pointer-events:none;background:url("assets/chat-bubbles/sakura.svg") center/100% 100% no-repeat}
#premium-hub .ph-bubble-preview[data-premium-bubble=starry-night]{background:linear-gradient(125deg,#152862,#214897);color:#fff}
#premium-hub .ph-bubble-preview[data-premium-bubble=starry-night]::after{background-image:url("assets/chat-bubbles/starry-night.svg")}
#premium-hub .ph-configure{display:block;width:100%;margin:18px 0 5px;min-height:46px}
#premium-hub .ph-detail-note{font-size:12px;color:var(--text-secondary);line-height:1.65;margin:17px 0}
#premium-hub .ph-detail-list{padding:0;list-style:none;margin:15px 0 0}
#premium-hub .ph-detail-list li{padding:12px 0;border-bottom:1px solid var(--border-subtle);font-size:13px;color:var(--text-secondary);line-height:1.6}
#premium-hub .ph-detail-list strong{display:block;font-weight:500;color:var(--text-primary);margin-bottom:3px}
@media(min-width:700px){#premium-hub .ph-content-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}#premium-hub .ph-tile-art{height:150px}#premium-hub .ph-sticker-collage img{height:71px}#premium-hub .ph-detail-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#premium-hub .ph-detail-backgrounds{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:360px){#premium-hub .ph-header{padding-left:17px;padding-right:17px}#premium-hub .ph-scroll{padding-left:17px;padding-right:17px}#premium-hub .ph-footer{padding-left:17px;padding-right:17px}#premium-hub .ph-content-grid{gap:15px 10px}#premium-hub .ph-tile-art{height:112px}#premium-hub .ph-sticker-collage img{height:51px}#premium-hub .ph-filter-sample{padding:5px 9px}#premium-hub .ph-filter-sample div{padding:7px 0}#premium-hub .ph-theme-grid{padding:8px}#premium-hub .ph-lab-sample{padding:9px}#premium-hub .ph-chat-copy{padding:7px}#premium-hub .ph-price{font-size:21px}}
@media(max-height:500px) and (min-width:560px){#premium-hub .ph-header{padding-top:calc(7px + env(safe-area-inset-top))}#premium-hub .ph-close{top:calc(2px + env(safe-area-inset-top))}#premium-hub .ph-tabs{margin-top:3px}#premium-hub .ph-tab{min-height:42px;padding:8px 0}#premium-hub .ph-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.65fr);gap:4px 18px;align-items:center;padding-top:7px;padding-bottom:max(8px,env(safe-area-inset-bottom))}#premium-hub .ph-plans{grid-column:1;grid-row:1/3}#premium-hub .ph-plan{padding:7px 10px}#premium-hub .ph-price{font-size:20px}#premium-hub .ph-reference{grid-column:1;grid-row:3;margin:3px 0 0}#premium-hub .ph-buy{grid-column:2;grid-row:1/3}#premium-hub .ph-beta{grid-column:2;grid-row:3;margin:0}#premium-hub .ph-hero,#premium-hub .ph-content-head{padding-top:15px}}

/* Both composers share the accepted group spacing and safe-area treatment. */
.direct-composer,.group-composer{padding:9px 11px;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));gap:7px;align-items:center;background:var(--bg-surface)}
.direct-composer .cinput,.group-composer .cinput{box-sizing:border-box;min-width:0;flex:1;margin:0;min-height:40px;max-height:90px}
.direct-composer .rec-btn,.group-composer .rec-btn{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.direct-composer .chat-attachment-button,.group-composer .chat-attachment-button{flex-shrink:0}
/* Chat images always have a truly black viewing surface, including alpha. */
html #image-viewer[data-media-context=chat],html #image-viewer[data-media-context=chat] .image-viewer-dialog,html #image-viewer[data-media-context=chat] .image-viewer-stage,html #image-viewer[data-media-context=chat] .image-viewer-stage>img{background-color:#000!important;background-image:none!important}
#image-viewer.chat-media-viewer{--text-primary:#f1f1f8;--text-secondary:#c8c8db;--text-muted:#b7b7ce;--bg-surface:#121216;--bg-elevated:#202027;--border-mid:rgba(255,255,255,.18);color:var(--text-primary)}
.chat-media-viewer-toolbar{display:flex;align-items:center;gap:12px;flex:none;padding:0 0 8px;font-size:13px}
.chat-media-viewer-count{margin-left:auto;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.chat-media-viewer-toolbar button,.chat-media-viewer-nav button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--text-primary);border-radius:50%}
.chat-media-viewer-toolbar .app-icon,.chat-media-viewer-nav .app-icon{width:22px;height:22px}
.chat-media-viewer-nav{display:flex;align-items:center;justify-content:space-between;flex:none;gap:20px;padding:6px 0 0}
.chat-media-viewer-nav button:disabled{opacity:.25}
.chat-media-next .app-icon{transform:rotate(180deg)}
.chat-gallery-video-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.chat-gallery-video-content .video-player{width:100%;height:100%;max-height:100%;margin:0;background:#000;color:var(--text-primary)}
.chat-gallery-video-content .video-player video{width:100%;flex:1;min-height:0;max-height:none;object-fit:contain}
.chat-gallery-video-content .video-controls{flex:none;background:#111116;color:var(--text-primary)}
.chat-media-open{position:relative;display:block;width:100%;padding:0;border:0;background:#000;color:#fff;border-radius:10px;overflow:hidden}
.chat-media-open>img,.chat-media-open>video{display:block;width:100%;height:150px;object-fit:cover}
.chat-media-video-label{position:absolute;z-index:1;bottom:6px;left:6px;background:rgba(0,0,0,.8);color:#fff;padding:3px 6px;border-radius:5px;font-size:11px;pointer-events:none}
/* Goal editing follows the clear section/tabs structure of Connect filters. */
#profile-goals-sheet .sheet-form-header{padding-bottom:0}
.profile-goal-tabs{display:flex;gap:23px;align-items:center;border-bottom:1px solid var(--border-subtle);margin-top:12px}
.profile-goal-tabs button{flex:1;min-width:0;position:relative;min-height:48px;padding:12px 0;background:none;border:0;color:var(--text-secondary);font:500 13px/1.45 var(--font-body);overflow-wrap:anywhere}
.profile-goal-tabs button[aria-pressed=true]{color:var(--text-primary)}
.profile-goal-tabs button[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--accent-line-height,2.5px);background:var(--accent-gradient);border-radius:3px}
#profile-goals-sheet .sheet-form-body{padding:22px 0 18px;scrollbar-gutter:stable}
#profile-goals-sheet .profile-goal-pane{max-width:880px;margin:0 auto}
#profile-goals-sheet .purpose-options,#profile-goals-sheet .connect-filter-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0 0 24px}
#profile-goals-sheet .purpose-option{min-height:56px;padding:13px 14px;background:none;border:1px solid var(--border-mid);border-radius:12px;box-shadow:none;font-size:14px}
#profile-goals-sheet .purpose-option:has(input:checked){background:transparent;border-color:var(--violet-light)}
#profile-goals-sheet .connect-filter-group{border:0;padding:0;margin:0;background:none;box-shadow:none}
#profile-goals-sheet .connect-filter-group legend{font-size:14px;color:var(--text-secondary);margin-bottom:18px}
#profile-goals-sheet .purpose-timezone{padding:0;border:0;background:none;box-shadow:none}
#profile-goals-sheet .purpose-timezone h3{font-size:16px;font-weight:500;margin-bottom:12px}
#profile-goals-sheet .purpose-timezone-offset{background:none;border:0;border-radius:0;box-shadow:none;padding:0;font:500 30px/1.3 var(--font-display);margin:0 0 24px;color:var(--text-primary)}
#profile-goals-sheet .connect-timezone-option{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 0;margin:0 0 12px;background:none;border:0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);box-shadow:none}
#profile-goals-sheet .connect-timezone-option input{width:19px;height:19px;flex-shrink:0}
.profile-goal-actions{display:flex;gap:11px;flex:none;padding:13px 0 0;border-top:1px solid var(--border-subtle);background:transparent}
.profile-goal-actions .btn{flex:1;min-height:48px;margin:0}
.profile-goal-actions .btn-p{flex:1.5}
@media(max-width:360px){#profile-goals-sheet .purpose-options,#profile-goals-sheet .connect-filter-choices{grid-template-columns:1fr}.profile-goal-tabs{gap:13px}}
@media(max-height:500px){.profile-goal-tabs{margin-top:4px}.profile-goal-tabs button{min-height:44px;padding:8px 0}#profile-goals-sheet .sheet-form-body{padding-top:14px}.profile-goal-actions{padding-top:8px}.profile-goal-actions .btn{min-height:44px}}

.chat-media-viewer>.image-viewer-dialog.sheet{max-height:100dvh;overflow:hidden;border:0;border-radius:0;animation:none;box-shadow:none}.chat-media-viewer-status{font-size:12px;color:var(--text-secondary);text-align:center}

/* Outgoing media shares the same fitted bounds; the surrounding UI stays still. */
.media-swipe-outgoing{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.media-swipe-outgoing>img{position:absolute;display:block;object-fit:contain;max-width:none;max-height:none;user-select:none;pointer-events:none}

/* Shared action bars use the enclosing theme surface and remain outside scroll. */
:root{--sheet-action-gap:12px;--sheet-action-height:48px}
.sheet>.sheet-actions{position:static;display:flex;flex-wrap:wrap;flex:none;gap:var(--sheet-action-gap);min-width:0;margin:0;padding:12px var(--sheet-action-inline,0px) var(--sheet-action-bottom,0px);border:0;border-top:1px solid var(--border-subtle);background:transparent;box-shadow:none}
.sheet-actions>.btn{flex:1;min-width:0;min-height:var(--sheet-action-height);margin:0;white-space:normal;overflow-wrap:anywhere}
.sheet-actions>.btn-full,.sheet-actions>.field-hint{flex-basis:100%}
.learning-lab-screen .sheet-actions{--sheet-action-inline:20px;--sheet-action-bottom:max(14px,env(safe-area-inset-bottom))}
.sheet-status{font-size:13px;line-height:1.5;color:var(--text-secondary);overflow-wrap:anywhere;margin:8px 0;min-height:18px}
#chat-media-sheet>.sheet,#chat-search-sheet>.sheet{display:flex;flex-direction:column;height:min(78dvh,740px);overflow:hidden}
.chat-media-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-top:8px}
.chat-media-grid.chat-media-window{display:block;position:relative;padding:0;gap:0;flex:none}
.chat-media-window .chat-media-item{position:absolute;margin:0;contain:layout style}
.chat-media-window .chat-media-open{position:relative;display:grid;place-items:center;min-width:0;border-radius:12px;overflow:hidden}
.chat-media-window .chat-media-open>.app-icon{width:30px;height:30px;color:var(--text-secondary)}
.chat-media-window .chat-media-open>img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.chat-media-window figcaption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:16px;max-height:38px}
.chat-media-window .is-loading .chat-media-open{opacity:.65}
.chat-media-window .media-failed .chat-media-open{border:1px solid var(--border-mid)}
.chat-media-retry{display:block;min-height:44px;margin:0 auto;padding:6px 10px;color:inherit;background:transparent;border:0;text-decoration:underline;font:inherit}
#chat-search-sheet .chat-search-results{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
#chat-search-sheet .chat-search-text{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:var(--text-primary);font:inherit;text-align:start;white-space:pre-wrap;overflow-wrap:anywhere}
#chat-search-sheet .sheet-actions{margin-top:10px}
@media(max-height:500px){:root{--sheet-action-height:44px}.sheet>.sheet-actions{padding-top:8px;gap:8px}#chat-media-sheet>.sheet,#chat-search-sheet>.sheet{height:90dvh}}

/* Notebook uses the full display; actions stay compact and outside scrolling. */
.notebook-screen.fullscreen-settings{inset:0!important;width:100%!important;max-width:none!important;height:100dvh!important;margin:0!important;padding:0!important}
.notebook-screen.fullscreen-settings>.sheet{width:100%;max-width:none;height:100%;max-height:100%;border-radius:0;border:0}
.notebook-screen .sheet-form-header,.notebook-screen .sheet-form-body,.notebook-screen .notebook-footer{max-width:none}
#notebook .notebook-footer{flex-direction:row;justify-content:flex-start;align-items:center}
#notebook .notebook-footer>.notebook-add{width:auto;flex:0 1 auto;min-width:150px;max-width:100%;min-height:46px;padding:10px 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px}
/* Decoration is the same complete sliced border used on real chat messages. */
#premium-hub .ph-bubble-preview{display:block;width:auto;min-height:62px;margin:24px 16px 30px;padding:16px;overflow:visible}
#premium-hub .ph-bubble-preview::after{inset:-8px;border:16px solid transparent;border-image-slice:24;border-image-repeat:round;background:none;border-image-source:url('assets/chat-bubbles/sakura.svg')}
#premium-hub .ph-bubble-preview[data-premium-bubble=starry-night]::after{background:none;border-image-source:url('assets/chat-bubbles/starry-night.svg')}
#premium-hub .ph-manage{display:grid;gap:4px;padding:14px 0}
#premium-hub .ph-manage-option{display:flex;align-items:center;width:100%;min-height:56px;padding:14px 0;background:none;border:0;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);font:600 15px var(--font-body);text-align:start;overflow-wrap:anywhere;cursor:pointer}

#premium-hub .ph-tabs[hidden]{display:none}

/* One icon/text alignment for action sheets and settings navigation. */
.has-menu-icon{display:flex;align-items:center;gap:12px;min-height:48px;text-align:start}
.has-menu-icon>.menu-option-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;align-self:center;margin:0;color:var(--text-secondary);pointer-events:none}
.has-menu-icon>.menu-option-icon svg{display:block;width:20px;height:20px;flex:none}
.has-menu-icon>.label,.has-menu-icon>.menu-option-copy{min-width:0;flex:1;overflow-wrap:anywhere;line-height:1.45}
.has-menu-icon>.menu-option-copy{display:flex;flex-direction:column;gap:3px}
.has-menu-icon.danger>.menu-option-icon,.has-menu-icon.notebook-destructive>.menu-option-icon{color:var(--rose)}
.has-menu-icon:disabled>.menu-option-icon{opacity:.45}
@media(max-width:359px){.has-menu-icon{gap:10px}.has-menu-icon>.menu-option-icon,.has-menu-icon>.menu-option-icon svg{width:19px;height:19px}.has-menu-icon>.menu-option-icon{flex-basis:19px}}

/* Consistent delete color; includes text-only and dynamically created menus. */
.menu-delete-action,.menu-delete-action .label,.menu-delete-action .menu-option-copy,.menu-delete-action>.menu-option-icon,#notifications-delete-all{color:var(--rose)!important}
html body .sheet-overlay .menu-delete-action,html body .sheet-overlay .menu-delete-action .label,html body .sheet-overlay .menu-delete-action .menu-option-copy,html body .sheet-overlay .menu-delete-action>.menu-option-icon,html body #notifications-delete-all{color:var(--rose)!important}

/* Blocking uses the same warning color as deleting; unblocking stays neutral. */
html body .sheet-overlay .menu-block-action,html body .sheet-overlay .menu-block-action .label,html body .sheet-overlay .menu-block-action .menu-option-copy,html body .sheet-overlay .menu-block-action>.menu-option-icon{color:var(--rose)!important}

/* Gift dialogs use the existing full-screen form and fixed action bar. */
#premium-gift-admin .sheet-form-body,#premium-gift .sheet-form-body{line-height:1.65}
#premium-gift-admin form{display:grid;gap:12px;margin-block:18px}
.gift-recipient{overflow-wrap:anywhere;font-weight:600;margin-block:18px}
.gift-actions{display:flex;gap:12px;width:100%}.gift-actions>.btn{flex:1;min-width:0;min-height:48px;white-space:normal}
/* Moderation uses existing full-screen sheets, colors and accent lines. */
.moderation-screen.fullscreen-settings>.sheet{padding:0;background:var(--bg-void)}
.moderation-screen .sheet-form-header{padding:calc(20px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 10px max(22px,env(safe-area-inset-left));flex:none}
.moderation-screen .sheet-title{margin:0;font-size:25px;line-height:1.25;overflow-wrap:anywhere}
.moderation-screen .sheet-form-body{padding:0 max(22px,env(safe-area-inset-right)) 16px max(22px,env(safe-area-inset-left));scrollbar-gutter:stable}
.mod-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:4px}.mod-eyebrow{color:var(--text-secondary);font:500 11px/1.4 var(--font-body);text-transform:uppercase;letter-spacing:1.5px}.mod-toolbar .icon-btn{width:44px;height:44px;background:transparent;border:0}.mod-toolbar .app-icon{width:20px;height:20px}.mod-toolbar+p{font-size:11px;min-height:16px;margin:0 0 15px}
.mod-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mod-metric{padding:17px 14px 16px;border:1px solid var(--border-mid);border-radius:16px;background:transparent;min-width:0}.mod-metric-label{display:flex;gap:8px;align-items:flex-start;color:var(--text-secondary);font:500 12px/1.45 var(--font-body)}.mod-metric-label .app-icon{width:17px;height:17px;flex:none;color:var(--violet-light)}.mod-metric-value{display:block;margin-top:12px;color:var(--text-primary);font:700 clamp(24px,6.5vw,34px)/1.1 var(--font-display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.mod-metric-premium{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 16px}.mod-metric-premium .mod-metric-value{grid-column:2;grid-row:1/3;margin:0}.mod-metric-note{margin:0;font:400 11px/1.5 var(--font-body);color:var(--text-secondary)}
.mod-countries{margin-top:24px}.mod-section-heading{font:600 17px/1.4 var(--font-display);color:var(--text-primary);margin:0}.mod-caption{font:400 11px/1.6 var(--font-body);color:var(--text-secondary);margin:5px 0 0}.mod-country-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:16px}.mod-country-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:7px}.mod-country-name{display:flex;align-items:center;gap:10px;min-width:0;font:500 13px/1.4 var(--font-body);overflow-wrap:anywhere}.mod-country-rank{font:400 10px/1 var(--font-mono);color:var(--text-muted);flex:none}.mod-country-count{font:400 11px/1.5 var(--font-body);color:var(--text-secondary);font-variant-numeric:tabular-nums;flex:none}.mod-country-track{height:4px;background:var(--border-subtle);border-radius:999px;overflow:hidden}.mod-country-track>span{display:block;height:100%;border-radius:inherit;background:var(--accent-gradient)}
.mod-direct-link{display:flex;gap:12px;align-items:center;text-align:start;background:transparent;color:var(--text-primary);border:0;border-top:1px solid var(--border-mid);width:100%;min-height:54px;margin:24px 0 0;padding:14px 0;font:500 14px/1.4 var(--font-body);cursor:pointer}.mod-direct-link .app-icon{width:19px;height:19px;flex:none;color:var(--violet-light)}.mod-direct-link .app-icon:last-child{margin-inline-start:auto}.mod-message-scope{color:var(--text-muted);font:400 11px/1.6 var(--font-body);margin:10px 0 0}.mod-footer{display:flex;gap:12px;flex:none;padding:12px max(22px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));background:transparent}.mod-footer>.btn{flex:1;min-height:46px;white-space:normal}
.mod-account-search{display:grid;grid-template-columns:1fr auto;gap:10px;margin:16px 0}.mod-account-search .fl{grid-column:1/-1;margin:0}.mod-account-search .fi{min-width:0;text-transform:uppercase}.mod-account-search+.field-hint{margin:12px 0}.mod-person{padding:20px 0 18px;border-bottom:1px solid var(--border-subtle)}.mod-person h3{font:600 22px/1.5 var(--font-display);overflow-wrap:anywhere}.mod-person-id{color:var(--text-secondary);font:400 12px/1.6 var(--font-mono);margin:4px 0 12px;overflow-wrap:anywhere}.mod-person-status{color:var(--text-secondary);font:500 12px/1.5 var(--font-body)}.mod-account-actions{padding-top:12px}.mod-account-actions .message-menu-option{padding-inline:0;min-height:54px}.mod-account-actions .mod-action-ban,.mod-account-actions .mod-action-ban .app-icon,.mod-danger{color:var(--coral)}.mod-danger{background:transparent;border:1px solid var(--coral)}.mod-decision-person{font:500 14px/1.7 var(--font-body);color:var(--text-secondary);overflow-wrap:anywhere;margin:16px 0 24px}.mod-decision-form .ft{min-height:140px;resize:vertical}.mod-decision-form [role=status]{margin-top:12px}
@media(min-width:700px){.moderation-screen .sheet-form-body{padding-inline:max(26px,calc((100% - 900px)/2))}.moderation-screen .sheet-form-header,.moderation-screen .mod-footer{padding-inline:max(26px,calc((100% - 900px)/2))}.mod-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.mod-metric-premium{grid-column:auto;display:block}.mod-metric-premium .mod-metric-value{margin-top:12px}.mod-metric-note{margin-top:12px}.mod-countries{margin-top:30px}}
@media(max-width:359px){.moderation-screen .sheet-form-body,.moderation-screen .sheet-form-header,.moderation-screen .mod-footer{padding-inline:max(16px,env(safe-area-inset-left))}.mod-metric{padding:14px 10px}.mod-country-count{font-size:10px}.mod-country-top{gap:8px}}
@media(max-height:500px){.moderation-screen .sheet-form-header{padding-top:calc(12px + env(safe-area-inset-top))}.moderation-screen .sheet-title{font-size:21px}.mod-footer{padding-block:8px}.mod-toolbar{margin-bottom:0}}
/* Reuse the common fixed action-bar spacing contract. */
.moderation-screen .sheet-actions{--sheet-action-inline:max(22px,env(safe-area-inset-right));--sheet-action-bottom:max(16px,env(safe-area-inset-bottom))}
.mod-metric-label{min-height:35px}.mod-metric-premium .mod-metric-label{min-height:0}
.mod-account-actions .mod-action-ban,.mod-account-actions .mod-action-ban .label,.mod-account-actions .mod-action-ban .app-icon{color:var(--coral)!important}
@media(min-width:700px){.moderation-screen .sheet-actions{--sheet-action-inline:max(26px,calc((100% - 900px)/2))}.mod-metric-premium .mod-metric-label{min-height:35px}}
@media(max-width:359px){.moderation-screen .sheet-actions{--sheet-action-inline:max(16px,env(safe-area-inset-right))}}