/* ===========================================================================
   阅读室浮窗模块样式（rr- 命名空间，配 reading-room.js）
   仅"从书本阅读器进入"的阅读室用浮窗：把完整聊天屏 #character-chat-screen 框成
   可拖拽 / 缩放 / 最小化 / 最大化的小窗，浮在书本阅读器之上。
   复用现有聊天头部当拖拽条（注入 最小化/最大化 按钮，原 ← 当关闭）。
   =========================================================================== */

/* 浮窗态：覆盖 #character-chat-screen 的全屏内联样式（!important 压内联） */
#character-chat-screen.rr-win {
    top: var(--rr-top, 64px) !important;
    left: var(--rr-left, 50%) !important;
    width: var(--rr-w, 380px) !important;
    height: var(--rr-h, 72vh) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.25) !important;
    overflow: hidden !important;
}

/* 最大化：rr-win 保留（控件/状态仍在），仅把盒子撑满全屏 */
#character-chat-screen.rr-win.rr-maximized {
    top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    border-radius: 0 !important; box-shadow: none !important; border: none !important;
}

/* 侧边双屏：聊天停靠右侧整列，书本阅读器挤到左半（横屏舒适） */
#character-chat-screen.rr-win.rr-side {
    top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important;
    width: var(--rr-side-w, 40vw) !important; height: 100% !important;
    border-radius: 0 !important; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15) !important;
    border: none !important; border-left: 1px solid rgba(var(--accent-rgb), 0.22) !important;
}
/* 把阅读器挤到左半（--rr-side-w 在 :root 上，两处共享）。
   transform 让 #reader-screen 成为其 position:fixed 子元素(顶栏/工具栏/按钮)的包含块，
   使这些固定 chrome 收束到左半区，而不是 100% 视口宽被右侧聊天面板盖住。 */
body.rr-side-on #reader-screen {
    width: calc(100% - var(--rr-side-w, 40vw)) !important;
    transform: translateZ(0);
}
/* 侧边左边缘：拖拽调分屏宽度 */
.rr-side-grip { display: none; }
#character-chat-screen.rr-win.rr-side .rr-side-grip {
    display: block !important; position: absolute !important; left: 0 !important; top: 0 !important;
    right: auto !important; bottom: auto !important; width: 9px !important; height: 100% !important;
    cursor: ew-resize; touch-action: none; z-index: 5003 !important;
}
#character-chat-screen.rr-win.rr-side .rr-side-grip::after {
    content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 40px; border-radius: 2px; background: var(--accent); opacity: 0.4;
}
/* 侧边时右下角缩放手柄无意义，隐藏（改用左边缘调宽） */
#character-chat-screen.rr-win.rr-side .rr-resize { display: none; }

/* 关键修复：浮窗/侧边态把聊天输入框容器(最后一个 div，原 position:fixed; width:100% 全宽底栏)
   强制改回流内静态，使它停在窗口内底部、不漏到整个视口底部，也不再盖住右下角缩放手柄。
   最大化态(:not 排除)保持原全屏 fixed 输入框行为。 */
#character-chat-screen.rr-win:not(.rr-maximized) > div:last-of-type {
    position: static !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; max-width: 100% !important; z-index: auto !important;
    padding-bottom: 12px !important; flex-shrink: 0 !important;
}

/* 10-13 塔拉：浮窗/侧栏底部「AI 最后一条到输入框之间」一大片空白。
   全屏聊天的输入区是 fixed 浮在列表上，所以列表 padding-bottom:130px !important 给它让位（chat.css / style.css）；
   浮窗态输入区已经改回流内（上面那条），那 130px 就成了纯空白。浮窗/侧栏态把它收回来。
   composer-inset.js 的行内值在输入区非 fixed 时会自己撤掉（ReadingRoomWindow 切布局时会叫它重算）。 */
#character-chat-screen.rr-win:not(.rr-maximized) #character-chat-messages {
    padding-bottom: 15px !important;
}

/* 10-13：浮窗不贴屏幕顶，原生端给顶栏垫的状态栏高度（style.css `.azoth-native.azoth-native … .chat-top-header`）
   在浮窗里就是顶上一大片空白。只在「浮窗」态撤掉；侧栏/最大化贴顶，照旧要垫。 */
