/* ============================================================
   chat-look.css · 聊天外观（气泡款式 / 字号 / 消息头像 / 小尾巴 / 背景 / 头部排布）
   配置写在 html[data-chat-*]（旧）无关，这里只吃会话视图上的 data-look-* 与 --look-*
   ============================================================ */

:root {
    /* 小尾巴形状：手绘稿抠图（黑形 + 透明底），当遮罩用，颜色跟着气泡走 */
    --look-tail-shape: url("../assets/chat-tail.png?v=1");
}

/* ---------- 头部图标：统一圆头 SVG ---------- */
.chat-back,
.chat-detail-back { display: inline-flex !important; align-items: center; justify-content: center; }
.chat-back .icon-back,
.chat-detail-back .icon-back {
    width: 28px;
    height: 28px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.chat-detail-settings {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.chat-detail-settings .icon-more-svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
.chat-plus-btn,
.chat-header-add {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.chat-plus-btn .icon-plus,
.chat-header-add .icon-plus {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- 头部：头像位置（左/中/右） + 名字位置（左/中） ---------- */
.chat-detail-id {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

#page-chat .chat-detail-view .chat-detail-header {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* 头像 44px，圆角跟设置 */
#page-chat .chat-detail-view .chat-detail-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    border-radius: calc(22px * var(--look-av-round, 1)) !important;
}
#page-chat .chat-detail-view .chat-detail-avatar.avatar-default {
    background-size: 58% !important;
}
#page-chat .chat-detail-view[data-look-headav="off"] .chat-detail-avatar {
    display: none !important;
}

/* 头像靠右：压住更多按钮 */
#page-chat .chat-detail-view[data-look-avpos="right"] .chat-detail-header {
    padding-right: 12px !important;
}
#page-chat .chat-detail-view[data-look-avpos="right"] .chat-detail-id {
    flex: 1;
    flex-direction: row-reverse;
    gap: 10px;
}
#page-chat .chat-detail-view[data-look-avpos="right"] .chat-detail-name-wrap {
    flex: 1;
    justify-content: flex-start;
}
#page-chat .chat-detail-view[data-look-avpos="right"] .chat-detail-settings {
    display: none !important;
}
#page-chat .chat-detail-view[data-look-avpos="right"][data-look-headav="off"] .chat-detail-settings {
    display: flex !important;
}

/* 头像居中：头像在上，名字在下（竖排） */
#page-chat .chat-detail-view[data-look-avpos="center"] .chat-detail-header {
    min-height: 74px;
}
#page-chat .chat-detail-view[data-look-avpos="center"] .chat-detail-id {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    max-width: 100%;
}
#page-chat .chat-detail-view[data-look-avpos="center"] .chat-detail-name-wrap {
    flex: none;
    justify-content: center;
    max-width: 100%;
}
#page-chat .chat-detail-view[data-look-avpos="center"] .chat-detail-name {
    font-size: 15px !important;
}

/* 名字居中：在头像与更多之间居中 */
#page-chat .chat-detail-view[data-look-namepos="center"]:not([data-look-avpos="center"]) .chat-detail-name-wrap {
    flex: 1;
    justify-content: center;
}

/* 隐藏头像时头部高度对齐会话列表 */
#page-chat .chat-detail-view[data-look-headav="off"] .chat-detail-header {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    align-items: center !important;
    box-sizing: border-box;
}
#page-chat .chat-detail-view[data-look-headav="off"] .chat-detail-id {
    gap: 0;
    min-height: 0;
}
#page-chat .chat-detail-view[data-look-headav="off"] .chat-detail-name {
    font-size: 17px !important;
}

/* 更多按钮可隐藏（位置仍可点） */
#page-chat .chat-detail-view[data-look-more="off"] .chat-detail-settings {
    visibility: hidden;
}

/* ---------- 气泡款式 ----------
   长条方圆：全 6px，内边距 10/16
   简约圆角：18px，说话侧下角 4px（用户右下、角色左下）
   长条圆润：全 20px
   ------------------------------------ */
#page-chat .chat-detail-view[data-look-bubble="square"] .chat-message:not(.contact-msg):not(.friend-msg) {
    border-radius: 6px !important;
    max-width: 86% !important;
    padding: 10px 16px !important;
}
#page-chat .chat-detail-view[data-look-bubble="round"] .chat-message:not(.contact-msg):not(.friend-msg) {
    border-radius: 20px !important;
    max-width: 88% !important;
}
#page-chat .chat-detail-view[data-look-bubble="simple"] .chat-message.user:not(.contact-msg):not(.friend-msg) {
    border-radius: 18px 18px 4px 18px !important;
}
#page-chat .chat-detail-view[data-look-bubble="simple"] .chat-message.assistant:not(.contact-msg):not(.friend-msg) {
    border-radius: 18px 18px 18px 4px !important;
}

#page-chat .chat-detail-view[data-look-bubble="square"] .group-msg-bubble {
    border-radius: 6px !important;
    padding: 10px 16px !important;
}
#page-chat .chat-detail-view[data-look-bubble="round"] .group-msg-bubble { border-radius: 20px !important; }
#page-chat .chat-detail-view[data-look-bubble="simple"] .group-msg.user .group-msg-bubble {
    border-radius: 18px 18px 4px 18px !important;
}
#page-chat .chat-detail-view[data-look-bubble="simple"] .group-msg:not(.user) .group-msg-bubble {
    border-radius: 18px 18px 18px 4px !important;
}

/* 群聊：所有角色共用一个字色（跟角色气泡的文字同色） */
html[data-chat-skin="kk"][data-chat-mode="day"] #page-chat { --av-ink-group: #3C1E1E; }
html[data-chat-skin="kk"][data-chat-mode="night"] #page-chat { --av-ink-group: #F2F2F2; }
html[data-chat-skin="xx"][data-chat-mode="day"] #page-chat { --av-ink-group: #111111; }
html[data-chat-skin="xx"][data-chat-mode="night"] #page-chat { --av-ink-group: #FFFFFF; }
html[data-chat-mode][data-chat-skin] #page-chat .group-msg-avatar.av-text {
    color: var(--av-ink-group, #F2F2F2) !important;
}
/* ---------- 群聊头像：跟单聊同一套大小 / 圆角 ---------- */
#page-chat .chat-detail-view .group-msg-avatar {
    width: var(--look-av-size, 30px) !important;
    height: var(--look-av-size, 30px) !important;
    border-radius: calc(var(--look-av-size, 30px) / 2 * var(--look-av-round, 1)) !important;
    font-size: calc(var(--look-av-size, 30px) * 0.42) !important;
}

