/* Desktop surfaces share behavior, while each client owns its geometry/palette. */
:root[data-platform=desktop] {font-family:"Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;font-size:14px}
:root[data-platform=desktop] .app-shell{max-width:none;height:100dvh;min-height:0;border-radius:0}
:root[data-platform=desktop] .workspace{height:100%;min-width:0;min-height:0}
:root[data-platform=desktop] .conversation-panel{padding-bottom:0;min-height:0}
:root[data-platform=desktop] .ref-screen{inset:0;min-height:0}
:root[data-platform=desktop] .ref-row{min-height:52px}
:root[data-platform=desktop] .ref-row-label strong{font-size:14px}
:root[data-platform=desktop] .ref-row-label small{font-size:12px}
:root[data-platform=desktop] .chat-title h2{font-size:16px}
:root[data-platform=desktop] .chat-title p{font-size:12px}
:root[data-platform=desktop] .ref-avatar{font-size:19px}
:root[data-platform=desktop] .message-list{padding:16px 24px 24px}
:root[data-platform=desktop] .message-bubble{font-size:var(--ref-message-size,14px)}
:root[data-platform=desktop] .chat-position-actions button{width:40px;height:40px;min-width:40px;min-height:40px;box-shadow:0 2px 8px #0002}
:root[data-platform=desktop] dialog.ref-sheet{width:min(480px,calc(100vw - 48px));max-width:calc(100vw - 48px);height:auto;max-height:calc(100dvh - 64px);border-radius:8px;inset:0;padding:0}
:root[data-platform=desktop] dialog.ref-sheet.ref-full{width:min(560px,calc(100vw - 48px));height:min(680px,calc(100dvh - 64px));max-height:calc(100dvh - 64px);border-radius:8px;inset:0}
:root[data-platform=desktop] .ref-sheet-head{min-height:56px}
:root[data-platform=desktop] .ref-sheet-head h2{font-size:17px}
:root[data-platform=desktop] .ref-sheet-body{min-height:0;overscroll-behavior:contain}
:root[data-platform=desktop] .ref-top-menu{max-width:260px}
:root[data-platform=desktop][data-ref-input=pointer] :is(button,[role=button]):focus{outline:none;box-shadow:none}
:root[data-platform=desktop] :is(button,[role=button]):active{filter:brightness(.96)}
:root[data-platform=desktop][data-ref-input=keyboard] :is(button,[role=button]):focus-visible{outline:none;box-shadow:none;background-color:var(--ref-hover);color:var(--ref-accent-ink)}
:root[data-platform=desktop] .desktop-message-search{position:absolute;inset:0 0 0 auto;width:min(340px,46%);min-width:240px;display:flex;flex-direction:column;gap:10px;padding:0 14px 14px;background:var(--ref-panel);color:var(--ref-text);border-left:1px solid var(--ref-line);box-shadow:-6px 0 18px #0001;z-index:35}
:root[data-platform=desktop] .desktop-search-heading{height:58px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
:root[data-platform=desktop] .desktop-search-heading h2{font-size:16px;font-weight:500;margin:0}
:root[data-platform=desktop] .desktop-search-input{width:100%;height:36px;min-height:36px;box-sizing:border-box;border:1px solid var(--ref-line);background:var(--ref-field);color:var(--ref-text);border-radius:5px;padding:0 10px;flex-shrink:0}
:root[data-platform=desktop] .desktop-search-results{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain}
:root[data-platform=desktop] .desktop-search-result{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:12px 8px;width:100%;background:transparent;border:0;border-bottom:1px solid var(--ref-line);text-align:left;color:inherit;cursor:pointer}
:root[data-platform=desktop] .desktop-search-result strong{font-size:13px;color:var(--ref-accent-ink);font-weight:500}
:root[data-platform=desktop] .desktop-search-result span{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
:root[data-platform=desktop] .desktop-search-result:hover{background:var(--ref-hover)}
:root[data-platform=desktop] .desktop-search-status{font-size:12px;color:var(--ref-secondary);margin:0}
:root[data-platform=desktop] .desktop-search-next{width:100%;padding:12px;border:0;background:transparent;color:var(--ref-accent-ink);cursor:pointer}
:root[data-platform=desktop] .ref-message-menu.ref-wechat-menu{display:flex;flex-direction:column;width:190px;grid-template-columns:none;padding:5px;border-radius:4px;box-shadow:var(--ref-shadow);background:var(--ref-panel);color:var(--ref-text)}
:root[data-platform=desktop] .ref-wechat-menu .ref-menu-item{display:flex;flex-direction:row;justify-content:flex-start;gap:12px;min-height:34px;width:100%;font-size:13px;padding:7px 12px;border-radius:3px;color:inherit}
:root[data-platform=desktop] .ref-wechat-menu .ref-menu-item svg{width:17px;height:17px}
:root[data-platform=desktop] .ref-message-menu .ref-menu-item:hover{background:var(--ref-hover)}
/* Plugin toolbar actions are presented in each client's attachment grid. */
:root[data-desktop-original-first=true] #toolbarSlots{display:none!important}
@media(prefers-reduced-motion:reduce){:root[data-platform=desktop] *{scroll-behavior:auto}}

@media(min-width:900px){:root[data-platform=desktop] #backButton{display:none}}

:root[data-platform=desktop][data-client-variant=wechat] #messageInput:focus{outline:none;border-color:transparent;box-shadow:none}


/* Search keeps its existing surface and caret, without an inner focus frame. */
:root[data-platform=desktop][data-client-variant] :is(.search-field input,.desktop-search-input,.ref-search):is(:focus,:focus-visible){outline:none;box-shadow:none;caret-color:var(--ref-accent-ink)}
:root[data-platform=desktop][data-ref-input=keyboard] :is(button,[role=button]):focus-visible :is(svg,.settings-icon){color:var(--ref-accent-ink)}

/* The plus menu is content-sized and anchored by the invoking button's rect.
   This overrides generic desktop dialog inset/height, not the page layout. */
:root[data-platform=desktop][data-client-variant=wechat] dialog.ref-sheet.ref-top-menu[open]{position:fixed;inset:auto;left:clamp(8px,var(--ref-menu-left,264px),calc(100vw - 198px));top:clamp(8px,var(--ref-menu-top,56px),calc(100dvh - 110px));margin:0;width:190px;max-width:calc(100vw - 16px);height:max-content;min-height:0;max-height:calc(100dvh - 16px);padding:0;border:1px solid var(--ref-line);border-radius:4px;background:var(--ref-panel);color:var(--ref-text);overflow:auto;box-shadow:0 4px 18px #0002;animation:ref-menu-in 100ms ease-out}
:root[data-platform=desktop][data-client-variant=wechat] dialog.ref-sheet.ref-top-menu .ref-sheet-head{display:none}
:root[data-platform=desktop][data-client-variant=wechat] dialog.ref-sheet.ref-top-menu .ref-sheet-body{padding:4px 0;flex:none;min-height:0}
:root[data-platform=desktop][data-client-variant=wechat] dialog.ref-sheet.ref-top-menu .ref-row{min-height:40px;padding:9px 14px;gap:12px;background:transparent;color:var(--ref-text);border:0}
:root[data-platform=desktop][data-client-variant=wechat] dialog.ref-sheet.ref-top-menu .ref-row:hover{background:var(--ref-hover)}
:root[data-platform=desktop][data-client-variant=wechat] dialog.ref-sheet.ref-top-menu .ref-row>svg{width:19px;height:19px;color:var(--ref-text)}
:root[data-platform=desktop][data-client-variant=wechat] dialog.ref-sheet.ref-top-menu::backdrop{background:transparent}
@keyframes ref-menu-in{from{opacity:.8}to{opacity:1}}

/* Keep paging labels horizontal in narrow side panes and at browser zoom. */
:root[data-platform=desktop][data-client-variant] .ref-pagination{min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;padding:8px 10px}
:root[data-platform=desktop][data-client-variant] .ref-pagination>button{flex:1 0 54px;min-width:54px;min-height:32px;padding:6px 8px;font-size:12px;white-space:nowrap;writing-mode:horizontal-tb;word-break:normal;overflow-wrap:normal}

:root[data-platform=desktop][data-client-variant] dialog:is(:focus,:focus-visible){outline:none}
:root[data-client-variant=wechat]{--ref-surface-corner:4px}
:root[data-client-variant=telegram]{--ref-surface-corner:6px}
:root[data-client-variant] :is(.message-bubble,.own .message-bubble,.message-quote){border-radius:var(--ref-surface-corner)!important}
:root[data-client-variant] :is(dialog,.ref-sheet,.ref-message-menu,.ref-top-menu,.ref-emoji-panel,.ref-favorite,.ref-card,.settings-group,.product-packet-message,.ref-menu,.composer-row,.composer-input-shell,.composer-field,.search-field,.desktop-search-input,.ref-search,input:not([type=checkbox]):not([type=radio]),textarea,select){border-radius:var(--ref-surface-corner)!important}
/* A region used to restore focus is not an interactive card or a tab stop. */
:root[data-client-variant] :is(#messageView,#messages,#referenceScreen):is(:focus,:focus-visible){outline:none!important;box-shadow:none!important}
:root[data-client-variant][data-ref-input=pointer] :is(button,[role=button],input,textarea,select):is(:focus,:focus-visible){outline:none!important;box-shadow:none!important}
:root[data-client-variant][data-ref-input=keyboard] :is(button,[role=button],input,select):focus-visible{outline:1.5px solid color-mix(in srgb,var(--ref-accent,#588aab) 60%,transparent);outline-offset:2px;box-shadow:none}

/* A selected chat must not hide an explicitly opened desktop settings page
   when the window crosses the single-column breakpoint. Keep the same nodes,
   selected conversation, draft and reader anchor; closing restores the chat. */
@media(max-width:740px), (max-height:299px), (min-width:741px) and (max-height:391px){
 :root[data-client-variant][data-platform=desktop] .workspace.chat-open:has(#referenceScreen:not([hidden])) .conversation-panel{display:flex}
 :root[data-client-variant][data-platform=desktop] .workspace.chat-open:has(#referenceScreen:not([hidden])) .chat-panel{display:none}
}

:root[data-client-variant][data-platform=desktop].compact-viewport .workspace.chat-open:has(#referenceScreen:not([hidden])) .conversation-panel{display:flex}
:root[data-client-variant][data-platform=desktop].compact-viewport .workspace.chat-open:has(#referenceScreen:not([hidden])) .chat-panel{display:none}

/* A narrow desktop window keeps the same settings categories and content.
   Put categories in a scrollable top row instead of squeezing the text pane. */
@media(max-width:600px){
 :root[data-client-variant=wechat][data-platform=desktop][data-desktop-original-first=true] #referenceScreen:has(.wechat-desktop-settings){width:calc(100vw - 24px);height:min(580px,calc(100dvh - 24px))}
 :root[data-client-variant=wechat][data-platform=desktop][data-desktop-original-first=true] .wechat-desktop-settings{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 :root[data-client-variant=wechat][data-platform=desktop][data-desktop-original-first=true] .wechat-desktop-settings-nav{flex-direction:row;min-width:0;gap:4px;padding:6px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;border-right:0;border-bottom:1px solid var(--ref-line)}
 :root[data-client-variant=wechat][data-platform=desktop][data-desktop-original-first=true] .wechat-desktop-settings-tab{flex:0 0 auto;min-height:36px;padding:8px 12px;white-space:nowrap}
 :root[data-client-variant=wechat][data-platform=desktop][data-desktop-original-first=true] .wechat-desktop-settings-content{padding:16px;overscroll-behavior:contain}
 :root[data-client-variant=wechat][data-platform=desktop][data-desktop-original-first=true] .wechat-desktop-settings-title{margin-bottom:14px}
}