/* ============================================================
   KOLHK Chat — Tone Unification with Homepage
   Load AFTER color_css. v2: also overrides --ds-* tokens used
   by .dark body.incallx selector chain, plus explicit element
   overrides so the result is correct regardless of which
   theme-variant of color_css the browser cached.
   2026-05-20
   ============================================================ */

/* ============================================================
   1. DARK MODE — tokens (both --kol-* and --ds-* families)
   ============================================================ */
html.dark:root,
:root {
    /* kol-* tokens */
    --kol-accent: #38bdf8;
    --kol-accent-2: #7dd3fc;
    --kol-surface-0: #0c1017;
    --kol-surface-1: #111827;
    --kol-surface-2: #1e293b;
    --kol-surface-3: #243044;
    --dark-bg: #111827;
    --darker-bg: #0c1017;
    --sent-background: #38bdf8;
    --sent-color: #ffffff;
    --received-background: #1e293b;
    --received-color: #e8eef7;
    --kol-text: #f1f5f9;
    --kol-muted: #94a3b8;
    --kol-muted-2: #64748b;
    --kol-border: rgba(248, 250, 252, 0.08);
    --kol-border-strong: rgba(248, 250, 252, 0.14);
    --input-bg: #1e293b;
    --default-text-color: #f1f5f9;
    /* ds-* tokens (used by .dark body.incallx chain) */
    --ds-text: #f1f5f9;
    --ds-muted: #94a3b8;
    --ds-accent: #38bdf8;
    --ds-bg-0: #0c1017;
    --ds-bg-1: #111827;
    --ds-border: rgba(248, 250, 252, 0.08);
    --ds-border-strong: rgba(248, 250, 252, 0.14);
    --ds-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
    --ds-rpanel-surface: rgba(56, 189, 248, 0.06);
    --ds-rpanel-surface-strong: rgba(56, 189, 248, 0.12);
    --ds-rpanel-border: rgba(248, 250, 252, 0.08);
    --ds-rpanel-border-strong: rgba(248, 250, 252, 0.14);
    --ds-rpanel-text: #f1f5f9;
    --ds-rpanel-muted: #94a3b8;
}

/* ============================================================
   2. DARK MODE — element overrides (force regardless of which
   color_css variant the browser served)
   ============================================================ */
html.dark body,
html.dark body.incallx {
    background:
        radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.06), transparent 28rem),
        radial-gradient(circle at 80% 12%, rgba(56, 189, 248, 0.04), transparent 32rem),
        #0c1017 !important;
    color: #f1f5f9 !important;
}

html.dark body.incallx #wrapper {
    background:
        radial-gradient(circle at 76% -8%, rgba(56, 189, 248, 0.06), transparent 26rem),
        linear-gradient(180deg, #0c1017, #090c11 100%) !important;
}

