.chat-widget-button {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    width: 66px;
    height: 66px;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    /* 允许角色头肩和名牌溢出圆球范围 */
    overflow: visible;
    background: transparent;
    border: none;
    transition: transform 0.2s ease;
}

/* 整个悬浮球轻微上下漂浮 */
.chat-widget-button-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: chat-widget-float 8.5s ease-in-out infinite;
}

/* 炉膛质感的深色玻璃球体，内嵌红色机器人 */
.chat-widget-orb {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 190, 150, 0.18) 0%, transparent 30%),
        radial-gradient(circle at 34% 26%, #4A2422 0%, #2A1210 55%, #180A09 100%);
    box-shadow:
        0 12px 30px rgba(120, 20, 20, 0.45),
        inset 0 2px 8px rgba(255, 150, 90, 0.28),
        inset 0 -10px 20px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(255, 90, 50, 0.25);      /* 边缘热光环 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* 内嵌机器人形象：放大并上移，让头部“探出”球体上沿，形成半身跃出的 3D 效果。
   底部用 mask 渐隐，让身体柔和沉入球中。头部极轻微左右摇摆(幅度小，避免眩晕)。 */
.chat-widget-robot {
    position: absolute;
    left: 50%;
    bottom: 11px;
    width: 104%;
    height: 104%;
    display: block;
    overflow: visible;
    /* 底部渐隐：让沉入球中的身体柔和淡出 */
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 88%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 88%);
    /* 探出球外的部分加投影，强化“跃出”的立体层次 */
    filter: drop-shadow(0 3px 4px rgba(120, 15, 10, 0.55));
    transform: translate(-50%, 0);
    transform-origin: 50% 78%;
    animation: chat-widget-robot-sway 7.5s ease-in-out infinite;
}

/* 若替换为真实 GIF/动图时使用 */
.chat-widget-avatar-gif {
    width: 82%;
    height: 82%;
    object-fit: contain;
    display: block;
}

/* 热感光晕，橙红呼吸式脉动；范围收敛、颜色更深 */
.chat-widget-orb-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 126%;
    height: 126%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226, 42, 46, 0.8) 0%, rgba(180, 25, 20, 0.5) 46%, transparent 72%);
    filter: blur(3px);
    animation: chat-widget-glow 6s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* 眨眼 */
.chat-widget-eyes {
    transform-box: fill-box;
    transform-origin: center;
    animation: chat-widget-blink 7s ease-in-out infinite;
}

/* 天线顶端小球：明显的一闪一闪(带轻微脉冲放大) */
.chat-widget-ember {
    transform-box: fill-box;
    transform-origin: center;
    animation: chat-widget-ember 1.6s ease-in-out infinite;
}

/* —— 以下动效仅作用于悬浮球主形象(.chat-widget-robot)，
      不影响 header 徽标与消息头像的静态 mini 版 —— */


/* 嘴部三点依次点亮，像信号流动 */
.chat-widget-robot .chat-widget-mouth-dot {
    animation: chat-widget-mouth-blip 2.4s ease-in-out infinite;
}
.chat-widget-robot .chat-widget-mouth-dot:nth-child(2) { animation-delay: 0.25s; }
.chat-widget-robot .chat-widget-mouth-dot:nth-child(3) { animation-delay: 0.5s; }

/* 额头电路节点依次闪光(暗→亮橙)，像电流流过焊盘 */
.chat-widget-robot .chat-widget-circuit-node circle {
    animation: chat-widget-node-flash 2.8s ease-in-out infinite;
}
.chat-widget-robot .chat-widget-circuit-node circle:nth-child(2) { animation-delay: 0.3s; }
.chat-widget-robot .chat-widget-circuit-node circle:nth-child(3) { animation-delay: 0.6s; }
.chat-widget-robot .chat-widget-circuit-node circle:nth-child(4) { animation-delay: 0.9s; }
.chat-widget-robot .chat-widget-circuit-node circle:nth-child(5) { animation-delay: 1.2s; }
.chat-widget-robot .chat-widget-circuit-node circle:nth-child(6) { animation-delay: 1.5s; }
.chat-widget-robot .chat-widget-circuit-node circle:nth-child(7) { animation-delay: 1.8s; }
.chat-widget-robot .chat-widget-circuit-node circle:nth-child(8) { animation-delay: 2.1s; }
.chat-widget-robot .chat-widget-circuit-node circle:nth-child(9) { animation-delay: 2.4s; }