/* ---------- 文字头像：默认头像的底 + 本人的颜色 ---------- */
#page-chat { --av-bg: #E9EFF4; }
html[data-chat-skin="kk"][data-chat-mode="night"] #page-chat { --av-bg: #2C2C2E; }
html[data-chat-skin="xx"][data-chat-mode="day"] #page-chat { --av-bg: #E9E9EB; }
html[data-chat-skin="xx"][data-chat-mode="night"] #page-chat { --av-bg: #2C2C2E; }

html[data-chat-mode][data-chat-skin] #page-chat .chat-avatar.av-text,
html[data-chat-mode][data-chat-skin] #page-chat .group-msg-avatar.av-text,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-avatar.av-text {
    background-color: var(--av-bg, #E9EFF4) !important;
    background-image: none !important;
    color: var(--av-ink, #7A8A99) !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ---------- 字号 ---------- */
#page-chat .chat-detail-view .chat-message {
    font-size: var(--look-font, 15px) !important;
    line-height: 1.45;
}
#page-chat .chat-detail-view .group-msg-bubble {
    font-size: var(--look-font, 15px) !important;
    line-height: 1.45;
}

/* ---------- 消息头像（仅单聊；群聊自己有头像） ---------- */
#page-chat .chat-detail-view:not(.group-chat-detail-view):not([data-look-av="none"]) .chat-messages {
    padding-left: calc(var(--look-av-size, 30px) + 16px) !important;
    padding-right: calc(var(--look-av-size, 30px) + 16px) !important;
}
#page-chat .chat-detail-view:not(.group-chat-detail-view):not([data-look-av="none"]) .chat-message:not(.contact-msg):not(.friend-msg)::before {
    content: var(--look-av-peer-text, '');
    position: absolute;
    top: 0;
    width: var(--look-av-size, 30px);
    height: var(--look-av-size, 30px);
    border-radius: calc(var(--look-av-size, 30px) / 2 * var(--look-av-round, 1));
    background-color: var(--look-av-bg, rgba(255, 255, 255, .16));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: var(--look-av-size, 30px);
    text-align: center;
    overflow: hidden;
    pointer-events: none;
}
#page-chat .chat-detail-view:not(.group-chat-detail-view):not([data-look-av="none"]) .chat-message.assistant:not(.contact-msg):not(.friend-msg)::before {
    left: calc(-1 * (var(--look-av-size, 30px) + 13px));
}
#page-chat .chat-detail-view:not(.group-chat-detail-view):not([data-look-av="none"]) .chat-message.user:not(.contact-msg):not(.friend-msg)::before {
    right: calc(-1 * (var(--look-av-size, 30px) + 13px));
    content: var(--look-av-me-text, '');
    background-image: var(--look-av-me, none);
}
#page-chat .chat-detail-view:not(.group-chat-detail-view):not([data-look-av="none"]) .chat-message.assistant:not(.contact-msg):not(.friend-msg)::before {
    background-image: var(--look-av-peer, none);
}
/* 日间：头像底色与文字翻深，不然白底白字看不见 */
html[data-chat-mode="day"] #page-chat .chat-detail-view:not(.group-chat-detail-view):not([data-look-av="none"]) .chat-message:not(.contact-msg):not(.friend-msg)::before {
    background-color: rgba(0, 0, 0, .08);
    color: rgba(0, 0, 0, .55);
}

/* 末条：头像沉到气泡底部 */#page-chat .chat-detail-view[data-look-av="last"] .chat-message:not(.contact-msg):not(.friend-msg)::before {
    top: auto;
    bottom: 0;
}

/* 首条：同一个人连续发言只留第一条头像 */
#page-chat .chat-detail-view[data-look-av="first"] .chat-message.assistant + .chat-message.assistant::before,
#page-chat .chat-detail-view[data-look-av="first"] .chat-message.assistant + .chat-time-divider + .chat-message.assistant::before,
#page-chat .chat-detail-view[data-look-av="first"] .chat-message.user + .chat-message.user::before,
#page-chat .chat-detail-view[data-look-av="first"] .chat-message.user + .chat-time-divider + .chat-message.user::before {
    display: none;
}

/* 末条：同一个人连续发言只留最后一条头像 */
#page-chat .chat-detail-view[data-look-av="last"] .chat-message.assistant:has(+ .chat-message.assistant)::before,
#page-chat .chat-detail-view[data-look-av="last"] .chat-message.assistant:has(+ .chat-time-divider + .chat-message.assistant)::before,
#page-chat .chat-detail-view[data-look-av="last"] .chat-message.user:has(+ .chat-message.user)::before,
#page-chat .chat-detail-view[data-look-av="last"] .chat-message.user:has(+ .chat-time-divider + .chat-message.user)::before {
    display: none;
}

/* ---------- 小尾巴（单聊） ----------
   尾巴用负 z-index 塞到气泡底下，所以消息容器要自成一层，
   否则群聊/自定义背景那层不透明底色会把尾巴盖住 */
#page-chat .chat-detail-view[data-look-tail="on"] .chat-messages {
    isolation: isolate;
}
#page-chat .chat-detail-view[data-look-tail="on"] .chat-message:not(.contact-msg):not(.friend-msg)::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 14px;
    background-color: var(--look-tail-color, inherit);
    -webkit-mask-image: var(--look-tail-shape);
    mask-image: var(--look-tail-shape);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
}
#page-chat .chat-detail-view[data-look-tail="on"][data-look-av="none"] .chat-messages {
    padding-left: 14px !important;
    padding-right: 14px !important;
}
#page-chat .chat-detail-view[data-look-tail="on"][data-look-tailpos="bottom"] .chat-message.user::after {
    right: -5px;
    bottom: 0;
}
#page-chat .chat-detail-view[data-look-tail="on"][data-look-tailpos="bottom"] .chat-message.assistant::after {
    left: -5px;
    bottom: 0;
    transform: scaleX(-1);
}
#page-chat .chat-detail-view[data-look-tail="on"][data-look-tailpos="top"] .chat-message.user::after {
    right: -5px;
    top: 0;
    transform: scaleY(-1);
}
#page-chat .chat-detail-view[data-look-tail="on"][data-look-tailpos="top"] .chat-message.assistant::after {
    left: -5px;
    top: 0;
    transform: rotate(180deg);
}