html.dark body.incallx .room-bar {
    background:
        linear-gradient(180deg, rgba(56, 189, 248, 0.06), transparent 18rem),
        linear-gradient(180deg, #0e131c 0%, #0a0e16 100%) !important;
    border-right: 1px solid rgba(248, 250, 252, 0.06) !important;
}

html.dark body.incallx .topbar,
html.dark body.incallx .topbar-private,
html.dark body.incallx .navbar.topbar {
    background:
        linear-gradient(180deg, rgba(56, 189, 248, 0.04), transparent 140px),
        rgba(13, 19, 30, 0.92) !important;
    border-bottom-color: rgba(248, 250, 252, 0.06) !important;
    color: #f1f5f9 !important;
}

html.dark body.incallx .channel-list,
html.dark body.incallx .sidebar-wrapper {
    background: linear-gradient(180deg, #111827 0%, #0e1422 100%) !important;
    color: #f1f5f9 !important;
}

html.dark body.incallx .main-panel {
    background: linear-gradient(180deg, #0d1320 0%, #0b111a 100%) !important;
    color: #f1f5f9 !important;
}

html.dark body.incallx .right-panel,
html.dark body.incallx .rightbar-wrapper {
    background: linear-gradient(180deg, #111827 0%, #0f1622 100%) !important;
    color: #f1f5f9 !important;
}

html.dark body.incallx #rpanel-tab {
    background: linear-gradient(180deg, rgba(20, 28, 40, 0.95), rgba(16, 23, 34, 0.96)) !important;
    border-bottom: 1px solid rgba(248, 250, 252, 0.06) !important;
}

html.dark body.incallx #rpanel-tab .nav-link {
    color: #94a3b8 !important;
    background: rgba(148, 163, 184, 0.08) !important;
}

html.dark body.incallx #rpanel-tab .nav-link:hover {
    color: #f1f5f9 !important;
    background: rgba(56, 189, 248, 0.12) !important;
}

html.dark body.incallx #rpanel-tab .nav-link.active,
html.dark body.incallx .right-panel .nav-pills .nav-link.active {
    color: #ffffff !important;
    background: #38bdf8 !important;
    background-image: linear-gradient(135deg, #38bdf8, #7dd3fc) !important;
}

html.dark body.incallx .channel-item {
    color: #cbd5e1 !important;
}
html.dark body.incallx .channel-item:hover {
    color: #f1f5f9 !important;
    background: rgba(248, 250, 252, 0.05) !important;
}
html.dark body.incallx .channel-item.active {
    color: #ffffff !important;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.10)) !important;
    box-shadow: inset 3px 0 0 #38bdf8 !important;
}

html.dark body.incallx .room-title,
html.dark body.incallx .top-channel-name,
html.dark body.incallx .channel-name,
html.dark body.incallx .channel-user-name {
    color: #f1f5f9 !important;
}

html.dark body.incallx .channel-cat {
    color: #94a3b8 !important;
}

html.dark body.incallx .editor-container {
    background: linear-gradient(180deg, #111827, #0f1623) !important;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.18), 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}
html.dark body.incallx .editor-container:focus-within {
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18), 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

html.dark .btn-primary,
html.dark body.incallx .btn-primary,
html.dark body.incallx #main-profile .btn-primary {
    background: #38bdf8 !important;
    background-image: linear-gradient(135deg, #38bdf8, #7dd3fc) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
}
html.dark .btn-primary:hover,
html.dark body.incallx .btn-primary:hover {
    background: #7dd3fc !important;
    background-image: linear-gradient(135deg, #7dd3fc, #bae6fd) !important;
}

/* ============================================================
   3. LIGHT MODE — tokens
   ============================================================ */
html.light:root,
html.light {
    --kol-accent: #0ea5e9;
    --kol-accent-2: #0284c7;
    --kol-surface-0: #f8fafb;
    --kol-surface-1: #ffffff;
    --kol-surface-2: #f1f5f9;
    --kol-surface-3: #e2e8f0;
    --dark-bg: #ffffff;
    --darker-bg: #f8fafb;
    --kol-text: #0f172a;
    --kol-muted: #475569;
    --kol-muted-2: #64748b;
    --kol-border: rgba(15, 23, 42, 0.08);
    --kol-border-strong: rgba(15, 23, 42, 0.14);
    --sent-background: #0ea5e9;
    --sent-color: #ffffff;
    --received-background: #f1f5f9;
    --received-color: #0f172a;
    --input-bg: #ffffff;
    --default-text-color: #0f172a;
    --ds-text: #0f172a;
    --ds-muted: #475569;
    --ds-accent: #0ea5e9;
    --ds-bg-0: #f8fafb;
    --ds-bg-1: #ffffff;
    --ds-border: rgba(15, 23, 42, 0.08);
    --ds-border-strong: rgba(15, 23, 42, 0.14);
    --ds-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    --ds-rpanel-surface: rgba(14, 165, 233, 0.06);
    --ds-rpanel-surface-strong: rgba(14, 165, 233, 0.12);
    --ds-rpanel-border: rgba(15, 23, 42, 0.08);
    --ds-rpanel-border-strong: rgba(15, 23, 42, 0.14);
    --ds-rpanel-text: #0f172a;
    --ds-rpanel-muted: #475569;
}

/* ============================================================
   4. LIGHT MODE — element overrides
   ============================================================ */
html.light body,
html.light body.incallx {
    background:
        radial-gradient(circle at 18% 0%, rgba(14, 165, 233, 0.05), transparent 28rem),
        radial-gradient(circle at 80% 12%, rgba(14, 165, 233, 0.03), transparent 32rem),
        #f8fafb !important;
    color: #0f172a !important;
}

html.light body.incallx #wrapper {
    background:
        radial-gradient(circle at 76% -8%, rgba(14, 165, 233, 0.05), transparent 26rem),
        linear-gradient(180deg, #f8fafb, #eef3fa 100%) !important;
}

html.light body.incallx .room-bar {
    background:
        linear-gradient(180deg, rgba(14, 165, 233, 0.04), transparent 18rem),
        #ffffff !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.light body.incallx .topbar,
html.light body.incallx .topbar-private,
html.light body.incallx .navbar.topbar {
    background:
        linear-gradient(180deg, rgba(14, 165, 233, 0.04), transparent 140px),
        rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}

html.light body.incallx .channel-list,
html.light body.incallx .sidebar-wrapper {
    background: #ffffff !important;
    color: #0f172a !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.light body.incallx .main-panel {
    background: #f8fafb !important;
    color: #0f172a !important;
}

html.light body.incallx .right-panel,
html.light body.incallx .rightbar-wrapper {
    background: #ffffff !important;
    color: #0f172a !important;
    border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.light body.incallx #rpanel-tab {
    background: rgba(248, 250, 251, 0.95) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.light body.incallx #rpanel-tab .nav-link {
    color: #475569 !important;
    background: rgba(15, 23, 42, 0.04) !important;
}

html.light body.incallx #rpanel-tab .nav-link:hover {
    color: #0ea5e9 !important;
    background: rgba(14, 165, 233, 0.10) !important;
}

html.light body.incallx #rpanel-tab .nav-link.active,
html.light body.incallx .right-panel .nav-pills .nav-link.active {
    color: #ffffff !important;
    background: #0ea5e9 !important;
    background-image: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
}

html.light body.incallx .channel-item {
    color: #475569 !important;
}
html.light body.incallx .channel-item:hover {
    color: #0f172a !important;
    background: rgba(15, 23, 42, 0.04) !important;
}
html.light body.incallx .channel-item.active {
    color: #0ea5e9 !important;
    background: rgba(14, 165, 233, 0.10) !important;
    box-shadow: inset 3px 0 0 #0ea5e9 !important;
}

html.light body.incallx .room-title,
html.light body.incallx .top-channel-name,
html.light body.incallx .channel-name,
html.light body.incallx .channel-user-name {
    color: #0f172a !important;
}

html.light body.incallx .channel-cat {
    color: #64748b !important;
}

html.light body.incallx .editor-container {
    background: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.18), 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

html.light .btn-primary,
html.light body.incallx .btn-primary {
    background: #0ea5e9 !important;
    background-image: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
    border-color: #0ea5e9 !important;
    color: #ffffff !important;
}
html.light .btn-primary:hover,
html.light body.incallx .btn-primary:hover {
    background: #0284c7 !important;
    background-image: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
}

/* ============================================================
   5. Both modes — accent links + sent message bubble
   ============================================================ */
.sent-message .message-body,
.message-row.sent .message-content,
.cht.sent .chat-txt,
.cht.sent .message-html {
    background: var(--kol-accent) !important;
    color: #ffffff !important;
}

/* ============================================================
   Phase 15 — Profile cover (rainbow PNG → sky aurora)
   Override the inline style="background: url('cover.png')" on
   .profile-header-cover by force; restyle info panel + accents.
   ============================================================ */

body.incallx .profile-header .profile-header-cover,
.dark body.incallx .profile-header .profile-header-cover,
body.incallx .codex-user-console .profile-header .profile-header-cover {
    background-image:
        radial-gradient(60% 70% at 25% 10%, rgba(56, 189, 248, 0.32), transparent 70%),
        radial-gradient(55% 80% at 80% 90%, rgba(125, 211, 252, 0.2), transparent 70%),
        linear-gradient(135deg, #0c1426 0%, #0b1220 55%, #0c1426 100%) !important;
    background-color: #0c1220 !important;
    background-size: cover !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    filter: none !important;
}

body.incallx .profile-header .profile-header-cover::after,
.dark body.incallx .profile-header .profile-header-cover::after,
body.incallx .codex-user-console .profile-header .profile-header-cover::after {
    background:
        linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0.5) 100%),
        radial-gradient(circle at 50% 100%, rgba(56, 189, 248, 0.12), transparent 60%) !important;
}

body.incallx .profile-header .profile-header-info,
.dark body.incallx .profile-header .profile-header-info,
body.incallx .codex-user-console .profile-header .profile-header-info {
    background:
        linear-gradient(180deg, rgba(17, 24, 35, 0.92), rgba(12, 16, 23, 1)),
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08), transparent 60%) !important;
    background-color: #0c1017 !important;
}

body.incallx .profile-header-user-avatar,
.dark body.incallx .profile-header-user-avatar,
body.incallx .codex-user-console .profile-header-user-avatar {
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.4), 0 0 0 8px rgba(56, 189, 248, 0.18) !important;
}
body.incallx .profile-header-user-avatar img,
.dark body.incallx .profile-header-user-avatar img,
body.incallx .codex-user-console .profile-header-user-avatar img {
    border: 5px solid rgba(56, 189, 248, 0.35) !important;
}

body.incallx .profile-header .btn-success,
.dark body.incallx .profile-header .btn-success,
body.incallx .codex-user-console .profile-header .btn-success {
    background: #38bdf8 !important;
    background-image: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.4) !important;
    color: #0b1220 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.22) !important;
}
body.incallx .profile-header .btn-success:hover {
    filter: brightness(1.05);
    background-image: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
}

