/* Figma 31:57: rail tooltips and compact dropdowns for theme and language. */
body[data-page=ask] header nav::before,body:not([data-page=ask]) header nav::before{content:none}
body .rail-cloud.glow-cloud{position:fixed;left:5px;top:17px;z-index:22;display:flex;align-items:center;justify-content:center;width:44px;height:33px;margin:0;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0;cursor:pointer}
body .rail-cloud.glow-cloud svg{display:block;flex:none;width:50px;height:50px;overflow:visible;pointer-events:none}
.rail-controls{position:fixed;left:0;top:261px;width:54px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:60}
.rail-controls::before{content:"";position:absolute;left:8px;right:8px;top:-8px;height:1px;background:rgba(0,0,0,.12)}
html[data-theme=dark] .rail-controls::before{background:rgba(255,255,255,.14)}
.rail-control{position:relative;width:38px;height:38px;flex:none}
.rail-control-trigger{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--text)}
.rail-control-trigger::before{content:"";width:20px;height:20px;background:currentColor;mask:var(--rail-control-icon) center/contain no-repeat;-webkit-mask:var(--rail-control-icon) center/contain no-repeat}
.rail-control-theme{--rail-control-icon:url('/assets/figma/theme.svg')}
.rail-control-language{--rail-control-icon:url('/assets/figma/translate.svg')}
.rail-control-trigger:hover{background:rgba(0,0,0,.06)}
html[data-theme=dark] .rail-control-trigger:hover{background:rgba(255,255,255,.1)}
.rail-popover{position:absolute;left:46px;top:0;width:max-content;min-width:86px;max-width:min(200px,calc(100vw - 62px));padding:4px 6px;display:flex;flex-direction:column;gap:2px;border:.5px solid rgba(0,0,0,.13);border-radius:20px;background:#f8f7f3;box-shadow:0 4px 12px rgba(0,0,0,.08);transform-origin:left top;z-index:61}
.rail-popover[aria-hidden=true]{pointer-events:none}
.rail-popover-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:32px;padding:5px 6px;border:0;border-radius:12px;background:transparent;color:rgba(0,0,0,.82);font:400 14px/22px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;text-align:left;white-space:nowrap}
.rail-popover-item:hover,.rail-popover-item:focus-visible{background:rgba(0,0,0,.06)}
.rail-popover-item[aria-checked=true]::after{content:"";width:18px;height:18px;flex:none;background:currentColor;mask:url('/assets/figma/check.svg') center/contain no-repeat;-webkit-mask:url('/assets/figma/check.svg') center/contain no-repeat}
html[data-theme=dark] .rail-popover{background:#30302e;border-color:rgba(255,255,255,.16);box-shadow:0 4px 14px rgba(0,0,0,.3)}
html[data-theme=dark] .rail-popover-item{color:#f6f4ed}
html[data-theme=dark] .rail-popover-item:hover,html[data-theme=dark] .rail-popover-item:focus-visible{background:rgba(255,255,255,.1)}
@media(min-width:761px){
 header nav a[data-tooltip]::after,.rail-control-trigger[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 9px);top:50%;transform:translate(-4px,-50%);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:max-content;min-width:65px;height:34px;padding:0 12px 4px 16px;background:url('/assets/figma/tooltip.svg') center/100% 100% no-repeat;color:#fff;font:400 10px/1.2 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 150ms ease,transform 150ms ease,visibility 0s linear 150ms;z-index:70}
 header nav a:is([data-tooltip="我的"],[data-tooltip="主题"],[data-tooltip="语言"],[data-tooltip="言語"])::after,.rail-control-trigger:is([data-tooltip="我的"],[data-tooltip="主题"],[data-tooltip="语言"],[data-tooltip="言語"])::after{width:53px;min-width:53px;background-image:url('/assets/figma/tooltip-short.svg');background-size:53px 34px}
 header nav a[data-tooltip]:is(:hover,:focus-visible)::after,.rail-control-trigger[data-tooltip]:is(:hover,:focus-visible):not([aria-expanded=true])::after{opacity:1;visibility:visible;transform:translate(0,-50%);transition-delay:0s}
 html[data-theme=dark] header nav a[data-tooltip]::after,html[data-theme=dark] .rail-control-trigger[data-tooltip]::after{filter:drop-shadow(0 0 1px rgba(255,255,255,.4))}
}
@media(prefers-reduced-motion:reduce){header nav a[data-tooltip]::after,.rail-control-trigger[data-tooltip]::after{transition:none}}

/* Navigation uses the same orange active and translucent hover in both themes. */
body[data-page=ask] header nav a:not([aria-current]):hover,
body:not([data-page=ask]) header nav a:not([aria-current]):hover{background:rgba(251,87,39,.1);color:var(--text)}
.rail-control-trigger:hover,
html[data-theme=dark] .rail-control-trigger:hover{background:rgba(251,87,39,.1)}
body[data-page=ask] header nav a[aria-current],
body:not([data-page=ask]) header nav a[aria-current],
html[data-theme=dark] body[data-page=ask] header nav a[aria-current],
html[data-theme=dark] body:not([data-page=ask]) header nav a[aria-current]{background:#fb5727;color:#fff}

/* Conversation actions use the same orange as the navigation rail. */
body[data-page=ask] #new-chat:hover,
body:not([data-page=ask]) #new-chat:hover,
body[data-page=ask] #secondary button[data-chat]:not([aria-current]):hover{
 background:rgba(251,87,39,.1);color:var(--text)
}
body[data-page=ask] #secondary button[data-chat][aria-current],
body[data-page=ask] #secondary button[data-chat][aria-current]:hover{
 background:#fb5727;color:#fff
}
@media(max-width:760px){
 body .rail-cloud.glow-cloud{display:none}
 .rail-controls::before{display:none}
 .rail-controls{position:static;width:auto;display:flex;flex-direction:row;align-items:center;gap:8px;margin:4px 10px 0;z-index:auto}
 .rail-popover{left:0;top:auto;bottom:calc(100% + 8px);transform-origin:left bottom;max-width:calc(100vw - 48px)}
}

/* Keep the new conversation button unselected until hovered. */
body[data-page=ask] #new-chat:hover,body:not([data-page=ask]) #new-chat:hover,html[data-theme=dark] body[data-page=ask] #new-chat:hover,html[data-theme=dark] body:not([data-page=ask]) #new-chat:hover{background:rgba(251,87,39,.1)}

/* The sidebar meets the canvas without a divider. */
html body[data-page=ask]>header,html body:not([data-page=ask])>header,
html:not([data-theme=dark]) body[data-page=ask]>header,html:not([data-theme=dark]) body:not([data-page=ask])>header{border-right:0;box-shadow:none}