/* ---------- 小尾巴（群聊：头像恒在，尾巴恒在上角） ---------- */
#page-chat .chat-detail-view[data-look-tail="on"] .group-msg .group-msg-bubble {
    position: relative;
}
#page-chat .chat-detail-view[data-look-tail="on"] .group-msg .group-msg-bubble::after {
    content: '';
    position: absolute;
    top: 0;
    width: 16px;
    height: 14px;
    background-color: var(--look-tail-color, inherit);
    -webkit-mask-image: var(--look-tail-shape);
    mask-image: var(--look-tail-shape);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
}
#page-chat .chat-detail-view[data-look-tail="on"] .group-msg:not(.user) .group-msg-bubble::after {
    left: -5px;
    transform: rotate(180deg);
}
#page-chat .chat-detail-view[data-look-bubcustom="on"][data-look-tail="on"] .group-msg.user .group-msg-bubble::after {
    right: -5px;
    transform: scaleY(-1);
}
#page-chat .chat-detail-view[data-look-tail="on"] .group-msg {
    gap: 12px !important;
}

/* 尾巴跟着头像走：首条只在连续发言的第一条，末条只在最后一条 */
#page-chat .chat-detail-view[data-look-tailrun="first"] .chat-message.assistant + .chat-message.assistant::after,
#page-chat .chat-detail-view[data-look-tailrun="first"] .chat-message.assistant + .chat-time-divider + .chat-message.assistant::after,
#page-chat .chat-detail-view[data-look-tailrun="first"] .chat-message.user + .chat-message.user::after,
#page-chat .chat-detail-view[data-look-tailrun="first"] .chat-message.user + .chat-time-divider + .chat-message.user::after,
#page-chat .chat-detail-view[data-look-tailrun="last"] .chat-message.assistant:has(+ .chat-message.assistant)::after,
#page-chat .chat-detail-view[data-look-tailrun="last"] .chat-message.assistant:has(+ .chat-time-divider + .chat-message.assistant)::after,
#page-chat .chat-detail-view[data-look-tailrun="last"] .chat-message.user:has(+ .chat-message.user)::after,
#page-chat .chat-detail-view[data-look-tailrun="last"] .chat-message.user:has(+ .chat-time-divider + .chat-message.user)::after {
    display: none;
}

/* ---------- 聊天背景 ---------- */
#page-chat .chat-detail-view[data-look-bg="on"] .chat-messages {
    background-image: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .34)), var(--look-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
html[data-chat-mode="day"] #page-chat .chat-detail-view[data-look-bg="on"] .chat-messages {
    background-image: linear-gradient(rgba(255, 255, 255, .20), rgba(255, 255, 255, .20)), var(--look-bg) !important;
}

/* ============================================================
   设置面板
   ============================================================ */
.look-scope {
    margin: -4px 0 10px;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .45);
}
.look-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.look-label {
    flex: none;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}
.look-seg {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.look-seg button {
    padding: 5px 9px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: transparent;
    color: rgba(255, 255, 255, .6);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.look-seg button.active {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(212, 106, 147, .12);
}
.look-seg button:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.look-slider {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}
.look-slider input[type="range"] {
    width: 120px;
    accent-color: var(--primary);
}
.look-font-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
    min-width: 34px;
    text-align: right;
}
.look-switch {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background .18s, border-color .18s;
}
.look-switch i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    transition: transform .18s;
}
.look-switch[aria-pressed="true"] {
    background: var(--primary);
    border-color: var(--primary);
}
.look-switch[aria-pressed="true"] i { transform: translateX(18px); background: #FFF5F9; }
.look-switch:disabled { opacity: .35; cursor: not-allowed; }
.look-tail-extra {
    display: flex;
    align-items: center;
    gap: 6px;
}
.look-mini {
    padding: 5px 9px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: transparent;
    color: rgba(255, 255, 255, .66);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}
.look-mini.ghost { color: rgba(255, 255, 255, .38); }
.look-mini:disabled { opacity: .35; cursor: not-allowed; }
input[type="color"].look-color {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
}
.look-hint {
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .35);
}
.look-bg-thumb {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, .16);
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, .06);
    flex: none;
}

/* 预览 */
.look-preview {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    margin: 4px 0 10px;
}
.look-pv-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.look-pv-row.me { justify-content: flex-end; }
.look-pv-av {
    width: var(--pv-av, 22px);
    height: var(--pv-av, 22px);
    border-radius: calc(var(--pv-av, 22px) / 2 * var(--pv-av-round, 1));
    background: rgba(255, 255, 255, .18);
    flex: none;
    display: none;
}
.look-preview[data-pv-av="on"] .look-pv-av { display: block; }
.look-pv-bubble {
    position: relative;
    padding: 6px 10px;
    border-radius: var(--pv-r, 16px);
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .88);
    font-size: var(--pv-font, 15px);
    line-height: 1.4;
    max-width: 72%;
}
.look-pv-row.me .look-pv-bubble {
    background: var(--primary);
    color: #1A0D14;
}
.look-preview[data-pv-tail="on"] .look-pv-bubble::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 11px;
    background-color: inherit;
    -webkit-mask-image: var(--look-tail-shape);
    mask-image: var(--look-tail-shape);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.look-preview[data-pv-tail="on"][data-pv-pos="top"] .look-pv-bubble::after { top: 0; }
.look-preview[data-pv-tail="on"][data-pv-pos="bottom"] .look-pv-bubble::after { bottom: 0; }
.look-preview[data-pv-tail="on"][data-pv-pos="top"] .look-pv-row.them .look-pv-bubble::after {
    left: -6px;
    transform: rotate(180deg);
}
.look-preview[data-pv-tail="on"][data-pv-pos="top"] .look-pv-row.me .look-pv-bubble::after {
    right: -6px;
    transform: scaleY(-1);
}
.look-preview[data-pv-tail="on"][data-pv-pos="bottom"] .look-pv-row.them .look-pv-bubble::after {
    left: -6px;
    transform: scaleX(-1);
}
.look-preview[data-pv-tail="on"][data-pv-pos="bottom"] .look-pv-row.me .look-pv-bubble::after {
    right: -6px;
}