/* 深色走线整体轻微明灭，像通电微光 */
.chat-widget-robot .chat-widget-circuit {
    animation: chat-widget-circuit-glow 3.2s ease-in-out infinite;
}

/* 球体内部下沿的名字胶囊“AI 灵焱” */
.chat-widget-nametag {
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    color: #fff;
    letter-spacing: 0.3px;
    border-radius: 999px;
    background: linear-gradient(135deg, #E22A2E 0%, #9E1B1D 100%);
    border: 1px solid rgba(255, 220, 190, 0.55);
    box-shadow: 0 2px 6px rgba(120, 15, 15, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.chat-widget-nametag-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #FFE9C7;
    box-shadow: 0 0 5px #FF7A2E;
}

.chat-widget-button:hover {
    transform: translateY(-3px) scale(1.04);
}

.chat-widget-button:active {
    transform: translateY(0) scale(0.96);
}

/* 保留旧类名，兼容聊天窗口头部里仍在用的 <img> logo */
.chat-widget-logo-image {
    width: 82%;
    height: 82%;
    display: block;
    object-fit: contain;
}

@keyframes chat-widget-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* glow 元素已用 transform 居中定位，动画只驱动 opacity，避免位置跳动 */
@keyframes chat-widget-glow {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.75; }
}

@keyframes chat-widget-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    96% { transform: scaleY(0.08); }
}

