/* ============================================================
   AiMark 智能客服 · 悬浮窗样式
   设计语言：延续工作台的蓝紫渐变（#4f6ef7 → #7c5cff）+ 深色头部
   所有类名以 cs- 前缀隔离，避免与 app.css 冲突
   ============================================================ */

:root {
    --cs-primary: #4f6ef7;
    --cs-primary-2: #7c5cff;
    --cs-ink: #0f172a;
    --cs-text: #1f2937;
    --cs-muted: #6b7280;
    --cs-line: #eceff6;
    --cs-surface: #ffffff;
    --cs-canvas: #f7f8fb;
    --cs-radius: 22px;
}

/* ---------- 悬浮球 ---------- */
.cs-widget {
    --cs-gap: 24px;
    position: fixed;
    right: var(--cs-gap);
    bottom: var(--cs-gap);
    z-index: 9000;
    font-family: 'Segoe UI', 'Microsoft YaHei', -apple-system, sans-serif;
}

.cs-launcher {
    position: relative;
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(140deg, #5b7cfa 0%, #7c5cff 62%, #9d5cf6 100%);
    box-shadow:
        0 14px 30px -10px rgba(91, 124, 250, .72),
        0 4px 12px -4px rgba(15, 23, 42, .18),
        inset 0 1px 0 rgba(255, 255, 255, .32);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease;
}

.cs-launcher:hover {
    transform: translateY(-3px) scale(1.045);
    box-shadow:
        0 20px 40px -12px rgba(91, 124, 250, .82),
        0 6px 16px -6px rgba(15, 23, 42, .22),
        inset 0 1px 0 rgba(255, 255, 255, .36);
}

.cs-launcher:active { transform: translateY(-1px) scale(.98); }

.cs-launcher-icon { width: 30px; height: 30px; display: block; }

/* 呼吸光环：两层错峰，避免机械感 */
.cs-launcher-halo,
.cs-launcher-halo::after {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(124, 92, 255, .5);
    content: '';
    pointer-events: none;
    animation: cs-halo 3.4s cubic-bezier(.2, .6, .3, 1) infinite;
}

.cs-launcher-halo::after { animation-delay: 1.7s; border-color: rgba(91, 124, 250, .38); }

@keyframes cs-halo {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.65); opacity: 0; }
    100% { transform: scale(1.65); opacity: 0; }
}

/* 未读小红点 */
.cs-launcher-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 4px 10px -2px rgba(239, 68, 68, .7);
    transform: scale(0);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.cs-launcher-badge.show { transform: scale(1); }

.cs-launcher::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .16);
}

.cs-widget.is-open .cs-launcher { transform: scale(.9); opacity: .94; }
.cs-widget.is-open .cs-launcher-halo { display: none; }

/* ---------- 面板 ---------- */
.cs-panel {
    position: absolute;
    right: 0;
    bottom: 96px;
    width: 404px;
    height: min(660px, calc(100vh - 132px));
    display: flex;
    flex-direction: column;
    background: var(--cs-surface);
    border-radius: var(--cs-radius);
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow:
        0 32px 70px -24px rgba(15, 23, 42, .34),
        0 12px 28px -16px rgba(15, 23, 42, .18),
        0 0 0 1px rgba(255, 255, 255, .6) inset;
    overflow: hidden;
    transform-origin: bottom right;
    transform: translateY(14px) scale(.94);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        transform .34s cubic-bezier(.16, 1, .3, 1),
        opacity .22s ease,
        visibility .34s;
}

.cs-widget.is-open .cs-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* ---------- 头部 ---------- */
.cs-header {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 15px;
    color: #fff;
    background:
        radial-gradient(420px 160px at 88% -30%, rgba(124, 92, 255, .55), transparent 70%),
        radial-gradient(300px 140px at 6% 120%, rgba(79, 110, 247, .38), transparent 70%),
        linear-gradient(135deg, #171b2b 0%, #232a42 60%, #2a2f4a 100%);
}

.cs-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, #000, transparent 78%);
    pointer-events: none;
}

.cs-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(140deg, #5b7cfa, #8b5cf6);
    box-shadow: 0 6px 16px -6px rgba(91, 124, 250, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
    color: #fff;
    z-index: 1;
}

.cs-avatar svg { width: 22px; height: 22px; }

.cs-head-meta { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }

.cs-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
}