/* ---------- 面板：日间 ---------- */
html[data-mode="day"] .look-row { border-bottom-color: rgba(36, 26, 34, .10); }
html[data-mode="day"] .look-seg button {
    border-color: rgba(36, 26, 34, .16);
    color: rgba(36, 26, 34, .62);
}
html[data-mode="day"] .look-seg button.active {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(212, 106, 147, .10);
}
html[data-mode="day"] .look-mini {
    border-color: rgba(36, 26, 34, .16);
    color: rgba(36, 26, 34, .66);
}
html[data-mode="day"] .look-mini.ghost { color: rgba(36, 26, 34, .38); }
html[data-mode="day"] .look-switch {
    border-color: rgba(36, 26, 34, .18);
    background: rgba(36, 26, 34, .08);
}
html[data-mode="day"] .look-switch i {
    background: #fff;
    box-shadow: 0 1px 2px rgba(36, 26, 34, .22);
}
html[data-mode="day"] .look-switch[aria-pressed="true"] {
    background: var(--primary);
    border-color: var(--primary);
}
html[data-mode="day"] .look-switch[aria-pressed="true"] i { background: #fff; }
html[data-mode="day"] .look-preview {
    background: rgba(36, 26, 34, .04);
    border-color: rgba(36, 26, 34, .08);
}
html[data-mode="day"] .look-pv-bubble {
    background: rgba(36, 26, 34, .10);
    color: rgba(36, 26, 34, .86);
}
html[data-mode="day"] .look-pv-row.me .look-pv-bubble {
    background: var(--primary);
    color: #FFFFFF;
}
html[data-mode="day"] .look-pv-av { background: rgba(36, 26, 34, .14); }
html[data-mode="day"] .look-bg-thumb { border-color: rgba(36, 26, 34, .16); }
html[data-mode="day"] .look-hint { color: rgba(36, 26, 34, .42); }
html[data-mode="day"] .look-font-val { color: rgba(36, 26, 34, .55); }
html[data-mode="day"] input[type="color"].look-color { border-color: rgba(36, 26, 34, .2); }
html[data-mode="day"] .look-slider input[type="range"] { accent-color: var(--primary); }

/* ============================================================
   自定义：顶栏 / 底栏 / 气泡（颜色、透明度、液态玻璃、磨砂）
   ============================================================ */
#page-chat {
    --bar-ink: #111111;
    --hdr-base: 255, 255, 255;
    --bar-base: 255, 255, 255;
    --bub-me: 212, 106, 147;
    --bub-them: 255, 255, 255;
}
html[data-chat-skin="kk"][data-chat-mode="day"] #page-chat {
    --bar-ink: #111111;
    --hdr-base: 255, 255, 255;
    --bar-base: 255, 255, 255;
    --bub-me: 254, 229, 0;
    --bub-them: 255, 255, 255;
}
html[data-chat-skin="kk"][data-chat-mode="night"] #page-chat {
    --bar-ink: #F2F2F2;
    --hdr-base: 30, 30, 30;
    --bar-base: 30, 30, 30;
    --bub-me: 254, 229, 0;
    --bub-them: 42, 42, 46;
}
html[data-chat-skin="xx"][data-chat-mode="day"] #page-chat {
    --bar-ink: #111111;
    --hdr-base: 255, 255, 255;
    --bar-base: 247, 247, 249;
    --bub-me: 11, 132, 255;
    --bub-them: 233, 233, 235;
}
html[data-chat-skin="xx"][data-chat-mode="night"] #page-chat {
    --bar-ink: #FFFFFF;
    --hdr-base: 0, 0, 0;
    --bar-base: 0, 0, 0;
    --bub-me: 10, 132, 255;
    --bub-them: 38, 38, 42;
}

/* 顶栏 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-hdrcustom="on"] .chat-detail-header {
    background-color: rgba(var(--hdr-tint, var(--hdr-base)), var(--hdr-a, 1)) !important;
    -webkit-backdrop-filter: blur(var(--hdr-blur, 0px)) saturate(calc(1 + var(--hdr-glass, 0) * .6));
    backdrop-filter: blur(var(--hdr-blur, 0px)) saturate(calc(1 + var(--hdr-glass, 0) * .6));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--hdr-glass, 0) * .28)),
                inset 0 1px 0 rgba(255, 255, 255, calc(var(--hdr-glass, 0) * .45));
}
/* 底栏 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-barcustom="on"] .chat-input-area {
    background-color: rgba(var(--bar-tint, var(--bar-base)), var(--bar-a, 1)) !important;
    -webkit-backdrop-filter: blur(var(--bar-blur, 0px)) saturate(calc(1 + var(--bar-glass, 0) * .6));
    backdrop-filter: blur(var(--bar-blur, 0px)) saturate(calc(1 + var(--bar-glass, 0) * .6));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--bar-glass, 0) * .28)),
                inset 0 1px 0 rgba(255, 255, 255, calc(var(--bar-glass, 0) * .45));
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-barcustom="on"] .chat-input-pill {
    background-color: rgba(var(--bar-tint, var(--bar-base)), calc(var(--bar-a, 1) * .55)) !important;
}

/* 图标颜色（仅会话页） */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-icon="on"] .chat-back,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-icon="on"] .chat-detail-settings,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-icon="on"] .chat-plus-btn,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-icon="on"] .chat-btn {
    color: var(--icon-ink, currentColor) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-icon="on"] .chat-back .icon-back,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-icon="on"] .chat-detail-settings .icon-more-svg,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-icon="on"] .chat-plus-btn .icon-plus {
    stroke: var(--icon-ink, currentColor) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-icon="on"] .chat-btn svg,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-icon="on"] .chat-input-trigger svg {
    stroke: var(--icon-ink, currentColor) !important;
}

