html, body { height: 100%; overflow: hidden; margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; position: fixed; width: 100%; height: 100%; }
#app { height: 100%; }
.safe-top { padding-top: env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)); }

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* Agent WiFi 信号图标 */
.agent-signal .sig-dot { fill: #07C160; }
.agent-signal .sig-stroke { stroke: #07C160; }
.agent-signal.offline .sig-dot { fill: #C0C0C0; }
.agent-signal.offline .sig-stroke { stroke: #C0C0C0; }
.agent-text { font-weight: 400; }
.agent-signal.offline ~ .agent-text { color: #C0C0C0; }

/* 视图 */
.view { position: absolute; inset: 0; display: none; flex-direction: column; }
.view.active { display: flex; }
.chat-slide { z-index: 40; transform: translateX(100%); transition: transform .25s cubic-bezier(.36,.66,.04,1); will-change: transform; }
.chat-slide.active { transform: translateX(0); }
.overscroll-contain { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Tab 栏 - 纯文字 */
.tab-item {
    flex: 1; display: flex; align-items: center; justify-content: center;
    position: relative; cursor: pointer;
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tab-label {
    font-size: 15px; font-weight: 400; color: #999;
    letter-spacing: .5px;
    transition: color .2s ease, transform .2s ease, opacity .2s ease;
    display: inline-block;
    position: relative;
}
.tab-item.active .tab-label {
    color: #07C160; font-weight: 500;
}
.tab-label::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 0; right: 0;
    height: 2px; border-radius: 1px;
    background: #07C160;
    transform: scaleX(0);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.tab-item.active .tab-label::after { transform: scaleX(1); }
.tab-item:active .tab-label {
    transform: scale(.88);
    opacity: .6;
}

/* 角标 */
.tab-badge {
    position: absolute; top: 5px; right: calc(50% - 28px);
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #FA5151; color: #fff;
    font-size: 10px; font-weight: 500; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease;
}
.tab-item:active .tab-badge { transform: scale(.88); }

/* 会话 Tab */
.conv-tab {
    font-size: 15px; color: #999; cursor: pointer;
    padding: 2px 0; position: relative;
    transition: color .2s;
    -webkit-tap-highlight-color: transparent;
}
.conv-tab.active { color: #333; font-weight: 500; }
.conv-tab::after {
    content: ''; position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 2px; border-radius: 1px;
    background: #07C160;
    transform: scaleX(0);
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.conv-tab.active::after { transform: scaleX(1); }

/* 气泡箭头 */
.bubble-l::before {
    content: ''; position: absolute; top: 12px; left: -5px;
    border: 5px solid transparent; border-right-color: #fff; border-left: 0;
}
.bubble-r::before {
    content: ''; position: absolute; top: 12px; right: -5px;
    border: 5px solid transparent; border-left-color: #95EC69; border-right: 0;
}

/* 返回箭头 */
#navLeft.back-arrow #agentStatus { display: none; }
#navLeft.back-arrow::after {
    content: ''; display: block; width: 10px; height: 10px;
    border-left: 2px solid #333; border-bottom: 2px solid #333;
    transform: rotate(45deg);
}

/* Toggle 开关 */
.sw-toggle {
    position: relative; width: 51px; height: 31px; border-radius: 31px;
    background: #E5E5EA; transition: background .2s; cursor: pointer; flex-shrink: 0;
}
.sw-toggle.on { background: #07C160; }
.sw-knob {
    position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
    border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.06);
    transition: transform .2s;
}
.sw-toggle.on .sw-knob { transform: translateX(20px); }

/* 弹出层 */
#mask.show { opacity: 1; pointer-events: auto; }
#sheet.show { transform: translateX(-50%) translateY(0); }
#toastBox.show { opacity: 1; }
.hidden { display: none !important; }