.cs-title-tag {
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #c7d2fe;
    background: rgba(124, 92, 255, .28);
    border: 1px solid rgba(199, 210, 254, .35);
}

.cs-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 11.5px;
    color: #a9b2c9;
    line-height: 1;
}

.cs-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
    animation: cs-blink 2.4s ease-in-out infinite;
}

@keyframes cs-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

.cs-head-actions { display: flex; gap: 4px; position: relative; z-index: 1; }

.cs-icon-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s, color .16s;
}

.cs-icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- 能力提示条 ---------- */
.cs-toolbar {
    flex: 0 0 auto;
    min-width: 0;              /* 关键：nowrap 文本不得把 flex 容器撑宽 */
    padding: 8px 16px;
    font-size: 11.5px;
    color: var(--cs-muted);
    background: linear-gradient(180deg, #fbfcff, #f7f9fe);
    border-bottom: 1px solid var(--cs-line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 消息区 ---------- */
.cs-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 16px 8px;
    background:
        radial-gradient(600px 300px at 100% 0%, #eef2ff 0%, transparent 58%),
        radial-gradient(500px 280px at -10% 100%, #f5f3ff 0%, transparent 60%),
        var(--cs-canvas);
    scroll-behavior: smooth;
}

.cs-body::-webkit-scrollbar { width: 6px; }
.cs-body::-webkit-scrollbar-thumb { background: #d7dcea; border-radius: 3px; }
.cs-body::-webkit-scrollbar-thumb:hover { background: #c3cada; }

.cs-messages { display: flex; flex-direction: column; gap: 14px; }

/* ---------- 消息气泡 ---------- */
.cs-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    animation: cs-msg-in .32s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes cs-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cs-msg-user { justify-content: flex-end; }

.cs-msg-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(140deg, #5b7cfa, #8b5cf6);
    box-shadow: 0 4px 10px -4px rgba(91, 124, 250, .8);
}

.cs-msg-avatar svg { width: 16px; height: 16px; }

.cs-bubble-wrap { max-width: 78%; min-width: 0; }

.cs-bubble {
    padding: 10px 13px;
    border-radius: 4px 15px 15px 15px;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--cs-text);
    background: #fff;
    border: 1px solid var(--cs-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 18px -12px rgba(16, 24, 40, .16);
    white-space: pre-wrap;
    word-break: break-word;
}

.cs-msg-user .cs-bubble {
    border-radius: 15px 4px 15px 15px;
    color: #fff;
    background: linear-gradient(135deg, #4f6ef7, #6d5cf6);
    border-color: transparent;
    box-shadow: 0 8px 20px -10px rgba(79, 110, 247, .8);
}

/* 打字指示 */
.cs-typing .cs-bubble { display: flex; gap: 4px; padding: 13px; }

.cs-typing .cs-bubble span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b7c0d6;
    animation: cs-bounce 1.2s infinite ease-in-out;
}

.cs-typing .cs-bubble span:nth-child(2) { animation-delay: .16s; }
.cs-typing .cs-bubble span:nth-child(3) { animation-delay: .32s; }

@keyframes cs-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .55; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ---------- 消息附加信息 ---------- */
.cs-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-left: 2px;
    font-size: 11px;
    color: #94a3b8;
}

.cs-meta-btn {
    border: 0;
    background: transparent;
    padding: 0;
    color: #7c8aa5;
    font-size: 11px;
    cursor: pointer;
    border-bottom: 1px dashed #cbd5e1;
    line-height: 1.4;
}

.cs-meta-btn:hover { color: var(--cs-primary); border-color: var(--cs-primary); }

.cs-sources {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(79, 110, 247, .06);
    border: 1px solid rgba(79, 110, 247, .12);
    font-size: 11.5px;
    color: #475569;
    line-height: 1.6;
}

.cs-sources b { color: #3730a3; font-weight: 600; }

.cs-trace {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #0f172a;
    color: #cbd5e1;
    font-family: 'Cascadia Code', Consolas, 'Microsoft YaHei', monospace;
    font-size: 10.5px;
    line-height: 1.75;
    max-height: 168px;
    overflow: auto;
}

.cs-trace-line { display: flex; gap: 6px; }
.cs-trace-line .ok { color: #4ade80; }
.cs-trace-line .bad { color: #fbbf24; }
.cs-trace-step { color: #93c5fd; flex: 0 0 auto; }

.cs-notice {
    margin-top: 6px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 11.5px;
    line-height: 1.55;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

/* 转人工卡片 */
.cs-handoff {
    margin-top: 8px;
    padding: 11px 13px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border: 1px solid #dbe3ff;
}

.cs-handoff-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #3730a3;
}

.cs-handoff-sub { margin-top: 3px; font-size: 11.5px; color: #64748b; line-height: 1.5; }

.cs-handoff-code {
    font-family: 'Cascadia Code', Consolas, monospace;
    font-size: 11.5px;
    color: #4338ca;
    background: #fff;
    border: 1px solid #dbe3ff;
    border-radius: 6px;
    padding: 1px 6px;
}

/* 反馈 */
.cs-feedback { display: flex; gap: 6px; margin-top: 7px; }

.cs-fb {
    height: 24px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--cs-line);
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 11.5px;
    cursor: pointer;
    transition: all .16s;
}

.cs-fb:hover { border-color: #c7d2fe; color: var(--cs-primary); background: #f8faff; }
.cs-fb.is-on { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }

/* ---------- 快捷问题 ---------- */
.cs-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.cs-chip {
    padding: 9px 11px;
    text-align: left;
    border: 1px solid #e4e9f3;
    border-radius: 11px;
    background: rgba(255, 255, 255, .92);
    color: #334155;
    font-size: 12px;
    line-height: 1.45;
    cursor: pointer;
    transition: all .18s cubic-bezier(.16, 1, .3, 1);
}

.cs-chip:hover {
    border-color: #c7d2fe;
    background: #fff;
    color: var(--cs-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -12px rgba(79, 110, 247, .7);
}

.cs-chip-wide { grid-column: 1 / -1; }

.cs-quick-label {
    grid-column: 1 / -1;
    margin: 2px 0 -2px;
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: .03em;
}

/* ---------- 输入区 ---------- */
.cs-composer {
    flex: 0 0 auto;
    padding: 10px 14px 12px;
    background: #fff;
    border-top: 1px solid var(--cs-line);
}

.cs-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 6px 6px 6px 12px;
    border-radius: 14px;
    background: #f4f6fb;
    border: 1px solid transparent;
    transition: background .18s, border-color .18s, box-shadow .18s;
}

.cs-input-wrap:focus-within {
    background: #fff;
    border-color: #c7d2fe;
    box-shadow: 0 0 0 4px rgba(79, 110, 247, .1);
}

.cs-input {
    flex: 1 1 auto;
    min-height: 24px;
    max-height: 96px;
    padding: 4px 0;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    color: var(--cs-text);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.55;
}

.cs-input::placeholder { color: #9aa4b8; }

.cs-send {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #4f6ef7, #7c5cff);
    box-shadow: 0 6px 14px -6px rgba(79, 110, 247, .8);
    cursor: pointer;
    transition: transform .16s, opacity .16s, box-shadow .16s;
}

.cs-send:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(79, 110, 247, .9); }
.cs-send:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.cs-send svg { width: 16px; height: 16px; }

.cs-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding: 0 2px;
}

.cs-link {
    border: 0;
    background: transparent;
    padding: 0;
    color: #7c8aa5;
    font-size: 11.5px;
    cursor: pointer;
    transition: color .16s;
}

.cs-link:hover { color: var(--cs-primary); }

.cs-disclaimer { font-size: 10.5px; color: #aab3c5; letter-spacing: .01em; }

/* 真人客服接入后的消息 */
.cs-msg-human .cs-msg-avatar {
    background: linear-gradient(140deg, #10b981, #059669);
    box-shadow: 0 4px 10px -4px rgba(16, 185, 129, .85);
}

.cs-msg-human .cs-bubble {
    border-color: #cdf3e2;
    background: linear-gradient(180deg, #ffffff, #f7fffb);
}

.cs-human-tag {
    display: inline-block;
    margin: 0 0 4px 2px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
    .cs-widget { --cs-gap: 16px; }

    .cs-panel {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100%;
        border-radius: 0;
        border: 0;
    }

    .cs-bubble-wrap { max-width: 84%; }

    .cs-widget.is-open .cs-launcher { display: none; }
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .cs-launcher-halo,
    .cs-launcher-halo::after,
    .cs-dot { animation: none; }
    .cs-msg { animation: none; }
    .cs-panel { transition: opacity .15s; }
}