/* 泡泡模式：栏本身透明，每个控件一个泡泡 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-header,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-input-area {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-back,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-settings {
    background-color: rgba(var(--hdr-tint, var(--hdr-base)), var(--hdr-a, 1)) !important;
    border-radius: 999px !important;
    width: 36px;
    height: 36px;
    flex: none;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-back,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-settings {
    color: var(--icon-ink, var(--hdr-ink, currentColor)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-plus-btn,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-btn,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-input-pill input {
    color: var(--icon-ink, var(--bar-ink, currentColor)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-plus-btn,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-btn {
    background-color: rgba(var(--bar-tint, var(--bar-base)), var(--bar-a, 1)) !important;
    border-radius: 999px !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-input-pill {
    background-color: rgba(var(--bar-tint, var(--bar-base)), var(--bar-a, 1)) !important;
    border-radius: 999px !important;
}

/* 气泡：透明度 / 玻璃 / 磨砂 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubcustom="on"] .chat-message.assistant:not(.contact-msg):not(.friend-msg),
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubcustom="on"] .group-msg:not(.user) .group-msg-bubble {
    background-color: rgba(var(--bub-tint-them, var(--bub-them)), var(--bub-a, 1)) !important;
    -webkit-backdrop-filter: blur(var(--bub-blur, 0px)) saturate(calc(1 + var(--bub-glass, 0) * .5));
    backdrop-filter: blur(var(--bub-blur, 0px)) saturate(calc(1 + var(--bub-glass, 0) * .5));
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubcustom="on"] .chat-message.user,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubcustom="on"] .group-msg.user .group-msg-bubble {
    background-color: rgba(var(--bub-tint-me, var(--bub-me)), var(--bub-a, 1)) !important;
    -webkit-backdrop-filter: blur(var(--bub-blur, 0px)) saturate(calc(1 + var(--bub-glass, 0) * .5));
    backdrop-filter: blur(var(--bub-blur, 0px)) saturate(calc(1 + var(--bub-glass, 0) * .5));
}

/* 会话页里的菜单：跟底栏背景 + 图标色 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-plus-menu,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .msg-menu,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .group-msg-menu {
    background-color: rgba(var(--bar-tint, var(--bar-base)), var(--bar-a, 1));
    -webkit-backdrop-filter: blur(var(--bar-blur, 0px)) saturate(calc(1 + var(--bar-glass, 0) * .6));
    backdrop-filter: blur(var(--bar-blur, 0px)) saturate(calc(1 + var(--bar-glass, 0) * .6));
    border-color: rgba(var(--bar-tint, var(--bar-base)), calc(var(--bar-a, 1) * .6));
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-plus-item,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .msg-menu-item:not(.danger),
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .group-msg-menu-item:not(.danger) {
    color: var(--icon-ink, var(--bar-ink, currentColor)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-icon="on"] .chat-plus-item svg,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-icon="on"] .msg-menu-item svg {
    stroke: var(--icon-ink, currentColor) !important;
    fill: none !important;
}

/* 尾巴被气泡盖住的那段裁掉：气泡调透明时不会透出深色重叠 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubcustom="on"][data-look-tail="on"] .chat-message.user::after {
    -webkit-clip-path: inset(0 0 0 11px);
    clip-path: inset(0 0 0 11px);
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubcustom="on"][data-look-tail="on"] .chat-message.assistant::after,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubcustom="on"][data-look-tail="on"] .group-msg:not(.user) .group-msg-bubble::after {
    -webkit-clip-path: inset(0 11px 0 0);
    clip-path: inset(0 11px 0 0);
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubcustom="on"][data-look-tail="on"] .group-msg.user .group-msg-bubble::after {
    -webkit-clip-path: inset(0 0 0 11px);
    clip-path: inset(0 0 0 11px);
}

/* 面板太长时滚动 */
#chatLookModal .modal-box {
    max-height: 88vh;
    overflow-y: auto;
}
/* ============================================================
   会话列表右键菜单：跟皮肤日夜走
   ============================================================ */
body:has(#page-chat.active) .item-popup-menu {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body:has(#page-chat.active) .item-popup-menu .item-popup-item {
    color: #111111 !important;
}
html[data-chat-skin="kk"][data-chat-mode="night"] body:has(#page-chat.active) .item-popup-menu {
    background: #2A2A2E !important;
    border-color: #3A3A3E !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5) !important;
}
html[data-chat-skin="kk"][data-chat-mode="night"] body:has(#page-chat.active) .item-popup-menu .item-popup-item {
    color: #F2F2F2 !important;
}
html[data-chat-skin="xx"][data-chat-mode="night"] body:has(#page-chat.active) .item-popup-menu {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5) !important;
}
html[data-chat-skin="xx"][data-chat-mode="night"] body:has(#page-chat.active) .item-popup-menu .item-popup-item {
    color: #FFFFFF !important;
}
body:has(#page-chat.active) .item-popup-menu .item-popup-item.danger {
    color: #E5484D !important;
}
/* 群会话列表头像也用统一底色，不吃皮肤黄/蓝 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-item.group-chat .chat-avatar.av-text {
    background-color: var(--av-bg, #E9EFF4) !important;
    background-image: none !important;
    color: var(--av-ink, #7A8A99) !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* ============================================================
   皮肤调色板（底 / 对方气泡 / 我的气泡）
   ============================================================ */
html[data-pal-bg][data-chat-mode][data-chat-skin] #page-chat .chat-detail-view {
    background-color: var(--pal-bg) !important;
}
html[data-pal-them][data-chat-mode][data-chat-skin] #page-chat .chat-message.assistant,
html[data-pal-them][data-chat-mode][data-chat-skin] #page-chat .group-msg:not(.user) .group-msg-bubble {
    background-color: var(--pal-them) !important;
    color: var(--pal-them-ink, #FFFFFF) !important;
}
html[data-pal-me][data-chat-mode][data-chat-skin] #page-chat .chat-message.user,
html[data-pal-me][data-chat-mode][data-chat-skin] #page-chat .group-msg.user .group-msg-bubble {
    background-color: var(--pal-me) !important;
    color: var(--pal-me-ink, #FFFFFF) !important;
}

/* 皮肤卡片：调色器 */
.chat-skin-item { display: flex; flex-direction: column; gap: 6px; }
.cs-palette { display: flex; gap: 6px; padding: 0 2px; }
.cs-swat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--text-dim);
    cursor: pointer;
}
.cs-swat input[type="color"] {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

/* ---------- 调色板：整个聊天 App（列表 / 导航 / 会话） ---------- */
html[data-pal-them][data-chat-mode][data-chat-skin] #page-chat .chat-content,
html[data-pal-them][data-chat-mode][data-chat-skin] #page-chat .chat-item,
html[data-pal-them][data-chat-mode][data-chat-skin] #page-chat .character-item,
html[data-pal-them][data-chat-mode][data-chat-skin] #page-chat .chat-header,
html[data-pal-them][data-chat-mode][data-chat-skin] #page-chat .chat-detail-header,
html[data-pal-them][data-chat-mode][data-chat-skin] #page-chat .chat-input-area,
html[data-pal-them][data-chat-mode][data-chat-skin] #page-chat .chat-nav {
    background-color: var(--pal-them) !important;
}
html[data-pal-bg][data-chat-mode][data-chat-skin] #page-chat,
html[data-pal-bg][data-chat-mode][data-chat-skin] #page-chat .chat-detail-view,
html[data-pal-bg][data-chat-mode][data-chat-skin] #page-chat .chat-tab-content {
    background-color: var(--pal-bg) !important;
}
html[data-pal-me][data-chat-mode][data-chat-skin] #page-chat .chat-nav-item.active {
    color: var(--pal-me) !important;
}
html[data-pal-me][data-chat-mode][data-chat-skin] #page-chat .chat-unread-badge {
    background-color: var(--pal-me) !important;
    color: var(--pal-me-ink, #FFFFFF) !important;
}