.azoth-native.azoth-native #character-chat-screen.rr-win:not(.rr-maximized):not(.rr-side) .chat-top-header {
    padding-top: 15px !important;
}

/* 10-13：共读进度细条（coread-active.js 写）——顶栏正下方一行，透明、只显示、点不了。
   原来写在顶栏状态位里，窄浮窗/侧栏会把顶栏挤成好几行。 */
.coread-progress-strip { display: none; }
#character-chat-screen.rr-win .coread-progress-strip:not(:empty) {
    display: block;
    flex-shrink: 0;
    margin: 0;
    padding: 4px 14px;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--accent);
    opacity: 0.85;
    text-align: center;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    user-select: none;
}

/* 头部当拖拽条（最大化时不可拖） */
#character-chat-screen.rr-win:not(.rr-maximized) > div:first-child {
    cursor: grab;
    touch-action: none;
}
#character-chat-screen.rr-win.rr-dragging > div:first-child { cursor: grabbing; }
#character-chat-screen.rr-win.rr-maximized .rr-resize { display: none; }

/* 注入到头部的窗口控制（最小化/最大化），仅浮窗态显示 */
.rr-ctrls { display: none; align-items: center; gap: 6px; flex-shrink: 0; }
#character-chat-screen.rr-win .rr-ctrls { display: inline-flex; }
.rr-ctrl-btn {
    width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer;
    background: rgba(var(--accent-rgb), 0.08); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.rr-ctrl-btn:hover { background: rgba(var(--accent-rgb), 0.18); }
.rr-ctrl-btn:active { transform: scale(0.92); }
.rr-ctrl-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* 右下角缩放手柄 */
.rr-resize { display: none; }
/* 手柄是 <span>（不是 div，避免被 #character-chat-screen>div:last-of-type 选中而误套输入框的 fixed 全宽规则）。
   absolute 相对 .rr-win(position:fixed)=窗口右下角；z-index 高于输入框容器(z-index:5001) 才抓得到。!important 兜底。 */
#character-chat-screen.rr-win .rr-resize {
    display: block !important; position: absolute !important; right: 0 !important; bottom: 0 !important;
    left: auto !important; top: auto !important; width: 24px !important; height: 24px !important;
    cursor: nwse-resize; touch-action: none; z-index: 5003 !important;
}
#character-chat-screen.rr-win .rr-resize::after {
    content: ''; position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px;
    border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); opacity: 0.55;
}

/* 最小化：贴右边缘的小药丸 */
.rr-dot {
    position: fixed; right: 6px; bottom: 100px; z-index: 9001; display: none;
    align-items: center; justify-content: center; padding: 4px; border-radius: 50%;
    background: var(--accent); color: var(--bg); box-shadow: -2px 3px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.rr-dot.rr-on { display: inline-flex; }
.rr-dot img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.5); }
.rr-dot .rr-dot-label { display: none; }
/* 刀5b-3: ta 主动开口未读角标 + 振动（.rr-dot 已是 position:fixed，本身就是 absolute 角标的定位上下文，不要再覆写 position） */
.rr-dot .rr-dot-badge {
    position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #e5484d; color: #fff; font-size: 10px; line-height: 16px;
    font-weight: 700; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); pointer-events: none;
}
@keyframes rr-buzz {
    0%, 100% { transform: translateX(0) rotate(0); }
    15% { transform: translateX(-2px) rotate(-6deg); }
    30% { transform: translateX(2px) rotate(6deg); }
    45% { transform: translateX(-2px) rotate(-4deg); }
    60% { transform: translateX(2px) rotate(4deg); }
    75% { transform: translateX(-1px) rotate(-2deg); }
}
.rr-dot.rr-buzz { animation: rr-buzz 0.6s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .rr-dot.rr-buzz { animation: none; } }

/* 移动端窄屏：浮窗别太小 */
@media (max-width: 480px) {
    #character-chat-screen.rr-win { width: var(--rr-w, 88vw) !important; }
}