body.incallx .profile-header-user-title,
.dark body.incallx .profile-header-user-title,
body.incallx .codex-user-console .profile-header-user-title {
    color: #f8fafc !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
body.incallx .profile-header-user-sub-title,
.dark body.incallx .profile-header-user-sub-title,
body.incallx .codex-user-console .profile-header-user-sub-title {
    color: rgba(241, 245, 249, 0.6) !important;
    font-weight: 500 !important;
}

body.incallx .codex-console-summary-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.12), transparent 40%),
        linear-gradient(150deg, rgba(23, 32, 47, 0.94), rgba(14, 20, 31, 0.92)) !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
}

body.incallx .profile-vip-badge {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* === END Phase 15 (profile cover) === */

/* ============================================================
   Phase 16 — Chat 频道 + 消息界面 与首页 sky #38bdf8 强力对齐
   theme-dark.css 里残留的 teal #44dcc0 / #31e0bc 硬编码 rgba
   会盖过 --ds-* 变量重定义。这里逐条用更具体的 selector +
   !important 把所有 teal 痕迹改为 sky aurora。
   2026-05-21
   ============================================================ */

/* --- 16-1 chat-scroll: 杀掉 28×28 网格底纹，换为首页式平面 + 隐 sky aurora --- */
html.dark body.incallx .chat-scroll,
.dark body.incallx .chat-scroll {
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(56, 189, 248, 0.05), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 22rem),
        linear-gradient(180deg, #0d1320 0%, #0b111a 100%) !important;
    background-size: auto !important;
    background-color: #0b111a !important;
}

/* --- 16-2 channel-item.active: 把 teal border 改为 sky --- */
html.dark body.incallx .channel-item.active,
.dark body.incallx .channel-item.active {
    border: 1px solid rgba(56, 189, 248, 0.34) !important;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.08)) !important;
    box-shadow:
        inset 3px 0 0 #38bdf8,
        0 8px 22px rgba(56, 189, 248, 0.10) !important;
    color: #f4fbff !important;
}
html.dark body.incallx .channel-item:focus-visible,
.dark body.incallx .channel-item:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.55) !important;
    outline-offset: 2px;
}

