/* TOT v3.4 appearance: appended only; no editing of original theme/image logic. */
.tot-appearance-screen{background:#f8f7f4;padding:8px 0 34px}
.tot-ap-group{padding:18px 19px 16px;border-bottom:1px solid #e4e4e2}
.tot-ap-group h2{font-size:13px;color:#394454;margin:0 0 12px;font-weight:780}
.tot-ap-group p{font-size:11px;line-height:1.75;color:#7f8792;margin:9px 0 0}
.tot-ap-group select{width:100%;padding:11px 12px;border:1px solid #dfe4e8;border-radius:11px;background:#fff;color:#354255;font-size:13px}
.tot-ap-switch{display:flex;gap:7px}.tot-ap-switch button{flex:1;background:#fff;color:#535d69;border:1px solid #dfe4e8;border-radius:11px;padding:12px 14px;font-size:12px;font-weight:750}
.tot-ap-switch button.is-selected{background:#3d536e;color:white;border-color:#3d536e}
.tot-ap-upload{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:12px}
.tot-ap-upload input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.tot-ap-filebtn{display:inline-flex;align-items:center;padding:9px 12px;border-radius:10px;border:1px solid #d8e0e8;background:#fff;color:#455e80;font-size:12px;font-weight:700;cursor:pointer}
.tot-ap-upload span{font-size:10px;color:#9098a3}
.tot-ap-preview{padding:14px;border:1px solid #e3e5e8;border-radius:13px;background:#edeff2;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.tot-ap-example{font-family:var(--tot-chat-face,inherit);font-size:var(--tot-chat-size,14px);color:var(--tot-chat-ink,#27313e);padding:11px 13px;max-width:85%;border-radius:13px 13px 13px 4px;background:white;line-height:1.55;overflow-wrap:anywhere}
.tot-ap-example.mine{align-self:flex-end;border-radius:13px 13px 4px 13px;background:#f9df94}
.tot-ap-bottom{padding:16px 20px 28px;text-align:center}.tot-ap-bottom button{font-size:12px}.tot-ap-bottom p{font-size:11px;color:#818b96;line-height:1.6}
.tot-ap-alert{color:#ad655d!important}
/* Notepad-like policy sheet: one continuous document and subtle separators. */
.tot-policy-scroll{background:#e9ebed!important;padding:22px 15px 32px}
.tot-policy-paper{background:#f7f7f6;border:1px solid #dce0e3;border-radius:13px;padding:7px 18px;box-shadow:0 2px 10px #2832460d}
.tot-policy-line{padding:16px 1px;border-bottom:1px solid #e3e5e6}
.tot-policy-line:last-child{border-bottom:0}
.tot-policy-line strong{display:block;font-size:13px;color:#3a4652;margin-bottom:7px}
.tot-policy-line p{margin:0;color:#6e7780;line-height:1.7;font-size:12px}
/* Font customization is restricted to actual chat content and composer. */
.bubble,.stream-msg-bubble,.quote-card p,.quote-comment,.compose-field,.history-message,.tot-photo-caption,.broadcast-input,#privateText,#quoteText{
 font-family:var(--tot-chat-face,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif)!important;
 font-size:var(--tot-chat-size,14px)!important;
 color:var(--tot-chat-ink,#27313e)!important;
}
/* Dark palette: UI only. Explicit background photos preserve original pixels. */
html[data-tot-mode="dark"]{background:#17191d;color:#e3e6eb;color-scheme:dark}
html[data-tot-mode="dark"] body{background:#17191d;color:#e3e6eb}
html[data-tot-mode="dark"] .workspace{background:#17191d}
html[data-tot-mode="dark"] .demo-strip,html[data-tot-mode="dark"] .tiny-head{color:#aab3bf}
html[data-tot-mode="dark"] .app{background:#24272c;border-color:#333940;box-shadow:0 16px 54px #0004}
html[data-tot-mode="dark"] .top{background:#25292e;border-color:#3a4048}
html[data-tot-mode="dark"] .top p{color:#abb4c0}
html[data-tot-mode="dark"] .top h1{color:#eef0f3}
html[data-tot-mode="dark"] .icon-button{color:#ced4dc}
html[data-tot-mode="dark"] .icon-button:hover{background:#373b42}
html[data-tot-mode="dark"] .app>.scroll[style*="background:#f8f7f4"],html[data-tot-mode="dark"] .tot-appearance-screen{background:#22252a!important}
html[data-tot-mode="dark"] .scroll:not(.has-bg){background:#272b31}
html[data-tot-mode="dark"] .day-chip,html[data-tot-mode="dark"] .history-day-divider{color:#b8c1cc}
html[data-tot-mode="dark"] .day-chip:before,html[data-tot-mode="dark"] .day-chip:after,html[data-tot-mode="dark"] .history-day-divider:before,html[data-tot-mode="dark"] .history-day-divider:after{background:#4c5560}
html[data-tot-mode="dark"] .day-chip span{background:#343a41;border-color:#505762}
html[data-tot-mode="dark"] .bubble,html[data-tot-mode="dark"] .stream-msg-bubble{background:#343941;border-color:#434b55;box-shadow:none}
html[data-tot-mode="dark"] .mine .bubble,html[data-tot-mode="dark"] .from-streamer .stream-msg-bubble{background:#49402d;border-color:#665c43}
html[data-tot-mode="dark"] .from-streamer.is-personal .stream-msg-bubble{background:#4b4332;border-color:#776848}
html[data-tot-mode="dark"] .msg-row.anon .bubble,html[data-tot-mode="dark"] .stream-msg-bubble.is-quote{background:#3e3a32;border-color:#625943}
html[data-tot-mode="dark"] .quote-card{background:#30353b;border-color:#59606a;color:#e8eaf0}
html[data-tot-mode="dark"] .quote-title{color:#e6c98b}
/* Dark mode: quote messages and personal-reply borders used more-specific
   light-mode rules in style.css. Keep the native PWA navigation bar unchanged. */
html[data-tot-mode="dark"] .msg-row.quote .bubble{
 background:#3e3a32;
 border-color:#625943;
}
html[data-tot-mode="dark"] .msg-row.personal .bubble{
 border-color:#485b72;
}

html[data-tot-mode="dark"] .msg-meta,html[data-tot-mode="dark"] .stream-label,html[data-tot-mode="dark"] .stream-name{color:#c7cfda}
html[data-tot-mode="dark"] .msg-time,html[data-tot-mode="dark"] .stream-under,html[data-tot-mode="dark"] .stream-under button{color:#a2acb7}
html[data-tot-mode="dark"] .personal-label{color:#b8d2f5;background:#303b4b;border-color:#485b72}
html[data-tot-mode="dark"] .reply-snippet,html[data-tot-mode="dark"] .reply-bar{color:#b8c0cb}
html[data-tot-mode="dark"] .composer,html[data-tot-mode="dark"] .inbox-bottom{background:#24292f;border-color:#3c444d}
html[data-tot-mode="dark"] .compose-field,html[data-tot-mode="dark"] .compose-field:focus{background:#343941;border-color:#4e5661}
html[data-tot-mode="dark"] .compose-field::placeholder,html[data-tot-mode="dark"] input::placeholder,html[data-tot-mode="dark"] textarea::placeholder{color:#929ca9}
html[data-tot-mode="dark"] .send-btn{background:#56729b}
html[data-tot-mode="dark"] .emoji-picker button{background:#363c44;border-color:#4a505a}
html[data-tot-mode="dark"] .reply-bar{background:#353a42}
html[data-tot-mode="dark"] .setting-list,html[data-tot-mode="dark"] .tot-sessions-list{background:#292e34;border-color:#3c444c}
html[data-tot-mode="dark"] .setting-row,html[data-tot-mode="dark"] .tot-session-item{border-color:#3b424b}
html[data-tot-mode="dark"] .section-title,html[data-tot-mode="dark"] .setting-copy small{color:#a1aab5}
html[data-tot-mode="dark"] .setting-copy strong,html[data-tot-mode="dark"] .setting-row strong{color:#e8eaf0}
html[data-tot-mode="dark"] .setting-field,html[data-tot-mode="dark"] .setting-row .text-button,html[data-tot-mode="dark"] .secondary,html[data-tot-mode="dark"] .tot-appearance-screen select{background:#353b43;border-color:#525b66;color:#e2e8ef}
html[data-tot-mode="dark"] .switch:not(.on){background:#515a64}
html[data-tot-mode="dark"] .broadcast-outer,html[data-tot-mode="dark"] .management-list,html[data-tot-mode="dark"] .tot-sessions-screen{background:#24282e!important}
html[data-tot-mode="dark"] .broadcast-card,html[data-tot-mode="dark"] .feed,html[data-tot-mode="dark"] .history-plain,html[data-tot-mode="dark"] .history-readonly,html[data-tot-mode="dark"] .history-search-wrap{background:#2b3037;border-color:#424a53}
html[data-tot-mode="dark"] .feed-item,html[data-tot-mode="dark"] .history-line{border-color:#454b55}
html[data-tot-mode="dark"] .feed-main p,html[data-tot-mode="dark"] .history-readonly,html[data-tot-mode="dark"] .history-message,html[data-tot-mode="dark"] .broadcast-card h2{color:#e3e6eb}
html[data-tot-mode="dark"] .broadcast-card p,html[data-tot-mode="dark"] .feed-head time{color:#adb6c0}
html[data-tot-mode="dark"] .big-input,html[data-tot-mode="dark"] .search-input,html[data-tot-mode="dark"] .history-search{background:#373d45;color:#e5e9ed;border-color:#515a65}
html[data-tot-mode="dark"] .dialog{background:#282e35;color:#e7eaf0}
html[data-tot-mode="dark"] .dialog p,html[data-tot-mode="dark"] .dialog .hint{color:#b8c1ce}
html[data-tot-mode="dark"] .dialog .quote,html[data-tot-mode="dark"] .dialog .quote-box,html[data-tot-mode="dark"] .dialog .notice{background:#363d46;color:#e0e6ec;border-color:#525c68}
html[data-tot-mode="dark"] .menu-actions button,html[data-tot-mode="dark"] .jump-latest,html[data-tot-mode="dark"] .older-btn,html[data-tot-mode="dark"] .file-btn{background:#363d46;color:#dce3ec;border-color:#525a65}
html[data-tot-mode="dark"] .auth-shell{background:#25292e}
html[data-tot-mode="dark"] .auth-shell p,html[data-tot-mode="dark"] .auth-shell .small-note{color:#b0bac5}
html[data-tot-mode="dark"] .tot-photo-frame,html[data-tot-mode="dark"] .tot-photo-draft-preview{background:#343941;border-color:#525965}
html[data-tot-mode="dark"] .tot-photo-caption{color:#d9e2eb}
html[data-tot-mode="dark"] .tot-photo-pending,html[data-tot-mode="dark"] .tot-photo-ended{background:#353b42;color:#bac1c9}
html[data-tot-mode="dark"] .tot-ap-group{border-color:#3c444e}
html[data-tot-mode="dark"] .tot-ap-group h2{color:#e6eaf0}
html[data-tot-mode="dark"] .tot-ap-group p,html[data-tot-mode="dark"] .tot-ap-upload span{color:#aeb7c3}
html[data-tot-mode="dark"] .tot-ap-switch button,html[data-tot-mode="dark"] .tot-ap-filebtn{background:#353b43;color:#e5e9ee;border-color:#515966}
html[data-tot-mode="dark"] .tot-ap-switch button.is-selected{background:#536d92;border-color:#536d92}
html[data-tot-mode="dark"] .tot-ap-preview{background:#272c32;border-color:#4d5661}
html[data-tot-mode="dark"] .tot-ap-example{background:#363d46}
html[data-tot-mode="dark"] .tot-ap-example.mine{background:#514632}
html[data-tot-mode="dark"] .tot-policy-scroll{background:#1d2025!important}
html[data-tot-mode="dark"] .tot-policy-paper{background:#2c323a;border-color:#434a54;box-shadow:none}
html[data-tot-mode="dark"] .tot-policy-line{border-color:#414953}
html[data-tot-mode="dark"] .tot-policy-line strong{color:#f0f1f3}
html[data-tot-mode="dark"] .tot-policy-line p{color:#b4bec9}
html[data-tot-mode="dark"] .tot-session-summary strong{color:#dfe5ee}
html[data-tot-mode="dark"] .tot-sessions-footer{background:#292d34;border-color:#404750}
html[data-tot-mode="dark"] .logout-small{background:#363d46;color:#d3dae2}
html[data-tot-mode="dark"] .app .primary{background:#516c96}
/* Keep streamer-selected background photo unchanged even in dark mode. */
html[data-tot-mode="dark"] .scroll.has-bg,html[data-tot-mode="dark"] .scroll.has-bg .chat.has-image{background-color:transparent!important}
/* Preserve the original relative size differences at the default 14px setting. */
.compose-field,.history-message{font-size:calc(var(--tot-chat-size,14px) - 1px)!important}
.tot-photo-caption{font-size:calc(var(--tot-chat-size,14px) - 2px)!important}

/* v3.4.2: close the bright mobile header gap in dark mode. */
html[data-tot-mode="dark"] .demo-strip{background:#202328!important;color:#c6ced8!important}
html[data-tot-mode="dark"] .demo-title{color:#d8dee6}
html[data-tot-mode="dark"] #topUser{color:#bcc7d3}
@media(max-width:600px){html[data-tot-mode="dark"] .demo-strip{border-bottom:1px solid #32373e}}

/* User-controlled background brightness: a visual overlay, no edits to streamer's original image. */
.chat:not(.has-image)::before{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
 background:rgba(0,0,0,var(--tot-bg-dim,0));
}
.chat.has-image::before{
 background:linear-gradient(rgba(0,0,0,var(--tot-bg-dim,0)),rgba(0,0,0,var(--tot-bg-dim,0))),rgba(255,255,255,.20);
}
.tot-ap-range-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.tot-ap-range-heading h2{margin:0}
.tot-ap-range-heading span{font-size:12px;font-weight:750;color:#637180;font-variant-numeric:tabular-nums}
.tot-ap-group input[type="range"]{display:block;width:100%;accent-color:#56729b;min-height:35px;touch-action:pan-y}
.tot-ap-range-ends{display:flex;justify-content:space-between;color:#8e98a4;font-size:10px}
html[data-tot-mode="dark"] .tot-ap-range-heading span,html[data-tot-mode="dark"] .tot-ap-range-ends{color:#b2bdcb}

/* In-app font picker. Native Android select sheets cannot render mixed font families. */
.tot-font-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;padding:11px 14px;background:#fff;border:1px solid #dfe4e8;border-radius:11px;color:#394454;text-align:left}
.tot-font-trigger .tot-font-current{font-size:16px}
.tot-font-list{margin-top:8px;max-height:310px;overflow-y:auto;overscroll-behavior:contain;border:1px solid #e2e6eb;border-radius:12px;background:#fff}
.tot-font-option{width:100%;display:flex;justify-content:space-between;align-items:center;gap:9px;border:0;border-bottom:1px solid #eceef1;background:transparent;padding:13px 14px;text-align:left;color:#394454}
.tot-font-option:last-child{border-bottom:0}
.tot-font-option.is-selected{background:#eff3f9}
.tot-font-option-name{font-size:19px;line-height:1.4;overflow-wrap:anywhere;word-break:keep-all}
.tot-font-check{flex:0 0 22px;font-size:20px;line-height:1;color:#a6adb8;text-align:center}
.tot-font-option.is-selected .tot-font-check{color:#557bb9}
html[data-tot-mode="dark"] .tot-font-trigger,html[data-tot-mode="dark"] .tot-font-list{background:#353b43;color:#e5e9ee;border-color:#515966}
html[data-tot-mode="dark"] .tot-font-option{color:#e5e9ee;border-color:#4a515b}
html[data-tot-mode="dark"] .tot-font-option.is-selected{background:#465367}
html[data-tot-mode="dark"] .tot-font-check{color:#acb8c8}
html[data-tot-mode="dark"] .tot-font-option.is-selected .tot-font-check{color:#a8c5ff}