/**
 * FlintHub — 轻量级 PHP 社区系统
 * AI 划词润色 — 前台样式
 *
 * ⚠️ 权重说明（规范 §A）：核心 `.mn-btn` / `.mn-input` 与插件类同为 (0,1,0)，
 *    谁后加载谁胜；而本文件由 layout_head_end 注入，**早于**部分核心样式。
 *    因此本文件所有规则都挂在 `#aip-bubble`（ID，0,1,0 起算 + 元素/类叠加）下，
 *    用 ID 选择器把权重提到 (1,x,x)，确保任何加载顺序都不会被核心静默压掉。
 *
 * ⚠️⚠️ 变量只能用核心里**真实定义过**的（规范 §A.2 红线）：
 *    经核对 modern.css / assets/css/themes/*.css，以下变量**不存在**，用了就是
 *    「var() 失效 → 回落到默认值 → 暗色主题下白底浅字」：
 *        ✗ --mn-surface / --mn-surface-2 / --mn-surface-3
 *        ✗ --mn-text-2
 *        ✗ --mn-danger / --mn-danger-text / --mn-danger-bg / --mn-danger-border
 *    正确对应关系：
 *        背景卡片 → --mn-bg-card      次级底 → --mn-bg / --mn-bg-row-hover
 *        输入底   → --mn-bg-input     次要字 → --mn-text-secondary
 *        更弱字   → --mn-text-muted   分隔线 → --mn-divider
 *        报错三件 → --mn-alert-error-bg / -text / -border
 *    `var(--x, 兜底)` 的兜底值只在变量**未定义**时生效，不能靠它救「定义成错名字」。
 *
 * ⚠️ 零内联：本文件是唯一样式来源，视图/钩子里没有任何 style="" 静态属性。
 *    唯一的动态样式是 JS 设置的 `panel.style.left/top`（气泡定位，每处都不同）。
 *
 * @file plugins/ai_polish/assets/style.css
 * @package Plugin\AiPolish
 * @version 1.1.0
 */

/* ===== 容器：fixed 定位，自身不占位，默认隐藏 ===== */
#aip-bubble {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;   /* 遮罩层本身不吃点击，避免挡住编辑器 */
}

#aip-bubble[hidden] {
    display: none;
}

/* ===== 面板 ===== */
#aip-bubble .aip-panel {
    position: fixed;        /* 由 JS 设 left/top */
    pointer-events: auto;   /* 面板本身可交互 */
    width: 360px;
    max-width: calc(100vw - 16px);
    background: var(--mn-bg-card, #fff);
    color: var(--mn-text, #1f2328);
    border: 1px solid var(--mn-border, #d8dde3);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    font-size: 13px;
    line-height: 1.6;
    overflow: hidden;
}

/* ===== 阶段 ===== */
#aip-bubble .aip-stage {
    padding: 10px;
}

#aip-bubble .aip-stage[hidden] {
    display: none;
}

/* ===== 动作按钮行 ===== */
#aip-bubble .aip-btn-row,
#aip-bubble .aip-more-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#aip-bubble .aip-more-wrap {
    position: relative;
    margin-top: 6px;
}

#aip-bubble .aip-more-menu {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--mn-border, #e3e7ec);
}

#aip-bubble .aip-more-menu[hidden] {
    display: none;
}