/* --- 16-3 form / search / editor focus: sky 替换 teal --- */
html.dark body.incallx .room-user-search:focus,
html.dark body.incallx .group-user-search:focus,
html.dark body.incallx .input-icon .form-control:focus,
.dark body.incallx .room-user-search:focus,
.dark body.incallx .group-user-search:focus,
.dark body.incallx .input-icon .form-control:focus {
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16) !important;
}

html.dark body.incallx .editor-container,
.dark body.incallx .editor-container {
    border: 1px solid rgba(56, 189, 248, 0.14) !important;
    background: linear-gradient(180deg, #111929, #101827) !important;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}
html.dark body.incallx .editor-container:focus-within,
.dark body.incallx .editor-container:focus-within {
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow:
        0 0 0 3px rgba(56, 189, 248, 0.16),
        0 16px 38px rgba(0, 0, 0, 0.26) !important;
}

/* --- 16-4 codex-empty-card: sky aurora 替换 teal radial --- */
html.dark body.incallx .codex-empty-card,
.dark body.incallx .codex-empty-card {
    border: 1px solid rgba(56, 189, 248, 0.14) !important;
    background:
        radial-gradient(circle at 22% 0%, rgba(56, 189, 248, 0.14), transparent 46%),
        radial-gradient(circle at 78% 100%, rgba(125, 211, 252, 0.08), transparent 50%),
        linear-gradient(150deg, rgba(19, 28, 42, 0.92), rgba(12, 18, 28, 0.92)) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28) !important;
}

/* empty-state inner icon / heading — 用 sky 文字渐变 */
html.dark body.incallx .codex-chat-empty-state h1,
html.dark body.incallx .codex-chat-empty-state h2,
html.dark body.incallx .codex-chat-empty-state .empty-title,
.dark body.incallx .codex-chat-empty-state h1,
.dark body.incallx .codex-chat-empty-state h2,
.dark body.incallx .codex-chat-empty-state .empty-title {
    background: linear-gradient(135deg, #f1f5f9 0%, #7dd3fc 70%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    font-weight: 700;
}

/* --- 16-5 全局 focus-visible outline: sky 替换 teal --- */
html.dark body.incallx :is(.btn, .nav-link, .dropdown-item, .channel-item, .user-row):focus-visible,
.dark body.incallx :is(.btn, .nav-link, .dropdown-item, .channel-item, .user-row):focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.55) !important;
    outline-offset: 2px;
}

