.chat-session-layout{display:grid;grid-template-columns:minmax(190px,245px) minmax(0,1fr);gap:15px;align-items:stretch}
.chat-session-layout>.chat-panel{min-width:0}
.chat-recents{border:1px solid #e0ebf6;border-radius:18px;background:#f8fbff;display:flex;flex-direction:column;min-height:505px;overflow:hidden}
.chat-recents-head{padding:20px 17px 11px;display:flex;align-items:center;justify-content:space-between;color:#63829d;font-size:13px}
.chat-history-new{margin:2px 11px 11px;padding:11px 13px;display:flex;align-items:center;gap:10px;border:1px solid #d2e7fa;border-radius:11px;background:#ebf6ff;color:#277ac1;font:700 12px 'IBM Plex Sans Thai',sans-serif;cursor:pointer}
.chat-history-new svg,.chat-history-toggle svg,.chat-history-delete svg,.chat-recents-mobile-close svg,.chat-history-retention svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.chat-history-new:hover{background:#ddf0ff}
.chat-history-list{flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px}
.chat-history-item{display:flex;align-items:center;border-radius:10px;gap:3px;margin:3px 0;padding:2px;transition:background .18s}
.chat-history-item:hover{background:#e9f3fc}.chat-history-item.active{background:#ddecfc}
.chat-history-open{min-width:0;flex:1;text-align:left;display:block;padding:10px 8px;border:0;background:transparent;color:#436680;cursor:pointer;font:inherit}
.chat-history-open strong{display:block;font-size:12px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.chat-history-open small{display:block;font-size:10px;color:#94a9bb;margin-top:4px}
.chat-history-delete{background:none;border:0;color:#97aabd;cursor:pointer;padding:7px;display:flex;border-radius:7px;opacity:.65}
.chat-history-delete:hover{color:#c04e5d;background:#fff1f2;opacity:1}
.chat-history-empty{color:#91a9bd;padding:15px 12px;font-size:11px;line-height:1.8}
.chat-history-retention{margin:auto 12px 0;padding:13px 3px;border-top:1px solid #e5eef8;color:#9aafbf;font-size:10px;line-height:1.6;display:flex;gap:6px;align-items:flex-start}
.chat-history-retention svg{flex-shrink:0;width:14px;height:14px}
.chat-history-toggle,.chat-recents-mobile-close{border:0;background:none;color:#6194bf;border-radius:8px;cursor:pointer;display:none;align-items:center;justify-content:center;padding:8px}
.chat-recents-backdrop{display:none}
@media(max-width:1050px){.chat-session-layout{grid-template-columns:195px minmax(0,1fr);gap:10px}}
@media(max-width:820px){
 .chat-session-layout{display:block;position:relative}
 .chat-recents{display:flex;position:fixed;left:14px;top:calc(82px + env(safe-area-inset-top));bottom:14px;width:min(310px,calc(100vw - 28px));min-height:0;z-index:61;box-shadow:0 22px 60px #17395835;background:#fafdff;visibility:hidden;pointer-events:none;opacity:0;transform:translateX(-18px);transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility 0s linear .28s}
 .chat-recents.is-open{visibility:visible;pointer-events:auto;opacity:1;transform:none;transition-delay:0s}
 .chat-recents-backdrop{display:block;position:fixed;inset:0;z-index:60;border:0;background:#17395745;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s linear .2s}
 .chat-recents-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
 .chat-history-toggle,.chat-recents-mobile-close{display:flex}
 .chat-toolbar{justify-content:flex-start}.chat-toolbar #chat-provider-label{margin-left:auto}
 body.chat-history-sheet-open{overflow:hidden}
}
/* Mobile chat hardening: keep every control inside the viewport and above safe areas. */
@media(max-width:700px){
 .page-view[data-page=chat] .heading-row{align-items:flex-start;margin-bottom:18px}
 .page-view[data-page=chat] .heading-row>div{min-width:0;flex:1 1 210px}
 .page-view[data-page=chat] .role-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
 .chat-panel{border-radius:15px;max-width:100%}
 .chat-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;padding:10px!important}
 .chat-history-toggle{grid-column:1;grid-row:1}
 .model-picker{grid-column:2;grid-row:1;max-width:none!important;width:100%}
 .model-picker-toggle{width:100%;min-width:0}
 .model-picker-title{flex:1}.model-picker-title b{max-width:none!important}
 .chat-toolbar #chat-provider-label{grid-column:1/-1;grid-row:2;margin:0!important;max-width:100%!important;text-align:left!important;justify-self:start}
 .model-picker-menu{position:fixed;left:10px;right:10px;top:calc(84px + env(safe-area-inset-top));width:auto;max-height:calc(100dvh - 110px - env(safe-area-inset-bottom));z-index:80}
 .real-chat-log{min-height:300px!important;max-height:52dvh!important;padding:13px 11px!important;scroll-padding-bottom:12px}
 .real-chat-message{max-width:94%!important;padding:12px 13px}
 .real-chat-message p{font-size:13px;line-height:1.75}
 .real-chat-form{margin:0 9px!important;border-radius:14px}
 .real-chat-form textarea{min-height:72px;padding:13px 12px;font-size:16px;resize:none}
 .chat-send-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;padding:8px!important}
 .chat-send-row #chat-estimate{width:auto!important;min-width:0;font-size:9px!important;line-height:1.35!important;overflow-wrap:anywhere}
 .chat-send-row .button,.chat-stop-button{min-height:40px;padding:9px 11px!important;font-size:11px!important}
 .real-chat-form+.form-status{margin:8px 12px 14px}
 .chat-livebar{margin-inline:0}
 .chat-recents{inset:auto 10px calc(10px + env(safe-area-inset-bottom)) 10px!important;width:auto;height:min(62dvh,520px);max-height:calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:24px!important;padding:0;box-shadow:0 24px 70px #163b5c45;transform:translateY(calc(100% + 28px));transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .22s,visibility 0s linear .34s}
 .chat-recents.is-open{transform:translateY(0);transition-delay:0s}
 .chat-recents-head{position:relative;padding:24px 19px 10px;font-size:15px;touch-action:none}
 .chat-recents-head:before{content:"";position:absolute;top:8px;left:50%;width:42px;height:4px;border-radius:99px;background:#cfdeeb;transform:translateX(-50%)}
 .chat-recents-mobile-close{width:38px;height:38px;border-radius:50%;background:#edf5fc}
 .chat-history-new{min-height:48px;margin:4px 12px 10px;padding:11px 15px;border-radius:15px;font-size:13px}
 .chat-history-list{padding:0 9px 10px;overscroll-behavior:contain}
 .chat-history-item{min-height:60px;margin:4px 0;padding:3px 5px;border-radius:14px}
 .chat-history-open{padding:9px 8px}.chat-history-open strong{font-size:13px}.chat-history-open small{font-size:10px}
 .chat-history-delete{width:38px;height:38px;align-items:center;justify-content:center;opacity:.72}
 .chat-history-retention{display:none}
 .chat-recents-backdrop{background:#142f4740;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
}
@media(max-width:380px){
 .chat-send-row .button svg{display:none}
 .chat-send-row .button,.chat-stop-button{padding-inline:9px!important}
 .real-chat-message{max-width:98%!important}
}
@media(prefers-reduced-motion:reduce){.chat-history-item{transition:none}}