.aichat-page {
    --ai-accent: #2f8fd5;
    --ai-accent-hover: #2178b6;
    --ai-border: #dce6ee;
    --ai-surface: #fff;
    --ai-soft: #f5f8fb;
    --ai-text: #26323d;
    --ai-muted: #72808d;
    color: var(--ai-text);
}
.aichat-stage { padding-top:12px !important; }
.aichat-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.aichat-head h2 { margin:0 0 3px; font-size:19px; letter-spacing:0; }
.aichat-note { margin:0; color:var(--ai-muted); font-size:12px; line-height:1.5; }
.aichat-actions { display:flex; flex:0 0 auto; gap:8px; }
.aichat-icon-btn { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ai-border); border-radius:6px; background:var(--ai-surface); color:var(--ai-muted); cursor:pointer; }
.aichat-icon-btn:hover { color:var(--ai-accent); border-color:var(--ai-accent); }
.aichat-status { display:flex; align-items:center; gap:7px; margin-bottom:7px; color:var(--ai-muted); font-size:12px; }
.aichat-status-dot { width:8px; height:8px; border-radius:50%; background:#32b36b; }
.aichat-model { margin-left:auto; padding:2px 7px; border-radius:4px; background:var(--ai-soft); color:var(--ai-muted); }
.aichat-workspace { height:var(--aichat-shell-height, calc(100dvh - 255px)); min-height:280px; display:flex; gap:10px; position:relative; }
.aichat-sessions { width:210px; flex:0 0 210px; display:flex; flex-direction:column; min-height:0; border:1px solid var(--ai-border); border-radius:8px; background:var(--ai-surface); overflow:hidden; }
.sessions-hidden .aichat-sessions { display:none; }
.aichat-sessions-head { height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:space-between; padding:0 10px 0 13px; border-bottom:1px solid var(--ai-border); }
.aichat-sessions-head button { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:5px; color:var(--ai-muted); background:transparent; cursor:pointer; }
.aichat-sessions-head button:hover { color:var(--ai-accent); background:var(--ai-soft); }
.aichat-sessions-head svg { width:16px; height:16px; }
.aichat-session-list { min-height:0; overflow-y:auto; padding:6px; }
.aichat-session-item { display:flex; align-items:center; gap:3px; min-width:0; margin-bottom:3px; border-radius:5px; }
.aichat-session-item:hover,.aichat-session-item.is-active { background:var(--ai-soft); }
.aichat-session-item.is-active { box-shadow:inset 3px 0 0 var(--ai-accent); }
.aichat-session-open { flex:1 1 auto; min-width:0; height:38px; padding:0 6px 0 10px; border:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; color:var(--ai-text); background:transparent; cursor:pointer; }
.aichat-session-delete { width:30px; height:30px; flex:0 0 30px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:4px; color:var(--ai-muted); background:transparent; cursor:pointer; opacity:0; }
.aichat-session-item:hover .aichat-session-delete,.aichat-session-item.is-active .aichat-session-delete { opacity:1; }
.aichat-session-delete:hover { color:#c13f3f; background:rgba(193,63,63,.08); }
.aichat-session-delete svg { width:14px; height:14px; }
.aichat-shell { height:var(--aichat-shell-height, calc(100dvh - 255px)); min-height:280px; display:flex; flex-direction:column; border:1px solid var(--ai-border); border-radius:8px; background:var(--ai-surface); box-shadow:0 5px 18px rgba(31,52,72,.06); overflow:hidden; }
.aichat-workspace .aichat-shell { height:100%; flex:1 1 auto; min-width:0; }
.aichat-messages { flex:1 1 auto; height:auto; min-height:0; overflow-y:auto; padding:16px; background:var(--ai-soft); scroll-behavior:smooth; font-size:14px; }
.aichat-message { display:flex; margin:0 0 13px; }
.aichat-message.user { justify-content:flex-end; }
.aichat-message.is-pending .aichat-bubble { min-width:210px; min-height:64px; box-sizing:border-box; }
.aichat-message.is-pending .aichat-thinking { display:inline-flex; align-items:center; min-height:28px; white-space:nowrap; }
.aichat-bubble { position:relative; max-width:84%; border-radius:8px; padding:10px 34px 10px 13px; line-height:1.65; overflow-wrap:anywhere; }
.aichat-message.assistant .aichat-bubble { background:var(--ai-surface); border:1px solid var(--ai-border); }
.aichat-message.user .aichat-bubble { background:var(--ai-accent); color:#fff; white-space:pre-wrap; }
.aichat-role { font-size:12px; color:var(--ai-muted); margin-bottom:4px; }
.aichat-message.user .aichat-role { color:rgba(255,255,255,.78); }
.aichat-copy { position:absolute; top:7px; right:8px; width:20px; height:20px; margin:0; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:4px; background:transparent; color:var(--ai-muted); cursor:pointer; }
.aichat-copy:hover { background:var(--ai-soft); color:var(--ai-accent); }
.aichat-message.user .aichat-copy { color:rgba(255,255,255,.8); }
.aichat-message.user .aichat-copy:hover { color:#fff; background:rgba(255,255,255,.14); }
.aichat-copy svg { width:12px; height:12px; }
.aichat-copy.is-copied { color:#2aaa65; }
.aichat-markdown > :first-child { margin-top:0; }
.aichat-markdown > :last-child { margin-bottom:0; }
.aichat-code-block { width:100%; max-width:100%; margin:1em 0; overflow:hidden; border-radius:6px; background:#1e2630; color:#e8edf2; box-sizing:border-box; }
.aichat-code-toolbar { width:100%; min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 8px 7px 14px; overflow:visible; border-bottom:1px solid #34404c; background:#26313c; box-sizing:border-box; }
.aichat-code-language { flex:0 0 auto; color:#aebbc6; font-size:12px; font-weight:600; letter-spacing:0; }
.aichat-code-scroll { width:100%; max-width:100%; max-height:min(440px,48vh); overflow-x:auto; overflow-y:auto; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#657687 #26313c; box-sizing:border-box; }
.aichat-code-block.is-expanded .aichat-code-scroll { max-height:none; overflow-x:auto; overflow-y:visible; }
.aichat-code-scroll::-webkit-scrollbar { width:10px; height:10px; }
.aichat-code-scroll::-webkit-scrollbar-track { background:#26313c; }
.aichat-code-scroll::-webkit-scrollbar-thumb { border:2px solid #26313c; border-radius:5px; background:#657687; }
.aichat-code-scroll::-webkit-scrollbar-thumb:hover { background:#8192a2; }
.aichat-code-scroll::-webkit-scrollbar-corner { background:#26313c; }
.aichat-code-scroll pre { width:max-content; min-width:100%; margin:0; padding:14px; overflow:visible; border:0; border-radius:0; background:#1e2630; color:#e8edf2; box-sizing:border-box; }
.aichat-code-scroll code { white-space:pre; overflow-wrap:normal; word-break:normal; font-family:Consolas,Monaco,monospace; }
.aichat-markdown code { font-family:Consolas,Monaco,monospace; }
.aichat-markdown :not(pre) > code { padding:2px 5px; border-radius:4px; background:rgba(127,127,127,.13); }
.aichat-markdown table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.aichat-markdown th,.aichat-markdown td { border:1px solid var(--ai-border); padding:7px 9px; }
.aichat-thinking { color:var(--ai-muted); }
.aichat-thinking::after { content:'...'; display:inline-block; width:20px; margin-left:2px; vertical-align:bottom; animation:aichat-dots 1.2s ease-in-out infinite; }
@keyframes aichat-dots { 0%,100% { opacity:.25; } 50% { opacity:1; } }
.aichat-reasoning { margin:0 0 10px; padding:0; overflow:hidden; border:1px solid var(--ai-border); border-left:3px solid var(--ai-accent); border-radius:6px; color:var(--ai-muted); background:var(--ai-soft); }
.aichat-reasoning summary { display:flex; align-items:center; gap:6px; min-height:38px; padding:6px 10px; cursor:pointer; color:var(--ai-accent); font-size:13px; font-weight:600; list-style:none; box-sizing:border-box; }
.aichat-reasoning summary::-webkit-details-marker { display:none; }
.aichat-reasoning-arrow { display:inline-flex; align-items:center; justify-content:center; flex:0 0 24px; width:24px; height:24px; margin-left:auto; color:var(--ai-muted); transition:transform .18s ease,color .18s ease; transform:rotate(0deg); }
.aichat-reasoning-arrow svg { width:18px; height:18px; stroke-width:2; }
.aichat-reasoning summary:hover .aichat-reasoning-arrow { color:var(--ai-accent); }
.aichat-reasoning[open] .aichat-reasoning-arrow { transform:rotate(180deg); }
.aichat-reasoning-body { margin:0; padding:10px 12px; max-height:260px; overflow:auto; border-top:1px solid var(--ai-border); color:var(--ai-text); background:var(--ai-surface); white-space:pre-wrap; font-size:13px; font-weight:400; line-height:1.7; }
.aichat-capabilities { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:28px; }
.aichat-capability { height:30px; display:inline-flex; align-items:center; gap:5px; padding:0 10px; border:1px solid var(--ai-border); border-radius:15px; color:var(--ai-text); background:var(--ai-surface); font-size:13px; line-height:1; cursor:pointer; }
.aichat-capability svg { width:14px; height:14px; }
.aichat-capability .aichat-check { display:none; color:#238b55; font-weight:700; }
.aichat-capability.is-active { color:var(--ai-accent); border-color:var(--ai-accent); background:var(--ai-soft); }
.aichat-capability.is-active .aichat-check { display:inline; }
.aichat-model-select { height:30px; max-width:170px; padding:0 24px 0 9px; border:1px solid var(--ai-border); border-radius:15px; color:var(--ai-text); background:var(--ai-surface); font-size:12px; }
.aichat-compose { position:relative; z-index:2; flex:0 0 auto; padding:12px 14px 14px; border-top:1px solid var(--ai-border); background:var(--ai-surface); }
.aichat-composer-box { width:100%; padding:8px 9px 8px; border:1px solid var(--ai-border); border-radius:17px; background:var(--ai-surface); box-sizing:border-box; box-shadow:0 3px 12px rgba(31,52,72,.05); }
.aichat-composer-box:focus-within { border-color:var(--ai-accent); box-shadow:0 0 0 2px rgba(47,143,213,.1); }
.aichat-input { display:block; width:100%; min-width:0; max-height:120px; min-height:36px; resize:none; border:0; padding:3px 6px 6px; color:var(--ai-text); background:transparent; outline:none; line-height:1.5; box-sizing:border-box; font-size:14px; }
.aichat-compose-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.aichat-send { flex:0 0 auto; width:36px; min-width:36px; height:36px; padding:0; border:0; border-radius:50%; color:#fff; background:var(--ai-accent); font-size:22px; line-height:34px; cursor:pointer; }
.aichat-send:hover { background:var(--ai-accent-hover); }
.aichat-send.is-generating { width:auto; min-width:106px; padding:0 13px; border-radius:18px; background:#d9534f; font-size:13px; font-weight:600; line-height:36px; white-space:nowrap; }
.aichat-send.is-generating:hover { background:#c74743; }
.aichat-send:disabled { opacity:.55; cursor:not-allowed; }
.aichat-error { margin:10px 14px 0; color:#c13f3f; font-size:13px; }
.aichat-error:empty { display:none; }
.aichat-code-actions { flex:0 1 auto; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; overflow:visible; }
.aichat-code-action { min-height:26px; margin:0; padding:3px 9px; border:1px solid rgba(255,255,255,.14); border-radius:4px; color:#d8e1e8; background:#34404c; font-size:12px; line-height:18px; cursor:pointer; }
.aichat-code-action:hover { color:#fff; background:#465666; }
.aichat-code-action.is-copied { color:#b8f0ce; border-color:rgba(105,214,148,.45); }
.aichat-code-preview { color:#d8efff; background:#245d86; }
.aichat-code-preview:hover { background:#2c709f; }
.aichat-preview-modal { position:fixed; z-index:100000; inset:0; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(16,25,34,.48); box-sizing:border-box; }
.aichat-preview-modal.is-open { display:flex; }
.aichat-preview-dialog { width:min(1120px,96vw); height:min(820px,90vh); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--ai-border,#d9e2e9); border-radius:7px; background:#fff; box-shadow:0 18px 55px rgba(0,0,0,.25); }
.aichat-preview-dialog > header { flex:0 0 44px; display:flex; align-items:center; justify-content:space-between; padding:0 10px 0 16px; border-bottom:1px solid #dfe6eb; color:#263746; background:#f7f9fb; box-sizing:border-box; }
.aichat-preview-dialog > header strong { font-size:14px; }
.aichat-preview-close { width:32px; height:32px; margin:0; padding:0; border:0; border-radius:4px; color:#536574; background:transparent; font-size:25px; line-height:30px; cursor:pointer; }
.aichat-preview-close:hover { color:#1f2b35; background:#e8edf1; }
.aichat-preview-dialog iframe { flex:1 1 auto; width:100%; min-height:0; border:0; background:#fff; }
.theme-dark .aichat-page, .night-mode .aichat-page, html.dark .aichat-page { --ai-border:#3c4650; --ai-surface:#262c32; --ai-soft:#1d2329; --ai-text:#e7ebef; --ai-muted:#a6b0ba; }
@media (max-width:767px) {
    .aichat-page { max-width:100%; overflow:hidden; padding-left:15px !important; padding-right:15px !important; }
    .aichat-head { align-items:center; }
    .aichat-head h2 { font-size:20px; }
    .aichat-note { font-size:12px; }
    .aichat-workspace,.aichat-shell,.aichat-messages,.aichat-compose,.aichat-message { width:100%; min-width:0; box-sizing:border-box; }
    .aichat-stage { padding-top:8px !important; padding-left:8px !important; padding-right:8px !important; }
    .aichat-workspace { height:var(--aichat-shell-height, calc(100dvh - 235px)); min-height:260px; }
    .aichat-shell { height:100%; min-height:260px; }
    .aichat-sessions { display:none; position:absolute; z-index:8; inset:0 auto 0 0; width:min(82%,280px); box-shadow:5px 0 18px rgba(31,52,72,.16); }
    .sessions-hidden .aichat-sessions { display:none; }
    .sessions-open .aichat-sessions { display:flex; }
    .aichat-session-delete { opacity:1; }
    .aichat-status { min-width:0; }
    .aichat-model { min-width:0; max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .aichat-messages { min-height:0; padding:14px; }
    .aichat-bubble { max-width:92%; min-width:0; }
    .aichat-compose { padding:9px; }
    .aichat-composer-box { border-radius:16px; }
    .aichat-compose-footer { align-items:flex-end; }
    .aichat-capabilities { min-width:0; flex:1 1 auto; }
    .aichat-model-select { max-width:145px; }
    .aichat-code-toolbar { align-items:flex-start; }
    .aichat-code-scroll { max-height:min(340px,44vh); }
    .aichat-preview-modal { padding:8px; }
    .aichat-preview-dialog { width:100%; height:94vh; }
    .aichat-code-action { padding-left:7px; padding-right:7px; }
}
@media (max-width:420px) {
    .aichat-model-select { max-width:132px; }
    .aichat-capability { padding:0 8px; font-size:12px; }
}