/* --- 16-6 右栏 rpanel tab hover + active 用 sky 替换 teal/mint --- */
html.dark #rpanel-tab .nav-link:hover,
html.dark body.incallx #rpanel-tab .nav-link:hover,
.dark #rpanel-tab .nav-link:hover,
.dark body.incallx #rpanel-tab .nav-link:hover {
    background: rgba(56, 189, 248, 0.18) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #f4fbff !important;
}

html.dark .right-panel .nav-pills .nav-link.active,
html.dark .right-panel .nav-pills .show > .nav-link,
html.dark body.incallx .right-panel .nav-pills .nav-link.active,
html.dark body.incallx .right-panel .nav-pills .show > .nav-link,
.dark .right-panel .nav-pills .nav-link.active,
.dark .right-panel .nav-pills .show > .nav-link,
.dark body.incallx .right-panel .nav-pills .nav-link.active,
.dark body.incallx .right-panel .nav-pills .show > .nav-link {
    color: #0b1220 !important;
    border: 1px solid rgba(56, 189, 248, 0.42) !important;
    background: linear-gradient(135deg, #38bdf8, #7dd3fc) !important;
    box-shadow: 0 8px 20px rgba(56, 189, 248, 0.28) !important;
}

/* --- 16-7 #main-profile 内部 v-profile-tab active + btn-primary 用 sky --- */
html.dark body.incallx #main-profile #v-profile-tab .nav-link.active,
html.dark body.incallx #main-agent #v-agent-tab .nav-link.active,
.dark body.incallx #main-profile #v-profile-tab .nav-link.active,
.dark body.incallx #main-agent #v-agent-tab .nav-link.active {
    color: #0b1220 !important;
    border-color: rgba(56, 189, 248, 0.42) !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.72), rgba(125, 211, 252, 0.5)) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24) !important;
}

html.dark body.incallx #main-profile :is(.form-control, .form-select):focus,
html.dark body.incallx #main-agent :is(.form-control, .form-select):focus,
.dark body.incallx #main-profile :is(.form-control, .form-select):focus,
.dark body.incallx #main-agent :is(.form-control, .form-select):focus {
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18) !important;
}

html.dark body.incallx #main-profile .btn-primary,
html.dark body.incallx #main-agent .btn-primary,
.dark body.incallx #main-profile .btn-primary,
.dark body.incallx #main-agent .btn-primary {
    color: #0b1220 !important;
    background: #38bdf8 !important;
    background-image: linear-gradient(135deg, #38bdf8, #7dd3fc) !important;
    box-shadow: 0 10px 22px rgba(56, 189, 248, 0.26) !important;
}