/* ===== 按钮 ===== */
#aip-bubble .aip-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.4;
    color: var(--mn-text, #1f2328);
    background: var(--mn-bg-row-hover, #f6f8fa);
    border: 1px solid var(--mn-border, #d8dde3);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

#aip-bubble .aip-btn:hover {
    background: var(--mn-bg, #eef1f5);
    border-color: var(--mn-primary, #2b6cb0);
}

#aip-bubble .aip-btn:focus-visible {
    outline: 2px solid var(--mn-primary, #2b6cb0);
    outline-offset: 1px;
}

#aip-bubble .aip-btn-primary {
    color: #fff;
    background: var(--mn-primary, #2b6cb0);
    border-color: var(--mn-primary, #2b6cb0);
}

#aip-bubble .aip-btn-primary:hover {
    filter: brightness(1.08);
    background: var(--mn-primary, #2b6cb0);
}

#aip-bubble .aip-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--mn-text-secondary, #57606a);
}

#aip-bubble .aip-btn-more::after {
    content: "\25BE";       /* ▾ 下拉箭头，纯装饰走伪元素 */
    font-size: 10px;
    opacity: .7;
}

/* ===== 处理中 ===== */
#aip-bubble .aip-stage-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

#aip-bubble .aip-loading-text {
    flex: 1;
    color: var(--mn-text-secondary, #57606a);
}

#aip-bubble .aip-spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid var(--mn-border, #d8dde3);
    border-top-color: var(--mn-primary, #2b6cb0);
    border-radius: 50%;
    animation: aip-spin .7s linear infinite;
}

@keyframes aip-spin {
    to { transform: rotate(360deg); }
}

/* ===== 结果对照 ===== */
#aip-bubble .aip-diff-label {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mn-text-secondary, #57606a);
}

#aip-bubble .aip-diff-src,
#aip-bubble .aip-diff-dst {
    margin: 0 0 8px;
    padding: 8px 10px;
    max-height: 160px;
    overflow-y: auto;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.65;
    /* ★ 保留模型返回的换行（setText 只写 textContent，靠这里显示换行） */
    white-space: pre-wrap;
    word-break: break-word;
    overscroll-behavior: contain;
}

#aip-bubble .aip-diff-src {
    background: var(--mn-bg-row-hover, #f6f8fa);
    color: var(--mn-text-secondary, #57606a);
}

#aip-bubble .aip-diff-dst {
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-primary, #2b6cb0);
    color: var(--mn-text, #1f2328);
}

/* ===== 底部按钮区 ===== */
#aip-bubble .aip-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

#aip-bubble .aip-foot-main {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#aip-bubble .aip-foot-fb {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

#aip-bubble .aip-foot-fb[hidden] {
    display: none;
}

#aip-bubble .aip-fb-btn {
    appearance: none;
    padding: 2px 6px;
    font-size: 11px;
    font-family: inherit;
    color: var(--mn-text-muted, #8a929c);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

#aip-bubble .aip-fb-btn:hover {
    color: var(--mn-primary, #2b6cb0);
    border-color: var(--mn-border, #d8dde3);
}

/* ===== 配额 ===== */
#aip-bubble .aip-quota-line {
    margin-top: 6px;
    font-size: 11px;
    color: var(--mn-text-muted, #8a929c);
    text-align: right;
}

#aip-bubble .aip-quota-line[hidden] {
    display: none;
}

/* ===== 错误 ===== */
#aip-bubble .aip-err-text {
    margin-bottom: 10px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mn-alert-error-text, #b42318);
    background: var(--mn-alert-error-bg, #fef3f2);
    border: 1px solid var(--mn-alert-error-border, #fecdca);
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 复制降级用的隐藏 textarea（由 JS 临时插入） */
#aip-bubble .aip-hidden-ta {
    position: fixed;
    left: -9999px;
    top: 0;
    opacity: 0;
}

/* ==========================================================================
   一·B、工具栏按钮（移动端统一入口）
   --------------------------------------------------------------------------
   ★ 挂 `.editor-btn` 是刻意的：直接继承 editor.css 的 padding / 圆角 /
     hover 变量（--mn-editor-btn-*），换主题自动跟随，不必重写一套。
     这里只补「与普通按钮不同」的那一小部分，符合极简取向。
   ⚠️ 选择器用 `.ai-polish-toolbar-btn`（类，0,1,0），与核心 `.editor-btn`
      同权重 → 谁后加载谁胜。本插件 CSS 由 layout_head_end 注入，**早于**
      editor.css（main.php:81）→ 同权重必输。故此处**必须提权**：
      用 `button.ai-polish-toolbar-btn`（0,1,1）压过 `.editor-btn`（0,1,0）。
   ========================================================================== */

button.ai-polish-toolbar-btn {
    /* 文字按钮比图标按钮窄，给一点内边距让它不挤着相邻按钮 */
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    /* 与「插入 / 表情」这些图标按钮区分开：用主题主色点一下 */
    color: var(--mn-primary, #2b6cb0);
}

button.ai-polish-toolbar-btn:hover {
    background: var(--mn-editor-btn-hover-bg, #e9ecef);
    color: var(--mn-primary, #2b6cb0);
}

/* ==========================================================================
   一·C、轻提示（Toast）
   --------------------------------------------------------------------------
   ⚠️ 与气泡分开的独立元素（id=aip-toast，在 #aip-bubble 之外），因为：
      · 气泡是 pointer-events:none 的遮罩层，且位置由 JS 按选区矩形算；
      · 「没选中文字」时**根本没有选区**，拿不到 rect；
      · 提示要固定居中、自己淡出，定位模型与气泡完全不同。
   所以本段**不**以 #aip-bubble 为前缀，改挂在 #aip-toast 上（同为 ID 权重）。
   ========================================================================== */

#aip-toast {
    position: fixed;
    left: 50%;
    bottom: 64px;
    transform: translateX(-50%) translateY(8px);
    z-index: 9999;              /* 高于气泡（9998），保证提示永远看得见 */
    max-width: min(80vw, 420px);
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--mn-bg-card, #fff);
    color: var(--mn-text, #1f2328);
    border: 1px solid var(--mn-border, #d8dde3);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    pointer-events: none;       /* 不挡任何点击 */
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}

#aip-toast[hidden] {
    display: none;
}

#aip-toast.aip-toast-in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#aip-toast .aip-toast-text {
    display: block;
    word-break: break-word;
}

/* ===== 移动端：面板改为底部固定条 ===== */
@media (max-width: 600px) {
    #aip-bubble .aip-panel {
        left: 8px !important;
        right: 8px;
        top: auto !important;
        bottom: 8px;
        width: auto;
        max-width: none;
        border-radius: 12px;
    }

    #aip-bubble .aip-diff-src,
    #aip-bubble .aip-diff-dst {
        max-height: 24vh;
    }

    /* ★ 窄屏气泡压到底部 → 提示改到顶部，否则两者叠在一起互相遮 */
    #aip-toast {
        bottom: auto;
        top: 16px;
        transform: translateX(-50%) translateY(-8px);
    }

    #aip-toast.aip-toast-in {
        transform: translateX(-50%) translateY(0);
    }
}

/* ===== 暗色主题 =====
 * ★ 刻意**没有** `@media (prefers-color-scheme: dark)` 覆盖块。
 *   本站的暗色是通过「主题切换」实现的（assets/css/themes/modern-night.css 覆盖 :root），
 *   不是靠系统偏好；上面所有颜色都取核心 --mn-* 变量 → 换主题自动跟着变。
 *   若这里再加 prefers-color-scheme 块，会出现「用户选了亮色主题、但系统是深色」
 *   时面板被强行压暗、跟周边正文对不上的割裂现象。
 */

/* ==========================================================================
   二、后台配置页表单
   --------------------------------------------------------------------------
   ⚠️ 后台是**独立配色体系**：admin.css 在 `.admin-container` 上定义的是 `--c-*`
      变量（且文件头明写「不依赖任何 CSS 变量，不跟随前台主题」），
      所以这里一律用 `--c-*`，**不要**用前台的 `--mn-*`。
   ⚠️ 所有规则挂在 `#aip-admin` 下 —— 该 ID 就在 `.admin-container` 元素自身上，
      权重 (1,x,0) 高于 admin.css 的 (0,2,0)，不必担心被压掉。
   ========================================================================== */

#aip-admin .aip-admin-sub {
    margin: 0 0 14px;
    color: var(--c-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

#aip-admin .aip-admin-card {
    margin-bottom: 18px;
}

#aip-admin .aip-admin-h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
}

#aip-admin .aip-admin-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

#aip-admin .aip-admin-preset {
    padding: 4px 12px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}

#aip-admin .aip-admin-preset:hover {
    color: var(--c-primary);
    border-color: var(--c-primary);
}

#aip-admin .aip-admin-row {
    margin: 14px 0;
}

#aip-admin .aip-admin-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
}

#aip-admin .aip-admin-input,
#aip-admin .aip-admin-textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg);
    color: var(--c-text);
    font: inherit;
    font-size: 14px;
}

#aip-admin .aip-admin-input:focus,
#aip-admin .aip-admin-textarea:focus {
    outline: none;
    border-color: var(--c-primary);
}

/* 数字框不该拉满整行 —— 3 位数拉 900px 宽毫无意义 */
#aip-admin .aip-admin-num {
    width: 140px;
}

#aip-admin .aip-admin-textarea {
    min-height: 80px;
    resize: vertical;
    line-height: 1.6;
}

#aip-admin .aip-admin-hint {
    display: block;
    margin-top: 5px;
    color: var(--c-text-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

#aip-admin .aip-admin-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

#aip-admin .aip-admin-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--c-text);
    cursor: pointer;
}

#aip-admin .aip-admin-actions {
    margin: 22px 0 8px;
}