/* AI 实验室共享聊天样式 (v3.0.1) — 桌面卡片版 + .aic-mobile 手机版 */
.aic-root {
    display: flex; flex-direction: column;
    height: 640px; max-height: 78vh;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px; overflow: hidden;
    background: rgba(16, 16, 22, 0.72);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

/* ── header ── */
.aic-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
}
.aic-header-info { display: flex; align-items: center; gap: 12px; }
.aic-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.25), rgba(175, 82, 222, 0.25));
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.aic-name { font-size: 0.95rem; font-weight: 600; color: #fff; }
.aic-status { font-size: 0.72rem; color: #4ade80; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.aic-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: aic-pulse 2s infinite; }
@keyframes aic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.aic-clear {
    font-size: 0.75rem; color: #9ca3af; background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px;
    padding: 5px 10px; cursor: pointer; transition: all 0.2s;
}
.aic-clear:hover { color: #fff; border-color: rgba(0, 122, 255, 0.6); }

/* ── messages ── */
.aic-messages { flex: 1; overflow-y: auto; padding: 18px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
.aic-messages::-webkit-scrollbar { width: 5px; }
.aic-messages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
.aic-msg { display: flex; flex-direction: column; margin-bottom: 14px; max-width: 82%; }
.aic-mine { align-self: flex-end; align-items: flex-end; }
.aic-theirs { align-self: flex-start; align-items: flex-start; }
.aic-bubble {
    padding: 10px 14px; border-radius: 14px;
    font-size: 0.9rem; line-height: 1.6; color: #f3f4f6;
    word-break: break-word; white-space: normal;
}
.aic-mine .aic-bubble { background: linear-gradient(135deg, #007AFF, #0055d4); border-bottom-right-radius: 4px; }
.aic-theirs .aic-bubble { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); border-bottom-left-radius: 4px; }
.aic-time { font-size: 0.65rem; color: #6b7280; margin-top: 4px; padding: 0 4px; }
.aic-sys { align-self: center; font-size: 0.75rem; color: #9ca3af; background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 6px 12px; margin: 6px auto 14px; max-width: 90%; text-align: center; }
.aic-bubble code { background: rgba(0, 0, 0, 0.4); padding: 1px 5px; border-radius: 4px; font-size: 0.82em; }

/* 流式光标 */
.aic-streaming::after { content: '▊'; color: #007AFF; animation: aic-pulse 0.8s infinite; }

/* 思考中三点 */
.aic-thinking .aic-bubble { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.aic-thinking .aic-bubble i { width: 7px; height: 7px; border-radius: 50%; background: #6b7280; animation: aic-bounce 1.2s infinite; }
.aic-thinking .aic-bubble i:nth-child(2) { animation-delay: 0.15s; }
.aic-thinking .aic-bubble i:nth-child(3) { animation-delay: 0.3s; }
@keyframes aic-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* ── 快捷问题 ── */
.aic-quick { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.aic-chip {
    font-size: 0.75rem; color: #9ca3af; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px;
    padding: 6px 12px; cursor: pointer; transition: all 0.2s;
}
.aic-chip:hover { color: #fff; border-color: rgba(0, 122, 255, 0.6); background: rgba(0, 122, 255, 0.12); }

/* ── 输入区 ── */
.aic-inputbar {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
}
.aic-inputbar textarea {
    flex: 1; resize: none; border: none; outline: none;
    background: rgba(255, 255, 255, 0.06); color: #fff;
    border-radius: 10px; padding: 10px 14px;
    font-size: 0.9rem; line-height: 1.5; max-height: 120px;
    font-family: inherit;
}
.aic-inputbar textarea:focus { background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.25); }
.aic-inputbar textarea::placeholder { color: #6b7280; }
#sendBtn {
    border: none; border-radius: 10px; padding: 10px 18px;
    background: linear-gradient(135deg, #007AFF, #0055d4); color: #fff;
    font-size: 0.85rem; font-weight: 500; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
}
#sendBtn:hover:not(:disabled) { box-shadow: 0 0 16px rgba(0, 122, 255, 0.5); transform: translateY(-1px); }
#sendBtn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 手机版变体 (laojin 客服场景): 顶天立地 + 大触控 ── */
.aic-mobile { height: 100%; max-height: none; border: none; border-radius: 0; background: #0d0d12; }
.aic-mobile .aic-header { padding: 12px 14px; position: sticky; top: 0; z-index: 2; }
.aic-mobile .aic-messages { padding: 16px 12px; }
.aic-mobile .aic-msg { max-width: 88%; }
.aic-mobile .aic-bubble { font-size: 0.95rem; padding: 11px 15px; }
.aic-mobile .aic-inputbar { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.aic-mobile .aic-inputbar textarea { font-size: 0.95rem; }
.aic-mobile #sendBtn { padding: 12px 20px; font-size: 0.9rem; }

/* ── deep-chat 宿主 (适配层 js/deep-chat-adapter.js) ──
   组件是自定义元素, 高度必须由宿主撑开; flex:1 + min-height:0 让它在 .aic-root 里自适应。 */
.aic-dc-host { flex: 1; min-height: 0; display: flex; }
.aic-dc-host deep-chat { flex: 1; min-height: 0; }
/* 外壳固定高度, 只有对话区伸缩 —— 否则 deep-chat 撑高时 header/chips 会被 flex 压扁 */
.aic-root > .aic-header,
.aic-root > .aic-quick { flex-shrink: 0; }