/* ============================================================
   会话内配色（聊天外观）：我的气泡 / 对方气泡 / 聊天底色
   ============================================================ */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubtint="on"] .chat-message.user,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubtint="on"] .group-msg.user .group-msg-bubble {
    background-color: rgba(var(--bub-tint-me, var(--bub-me)), var(--bub-a, 1)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubtint="on"] .chat-message.assistant,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubtint="on"] .group-msg:not(.user) .group-msg-bubble {
    background-color: rgba(var(--bub-tint-them, var(--bub-them)), var(--bub-a, 1)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bgcolor="on"] {
    background-color: var(--look-bg-color) !important;
}

/* ============================================================
   聊天背景：铺满整页（含头部栏、输入栏），两条栏做磨砂玻璃
   ============================================================ */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bg="on"] {
    background-image: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .28)), var(--look-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
html[data-chat-mode="day"][data-chat-skin] #page-chat .chat-detail-view[data-look-bg="on"] {
    background-image: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)), var(--look-bg) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bg="on"] .chat-messages {
    background: transparent !important;
    background-image: none !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bg="on"] .chat-detail-header,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bg="on"] .chat-input-area {
    background: rgba(20, 16, 24, .22) !important;
    border-color: rgba(255, 255, 255, .10) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
    backdrop-filter: blur(18px) saturate(1.5) !important;
}
html[data-chat-mode="day"][data-chat-skin] #page-chat .chat-detail-view[data-look-bg="on"] .chat-detail-header,
html[data-chat-mode="day"][data-chat-skin] #page-chat .chat-detail-view[data-look-bg="on"] .chat-input-area {
    background: rgba(255, 255, 255, .30) !important;
    border-color: rgba(0, 0, 0, .08) !important;
}
/* 泡泡模式 + 背景图：泡泡本身也做玻璃，透出照片 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-back,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-settings,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-plus-btn,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-btn,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-input-pill {
    -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
    backdrop-filter: blur(16px) saturate(1.5) !important;
}
/* ============================================================
   泡泡模式：彻底去掉两条栏（无底色、无模糊、无分割线），
   只留浮在内容上的泡泡按钮；优先级放在最后，压过背景图那层
   ============================================================ */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-header,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-input-area {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* 顶栏（状态栏那条）跟头部栏同色。
   --sb-bg 由 JS 从头部栏的实际颜色抄过来；头部透明时它自然也是透明。
   不要再在这里写死 transparent —— 那会把抄来的颜色整个压掉。 */
html[data-chat-mode][data-chat-skin] body:has(#page-chat.active) .phone-statusbar {
    background: var(--sb-bg, transparent) !important;
}
html[data-chat-mode="night"][data-chat-skin] body:has(#page-chat.active .chat-detail-view[data-look-bg="on"]) .phone-statusbar {
    background: var(--sb-bg, rgba(20, 16, 24, .30)) !important;
}
html[data-chat-mode="day"][data-chat-skin] body:has(#page-chat.active .chat-detail-view[data-look-bg="on"]) .phone-statusbar {
    background: var(--sb-bg, rgba(255, 255, 255, .40)) !important;
}
html[data-chat-mode][data-chat-skin] body:has(#page-chat.active .chat-detail-view[data-look-bubmode="on"]) .phone-statusbar {
    background: transparent !important;
}
/* ---------- 顶栏 / 底栏阴影（泡泡模式下落在泡泡上） ---------- */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-hdrcustom="on"] .chat-detail-header {
    box-shadow: 0 8px 24px rgba(0, 0, 0, calc(var(--hdr-shadow, 0) * .35)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-barcustom="on"] .chat-input-area {
    box-shadow: 0 -8px 24px rgba(0, 0, 0, calc(var(--bar-shadow, 0) * .35)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-back,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-settings {
    box-shadow: 0 6px 18px rgba(0, 0, 0, calc(var(--hdr-shadow, 0) * .35)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-plus-btn,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-btn,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-input-pill {
    box-shadow: 0 6px 18px rgba(0, 0, 0, calc(var(--bar-shadow, 0) * .35)) !important;
}

/* ============================================================
   浮层结构：消息区铺满整页，头部栏 / 输入栏浮在上面
   （头部和输入栏仍留在文档流里，只是把消息区绝对定位铺满，
     所以不会出现“输入栏跑到顶部”那种错位）
   ============================================================ */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* 消息区是整页浮层，头部栏浮在它上面。
       留白 = 头部栏占掉的那段（状态栏高度由 --statusbar-h 提供，再加 62px 头部栏 + 间隙）。
       之前写死 84px，只够状态栏，第一条消息就被头部栏压住了。 */
    padding-top: calc(var(--statusbar-h, 0px) + 62px) !important;
    padding-bottom: calc(var(--chat-input-space, 96px) + 12px) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-detail-header {
    position: relative !important;
    z-index: 6 !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-input-area {
    margin-top: auto !important;
    position: relative !important;
    z-index: 6 !important;
}
/* ---------- 阴影只落在该落的地方 ---------- */
/* 头部栏：只在下边有一条投影，顶上是干净的（避免和顶部栏之间出现色差） */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-hdrcustom="on"] .chat-detail-header {
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, calc(var(--hdr-shadow, 0) * .55)) !important;
}
/* 输入栏：只在上边 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-barcustom="on"] .chat-input-area {
    box-shadow: 0 -6px 18px -10px rgba(0, 0, 0, calc(var(--bar-shadow, 0) * .55)) !important;
}
/* 泡泡模式：两条栏完全没有阴影，阴影全给泡泡 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-header,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-input-area {
    box-shadow: none !important;
}

/* ---------- 泡泡：返回按钮、名字也做成泡泡 ---------- */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-back,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-settings {
    width: 36px !important;
    height: 36px !important;
    flex: none !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background-color: rgba(var(--hdr-tint, var(--hdr-base)), var(--hdr-a, 1)) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-name-wrap {
    background-color: rgba(var(--hdr-tint, var(--hdr-base)), var(--hdr-a, 1)) !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    justify-content: center;
    max-width: 62%;
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, calc(var(--hdr-shadow, 0) * .35)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-id {
    justify-content: center;
}
/* 泡泡里的图标和名字要跟泡泡底色形成对比 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-back,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-settings,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-name {
    color: var(--icon-ink, var(--hdr-ink, currentColor)) !important;
    -webkit-text-fill-color: var(--icon-ink, var(--hdr-ink, currentColor));
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-back .icon-back,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-settings .icon-more-svg {
    stroke: var(--icon-ink, var(--hdr-ink, currentColor)) !important;
}
/* ---------- 顶部：消息层渐变淡出（背景图不受影响） ----------
   渐变必须落在「头部栏下面」才开始，否则第一条消息和顶部时间戳会被一起淡掉、看着像被遮住。 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages {
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0,
        rgba(0, 0, 0, .35) calc(var(--statusbar-h, 0px) + 14px),
        #000 calc(var(--statusbar-h, 0px) + 66px));
    mask-image: linear-gradient(to bottom,
        transparent 0,
        rgba(0, 0, 0, .35) calc(var(--statusbar-h, 0px) + 14px),
        #000 calc(var(--statusbar-h, 0px) + 66px));
}

/* ---------- 返回按钮：缩到能放进泡泡 ---------- */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-detail-back {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-detail-back .icon-back {
    width: 18px !important;
    height: 18px !important;
}

/* ---------- 名字泡泡：靠左包住头像；居中只包名字 ---------- */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"][data-look-namepos="left"] .chat-detail-id {
    background-color: rgba(var(--hdr-tint, var(--hdr-base)), var(--hdr-a, 1)) !important;
    border-radius: 999px !important;
    padding: 4px 14px 4px 4px !important;
    flex: none !important;
    max-width: 80%;
    align-self: flex-start;
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, calc(var(--hdr-shadow, 0) * .35)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"][data-look-namepos="left"] .chat-detail-name-wrap {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    flex: none !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"][data-look-namepos="center"] .chat-detail-name-wrap {
    flex: none !important;
    padding: 5px 13px !important;
}
/* 会话页返回键（.chat-detail-back）同样进泡泡 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-back {
    background-color: rgba(var(--hdr-tint, var(--hdr-base)), var(--hdr-a, 1)) !important;
    border-radius: 999px !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, calc(var(--hdr-shadow, 0) * .35)) !important;
}
/* 返回键泡泡里的箭头颜色 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-back {
    color: var(--icon-ink, var(--hdr-ink, currentColor)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-detail-back .icon-back {
    stroke: var(--icon-ink, var(--hdr-ink, currentColor)) !important;
}
/* 更多按钮永远靠右 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-detail-settings {
    margin-left: auto !important;
}
/* 头像居中时，名字仍可选靠左 / 居中 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-avpos="center"][data-look-namepos="left"] .chat-detail-id {
    align-items: flex-start !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-avpos="center"][data-look-namepos="left"] .chat-detail-name-wrap {
    justify-content: flex-start !important;
}
/* ============================================================
   会话内菜单：颜色跟图标色 / 底栏文字色，悬停态中性，与主题无关
   ============================================================ */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-plus-item,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .msg-menu-item,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .group-msg-menu-item {
    color: var(--icon-ink, var(--bar-ink, currentColor)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .msg-menu-item.danger,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .group-msg-menu-item.danger {
    color: #E5484D !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-plus-item:hover,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-plus-item:active,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .msg-menu-item:hover,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .msg-menu-item:active,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .group-msg-menu-item:hover {
    background: rgba(127, 127, 127, .18) !important;
    color: var(--icon-ink, var(--bar-ink, currentColor)) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .msg-menu-item.danger:hover {
    background: rgba(229, 72, 77, .14) !important;
    color: #E5484D !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-plus-item svg,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .msg-menu-item svg {
    stroke: var(--icon-ink, var(--bar-ink, currentColor)) !important;
    fill: none !important;
}
/* 泡泡模式：菜单背景跟泡泡一致（用泡泡那层透明度） */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .chat-plus-menu,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .msg-menu,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view[data-look-bubmode="on"] .group-msg-menu {
    background-color: rgba(var(--bar-tint, var(--bar-base)), calc(var(--bar-a, 1) * .55)) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
    backdrop-filter: blur(16px) saturate(1.5) !important;
}

/* ============================================================
   会话卡片：外卖 / 转账
   ------------------------------------------------------------
   皮肤会给所有 .chat-message 统一刷底色 / 去边框 / 改圆角；
   卡片也是 .chat-message（user / assistant），不拦的话就变成
   一条黄色（kk）/ 蓝色（xx）的普通消息 —— “美化没应用”。
   这里放在文件最后，把卡片自己的设计拿回来；选择器带上
   .chat-messages 是为了压过“自定义气泡 / 调色板 / 气泡款式”。
   ============================================================ */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.user.takeout-msg,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.assistant.takeout-msg,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.user.transfer-msg,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.assistant.transfer-msg {
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-style: solid !important;
    border-width: 1px !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.user.takeout-msg,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.assistant.takeout-msg {
    width: 78% !important; max-width: 78% !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    background-color: rgba(255, 255, 255, .05) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: var(--text) !important;
}
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.user.transfer-msg,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.assistant.transfer-msg {
    width: 68% !important; max-width: 68% !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    background-color: transparent !important;
    background-image: linear-gradient(180deg, rgba(212, 106, 147, .14), rgba(212, 106, 147, .06)) !important;
    border-color: rgba(212, 106, 147, .40) !important;
    color: var(--text) !important;
}
/* 卡片不要聊天气泡的“小尾巴”和照片头像 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.takeout-msg::before,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.takeout-msg::after,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.transfer-msg::before,
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.transfer-msg::after {
    display: none !important;
    content: none !important;
}
/* 日间：回到白底 / 浅粉底（跟着 App 的日间或聊天皮肤自己的日间） */
html[data-mode="day"][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.user.takeout-msg,
html[data-mode="day"][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.assistant.takeout-msg,
html[data-chat-mode="day"][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.user.takeout-msg,
html[data-chat-mode="day"][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.assistant.takeout-msg {
    background: #FFFFFF !important;
    background-image: none !important;
    border-color: var(--day-line) !important;
    color: var(--day-ink) !important;
}
html[data-mode="day"][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.user.transfer-msg,
html[data-mode="day"][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.assistant.transfer-msg,
html[data-chat-mode="day"][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.user.transfer-msg,
html[data-chat-mode="day"][data-chat-skin] #page-chat .chat-detail-view .chat-messages .chat-message.assistant.transfer-msg {
    background: #FDF1F6 !important;
    background-image: none !important;
    border-color: rgba(178, 58, 102, .3) !important;
    color: var(--day-ink) !important;
}

/* 引用条出现时输入区变高：消息区多留一段，最后一条不会被挡住 */
html[data-chat-mode][data-chat-skin] #page-chat .chat-detail-view:has(.chat-quote-bar:not([hidden])) .chat-messages {
    padding-bottom: 140px !important;
}

/* ============================================================
   引用消息：跟皮肤走
   ============================================================ */
html[data-chat-skin="kk"] .chat-quote-bar {
    background: #F5F5F5;
    color: #5E6B75;
    border-left-color: #FEE500;
}
html[data-chat-skin="kk"] .cq-name { color: #8A7600; }
html[data-chat-skin="kk"] .cq-close { background: rgba(0, 0, 0, .06); }
html[data-chat-skin="xx"] .chat-quote-bar {
    background: #2C2C2E;
    color: #B8B8BD;
    border-left-color: #0A84FF;
}
html[data-chat-skin="xx"] .cq-name { color: #6FB4FF; }
html[data-chat-skin="xx"] .cq-close { background: rgba(255, 255, 255, .10); }
html[data-chat-skin="kk"][data-chat-mode="night"] .chat-quote-bar {
    background: #2C2C2E;
    color: #B8B8BD;
}
html[data-chat-skin="kk"][data-chat-mode="night"] .cq-name { color: #FEE500; }
html[data-chat-skin="kk"][data-chat-mode="night"] .cq-close { background: rgba(255, 255, 255, .10); }
html[data-chat-skin="xx"][data-chat-mode="night"] .chat-quote-bar {
    background: #2C2C2E;
    color: #B8B8BD;
}
html[data-chat-skin="xx"][data-chat-mode="night"] .cq-name { color: #6FB4FF; }
html[data-chat-skin="kk"] .chat-message.user .chat-quote { background: rgba(0, 0, 0, .10); }
html[data-chat-skin="kk"] .chat-message.assistant .chat-quote { background: rgba(0, 0, 0, .05); }
html[data-chat-skin="xx"] .chat-message.user .chat-quote { background: rgba(255, 255, 255, .16); }
html[data-chat-skin="xx"] .chat-message.assistant .chat-quote { background: rgba(255, 255, 255, .10); }
html[data-chat-skin="kk"] .group-msg.user .chat-quote { background: rgba(0, 0, 0, .10); }
html[data-chat-skin="kk"] .group-msg:not(.user) .chat-quote { background: rgba(0, 0, 0, .05); }
html[data-chat-skin="xx"] .group-msg.user .chat-quote { background: rgba(255, 255, 255, .16); }
html[data-chat-skin="xx"] .group-msg:not(.user) .chat-quote { background: rgba(255, 255, 255, .10); }
/* 引用块的左侧竖线 / 名字跟着皮肤主色走 */
html[data-chat-skin="kk"] .chat-quote { border-left-color: rgba(138, 118, 0, .55); }
html[data-chat-skin="kk"] .chat-message.assistant .chat-quote { border-left-color: #FEE500; }
html[data-chat-skin="kk"] .chat-quote-who { color: #6B5A00; }
html[data-chat-skin="kk"] .chat-message.assistant .chat-quote-who { color: #8A7600; }
html[data-chat-skin="kk"][data-chat-mode="night"] .chat-message.assistant .chat-quote-who,
html[data-chat-skin="kk"][data-chat-mode="night"] .group-msg:not(.user) .chat-quote-who { color: #FEE500; }
html[data-chat-skin="xx"] .chat-quote { border-left-color: rgba(10, 132, 255, .7); }
html[data-chat-skin="xx"] .chat-quote-who { color: #6FB4FF; }
html[data-chat-skin="xx"] .chat-message.user .chat-quote-who,
html[data-chat-skin="xx"] .group-msg.user .chat-quote-who { color: #FFFFFF; }
html[data-chat-skin="kk"] .group-msg.user .chat-quote { border-left-color: rgba(138, 118, 0, .55); }
html[data-chat-skin="kk"] .group-msg.user .chat-quote-who { color: #6B5A00; }
html[data-chat-skin="xx"] .group-msg .chat-quote { border-left-color: rgba(10, 132, 255, .7); }
html[data-chat-mode="day"][data-chat-skin="kk"] .chat-quote-bar {
    background: #FFFFFF;
    color: #5E6B75;
}
html[data-chat-mode="day"][data-chat-skin="xx"] .chat-quote-bar {
    background: #F7F7F9;
    color: #4A4A4F;
    border-left-color: #0A84FF;
}
html[data-chat-mode="day"][data-chat-skin="xx"] .cq-name { color: #0A84FF; }

/* P8: chat input row stays on one line, including framed phone */
.chat-input-main { display:flex; align-items:center; gap:8px; width:100%; min-width:0; flex-wrap:nowrap; }
.chat-input-main > div:first-child { flex:0 0 40px; width:40px; }
.chat-input-main > .chat-btn { flex:0 0 40px; }
.chat-input-main .chat-input-pill { flex:1 1 0 !important; min-width:0 !important; }
#phone-drawer.framed .chat-input-main { gap:6px; }
#phone-drawer.framed .chat-input-area { padding-top:8px; padding-bottom:10px; }

/* 本次聊天演绎预计输入（不是记忆总结批次） */
.chat-input-token {
    padding: 0 6px 3px;
    font-size: 10px;
    line-height: 1.4;
    color: var(--text-dim);
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.chat-input-token:empty { display: none; }
html[data-mode="day"] .chat-input-token { color: var(--day-dim); }
/* 会话设置：聊天演绎预计输入 */
.chat-token-setting-value {
    margin: 4px 0 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
html[data-mode="day"] .chat-token-setting-value {
    background: rgba(36,26,34,.04);
    border-color: var(--day-line);
    color: var(--day-ink);
}
.chat-token-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
}
.chat-token-toggle input { width: auto; margin: 0; }
html[data-mode="day"] .chat-token-toggle { color: var(--day-dim); }