/* ==========================================================================
 * editor.css — 评论输入构件样式（js/sr-editor.js）
 *
 * 结构：
 *   .sr-editor                     容器（背景图 + 遮罩 + 圆角）
 *   ├ .sr-editor > textarea        真实表单字段：无 JS 时可见，有 JS 时隐藏
 *   └ .sr-editor > .sr-ed-rich     JS 启用的富输入层（contenteditable，可见）
 *
 * 背景：底色固定为「主题浅色」`--accent-tint`；设置里的图片只作右下角装饰
 * （`--sr-ed-bg` 地址 + `--sr-ed-bg-size` 尺寸 + `--sr-ed-bg-opacity` 透明度，
 * `::after` 层，不铺满）；
 * `--sr-ed-mask`（0~1）用当前主题纸色叠在底色上，控制浓淡，深浅色都清晰。
 * ========================================================================== */

.sr-editor {
    position: relative;
    border-radius: 12px;
    border: 1px solid transparent;
    /* 底色：当前主题色（取浅色档 --accent-tint，深色模式自动变深） */
    background-color: var(--accent-tint);
    transition: border-color .18s ease, box-shadow .18s ease;
}
/* 遮罩：用当前主题纸色叠加，控制底色浓淡（越大越接近纯色底 → 越浅） */
.sr-editor::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    background: var(--paper);
    opacity: var(--sr-ed-mask, .35);
    pointer-events: none;
    z-index: 0;
}
/* 背景图：只作右下角装饰，不铺满、不重复；
 * 放在遮罩之上，所以遮罩不会把它一起洗淡 */
.sr-editor::after {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    background-image: var(--sr-ed-bg, none);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: var(--sr-ed-bg-size, auto 72%);
    /* 透明度：模板设置 → 评论 →「装饰图透明度」（0~1） */
    opacity: var(--sr-ed-bg-opacity, 1);
    pointer-events: none;
    z-index: 0;
}
.sr-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* 真实表单字段：JS 启用后隐藏（仍在 DOM 中参与提交） */
.sr-editor > textarea {
    display: block; width: 100%; min-height: var(--sr-ed-height, 150px); margin: 0;
    padding: 12px 14px; border: 1px solid transparent; border-radius: 12px;
    background: transparent; color: var(--ink);
    font-size: .9rem; font-family: inherit; line-height: 1.7;
    outline: none; resize: vertical;
}
.sr-editor > textarea::placeholder { color: var(--gray); }
.sr-editor.is-on > textarea {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; resize: none; min-height: 0;
}

/* 富输入层：与 textarea 完全同度量，因此视觉上就是「那个输入框」 */
/* 富输入层与真实 textarea 都在 ::before(遮罩) / ::after(装饰图) 之上 */
/* 高度固定（--sr-ed-height，默认 150px）：内容变多时输入区不再被撑高，改为内部滚动；
 * 滚动条隐藏（仍支持滚轮 / 触摸 / 键盘滚动），保持干净的观感 */
.sr-ed-rich {
    position: relative; z-index: 1;
    height: var(--sr-ed-height, 150px);
    padding: 12px 14px;
    font-size: .9rem; font-family: inherit; line-height: 1.7;
    color: var(--ink); outline: none;
    white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* 旧 Edge / IE */
}
/* Chrome / Safari / Edge：滚动条宽度归零 */
.sr-ed-rich::-webkit-scrollbar { width: 0; height: 0; }
.sr-editor:not(.is-on) .sr-ed-rich { display: none; }
/* 占位提示：完全空（含只有 <br> 的情形）时显示 */
.sr-ed-rich:empty::before,
.sr-ed-rich:has(> br:only-child)::before {
    content: attr(data-placeholder);
    color: var(--gray);
    pointer-events: none;
}

/* 图片表情：与文字基线对齐、随行高缩放，长图不撑破输入区。
 * 注意：style.css 里有全局 `img { display: block }`（给正文大图用的），
 * 表情图必须显式改回 inline-block，否则每个表情都会独占一行（插入后自动换行）。 */
.sr-ed-emoji {
    display: inline-block;
    height: var(--sr-ed-emoji-size, 1.45em);
    width: auto; max-width: 100%;
    vertical-align: -.34em;
    margin: 0 1px;
    border-radius: 3px;
    user-select: none;
}

/* 富输入层里的换行与普通文本表现一致 */
.sr-ed-rich br { line-height: 1.7; }

@media (max-width: 560px) {
    .sr-editor > textarea, .sr-ed-rich { min-height: 130px; padding: 10px 12px; }
    .sr-ed-rich { height: 130px; }
}