/* Fixed agent identity followed by a quietly scrolling conversation rail. */
.chat-header { display:grid !important; height:auto !important; min-height:54px; grid-template-columns:minmax(150px,210px) minmax(0,1fr) auto; align-items:center; gap:14px; flex-wrap:nowrap; }
.chat-header .hamburger-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; flex-shrink:0; }
.chat-header .current-agent { min-width:0; width:100%; gap:9px !important; padding-right:14px !important; border-right:1px solid var(--border); }
.chat-header .current-agent > div { min-width:0; }
.chat-header .current-agent h2 { font-size:13px; letter-spacing:-.2px; }
.chat-header .current-agent #currentAgentDesc { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; max-width:160px; }
.chat-header .current-agent .emoji { flex-shrink:0; font-size:20px; }
.chat-header .header-actions { width:auto !important; gap:4px; }
.conversation-tabs { position:relative; display:flex; align-items:center; gap:5px; min-width:0; width:100%; padding:5px 1px !important; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.conversation-tabs::-webkit-scrollbar { display:none; width:0; height:0; }
.conversation-tab { position:relative; flex:0 0 auto; max-width:190px; height:36px; padding:0 27px 0 15px !important; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text-secondary,#929aad); font:500 12px Inter,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:background .18s,color .18s,border-color .18s,box-shadow .18s; }
.conversation-tab:hover { background:rgba(128,140,170,.08); color:var(--text-primary,#fff); }
.conversation-tab[aria-selected="true"] { color:var(--text-primary,#f5f6ff); background:linear-gradient(180deg,rgba(125,139,255,.16),rgba(125,139,255,.07)); border-color:rgba(125,139,255,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.08); }
.conversation-tab[aria-selected="true"]::after { content:""; position:absolute; bottom:0; left:25%; right:25%; height:2px; border-radius:2px; background:#8995ff; }
.conversation-new { flex:0 0 auto; height:32px; margin-left:4px !important; padding:0 10px !important; border:0; border-radius:8px; background:transparent; color:var(--text-secondary,#929aad); font:500 12px Inter,sans-serif; white-space:nowrap; cursor:pointer; transition:background .18s,color .18s; }
.conversation-new:hover { background:rgba(125,139,255,.1); color:var(--text-primary,#fff); }
.conversation-tab:focus-visible,.conversation-new:focus-visible { outline:2px solid #8995ff; outline-offset:-2px; }
body.theme-light .conversation-tab[aria-selected="true"] { background:linear-gradient(180deg,#eef0ff,#e7ebff); border-color:#ccd3fa; box-shadow:0 2px 5px rgba(66,78,128,.07); }
@media (min-width:769px) and (max-width:1200px) { .chat-header { grid-template-columns:minmax(140px,190px) minmax(0,1fr); } .chat-header .header-actions { grid-column:1/-1; justify-content:flex-end; } }
@media (max-width:768px) { .chat-header { grid-template-columns:125px minmax(0,1fr); gap:8px; padding:10px !important; } .chat-header .hamburger-btn { width:30px; } .chat-header .current-agent { padding-right:8px !important; gap:6px !important; } .chat-header .current-agent .emoji { display:none !important; } .chat-header .current-agent h2 { font-size:12px; } .chat-header .current-agent #currentAgentDesc { font-size:10px; } .conversation-tab { max-width:145px; height:34px; padding:0 25px 0 11px !important; } .conversation-new { padding:0 8px !important; } }
/* Keep legacy mobile positioning rules from moving identity over the rail. */
.chat-header .hamburger-btn { position:static !important; grid-column:1; grid-row:1; transform:none !important; }
.chat-header .current-agent { position:static !important; grid-column:1; grid-row:1; transform:none !important; justify-content:flex-start !important; text-align:left !important; }
.chat-header .conversation-tabs { position:relative !important; grid-column:2; grid-row:1; inset:auto !important; transform:none !important; }
.chat-header .header-actions { grid-column:3; grid-row:1; }
@media(min-width:769px) and (max-width:1200px) { .chat-header .header-actions { grid-column:1/-1; grid-row:2; } }

/* The create action stays outside the scrolling tab rail. */
.chat-header .conversation-tabs { overflow:hidden; gap:8px; padding:0 !important; }
.conversation-tab-rail { position:relative; display:flex; align-items:center; gap:5px; flex:1; min-width:0; overflow-x:auto; padding:5px 1px !important; scrollbar-width:none; -ms-overflow-style:none; }
.conversation-tab-rail::-webkit-scrollbar { display:none; width:0; height:0; }
.chat-header .conversation-new { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0 !important; margin:0 !important; font:400 23px/1 Inter,sans-serif; border:1px solid rgba(125,139,255,.18); background:rgba(125,139,255,.06); border-radius:9px; }
.chat-header .conversation-new:hover { border-color:rgba(125,139,255,.4); background:rgba(125,139,255,.14); }
/* Close action inside each tab; visible on hover, always on the active tab. */
.conversation-tab-close { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:5px; color:var(--text-secondary,#929aad); font:400 15px/17px Inter,sans-serif; cursor:pointer; opacity:0; transition:opacity .15s,background .15s,color .15s; }
.conversation-tab:hover .conversation-tab-close, .conversation-tab-close:focus-visible { opacity:1; }
.conversation-tab[aria-selected="true"] .conversation-tab-close { opacity:.85; }
.conversation-tab-close:hover { background:rgba(255,86,110,.16); color:#ff7086; }
@media (pointer:coarse) { .conversation-tab-close { opacity:1; } }

/* Sidebar toggle floats over its own panel header, including the closed state. */
#sidebarToggle { position:fixed; top:12px; left:232px; z-index:210; transition:left .3s ease; }
#sidebar .sidebar-header { padding-right:60px !important; }
#sidebar .logo-text { min-width:0; }
#sidebar .logo-text h1, #sidebar .logo-text span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(min-width:769px) {
 body.sidebar-collapsed #sidebarToggle { left:var(--chat-edge-inset,31px); top:var(--chat-toggle-top,12px); }
 body.sidebar-collapsed .chat-header { padding-left:calc(var(--chat-edge-inset,31px) + 48px) !important; }
}
@media(max-width:768px) {
 #sidebarToggle { left:var(--chat-edge-inset,20px); top:var(--chat-toggle-top,12px); }
 #sidebar.open + #sidebarToggle { left:calc(100% - 48px); top:12px; }
 .chat-header { padding-left:calc(var(--chat-edge-inset,20px) + 44px) !important; }
}
@media(prefers-reduced-motion:reduce) { #sidebarToggle { transition:none; } }

/* Edge arrows appear only when the tabs overflow the rail. */
.conversation-tab-scroll { display:none; flex:0 0 auto; align-items:center; justify-content:center; width:26px; height:32px; padding:0 !important; border:0; border-radius:8px; background:transparent; color:var(--text-secondary,#929aad); font:400 20px/1 Inter,sans-serif; cursor:pointer; transition:background .15s,color .15s,opacity .15s; }
.conversation-tabs.has-overflow .conversation-tab-scroll { display:inline-flex; }
.conversation-tab-scroll:hover:not(:disabled) { background:rgba(125,139,255,.1); color:var(--text-primary,#fff); }
.conversation-tab-scroll:disabled { opacity:.3; cursor:default; }
.conversation-tab-scroll:focus-visible { outline:2px solid #8995ff; outline-offset:-2px; }

/* Tab title: ellipsis normally; the active tab's long title drifts so it can be read. */
.conversation-tab-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-tab-label.is-drifting { text-overflow:clip; }
.conversation-tab-label.is-drifting .conversation-tab-text { display:inline-block; animation:conversation-tab-drift var(--drift-time,8s) ease-in-out infinite alternate; }
.conversation-tab:hover .conversation-tab-label.is-drifting .conversation-tab-text { animation-play-state:paused; }
@keyframes conversation-tab-drift { 0%,15% { transform:translateX(0); } 85%,100% { transform:translateX(var(--drift)); } }
@media(prefers-reduced-motion:reduce) { .conversation-tab-label.is-drifting { text-overflow:ellipsis; } .conversation-tab-label.is-drifting .conversation-tab-text { display:inline; animation:none; } }

/* Header: a few direct actions, the rest in one overflow menu; status shows as a dot when ready. */
.chat-header .header-actions { position:relative; }
.chat-header .header-actions > .header-more-item { display:none !important; }
.chat-header .connection-status.connected { padding:8px 10px; gap:0; }
.chat-header .connection-status.connected #connectionText { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.header-more-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:300; min-width:220px; padding:6px; border:1px solid var(--border,#2a2f3a); border-radius:12px; background:var(--bg-secondary,#181b21); box-shadow:0 18px 48px rgba(0,0,0,.35); display:grid; gap:2px; }
.header-more-menu[hidden] { display:none; }
.header-more-option { display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:7px 10px !important; border:0; border-radius:8px; background:transparent; color:var(--text-primary,#edf0f5); font:500 13px Inter,sans-serif; text-align:left; cursor:pointer; }
.header-more-option:hover, .header-more-option:focus-visible { background:var(--bg-hover,rgba(128,140,170,.12)); outline:none; }
.header-more-option .ui-icon { flex-shrink:0; width:18px; height:18px; color:var(--text-secondary,#a6aebb); }

/* Working tab: a small spinner before the title (replaces the hourglass emoji). */
.conversation-tab-working { display:inline-block; width:9px; height:9px; margin-right:7px; vertical-align:-1px; border:1.5px solid var(--accent,#8995ff); border-top-color:transparent; border-radius:50%; animation:task-step-spin .9s linear infinite; }
@keyframes task-step-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .conversation-tab-working { animation:none; border-top-color:var(--accent,#8995ff); } }