:root { color-scheme: light; --ink:#262324; --muted:#73706d; --line:#e5e2dd; --canvas:#f5f4f0; --accent:#4c665b; font-family:Arial,"Microsoft JhengHei","PingFang TC",sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
body { margin:0; }
button,input,select { font:inherit; touch-action:manipulation; }
button,select { cursor:pointer; }
button { min-height:44px; transition:background-color .18s,color .18s,border-color .18s; }
button:disabled,select:disabled { cursor:not-allowed; opacity:.55; }
[hidden] { display:none!important; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:3px solid #759889; outline-offset:4px; }
h1,h2,h3,p { margin:0; }
.skip-link { position:fixed; top:8px; left:8px; z-index:5; background:#fff; color:var(--ink); padding:12px; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.brand-bar { background:#231f20; color:#fff; }
.brand-inner { max-width:1480px; margin:auto; min-height:90px; padding:0 40px; display:flex; align-items:center; gap:26px; }
.brand-logo { width:150px; height:79px; object-fit:contain; }
.brand-divider { height:25px; width:1px; background:#5a5556; }
.brand-label { font-size:10px; letter-spacing:2.2px; color:#ccc7c7; }
.header-tag { margin-left:auto; font-size:12px; color:#d8d3d3; letter-spacing:2px; }
.workspace { max-width:1480px; margin:auto; padding:42px 40px 32px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:32px; }
.eyebrow { font-size:10px; font-weight:600; letter-spacing:2px; color:var(--muted); }
h1 { font-size:clamp(23px,2.5vw,32px); font-weight:500; letter-spacing:1px; line-height:1.5; margin:10px 0; }
.page-description { font-size:13px; line-height:1.7; color:var(--muted); }
.timezone { font-size:12px; color:var(--muted); white-space:nowrap; }
.timezone span { margin-left:10px; padding:7px 9px; border:1px solid var(--line); border-radius:5px; font-size:10px; }
.main-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; align-items:start; }
.sidebar { border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.filter-section,.session-section { padding:26px 24px; }
.session-section { border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.section-heading h2 { font-size:15px; font-weight:600; }
.step-number { font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; border:1px solid var(--line); border-radius:50%; width:25px; height:25px; display:grid; place-items:center; }
.section-description { font-size:12px; color:var(--muted); line-height:1.8; }
.date-fields { display:grid; gap:16px; margin:24px 0 12px; }
.field { min-width:0; }
.field label,.field-label { display:block; font-size:12px; margin-bottom:9px; color:#57534f; }
input,select { display:block; width:100%; min-width:0; min-height:46px; border:1px solid #d9d6d0; border-radius:6px; padding:10px 12px; background:#fff; color:var(--ink); font-size:14px; }
input { font-variant-numeric:tabular-nums; }
select { font-size:12px; text-overflow:ellipsis; padding-right:24px; }
.quick-dates { display:flex; gap:8px; margin-bottom:20px; }
.quick-dates button { flex:1; background:#f6f5f2; border:1px solid transparent; border-radius:5px; color:#625d57; font-size:12px; }
.quick-dates button:hover { border-color:#aaa49c; background:#efede8; }
.search-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:var(--ink); color:#fff; border:1px solid var(--ink); border-radius:6px; min-height:48px; font-size:13px; }
.search-button:hover { background:#494444; }
.count-pill { display:inline-flex; align-items:center; justify-content:center; background:#f2f1ed; color:#68635d; border-radius:5px; font-size:11px; padding:6px 9px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.section-heading .count-pill { margin-left:auto; }
.field-label { margin-top:22px; }
.session-section .section-description { margin-top:12px; }
.sidebar-note { padding:20px 24px; border-top:1px solid var(--line); font-size:10px; color:var(--muted); display:flex; align-items:center; gap:8px; line-height:1.7; }
.note-dot { width:5px; height:5px; flex-shrink:0; border-radius:50%; background:var(--accent); }
.loading { padding:0 24px 18px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--accent); }
.spinner { width:15px; height:15px; border:2px solid #d9e4df; border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; }
.error-message { margin:0 16px 18px; padding:10px 12px; background:#fff3f0; border:1px solid #eac7be; border-radius:6px; display:flex; align-items:start; gap:8px; color:#973b29; font-size:12px; line-height:1.7; }
.error-message button { border:0; background:transparent; color:inherit; min-width:44px; margin:-8px -10px -8px 0; font-size:22px; }
.conversation { min-width:0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; min-height:620px; height:calc(100dvh - 295px); max-height:1050px; }
.chat-header { padding:24px 30px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.chat-header h2 { font-size:17px; font-weight:500; letter-spacing:.7px; margin-top:7px; }
.chat-placeholder { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:36px 24px; background:radial-gradient(ellipse at center,#fff 0%,#faf9f6 100%); }
.empty-symbol { display:grid; place-items:center; width:80px; height:80px; margin-bottom:30px; border:1px solid #e2ded5; border-radius:22px; background:#f5f3ed; color:#817765; transform:rotate(-5deg); }
.empty-symbol svg { width:44px; height:44px; transform:rotate(5deg); }
.chat-placeholder .eyebrow { font-size:9px; letter-spacing:1.6px; line-height:1.8; }
.chat-placeholder h3 { font-size:22px; font-weight:500; margin:15px 0 12px; }
.chat-placeholder>p:last-of-type { font-size:13px; color:var(--muted); max-width:320px; line-height:1.9; }
.empty-steps { display:flex; gap:16px; color:#77716a; font-size:11px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.chat-container { flex:1; min-height:0; display:flex; flex-direction:column; }
.session-detail { padding:12px 30px; background:#faf9f6; border-bottom:1px solid var(--line); font-size:11px; color:var(--muted); overflow-wrap:anywhere; line-height:1.7; }
.chat-messages { flex:1; overflow-y:auto; padding:28px 30px; scrollbar-width:thin; scrollbar-color:#d5d1c9 transparent; overscroll-behavior:contain; }
.message { display:flex; flex-direction:column; align-items:flex-start; margin-bottom:24px; content-visibility:auto; contain-intrinsic-size:auto 110px; }
.message.human { align-items:flex-end; }
.message-label { font-size:10px; color:var(--muted); margin:0 3px 8px; letter-spacing:.6px; }
.message-bubble { max-width:85%; background:#f2f1ed; padding:15px 18px; border-radius:3px 12px 12px 12px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.9; }
.human .message-bubble { background:#eaf0ec; border-radius:12px 3px 12px 12px; color:#2c4338; }
.message-time { font-size:10px; color:var(--muted); margin:8px 3px 0; font-variant-numeric:tabular-nums; }
.chat-footer { display:flex; justify-content:space-between; gap:10px; padding:14px 30px; border-top:1px solid var(--line); font-size:10px; color:var(--muted); line-height:1.7; }
.session-controls { display:flex; align-items:center; gap:8px; }
.session-controls select { flex:1; min-width:0; }
.filter-toggle { display:none; flex-shrink:0; border:1px solid var(--line); border-radius:6px; background:#f6f5f2; color:var(--ink); padding:0 10px; font-size:12px; }
.filter-toggle:hover { background:#eae7df; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:900px) {
.brand-inner { padding:0 24px; }.workspace { padding:30px 24px; }.main-layout { grid-template-columns:260px minmax(0,1fr); gap:16px; }.filter-section,.session-section { padding:22px 18px; }.chat-header,.chat-messages { padding:22px; }.chat-footer,.session-detail { padding-left:22px; padding-right:22px; }.message-bubble { max-width:95%; }.brand-label { letter-spacing:1px; }
}
@media(max-width:680px) {
.brand-inner { min-height:72px; padding:0 20px; gap:16px; }.brand-logo { width:120px; height:63px; }.brand-label,.brand-divider { display:none; }.header-tag { font-size:10px; letter-spacing:1px; }.workspace { padding:26px 16px max(24px,env(safe-area-inset-bottom)); }.page-heading { margin-bottom:24px; align-items:flex-start; gap:12px; }.page-description { font-size:12px; max-width:230px; }.timezone { font-size:10px; margin-top:5px; }.timezone span { display:block; margin:8px 0 0; text-align:center; font-size:9px; }h1 { font-size:23px; letter-spacing:0; }.main-layout { grid-template-columns:minmax(0,1fr); gap:20px; }.filter-section,.session-section { padding:20px; }.date-fields { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:20px; }input,select { font-size:16px; padding:10px 8px; }.quick-dates { margin-bottom:14px; }.session-section .field-label { margin-top:16px; }.sidebar-note { padding:14px 20px; }.conversation { height:75dvh; min-height:520px; max-height:none; }.chat-header { padding:20px; }.chat-messages { padding:22px 16px; }.chat-placeholder { padding:32px 20px; }.chat-placeholder .eyebrow { font-size:8px; letter-spacing:1px; }.chat-placeholder h3 { font-size:21px; }.message-bubble { max-width:92%; padding:12px 15px; }.chat-footer { padding:12px 16px; font-size:9px; }.session-detail { padding:12px 16px; }.empty-steps { gap:12px; }.loading { padding-left:20px; }
}
@media(max-width:680px) {
    .session-section { padding:12px; }
    .session-section .section-heading, .session-section .section-description { display:none; }
    .session-section .field-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .workspace[data-has-results="true"] .filter-toggle { display:block; }
    .workspace[data-has-results="true"] .page-heading,
    .workspace[data-has-results="true"] .sidebar-note { display:none; }
    .workspace[data-filters-collapsed="true"] .filter-section { display:none; }
    .workspace[data-filters-collapsed="true"] .session-section { border-top:0; }
    .workspace[data-has-results="true"] { padding-top:16px; }
    .workspace[data-has-results="true"] .main-layout { gap:12px; }
    .workspace[data-has-results="true"] .chat-header { padding:14px 16px; }
    .workspace[data-has-results="true"] .chat-header .eyebrow { display:none; }
    .workspace[data-has-results="true"] .chat-header h2 { margin:0; }
    .workspace[data-has-results="true"] .conversation { min-height:360px; height:calc(100dvh - 202px); }
    .workspace[data-has-results="true"] .loading { padding:0 12px 12px; }
}
@media(max-width:380px) {
    .date-fields { grid-template-columns:minmax(0,1fr); }
    .page-heading { flex-direction:column; gap:10px; }
    .timezone span { display:inline-block; margin:0 0 0 8px; }
    .page-description { max-width:none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }