html, body, body * { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
input, textarea, [contenteditable="true"] { user-select:text!important; -webkit-user-select:text!important; -webkit-touch-callout:default; }
.header-chat-modes {
display:flex;
align-items:center;
gap:4px;
position: relative;
justify-self: end;
}
.chat-search { box-sizing:border-box; width:min(420px, calc(100% - 24px)); height:fit-content; max-height:min(560px, 78dvh, calc(var(--chat-viewport-height, 100dvh) - 24px)); margin:auto; padding:16px; border:1px solid #c7c9cc; border-radius:20px; background:#fdfdfd; color:#202124; box-shadow:0 18px 70px #0004; overflow:hidden; overscroll-behavior:none; }
.chat-search[open] { display:flex; flex-direction:column; gap:10px; }
.chat-search::backdrop { background:#18191b66; backdrop-filter:blur(5px); }
.chat-search .search-heading > div { min-width:0; }
.chat-search .search-heading small { display:block; color:#5f6368; margin-top:3px; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-search .search-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; flex:0 0 auto; padding:3px; border-radius:11px; background:#eceef0; }
.chat-search .search-tab { min-height:32px; border:0; border-radius:8px; color:#62656a; background:transparent; cursor:pointer; font-size:13px; }
.chat-search .search-tab.is-active { color:#202124; background:#fff; box-shadow:0 1px 3px #00000014; font-weight:650; }
.chat-search button, .chat-search input { font:inherit; }
.chat-search button { -webkit-tap-highlight-color:transparent; }
.chat-search .search-close { display:grid; place-items:center; flex:0 0 34px; border:0; border-radius:50%; background:var(--control-neutral-bg); color:var(--control-neutral-text); width:34px; height:34px; padding:0; font-size:22px; cursor:pointer; }
.chat-search .search-close:hover { background:var(--control-neutral-hover); }
.chat-search form { display:flex; flex:0 0 auto; align-items:center; gap:8px; min-width:0; margin:0; border:1px solid #aeb1b5; border-radius:14px; padding:6px 7px 6px 12px; background:#fff; }
.chat-search form[hidden] { display:none; }
.chat-search form > i { flex:0 0 auto; color:#55585d; font-size:18px; }
.chat-search input { min-width:0; flex:1; width:0; height:36px; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; outline:none; background:transparent; color:inherit; font-size:16px; }
.chat-search input::-webkit-search-cancel-button { display:none; -webkit-appearance:none; appearance:none; }
.chat-search form button { flex:0 0 auto; border:0; border-radius:10px; background:var(--control-primary-bg); color:var(--control-primary-text); padding:9px 14px; cursor:pointer; font-size:13px; }
.chat-search form .search-clear { display:grid; width:28px; height:28px; place-items:center; padding:0; border-radius:50%; color:var(--control-neutral-text); background:var(--control-neutral-bg); font-size:18px; }
.chat-search form .search-clear[hidden] { display:none; }
.chat-search form .search-clear:hover { background:var(--control-neutral-hover); }
.chat-search form button:disabled { opacity:.42; cursor:default; }
.chat-search .search-calendar { flex:0 1 auto; min-height:0; overflow:auto; overscroll-behavior:none; padding:10px; border:1px solid #dfe1e3; border-radius:14px; background:#fff; }
.chat-search .search-calendar[hidden] { display:none; }
.chat-search .search-date-choice { flex:0 0 auto; width:100%; min-height:38px; padding:8px 12px; border:1px solid #dfe1e3; border-radius:11px; background:var(--control-neutral-bg); color:var(--control-neutral-text); text-align:left; cursor:pointer; font-size:13px; }
.chat-search .search-date-choice[hidden] { display:none; }
.chat-search .search-date-choice:hover { background:var(--control-neutral-hover); }
.chat-search .search-calendar-nav { display:grid; grid-template-columns:34px minmax(0,1fr) 34px auto; align-items:center; gap:5px; margin-bottom:7px; }
.chat-search .search-calendar-nav strong { text-align:center; font-size:14px; font-weight:650; white-space:nowrap; }
.chat-search .search-calendar-nav button { display:grid; place-items:center; min-width:34px; height:34px; padding:0; border:0; border-radius:9px; color:inherit; background:transparent; cursor:pointer; }
.chat-search .search-calendar-nav button i { font-size:20px; }
.chat-search .search-calendar-nav .calendar-today { padding:0 8px; color:#375e89; background:#eef3f8; font-size:12px; }
.chat-search .calendar-weekdays, .chat-search .calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.chat-search .calendar-weekdays { margin-bottom:4px; color:#777b80; text-align:center; font-size:12px; }
.chat-search .calendar-weekdays span { line-height:25px; }
.chat-search .calendar-days { grid-auto-rows:34px; }
.chat-search .calendar-day { width:100%; min-width:0; height:34px; padding:0; border:0; border-radius:9px; color:inherit; background:transparent; cursor:pointer; font-size:13px; }
@media (hover:hover) { .chat-search .calendar-day:hover, .chat-search .search-calendar-nav button:hover { background:#eef0f2; } }
.chat-search .calendar-day[aria-current="date"] { box-shadow:inset 0 0 0 1px #9aa5b1; }
.chat-search .calendar-day[aria-pressed="true"] { color:#fff; background:#303236; box-shadow:none; font-weight:700; }
.chat-search .calendar-day:focus-visible, .chat-search .search-calendar-nav button:focus-visible { outline:2px solid #508ac4; outline-offset:1px; }
.chat-search .search-status { flex:0 0 auto; font-size:12px; line-height:1.5; color:#5f6368; margin:0; }
.chat-search .search-status:empty { display:none; }
.chat-search .search-results { flex:0 1 auto; min-height:0; max-height:min(320px, 42dvh); padding-right:10px; overflow:auto; overscroll-behavior:none; }
.chat-search .search-results.is-media { max-height:min(430px, 54dvh); }
.chat-search .search-results:empty { display:none; }
.chat-search .search-result { display:block; box-sizing:border-box; width:100%; text-align:left; border:0; border-bottom:1px solid #dfe1e3; border-radius:10px; padding:10px 9px 11px; background:transparent; color:#222428; cursor:default; }
.chat-search .search-result:hover { background:#eceef0; }
.chat-search .search-result-heading { display:flex; align-items:center; gap:8px; min-width:0; margin-bottom:4px; }
.chat-search .search-result small { display:block; flex:1; min-width:0; font-size:12px; color:#5f6368; line-height:1.5; }
.chat-search .search-result > span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; color:#202124; line-height:1.55; font-size:14.5px; white-space:pre-wrap; overflow-wrap:anywhere; cursor:text; -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
.chat-search .search-result > span, .chat-search .search-result > span * { cursor:text; -webkit-user-select:text!important; user-select:text!important; -webkit-touch-callout:default!important; }
.chat-search .search-result-locate { display:flex; align-items:center; gap:3px; flex:0 0 auto; min-height:28px; padding:4px 7px; border:0; border-radius:8px; color:#53565b; background:transparent; cursor:pointer; font-size:12px; -webkit-user-select:none; user-select:none; }
.chat-search .search-result-locate:hover, .chat-search .search-result-locate:active { color:#202124; background:#dfe1e4; }
.chat-search .search-result-locate i { font-size:14px; }
.chat-search .search-media-result { box-sizing:border-box; padding:10px 8px 12px; border-bottom:1px solid #dfe1e3; }
.chat-search .search-media-result small { display:block; flex:1; min-width:0; color:#5f6368; font-size:12px; line-height:1.5; }
.chat-search .search-media-result p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:1px 0 8px; color:#4f5257; font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.chat-search .search-media-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.chat-search .search-media-thumb { position:relative; display:grid; place-items:center; aspect-ratio:1; min-width:0; padding:0; overflow:hidden; border:0; border-radius:9px; color:#7a7e84; background:#e8eaed; cursor:zoom-in; }
.chat-search .search-media-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .16s ease; }
.chat-search .search-media-thumb.is-loaded img { opacity:1; }
.chat-search .search-media-thumb.is-loaded > i { opacity:0; }
.chat-search .search-media-thumb > i { font-size:22px; transition:opacity .16s ease; }
.chat-search .search-media-thumb.is-error > i { color:#a64b4b; }
.chat-search .search-location-result .chat-location-card { width:100%; margin-top:5px; }
.chat-search .search-link-preview-host { width:100%; max-width:100%; padding:0; border:0; background:transparent; box-shadow:none; }
.chat-search .search-link-preview-host > .chat-link-preview { width:min(276px,100%); margin-top:5px; }
.chat-search mark { background:#d8dade; color:#111214; border-radius:3px; }
.chat-search .search-more { flex:0 0 auto; width:100%; margin:0; border:0; border-radius:11px; background:var(--control-neutral-bg); color:var(--control-neutral-text); padding:11px; cursor:pointer; font-size:13px; }
.chat-search .search-more[hidden] { display:none; }
body.dark-mode .chat-search { color:#eee; background:#292a2d; border-color:#4d4f53; }
body.dark-mode .chat-search .search-tabs { background:#383a3e; }
body.dark-mode .chat-search .search-tab { color:#b8bbc0; }
body.dark-mode .chat-search .search-tab.is-active { color:#f2f3f4; background:#505258; box-shadow:none; }
body.dark-mode .chat-search .search-result { border-color:#434448; color:#f0f1f2; }
body.dark-mode .chat-search .search-result > span { color:#f0f1f2; }
body.dark-mode .chat-search .search-result:hover { color:#eee; background:#414348; }
body.dark-mode .chat-search .search-result-locate { color:#c5c7ca; }
body.dark-mode .chat-search .search-result-locate:hover, body.dark-mode .chat-search .search-result-locate:active { color:#fff; background:#515359; }
body.dark-mode .chat-search .search-media-result { border-color:#434448; }
body.dark-mode .chat-search .search-media-result p { color:#c4c6ca; }
body.dark-mode .chat-search .search-media-thumb { color:#aeb1b6; background:#3d3f43; }
body.dark-mode .chat-search form { border-color:#57595e; background:#323337; }
body.dark-mode .chat-search .search-calendar { border-color:#4d4f53; background:#323337; }
body.dark-mode .chat-search .search-date-choice { border-color:#4d4f53; }
body.dark-mode .chat-search .calendar-weekdays { color:#aeb1b5; }
body.dark-mode .chat-search .search-calendar-nav .calendar-today { color:#c0d9f0; background:#404953; }
@media (hover:hover) { body.dark-mode .chat-search .calendar-day:hover, body.dark-mode .chat-search .search-calendar-nav button:hover { background:#45474b; } }
body.dark-mode .chat-search .calendar-day[aria-current="date"] { box-shadow:inset 0 0 0 1px #9da7b2; }
body.dark-mode .chat-search .calendar-day[aria-pressed="true"] { color:#222428; background:#e8eaed; box-shadow:none; }
body.dark-mode .chat-search mark { background:#56585d; }
body.dark-mode .chat-search .search-status, body.dark-mode .chat-search small { color:#bbb; }
@media(max-width:600px) {
.chat-search { padding:16px; border-radius:18px; }
}
/* Keep iOS WebKit from re-running text inflation against an intermediate
landscape width while the visual viewport settles after rotation. */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body .header-wrapper { display:grid; grid-template-columns:76px minmax(0,1fr) 76px; width:100%; min-width:0; max-width:100%; box-sizing:border-box; align-items:center; padding-inline:.65rem; touch-action:pan-x pan-y; }
body .header-title { position:static; min-width:0; overflow:hidden; transform:none; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.header-left-tools { position:relative; display:flex; width:76px; height:36px; align-items:center; gap:4px; justify-self:start; }
.header-icon-button {
display:grid; place-items:center; flex:0 0 36px; box-sizing:border-box;
width:36px; height:36px; padding:0; border:0; border-radius:10px;
color:#111; background:transparent; box-shadow:none; cursor:pointer;
transition:transform .16s cubic-bezier(.2,.8,.2,1);
-webkit-tap-highlight-color:transparent;
}
.header-icon-button i { display:block; color:inherit; font-size:20px; line-height:1; }
body.dark-mode .header-icon-button { color:#fff; }
.header-icon-button:active { transform:scale(.9); }
@media (prefers-reduced-motion:reduce) { .header-icon-button { transition:none; } }
#ui-update-button[hidden] { display:none; }
body .header-wrapper:has(#ui-update-button:not([hidden])) { grid-template-columns:116px minmax(0,1fr) 116px; }
.header-left-tools:has(#ui-update-button:not([hidden])) { width:116px; }
#ui-update-button { position:relative; }
#ui-update-button::after { content:""; position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:#28a745; box-shadow:0 0 0 2px #fff; }
#channel-menu-button { position:relative; }
#channel-menu-button.has-unread::after {
content:""; position:absolute; top:4px; right:3px; width:7px; height:7px;
border-radius:50%; background:#d8394f; box-shadow:0 0 0 2px #fff;
}
body.dark-mode #channel-menu-button.has-unread::after { box-shadow:0 0 0 2px #2c2c2c; }
.channel-mode-menu[hidden] { display:none; }
.channel-mode-menu { position:absolute; z-index:30; top:calc(100% + 21px); right:0; display:grid; gap:6px; width:max-content; min-width:150px; padding:8px; border:1px solid #e3e3e3; border-radius:16px; background:#fff; box-shadow:0 12px 36px rgba(0,0,0,.14); }
#private-mode-button,
#private-channel-button,
.channel-extra-actions button,
.channel-group-button {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: .25rem;
border: 0;
width:100%;
border-radius: 11px;
padding: .58rem .68rem;
background:var(--control-neutral-bg);
color:var(--control-neutral-text);
font-size: .78rem;
cursor: pointer;
}
#private-channel-button[hidden] { display: none; }
.channel-extra-actions[hidden] { display:none; }
.channel-extra-actions { display:grid; gap:6px; border-top:1px solid #e3e3e3; padding-top:6px; }
body.dark-mode .channel-extra-actions { border-color:#494949; }
.group-mode-list[hidden] { display:none; }
.group-mode-list { display:grid; gap:6px; }
.channel-group-button span { display:block; max-width:11em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channel-group-button .channel-unread-dot {
flex:0 0 7px; width:7px; height:7px; margin-left:auto; border-radius:50%; background:#d8394f;
}
.channel-group-button .channel-unread-dot[hidden] { display:none; }
body.dark-mode #ui-update-button::after { box-shadow:0 0 0 2px #2c2c2c; }
body.dark-mode .channel-mode-menu { border-color:#494949; background:#2e2e2e; box-shadow:0 14px 38px rgba(0,0,0,.38); }
/* Anchor the photo to the layout viewport. The chat body's height follows the
iOS visual viewport, so painting `cover` on body recrops it as chrome or the
keyboard changes size. Keep the photo layer mounted for opacity transitions. */
body:has(> #chat-container)::before {
content:"";
position:fixed;
z-index:-1;
top:0;
left:0;
width:100vw;
height:100vh;
height:100lvh;
pointer-events:none;
background-image:var(--daily-wallpaper-image,none);
background-position:center;
background-size:cover;
background-repeat:no-repeat;
opacity:0;
transition:opacity 320ms ease;
}
body.daily-wallpaper-on:has(> #chat-container)::before { opacity:1; }
body.dark-mode:has(> #chat-container)::before {
background-image:linear-gradient(rgba(0,0,0,.20),rgba(0,0,0,.20)),var(--daily-wallpaper-image);
}
@media (prefers-reduced-motion:reduce) {
body:has(> #chat-container)::before { transition:none; }
}
.daily-wallpaper-dialog[hidden] { display:none; }
.daily-wallpaper-dialog {
position:fixed; z-index:200; inset:0; display:grid; place-items:center;
box-sizing:border-box; padding:20px max(14px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
background:rgba(14,19,26,.54); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.daily-wallpaper-panel {
position:relative; display:flex; flex-direction:column; width:min(440px,100%); max-height:min(740px,calc(var(--chat-viewport-height,100dvh) - 40px));
overflow:hidden; border-radius:20px; background:#fff; color:#242a33; box-shadow:0 18px 60px #0005;
}
.daily-wallpaper-content {
display:flex; flex:1 1 auto; flex-direction:column; min-height:0; overflow:hidden;
}
.daily-wallpaper-close {
position:absolute; z-index:1; top:10px; right:10px; display:grid; place-items:center;
width:34px; height:34px; border:0; border-radius:50%; background:rgba(0,0,0,.56); color:#fff; font-size:20px; cursor:pointer;
}
.daily-wallpaper-share { position:absolute; z-index:1; top:10px; right:52px; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; background:rgba(0,0,0,.56); color:#fff; font-size:18px; cursor:pointer; }
.daily-wallpaper-share[hidden] { display:none; }
.daily-wallpaper-preview { display:block; flex:0 0 auto; width:100%; aspect-ratio:16/9; object-fit:cover; background:#dce3e8; }
.daily-wallpaper-preview[hidden] { display:none; }
.daily-wallpaper-copy { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; padding:17px 20px 13px; }
.daily-wallpaper-meta { flex:0 0 auto; }
.daily-wallpaper-story-scroll {
flex:1 1 auto; min-height:0; padding-right:10px; overflow-y:auto; overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.daily-wallpaper-copy small { color:#65707c; font-size:12px; }
.daily-wallpaper-copy h2 { margin:5px 0 8px; font-size:21px; line-height:1.35; }
.daily-wallpaper-copy p { margin:10px 0; font-size:14px; line-height:1.6; user-select:text; -webkit-user-select:text; }
#daily-wallpaper-location { color:#4b5763; }
#daily-wallpaper-story { white-space:pre-line; }
#daily-wallpaper-fact { padding:10px 12px; border-radius:11px; background:#eff3f6; }
#daily-wallpaper-credit { color:#67717b; font-size:12px; }
.daily-wallpaper-setting { display:flex; flex:0 0 auto; align-items:center; gap:9px; box-sizing:border-box; width:100%; border:0; border-top:1px solid #e8ebed; padding:15px 20px 18px; color:inherit; background:#fff; font:inherit; font-size:14px; text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
.daily-wallpaper-setting:disabled { opacity:.55; cursor:default; }
.daily-wallpaper-setting-check { display:grid; flex:0 0 18px; width:18px; height:18px; place-items:center; box-sizing:border-box; border:1.5px solid #7d8b95; border-radius:4px; }
.daily-wallpaper-setting-check::after { content:""; width:5px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-1px) rotate(45deg); opacity:0; }
.daily-wallpaper-setting[aria-pressed="true"] .daily-wallpaper-setting-check { border-color:#287bb1; background:#287bb1; }
.daily-wallpaper-setting[aria-pressed="true"] .daily-wallpaper-setting-check::after { opacity:1; }
body.dark-mode .daily-wallpaper-panel { background:#292c30; color:#f3f4f5; }
body.dark-mode .daily-wallpaper-copy small,body.dark-mode #daily-wallpaper-location,body.dark-mode #daily-wallpaper-credit { color:#b7c0c8; }
body.dark-mode #daily-wallpaper-fact { background:#353b41; }
body.dark-mode .daily-wallpaper-setting { border-top-color:#45494d; background:#292c30; }
@media (max-width:480px) {
.daily-wallpaper-panel {
width:min(320px,100%);
max-height:min(520px,68dvh,calc(var(--chat-viewport-height,100dvh) - 32px));
border-radius:16px;
}
.daily-wallpaper-copy { padding:11px 14px 10px; }
.daily-wallpaper-copy h2 { margin:3px 0 5px; font-size:18px; }
.daily-wallpaper-copy p { margin:7px 0; font-size:13px; line-height:1.5; }
#daily-wallpaper-fact { padding:8px 10px; }
.daily-wallpaper-setting { padding:11px 14px 13px; font-size:13px; }
}
.notification-nudge {
position:fixed; z-index:24; top:calc(var(--chat-viewport-top, 0px) + 4rem); right:12px;
display:flex; align-items:center; max-width:min(330px, calc(100vw - 24px));
border:1px solid #ddd; border-radius:13px; padding:4px;
color:#45474b; background:rgba(255,255,255,.96); box-shadow:0 7px 24px rgba(0,0,0,.12);
-webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
}
.notification-nudge[hidden] { display:none; }
.notification-nudge button { border:0; color:inherit; background:transparent; font:inherit; cursor:pointer; }
#notification-nudge-open { display:flex; min-width:0; align-items:center; gap:7px; padding:6px 7px; font-size:12px; line-height:1.45; text-align:left; }
#notification-nudge-open i { flex:0 0 auto; color:#55585d; font-size:16px; }
#notification-nudge-dismiss { display:grid; flex:0 0 28px; width:28px; height:28px; place-items:center; padding:0; border-radius:9px; color:#817882; font-size:16px; }
.notification-nudge button:active { opacity:.55; }
body.dark-mode .notification-nudge { border-color:#4d4f53; color:#e8e8e8; background:rgba(43,44,47,.96); box-shadow:0 8px 28px rgba(0,0,0,.34); }
body.dark-mode #notification-nudge-open i { color:#ddd; }
/* Keep the immersive page, but give wide screens a calm reading column. */
html,
body {
min-height: 100%;
width:100%;
min-width:0;
max-width:100%;
overflow-x:hidden;
}
/* One scroll surface: the transcript, never the surrounding document. */
html:has(#chat-container) {
height: 100%;
overflow: hidden;
overscroll-behavior: none;
}
/* On iPhone Home Screen, the dynamic viewport can omit the status bar height.
A fixed root is clipped at that shorter edge even if its height is extended.
Keep the chat shell in document flow so its bottom can actually paint. */
html.maizi-iphone-standalone:not(.maizi-embedded):has(#chat-container) {
height:auto;
overflow:visible;
}
html body:has(> #chat-container) {
/* Keep the negative-z wallpaper above the shell's own fill, including
the relative iPhone shell when html has a startup background. */
isolation:isolate;
position: fixed;
top: var(--chat-viewport-top, 0px);
left: 0;
width: 100%;
height: var(--chat-viewport-height, 100dvh);
min-height: 0;
overflow: hidden;
overscroll-behavior: none;
}
html.maizi-iphone-standalone:not(.maizi-embedded) body:has(> #chat-container) {
position:relative;
}
/* Keep the outer iOS shell at its full height while the keyboard animates.
Only its transcript and composer should use the newly available space. */
html.maizi-ios-standalone:not(.maizi-embedded) body:has(> #chat-container) {
top:0;
height:var(--chat-shell-height, var(--chat-viewport-height, 100dvh));
}
#portrait-only-overlay {
position:fixed;
z-index:10000;
inset:0;
display:none;
align-items:center;
justify-content:center;
box-sizing:border-box;
padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
pointer-events:none;
color:#242126;
background:#f4f4f4;
opacity:1;
transition:opacity 160ms ease-out;
}
.portrait-only-card { display:grid; justify-items:center; gap:10px; text-align:center; }
.portrait-only-card i { font-size:42px; transform:rotate(-18deg); }
.portrait-only-card strong { font-size:20px; }
.portrait-only-card span { color:#777178; font-size:14px; }
body.dark-mode #portrait-only-overlay { color:#f4f1f5; background:#1e1e1f; }
body.dark-mode .portrait-only-card span { color:#aaa4ac; }
@media (orientation:landscape) and (hover:none) and (pointer:coarse) and (max-width:1024px) {
#portrait-only-overlay {
display:flex;
pointer-events:auto;
}
}
html.maizi-orientation-recovering #portrait-only-overlay { display:flex; pointer-events:auto; }
html.maizi-orientation-recovering.maizi-orientation-ready #portrait-only-overlay { opacity:0; pointer-events:none; }
body:has(> #chat-container) > header {
position: relative;
flex: 0 0 auto;
box-sizing: content-box;
padding-top: env(safe-area-inset-top, 0px);
background-color:rgba(255,255,255,.68);
border-bottom-color:rgba(35,38,42,.12);
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
body:has(> #chat-container) > header .header-wrapper { background-color:rgba(255,255,255,.55); }
body.dark-mode:has(> #chat-container) > header { background-color:rgba(37,38,41,.64); border-bottom-color:rgba(255,255,255,.12); }
body.dark-mode:has(> #chat-container) > header .header-wrapper { background-color:rgba(37,38,41,.48); }
/* Keep the same clear control row in Safari and the installed app. */
html:not(.maizi-embedded) body:has(> #chat-container) > header {
background:transparent;
border-bottom:0;
transition:none;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
html:not(.maizi-embedded) body:has(> #chat-container) > header .header-wrapper {
background:transparent;
}
html:not(.maizi-embedded) body:has(> #chat-container) > header .header-left-tools,
html:not(.maizi-embedded) body:has(> #chat-container) > header .header-title,
html:not(.maizi-embedded) body:has(> #chat-container) > header .header-chat-modes {
box-sizing:border-box;
min-height:38px;
border:1px solid rgba(255,255,255,.46);
border-radius:999px;
background:rgba(248,251,255,.74);
box-shadow:0 1px 7px rgba(25,36,48,.1);
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
html:not(.maizi-solid-top):not(.maizi-embedded) body:has(> #chat-container) > header .header-left-tools,
html:not(.maizi-solid-top):not(.maizi-embedded) body:has(> #chat-container) > header .header-title,
html:not(.maizi-solid-top):not(.maizi-embedded) body:has(> #chat-container) > header .header-chat-modes {
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
}
html:not(.maizi-embedded) body:has(> #chat-container) > header .header-title {
justify-self:center;
width:max-content;
max-width:100%;
padding:5px 12px;
font-size:1.1rem;
}
html:not(.maizi-embedded) body:has(> #chat-container) > header .header-chat-modes {
width:76px;
justify-content:center;
}
html:not(.maizi-embedded) body.dark-mode:has(> #chat-container) > header .header-left-tools,
html:not(.maizi-embedded) body.dark-mode:has(> #chat-container) > header .header-title,
html:not(.maizi-embedded) body.dark-mode:has(> #chat-container) > header .header-chat-modes {
border-color:rgba(255,255,255,.16);
background:rgba(20,24,31,.74);
box-shadow:0 1px 7px rgba(0,0,0,.14);
}
/* All normal browser views use the same solid control row. In the installed
iOS app, this empty element also lets WebKit sample its status-bar color. */
#solid-top-status-color { display:none; }
html.maizi-solid-top.maizi-ios-standalone:not(.maizi-embedded) #solid-top-status-color {
display:block;
position:fixed;
top:0;
left:0;
right:0;
height:11px;
z-index:2147483647;
pointer-events:none;
background-color:#f4f4f4;
/* Give WebKit the target color once; it owns the native status-bar animation. */
transition:none;
-webkit-background-clip:text;
background-clip:text;
}
html.maizi-solid-top.maizi-dark-theme:not(.maizi-embedded) #solid-top-status-color { background-color:#1e1e1e; }
html.maizi-solid-top:not(.maizi-embedded) body:has(> #chat-container) > header {
padding-top:0;
/* Inherit the single CSS body fade; no separate header animation clock. */
background-color:inherit;
border-bottom:1px solid #e1e3e6;
transition:color .2s ease, border-color .2s ease;
}
/* The installed iPhone shell stays in document flow to paint beneath the
home indicator. Its height changes with the keyboard, so the control row
must be pinned independently rather than carried by that flex shell. */
html.maizi-ios-standalone:not(.maizi-embedded) body:has(> #chat-container) > header {
position:fixed;
top:0;
left:0;
right:0;
}
html.maizi-solid-top:not(.maizi-embedded) body.dark-mode:has(> #chat-container) > header {
border-bottom-color:#454545;
}
@media (prefers-reduced-motion:reduce) {
html.maizi-solid-top,
html.maizi-solid-top body:has(> #chat-container),
html.maizi-solid-top:not(.maizi-embedded) body:has(> #chat-container) > header,
html.maizi-solid-top.maizi-ios-standalone:not(.maizi-embedded) #solid-top-status-color { transition:none; }
}
html.maizi-solid-top:not(.maizi-embedded) body:has(> #chat-container) > header .header-left-tools,
html.maizi-solid-top:not(.maizi-embedded) body:has(> #chat-container) > header .header-title,
html.maizi-solid-top:not(.maizi-embedded) body:has(> #chat-container) > header .header-chat-modes,
html.maizi-solid-top:not(.maizi-embedded) body.dark-mode:has(> #chat-container) > header .header-left-tools,
html.maizi-solid-top:not(.maizi-embedded) body.dark-mode:has(> #chat-container) > header .header-title,
html.maizi-solid-top:not(.maizi-embedded) body.dark-mode:has(> #chat-container) > header .header-chat-modes {
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
/* The embedding document handles its own chrome and safe area. Keeping a
standalone inset here creates a visible empty card above the chat header. */
html.maizi-embedded body:has(> #chat-container) {
top: 0 !important;
height: 100% !important;
}
html.maizi-embedded body:has(> #chat-container) > header {
top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
html body #chat-container {
flex: 1 1 0;
min-height: 0;
min-width: 0;
margin-block: 0;
margin-top:calc(-3.5rem - env(safe-area-inset-top, 0px) - 1px);
padding-top:calc(4.5rem + env(safe-area-inset-top, 0px) + 1px);
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
/* Keep transcript gestures vertical; page zoom is blocked for the app. */
touch-action: pan-y;
}
html body:has(> .chat-search[open]) > #chat-container {
overflow-y: hidden;
touch-action: none;
-webkit-overflow-scrolling: auto;
}
/* Removing the header from flex flow would otherwise leave the old negative
overlap in place and put the first messages behind the fixed controls. */
html.maizi-ios-standalone:not(.maizi-embedded) body > #chat-container {
margin-top:0;
}
body:has(> #chat-container) > #input-area {
position: relative;
flex: 0 0 auto;
padding-bottom: max(.6rem, env(safe-area-inset-bottom, 0px));
max-height: 45%;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width:none;
border-top:1px solid #dcdcdc;
box-shadow:0 -1px 5px rgba(0,0,0,.045);
}
html.maizi-ios-standalone:not(.maizi-embedded) body:has(> #chat-container) > #input-area {
margin-bottom:var(--chat-keyboard-inset, 0px);
}
body.dark-mode:has(> #chat-container) > #input-area { border-top-color:#484848; box-shadow:0 -1px 5px rgba(0,0,0,.22); }
body:has(> #chat-container) > #input-area::-webkit-scrollbar { display:none; width:0; height:0; }
body:has(> #chat-container) > #input-area.action-panel-open {
max-height:none;
overflow:visible;
}
#chat-container {
scrollbar-gutter: stable;
overflow-anchor: none;
}
#chat-content {
display:flex;
flex-direction:column;
width:100%;
min-width:0;
flex:0 0 auto;
box-sizing:border-box;
/* Keep both avatar types on one mirrored axis, gently inboard of the
latest-arrow center so the bubble/avatar gap stays about 3px. */
--avatar-run-side:calc(.75rem + 24px - var(--chat-side-padding, 1rem) - 23px);
--avatar-single-side:calc(var(--avatar-run-side) - 46px);
}
#chat-content.group-feed-positioning { visibility:hidden; }
.bubble {
line-height: 1.62;
white-space: pre-wrap;
}
.send-motion-target { opacity:0!important; }
/* A downward flight transform must not enlarge the transcript's scrollable
height. Clip only vertically so avatars and shadows keep their side space. */
#chat-content.send-motion-root { min-height:100%; overflow-y:clip; overflow-x:visible; }
.message-receive-enter.receive-motion-fallback { animation:message-receive-in 340ms cubic-bezier(.22,.72,.18,1) both; }
@keyframes message-receive-in {
from { opacity:.12; transform:translate3d(0,20px,0); }
58% { opacity:.78; transform:translate3d(0,6.8px,0); }
to { opacity:1; transform:translate3d(0,0,0); }
}
@media (prefers-reduced-motion:reduce) { .message-receive-enter.receive-motion-fallback { animation:none; } }
.send-motion-pending { pointer-events:none; }
.send-motion-pending .attachment-image,
.send-motion-pending .attachment-image-placeholder { pointer-events:auto; }
.bubble.emoji-only {
background:transparent!important; border:0!important; box-shadow:none!important;
padding:2px 4px!important; font-size:var(--emoji-message-size,64px)!important;
line-height:1.2; min-width:0; overflow-wrap:normal;
}
.bubble.emoji-only p { margin:0; font-size:inherit; line-height:inherit; }
#input-area { padding-inline:clamp(.5rem, 3vw, 1rem); }
#input-area, #input-row { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
#input-row { --composer-base-height:2.8rem; display:flex; justify-content:space-between; gap:clamp(.42rem, 2.2vw, 1rem); overflow:visible; height:auto; min-height:var(--composer-base-height); align-items:flex-end; flex-shrink:0; }
#input-row #userInput { min-width:0; width:0; min-height:var(--composer-base-height); height:var(--composer-base-height); max-height:160px; flex:1 1 0%; box-sizing:border-box; resize:none; padding:.6rem 1rem; line-height:1.45rem; font-family:inherit; overflow-y:hidden; white-space:pre-wrap; overflow-wrap:anywhere; border-radius:22px; transition:height 150ms cubic-bezier(.22,.72,.22,1),border-radius 150ms ease; }
#input-row.composer-multiline #userInput { border-radius:16px; }
/* Keep every button centered on the one-line input while multiline text grows upward. */
#input-row :is(#uploadLabel,#voice-message-toggle,#group-mention-button,#voiceBtn,#voiceExitBtn) { align-self:flex-end; margin-bottom:calc((var(--composer-base-height) - var(--composer-control-size)) / 2); }
#input-row :is(#uploadLabel,#voiceBtn) { --composer-control-size:2.6rem; width:var(--composer-control-size); height:var(--composer-control-size); flex:0 0 var(--composer-control-size); }
#input-row #voice-message-toggle { --composer-control-size:2.35rem; }
#input-row #group-mention-button { --composer-control-size:36px; }
#input-row #voiceExitBtn { --composer-control-size:32px; }
@media (prefers-reduced-motion:reduce) { #input-row #userInput { transition:none; } }
#voice-message-hold { min-width:0; height:2.8rem; flex:1 1 0%; box-sizing:border-box; border:1px solid #d6d1d8; border-radius:999px; padding:.62rem 1rem; color:#2f2d31; background:#fff; font-family:inherit; font-size:.95rem; font-weight:600; line-height:1; user-select:none; -webkit-user-select:none; touch-action:none; cursor:pointer; }
#voice-message-hold[hidden] { display:none!important; }
#voice-message-hold.is-recording { color:#fff; border-color:#292b2e; background:#34363a; }
#voice-message-hold.will-cancel { border-color:#cb4052; background:#cb4052; }
#voice-message-hold.will-text { border-color:#4477c7; background:#4477c7; }
#voice-message-hold:disabled { opacity:.65; cursor:default; }
body.dark-mode #voice-message-hold { border-color:#555057; color:#eee; background:#29272b; }
body.dark-mode #voice-message-hold.is-recording { color:#fff; border-color:#62656a; background:#505257; }
body.dark-mode #voice-message-hold.will-cancel { border-color:#cb4052; background:#cb4052; }
body.dark-mode #voice-message-hold.will-text { border-color:#4477c7; background:#4477c7; }
#voice-record-overlay { position:fixed; inset:0; z-index:10040; pointer-events:none; color:#fff; background:rgba(16,16,17,.66); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
#voice-record-overlay[hidden] { display:none!important; }
.voice-record-center { position:absolute; left:50%; bottom:31%; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; box-sizing:border-box; width:min(78vw,330px); min-height:112px; max-height:210px; padding:18px 20px; border-radius:24px; background:#34363a; box-shadow:0 12px 34px rgba(0,0,0,.24); transform:translateX(-50%); }
.voice-record-center.has-transcript { width:min(78vw, 330px); }
.voice-record-center.has-transcript .voice-record-wave { display:flex; }
.voice-record-live-text { width:100%; min-height:26px; max-width:100%; max-height:128px; overflow:hidden auto; color:#fff; font-size:17px; font-weight:500; line-height:1.55; text-align:left; overflow-wrap:anywhere; }
.voice-record-live-text[hidden] { display:none!important; }
.voice-record-center::after { content:""; position:absolute; left:50%; bottom:-10px; width:20px; height:20px; border-radius:3px; background:#34363a; transform:translateX(-50%) rotate(45deg); }
.voice-record-wave { position:relative; z-index:1; display:flex; align-items:center; gap:3px; height:30px; }
.voice-record-wave i { display:block; width:3px; height:28px; border-radius:99px; background:#fff; transform:scaleY(calc(.12 + var(--record-level,0) * .88 * var(--record-bar-weight,.65))); transition:transform .16s ease-out; }
.voice-record-wave i:nth-child(2n) { --record-bar-weight:.85; }
.voice-record-wave i:nth-child(3n) { --record-bar-weight:1; }
.voice-record-actions { position:absolute; left:0; right:0; bottom:max(86px, calc(env(safe-area-inset-bottom) + 70px)); display:flex; justify-content:space-around; padding:0 8vw; }
.voice-record-target { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:104px; height:72px; border-radius:24px; color:rgba(255,255,255,.82); background:rgba(48,49,52,.78); font-size:14px; font-weight:600; transition:transform .14s ease,background .14s ease,color .14s ease; }
.voice-record-target i { font-size:24px; }
.voice-record-target.is-target { color:#fff; background:#34363a; transform:scale(1.08); }
.voice-record-hint { position:absolute; left:50%; bottom:max(176px, calc(env(safe-area-inset-bottom) + 160px)); transform:translateX(-50%); font-size:16px; font-weight:600; white-space:nowrap; }
@media (prefers-reduced-motion:reduce) { .voice-record-wave i { transition:none; } }
#input-row > * { min-width:0; }
#input-row #uploadLabel,
#input-row #voice-message-toggle,
#input-row #voiceBtn,
#input-row #group-mention-button { flex-shrink:0; }
#voice-message-toggle { display:grid; place-items:center; flex:0 0 var(--composer-control-size); width:var(--composer-control-size); height:var(--composer-control-size); min-width:var(--composer-control-size); border:0; border-radius:50%; padding:0; color:var(--control-neutral-text); background:var(--control-neutral-bg); font-size:1.18rem; cursor:pointer; }
#input-row :is(#uploadLabel,#voice-message-toggle,#voiceBtn,#voiceExitBtn) > i { display:block; line-height:1; }
#input-row #voice-message-toggle > i { transform:translateY(1.5px); }
#voice-message-toggle:hover { background:var(--control-neutral-hover); }
#voice-message-toggle.voice-message-mode { color:var(--control-primary-text); background:var(--control-primary-bg); }
#attachment-preview { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.reply-composer-preview {
display:flex; align-items:center; gap:.45rem; min-width:0;
margin:.15rem 0 .5rem; padding:.48rem .58rem;
border-left:3px solid #777; border-radius:7px; background:#f1f1f1; color:#555;
font-size:.78rem; line-height:1.35;
}
.reply-composer-preview[hidden] { display:none; }
.reply-composer-preview > i { flex:0 0 auto; font-size:1rem; }
.reply-composer-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-composer-close { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; margin-left:auto; padding:0; border:0; border-radius:50%; background:var(--control-neutral-bg); color:var(--control-neutral-text); cursor:pointer; }
body.dark-mode .reply-composer-preview { border-color:#aaa; background:#292929; color:#ccc; }
.message-reply-reference {
display:flex; width:100%; min-width:0; box-sizing:border-box; gap:.35rem; margin:0 0 .55rem; padding:.32rem .5rem;
border:0; border-left:3px solid rgba(75,75,75,.65); border-radius:4px; background:rgba(90,90,90,.08);
color:#686168; font:inherit; font-size:.75rem; line-height:1.35; text-align:left; cursor:pointer;
-webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
}
.message-reply-sender { flex:0 0 auto; font-weight:700; }
.message-reply-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.dark-mode .message-reply-reference { border-color:#aaa; background:rgba(255,255,255,.08); color:#ccc; }
@keyframes reply-target-flash {
0%, 100% { box-shadow:inherit; }
25%, 70% { box-shadow:0 0 0 3px rgba(80,82,87,.36), 0 8px 24px rgba(0,0,0,.12); }
}
.reply-target-flash { animation:reply-target-flash 1.8s ease; }
/* Keep icon buttons on a stable plane while their message row is translated. */
.message-actions { display:flex; align-items:center; gap:.45rem; margin-top:6px; min-height:36px; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.message-actions > .play-btn,
.message-actions > .quote-btn {
display:grid; place-items:center; flex:0 0 42px; width:42px; min-width:42px; height:36px; margin-top:0; padding:0;
position:relative; z-index:1; pointer-events:auto; touch-action:pan-x pan-y;
transition:background-color .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.message-actions > .play-btn:not(.blocked):active,
.message-actions > .quote-btn:active { transform:scale(.94); }
.message-actions .play-btn { margin:0 0 0 .6rem; }
.message-actions .play-btn + .quote-btn { margin-left:0; }
.quote-btn {
display:grid; place-items:center; width:38px; height:34px; margin:0 0 0 .6rem; padding:0;
border:0; border-radius:12px; background:var(--control-neutral-bg); color:var(--control-neutral-text); cursor:pointer;
}
.quote-btn i { font-size:1.15rem; }
.quote-btn.active { background:var(--control-neutral-bg); color:var(--control-neutral-text); box-shadow:none; }
@media (hover:hover) and (pointer:fine) {
.message-reply-reference:hover { background:rgba(90,90,90,.14); }
.message-actions > .play-btn:not(.blocked):hover,
.message-actions > .quote-btn:hover { background:var(--control-neutral-hover); color:var(--control-neutral-text); transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.10); }
body.dark-mode .message-reply-reference:hover { background:rgba(255,255,255,.14); }
body.dark-mode .message-actions > .play-btn:not(.blocked):hover,
body.dark-mode .message-actions > .quote-btn:hover { background:var(--control-neutral-hover); color:var(--control-neutral-text); box-shadow:0 2px 7px rgba(0,0,0,.28); }
}
.group-message-actions { align-self:flex-start; }
#scroll-latest-button {
position:fixed;
bottom:calc(var(--composer-height, 4.5rem) + 12px);
left:auto;
right:.75rem;
z-index:11;
display:grid;
place-items:center;
width:36px;
height:36px;
padding:0;
border:1px solid #dedede;
border-radius:50%;
color:#333;
background:rgba(255,255,255,.94);
box-shadow:0 2px 8px rgba(0,0,0,.10);
font-size:20px;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
}
#scroll-latest-button.is-visible { opacity:1; pointer-events:auto; }
#scroll-latest-button:active { transform:scale(.94); }
body.dark-mode #scroll-latest-button { border-color:#484848; color:#eee; background:rgba(48,48,48,.96); box-shadow:0 2px 9px rgba(0,0,0,.26); }
#toast { top:auto; right:auto; bottom:max(5.5rem, calc(var(--composer-height, 4.5rem) + 12px)); margin:0; max-width:calc(100vw - 24px); box-sizing:border-box; border:0; }
body:has(> #input-area.action-panel-open) > #toast {
bottom:calc(max(5.5rem, calc(var(--composer-height, 4.5rem) + 12px)) + 244px);
}
#input-area.action-panel-open { padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
#uploadLabel[aria-expanded="true"] i { transform: rotate(90deg); }
.chat-action-panel[hidden] { display: none !important; }
.shared-favorites { width:min(520px,calc(100vw - 32px)); max-height:82dvh; padding:0; border:0; background:transparent; color:#303134; box-sizing:border-box; overflow:visible; }
.collection-card { padding:18px; max-height:82dvh; overflow:auto; border:1px solid #ddd; border-radius:20px; background:#fff; box-shadow:0 16px 48px rgba(0,0,0,.15); box-sizing:border-box; animation:collection-entry .25s ease-out; }
@keyframes collection-entry { from { opacity:0; transform:translateY(7px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce) { .collection-card { animation:none; } }
.collection-card > .dialog-heading { padding-bottom:12px; border-bottom:1px solid #e3e3e5; }
body.dark-mode .collection-card { background:#272727; border-color:#444; }
body.dark-mode .collection-card > .dialog-heading { border-color:#444; }
.shared-favorites::backdrop { background:rgba(0,0,0,.25); backdrop-filter:blur(7px); }
/* Miniapp updates are shared timeline notices, separate from speaker bubbles. */
.group-miniapp-notice { display:flex; justify-content:center; width:100%; margin:14px 0; padding:0 12px; box-sizing:border-box; }
.group-miniapp-notice[hidden] { display:none; }
.group-miniapp-notice-card { display:flex; flex-direction:column; gap:5px; width:fit-content; max-width:min(100%,420px); padding:10px 16px; border:1px solid rgba(0,0,0,.08); border-radius:14px; background:rgba(255,255,255,.88); color:#53545a; font:inherit; text-align:center; line-height:1.55; cursor:pointer; touch-action:manipulation; }
.group-miniapp-notice-heading { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; font-size:12px; color:#777980; }
.group-miniapp-notice-heading strong { font-weight:600; }
.group-miniapp-notice-heading time { font-size:11px; }
.group-miniapp-notice-body { font-size:13px; overflow-wrap:anywhere; }
body.dark-mode .group-miniapp-notice-card { background:rgba(43,43,47,.9); border-color:rgba(255,255,255,.12); color:#dbdbe0; }
body.dark-mode .group-miniapp-notice-heading { color:#b1b1b9; }
.group-miniapp-dialog { width:min(440px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); }
.group-miniapp-dialog .collection-card { max-height:calc(100dvh - 24px); padding:14px; overflow:hidden; }
.group-miniapp-dialog .dialog-heading { display:flex; align-items:center; gap:8px; min-height:34px; padding:0 2px 10px; }
.group-miniapp-dialog .dialog-heading strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-miniapp-frame { display:block; width:100%; height:min(530px,calc(100dvh - 140px)); margin-top:10px; border:0; border-radius:12px; background:#fff; color-scheme:light; }
.shared-favorites small { display:block; color:#777; font-size:13px; line-height:1.5; margin-top:5px; }
.shared-favorites button { border:0; border-radius:12px; background:var(--control-neutral-bg); color:var(--control-neutral-text); padding:10px 14px; cursor:pointer; }
.shared-favorites [role="status"] { font-size:14px; color:#777; padding:13px; border:1px solid #e3e3e5; border-radius:14px; }
.shared-favorites [role="status"]:empty { display:none; }
.favorite-list { max-height:58dvh; padding-right:10px; overflow:auto; overscroll-behavior:contain; margin-top:15px; }
.favorite-list article { padding:13px; border:1px solid #e3e3e5; border-radius:14px; margin-bottom:10px; overflow:hidden; opacity:1; transform:translateY(0); transition:opacity .25s ease,transform .3s ease,max-height .32s ease,padding .32s ease,margin .32s ease,border-width .32s ease; }
.favorite-list article.is-removing { opacity:0; transform:translateY(-7px); max-height:0!important; padding-top:0; padding-bottom:0; margin-bottom:0; border-width:0; }
.favorite-list footer { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.favorite-heading { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.favorite-heading > small { flex:1; min-width:0; margin-top:2px; }
.favorite-list .favorite-jump { display:flex; align-items:center; gap:3px; flex:0 0 auto; min-height:28px; padding:4px 7px; border-radius:8px; color:#53565b; background:transparent; font-size:12px; }
.favorite-list .favorite-jump:hover,.favorite-list .favorite-jump:active { color:#202124; background:#dfe1e4; }
.favorite-list .favorite-jump i { font-size:14px; }
.shared-favorites .favorite-feedback { padding:0; border:0; margin:8px 0 0; }
.conversation-refresh { width:100%; margin-top:10px; }
.conversation-items footer button { font-size:15px; }
.shared-favorites .favorite-delete { display:flex; align-items:center; justify-content:center; gap:7px; min-width:82px; min-height:38px; font-size:14px; padding:7px 12px; transition:background .24s ease,color .24s ease,min-width .24s ease,transform .24s ease; }
.shared-favorites .favorite-delete.is-confirming { min-width:116px; background:#fae6e7; color:#9d323b; }
.favorite-delete i { font-size:18px; }
.favorite-delete:active { transform:scale(.96); }
.favorite-delete:disabled { opacity:.6; }
.favorite-body { margin-top:8px; overflow-wrap:anywhere; white-space:pre-wrap; line-height:1.6; cursor:text; -webkit-user-select:text!important; user-select:text!important; -webkit-touch-callout:default!important; }
.favorite-body .attachment-image { max-width:100%; }
.favorite-more { margin-top:10px; width:100%; }
body.dark-mode .shared-favorites { background:transparent; color:#eee; }
body.dark-mode .favorite-list article { border-color:#444; }
body.dark-mode .favorite-list .favorite-jump { color:#c5c7ca; }
body.dark-mode .favorite-list .favorite-jump:hover,body.dark-mode .favorite-list .favorite-jump:active { color:#fff; background:#515359; }
body.dark-mode .shared-favorites [role="status"] { border-color:#444; }
body.dark-mode .shared-favorites .favorite-delete.is-confirming { background:#513035; color:#ffd5da; }
@media (prefers-reduced-motion:reduce) { .favorite-list article,.shared-favorites .favorite-delete { transition:none; } }
.chat-action-panel-shell {
height:0; overflow:hidden; margin:0 -1rem;
contain:layout paint;
}
.chat-action-panel-shell[hidden] { display:none!important; }
.chat-action-panel-shell.is-preview {
position:absolute;
z-index:1;
top:100%;
left:0;
right:0;
height:244px;
margin:0;
}
.chat-scrollbar-curtain {
position:absolute;
z-index:2;
/* Leave the panel's top border visible all the way to the right edge. */
top:1px;
right:0;
width:10px;
height:calc(100% - 1px);
pointer-events:none;
background:#f8f8f9;
}
body.dark-mode .chat-scrollbar-curtain { background:#272727; }
.chat-action-panel-shell.is-open {
height:244px; margin-top:10px; margin-bottom:-.6rem;
}
.chat-action-panel {
display: block;
touch-action: pan-y;
gap: clamp(8px, 3vw, 18px);
height: calc(244px + max(0px, env(safe-area-inset-bottom) - 16px));
min-height: calc(244px + max(0px, env(safe-area-inset-bottom) - 16px));
max-height: none;
flex-shrink: 0;
overflow: visible;
box-sizing: border-box;
margin: 10px -1rem -.6rem;
padding: 22px 18px max(16px, env(safe-area-inset-bottom));
border-top: 1px solid #e3e3e5;
background: #f8f8f9;
animation: chat-action-in .16s ease-out;
}
.chat-action-panel-shell > .chat-action-panel { margin:0; animation:none; }
.chat-action-grid {
display:grid;
grid-template-columns:repeat(4, minmax(52px, 76px));
grid-auto-rows:max-content;
align-content:start;
justify-content:center;
gap:inherit;
transition:transform .56s cubic-bezier(.25, .7, .32, 1.06);
}
.chat-action-grid.is-dragging { transition:none; }
@media (prefers-reduced-motion:reduce) {
.chat-action-grid { transition:none; }
}
.chat-action-item {
display: grid;
justify-items: center;
gap: 8px;
min-width: 0;
padding: 0;
border: 0;
color: #555;
background: transparent;
font: inherit;
font-size: 13px;
cursor: pointer;
}
.chat-action-icon {
display: grid;
width: 58px;
height: 58px;
place-items: center;
border: 1px solid #e2e2e2;
border-radius: 17px;
color:var(--control-neutral-text);
background:var(--control-neutral-bg);
box-shadow: 0 3px 10px rgba(55, 38, 60, .06);
}
.chat-action-icon i { font-size: 26px; line-height: 1; }
.group-miniapp-action .chat-action-icon { border-color:#ae8cd7; color:#76509f; background:#fcfaff; box-shadow:0 0 0 2px rgba(147,99,202,.12),0 3px 10px rgba(91,54,126,.1); }
.chat-action-item:active .chat-action-icon { transform: scale(.95); background:var(--control-neutral-pressed); }
.chat-action-item:disabled { opacity: .55; }
.chat-action-item.loading .chat-action-icon i { animation: chat-action-pulse .8s ease-in-out infinite alternate; }
body.dark-mode .chat-action-panel { border-color: #414141; background: #272727; }
body.dark-mode .chat-action-item { color: #c8c8c8; }
body.dark-mode .chat-action-icon { border-color: #4d4d4d; color:var(--control-neutral-text); background:var(--control-neutral-bg); box-shadow: none; }
body.dark-mode .group-miniapp-action .chat-action-icon { border-color:#9e7ac8; color:#d9c4f4; background:#3a3046; box-shadow:0 0 0 2px rgba(172,130,220,.12); }
body.dark-mode .chat-action-item:active .chat-action-icon { background:var(--control-neutral-pressed); }
@keyframes chat-action-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes chat-action-pulse { to { opacity: .35; transform: scale(.88); } }
@media (max-width: 420px) {
.chat-action-panel { gap:12px 8px; padding:18px 10px max(16px, env(safe-area-inset-bottom)); }
.chat-action-icon { width:52px; height:52px; border-radius:15px; }
}
#voiceBtn.voice-listening { background: #22a447 !important; color: white !important; }
#voiceBtn.voice-listening::after {
content: ''; position: absolute; inset: -5px; border-radius: 50%; padding: 4px;
background: conic-gradient(#138b35 var(--voice-progress, 0deg), rgba(19,139,53,.16) 0);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
}
#voiceBtn.send-wake-holding::after {
content: ''; position: absolute; inset: -5px; border-radius: 50%;
background: conic-gradient(#a03ab0 var(--send-wake-progress, 0deg), rgba(160,58,176,.18) 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
pointer-events: none;
}
#voiceBtn { position: relative; touch-action: none; -webkit-touch-callout: none; }
#voiceBtn.send-wake-holding {
background:#007bff!important;
box-shadow:0 4px 12px rgba(0,123,255,.18);
transition:background .4s ease,box-shadow .4s ease;
}
body.dark-mode #voiceBtn.send-wake-holding { background:#3391ff!important; }
#voiceBtn > i { transition:opacity .26s ease,transform .36s cubic-bezier(.2,.8,.2,1); }
#voiceBtn.send-wake-holding > i { opacity:0; transform:scale(.72); }
#voiceBtn .send-wake-arrow {
position:absolute; inset:0; display:grid; place-items:center;
color:#fff; font-size:1.3rem; line-height:1;
opacity:0; transform:translateY(5px) scale(.8); pointer-events:none;
transition:opacity .28s ease,transform .38s cubic-bezier(.2,.8,.2,1);
}
#voiceBtn.send-wake-holding .send-wake-arrow { opacity:1; transform:translateY(0) scale(1); }
#voiceBtn .send-wake-arrow i { font-size:1.3rem; }
@media (prefers-reduced-motion:reduce) {
#voiceBtn.send-wake-holding,#voiceBtn > i,#voiceBtn .send-wake-arrow { transition:none; }
}
body.dark-mode #voiceBtn.voice-listening::after {
background: conic-gradient(#65df80 var(--voice-progress, 0deg), rgba(101,223,128,.2) 0);
}
#voiceBtn.voice-ending { background: #ce4651 !important; color: white !important; }
#voiceExitBtn { position:relative; z-index:2; display:grid; place-items:center; flex:0 0 var(--composer-control-size); width:var(--composer-control-size); height:var(--composer-control-size); margin-left:5px; border:0; border-radius:50%; padding:0; background:#f4e2e4; color:#b33241; font-size:19px; cursor:pointer; touch-action:pan-x pan-y; }
#voiceExitBtn[hidden] { display: none; }
/* Rich HTML already encodes line breaks; source formatting is not content. */
#chat-container .bubble.rich-message,
#chat-container .bubble.advanced-result { white-space: normal; }
#chat-container .bubble.rich-message p + p { margin-top: 1em; }
#chat-container .advanced-result ol, #chat-container .advanced-result ul { margin:.65em 0; padding-left:1.6em; }
#chat-container .advanced-result li { margin:.45em 0; padding-left:.12em; }
#chat-container .advanced-result > :first-child:not(.message-reactions) { margin-top:0; }
#chat-container .advanced-result > :last-child { margin-bottom:0; }
#private-channel-button.active,
.channel-group-button.active {
background:var(--control-primary-bg);
color:var(--control-primary-text);
}
#private-mode-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: grid;
place-items: center;
padding: 1rem;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(5px);
}
#private-mode-overlay[hidden] { display: none; }
.private-mode-card {
position: relative;
width: min(410px, calc(100vw - 32px));
box-sizing: border-box;
max-height: calc(100dvh - 2rem);
overflow-y: auto;
padding: clamp(16px, 3.5vw, 22px);
border: 1px solid var(--account-line, #eee);
border-radius: 20px;
background: var(--account-surface, #fff);
box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
body.dark-mode .private-mode-card.account-ui { --account-surface:#272727; border-color:var(--account-line); background:var(--account-surface); }
.private-mode-card h2 { margin: 0; font-size: 1.25rem; }
.private-mode-card p { margin: 0 0 1rem; color: var(--account-muted); font-size: .85rem; line-height: 1.7; }
.private-mode-dismiss { position:absolute; top:12px; right:12px; }
.private-mode-dismiss:hover { filter:brightness(.95); }
.private-mode-login .private-login-heading { gap:10px; min-height:44px; padding-right:40px; }
.private-login-heading, .private-account-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.private-login-heading > div, .private-account-head > div { min-width: 0; }
.private-account-head { align-items:center; gap:10px; border-bottom:1px solid var(--account-line); padding-bottom:14px; }
.private-account-summary { flex:1; min-width:0; }
.private-account-name-line { display:flex; align-items:center; gap:7px; min-width:0; }
.private-account-name-line h2 { flex:0 1 auto; max-width:60%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.private-account-controls { display:flex; flex:none; align-items:center; gap:8px; }
.private-account-summary small { display:block; margin-top:3px; color:var(--account-muted); font-size:12px; line-height:1.4; }
.private-login-heading span:not(.private-account-icon) { color: var(--account-muted); font-size: 12px; }
.private-account-icon { display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; background: var(--account-user-bg); color: var(--account-user-text); font-size: 23px; }
.account-avatar-trigger { border:0; padding:0; cursor:pointer; }
.shared-favorites.avatar-picker-dialog { width:min(380px,calc(100vw - 28px)); }
.avatar-hint { margin:14px 0 0; color:var(--account-muted); font-size:12px; font-weight:600; }
.avatar-emoji-options { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; height:274px; margin:9px 0 0; padding:2px 10px 4px 4px; overflow-y:auto; overscroll-behavior:contain; }
.avatar-emoji-options button { min-height:40px; padding:5px 0; border:2px solid transparent; border-radius:11px; background:var(--control-neutral-bg); font:24px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; cursor:pointer; transition:background .2s ease; }
.avatar-emoji-options button[aria-pressed="true"] { border-color:#34363a; background:#e0e2e5; }
body.dark-mode .avatar-emoji-options button[aria-pressed="true"] { border-color:#ddd; background:#4b4e53; }
.avatar-custom-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 0; padding-top:12px; border-top:1px solid var(--account-line); }
.avatar-custom-copy { display:grid; gap:2px; }
.avatar-custom-copy label { color:var(--account-muted); font-size:12px; font-weight:600; }
.avatar-custom-copy small { color:var(--account-muted); font-size:11px; line-height:1.35; }
.avatar-custom-control { position:relative; flex:none; width:46px; height:44px; }
.avatar-custom-row input { box-sizing:border-box; width:100%; height:100%; padding:0 2px; border:1px solid var(--account-input-line); border-radius:11px; outline:none; background:var(--account-field); color:var(--account-text); text-align:center; font:22px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.avatar-custom-control:not(.has-value) input { caret-color:transparent; }
.avatar-custom-plus { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; color:var(--account-muted); font:22px/1 sans-serif; }
.avatar-custom-control:focus-within .avatar-custom-plus { animation:avatar-plus-pulse 1.1s ease-in-out infinite; }
@keyframes avatar-plus-pulse { 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce) { .avatar-custom-control:focus-within .avatar-custom-plus { animation:none; } }
.avatar-custom-row input.is-selected { border-color:var(--account-accent); background:var(--account-soft); }
.avatar-custom-row input[aria-invalid="true"] { border-color:var(--account-danger-line); }
.shared-favorites.avatar-picker-dialog .avatar-custom-status { margin:5px 0 0; padding:0; border:0; border-radius:0; background:transparent; color:var(--account-muted); font-size:12px; line-height:1.4; }
.shared-favorites.avatar-picker-dialog.avatar-has-invalid .avatar-custom-status { color:var(--account-danger); }
.shared-favorites.avatar-picker-dialog .avatar-custom-status:empty { display:none; }
.avatar-picker-dialog .private-mode-actions { margin-top:14px; }
.private-mode-card .private-mode-identity { flex:0 1 auto; min-width:0; overflow:hidden; color:var(--account-muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.transaction-cards { display: grid; gap: 8px; margin-top: 12px; }
.transaction-card { border: 1px solid color-mix(in srgb, var(--accent, #8e44ad) 22%, #d8d8de); border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--accent, #8e44ad) 5%, #fff); }
.transaction-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.transaction-card-head strong { font-size: 13px; }
.transaction-card-head span { flex: none; border-radius: 999px; padding: 2px 7px; background: rgba(38, 145, 75, .12); color: #287245; font-size: 12px; }
.transaction-card p { margin: 7px 0 0; white-space: pre-wrap; font-size: 13px; line-height: 1.55; }
.transaction-card small { display: block; margin-top: 6px; color: var(--muted, #777); overflow-wrap: anywhere; }
body.dark-mode .transaction-card { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.055); }
body.dark-mode .transaction-card-head span { background: rgba(108, 211, 139, .15); color: #9ee0b0; }
.private-mode-menu > #private-mode-description { margin-bottom: 14px; border-radius: 12px; padding: 10px 12px; background: var(--account-field); }
.private-mode-card input {
width: 100%;
box-sizing: border-box;
margin-bottom: .75rem;
padding: .75rem .85rem;
border: 1px solid var(--account-input-line);
border-radius: 12px;
background: var(--account-field);
color: inherit;
font: inherit;
font-size: 16px; /* Prevent iOS Safari from zooming the page on focus. */
outline: none;
}
.private-mode-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
#private-mode-form > .private-mode-actions { align-items:center; flex-wrap:nowrap; min-height:44px; }
#private-mode-form > .private-mode-actions > button { flex:none; }
.private-mode-menu > .private-mode-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.private-mode-menu > .private-mode-actions:has(#private-mode-admin:not([hidden])) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.private-mode-menu > .private-mode-actions:has(#private-mode-admin:not([hidden])) .account-button { padding-inline:.5rem; white-space:nowrap; }
.private-mode-menu > .private-mode-actions .account-button { width:100%; }
.private-mode-actions button, .private-mode-actions a {
border: 0;
border-radius: 12px;
padding: .65rem .85rem;
background: var(--account-soft);
color: var(--account-soft-text);
font-weight: 650;
cursor: pointer;
text-decoration: none;
}
.private-mode-actions button.primary { background: var(--account-accent); color: var(--account-accent-text); }
.private-mode-actions button.danger { background: var(--account-danger-bg); color: var(--account-danger); }
.private-account-section { margin-top: 18px; border-top: 1px solid var(--account-line); padding-top: 14px; }
.private-account-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: var(--account-text); font-size: 13px; font-weight: 650; list-style: none; }
.private-account-section > summary::-webkit-details-marker { display: none; }
.private-account-section > summary span { display: inline-flex; align-items: center; gap: 6px; }
.private-account-section > summary small { color: var(--account-muted); font-size: 11px; font-weight: 400; }
.private-account-section[open] > summary small { visibility: hidden; }
.private-account-section .memory-editor { margin-top: 0; border-top: 0; padding-top: 14px; }
.private-mode-error { flex:1; min-width:0; max-height:2.8em; overflow:hidden; margin:0 !important; color:var(--account-danger) !important; font-size:12px !important; line-height:1.4 !important; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.private-mode-error:empty { display: none; }
.private-mode-menu[hidden], .private-mode-login[hidden] { display: none; }
.advanced-divider {
align-self: center;
margin: 1rem 0 .35rem;
color: #8f8492;
font-size: .78rem;
}
.advanced-status {
align-self: flex-start;
margin: .8rem 0 .1rem .6rem;
color: #5f5365;
font-size: .82rem;
}
body.dark-mode .advanced-status { color:#d0bdd5; }
body.dark-mode .advanced-interim .bubble {
color: #ccc0d0;
background: #333;
border-color: #5b4c60;
}
.advanced-process {
min-width:0;
margin:0;
border:0;
color:#5f5365;
font-size:inherit;
}
body.dark-mode .advanced-process { color:#d0bdd5; }
.advanced-process summary { display:flex; align-items:center; flex-wrap:wrap; gap:0 .5rem; min-height:22px; cursor:pointer; list-style:none; }
.advanced-process-time { font-weight:400; }
.advanced-process summary::-webkit-details-marker { display: none; }
.advanced-process summary::after { content:"›"; width:.72rem; flex:0 0 .72rem; color:inherit; line-height:1; text-align:center; transform-origin:center; }
.advanced-process[open] summary::after { transform:rotate(90deg); }
.advanced-process-body { margin:5px 0 7px; padding:9px 11px; border-radius:12px; background:#f4edf6; color:#615368; font-size:.82rem; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; font-weight:400; }
body.dark-mode .advanced-process-body { background:#3b303e; color:#d0bdd5; }
.advanced-process-body p { margin: .28rem 0; }
.advanced-process-body p.step::before { content: "· "; color: #9a40a7; }
.private-message-meta:has(> .advanced-process) { margin-left:0; margin-right:0; }
.private-process-only { align-self:flex-start; margin:10px 0 8px 46px; width:min(calc(82% - 50px),700px); font-size:.76rem; }
.advanced-result strong { font-weight: 750; }
.advanced-result .advanced-heading { margin:.9em 0 .35em; line-height:1.32; font-weight:780; }
.advanced-result h1.advanced-heading { font-size:1.24em; }
.advanced-result h2.advanced-heading { font-size:1.16em; }
.advanced-result h3.advanced-heading { font-size:1.09em; }
.advanced-result :is(h4,h5,h6).advanced-heading { font-size:1em; }
.advanced-result .advanced-quote { margin:.7em 0; padding:.12em 0 .12em .8em; border-left:3px solid rgba(112,95,118,.38); color:color-mix(in srgb,currentColor 78%,transparent); }
.advanced-result .advanced-divider { height:1px; margin:.85em 0; border:0; background:rgba(112,95,118,.24); }
.advanced-result .advanced-task { list-style:none; margin-left:-1.3em; }
.advanced-result .advanced-task > span { display:inline-block; width:1.3em; color:#68717d; }
body.dark-mode .advanced-result .advanced-quote { border-left-color:rgba(222,204,228,.34); }
.advanced-math-card { margin:.5rem 0; border:1px solid rgba(120,120,120,.22); border-radius:13px; overflow:hidden; background:rgba(128,128,128,.06); color:inherit; }
.advanced-math-header { display:flex; align-items:center; justify-content:space-between; padding:5px 12px; font-size:12px; color:inherit; opacity:.8; border-bottom:1px solid rgba(120,120,120,.15); }
.advanced-copy-math { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:8px; background:transparent; color:inherit; font-size:18px; cursor:pointer; }
.advanced-copy-math.copied { color:#268447; }
.advanced-math[data-display="true"] { display:block; padding:10px 14px; overflow-x:auto; white-space:pre; font-family:ui-monospace,monospace; }
.advanced-math .katex-display { margin:0; }
.advanced-math .katex { font-size:1.12em; }
.advanced-math[data-display="false"] { display:inline; }
.advanced-result.has-code { max-width: min(92%, 920px); }
.advanced-result .advanced-inline-code {
padding: .12em .36em;
border-radius: 6px;
background: rgba(127, 104, 132, .14);
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
font-size: .9em;
}
.advanced-code-card {
margin: .75rem 0;
overflow: hidden;
border: 1px solid #383838;
border-radius: 16px;
background: #222;
color: #f4f4f4;
}
.advanced-code-header {
display: flex;
align-items: center;
min-height: 42px;
padding: 0 .85rem;
border-bottom: 1px solid #353535;
background: #242424;
font-size: .8rem;
}
.advanced-code-mark { margin-right: .55rem; color: #f3f3f3; font-weight: 750; }
.advanced-code-language { font-weight: 700; }
.advanced-copy-code {
display: grid;
place-items: center;
width: 32px;
height: 32px;
margin-left: auto;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: #e7e7e7;
cursor: pointer;
}
.advanced-copy-code:hover { background: #343434; }
.advanced-copy-code.copied { color: #74d991; }
.advanced-result .advanced-code-card pre,
.advanced-result .advanced-code-card pre code {
margin: 0;
border: 0;
border-radius: 0;
background: #222;
white-space: pre;
word-break: normal;
}
.advanced-result .advanced-code-card pre { overflow-x: auto; padding: 0; }
.advanced-result .advanced-code-card pre code {
display: block;
min-width: max-content;
padding: 1rem 1.1rem;
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
font-size: .86rem;
line-height: 1.65;
}
.advanced-result a { color: #496fbd; text-decoration: none; }
.advanced-result a:hover { text-decoration: underline; }
body.dark-mode .advanced-result a { color: #91b9ff; }
.advanced-table-wrap {
max-width:100%;
margin:.85rem 0;
overflow-x:auto;
overscroll-behavior-inline:contain;
border:1px solid #ded7e0;
border-radius:13px;
background:rgba(255,255,255,.52);
-webkit-overflow-scrolling:touch;
}
.advanced-table { width:100%; border-collapse:collapse; color:inherit; font-size:.9em; line-height:1.55; table-layout:auto; }
.advanced-table th,
.advanced-table td { padding:.65rem .75rem; border-bottom:1px solid #e8e2e9; text-align:left; vertical-align:top; overflow-wrap:break-word; word-break:normal; }
.advanced-table th { background:rgba(127,104,132,.09); font-weight:750; white-space:nowrap; }
.advanced-table tbody tr:last-child td { border-bottom:0; }
.advanced-table tbody tr:nth-child(even) { background:rgba(127,104,132,.035); }
.advanced-table :is(th,td):first-child { width:auto; }
body.dark-mode .advanced-table-wrap { border-color:#514953; background:rgba(45,41,47,.72); }
body.dark-mode .advanced-table th,
body.dark-mode .advanced-table td { border-bottom-color:#4b454d; }
body.dark-mode .advanced-table th { background:rgba(210,178,218,.08); }
body.dark-mode .advanced-table tbody tr:nth-child(even) { background:rgba(210,178,218,.025); }
.advanced-result .advanced-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: .6rem;
margin-top: .75rem;
}
.advanced-result .advanced-gallery img {
display: block;
width: 100%;
max-height: 440px;
border-radius: 12px;
object-fit: contain;
background: #171419;
}
#voiceBtn.advanced-stop {
background: #e7a8b4 !important;
color: #4b1c27 !important;
}
/* Prevent a wrapped user bubble from shrinking its child a second time. */
body .bubble-wrapper.assistant {
width: 100%;
min-width: 0;
align-self: stretch;
box-sizing: border-box;
margin-left: 0;
}
body .bubble-wrapper.assistant > .bubble.assistant {
width: fit-content;
box-sizing: border-box;
}
body .bubble-wrapper.user {
width: 100%;
align-self: stretch;
align-items: flex-end;
background: transparent;
}
body .bubble-wrapper.user > .bubble.user {
width: fit-content;
max-width:min(85%,640px);
box-sizing: border-box;
}
.private-time-divider { align-self:center; margin:14px 0 6px; color:#777b80; font-size:12px; line-height:1.5; }
body.dark-mode .private-time-divider { color:#a0a3a8; }
body.daily-wallpaper-on .private-time-divider,body.daily-wallpaper-on .group-time-divider { position:relative; isolation:isolate; color:#30343a; }
body.daily-wallpaper-on .private-time-divider::before,body.daily-wallpaper-on .group-time-divider::before {
content:""; position:absolute; z-index:-1; inset:-2px -8px; border-radius:999px;
background:rgba(255,255,255,.88); box-shadow:0 1px 4px #0002; pointer-events:none;
}
body.dark-mode.daily-wallpaper-on .private-time-divider,body.dark-mode.daily-wallpaper-on .group-time-divider { color:#f4f4f5; }
body.dark-mode.daily-wallpaper-on .private-time-divider::before,body.dark-mode.daily-wallpaper-on .group-time-divider::before { background:rgba(35,37,41,.88); }
#group-mention-button { display:grid; place-items:center; border:0; border-radius:50%; width:var(--composer-control-size); height:var(--composer-control-size); flex:0 0 var(--composer-control-size); padding:0; color:#9a40a7; background:#eee6f1; cursor:pointer; }
#group-mention-button i { font-size:20px; line-height:1; }
#group-mention-button, #group-mention-button[hidden] { display:none!important; }
/* The same composer geometry is shared by private and group chat. */
body.dark-mode #group-mention-button { color:#e1b2ea; background:#423449; }
.group-room-intro {
align-self: center;
max-width: 620px;
margin: .5rem 0 1.1rem;
padding: .65rem 1rem;
border: 1px solid #dedfe1;
border-radius: 999px;
color: #717378;
background: rgba(255, 255, 255, .68);
font-size: .78rem;
line-height: 1.45;
text-align: center;
}
body.dark-mode .group-room-intro {
border-color: #4b4d51;
color: #bbb;
background: rgba(53, 54, 57, .72);
}
.avatar-message-run {
position:relative; display:grid; grid-template-columns:minmax(0,1fr);
/* Row 1 is the same name/gap geometry used by an ordinary message;
row 2 begins at the first bubble's exact top edge. */
grid-template-rows:calc(var(--group-avatar-run-start-gap) + var(--group-avatar-name-line) + var(--group-avatar-name-gap)) repeat(var(--run-length),max-content);
align-self:stretch; width:100%;
}
.avatar-message-run, .avatar-message-row.has-member-avatar {
--group-avatar-name-size:.76rem;
--group-avatar-name-line:1.064rem;
--group-avatar-name-gap:.16rem;
--group-avatar-run-start-gap:10px;
}
.avatar-message-run > .avatar-message-row {
grid-column:1; grid-row:var(--run-index);
align-self:start; justify-self:start;
}
.avatar-message-run > .avatar-message-row:first-child { margin-top:0; }
.avatar-message-run > .avatar-message-row:first-child > .group-message-meta {
position:absolute; top:calc(0px - var(--group-avatar-name-line) - var(--group-avatar-name-gap));
left:0; right:auto;
}
.avatar-message-run.self > .avatar-message-row:first-child > .group-message-meta { left:auto; right:0; }
.avatar-message-run.self > .avatar-message-row { justify-self:end; }
.avatar-message-run > .member-avatar {
position:sticky; grid-column:1; grid-row:2 / -1;
align-self:end; justify-self:start; top:auto; bottom:10px;
/* The grid area itself begins at the first bubble, so its upper sticky
boundary is identical to a single message's bubble-cell boundary. */
margin:0 0 12px var(--avatar-run-side);
}
.avatar-message-run.has-last-actions > .member-avatar { margin-bottom:54px; }
.avatar-message-run.self > .member-avatar { justify-self:end; margin-left:0; margin-right:var(--avatar-run-side); }
.group-message-meta {
margin: 0 .35rem .16rem;
color: #8d828f;
font-size: .7rem;
}
.avatar-message-row.has-member-avatar > .group-message-meta { grid-row:1; grid-column:1; }
.avatar-message-row.has-member-avatar > .group-message-actions { grid-row:3; grid-column:1; justify-self:start; }
.avatar-message-row.self.has-member-avatar { justify-items:end; margin-left:0; margin-right:46px; }
.member-avatar {
/* Single avatars end at their own bubble; runs end at the final bubble. */
position:sticky; grid-row:2 / 3; grid-column:1 / 2; align-self:end; justify-self:start;
top:auto; bottom:10px; margin-left:var(--avatar-single-side); width:46px; height:46px; z-index:1;
display:grid; place-items:center; padding:0; border:0; appearance:none;
border-radius:0; background:transparent; font-size:34px; line-height:1;
cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
-webkit-tap-highlight-color:transparent; outline:none; box-shadow:none;
touch-action:pan-y; transition:transform .25s cubic-bezier(.2,.75,.25,1);
}
.avatar-message-row.self .member-avatar { justify-self:end; margin-left:0; margin-right:var(--avatar-single-side); }
.member-avatar[hidden] { display:none!important; }
.member-avatar.is-holding { z-index:4; transform:scale(1.45); transition-duration:.46s; transition-timing-function:cubic-bezier(.42,0,.68,1); }
.member-avatar.member-avatar-ai { background:transparent; }
body.dark-mode .member-avatar { background:transparent; }
.avatar-message-row.has-member-avatar .group-message-meta {
font-size:var(--group-avatar-name-size); line-height:var(--group-avatar-name-line);
margin-bottom:var(--group-avatar-name-gap);
}
.group-message-meta[hidden] { display:none!important; }
.avatar-message-row.has-member-avatar { position:relative; display:grid; grid-template-columns:minmax(0,1fr); margin-left:46px; width:min(calc(82% - 50px),700px); margin-top:0; margin-bottom:8px; }
.avatar-message-row.message-run-start { margin-top:var(--group-avatar-run-start-gap, 10px); }
.avatar-message-row.message-run-end { margin-bottom:12px; }
body .bubble-wrapper.private-message-row.avatar-message-row.has-member-avatar {
align-self:flex-start; width:min(calc(82% - 50px),700px);
margin-left:46px; margin-right:0; align-items:initial;
}
body .bubble-wrapper.private-message-row.avatar-message-row.self.has-member-avatar {
align-self:flex-end; margin-left:0; margin-right:46px;
}
body .bubble-wrapper.private-message-row > .bubble.group-bubble {
max-width:100%; align-self:auto;
}
.group-time-divider { align-self:center; margin:14px 0 6px; color:#777b80; font-size:12px; line-height:1.5; }
body.dark-mode .group-time-divider { color:#a0a3a8; }
@media (prefers-reduced-motion:reduce) { .member-avatar { transition:none; } .member-avatar.is-holding { transform:none; } }
.group-message-meta[role="button"] { cursor:pointer; user-select:none; -webkit-user-select:none; }
.bubble[data-message-menu-bound="true"]:not(.message-text-selecting),
.bubble[data-message-menu-bound="true"]:not(.message-text-selecting) * { user-select:none!important; -webkit-user-select:none!important; -webkit-touch-callout:none; }
#chat-container .chat-location-card,
#chat-container .chat-location-card * { -webkit-touch-callout:default!important; }
.bubble.message-text-selecting,
.bubble.message-text-selecting * { user-select:text!important; -webkit-user-select:text!important; -webkit-touch-callout:default; }
#message-action-overlay { position:absolute; inset:0; z-index:10060; background:transparent; opacity:0; transition:opacity .48s ease; }
#message-action-overlay[hidden] { display:none!important; }
:root { --message-press-charge-time:.46s; --message-press-charge-ease:cubic-bezier(.42,0,.68,1); --message-press-lift-time:.16s; --message-press-lift-ease:cubic-bezier(.15,.8,.25,1); }
#message-hold-backdrop { position:fixed; inset:0; z-index:10050; pointer-events:none; background:rgba(23,20,25,.27); opacity:0; -webkit-backdrop-filter:blur(3.2px); backdrop-filter:blur(3.2px); transition:opacity .18s ease; }
#message-hold-backdrop[hidden] { display:none!important; }
#message-hold-backdrop.is-charging { opacity:.82; transition:opacity var(--message-press-charge-time) var(--message-press-charge-ease); }
#message-hold-backdrop.is-open { opacity:1; transition:opacity var(--message-press-lift-time) var(--message-press-lift-ease); }
.message-press-row { position:relative; z-index:10051; }
.message-press-clipped { clip-path:inset(var(--message-press-clip-top,0px) 0 var(--message-press-clip-bottom,0px) 0); }
.message-menu-source-row { visibility:hidden; }
.message-action-preview .member-avatar, .message-action-preview .group-message-meta { visibility:hidden; }
#message-action-overlay.is-open { opacity:1; transition:none; }
.message-action-preview.is-long { max-height:none; filter:none; overflow:visible; }
.message-action-preview { position:absolute; max-height:48vh; overflow:visible; pointer-events:none; opacity:1; transform:scale(var(--message-press-start-scale,1.07)); transform-origin:center; filter:none; transition:transform .48s cubic-bezier(.2,.78,.24,1),opacity .48s ease; z-index:0; }
.message-action-preview .group-message-row { width:100%; max-width:none; margin:0; }
.message-action-preview .message-actions, .message-action-preview .group-message-actions, .message-action-preview .play-btn, .message-action-preview .quote-btn { display:none!important; }
.message-reaction-picker { position:absolute; z-index:2; display:flex; align-items:center; gap:3px; padding:5px; border:1px solid rgba(255,255,255,.8); border-radius:999px; background:rgba(252,250,253,.96); box-shadow:0 8px 26px rgba(26,18,29,.22); opacity:0; transform:translateY(5px) scale(.94); transition:opacity .2s ease,transform .2s ease; }
.message-reaction-picker[hidden] { display:none!important; }
#message-action-overlay.is-open .message-reaction-picker { opacity:1; transform:translateY(0) scale(1); }
.message-reaction-picker button { display:grid; place-items:center; width:39px; height:39px; flex:0 0 39px; padding:0; border:0; border-radius:50%; background:transparent; font-size:23px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.message-reaction-picker button:active { transform:scale(1.22); background:rgba(90,70,95,.1); }
.bubble > .message-reactions, .message-text-card > .message-reactions { display:flex; flex-wrap:wrap; gap:5px; width:max-content; max-width:100%; margin:8px 0 0; white-space:normal; transform-origin:left bottom; }
.group-message-row.ai .message-reactions, .bubble-wrapper.assistant .message-reactions { margin-top:14px; }
.message-reaction { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:38px; min-height:27px; padding:2px 6px; border:1px solid #dedce2; border-radius:999px; color:#4b4650; background:#fff; font:inherit; font-size:13px; line-height:1.2; cursor:pointer; }
.message-reaction.is-mine { border-color:#a9cdec; color:#255f93; background:#e7f3ff; }
.message-reaction-symbol { font-size:14px; }
.message-reaction-count { font-variant-numeric:tabular-nums; }
.message-reaction-faces { display:inline-flex; align-items:center; padding-left:2px; }
.message-reaction-avatar { display:grid; place-items:center; flex:0 0 20px; width:20px; height:20px; border:1px solid #fff; border-radius:50%; background:#f0edf2; font-size:15px; line-height:1; }
.message-reaction-faces .message-reaction-avatar + .message-reaction-avatar { margin-left:-4px; }
.message-reaction-extra { margin-left:2px; font-size:11px; }
.message-reaction:active { transform:scale(.94); }
body.dark-mode .message-reaction-picker { border-color:rgba(255,255,255,.1); background:rgba(47,43,49,.97); }
body.dark-mode .message-reaction { border-color:#514b54; color:#ece5ef; background:#39343c; }
body.dark-mode .message-reaction.is-mine { border-color:#548ab4; color:#cae6ff; background:#233b50; }
body.dark-mode .message-reaction-avatar { border-color:#39343c; background:#514b54; }
#message-action-overlay.is-open .message-action-preview { transform:translateY(var(--message-preview-shift,0px)) scale(var(--message-preview-scale,1.14)); opacity:1; transition:none; }
#message-action-overlay.is-closing { opacity:1; transition:none; }
#message-action-overlay.is-closing .message-action-preview { animation:none; transform:scale(1); opacity:1; transition:transform .32s cubic-bezier(.2,.78,.24,1); }
#message-action-overlay.is-open .message-action-preview.is-long { animation:message-preview-lift var(--message-press-lift-time) var(--message-press-lift-ease) both; }
#message-action-overlay.is-closing .message-action-menu { animation:none; opacity:0; transform:translateY(-6px) scale(.94); transition:opacity .16s ease,transform .16s ease; }
.bubble.message-press-charging, .message-text-card.message-press-charging { animation:message-press-charge var(--message-press-charge-time) var(--message-press-charge-ease) both; transform-origin:center; }
.bubble.message-press-held { transform:scale(var(--message-press-scale,1.07)); transform-origin:center; }
.message-text-card.message-press-held { transform:scale(var(--message-press-scale,1.07)); transform-origin:center; }
.bubble.message-press-charging, .bubble.message-press-held, .message-action-preview .bubble { position:relative; filter:none; }
.message-action-preview .bubble { z-index:3; }
@keyframes message-press-charge { from { transform:scale(1); } to { transform:scale(var(--message-press-scale,1.07)); } }
#message-action-overlay.is-open .message-action-preview:not(.is-long) { animation:message-preview-lift var(--message-press-lift-time) var(--message-press-lift-ease) both; }
#message-action-overlay.is-open .message-action-menu { transform:translateY(0) scale(1); opacity:1; transition:none; animation:message-menu-reveal .26s .06s cubic-bezier(.2,.75,.3,1) both; }
@keyframes message-preview-lift {
0% { transform:scale(var(--message-press-start-scale,1.07)); opacity:1; }
100% { transform:translateY(var(--message-preview-shift,0px)) scale(var(--message-preview-scale,1.14)); opacity:1; }
}
@keyframes message-menu-reveal {
0% { transform:translateY(-8px) scale(.9); opacity:0; }
100% { transform:translateY(0) scale(1); opacity:1; }
}
.message-action-menu button { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; border:0; border-bottom:1px solid rgba(75,62,78,.1); padding:0 15px; color:#29242b; background:transparent; font-family:inherit; font-weight:500; font-size:16px; line-height:1.25; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.message-action-menu button span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-action-menu button:disabled { opacity:.45; cursor:default; }
.message-action-menu { position:absolute; z-index:1; display:flex; flex-direction:column; width:174px; overflow:hidden; border:1px solid rgba(255,255,255,.7); border-radius:15px; background:rgba(252,250,253,.96); box-shadow:0 12px 32px rgba(26,18,29,.22); transform:translateY(-6px) scale(.94); transform-origin:50% 0; opacity:0; transition:transform .48s cubic-bezier(.2,.78,.24,1),opacity .48s ease; max-height:calc(100dvh - 24px); overflow-y:auto; }
.message-action-menu button[hidden] { display:none!important; }
.message-action-menu button:last-child { border-bottom:0; }
.message-action-menu button:active { background:rgba(0,0,0,.08); }
.message-action-menu i { flex:0 0 20px; width:20px; color:#3f4145; font-size:20px; font-weight:400; text-align:center; }
body.dark-mode #message-action-overlay { background:rgba(8,7,9,0); }
body.dark-mode #message-hold-backdrop { background:rgba(8,7,9,.32); }
body.dark-mode .message-action-menu { border-color:rgba(255,255,255,.1); background:rgba(47,43,49,.95); box-shadow:0 14px 44px rgba(0,0,0,.38); }
body.dark-mode .message-action-menu button { border-bottom-color:rgba(255,255,255,.08); color:#f3eff4; }
body.dark-mode .message-action-menu i { color:#e4e4e4; }
@media (prefers-reduced-motion:reduce) { #message-action-overlay, #message-action-overlay.is-open, .message-action-menu, .message-action-preview, .message-reaction-picker { transition:none; } .bubble.message-press-charging, #message-action-overlay.is-open .message-action-preview, #message-action-overlay.is-open .message-action-menu, #message-action-overlay.is-open .message-action-preview .bubble { animation:none; } .bubble.message-press-held { transform:none; filter:none; } }
@media (prefers-reduced-motion:reduce) { #message-hold-backdrop, #message-hold-backdrop.is-charging, #message-hold-backdrop.is-open { transition:none; } }
.avatar-message-row .group-bubble {
width: fit-content;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: .78rem .92rem;
border: 1px solid #e7e0e9;
border-radius: 8px 17px 17px 17px;
background: #fff;
color: #272329;
box-shadow: 0 2px 9px rgba(48, 32, 51, .06);
white-space: pre-wrap;
}
.avatar-message-row > .play-btn,
.group-message-actions > .play-btn {
align-self: flex-start;
flex: 0 0 auto;
width: 42px;
min-width: 42px;
height: 36px;
padding: 0;
justify-content: center;
}
.group-message-actions .play-btn { margin-left:0; }
.avatar-message-row.self .group-bubble {
border-color: #c8dff4;
border-radius: 17px 8px 17px 17px;
background: #dff0ff;
}
.avatar-message-row.ai .group-bubble {
border-color: #dbc9df;
background: #f4edf6;
}
.avatar-message-row.ai .group-message-meta { color: #8b4f94; font-weight: 700; }
body.dark-mode .avatar-message-row .group-bubble {
border-color: transparent;
background: #333;
color: #fff;
}
body.dark-mode .avatar-message-row.self .group-bubble {
border-color: #3d668e;
background: #315f8c;
}
body.dark-mode .avatar-message-row.ai .group-bubble {
border-color: #664e6b;
background: #3b303e;
}
.avatar-message-row { display: flex; flex-direction: column; align-self: flex-start; width:min(82%,700px); margin: .28rem 0 .5rem .6rem; --message-bubble-fill:#fff; }
.avatar-message-row.self { align-self: flex-end; align-items: flex-end; margin-right: .6rem; --message-bubble-fill:#dff0ff; }
.avatar-message-row.ai { --message-bubble-fill:#f4edf6; }
body.dark-mode .avatar-message-row { --message-bubble-fill:#333; }
body.dark-mode .avatar-message-row.self { --message-bubble-fill:#315f8c; }
body.dark-mode .avatar-message-row.ai { --message-bubble-fill:#3b303e; }
.avatar-message-row.has-member-avatar > .group-bubble { grid-row:2; grid-column:1; position:relative; padding:.68rem .9rem; border-radius:20px; }
.avatar-message-row.message-run-end > .group-bubble:not(.emoji-only):not(.location-card-only) {
border-bottom-left-radius:8px;
}
.avatar-message-row.self.message-run-end > .group-bubble:not(.emoji-only):not(.location-card-only) {
border-bottom-left-radius:20px; border-bottom-right-radius:8px;
}
.group-ai-status {
align-self: flex-start;
margin: .35rem 0 .75rem .9rem;
color: #8c798f;
font-size: .78rem;
}
@keyframes group-pulse { 50% { opacity: .25; transform: scale(.75); } }
.group-ai-status.has-commentary { width: min(88%, 700px); box-sizing: border-box; }
.group-ai-status::before { width: 6px; height: 6px; margin-right: .45rem; border-radius: 50%; background: #a65db0; animation: group-pulse 1.2s ease-in-out infinite; content: none; display: none; }
.group-ai-status > div:first-child { display: flex; align-items: center; gap: .45rem; }
.group-ai-status > div:first-child::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #a65db0; animation: group-pulse 1.2s ease-in-out infinite; }
.group-progress-bubble { margin-top: .35rem; padding: .7rem .9rem; border: 1px dashed #b697bd; border-radius: 8px 17px 17px 17px; background: #f4edf6; color: #615368; font-size: .95rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
body.dark-mode .group-progress-bubble { border-color: #806488; color: #d0bdd5; background: #3b303e; }
/* Plain chat follows the theme; a visible photo uses its cached contrast tone. */
body { --wallpaper-label-ink:#000; }
body.dark-mode { --wallpaper-label-ink:#fff; }
body.daily-wallpaper-on { --wallpaper-label-ink:#fff; }
body.daily-wallpaper-on.daily-wallpaper-dark-text { --wallpaper-label-ink:#000; }
.wallpaper-contrast-label { color:var(--wallpaper-label-ink); }
body.daily-wallpaper-on .advanced-process summary::after { color:var(--wallpaper-label-ink); }
@media (max-width: 480px) {
#private-mode-overlay { padding: 12px; }
.private-mode-card { width: min(390px, calc(100vw - 24px)); border-radius: 18px; }
.private-mode-card h2 { font-size: 1.15rem; }
.private-mode-card p { margin-bottom: .8rem; line-height: 1.55; }
#private-mode-button,
#private-channel-button,
.channel-extra-actions button,
.channel-group-button { padding: .48rem .58rem; font-size: .74rem; }
.header-chat-modes { gap: .25rem; }
body.private-mode .header-wrapper { padding-inline: .65rem; }
#trait-label { display: none; }
.avatar-message-row { width:88%; margin-left:.2rem; }
.avatar-message-row.self { margin-right:.2rem; }
.group-room-intro { border-radius: 16px; }
.advanced-result.has-code { max-width: 94%; }
.advanced-code-card { margin-inline: -.25rem; border-radius: 13px; }
.advanced-result .advanced-code-card pre code { padding: .85rem; font-size: .8rem; }
}
@media (max-width: 640px) {
.advanced-table { width:max-content; min-width:32rem; max-width:none; }
.advanced-table th,
.advanced-table td { min-width:8rem; max-width:20rem; }
}
@media (max-width: 380px) {
.header-wrapper { padding-inline: .5rem; }
#private-mode-button,
#private-channel-button,
.channel-extra-actions button,
.channel-group-button { padding: .45rem .5rem; font-size: .71rem; }
#input-area { padding-inline: .5rem; }
#input-row { gap: .42rem; }
#input-row #userInput { padding-inline: .7rem; }
#input-row :is(#uploadLabel,#voiceBtn) { --composer-control-size:2.35rem; }
#input-row #group-mention-button { --composer-control-size:34px; }
.chat-action-panel { margin-inline: -.5rem; padding-inline: 18px; }
.advanced-table { font-size:.84em; }
.advanced-table th,
.advanced-table td { padding:.55rem .6rem; }
}
@media (min-width: 721px) {
body .header-wrapper {
width: min(100%, 912px);
margin-inline: auto;
box-sizing: border-box;
}
html body #chat-container {
width: min(100%, 960px);
margin-inline: auto;
padding-inline:24px;
--chat-side-padding:24px;
}
#input-row {
width: min(100%, 912px);
margin-inline: auto;
}
#attachment-preview {
width: min(100%, 912px);
margin-inline: auto;
}
.bubble.assistant {
max-width: min(82%, 780px);
}
.bubble.user {
max-width: min(72%, 640px);
}
.advanced-result.has-code {
max-width: 912px;
}
}
/* Long answers retain their complete Markdown/code; only the viewport is folded. */
.bubble.advanced-long.is-collapsed { max-height: 28rem; overflow: hidden; position: relative; }
.bubble.advanced-long.is-collapsed::after { content: ""; position: absolute; inset: auto 0 0; height: 2.5rem; background: linear-gradient(transparent, var(--bubble-assistant, #fff)); pointer-events: none; }
.bubble.advanced-long.is-collapsed > .message-reactions { position:absolute; z-index:1; bottom:.65rem; left:.9rem; max-width:calc(100% - 1.8rem); margin:0; }
.advanced-expand, .advanced-history-more { border: 0; background: transparent; color: #79618f; font: inherit; font-size: .85rem; padding: .45rem .7rem; cursor: pointer; }
.advanced-expand { display: block; align-self: flex-start; }
.advanced-history-more { display: block; margin: .5rem auto 1rem; }
.history-auto-sentinel { min-height:1.4rem; cursor:default; opacity:.72; }
.advanced-attachment-note { opacity: .65; font-size: .8rem; margin-top: .35rem; }
.advanced-interim .bubble { color: #756d78; background: #fff; box-shadow: none; border: 1px dashed #d6cbd9; white-space: pre-wrap; }
body.dark-mode .bubble.advanced-long.is-collapsed::after { background: linear-gradient(transparent, #302936); }
.chat-location-draft[hidden] { display:none; }
.chat-location-draft { position:relative; display:flex; gap:8px; width:auto; max-width:200px; height:58px; padding:0 12px; margin:2px 0 8px; align-items:center; border:1px solid #d9dadd; border-radius:15px; color:#45474b; background:#f1f1f2; }
.location-draft-label { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.location-picker { box-sizing:border-box; width:min(460px,calc(100% - 32px)); height:min(560px,80dvh); max-height:calc(var(--chat-viewport-height, 100dvh) - 24px); margin:auto; padding:14px; border:1px solid #dadbdd; border-radius:18px; background:#fff; color:#2d2f32; overflow:auto; }
.location-picker[open] { display:flex; flex-direction:column; gap:10px; }
.location-picker::backdrop { background:#18191b66; backdrop-filter:blur(4px); }
.location-picker button, .location-picker input { font:inherit; }
.location-picker button { cursor:pointer; min-height:44px; border:0; border-radius:10px; padding:9px 12px; color:var(--control-neutral-text); background:var(--control-neutral-bg); }
.location-picker button:disabled { opacity:.5; cursor:default; }
.location-picker form { display:flex; gap:8px; flex:0 0 auto; margin:0; }
.location-picker .picker-search-field { position:relative; flex:1; min-width:0; }
.location-picker input { width:100%; box-sizing:border-box; padding:9px 40px 9px 10px; border:1px solid #d5d6d8; border-radius:10px; font-size:16px; color:inherit; background:transparent; }
.location-picker input::-webkit-search-cancel-button { display:none; -webkit-appearance:none; appearance:none; }
.location-picker .picker-search-clear { position:absolute; top:50%; right:5px; display:grid; width:32px; min-height:32px; height:32px; place-items:center; padding:0; border-radius:50%; color:#55585d; background:transparent; font-size:19px; transform:translateY(-50%); }
.location-picker .picker-search-clear[hidden] { display:none; }
.location-picker .picker-search-clear:active { color:#202225; background:#e7e8ea; }
.picker-map-wrap { position:relative; min-height:140px; flex:1 1 240px; border-radius:14px; overflow:hidden; background:#eeeeef; }
.picker-map { position:absolute; inset:0; }
.location-picker .picker-pin, .chat-location-preview .chat-map-pin { position:absolute; z-index:10; left:50%; top:50%; transform:translate(-50%,-100%); pointer-events:none; color:#303236; font-size:34px; line-height:1; filter:drop-shadow(0 2px 2px #fff); }
.location-picker .picker-locate { position:absolute; right:12px; bottom:30px; z-index:11; background:#fff; box-shadow:0 2px 10px #0002; font-size:20px; padding:9px; }
.picker-results { flex:0 1 auto; max-height:120px; padding-right:10px; overflow:auto; overscroll-behavior:contain; }
.picker-results:empty { display:none; }
.location-picker .picker-results button { display:block; width:100%; background:transparent; text-align:left; border-bottom:1px solid #e8e8e9; }
.picker-results strong, .picker-results small { display:block; line-height:1.5; }
.picker-results strong { font-size:14px; font-weight:600; }
.picker-results small, .picker-selection small { color:#707277; font-size:12px; }
.picker-selection { flex:0 0 auto; padding:10px 12px; border-radius:12px; background:#00000008; min-height:64px; box-sizing:border-box; }
.picker-selection strong, .picker-selection small { display:block; line-height:1.5; overflow-wrap:break-word; }
.picker-selection strong { font-size:16px; font-weight:650; }
.picker-selection small { font-size:14px; opacity:1; }
.picker-selection .picker-accuracy { margin-top:4px; color:#825522; font-size:12px; }
.picker-selection .picker-accuracy[hidden] { display:none; }
.location-picker .picker-confirm { flex:0 0 auto; background:var(--control-primary-bg); color:var(--control-primary-text); }
.location-picker .picker-confirm:disabled { background:#e5e5e7; color:#929499; opacity:1; cursor:not-allowed; }
body.dark-mode .location-picker .picker-confirm:disabled { background:#404145; color:#929499; }
body.dark-mode .location-picker { color:#eee; background:#292a2d; border-color:#505257; }
body.dark-mode .location-picker input { border-color:#5b5d62; }
body.dark-mode .location-picker .picker-search-clear { color:#c7c9cc; background:transparent; }
body.dark-mode .location-picker .picker-search-clear:active { color:#fff; background:#4b4d51; }
body.dark-mode .location-picker .picker-pin, body.dark-mode .chat-location-preview .chat-map-pin { color:#eee; filter:drop-shadow(0 2px 2px #111); }
body.dark-mode .picker-results small, body.dark-mode .picker-selection small { color:#bbb; }
body.dark-mode .picker-selection .picker-accuracy { color:#e1b978; }
@media (max-width:600px) {
.location-picker { height:min(600px,78dvh); padding:12px; }
}
@media (max-height:500px) {
.location-picker { height:calc(var(--chat-viewport-height, 100dvh) - 24px); }
}
.chat-location-draft > i { font-size:27px; }
.chat-location-draft button { position:absolute; top:-7px; right:-7px; display:grid; width:23px; height:23px; min-height:23px; place-items:center; padding:0; border:1px solid #ddd; border-radius:50%; color:#4d4650; background:#fff; box-shadow:0 2px 6px #0002; cursor:pointer; }
.chat-location-draft button i { font-size:15px; line-height:1; }
.chat-location-message { margin-bottom:.65rem; white-space:pre-wrap; }
.chat-location-card { display:grid; grid-template-columns:34px minmax(0,1fr) 18px; align-items:center; gap:8px; width:280px; max-width:100%; min-width:0; box-sizing:border-box; overflow:hidden; margin-top:8px; padding:9px 11px 0; border:1px solid rgba(0,0,0,.09); border-radius:13px; color:inherit; background:rgba(255,255,255,.52); text-decoration:none; white-space:normal; transition:transform .15s ease,background-color .15s ease; }
.bubble.location-card-only,
.group-message-row .group-bubble.location-card-only,
body.dark-mode .bubble.location-card-only,
body.dark-mode .group-message-row .group-bubble.location-card-only { padding:0; border:0; background:transparent; box-shadow:none; }
.bubble.location-card-only > .chat-location-card { margin-top:0; }
.chat-location-card:hover { transform:translateY(-1px); background:rgba(255,255,255,.72); }
.chat-location-card > i:first-child { display:grid; width:30px; height:30px; place-items:center; border-radius:9px; color:#fff; background:#303236; font-size:17px; }
.chat-location-card span { display:grid; min-width:0; gap:1px; }
.chat-location-card strong { overflow:hidden; font-size:14px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.chat-location-card small { opacity:.62; font-size:11px; font-weight:400; }
.chat-location-card > .ri-arrow-right-s-line { opacity:.55; font-size:18px; }
.chat-location-card .chat-location-address { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-location-card .chat-location-preview { display:block; position:relative; grid-column:1 / -1; margin:0 -11px; aspect-ratio:2 / 1; overflow:hidden; background:#eaece8; }
.chat-location-preview .chat-location-placeholder { display:flex; position:absolute; inset:0; align-items:center; justify-content:center; padding:12px; color:#697367; font-size:12px; text-align:center; }
.chat-location-preview .chat-location-map-image { position:absolute; inset:0; display:block; width:100%; height:100%; max-height:none; margin:0; border:0; border-radius:0; object-fit:contain; }
.chat-location-preview [hidden] { display:none !important; }
body.dark-mode .chat-location-draft { border-color:#55575b; color:#ddd; background:#37383b; }
body.dark-mode .chat-location-draft button { border-color:#505257; color:#ddd; background:#303135; }
body.dark-mode .chat-location-card { border-color:rgba(255,255,255,.07); background:rgba(255,255,255,.06); }
body.dark-mode .chat-location-card:hover { background:rgba(255,255,255,.1); }
body.dark-mode .chat-location-card > i:first-child { color:#202124; background:#e5e6e8; }
.group-picker { width:min(380px,calc(100vw - 32px)); box-sizing:border-box; margin:auto; padding:18px; border:1px solid var(--account-line); border-radius:22px; background:var(--account-surface); color:var(--account-text); box-shadow:0 24px 70px rgba(0,0,0,.28); }
.mention-picker { display:flex; flex-direction:column; flex:none; width:100%; min-width:0; box-sizing:border-box; margin:0 0 8px; overflow:hidden; color:#323438; }
.mention-picker[hidden] { display:none; }
.mention-picker-list { position:relative; display:flex; gap:6px; min-width:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; padding:0 0 3px; }
.mention-picker-list button { display:block; flex:0 0 auto; max-width:180px; min-height:44px; padding:5px 12px; border:0; border-radius:12px; color:inherit; background:#f1f1f2; text-align:left; font:inherit; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.mention-picker-list button:first-child { margin-inline-start:auto; }
.mention-picker-list button:last-child { margin-inline-end:auto; }
.mention-picker-list button:hover, .mention-picker-list button[aria-selected="true"] { background:#e7e7e9; }
.mention-picker-list button.mention-ai { color:#8f3f9a; background:#f2e9f4; }
.mention-picker-list button.mention-ai:hover, .mention-picker-list button.mention-ai[aria-selected="true"] { background:#e8d8ec; }
.mention-empty { margin-inline:auto; padding:10px 2px; color:#85878c; font-size:13px; }
body.dark-mode .mention-picker { color:#eee; }
body.dark-mode .mention-picker-list button { background:#38393d; }
body.dark-mode .mention-picker-list button:hover, body.dark-mode .mention-picker-list button[aria-selected="true"] { background:#46474b; }
body.dark-mode .mention-picker-list button.mention-ai { color:#e1b2ea; background:#423449; }
body.dark-mode .mention-picker-list button.mention-ai:hover, body.dark-mode .mention-picker-list button.mention-ai[aria-selected="true"] { background:#503d56; }
.group-picker::backdrop { background:rgba(18,18,19,.52); backdrop-filter:blur(3px); }
.group-picker-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.group-picker-header h3 { margin:0; font-size:1.12rem; line-height:1.35; }
.group-picker-header p { margin:3px 0 0; color:var(--account-muted); font-size:.8rem; }
.group-picker-close { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:var(--account-soft); color:var(--account-soft-text); cursor:pointer; }
.group-picker-close i { font-size:19px; }
.group-picker-list { display:grid; gap:8px; }
.group-picker-option { display:grid; grid-template-columns:38px minmax(0,1fr) 22px; align-items:center; gap:11px; width:100%; margin:0; padding:11px 12px; border:1px solid var(--account-line); border-radius:15px; background:var(--account-field); color:var(--account-text); text-align:left; cursor:pointer; }
.group-picker-option:hover { background:var(--account-soft); }
.group-picker-option.is-current { border-color:#aeb0b4; background:#eeeeef; }
.group-picker-option > i:first-child { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--account-soft); color:#45474b; font-size:19px; }
.group-picker-option > span { display:flex; min-width:0; flex-direction:column; }
.group-picker-option strong { overflow:hidden; font-size:.93rem; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.group-picker-option small { color:var(--account-muted); font-size:.72rem; line-height:1.4; }
.group-picker-option > i:last-child { justify-self:end; color:var(--account-muted); font-size:18px; }
body.dark-mode .group-picker-option.is-current { border-color:#66686d; background:#38393c; }
body.dark-mode .group-picker-option > i:first-child { background:#3d3e42; color:#e3e3e3; }
/* A narrow vertical share card; media reserves an aspect-ratio slot before loading. */
.chat-link-preview { display:flex; flex-direction:column; box-sizing:border-box; width:min(276px,calc(100vw - 106px)); max-width:100%; max-height:360px; margin-top:8px; overflow:hidden; border:1px solid rgba(85,101,130,.13); border-radius:14px; background:#f7f8fa; box-shadow:0 1px 2px rgba(23,33,46,.035); color:inherit; text-decoration:none; text-align:left; transition:background .18s ease,border-color .18s ease; }
.chat-link-preview[hidden] { display:none !important; }
.chat-link-preview.chat-link-pending { justify-content:space-between; }
.chat-link-preview.chat-link-pending .chat-link-title { color:#708095; font-weight:550; }
body.dark-mode .chat-link-preview.chat-link-pending .chat-link-title { color:#b9c5d3; }
.chat-link-preview:hover { background:#eef1f5; border-color:rgba(85,101,130,.25); }
.chat-link-copy { display:flex; flex-direction:column; justify-content:flex-start; gap:6px; min-width:0; min-height:68px; box-sizing:border-box; padding:12px 13px 0; overflow:hidden; }
.chat-link-media { display:grid; position:relative; place-items:center; width:calc(100% - 20px); max-height:220px; aspect-ratio:16 / 9; margin:10px 10px 0; overflow:hidden; border-radius:9px; background:rgba(96,111,135,.08); }
.chat-link-preview.chat-link-note { width:min(260px,calc(100vw - 106px)); max-height:310px; border-radius:16px; box-shadow:0 2px 8px rgba(23,33,46,.065); }
@media (min-width:700px) {
.bubble.chat-link-note-host:not(.chat-link-only),
.group-message-row .group-bubble.chat-link-note-host:not(.chat-link-only) {
max-width:min(320px,100%);
}
}
.bubble.chat-link-only > .chat-link-preview.chat-link-note { width:min(260px,calc(100vw - 106px)); }
.chat-link-note .chat-link-media { order:-1; width:100%; max-height:198px; aspect-ratio:4 / 3; margin:0; border-radius:0; background:rgba(96,111,135,.045); }
.chat-link-note .chat-link-copy { min-height:0; padding:10px 12px 0; gap:0; }
.chat-link-note .chat-link-title { font-size:14px; font-weight:700; line-height:19px; }
.chat-link-note .chat-link-visual { object-fit:contain; }
.chat-link-note .chat-link-footer { min-height:29px; padding:7px 12px 10px; }
.chat-link-placeholder { color:#8791a0; font-size:28px; opacity:.6; }
.chat-link-placeholder[hidden] { display:none; }
.chat-link-visual { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .18s ease; }
.chat-link-visual.is-loaded { opacity:1; }
.chat-link-video-play { display:grid; position:absolute; z-index:2; left:50%; top:50%; width:38px; height:38px; place-items:center; border-radius:50%; background:rgba(0,0,0,.62); box-shadow:0 2px 9px rgba(0,0,0,.2); color:#fff; font-size:23px; transform:translate(-50%,-50%); }
.chat-link-video-duration { position:absolute; z-index:2; right:7px; bottom:7px; padding:2px 5px; border-radius:4px; background:rgba(0,0,0,.7); color:#fff; font-size:11px; line-height:15px; }
.chat-link-footer { display:flex; align-items:center; gap:6px; min-width:0; min-height:32px; box-sizing:border-box; padding:7px 12px 9px; overflow:hidden; }
.chat-link-brand-icon { display:block; width:16px; height:16px; flex:none; border-radius:3px; object-fit:contain; }
.chat-link-brand-fallback { display:grid; place-items:center; background:rgba(96,111,135,.14); color:#606d7e; font-size:12px; font-weight:700; line-height:1; }
.chat-link-brand-fallback .ri-global-line { font-size:13px; }
.chat-link-brand-xhs { background:#e73f5c; color:#fff; font-size:11px; }
.chat-link-brand-x { background:#111; color:#fff; font-size:13px; }
body.dark-mode .chat-link-brand-fallback:not(.chat-link-brand-xhs):not(.chat-link-brand-x) { background:rgba(255,255,255,.14); color:#c4cbd5; }
.bubble.chat-link-only,
.group-message-row .group-bubble.chat-link-only,
body.dark-mode .bubble.chat-link-only,
body.dark-mode .group-message-row .group-bubble.chat-link-only { width:fit-content; min-width:0; max-width:min(276px,calc(100vw - 106px)); padding:0; border:0; background:transparent; box-shadow:none; }
.bubble.chat-link-only > .chat-link-preview { width:min(276px,calc(100vw - 106px)); max-width:100%; margin-top:0; }
/* Keep the message text and its card in one compact column. The bubble's
outer cap includes its inline padding; the card itself keeps its own width. */
body .bubble-wrapper > .bubble.chat-link-with-card:not(.chat-link-only),
.group-message-row > .group-bubble.chat-link-with-card:not(.chat-link-only) {
--chat-link-card-width:276px;
--chat-link-parent-limit:100%;
max-width:min(calc(var(--chat-link-card-width) + 1.84rem + 2px),calc(100vw - 106px + 1.84rem + 2px),var(--chat-link-parent-limit));
overflow-wrap:anywhere;
}
body .bubble-wrapper.user > .bubble.user.chat-link-with-card:not(.chat-link-only) { --chat-link-parent-limit:85%; }
body .bubble-wrapper > .bubble.chat-link-with-card.chat-link-note-host:not(.chat-link-only),
.group-message-row > .group-bubble.chat-link-with-card.chat-link-note-host:not(.chat-link-only) { --chat-link-card-width:260px; }
.chat-link-site { overflow:hidden; color:#727986; font-size:11px; line-height:17px; text-overflow:ellipsis; white-space:nowrap; }
.chat-link-title { display:-webkit-box; overflow:hidden; font-size:15px; font-weight:650; line-height:21px; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.chat-link-description { display:-webkit-box; overflow:hidden; color:#6e7682; font-size:12px; line-height:17px; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.bubble.chat-link-source-compact > .chat-link-preview { margin-top:6px; }
.group-message-row.self .chat-link-preview,.private-message-row.user .chat-link-preview { border-color:#bdd8f2; background:#e4f1fd; }
.group-message-row.self .chat-link-preview:hover,.private-message-row.user .chat-link-preview:hover { background:#dcecfb; }
body.dark-mode .chat-link-preview { border-color:rgba(255,255,255,.08); background:#303238; box-shadow:none; }
body.dark-mode .chat-link-preview:hover { background:#393c43; }
body.dark-mode .group-message-row.self .chat-link-preview,body.dark-mode .private-message-row.user .chat-link-preview { border-color:rgba(133,179,235,.27); background:#25384c; }
body.dark-mode .group-message-row.self .chat-link-preview:hover,body.dark-mode .private-message-row.user .chat-link-preview:hover { background:#2d4259; }
body.dark-mode .chat-link-site,body.dark-mode .chat-link-description { color:#aeb3bd; }
.chat-link-preview.chat-link-text-only .chat-link-copy { min-height:0; }
.chat-link-preview.chat-link-text-only .chat-link-footer { min-height:0; }
/* Keep a light, distinct tap target inside a message without the heavy
nested-card border. A link-only card keeps its full surface below. */
.bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only {
width:100%; margin-top:10px; border:0; border-radius:10px;
background:#e9edf2; box-shadow:none;
}
.bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only .chat-link-copy { gap:4px; padding:10px 11px 0; }
.bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only .chat-link-title { font-size:14px; line-height:20px; }
.bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only .chat-link-footer { padding:8px 11px 10px; }
.bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only:hover { background:#e0e6ed; }
.bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only:hover .chat-link-title { text-decoration:underline; }
.group-message-row.self .bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only,
.private-message-row.user .bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only { background:#edf5fc; }
.group-message-row.self .bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only:hover,
.private-message-row.user .bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only:hover { background:#eef1f5; }
body.dark-mode .bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only { background:#3d4047; }
body.dark-mode .bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only:hover { background:#464a52; }
body.dark-mode .group-message-row.self .bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only,
body.dark-mode .private-message-row.user .bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only { background:#3c5270; }
body.dark-mode .group-message-row.self .bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only:hover,
body.dark-mode .private-message-row.user .bubble.chat-link-with-card:not(.chat-link-only) > .chat-link-preview.chat-link-text-only:hover { background:#4a6180; }
.bubble.chat-link-only > .chat-link-preview,
.bubble.location-card-only > .chat-location-card { border-color:rgba(85,101,130,.16); background:#f7f8fa; box-shadow:none; }
.group-message-row.self .bubble.chat-link-only > .chat-link-preview,
.group-message-row.self .bubble.location-card-only > .chat-location-card,
.private-message-row.user .bubble.chat-link-only > .chat-link-preview,
.private-message-row.user .bubble.location-card-only > .chat-location-card { background:#e4f1fd; }
.group-message-row.ai .bubble.chat-link-only > .chat-link-preview,
.group-message-row.ai .bubble.location-card-only > .chat-location-card { background:#f4edf6; }
body.dark-mode .bubble.chat-link-only > .chat-link-preview,
body.dark-mode .bubble.location-card-only > .chat-location-card { border-color:rgba(255,255,255,.1); background:#303238; }
body.dark-mode .group-message-row.self .bubble.chat-link-only > .chat-link-preview,
body.dark-mode .group-message-row.self .bubble.location-card-only > .chat-location-card,
body.dark-mode .private-message-row.user .bubble.chat-link-only > .chat-link-preview,
body.dark-mode .private-message-row.user .bubble.location-card-only > .chat-location-card { background:#25384c; }
body.dark-mode .group-message-row.ai .bubble.chat-link-only > .chat-link-preview,
body.dark-mode .group-message-row.ai .bubble.location-card-only > .chat-location-card { background:#3b303e; }
.bubble.chat-link-only > .chat-link-preview:hover,
.bubble.location-card-only > .chat-location-card:hover { box-shadow:0 2px 9px rgba(23,33,46,.14); }
/* Restrict browser page zoom at the shell, without changing native controls
inside stacked dialogs. The image viewer still scales its image itself. */
html, body { touch-action:pan-x pan-y; }
/* One theme-aware scrollbar for every scrollable surface in the chat and admin UI. */
:root {
--maizi-scrollbar-thumb:#aeb2b8;
--maizi-scrollbar-thumb-hover:#8d9299;
}
:root:has(body.dark-mode) {
--maizi-scrollbar-thumb:#666a70;
--maizi-scrollbar-thumb-hover:#7b7f86;
}
:root, :root * {
scrollbar-width:thin;
scrollbar-color:var(--maizi-scrollbar-thumb) transparent;
}
:root::-webkit-scrollbar, :root *::-webkit-scrollbar { width:7px; height:7px; }
:root::-webkit-scrollbar-track, :root *::-webkit-scrollbar-track { background:transparent; }
:root::-webkit-scrollbar-track-piece, :root *::-webkit-scrollbar-track-piece { background:transparent; }
:root::-webkit-scrollbar-button, :root *::-webkit-scrollbar-button { display:none; width:0; height:0; }
:root::-webkit-scrollbar-thumb, :root *::-webkit-scrollbar-thumb {
border:2px solid transparent;
border-radius:999px;
background:var(--maizi-scrollbar-thumb);
background-clip:padding-box;
}
:root::-webkit-scrollbar-thumb:hover, :root *::-webkit-scrollbar-thumb:hover { background-color:var(--maizi-scrollbar-thumb-hover); }
:root::-webkit-scrollbar-corner, :root *::-webkit-scrollbar-corner { background:transparent; }
/* Account/admin palette mirrors the existing monochrome chat chrome.
Light: #f4f4f4 canvas, white bubbles, #dff0ff user bubbles.
Dark: #1e1e1e canvas, #2c2c2c chrome, #333 bubbles, #336699 users.
Purple is reserved for AI identity and does not color generic controls. */
/* Shared action colors, inherited by chat, dialogs and administration. */
:root {
--control-neutral-bg:#eee; --control-neutral-text:#34363a;
--control-neutral-hover:#e2e2e2; --control-neutral-pressed:#ddd;
--control-primary-bg:#303236; --control-primary-text:#fff;
}
body.dark-mode, .account-ui.dark-mode {
--control-neutral-bg:#383838; --control-neutral-text:#eaeaea;
--control-neutral-hover:#444; --control-neutral-pressed:#4a4a4a;
--control-primary-bg:#e7e8ea; --control-primary-text:#202124;
}
.account-ui {
--account-bg: #f4f4f4; --account-surface: #fff; --account-chrome: #fff; --account-field: #fff;
--account-text: #000; --account-muted: #666; --account-line: #eee; --account-input-line: #ccc;
--account-accent: var(--control-primary-bg); --account-accent-text: var(--control-primary-text);
--account-soft: var(--control-neutral-bg); --account-soft-text: var(--control-neutral-text);
--account-user-bg: #dff0ff; --account-user-text: #000; --account-link: #496fbd;
--account-danger-bg: #fcecef; --account-danger: #a62d49; --account-danger-line: #edc2cc;
--account-danger-strong: #b53552;
--account-shadow: 0 1px 4px rgba(0, 0, 0, .1);
color: var(--account-text); color-scheme: light;
font: 400 15px/1.6 "Helvetica Neue", sans-serif;
}
body.dark-mode .account-ui, .account-ui.dark-mode {
--account-bg: #1e1e1e; --account-surface: #333; --account-chrome: #2c2c2c; --account-field: #2c2c2c;
--account-text: #eaeaea; --account-muted: #aaa; --account-line: #444; --account-input-line: #555;
--account-user-bg: #336699; --account-user-text: #fff; --account-link: #91b9ff;
--account-danger-bg: #3a252b; --account-danger: #f1a7b7; --account-danger-line: #75454c;
--account-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color-scheme: dark;
}
.account-ui *, .account-ui *::before, .account-ui *::after { box-sizing: border-box; }
.account-ui .account-button {
display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
min-height: 40px; border: 1px solid transparent; border-radius: 12px;
padding: .55rem .85rem; font: inherit; font-weight: 600;
font-size: 14px; line-height: 1.4; text-decoration: none; cursor: pointer;
background: var(--account-soft); color: var(--account-soft-text);
}
.account-ui .account-button.primary { background: var(--account-accent); color: var(--account-accent-text); }
.account-ui .account-button.control-entry { background: var(--account-accent); color: var(--account-accent-text); }
.account-ui .account-button.danger { background: var(--account-danger-bg); color: var(--account-danger); }
.account-ui .account-button:hover:not(:disabled) { filter: brightness(.96); }
.account-ui .account-button:disabled { cursor: not-allowed; opacity: .5; }
.account-password-dialog { width:min(420px,calc(100% - 32px)); }
.account-password-form { display:grid; gap:14px; margin-top:16px; }
.account-password-form label { display:grid; gap:6px; color:var(--account-text); font-size:14px; }
.account-password-form input { width:100%; min-width:0; padding:11px 12px; border:1px solid var(--account-input-line); border-radius:12px; font:inherit; font-size:16px; color:var(--account-text); background:var(--account-field); }
.account-password-form [role="status"] { margin:0; padding:0; border:0; font-size:13px; color:var(--account-muted); }
.account-password-form [role="status"]:empty { display:none; }
body.dark-mode .account-profile-dialog { --account-surface:#292929; --account-bg:#292929; --account-field:#333; --account-line:#474747; --account-input-line:#5a5a5a; --profile-line:#454545; }
.account-profile-dialog .collection-card, .avatar-picker-dialog .collection-card { animation:none; }
.account-profile-form { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; margin-top:0; overflow:hidden; }
.account-profile-name,.account-profile-username { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-profile-basic-row input:focus-visible { box-shadow:inset 0 -1px var(--account-link); }
.account-profile-basic-row input[type="tel"] { font-variant-numeric:tabular-nums; }
.account-profile-date-control { display:block; min-width:0; width:100%; padding:3px 0; border:0; border-radius:0; background:transparent; color:var(--account-text); font:400 16px/1.4 "Helvetica Neue",sans-serif; text-align:right; cursor:pointer; }
.account-profile-date-control:focus-visible { outline:2px solid var(--account-link); outline-offset:1px; }
.account-profile-birthday-panel[hidden] { display:none; }
.account-birthday-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:34px; }
.account-birthday-heading strong { flex:1; color:var(--account-text); font-size:14px; text-align:center; }
.account-birthday-heading button, .account-birthday-choice, .account-birthday-clear { border:0; color:var(--account-text); background:transparent; font:inherit; cursor:pointer; }
.account-birthday-heading .account-birthday-nav { width:34px; height:34px; border-radius:8px; font-size:24px; line-height:1; }
.account-birthday-heading .account-birthday-back { min-height:34px; padding:4px 9px; border-radius:8px; background:var(--account-soft); font-size:13px; }
.account-birthday-heading button:disabled, .account-birthday-choice:disabled, .account-birthday-clear:disabled { opacity:.35; cursor:default; }
.account-birthday-grid { display:grid; gap:4px; }
.account-birthday-grid.is-year { grid-template-columns:repeat(5,minmax(0,1fr)); }
.account-birthday-grid.is-month { grid-template-columns:repeat(4,minmax(0,1fr)); }
.account-birthday-grid.is-day, .account-birthday-weekdays { grid-template-columns:repeat(7,minmax(0,1fr)); }
.account-birthday-weekdays { display:grid; color:var(--account-muted); font-size:12px; text-align:center; }
.account-birthday-choice { min-width:0; min-height:35px; padding:3px 0; border-radius:8px; font-size:13px; text-align:center; }
.account-birthday-choice[aria-pressed="true"] { background:var(--account-accent); color:var(--account-accent-text); font-weight:700; }
.account-birthday-choice:not(:disabled):active, .account-birthday-heading button:not(:disabled):active { background:var(--account-soft); }
.account-birthday-actions { display:flex; justify-content:flex-end; border-top:1px solid var(--account-line); padding-top:7px; }
.account-birthday-clear { min-height:30px; padding:2px 8px; color:var(--account-muted); font-size:12px; }
.account-profile-birthday-panel button:focus-visible { outline:2px solid var(--account-link); outline-offset:1px; }
.account-profile-section-heading button:disabled { color:var(--account-muted); opacity:.6; cursor:default; }
.account-name-hint { margin:0; color:var(--account-muted); font-size:13px; }
.member-card-dialog { --member-ink:#182d42; --member-paper:#faf7f0; --member-gold:#b5935f; --member-card-ratio:1.48; --member-card-width-cap:calc(65dvh - 20px); box-sizing:border-box; width:min(328px,calc(100% - 52px),var(--member-card-width-cap)); aspect-ratio:1 / var(--member-card-ratio); height:auto; max-height:calc(100dvh - 32px); border:0; border-radius:22px; box-shadow:0 24px 64px rgba(10,25,48,.28); overflow:hidden; color-scheme:light; -webkit-tap-highlight-color:transparent; }
.member-card-dialog .collection-card { display:flex; flex-direction:column; height:100%; min-height:0; max-height:100%; padding:0; border:1px solid rgba(24,45,66,.14); border-radius:22px; background:var(--member-paper); box-shadow:none; overflow:hidden; animation:none; -webkit-tap-highlight-color:transparent; }
.member-card-hero { position:relative; z-index:1; flex:0 0 23%; min-height:0; border-bottom:2px solid var(--member-gold); background:linear-gradient(135deg,#10263c,#1c3b54); }
.member-card-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:15px 17px; color:#fff; font-size:18px; font-weight:750; letter-spacing:.08em; }
.member-card-dialog.maizi-dialog .dialog-close, body.dark-mode .member-card-dialog.maizi-dialog .dialog-close { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; min-width:32px; max-width:32px; min-height:32px; padding:0; appearance:none; border:0; border-radius:50%; box-shadow:none; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.member-card-dialog.maizi-dialog .dialog-close:active, body.dark-mode .member-card-dialog.maizi-dialog .dialog-close:active { background:rgba(255,255,255,.25); }
.member-card-avatar { position:absolute; bottom:-36px; left:50%; display:grid; place-items:center; width:78px; height:78px; transform:translateX(-50%); border:3px solid #e1c28e; border-radius:50%; background:#e5f3ff; color:#142a4a; box-shadow:0 6px 18px rgba(5,22,47,.2); font:44px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.member-card-name { display:-webkit-box; flex:none; max-height:2.4em; min-width:0; margin:0 0 12px; overflow:hidden; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:var(--member-ink); font-size:25px; font-weight:750; line-height:1.2; text-align:center; }
.member-card-role { flex:none; margin:-5px 0 4px; color:#9d7945; font-size:11px; font-weight:750; letter-spacing:.12em; text-align:center; }
.member-card-dialog[data-assistant="true"] .member-card-name { margin-bottom:16px; }
.member-card-content { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; padding:47px 18px 15px; background:var(--member-paper); }
.member-card-info { display:flex; flex:0 1 auto; flex-direction:column; min-height:0; }
.member-card-section-title { flex:none; margin:0 0 7px; color:var(--member-ink); font-size:13px; font-weight:750; letter-spacing:.08em; }
.member-card-details { display:flex; flex:0 1 auto; flex-direction:column; justify-content:flex-start; min-height:0; padding:6px 12px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; border:1px solid rgba(24,45,66,.11); border-radius:14px; background:#fffdfa; }
.member-card-dialog:is([data-density="sparse"],[data-density="balanced"]) .member-card-info { margin-block:0; }
.member-card-dialog[data-density="empty"] .member-card-section-title { display:none; }
.member-card-dialog[data-density="empty"] .member-card-details { border:0; background:transparent; }
.member-card-detail { display:grid; grid-template-columns:30px 36px minmax(0,1fr); align-items:center; column-gap:7px; min-width:0; min-height:58px; padding:9px 0; border-bottom:1px solid rgba(24,45,66,.11); color:#806f58; font-size:12px; line-height:1.4; }
.member-card-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#f7efe2; color:#8a6835; }
.member-card-icon svg { display:block; width:18px; height:18px; }
.member-card-detail > span:nth-child(2) { grid-column:2; }
.member-card-detail > :last-child { min-width:0; color:var(--member-ink); font-size:14px; font-weight:650; overflow-wrap:anywhere; }
.member-card-detail:last-child { border-bottom:0; }
.member-card-sites { align-items:start; }
.member-card-sites .member-card-icon { grid-row:1; align-self:start; }
.member-card-sites > span:nth-child(2) { grid-column:2; grid-row:1; align-self:start; padding-top:7px; }
.member-card-sites .member-card-links { grid-column:3; grid-row:1; }
.member-card-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.member-card-links > * { display:flex; align-items:center; justify-content:center; min-width:0; min-height:28px; padding:4px 7px; border:1px solid rgba(181,147,95,.48); border-radius:8px; background:#fffdf8; color:#244d68; font-size:12px; font-weight:650; text-align:center; text-decoration:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.member-card-links > a { cursor:pointer; }
.member-card-links > a:hover, .member-card-links > a:focus-visible { border-color:var(--member-gold); background:#f1e8d8; text-decoration:underline; outline:none; }
.member-card-links > span { border-color:transparent; background:transparent; color:#806f58; }
.member-card-empty { display:flex; flex:0 0 auto; align-items:center; justify-content:center; min-height:48px; margin:0; color:#806f58; text-align:center; font-size:13px; }
@media (max-width:340px) {
.member-card-dialog, .member-card-dialog .collection-card { max-height:calc(100dvh - 16px); }
.member-card-topline { padding:10px 13px; font-size:16px; }
.member-card-avatar { bottom:-32px; width:70px; height:70px; font-size:39px; }
.member-card-content { padding:41px 13px 10px; }
.member-card-name { margin-bottom:8px; font-size:22px; }
.member-card-section-title { margin-bottom:4px; }
.member-card-details { padding:3px 9px; }
.member-card-detail { grid-template-columns:26px 30px minmax(0,1fr); column-gap:6px; min-height:50px; padding:5px 0; }
.member-card-icon { width:26px; height:26px; }
.member-card-icon svg { width:16px; height:16px; }
.member-card-sites > span:nth-child(2) { padding-top:4px; }
.member-card-links { gap:4px; }
.member-card-links > * { min-height:23px; padding:2px 5px; font-size:11px; }
}
.member-card-dialog [hidden] { display:none!important; }
.account-profile-place-list,.account-profile-website-list,.account-profile-custom-list { display:grid; min-width:0; }
.account-profile-custom-list:empty,.account-profile-website-list:empty { display:none; }
.account-profile-place-kind { min-width:0; line-height:1.4; }
.account-profile-place-detail span { color:var(--account-muted); font-weight:400; white-space:nowrap; }
.account-profile-place-detail input::placeholder { color:var(--account-muted); }
.account-profile-place-detail input:focus-visible { box-shadow:inset 0 -1px var(--account-link); }
.account-profile-place-actions button:active { background:var(--account-soft); }
.account-profile-custom-row input { width:100%; min-width:0; padding:2px 0; border:0; border-radius:0; outline:none; background:transparent; color:var(--account-text); font:inherit; font-weight:600; }
.account-profile-custom-row input:focus-visible { box-shadow:inset 0 -1px var(--account-link); }
.account-ui .account-profile-note { margin:0; color:var(--account-muted); font-size:12px; line-height:1.55; }
.account-profile-website-row .account-profile-place-kind { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-profile-website-row input { min-width:0; margin:0; border:0; border-radius:0; outline:none; background:transparent; color:var(--account-text); font-family:"Helvetica Neue",sans-serif; }
.account-profile-website-row input:focus-visible { box-shadow:inset 0 -1px var(--account-link); }
.account-profile-website-name-input { width:100%; padding:3px 0; font-weight:600; line-height:1.35; }
.account-profile-website-url-input { width:100%; padding:2px 0; line-height:1.4; }
.account-profile-privacy-trigger small { display:inline; margin:0; color:var(--account-muted); font-size:11px; font-weight:400; }
.account-profile-privacy-dialog { width:min(420px,calc(100% - 28px)); max-height:min(80dvh,600px); border-radius:20px; box-shadow:0 16px 48px rgba(0,0,0,.15); overflow:hidden; }
.account-profile-privacy-dialog .collection-card { display:flex; flex-direction:column; max-height:min(80dvh,600px); box-shadow:none; overflow:hidden; }
.account-profile-privacy-dialog .private-mode-actions { flex:none; padding-top:12px; border-top:1px solid var(--account-line); }
.account-profile-privacy-status { margin:0; color:var(--account-danger); font-size:12px; line-height:1.4; }
.account-profile-privacy-status:empty { display:none; }
.account-profile-privacy-intro { margin:0; color:var(--account-muted); font-size:13px; }
.account-profile-public-options { display:grid; border:1px solid var(--account-line); border-radius:9px; overflow:hidden; }
.account-ui.account-profile-privacy-dialog .account-profile-public-toggle { display:flex; align-items:center; gap:8px; width:100%; min-height:39px; padding:7px 10px; border:0; border-radius:0; color:var(--account-text); background:transparent; font:inherit; font-size:13px; text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
.account-profile-public-options .account-profile-public-toggle + .account-profile-public-toggle { border-top:1px solid var(--account-line); }
.account-profile-public-toggle .account-profile-public-check { display:grid; place-items:center; flex:none; width:17px; height:17px; margin-left:auto; border:1.5px solid var(--account-input-line); border-radius:5px; background:var(--account-field); }
.account-profile-public-toggle[aria-pressed="true"] .account-profile-public-check { border-color:var(--account-accent); background:var(--account-accent); }
.account-profile-public-toggle[aria-pressed="true"] .account-profile-public-check::after { content:""; width:8px; height:5px; border:solid var(--account-accent-text); border-width:0 0 2px 2px; transform:translateY(-1px) rotate(-45deg); }
@media (hover:hover) and (pointer:fine) { .account-profile-public-toggle:focus-visible .account-profile-public-check { box-shadow:0 0 0 2px var(--account-link); } }
.account-profile-privacy-websites { display:grid; gap:8px; }
.account-profile-privacy-websites:empty { display:none; }
.account-profile-privacy-websites > strong { font-size:13px; }
.account-ui.account-profile-privacy-dialog .account-profile-privacy-websites .account-profile-public-toggle { min-height:38px; border:1px solid var(--account-line); border-radius:9px; }
.account-profile-form .account-profile-status { margin:0; padding:3px 0; border:0; border-radius:0; background:transparent; color:var(--account-danger); font-size:12px; line-height:1.4; }
.account-profile-form .account-profile-status:empty { display:none; }
/* Profile editor: compact, scrollable content with fixed actions. */
.account-profile-dialog { --profile-line:#e5e5e7; border-radius:20px; box-shadow:0 20px 56px rgba(0,0,0,.19); overflow:hidden; width:min(420px,calc(100% - 44px)); max-height:min(84dvh,710px); }
.account-profile-dialog .collection-card { display:flex; flex-direction:column; border-color:var(--profile-line); background:var(--account-surface); box-shadow:none; overflow:hidden; max-height:min(84dvh,710px); padding:13px 16px 0; }
.account-profile-dialog .dialog-heading { border-bottom:1px solid var(--profile-line); padding:0 1px 9px; }
.account-profile-dialog .dialog-heading strong { color:var(--account-text); font-weight:700; font-size:20px; }
.account-profile-dialog .dialog-close > i { display:block; line-height:1; }
.account-profile-scroll { display:block; flex:1 1 auto; min-height:0; padding:10px 0 12px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
.account-profile-scroll::-webkit-scrollbar,.account-profile-privacy-body::-webkit-scrollbar { display:none; width:0; height:0; }
.account-profile-privacy-body { display:grid; gap:12px; min-height:0; padding:14px 10px 14px 0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
.account-profile-overview { container:profile-overview / inline-size; display:grid; gap:14px; padding:12px; border:1px solid var(--profile-line); border-radius:13px; }
.account-profile-identity { display:grid; grid-template-columns:72px minmax(0,1fr) 30px; align-items:center; gap:12px; padding:0; }
.account-profile-dialog .account-profile-avatar { display:grid; place-items:center; width:72px; height:72px; padding:0; border-radius:17px; font-size:43px; line-height:1; }
.account-profile-identity-copy { display:grid; min-width:0; gap:3px; }
.account-profile-identity-copy .account-profile-name { color:var(--account-text); font-size:20px; font-weight:650; line-height:1.3; }
.account-profile-username { color:var(--account-muted); font-size:13px; font-weight:400; line-height:1.4; }
.account-profile-edit-name { grid-column:3; grid-row:1; align-self:center; justify-self:end; }
.account-profile-icon-button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:9px; background:transparent; color:var(--account-muted); font-size:17px; line-height:1; cursor:pointer; }
.account-ui.account-profile-dialog .account-profile-icon-button { padding:0; background:transparent; }
.account-ui.account-profile-dialog .account-profile-icon-button:active { background:transparent; color:var(--account-text); }
.account-profile-section { display:grid; min-width:0; border-top:1px solid var(--profile-line); gap:6px; padding-top:9px; }
.account-profile-overview + .account-profile-section { margin-top:12px; }
.account-profile-section + .account-profile-section { margin-top:9px; }
.account-profile-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:27px; padding:0 2px; }
.account-profile-section-heading strong { line-height:1.4; font-weight:700; font-size:14px; }
.account-profile-section-heading button { border:0; font:inherit; font-weight:500; white-space:nowrap; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:3px; min-height:30px; padding:3px 8px; border-radius:9px; background:var(--account-soft); color:var(--account-soft-text); font-size:12px; line-height:1; }
.account-profile-section-heading button:active { background:var(--account-soft); }
.account-profile-section-heading button i { display:block; font-size:16px; line-height:1; }
.account-profile-basics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,138px),1fr)); gap:8px; }
.account-profile-basic-row { display:grid; align-items:center; grid-template-columns:24px minmax(0,1fr); gap:2px 6px; min-width:0; min-height:70px; padding:8px 9px; border:1px solid var(--profile-line); border-radius:11px; font-size:12px; }
.account-profile-basic-row + .account-profile-basic-row { border-top:1px solid var(--profile-line); }
.account-profile-basic-row > span { color:var(--account-muted); line-height:1.4; }
.account-profile-basic-row input,.account-profile-basic-row .account-profile-date-control { grid-column:1 / -1; grid-row:2; }
.account-profile-basic-row > i,.account-profile-place-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--account-soft); color:var(--account-muted); font-size:17px; line-height:1; }
.account-profile-basic-row > i { width:24px; height:24px; border-radius:7px; font-size:16px; }
.account-profile-basic-row input { width:100%; min-width:0; border:0; border-radius:0; background:transparent; color:var(--account-text); font:400 16px/1.4 "Helvetica Neue",sans-serif; padding:0; font-size:16px; text-align:left; }
.account-ui.account-profile-dialog .account-profile-date-control { display:flex; align-items:center; justify-content:flex-start; justify-self:stretch; width:100%; max-width:100%; min-height:24px; padding:0; border:0; border-radius:0; background:transparent; color:var(--account-text); font:400 16px/1.4 "Helvetica Neue",sans-serif; letter-spacing:-.02em; text-align:left; white-space:nowrap; }
.account-profile-birthday-panel { display:grid; gap:9px; border-top:1px solid var(--profile-line); background:var(--account-surface); grid-column:1 / -1; padding:10px 0; }
@container profile-overview (min-width:345px) {
.account-profile-basic-row { grid-template-columns:28px minmax(0,1fr); gap:0 8px; min-height:62px; }
.account-profile-basic-row > i { grid-row:1 / 3; width:28px; height:28px; border-radius:8px; font-size:17px; }
.account-profile-basic-row input,.account-profile-basic-row .account-profile-date-control { grid-column:2; }
}
@container profile-overview (max-width:283px) {
.account-profile-basic-row { grid-template-columns:28px minmax(0,1fr); gap:0 8px; min-height:62px; }
.account-profile-basic-row > i { grid-row:1 / 3; width:28px; height:28px; border-radius:8px; font-size:17px; }
.account-profile-basic-row input,.account-profile-basic-row .account-profile-date-control { grid-column:2; }
}
.account-profile-place-list,.account-profile-website-list { gap:5px; }
.account-profile-place,.account-profile-custom-row { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:start; gap:9px; min-width:0; padding:7px 9px; border:1px solid var(--profile-line); border-radius:11px; }
.account-profile-place-icon { align-self:start; }
.account-profile-place-icon i { display:block; line-height:1; }
.account-profile-place-body { display:grid; min-width:0; gap:1px; }
.account-profile-place-heading,.account-profile-custom-row .account-profile-place-heading,.account-profile-website-row .account-profile-place-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px; min-height:28px; }
.account-profile-place-kind,.account-profile-website-row .account-profile-place-kind { color:var(--account-text); font-size:14px; font-weight:650; }
.account-profile-place-content { display:grid; gap:1px; min-width:0; overflow:visible; white-space:normal; }
.account-profile-place-location { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; min-height:31px; }
.account-ui.account-profile-dialog .account-profile-address-action { display:inline-flex; align-items:center; justify-content:center; gap:1px; min-height:30px; padding:0; border:0; border-radius:0; background:transparent; color:var(--account-link); font-size:11px; line-height:1; white-space:nowrap; }
.account-profile-address-action i { font-size:15px; line-height:1; }
.account-profile-address-action:focus-visible { outline:2px solid var(--account-link); outline-offset:2px; border-radius:4px; }
.account-profile-place-name,.account-profile-website-row .account-profile-place-name { min-width:0; overflow:hidden; color:var(--account-text); font-size:13px; font-weight:450; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.account-profile-place-address { display:block; min-width:0; overflow:hidden; color:var(--account-muted); font-size:12px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.account-profile-place-hint { margin:0; color:var(--account-muted); line-height:1.4; font-size:12px; }
.account-profile-place-actions { display:flex; align-items:center; justify-content:center; gap:2px; }
.account-profile-place-actions button { flex:none; border:0; background:transparent; font:inherit; white-space:nowrap; cursor:pointer; display:grid; place-items:center; width:30px; height:30px; min-height:30px; padding:0; border-radius:9px; color:var(--account-muted); font-size:17px; line-height:1; }
.account-ui.account-profile-dialog .account-profile-place-actions button { background:transparent; }
.account-ui.account-profile-dialog .account-profile-place-actions button:active { background:transparent; color:var(--account-text); }
.account-profile-place-actions button i,.account-profile-icon-button i { display:block; line-height:1; }
.account-profile-place-actions button:focus-visible,.account-profile-icon-button:focus-visible { outline:2px solid var(--account-link); }
.account-profile-place-detail { display:grid; grid-template-columns:1fr; gap:6px; margin-top:6px; padding-top:6px; border-top:1px solid var(--profile-line); }
.account-profile-place-detail label { display:grid; grid-template-columns:50px minmax(0,1fr); align-items:center; gap:5px; }
.account-profile-place-detail label > span { font-size:12px; }
.account-profile-place-detail input { width:100%; min-width:0; margin:0; color:var(--account-text); font:inherit; min-height:32px; padding:4px 6px; border:1px solid var(--account-input-line); border-radius:8px; background:var(--account-field); font-size:16px; }
.account-profile-custom-row input,.account-profile-website-row input { font-size:16px; }
.account-profile-custom-row .account-profile-place-content,.account-profile-website-row .account-profile-place-content { font-size:13px; }
.account-profile-add-card { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; padding:7px 12px; border:1px dashed var(--account-input-line); border-radius:11px; background:var(--account-surface); color:var(--account-muted); font:inherit; font-size:13px; font-weight:600; line-height:1.2; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.account-profile-add-card > i { display:block; flex:none; font-size:28px; font-weight:400; line-height:1; }
.account-profile-add-card:active { background:var(--account-soft); }
.account-profile-add-card:focus-visible { outline:2px solid var(--account-link); outline-offset:2px; }
.account-profile-footer { position:relative; z-index:3; display:grid; flex:none; gap:6px; border-top:1px solid var(--profile-line); background:var(--account-surface); margin:0 -16px; padding:10px 16px 12px; }
.account-profile-footer-row { display:flex; align-items:center; gap:8px; }
.account-profile-footer-secondary { display:flex; align-items:center; gap:6px; min-width:0; }
.account-profile-dialog .account-profile-footer-secondary .account-button { display:flex; align-items:center; justify-content:center; flex:none; width:auto; min-width:0; min-height:40px; padding:8px 11px; border-radius:11px; background:var(--account-soft); color:var(--account-soft-text); font-size:13px; line-height:1.2; text-align:center; white-space:nowrap; }
.account-profile-dialog .account-profile-privacy-trigger small { display:none; }
.account-profile-dialog .account-profile-footer-row .account-profile-save { display:flex; align-items:center; justify-content:center; flex:none; width:auto; min-height:40px; margin-left:auto; padding:8px 13px; border-radius:11px; font-size:13px; line-height:1.2; text-align:center; white-space:nowrap; }
@media (max-width:360px) { .account-profile-footer-row { gap:5px; } .account-profile-footer-secondary { gap:4px; } .account-profile-dialog .account-profile-footer-secondary .account-button { padding-inline:7px; font-size:12px; } .account-profile-dialog .account-profile-footer-row .account-profile-save { padding-inline:9px; font-size:12px; } }
.account-ui [hidden] { display: none !important; }
.account-ui .memory-editor { padding-top: 18px; border-top: 1px solid var(--account-line); margin-top: 18px; }
.account-ui .memory-label { display: block; margin: 0 0 5px; font-size: 15px; font-weight: 650; }
.account-ui .memory-note, .account-ui .account-help p {
margin: 0 0 12px; color: var(--account-muted); font-size: 13px; line-height: 1.7;
}
.account-ui .memory-input {
display: block; width: 100%; min-width: 0; min-height: 128px; max-height: 360px; resize: vertical;
margin: 0; border: 1px solid var(--account-input-line); border-radius: 12px; padding: 12px;
background: var(--account-field); color: var(--account-text); font: inherit; font-size: 14px; line-height: 1.7;
}
.account-ui .memory-input::placeholder { color: var(--account-muted); opacity: 1; }
.account-ui .memory-footer { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 12px; font-size: 12px; color: var(--account-muted); }
.account-ui .memory-status { flex: 1; overflow-wrap: anywhere; }
.account-ui .memory-count { flex: none; font-variant-numeric: tabular-nums; }
.account-ui .memory-editor[data-state="error"] .memory-status,
.account-ui .memory-editor[data-state="conflict"] .memory-status { color: var(--account-danger); }
.account-ui .memory-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-ui .memory-remote { margin-top: 14px; padding: 12px; border: 1px solid var(--account-line); border-radius: 12px; }
.account-ui .memory-remote .account-button { margin-top: 10px; }
.account-ui .account-help { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--account-line); }
.account-ui .account-help summary { cursor: pointer; color: var(--account-muted); font-size: 13px; }
.account-ui .account-help dl { margin: 12px 0 0; font-size: 13px; }
.account-ui .account-help dt { margin: 10px 0 2px; font-weight: 600; }
.account-ui .account-help dd { margin: 0; color: var(--account-muted); line-height: 1.7; }
.account-ui #client-usage-help > dl {
max-height: min(360px, 42vh);
max-height: min(360px, 42dvh);
overflow-y: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
padding-right: 10px;
}
@media (max-width: 480px) {
.account-ui .account-button { min-height: 44px; }
.account-ui .memory-input { font-size: 16px; } /* Avoid iOS focus zoom. */
}
.attachment-composer, .attachment-list, .attachment-viewer { --at-bg:#fff; --at-panel:#f4f4f4; --at-text:#333; --at-muted:#666; --at-border:#ddd; --at-accent:#496fbd; color:var(--at-text); font:inherit; }
body.dark-mode .attachment-composer, body.dark-mode .attachment-list, body.dark-mode .attachment-viewer { --at-bg:#333; --at-panel:#2c2c2c; --at-text:#eee; --at-muted:#bbb; --at-border:#555; --at-accent:#91b9ff; }
.attachment-composer[hidden], .attachment-composer [hidden] { display:none!important; }
.attachment-drafts, .attachment-list { display:flex; gap:12px; max-width:100%; min-width:0; }
.attachment-drafts { overflow-x:auto; padding:9px 9px 7px 2px; }
.attachment-draft { position:relative; display:block; box-sizing:border-box; flex:0 0 64px; width:64px; height:64px; padding:0; border:1px solid var(--at-border); border-radius:13px; overflow:visible; background:var(--at-bg); box-shadow:0 2px 8px #0000000d; }
.attachment-draft.image-draft { flex-basis:96px; width:96px; height:96px; }
.attachment-thumb { display:block; width:100%; height:100%; object-fit:cover; border-radius:12px; background:var(--at-panel); }
.attachment-draft-placeholder { position:absolute; inset:0; display:none; place-items:center; border-radius:12px; color:var(--at-muted); background:var(--at-panel); font-size:12px; }
.attachment-draft.is-loading .attachment-thumb, .attachment-draft.is-error .attachment-thumb { visibility:hidden; }
.attachment-draft.is-loading .attachment-draft-placeholder, .attachment-draft.is-error .attachment-draft-placeholder { display:grid; }
.attachment-draft.is-loading .attachment-draft-placeholder { font-size:0; }
.attachment-draft.is-loading .attachment-draft-placeholder::after { content:""; width:18px; height:18px; border:2px solid color-mix(in srgb, var(--at-muted) 28%, transparent); border-top-color:var(--at-muted); border-radius:50%; animation:attachment-spin .8s linear infinite; }
.attachment-draft.is-pending .attachment-draft-placeholder::after { content:none; }
.attachment-draft.image-draft.is-pending::before { content:""; position:absolute; inset:0; z-index:1; border-radius:12px; background:color-mix(in srgb, var(--at-bg) 55%, transparent); pointer-events:none; }
.attachment-draft.image-draft.is-pending::after { content:""; position:absolute; top:50%; left:50%; z-index:2; box-sizing:border-box; width:24px; height:24px; margin:-12px 0 0 -12px; border:3px solid color-mix(in srgb, var(--at-accent) 25%, transparent); border-top-color:var(--at-accent); border-radius:50%; animation:attachment-spin .8s linear infinite; pointer-events:none; }
.attachment-draft.image-draft.is-ready::after { content:"✓"; position:absolute; right:5px; bottom:5px; z-index:2; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#fff; background:#168a4a; font-size:13px; font-weight:700; line-height:1; box-shadow:0 1px 4px #0004; pointer-events:none; }
.attachment-file-icon { width:62px; height:62px; border-radius:11px; background:var(--at-panel); display:grid; place-items:center; font:600 11px/1 monospace; color:var(--at-muted); }
.attachment-info { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; text-align:left; }
.attachment-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:500; line-height:1.4; color:var(--at-text); }
.attachment-meta { font-size:12px; line-height:1.5; color:var(--at-muted); }
.attachment-composer .attachment-remove { position:absolute; top:-8px; right:-8px; z-index:3; display:grid; place-items:center; border:2px solid var(--at-bg); border-radius:50%; color:#fff; background:#2b2b2d; font-size:16px; line-height:1; width:26px; height:26px; min-height:26px; padding:0; cursor:pointer; box-shadow:0 2px 7px #0004; -webkit-appearance:none; appearance:none; }
.attachment-composer .attachment-remove:hover { background:#111; transform:translateY(-1px); }
.attachment-composer .attachment-remove:active { transform:scale(.93); }
.attachment-remove i, .attachment-viewer-close i { display:block; line-height:1; }
.attachment-remove:disabled { opacity:.4; cursor:default; }
.attachment-error { color:#b4233a; font-size:13px; line-height:1.5; margin:4px 0 8px; }
body.dark-mode .attachment-error { color:#ff9ba8; }
body.dark-mode .attachment-composer .attachment-remove { border-color:var(--at-bg); color:#222; background:#f1f1f1; }
body.dark-mode .attachment-composer .attachment-remove:hover { background:#fff; }
.attachment-list { flex-wrap:wrap; margin-top:10px; }
.attachment-card { flex:0 1 230px; min-width:0; max-width:100%; border:1px solid var(--at-border); border-radius:12px; overflow:hidden; background:var(--at-bg); }
.attachment-card.image-only { position:relative; flex-basis:auto; width:fit-content; box-sizing:border-box; padding:8px; border:1px solid var(--at-border); border-radius:12px; background:var(--message-bubble-fill,var(--at-bg)); box-shadow:0 2px 6px rgba(0,0,0,.045); overflow:visible; }
.bubble.user .attachment-card.image-only, .group-message-row.self .attachment-card.image-only { border-color:#c8dff4; background:#dff0ff; }
body.dark-mode .bubble.user .attachment-card.image-only, body.dark-mode .group-message-row.self .attachment-card.image-only { border-color:#3d668e; background:#315f8c; }
.attachment-card.voice-only { flex:0 0 auto; border:0; overflow:visible; background:transparent; }
.bubble.voice-message-bubble, .group-message-row .group-bubble.voice-message-bubble { padding:0; border:0; background:transparent; box-shadow:none; overflow:visible; }
.avatar-message-row.has-member-avatar > .group-bubble.voice-message-bubble { padding:0; border:0; background:transparent; box-shadow:none; overflow:visible; }
.bubble.voice-message-bubble .attachment-list { display:block; margin:0; }
.bubble.voice-message-bubble .attachment-card { margin:0; }
.attachment-voice-wrap { --voice-fill:#fff; --voice-border:#e5dfe7; --voice-quote-fill:#f7f5f7; --voice-quote-text:#625f65; display:flex; flex-direction:column; align-items:stretch; box-sizing:border-box; width:min(var(--voice-message-width, 160px), 70vw); max-width:280px; color:#343036; }
.attachment-voice-body { box-sizing:border-box; width:100%; max-width:100%; overflow:hidden; border:1px solid var(--voice-border); border-radius:8px 17px 17px 17px; background:var(--voice-fill); box-shadow:0 2px 8px rgba(48,32,51,.065); }
.attachment-voice-wrap.has-reply { width:min(280px, 72vw); }
.attachment-voice-wrap.has-reply .attachment-voice-body { padding:7px 8px 5px; }
.attachment-voice-wrap.has-reply .attachment-voice-body > .message-reply-reference { width:100%; min-height:32px; margin:0 0 2px; padding:8px 9px; border:0; border-radius:8px; background:var(--voice-quote-fill); color:var(--voice-quote-text); font-size:.75rem; line-height:1.3; }
.attachment-voice-wrap.has-reply .attachment-voice { min-height:48px; padding-inline:7px; }
.attachment-voice { display:flex; align-items:center; gap:11px; width:100%; min-height:48px; box-sizing:border-box; border:0; border-radius:inherit; outline:0; padding:9px 13px; color:inherit; background:transparent; font:inherit; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:pan-x pan-y; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
.bubble.user.voice-message-bubble .attachment-voice-wrap, .group-message-row.self .voice-message-bubble .attachment-voice-wrap { --voice-fill:#dff0ff; --voice-border:#c8dff4; --voice-quote-fill:#e8f3fc; --voice-quote-text:#4c6078; align-items:flex-end; }
.bubble.user.voice-message-bubble .attachment-voice-body, .group-message-row.self .voice-message-bubble .attachment-voice-body { border-radius:17px 8px 17px 17px; }
.bubble.user.voice-message-bubble .attachment-voice, .group-message-row.self .voice-message-bubble .attachment-voice { flex-direction:row-reverse; }
.group-message-row.ai .voice-message-bubble .attachment-voice-wrap { --voice-fill:#f4edf6; --voice-border:#dbc9df; --voice-quote-fill:#f8f2f9; --voice-quote-text:#705b73; }
.attachment-voice-wave { display:flex; flex:1 1 auto; align-items:center; justify-content:center; gap:2.5px; min-width:54px; height:24px; color:currentColor; opacity:.55; }
.attachment-voice-wave-bar { display:block; width:2.5px; height:var(--voice-wave-height); border-radius:999px; background:currentColor; transform-origin:center; }
.attachment-voice.is-playing .attachment-voice-wave-bar { animation:attachment-voice-wave .72s ease-in-out infinite alternate; }
.attachment-voice.is-playing .attachment-voice-wave-bar:nth-child(2n) { animation-delay:-.38s; }
.attachment-voice.is-playing .attachment-voice-wave-bar:nth-child(3n) { animation-delay:-.18s; }
.attachment-voice.can-transcribe { -webkit-touch-callout:none; }
.attachment-voice.is-transcribing .attachment-voice-wave-bar { animation:attachment-voice-wave .58s ease-in-out infinite alternate; }
.attachment-voice-wrap.is-invalid .attachment-voice { opacity:.42; cursor:default; }
.attachment-voice-error { opacity:.66; }
.attachment-voice-duration { flex:0 0 auto; min-width:22px; text-align:center; font-size:13px; font-weight:500; opacity:.68; }
.attachment-voice-transcript { align-self:stretch; box-sizing:border-box; margin:0 12px; padding:9px 1px 11px; border-top:1px solid rgba(70,55,73,.12); color:inherit; font-size:14px; line-height:1.55; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; }
body.dark-mode .attachment-voice-wrap { --voice-fill:#333; --voice-border:#514a53; --voice-quote-fill:#303034; --voice-quote-text:#d4cdd4; color:#f4f1f5; }
body.dark-mode .attachment-voice-body { box-shadow:0 2px 9px rgba(0,0,0,.22); }
body.dark-mode .bubble.user.voice-message-bubble .attachment-voice-wrap, body.dark-mode .group-message-row.self .voice-message-bubble .attachment-voice-wrap { --voice-fill:#315f8c; --voice-border:#3d668e; --voice-quote-fill:#2d4c6b; --voice-quote-text:#e0ebf7; }
body.dark-mode .group-message-row.ai .voice-message-bubble .attachment-voice-wrap { --voice-fill:#3b303e; --voice-border:#664e6b; --voice-quote-fill:#453749; --voice-quote-text:#e5d4e8; }
@keyframes attachment-voice-wave { to { transform:scaleY(.45); opacity:.5; } }
.attachment-card .attachment-info { padding:10px 12px; }
.attachment-card a.attachment-name { color:var(--at-accent); background:none; text-decoration:underline; padding:0; border:0; border-radius:0; }
.attachment-file-sheet { position:fixed; inset:0; z-index:10040; display:grid; place-items:center; box-sizing:border-box; padding:20px; background:rgba(10,11,14,.58); }
.attachment-file-sheet[hidden] { display:none!important; }
.attachment-file-dialog { box-sizing:border-box; width:min(100%, 390px); padding:20px; border:1px solid #e6e6e9; border-radius:20px; background:#fff; color:#25262a; box-shadow:0 18px 55px #0004; }
body.dark-mode .attachment-file-dialog { border-color:#45464a; background:#28292c; color:#f5f5f6; }
.attachment-file-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.attachment-file-title { min-width:0; overflow-wrap:anywhere; font-size:17px; line-height:1.45; }
.attachment-file-close { flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--control-neutral-bg); color:var(--control-neutral-text); font:inherit; font-size:20px; line-height:1; cursor:pointer; }
.attachment-file-close i { display:block; line-height:1; }
.attachment-file-detail, .attachment-file-status { margin:8px 0 0; font-size:13px; line-height:1.5; color:#71737a; }
body.dark-mode .attachment-file-detail, body.dark-mode .attachment-file-status { color:#b8b9bd; }
.attachment-file-status { min-height:20px; margin-top:18px; }
.attachment-file-actions { display:flex; gap:9px; margin-top:16px; }
.attachment-file-actions > * { flex:1 1 0; display:grid; place-items:center; box-sizing:border-box; min-height:42px; padding:8px 10px; border:0; border-radius:11px; font:inherit; font-size:14px; font-weight:600; line-height:1.35; text-align:center; text-decoration:none; cursor:pointer; }
.attachment-file-actions > [hidden] { display:none!important; }
.attachment-file-save { background:#292a2e; color:#fff; }
.attachment-file-save:disabled { opacity:.5; cursor:default; }
.attachment-file-browser { background:#f0f0f1; color:#25262a; }
body.dark-mode .attachment-file-save { background:#f3f3f4; color:#202125; }
body.dark-mode .attachment-file-browser { background:#3b3c40; color:#f5f5f6; }
.attachment-image-frame { position:relative; display:block; box-sizing:border-box; width:min(260px, 62vw, calc(320px * var(--attachment-image-ratio, 1.3333)), calc(48vh * var(--attachment-image-ratio, 1.3333))); height:auto; aspect-ratio:var(--attachment-image-ratio, 1.3333); max-width:100%; overflow:hidden; overflow-anchor:none; border:1px solid color-mix(in srgb, var(--at-border) 72%, transparent); border-radius:0; background:linear-gradient(135deg, var(--at-panel), color-mix(in srgb, var(--at-panel) 72%, var(--at-bg))); }
/* Display the original rectangular image; native callouts own their preview shape. */
.attachment-image { position:absolute; inset:0; display:block; width:100%; max-width:100%; height:100%; max-height:100%; object-fit:contain; border-radius:0; cursor:zoom-in; -webkit-touch-callout:default; }
.attachment-image-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; width:100%; min-height:100%; border:0; padding:16px; color:var(--at-muted); background:transparent; font:inherit; font-size:13px; font-weight:500; line-height:1.45; cursor:default; }
.attachment-image-placeholder i { font-size:28px; font-weight:400; }
.attachment-image-frame.is-deferred .attachment-image, .attachment-image-frame.is-loading .attachment-image, .attachment-image-frame.is-error .attachment-image { visibility:hidden; }
.attachment-image-frame.is-loaded { border-color:transparent; background:transparent; }
.bubble.image-message-bubble { padding:8px!important; overflow:visible; }
.bubble.image-message-bubble .attachment-list { margin-top:0; }
.bubble.image-message-bubble::after { display:none!important; }
.bubble.split-image-message { display:flex; flex-direction:column; align-items:flex-start; gap:8px; white-space:normal; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; overflow:visible; }
.bubble.user.split-image-message, .group-message-row.self .bubble.split-image-message { align-items:flex-end; }
.bubble.split-image-message .attachment-list { display:flex; flex-direction:column; flex-wrap:nowrap; margin:0; gap:8px; }
.bubble.user.split-image-message .attachment-list, .group-message-row.self .split-image-message .attachment-list { align-items:flex-end; margin-left:auto; }
.split-image-message .message-text-card { white-space:pre-wrap; }
.message-text-card > :first-child { margin-top:0; }
.message-text-card > :last-child { margin-bottom:0; }
.bubble.split-image-message::after { display:none!important; }
.message-text-card { width:fit-content; max-width:100%; box-sizing:border-box; padding:.68rem .9rem; border:1px solid #e7e0e9; border-radius:20px; background:var(--message-bubble-fill,#fff); box-shadow:0 2px 9px rgba(48,32,51,.06); }
.bubble.user .message-text-card { background:#dff0ff; border-color:#c8dff4; }
body.dark-mode .message-text-card { background:var(--message-bubble-fill,#333); border-color:#ffffff0b; }
body.dark-mode .bubble.user .message-text-card { background:#336699; border-color:#3d668e; }
.split-image-message .attachment-list, .image-message-bubble .attachment-list { width:fit-content; max-width:100%; box-sizing:border-box; }
.bubble-wrapper.user .message-text-card { margin-left:auto; }
.attachment-image-frame.is-loaded .attachment-image-placeholder { display:none; }
.attachment-image-frame.is-loading .attachment-image-placeholder i { animation:attachment-pulse 1.25s ease-in-out infinite; }
.attachment-image-frame.is-deferred .attachment-image-placeholder { cursor:pointer; }
.attachment-image-frame.is-error .attachment-image-placeholder { cursor:pointer; }
.attachment-image-frame.is-error .attachment-image-placeholder:hover { color:var(--at-text); background:color-mix(in srgb, var(--at-panel) 72%, transparent); }
@keyframes attachment-spin { to { transform:rotate(360deg); } }
@keyframes attachment-pulse { 50% { opacity:.42; transform:scale(.94); } }
@media (prefers-reduced-motion:reduce) { .attachment-draft.is-loading .attachment-draft-placeholder::after, .attachment-draft.is-pending::after, .attachment-image-frame.is-loading .attachment-image-placeholder i { animation:none; } }
.attachment-viewer { position:fixed; inset:0; z-index:10020; display:block; box-sizing:border-box; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; color:#fff; background:rgba(12,12,13,.94); transition:background-color 180ms ease-out; }
.attachment-viewer[hidden] { display:none!important; }
.attachment-viewer.is-zoomed { overflow:hidden; }
.attachment-viewer-stage { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; box-sizing:border-box; width:100%; min-height:100%; padding:max(18px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.attachment-viewer-image { display:block; flex:0 0 auto; width:auto; height:auto; max-width:100%; max-height:none; margin-block:auto; object-fit:contain; border-radius:0; -webkit-touch-callout:default; touch-action:pan-y; }
.attachment-viewer .attachment-viewer-image { -webkit-touch-callout:default!important; -webkit-user-select:auto!important; user-select:auto!important; }
@media (hover:hover) and (pointer:fine) {
.attachment-viewer.is-zoomed .attachment-viewer-image { cursor:grab; -webkit-user-select:none!important; user-select:none!important; }
.attachment-viewer.is-dragging .attachment-viewer-image { cursor:grabbing; }
}
.attachment-viewer-return-image { position:fixed; z-index:10021; display:block; object-fit:contain; transform-origin:top left; pointer-events:none; }
/* Desktop previews fit both axes; a portrait screenshot must not fill the width. */
@media (min-width:768px) {
.attachment-viewer-stage { height:100vh; height:100dvh; min-height:0; justify-content:center; padding:32px 64px; }
.attachment-viewer-image { max-width:min(100%, 1100px); max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px); margin:0; }
}
.attachment-image, .attachment-image-frame { -webkit-tap-highlight-color:transparent; }
.attachment-image,
.bubble[data-message-menu-bound="true"] .attachment-image { -webkit-touch-callout:default!important; -webkit-user-select:none!important; user-select:none!important; }
#control-attachment-preview { grid-column:1 / -1; min-width:0; }
#control-form .control-upload.disabled { opacity:.5; cursor:default; }
body #chat-container { margin-bottom:calc(var(--composer-height, 4.5rem) + 12px); }
@media(max-width:600px) { .attachment-draft.image-draft { flex-basis:88px; width:88px; height:88px; } .attachment-list { gap:8px; } }
/* Shared dialog chrome; feature styles only control their content and sizing. */
.maizi-dialog { margin:auto; color:#202124; }
.maizi-dialog::backdrop { background:rgba(24,25,27,.4); backdrop-filter:blur(5px); }
.maizi-dialog :is(.dialog-heading,.search-heading,.picker-heading) { position:static; inset:auto; height:auto; z-index:auto; display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:14px; background:transparent; }
.maizi-dialog :is(.dialog-heading,.search-heading,.picker-heading) > div { min-width:0; }
.maizi-dialog :is(.dialog-heading,.search-heading,.picker-heading) strong { font-size:18px; font-weight:650; line-height:1.5; }
.maizi-dialog :is(.dialog-heading,.search-heading,.picker-heading) small { display:block; font-size:12px; color:#5f6368; line-height:1.5; margin-top:3px; }
.maizi-dialog :is(.dialog-close,.search-close,.picker-close) { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; min-width:36px; max-width:36px; min-height:36px; box-sizing:border-box; padding:0; border:0; border-radius:50%; color:var(--control-neutral-text); background:var(--control-neutral-bg); font-size:22px; line-height:1; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.maizi-dialog :is(.dialog-close,.search-close,.picker-close):active { background:var(--control-neutral-pressed); }
.maizi-dialog .notification-icon-button { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; min-width:36px; max-width:36px; min-height:36px; box-sizing:border-box; padding:0; border:0; border-radius:50%; color:var(--control-neutral-text); background:var(--control-neutral-bg); font-size:20px; line-height:1; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.maizi-dialog .notification-icon-button:is([aria-pressed="true"],.connected) { background:#d9ecdf; color:#174d2d; }
.maizi-dialog .badge-icon-button { position:relative; }
.maizi-dialog .badge-icon-button.connected::after { content:""; position:absolute; top:6px; right:6px; width:8px; height:8px; border:1px solid #d9ecdf; border-radius:50%; background:#d8394f; }
body.dark-mode .maizi-dialog .badge-icon-button.connected::after { border-color:#274536; }
.maizi-dialog .notification-icon-button:disabled { opacity:.55; cursor:default; }
.maizi-dialog .notification-icon-button:active:not(:disabled) { filter:brightness(.94); }
:is(.maizi-dialog .notification-icon-button, .daily-wallpaper-share, #scroll-latest-button, .message-actions > .play-btn, .message-actions > .quote-btn) > i { display:block; line-height:1; }
/* One centered close glyph for every round close control, independent of icon-font metrics. */
:is(.maizi-dialog .dialog-close, .maizi-dialog .search-close, .maizi-dialog .picker-close, .daily-wallpaper-close, #notification-nudge-dismiss, .reply-composer-close, #voiceExitBtn, .group-picker-close, .chat-search .search-clear, .location-picker .picker-search-clear, .chat-location-draft button, .attachment-composer .attachment-remove) > i.ri-close-line {
display:block; width:var(--close-glyph-size,18px); height:var(--close-glyph-size,18px); flex:none;
background:currentColor; font-size:0; line-height:0;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='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='M5 5l14 14M19 5L5 19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.maizi-dialog .dialog-close, .maizi-dialog .search-close, .maizi-dialog .picker-close, .daily-wallpaper-close, #notification-nudge-dismiss, .reply-composer-close, #voiceExitBtn, .group-picker-close, .chat-search .search-clear, .location-picker .picker-search-clear, .chat-location-draft button, .attachment-composer .attachment-remove) > i.ri-close-line::before { content:none; }
:is(#notification-nudge-dismiss, .reply-composer-close, .chat-search .search-clear, .chat-location-draft button, .attachment-composer .attachment-remove) { --close-glyph-size:14px; }
body.dark-mode .maizi-dialog { color:#eee; }
body.dark-mode .maizi-dialog :is(.dialog-heading,.search-heading,.picker-heading) small { color:#aaa; }
body.dark-mode .maizi-dialog .notification-icon-button:is([aria-pressed="true"],.connected) { color:#bde7cb; background:#274536; }
.maizi-dialog.is-keyboard-visible {
position:fixed;
inset:auto;
top:var(--dialog-visible-center-y);
left:50%;
transform:translate(-50%,-50%);
max-height:calc(var(--dialog-visible-height) - 20px);
margin:0;
}
.maizi-dialog.is-keyboard-visible .collection-card {
max-height:calc(var(--dialog-visible-height) - 20px);
}
.maizi-dialog.group-miniapp-dialog.is-keyboard-visible .group-miniapp-frame {
height:calc(var(--dialog-visible-height) - 100px);
}
/* Focus is still available to keyboard and assistive technology, without visual rings. */
:focus { outline:none !important; box-shadow:none !important; }
/* Status occupies the existing header; it never moves the chat viewport. */
.chat-connection-status { position:absolute; bottom:1px; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:4px; width:max-content; max-width:180px; height:16px; margin:0; padding:0; border:0; background:transparent; color:#70747a; font:inherit; font-size:10px; font-weight:400; line-height:16px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.chat-connection-status[hidden],.message-delivery[hidden] { display:none; }
.chat-connection-status:disabled { cursor:default; opacity:1; }
.chat-connection-status[data-phase="error"] { color:#ae6232; }
.chat-network-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-network-symbol { display:block; flex:0 0 10px; box-sizing:border-box; width:10px; height:10px; border:1.5px solid currentColor; border-radius:50%; }
[data-phase="loading"] > .chat-network-symbol,[data-phase="sending"] > .chat-network-symbol { border-right-color:transparent; animation:chat-network-spin .8s linear infinite; }
[data-phase="error"] > .chat-network-symbol::after { content:'!'; display:block; font-size:9px; font-weight:700; line-height:8px; text-align:center; }
.chat-connection-status[data-phase="ready"] > .chat-network-symbol { display:none; }
.bubble:has(> .message-delivery) { position:relative; }
.message-delivery { position:absolute; z-index:1; left:-29px; top:50%; display:grid; place-items:center; width:26px; height:32px; padding:0; margin-top:-16px; border:0; border-radius:50%; background:transparent; color:#7f8790; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; pointer-events:auto; }
.message-delivery:disabled { opacity:1; cursor:default; }
.message-delivery .chat-network-symbol { width:14px; height:14px; }
.message-delivery:is([data-phase="failed"],[data-phase="unconfirmed"]) { color:#d94747; }
.message-delivery:is([data-phase="failed"],[data-phase="unconfirmed"]) .chat-network-symbol { width:18px; height:18px; border:0; background:currentColor; }
.message-delivery:is([data-phase="failed"],[data-phase="unconfirmed"]) .chat-network-symbol::after { content:'!'; display:block; color:#fff; font-size:13px; font-weight:700; line-height:18px; text-align:center; }
body.dark-mode .chat-connection-status { color:#b4bac2; }
body.dark-mode .chat-connection-status[data-phase="error"] { color:#e2a677; }
body.dark-mode .message-delivery { color:#a9b1bb; }
body.dark-mode .message-delivery:is([data-phase="failed"],[data-phase="unconfirmed"]) { color:#f26d6d; }
@keyframes chat-network-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { [data-phase="loading"] > .chat-network-symbol,[data-phase="sending"] > .chat-network-symbol { animation:none; } }