@charset "UTF-8";
/**
 * FlintHub — 碎语时光插件 · 样式表（前台 + 后台）
 *
 * 三条硬约束（改本文件前先读）：
 *  ① **只用 9 套主题共有的 `--mn-*` 变量**（实测 103 个）。用 `--mn-danger` / `--mn-spectrum-*`
 *     之类**非全主题变量**会在缺失主题下变成「浅底浅字」。
 *     核对脚本：`.workbuddy-ai/tools/mn_vars_common.py`（列出全部 10 个 CSS 文件共有的变量）。
 *  ② **零内联**：所有静态样式都写在这里，视图/钩子里不出现 `style=""` / `on*=`。
 *  ③ **选择器一律 `.suiyu-` 前缀**，避免污染核心。
 *
 * ⚠️⚠️ **插件 CSS 早于核心 CSS 加载**（`hook/layout_head_end.php` 注入点在
 *    `layouts/main.php:40`，而核心 `modern.css` / `editor.css` 在其后）
 *    → **同 (0,1,0) 权重时核心后胜**。所以凡是覆盖核心类（`.mn-input` 等）的地方，
 *      必须**提权**（`input.suiyu-w-input` = (0,1,1) > `.mn-input` = (0,1,0)）。
 *
 * @file plugins/suiyu/assets/style.css
 * @package Plugin\Suiyu
 * @version 1.0.0
 */

/* ==================================================================
   0. 通用工具
   ================================================================== */
/* ⚠️⚠️ 必须带 `!important`：本文件里 `.suiyu-preview { display: flex }`（第 155 行）
   与它**同权重 (0,1,0) 且在其后** → 按 CSS 层叠「后者胜」会把 `display: none` 压掉，
   `.suiyu-hidden` 静默失效（预览框永远可见、永远多出 10px 空白）。
   加 `!important` 后本类恒胜，与规则书写顺序解耦；核心自身对 `[hidden]` / `[x-cloak]`
   也是这个写法。 */
.suiyu-hidden { display: none !important; }
.suiyu-muted  { color: var(--mn-text-muted); }
.suiyu-link   { color: var(--mn-text-link); margin-left: 4px; }
.suiyu-hint   { margin: 6px 0 0; font-size: 12px; color: var(--mn-text-muted); line-height: 1.6; }

/* 轻量提示条（由 assets/script.js 动态插入，2.6s 自动移除） */
.suiyu-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    z-index: 3000;
    transform: translateX(-50%);
    max-width: 80vw;
    padding: 9px 18px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg-card);
    color: var(--mn-text);
    font-size: 13px;
    line-height: 1.5;
    box-shadow: var(--mn-shadow-sm);
    pointer-events: none;
}

.suiyu-wrap { padding: 16px 20px 20px; }

/* ==================================================================
   1. 顶部 tabs / 提示条
   ================================================================== */
.suiyu-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.suiyu-alert {
    margin: 0 0 14px;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid transparent;
}
.suiyu-alert.is-ok {
    background: var(--mn-alert-success-bg);
    color: var(--mn-alert-success-text);
    border-color: var(--mn-alert-success-border);
}
.suiyu-alert.is-err {
    background: var(--mn-alert-error-bg);
    color: var(--mn-alert-error-text);
    border-color: var(--mn-alert-error-border);
}

/* ==================================================================
   2. 发布框
   ================================================================== */
.suiyu-composer {
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid var(--mn-border);
    border-radius: 10px;
    background: var(--mn-bg);
}

.suiyu-textarea {
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg-input);
    color: var(--mn-text);
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
    box-sizing: border-box;
}
.suiyu-textarea:focus {
    outline: none;
    border-color: var(--mn-primary);
}

.suiyu-composer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.suiyu-upload {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg);
    color: var(--mn-text-secondary);
    font-size: 13px;
    cursor: pointer;
}
.suiyu-upload:hover { border-color: var(--mn-primary); color: var(--mn-primary); }
.suiyu-upload input[type="file"] { display: none; }

.suiyu-counter { margin-left: auto; font-size: 12px; color: var(--mn-text-muted); }

.suiyu-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    border: 1px solid var(--mn-primary);
    border-radius: 8px;
    background: var(--mn-primary);
    color: var(--mn-text-inverse);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
}
.suiyu-btn-main:hover { background: var(--mn-primary-hover); border-color: var(--mn-primary-hover); }

.suiyu-btn-plain {
    padding: 7px 14px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg);
    color: var(--mn-text-secondary);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}
.suiyu-btn-plain:hover { border-color: var(--mn-primary); color: var(--mn-primary); }

.suiyu-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.suiyu-preview img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--mn-border-light);
}

