/* Native controls, page edges and scrollbars follow the same light/dark tokens. */
html[data-theme=light]{color-scheme:light;background:#F8F7F4}
html[data-theme=dark]{color-scheme:dark;background:#0C0D0F}
body{min-height:100dvh;--u-scroll-thumb:#C5B393;--u-scroll-track:var(--u-surface)}
body[data-theme=dark]{color-scheme:dark;--u-scroll-thumb:#75654F;--u-scroll-track:var(--u-surface)}
body[data-theme=light]{color-scheme:light}
:where(body,body *){scrollbar-width:thin;scrollbar-color:var(--u-scroll-thumb) var(--u-scroll-track)}
body ::-webkit-scrollbar{width:10px;height:10px}
body ::-webkit-scrollbar-track{background:var(--u-scroll-track)}
body ::-webkit-scrollbar-thumb{background:var(--u-scroll-thumb);border:3px solid var(--u-scroll-track);border-radius:999px}
body ::-webkit-scrollbar-thumb:hover{background:var(--u-accent)}
body ::-webkit-scrollbar-corner{background:var(--u-scroll-track)}
/* Keep conversation-list scrolling, without a visible track in either theme. */
.chat-page .chat-list,body.is-messenger .chat-page .chat-list{scrollbar-width:none;-ms-overflow-style:none;scrollbar-gutter:auto}
.chat-page .chat-list::-webkit-scrollbar{display:none;width:0;height:0}
body.is-messenger,body.is-messenger #app{background:var(--u-bg)}
.chat-page .chat-main,.chat-page .chat-compose,.chat-compose-row{background:var(--u-card);color:var(--u-text)}
.chat-page .chat-compose{display:grid;gap:10px}
.chat-compose-row{display:flex;align-items:center;gap:10px;min-width:0}
.chat-compose-row>input[name=body]{flex:1;min-width:0;background:var(--u-surface)!important;color:var(--u-text)!important;border:1px solid var(--u-line-strong)}
.chat-compose-row>input::placeholder{color:var(--u-subtle);opacity:1}
.chat-compose-row [type=submit]{flex:none}
.chat-attach-button{width:44px;height:44px;border:1px solid var(--u-line-strong);border-radius:50%;background:var(--u-surface);color:var(--u-accent-text);cursor:pointer}
.chat-attach-button:hover{background:var(--u-accent-bg)}
.chat-attach-button:disabled{opacity:.5;cursor:wait}
.chat-compose-photos{display:flex;gap:12px;overflow-x:auto;padding:5px 2px;max-width:100%}
.chat-compose-photo{position:relative;flex:none;width:86px;min-height:90px;background:var(--u-surface);border:1px solid var(--u-line);border-radius:12px;overflow:hidden}
.chat-compose-photo>img{width:84px;height:70px;object-fit:contain;display:block}
.chat-compose-photo>small{display:block;padding:4px;font-size:10px;color:var(--u-subtle);text-align:center}
.chat-compose-photo>button{position:absolute;top:3px;right:3px;width:25px;height:25px;border:1px solid var(--u-line-strong);border-radius:50%;background:var(--u-card);color:var(--u-text)}
.chat-compose-photo>button .ui-control-icon{width:14px;height:14px;min-width:14px;min-height:14px}
.chat-compose-status{margin:0;font-size:11px;line-height:1.5;color:var(--u-subtle)}
.chat-message-photos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;max-width:440px}
.chat-message-photos:only-child{margin:0}
.chat-message-photo{display:block;max-width:min(300px,100%);border:1px solid var(--u-line);border-radius:12px;padding:0;background:var(--u-surface);overflow:hidden;cursor:zoom-in;color:var(--u-text)}
.chat-message-photo img{width:min(300px,100%);height:auto;max-height:260px;object-fit:contain;display:block}
.chat-photo-overlay{position:fixed;inset:0;z-index:1400;background:#08090aeb;backdrop-filter:blur(10px);padding:24px;display:flex;align-items:center;justify-content:center;overscroll-behavior:contain}
 .chat-photo-viewer{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;width:min(1200px,100%);height:100%;min-width:0;min-height:0;color:#fff;padding-top:48px}
.chat-photo-stage{display:flex;align-items:center;justify-content:center;gap:18px;min-width:0;min-height:0;position:relative}
.chat-photo-viewer figure{margin:0;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;height:100%;flex:1}
.chat-photo-image{display:flex;align-items:center;justify-content:center;flex:1;width:100%;min-width:0;min-height:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}
.chat-photo-image img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;min-height:0}
.chat-photo-viewer figcaption{flex:none;padding:10px;font-size:12px;line-height:18px;color:#e6e0d8}
.chat-photo-viewer .ui-icon-control{flex:none;width:44px;height:44px;border:1px solid #ffffff45;background:#25272bd9;color:#fff;border-radius:50%;cursor:pointer}
.chat-photo-viewer [data-photo-close]{position:absolute;right:0;top:0;z-index:1}
.chat-photo-viewer [data-photo-step]:disabled{opacity:.3;cursor:default}
.chat-photo-thumbnails{display:flex;align-items:center;justify-self:center;gap:8px;max-width:100%;overflow-x:auto;min-width:0;padding:4px;overscroll-behavior:contain}
.chat-photo-thumbnails button{display:flex;align-items:center;justify-content:center;flex:none;width:60px;height:60px;padding:3px;border:2px solid transparent;border-radius:10px;background:#25272bd9;cursor:pointer;overflow:hidden}
.chat-photo-thumbnails button[aria-current=true]{border-color:#d7b67c}
.chat-photo-thumbnails img{display:block;width:100%;height:100%;max-height:100%;min-height:0;object-fit:contain;border-radius:5px}
.chat-photo-viewer button:focus-visible{outline:2px solid #d7b67c;outline-offset:2px}
body.is-chat-photo-open{overflow:hidden}
@media(max-width:760px){.chat-compose-row{gap:7px}.chat-attach-button{width:38px;height:38px}.chat-page .chat-compose .btn{padding-inline:13px}.chat-compose-photos{max-height:105px}.chat-photo-overlay{padding:12px}.chat-photo-viewer [data-photo-step]{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.chat-photo-thumbnails button{width:48px;height:48px}.chat-photo-viewer [data-photo-step="-1"]{left:0}.chat-photo-viewer [data-photo-step="1"]{right:0}.chat-message-photo img{max-width:100%;max-height:230px}}

.chat-compose-row [data-chat-attach]{order:-1}

/* Both thread renderers preserve the visible message explicitly. */
.chat-page #chat-messages{scrollbar-gutter:stable;overflow-anchor:none}

/* Reserve only a compact row, keeping delayed context updates from shifting the thread. */
body.is-messenger .chat-product-summary{height:60px;min-height:60px;max-height:60px;padding:8px 16px;gap:10px;align-items:center;flex-wrap:nowrap}
body.is-messenger .chat-product-summary:empty,body.is-messenger .chat-product-summary .trade-actions:empty{display:none}
body.is-messenger .chat-product-link{flex:1;min-width:0;gap:10px}
body.is-messenger .chat-product-link>img{width:40px;height:40px}
body.is-messenger .chat-product-link>span{flex:1;min-width:0;gap:2px}
body.is-messenger .chat-product-link strong{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.35}
body.is-messenger .chat-product-link small{line-height:1.35;white-space:nowrap}
body.is-messenger .chat-product-summary .trade-actions{max-width:none;flex-wrap:nowrap;gap:6px}
.chat-action-compact{display:none}
body.is-messenger .chat-main[aria-busy=true]{cursor:progress}
@media(max-width:760px){
 body.is-messenger .chat-product-summary{height:56px;min-height:56px;max-height:56px;padding:7px 12px;gap:8px}
 body.is-messenger .chat-product-link{gap:8px}
 body.is-messenger .chat-product-link>img{width:32px;height:32px}
 body.is-messenger .chat-product-summary .trade-actions{max-width:none;flex-wrap:nowrap;gap:5px}
 body.is-messenger .chat-product-summary .btn{min-height:36px;padding:7px;font-size:10px;white-space:nowrap}
 body.is-messenger .chat-product-summary .chat-action-label{display:none}
 body.is-messenger .chat-product-summary .chat-action-compact{display:inline}
}

.chat-translation-toolbar{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:38px;padding:5px 12px;background:var(--u-card);border-top:1px solid var(--u-line);text-align:center}
.chat-translation-toolbar>button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:27px;padding:3px 9px;border:0;border-radius:8px;background:transparent;color:var(--u-accent-text);font-size:11px;font-weight:700;cursor:pointer}
.chat-translation-toolbar>button:hover{background:var(--u-accent-bg)}
.chat-translation-toolbar>button:focus-visible,.chat-original-toggle:focus-visible{outline:2px solid var(--u-accent);outline-offset:2px}
.chat-translation-toolbar>button:disabled{cursor:progress;opacity:.7}
.chat-translation-toolbar .ui-control-icon{width:17px;height:17px;min-width:17px;min-height:17px}
.chat-translation-toolbar>small{font-size:10px;line-height:1.4;color:var(--u-subtle);max-width:65ch}
.chat-translation-toolbar>small[hidden]{display:none}
.chat-original-toggle{display:block;margin:7px 0 0;padding:0;border:0;background:transparent;color:var(--u-accent-text);font-size:10px;line-height:1.5;text-decoration:underline;text-underline-offset:2px;cursor:pointer}