html.dark body.incallx #main-profile .profile-header .btn-success,
html.dark body.incallx #main-agent .profile-header .btn-success,
.dark body.incallx #main-profile .profile-header .btn-success,
.dark body.incallx #main-agent .profile-header .btn-success {
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
}

/* --- 16-8 #main-profile / #main-agent 顶部 aurora 用 sky --- */
html.dark body.incallx #main-profile .main-block-padding,
html.dark body.incallx #main-agent .main-block-padding,
.dark body.incallx #main-profile .main-block-padding,
.dark body.incallx #main-agent .main-block-padding {
    background:
        radial-gradient(circle at 94% -10%, rgba(56, 189, 248, 0.08), transparent 28rem),
        linear-gradient(180deg, rgba(15, 22, 34, 0.68), rgba(12, 18, 28, 0.64)) !important;
}

/* --- 16-9 messages 区域：发送气泡 sky / 收信气泡保持中性，作者名 sky-tint --- */
html.dark body.incallx .messages .sent-message .message-body,
html.dark body.incallx .messages .message-row.sent .message-content,
html.dark body.incallx .messages .cht.sent .chat-txt,
html.dark body.incallx .messages .cht.sent .message-html,
.dark body.incallx .messages .sent-message .message-body,
.dark body.incallx .messages .message-row.sent .message-content,
.dark body.incallx .messages .cht.sent .chat-txt,
.dark body.incallx .messages .cht.sent .message-html {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.22) !important;
}

/* 链接 / 提及 — sky tint */
html.dark body.incallx .messages a,
html.dark body.incallx .messages .mention,
html.dark body.incallx .messages .message-html a,
.dark body.incallx .messages a,
.dark body.incallx .messages .mention,
.dark body.incallx .messages .message-html a {
    color: #7dd3fc !important;
}
html.dark body.incallx .messages a:hover,
.dark body.incallx .messages a:hover {
    color: #38bdf8 !important;
}