/* ==================================================================
   3. 流 / 卡片
   ================================================================== */
.suiyu-list { display: block; }

.suiyu-card {
    padding: 14px 0;
    border-bottom: 1px solid var(--mn-border-light);
}
.suiyu-card:last-child { border-bottom: none; }

.suiyu-card-head { display: flex; align-items: center; gap: 10px; }

.suiyu-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mn-primary-subtle);
    color: var(--mn-primary);
    text-decoration: none;
}
.suiyu-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suiyu-avatar-ph { font-size: 16px; font-weight: 600; }
.suiyu-avatar-sm { width: 30px; height: 30px; }
.suiyu-avatar-sm .suiyu-avatar-ph { font-size: 13px; }

.suiyu-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.suiyu-name { font-size: 14px; font-weight: 600; color: var(--mn-text); text-decoration: none; }
.suiyu-name:hover { color: var(--mn-primary); }
.suiyu-time { font-size: 12px; color: var(--mn-text-muted); text-decoration: none; }

.suiyu-head-ops { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.suiyu-op {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mn-text-muted);
    cursor: pointer;
}
.suiyu-op:hover { background: var(--mn-bg-row-hover); color: var(--mn-primary); }
.suiyu-inline { display: inline; margin: 0; }

.suiyu-text {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--mn-text);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.suiyu-text img.emoji-emotion { vertical-align: -3px; }

/* 图片九宫格 */
.suiyu-grid {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    max-width: 480px;
}
.suiyu-grid-1 { grid-template-columns: 1fr; max-width: 320px; }
.suiyu-grid-2 { grid-template-columns: repeat(2, 1fr); }
.suiyu-grid-3,
.suiyu-grid-4,
.suiyu-grid-5,
.suiyu-grid-6,
.suiyu-grid-7,
.suiyu-grid-8,
.suiyu-grid-9 { grid-template-columns: repeat(3, 1fr); }
.suiyu-grid-sm { max-width: 300px; }

.suiyu-shot {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--mn-border-light);
    line-height: 0;
}
.suiyu-shot img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* 转发引用块 */
.suiyu-quote {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mn-border-light);
    border-radius: 8px;
    background: var(--mn-bg);
}
.suiyu-quote-head { font-size: 13px; font-weight: 600; color: var(--mn-text-link); text-decoration: none; }
.suiyu-quote-text { margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--mn-text-secondary); word-break: break-word; }
.suiyu-quote-gone { margin-top: 4px; font-size: 13px; color: var(--mn-text-muted); }

/* 操作栏 */
.suiyu-actions { display: flex; align-items: center; gap: 22px; margin-top: 10px; }

.suiyu-act {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    padding: 2px 0;
    font-size: 13px;
    color: var(--mn-text-muted);
    text-decoration: none;
    cursor: pointer;
}
.suiyu-act:hover { color: var(--mn-primary); }
.suiyu-act.is-on { color: var(--mn-error); }
.suiyu-act.is-disabled { opacity: 0.5; cursor: default; }

/* 卡片内联表单（转发 / 举报） */
.suiyu-inline-form {
    margin: 10px 0 0;
    padding: 10px;
    border: 1px solid var(--mn-border-light);
    border-radius: 8px;
    background: var(--mn-bg);
}
.suiyu-inline-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg-input);
    color: var(--mn-text);
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}
.suiyu-inline-input:focus { outline: none; border-color: var(--mn-primary); }
.suiyu-inline-bar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* 加载更多 */
.suiyu-more { text-align: center; padding: 14px 0 2px; }
.suiyu-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 20px;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    color: var(--mn-text-secondary);
    font-size: 13px;
    text-decoration: none;
}
.suiyu-more-btn:hover { border-color: var(--mn-primary); color: var(--mn-primary); }
.suiyu-more-end { font-size: 12px; color: var(--mn-text-muted); }

/* ==================================================================
   4. 用户主页头部
   ================================================================== */
.suiyu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin: 0 0 14px;
    border: 1px solid var(--mn-border-light);
    border-radius: 10px;
    background: var(--mn-bg);
}
.suiyu-profile-info { min-width: 0; }
.suiyu-profile-name { font-size: 15px; font-weight: 600; color: var(--mn-text); }
.suiyu-profile-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 3px; font-size: 12px; color: var(--mn-text-muted); }

.suiyu-follow-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border: 1px solid var(--mn-primary);
    border-radius: 8px;
    background: var(--mn-bg);
    color: var(--mn-primary);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}
.suiyu-follow-btn:hover { background: var(--mn-primary-subtle); }
.suiyu-follow-btn.is-on { border-color: var(--mn-border); color: var(--mn-text-secondary); background: var(--mn-bg); }