@keyframes chat-widget-ember {
    0%, 100% { opacity: 0.35; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* 嘴部指示灯一闪(默认暗、短促点亮) */
@keyframes chat-widget-mouth-blip {
    0%, 70%, 100% { opacity: 0.35; }
    35% { opacity: 1; }
}

/* 电路焊盘闪光：暗红→亮橙 */
@keyframes chat-widget-node-flash {
    0%, 72%, 100% { fill: #3A0F0C; }
    36% { fill: #FFD08A; }
}

/* 深色走线整体明灭 */
@keyframes chat-widget-circuit-glow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.95; }
}

/* 头部极轻微左右摇摆；保留水平居中(translateX -50%) */
@keyframes chat-widget-robot-sway {
    0%, 100% { transform: translate(-50%, 0) rotate(-1.6deg); }
    50% { transform: translate(-50%, 0) rotate(1.6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-widget-button-inner,
    .chat-widget-orb-glow,
    .chat-widget-eyes,
    .chat-widget-ember,
    .chat-widget-robot,
    .chat-widget-robot .chat-widget-mouth-dot,
    .chat-widget-robot .chat-widget-circuit-node circle {
        animation: none !important;
    }
    /* 关闭摇摆动画后，仍要保留机器人水平居中定位 */
    .chat-widget-robot {
        transform: translate(-50%, 0) !important;
    }
}

.chat-widget-window {
    position: fixed;
    right: 22px;
    bottom: 96px;
    z-index: 9998;
    width: min(480px, calc(100vw - 36px));
    height: min(680px, calc(100vh - 122px));
    min-height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(210, 47, 31, 0.16);
    border-radius: 10px;
    background: #fff8f4;
    box-shadow: 0 24px 72px rgba(68, 12, 8, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.98);
    transform-origin: bottom right;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.chat-widget-window-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.chat-widget-window-fullscreen {
    top: 16px !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    width: calc(100vw - 32px) !important;
    height: calc(100vh - 32px) !important;
    max-width: none;
    min-height: 0;
    border-radius: 10px;
}

.chat-widget-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 12px 14px 12px 16px;
    color: #fff;
    background: linear-gradient(135deg, #E22A2E 0%, #FF7A2E 100%);
}

.chat-widget-header-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.chat-widget-header-logo {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    /* 白色圆底衬托品牌 logo */
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.chat-widget-header-logo .chat-widget-logo-image {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.chat-widget-title-text {
    min-width: 0;
}

.chat-widget-header h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
}

.chat-widget-subtitle {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-widget-header-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-widget-close,
.chat-widget-fullscreen {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: transparent;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}

.chat-widget-close {
    font-size: 25px;
    line-height: 1;
}

.chat-widget-close:hover,
.chat-widget-fullscreen:hover {
    background: rgba(255, 255, 255, 0.18);
}

.chat-widget-close:active,
.chat-widget-fullscreen:active {
    transform: scale(0.95);
}

.chat-widget-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 16px;
    background:
        linear-gradient(180deg, rgba(255, 240, 231, 0.94) 0%, rgba(255, 250, 246, 0.98) 100%);
}

.chat-widget-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-widget-messages::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(210, 90, 60, 0.28);
}

.chat-widget-message {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
}

.chat-widget-message-user {
    justify-content: flex-end;
}

.chat-widget-message-bot {
    justify-content: flex-start;
}

.chat-widget-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    /* 头像图片铺满圆形容器 */
    background-size: cover;
}

.chat-widget-avatar-user {
    order: 2;
    background-image: url("avatar-user.png");
}

.chat-widget-avatar-bot {
    background-image: url("avatar-bot.png");
    box-shadow: 0 8px 18px rgba(173, 35, 28, 0.28), inset 0 0 0 1px rgba(255, 90, 50, 0.25);
}

.chat-widget-message-content {
    max-width: min(78%, 360px);
    min-width: 0;
    padding: 10px 13px;
    border-radius: 13px;
    font-size: 14px;
    line-height: 1.65;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.chat-widget-message-user .chat-widget-message-content {
    order: 1;
    color: #33201c;
    background: #ffffff;
    border: 1px solid rgba(130, 40, 20, 0.08);
    border-top-right-radius: 4px;
    box-shadow: 0 8px 22px rgba(95, 40, 33, 0.08);
}

.chat-widget-message-bot .chat-widget-message-content {
    color: #33201c;
    background: #ffe9dd;
    border: 1px solid rgba(255, 122, 46, 0.22);
    border-top-left-radius: 4px;
}

.chat-widget-input {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid rgba(210, 90, 60, 0.12);
    background: rgba(255, 255, 255, 0.96);
}

.chat-widget-input textarea {
    flex: 1 1 auto;
    height: 44px;
    max-height: 116px;
    min-width: 0;
    padding: 10px 13px;
    border: 1px solid rgba(200, 90, 60, 0.2);
    border-radius: 10px;
    outline: none;
    resize: none;
    /* 固定单行高、无自动增高：空/单行时不产生可滚内容，避免移动端初始就能上下滑动 */
    overflow-y: hidden;
    color: #33201c;
    background: #fff;
    font: inherit;
    line-height: 1.4;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.chat-widget-input textarea:focus {
    border-color: #f2542d;
    box-shadow: 0 0 0 3px rgba(242, 84, 45, 0.14);
}

.chat-widget-input textarea:disabled {
    color: #8a97a8;
    background: #f4f7fa;
    cursor: not-allowed;
}

.chat-widget-send {
    flex: 0 0 auto;
    min-width: 78px;
    height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #FF7A2E 0%, #E22A2E 100%);
    box-shadow: 0 10px 22px rgba(210, 47, 31, 0.28);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.chat-widget-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(210, 47, 31, 0.36);
}

.chat-widget-send:active {
    transform: translateY(0);
}

.chat-widget-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.chat-widget-loading {
    width: fit-content;
    max-width: 78%;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px 44px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 122, 46, 0.22);
    border-radius: 13px;
    border-top-left-radius: 4px;
    color: #7a4a3a;
    background: #ffe9dd;
    font-size: 13px;
}

.chat-widget-message-loading .chat-widget-loading {
    margin: 0;
}

.chat-widget-loading-dots {
    display: flex;
    gap: 4px;
}

.chat-widget-loading-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f2542d;
    animation: chat-widget-loading 1.1s infinite ease-in-out;
}

.chat-widget-loading-dot:nth-child(2) {
    animation-delay: 0.16s;
}

.chat-widget-loading-dot:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes chat-widget-loading {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.45;
    }
    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.chat-widget-message-content p {
    margin: 0 0 8px;
}

.chat-widget-message-content p:last-child,
.chat-widget-message-content ul:last-child,
.chat-widget-message-content ol:last-child,
.chat-widget-message-content pre:last-child,
.chat-widget-message-content table:last-child {
    margin-bottom: 0;
}

.chat-widget-message-content h1,
.chat-widget-message-content h2,
.chat-widget-message-content h3,
.chat-widget-message-content h4 {
    margin: 12px 0 8px;
    color: #0e335f;
    line-height: 1.35;
    letter-spacing: 0;
}

.chat-widget-message-content h1 {
    font-size: 18px;
}

.chat-widget-message-content h2 {
    font-size: 17px;
}

.chat-widget-message-content h3,
.chat-widget-message-content h4 {
    font-size: 15px;
}

.chat-widget-message-content ul,
.chat-widget-message-content ol {
    margin: 6px 0 10px 20px;
    padding: 0;
}

.chat-widget-message-content li {
    margin: 3px 0;
}

.chat-widget-message-content strong {
    color: #9E1B1D;
    font-weight: 700;
}

.chat-widget-message-content code {
    padding: 2px 5px;
    border-radius: 5px;
    color: #b3341f;
    background: rgba(226, 42, 46, 0.1);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

.chat-widget-message-content pre {
    max-width: 100%;
    margin: 8px 0 10px;
    padding: 10px 12px;
    overflow-x: auto;
    border-radius: 8px;
    color: #e8f2ff;
    background: #10233d;
    font-size: 12px;
    line-height: 1.55;
}

.chat-widget-message-content pre code {
    padding: 0;
    color: inherit;
    background: transparent;
    font-size: inherit;
}

.chat-widget-message-content blockquote {
    margin: 8px 0;
    padding: 7px 10px;
    border-left: 3px solid #f2542d;
    border-radius: 0 7px 7px 0;
    background: rgba(242, 84, 45, 0.08);
    color: #6b4a3f;
}

.chat-widget-message-content table {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 8px 0 10px;
    overflow-x: auto;
    border-collapse: collapse;
    border-radius: 8px;
    background: #fff;
}

.chat-widget-message-content th,
.chat-widget-message-content td {
    padding: 7px 9px;
    border: 1px solid rgba(145, 60, 40, 0.16);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.chat-widget-message-content th {
    color: #7a1416;
    background: #ffeee4;
    font-weight: 700;
}

.chat-widget-think-container {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid rgba(145, 60, 40, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.chat-widget-think-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    color: #6a3a30;
    background: rgba(242, 84, 45, 0.08);
    cursor: pointer;
    user-select: none;
    font-size: 13px;
}

.chat-widget-think-arrow {
    display: inline-block;
    transition: transform 0.16s ease;
}

.chat-widget-think-arrow.expanded {
    transform: rotate(90deg);
}

.chat-widget-think-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 10px;
    color: #6b5049;
    transition: max-height 0.2s ease, padding 0.2s ease;
}

.chat-widget-think-content.expanded {
    max-height: 420px;
    padding: 10px;
    overflow-y: auto;
}

@media (max-width: 640px) {
    .chat-widget-button {
        right: 16px;
        bottom: 16px;
        width: 58px;
        height: 58px;
    }

    .chat-widget-window {
        right: 10px !important;
        left: 10px !important;
        bottom: 84px !important;
        top: auto !important;
        width: calc(100vw - 20px) !important;
        height: min(640px, calc(100vh - 104px));
        min-height: 420px;
    }

    .chat-widget-window-fullscreen {
        top: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        height: calc(100vh - 16px) !important;
    }

    .chat-widget-message-content {
        max-width: calc(100% - 46px);
    }

    /* 手机端输入框整体往上一点，底部多留白(避开底部手势条/圆角) */
    .chat-widget-input {
        padding-bottom: 22px;
    }

    /* 手机端实际增高由输入内容驱动(见 autoGrowTextarea)，单行时不出滚动条 */
    .chat-widget-input textarea {
        max-height: 96px;
    }

    .chat-widget-send {
        min-width: 60px;
        padding: 0 12px;
    }
}