/* --- 16-10 main-panel hero aurora（empty / 首屏视觉）— 在 main-panel 顶部加一抹 sky 气氛 --- */
html.dark body.incallx .main-panel,
.dark body.incallx .main-panel {
    background:
        radial-gradient(60% 50% at 50% -10%, rgba(56, 189, 248, 0.10), transparent 60%),
        linear-gradient(180deg, rgba(56, 189, 248, 0.025), transparent 18rem),
        linear-gradient(180deg, #0d1320 0%, #0b111a 100%) !important;
}

/* === END Phase 16 (chat tone full sky pass) === */

/* ============================================================
   Phase 17 - performance polish + message/cover cleanup
   Keep the homepage sky accent while removing glow pollution
   from sent messages and improving room cover framing.
   2026-05-22
   ============================================================ */
html.dark body.incallx .messages .sent-message .message-body,
html.dark body.incallx .messages .message-row.sent .message-content,
html.dark body.incallx .messages .cht.sent .chat-txt,
html.dark body.incallx .messages .cht.sent .message-html,
.dark body.incallx .messages .sent-message .message-body,
.dark body.incallx .messages .message-row.sent .message-content,
.dark body.incallx .messages .cht.sent .chat-txt,
.dark body.incallx .messages .cht.sent .message-html {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

html.light body.incallx .messages .sent-message .message-body,
html.light body.incallx .messages .message-row.sent .message-content,
html.light body.incallx .messages .cht.sent .chat-txt,
html.light body.incallx .messages .cht.sent .message-html,
.light body.incallx .messages .sent-message .message-body,
.light body.incallx .messages .message-row.sent .message-content,
.light body.incallx .messages .cht.sent .chat-txt,
.light body.incallx .messages .cht.sent .message-html {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

html.dark body.incallx .messages .cht.sent,
html.dark body.incallx .messages .cht.sent .message-data,
html.light body.incallx .messages .cht.sent,
html.light body.incallx .messages .cht.sent .message-data,
.dark body.incallx .messages .cht.sent,
.dark body.incallx .messages .cht.sent .message-data,
.light body.incallx .messages .cht.sent,
.light body.incallx .messages .cht.sent .message-data {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

html.dark body.incallx .messages,
.dark body.incallx .messages {
    background: linear-gradient(180deg, rgba(13, 19, 32, 0.42), rgba(11, 17, 26, 0.34)) !important;
    background-size: auto !important;
}

html.light body.incallx .messages,
.light body.incallx .messages {
    background: linear-gradient(180deg, rgba(248, 250, 251, 0.82), rgba(238, 243, 250, 0.72)) !important;
    background-size: auto !important;
}

html.dark body.incallx .channel-bar.room-img-shown .room-img,
html.light body.incallx .channel-bar.room-img-shown .room-img,
.dark body.incallx .channel-bar.room-img-shown .room-img,
.light body.incallx .channel-bar.room-img-shown .room-img {
    min-height: 118px !important;
    max-height: 138px !important;
}

html.dark body.incallx .channel-bar.room-img-shown .room-img img,
html.light body.incallx .channel-bar.room-img-shown .room-img img,
.dark body.incallx .channel-bar.room-img-shown .room-img img,
.light body.incallx .channel-bar.room-img-shown .room-img img {
    display: block !important;
    width: 100% !important;
    height: 118px !important;
    min-height: 118px !important;
    object-fit: cover !important;
    object-position: center 58% !important;
}

@media (max-width: 767.98px) {
    html.dark body.incallx .channel-bar.room-img-shown .room-img,
    html.light body.incallx .channel-bar.room-img-shown .room-img,
    .dark body.incallx .channel-bar.room-img-shown .room-img,
    .light body.incallx .channel-bar.room-img-shown .room-img {
        min-height: 104px !important;
        max-height: 118px !important;
    }

    html.dark body.incallx .channel-bar.room-img-shown .room-img img,
    html.light body.incallx .channel-bar.room-img-shown .room-img img,
    .dark body.incallx .channel-bar.room-img-shown .room-img img,
    .light body.incallx .channel-bar.room-img-shown .room-img img {
        height: 104px !important;
        min-height: 104px !important;
        object-position: center 60% !important;
    }
}

/* ============================================================
   Phase 18 - regression fixes from Phase 17
   Restore the room cover scale, keep the normal message editor,
   and remove sent-message background blocks completely.
   2026-05-22
   ============================================================ */
html.dark body.incallx .channel-bar.room-img-shown .room-img,
html.light body.incallx .channel-bar.room-img-shown .room-img,
.dark body.incallx .channel-bar.room-img-shown .room-img,
.light body.incallx .channel-bar.room-img-shown .room-img {
    min-height: 110px !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html.dark body.incallx .channel-bar.room-img-shown .room-img img,
html.light body.incallx .channel-bar.room-img-shown .room-img img,
.dark body.incallx .channel-bar.room-img-shown .room-img img,
.light body.incallx .channel-bar.room-img-shown .room-img img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 110px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 42% !important;
}

html.dark body.incallx .messages .sent-message .message-body,
html.dark body.incallx .messages .message-row.sent .message-content,
html.dark body.incallx .messages .cht.sent .chat-txt,
html.dark body.incallx .messages .cht.sent .message-html,
html.dark body.incallx .messages .cht.sent .chat-rich-html,
.dark body.incallx .messages .sent-message .message-body,
.dark body.incallx .messages .message-row.sent .message-content,
.dark body.incallx .messages .cht.sent .chat-txt,
.dark body.incallx .messages .cht.sent .message-html,
.dark body.incallx .messages .cht.sent .chat-rich-html,
html.light body.incallx .messages .sent-message .message-body,
html.light body.incallx .messages .message-row.sent .message-content,
html.light body.incallx .messages .cht.sent .chat-txt,
html.light body.incallx .messages .cht.sent .message-html,
html.light body.incallx .messages .cht.sent .chat-rich-html,
.light body.incallx .messages .sent-message .message-body,
.light body.incallx .messages .message-row.sent .message-content,
.light body.incallx .messages .cht.sent .chat-txt,
.light body.incallx .messages .cht.sent .message-html,
.light body.incallx .messages .cht.sent .chat-rich-html {
    background: transparent !important;
    background-image: none !important;
    color: inherit !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

html.dark body.incallx .messages .cht.sent .chat-txt,
html.dark body.incallx .messages .cht.sent .message-html,
.dark body.incallx .messages .cht.sent .chat-txt,
.dark body.incallx .messages .cht.sent .message-html {
    color: #eaf6ff !important;
}

html.light body.incallx .messages .cht.sent .chat-txt,
html.light body.incallx .messages .cht.sent .message-html,
.light body.incallx .messages .cht.sent .chat-txt,
.light body.incallx .messages .cht.sent .message-html {
    color: #0f172a !important;
}

body.incallx .messages .cht.sent .chat-txt:empty,
body.incallx .messages .cht.sent .message-html:empty {
    display: none !important;
}

body.incallx .chat-editor-controller .note-toolbar,
body.incallx .chat-editor-controller .note-statusbar {
    display: none !important;
}

body.incallx .chat-editor-controller .note-editor.note-frame,
body.incallx .chat-editor-controller .note-editor.note-airframe {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.incallx .chat-editor-controller .note-editing-area,
body.incallx .chat-editor-controller .note-editable {
    background: transparent !important;
}

body.incallx #chatnet-editor.chatnet-plain-editor {
    min-height: 36px;
    max-height: 96px;
    overflow-y: auto;
    padding: 7px 10px;
    outline: 0;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
    touch-action: manipulation;
    -webkit-user-select: text;
    user-select: text;
}

body.incallx #chatnet-editor.chatnet-plain-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    pointer-events: none;
}

/* Phase 19 - mobile interaction performance */
body.incallx .channel-item,
body.incallx .room-list-item,
body.incallx .editor-icon,
body.incallx .show-actions,
body.incallx .chat-info-action,
body.incallx .join-voice,
body.incallx #chatnet-editor {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.incallx .chat-scroll .chats {
    overscroll-behavior: contain;
}

@media (max-width: 767.98px) {
    html.dark body.incallx .channel-bar.room-img-shown .room-img,
    html.light body.incallx .channel-bar.room-img-shown .room-img,
    .dark body.incallx .channel-bar.room-img-shown .room-img,
    .light body.incallx .channel-bar.room-img-shown .room-img {
        min-height: 104px !important;
    }

    html.dark body.incallx .channel-bar.room-img-shown .room-img img,
    html.light body.incallx .channel-bar.room-img-shown .room-img img,
    .dark body.incallx .channel-bar.room-img-shown .room-img img,
    .light body.incallx .channel-bar.room-img-shown .room-img img {
        min-height: 104px !important;
        object-position: center 40% !important;
    }
}

/* Phase 19 - show room cover fully under the room selector */
body.incallx #wrapper > .sidebar-wrapper > .sidebar-room .channel-container.sidebar-height-fix,
.dark body.incallx #wrapper > .sidebar-wrapper > .sidebar-room .channel-container.sidebar-height-fix,
.light body.incallx #wrapper > .sidebar-wrapper > .sidebar-room .channel-container.sidebar-height-fix,
html.dark body.incallx #wrapper > .sidebar-wrapper > .sidebar-room .channel-container.sidebar-height-fix,
html.light body.incallx #wrapper > .sidebar-wrapper > .sidebar-room .channel-container.sidebar-height-fix {
    padding-top: 60px !important;
}

body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img,
.dark body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img,
.light body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img,
html.dark body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img,
html.light body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img {
    width: calc(100% - 20px) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img img,
.dark body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img img,
.light body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img img,
html.dark body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img img,
html.light body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img::before,
.dark body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img::before,
.light body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img::before,
html.dark body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img::before,
html.light body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img::before {
    display: none !important;
}

@media (max-width: 767.98px) {
    body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img,
    .dark body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img,
    .light body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img,
    html.dark body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img,
    html.light body.incallx #wrapper > .sidebar-wrapper .channel-bar.room-img-shown .room-img {
        width: calc(100% - 16px) !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 4 / 3 !important;
    }
}

/* === END kolhk-chat-tone v2 === */
@media (pointer: coarse) {
  .incallx a,
  .incallx button,
  .incallx [role="button"],
  .incallx .cn-tab,
  .incallx .channel-item,
  .incallx .room-list-item,
  .incallx .editor-icon {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}