/* ==================================================================
   5. 评论（含楼中楼）
   ================================================================== */
.suiyu-comments { margin-top: 18px; border-top: 1px solid var(--mn-border-light); padding-top: 14px; }

.suiyu-comments-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mn-text);
}
.suiyu-comments-count { font-size: 12px; color: var(--mn-text-muted); font-weight: 400; }

.suiyu-comment-form { margin-bottom: 16px; }
.suiyu-comment-form-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.suiyu-reply-hint { font-size: 12px; color: var(--mn-text-muted); }
.suiyu-comment-form-bar .suiyu-btn-main { margin-left: auto; }

.suiyu-comments-list { display: block; }
.suiyu-comment-wrap { padding: 10px 0; border-bottom: 1px solid var(--mn-border-light); }
.suiyu-comment-wrap:last-child { border-bottom: none; }

.suiyu-comment { display: flex; gap: 10px; }
.suiyu-comment-main { flex: 1 1 auto; min-width: 0; }
.suiyu-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.suiyu-comment-to { font-size: 12px; color: var(--mn-text-muted); }
.suiyu-comment-text {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--mn-text);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.suiyu-comment-ops { margin-top: 4px; }
.suiyu-op-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 12px;
    color: var(--mn-text-muted);
    cursor: pointer;
}
.suiyu-op-text:hover { color: var(--mn-primary); }

.suiyu-replies {
    margin: 8px 0 0 40px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--mn-bg);
}
.suiyu-replies .suiyu-comment-wrap { border-bottom: none; padding: 6px 0; }

/* ==================================================================
   6. 搜索页
   ================================================================== */
.suiyu-search-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.suiyu-search-form .mn-input { flex: 1 1 220px; min-width: 0; }
input.suiyu-search-input { width: auto; }
.suiyu-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--mn-text-secondary); white-space: nowrap; }
.suiyu-search-meta { margin-bottom: 10px; font-size: 12px; color: var(--mn-text-muted); }

/* ==================================================================
   7. 右栏「碎语广场」面板
   ================================================================== */
.suiyu-panel-list { list-style: none; margin: 0; padding: 0; }
.suiyu-panel-item { margin-bottom: 2px; }
.suiyu-panel-link {
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    text-decoration: none;
    line-height: 1.5;
}
.suiyu-panel-link:hover { background: var(--mn-bg-row-hover); }
.suiyu-panel-author { display: block; font-size: 12px; font-weight: 600; color: var(--mn-text); }
.suiyu-panel-text {
    display: block;
    font-size: 12px;
    color: var(--mn-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.suiyu-panel-more { color: var(--mn-text-muted); text-decoration: none; }
.suiyu-panel-more:hover { color: var(--mn-primary); }

/* ==================================================================
   8. 后台
   ================================================================== */
.suiyu-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.suiyu-stat { font-size: 13px; color: var(--mn-text-muted); }
.suiyu-stat b { font-size: 16px; color: var(--mn-text); margin-right: 4px; }

.suiyu-admin-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.suiyu-admin-search .mn-input { flex: 0 1 280px; }
input.suiyu-admin-search-input { width: 280px; }

.suiyu-word-add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
input.suiyu-w-input  { width: 180px; }
select.suiyu-w-select { width: 110px; }

input.suiyu-s-input { width: 140px; }
.suiyu-settings { max-width: 620px; }
.suiyu-field { margin-bottom: 16px; }
.suiyu-field .mn-label { display: inline-block; margin-bottom: 5px; font-size: 13px; color: var(--mn-text-secondary); }

.suiyu-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.suiyu-filter-item {
    padding: 5px 12px;
    border: 1px solid var(--mn-border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--mn-text-secondary);
    text-decoration: none;
}
.suiyu-filter-item:hover { border-color: var(--mn-primary); color: var(--mn-primary); }
.suiyu-filter-item.is-on { border-color: var(--mn-primary); background: var(--mn-primary-subtle); color: var(--mn-primary); }

/* ==================================================================
   9. 窄屏
   ================================================================== */
@media (max-width: 768px) {
    .suiyu-wrap { padding: 12px 14px 16px; }
    .suiyu-grid { max-width: none; }
    .suiyu-actions { gap: 16px; }
    .suiyu-replies { margin-left: 12px; }
    .suiyu-profile { flex-wrap: wrap; }
    .suiyu-follow-btn { margin-left: 0; }
    .suiyu-composer-bar { flex-wrap: wrap; }
    .suiyu-counter { margin-left: 0; }
    input.suiyu-w-input { width: 120px; }
    input.suiyu-s-input { width: 110px; }
}