/* 工单页 Telegram 式双栏重构；只作用于 page-stretch-tickets。 */

#pageContent.page-stretch-tickets{padding-bottom:18px;overflow:hidden}
.page-stretch-tickets>.split-workspace{grid-template-columns:max(340px,30%) minmax(0,70%)!important;gap:12px;width:100%;height:100%;min-height:0}
.page-stretch-tickets .ticket-list,.page-stretch-tickets .ticket-conversation-shell{height:100%;min-height:0;overflow:hidden}

/* 左侧会话流水。 */
.page-stretch-tickets .ticket-list{display:flex;flex-direction:column}
.page-stretch-tickets .ticket-tg-scroll{position:relative;display:block!important;flex:0 0 calc(100% - 96px);height:calc(100% - 96px)!important;min-height:0;overflow:auto;contain:strict;overscroll-behavior:contain;background:var(--card)}
.page-stretch-tickets .ticket-tg-space{position:relative;width:100%;min-height:100%}
.page-stretch-tickets .ticket-tg-row{position:absolute;left:0;right:0;height:72px;box-sizing:border-box;padding:8px 9px 8px 8px;display:grid;grid-template-columns:18px 38px minmax(0,1fr);align-items:center;gap:8px;border-bottom:1px solid var(--line);background:var(--card);cursor:pointer;transition:background .14s}
.page-stretch-tickets .ticket-tg-row:hover{background:color-mix(in srgb,var(--card) 95%,var(--blue) 5%)}
.page-stretch-tickets .ticket-tg-row.active{background:color-mix(in srgb,var(--card) 90%,var(--blue) 10%)}
.page-stretch-tickets .ticket-tg-row.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)}
.page-stretch-tickets .ticket-tg-row .check{margin:0;accent-color:var(--blue)}
.page-stretch-tickets .ticket-flow-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#18243A;color:#E8ECF4;font-size:12px;font-weight:700}
.page-stretch-tickets .ticket-flow-copy{display:grid;min-width:0;gap:4px}
.page-stretch-tickets .ticket-flow-line1,.page-stretch-tickets .ticket-flow-line2{display:flex;align-items:center;min-width:0;gap:6px}
.page-stretch-tickets .ticket-flow-line1 b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;color:var(--text)}
.page-stretch-tickets .ticket-flow-username{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--placeholder);font-size:9px}
.page-stretch-tickets .ticket-tg-row.active .ticket-flow-line1 b{font-weight:750}
.page-stretch-tickets .ticket-flow-time{margin-left:auto;flex:0 0 auto;color:var(--placeholder);font-size:10px}
.page-stretch-tickets .ticket-flow-id{flex:0 1 auto;min-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sub);font-size:10px}
.page-stretch-tickets .ticket-flow-owner,.page-stretch-tickets .ticket-flow-wait{flex:0 0 auto;color:var(--placeholder);font-size:9px;white-space:nowrap}
.page-stretch-tickets .ticket-flow-status{flex:0 0 auto;height:20px;padding:0 7px;border:0;border-radius:10px;font-size:10px;white-space:nowrap}
.page-stretch-tickets .ticket-flow-status.waiting{background:#FFF7ED;color:#C2410C}
.page-stretch-tickets .ticket-flow-status.processing{background:#EFF6FF;color:#2563EB}
.page-stretch-tickets .ticket-flow-status.member{background:#F1F5F9;color:#64748B}
.page-stretch-tickets .ticket-flow-status.resolved{background:#ECFDF3;color:#15803D}
.page-stretch-tickets .ticket-flow-status.closed{background:#E2E8F0;color:#475569}
html[data-theme="dark"] .page-stretch-tickets .ticket-flow-status.waiting{background:rgba(245,165,36,.13);color:#F5A524}
html[data-theme="dark"] .page-stretch-tickets .ticket-flow-status.processing{background:rgba(61,123,255,.14);color:#8DB1FF}
html[data-theme="dark"] .page-stretch-tickets .ticket-flow-status.member{background:rgba(148,163,184,.12);color:#CBD5E1}
html[data-theme="dark"] .page-stretch-tickets .ticket-flow-status.resolved{background:rgba(34,211,170,.12);color:#22D3AA}
html[data-theme="dark"] .page-stretch-tickets .ticket-flow-status.closed{background:rgba(71,85,105,.28);color:#94A3B8}
.page-stretch-tickets .ticket-unread,.page-stretch-tickets .ticket-overdue-badge{height:18px;min-width:18px;padding:0 5px;display:inline-grid;place-items:center;border-radius:9px;font-size:11px;line-height:18px;white-space:nowrap}
.page-stretch-tickets .ticket-unread{background:var(--blue);color:#fff}
.page-stretch-tickets .ticket-overdue-badge{background:rgba(217,119,6,.13);color:var(--amber)}
.page-stretch-tickets .ticket-hover-actions{position:absolute;right:8px;bottom:5px;display:flex;gap:4px;opacity:0;visibility:hidden;transform:translateY(2px);transition:.14s}
.page-stretch-tickets .ticket-tg-row:hover .ticket-hover-actions,.page-stretch-tickets .ticket-tg-row.active .ticket-hover-actions,.page-stretch-tickets .ticket-tg-row.menu-open .ticket-hover-actions{opacity:1;visibility:visible;transform:none}
.page-stretch-tickets .ticket-hover-actions button{height:22px;padding:0 7px;border:1px solid var(--line2);border-radius:6px;background:var(--float);color:var(--sub);font-size:10px;box-shadow:0 3px 10px rgba(15,23,42,.08);cursor:pointer}
.page-stretch-tickets .ticket-preview-tooltip{position:absolute;z-index:40;left:62px;right:8px;bottom:-30px;min-height:27px;padding:6px 9px;border:1px solid var(--line2);border-radius:7px;background:var(--float);box-shadow:var(--shadow);color:var(--text);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-3px);transition:.14s}
.page-stretch-tickets .ticket-tg-row:hover .ticket-preview-tooltip{opacity:1;visibility:visible;transform:none}
.page-stretch-tickets .ticket-tg-row.menu-open{z-index:12}
.page-stretch-tickets .ticket-flow-menu{position:absolute;z-index:30;right:8px;top:64px;width:116px;padding:4px;display:grid;gap:2px;border:1px solid var(--line2);border-radius:8px;background:var(--float);box-shadow:var(--shadow)}
.page-stretch-tickets .ticket-flow-menu button{height:27px;padding:0 8px;border:0;border-radius:5px;background:transparent;color:var(--sub);font-size:11px;text-align:left;cursor:pointer}
.page-stretch-tickets .ticket-flow-menu button:hover,.page-stretch-tickets .ticket-flow-menu button.active{background:rgba(61,123,255,.11);color:var(--blue)}
.page-stretch-tickets .ticket-flow-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--placeholder);font-size:12px}
.page-stretch-tickets .ticket-flow-foot{flex:0 0 auto;min-height:36px;padding:5px 10px;display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);background:var(--card);color:var(--sub);font-size:10px}
.page-stretch-tickets .ticket-flow-foot button{height:25px;padding:0 7px;border:1px solid var(--line2);border-radius:6px;background:var(--card);color:var(--sub);cursor:pointer}
.page-stretch-tickets .ticket-flow-foot button:disabled{opacity:.35;cursor:not-allowed}

/* 右侧会话窗口：头、消息、吸底回复三段。 */
.page-stretch-tickets .ticket-conversation-shell{display:flex;flex-direction:column;background:var(--card)}
.page-stretch-tickets .ticket-window-head{position:relative;flex:0 0 auto;min-height:72px;padding:10px 13px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);background:var(--card)}
.page-stretch-tickets .ticket-window-title{display:grid;min-width:0;line-height:1.35}
.page-stretch-tickets .ticket-window-title b,.page-stretch-tickets .ticket-window-title small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-stretch-tickets .ticket-window-title b{font-size:13px}.page-stretch-tickets .ticket-window-title small{color:var(--sub);font-size:11px}
.page-stretch-tickets .ticket-window-title b small{margin-left:4px;color:var(--placeholder);font-size:10px;font-weight:500}
.page-stretch-tickets .ticket-window-meta{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;color:var(--sub);font-size:11px}
.page-stretch-tickets .ticket-window-meta .ticket-take{height:28px;min-width:58px}
.page-stretch-tickets .ticket-window-status-wrap{position:relative}
.page-stretch-tickets .ticket-window-menu{top:31px;right:0}
.page-stretch-tickets .ticket-message-stream{flex:1 1 auto;min-height:0;padding:16px 14px;overflow:auto;overscroll-behavior:contain;background:color-mix(in srgb,var(--page) 72%,var(--card) 28%)}
.page-stretch-tickets .ticket-message-stream .message-bubble{width:max-content;max-width:78%;margin:0 0 12px;padding:10px 12px;line-height:1.5}
.page-stretch-tickets .ticket-message-stream .message-bubble.agent{margin-left:auto}
.page-stretch-tickets .ticket-message-stream .message-bubble small{display:block;margin-top:4px;text-align:right;font-size:10px;color:var(--placeholder)}
.page-stretch-tickets .ticket-empty-conversation{height:100%;min-height:220px;display:grid;place-items:center;text-align:center;color:var(--sub)}
.page-stretch-tickets .ticket-empty-conversation>div{display:grid;justify-items:center;gap:8px}
.page-stretch-tickets .ticket-empty-art{width:82px;height:64px;display:grid;place-items:center;border-radius:22px;background:rgba(61,123,255,.08);color:var(--blue);box-shadow:inset 0 0 0 1px rgba(61,123,255,.12)}
.page-stretch-tickets .ticket-empty-conversation b{font-size:13px;color:var(--text)}
.page-stretch-tickets .ticket-empty-conversation p{margin:0;font-size:11px}
.page-stretch-tickets .ticket-reply-box{flex:0 0 auto;padding:11px 12px;border-top:1px solid var(--line);background:var(--card)}
.page-stretch-tickets .ticket-reply-box textarea{display:block;width:100%;min-height:72px;max-height:120px;resize:vertical;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--text);padding:9px 10px;font:13px/1.45 inherit}
.page-stretch-tickets .ticket-reply-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.page-stretch-tickets .ticket-realtime-state{height:28px;padding:0 9px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--sub);font-size:10px;white-space:nowrap}
.page-stretch-tickets .ticket-realtime-state i{width:7px;height:7px;border-radius:50%;background:#94A3B8}
.page-stretch-tickets .ticket-realtime-state.online i{background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.page-stretch-tickets .ticket-realtime-state.reconnecting i{background:#D97706;box-shadow:0 0 0 3px rgba(217,119,6,.12)}

@media(max-width:899px){
  #pageContent.page-stretch-tickets{overflow-y:auto}
  .page-stretch-tickets>.split-workspace{grid-template-columns:1fr!important;height:auto}
  .page-stretch-tickets .ticket-list,.page-stretch-tickets .ticket-conversation-shell{height:620px}
}