/* ==========================================================================
   社区富文本编辑器样式（回复框 / 发表主题弹窗共用）
   编辑器本体是 contenteditable：编辑时看到真实效果（粗体/颜色/图片/表情），
   提交时由 forum-editor.js 转回 BBCode 存库；服务端仍用 Bbcode 渲染。
   移植自 wool2006 的论坛编辑器（public/home/bbs/forum.css 的 tyt- 段）。
   ========================================================================== */

/* ---------- 工具栏 ---------- */
.tyt-bb { position: relative; margin-bottom: 8px; }
.tyt-bb button {
    color: #333; font-size: 12px;
    background: linear-gradient(#F6F6F6, #EBEBEB);
    border: 1px solid #D9D9D9; border-radius: 2px;
    padding: 2px 8px; cursor: pointer; margin-right: 4px;
}
.tyt-bb button:hover { color: #4178B0; border-color: #4178B0; }

/* ---------- 编辑器本体 ---------- */
.tyt-editor {
    width: 100%; min-height: 120px; max-height: 400px; overflow-y: auto;
    background: #FFF; border: 1px solid #D9D9D9; border-radius: 4px;
    padding: 10px; font-size: 14px; font-family: inherit; line-height: 24px;
    box-sizing: border-box; outline: none; word-break: break-all;
    cursor: text; resize: none;
}
.tyt-editor:focus { border-color: #4178B0; }
/* 空的时候显示占位提示（contenteditable 原生 placeholder 不生效） */
.tyt-editor:empty::before { content: attr(data-placeholder); color: #AAA; }

/* ---------- 编辑器内的元素 ---------- */
.tyt-editor b, .tyt-editor strong { font-weight: 700; }
.tyt-editor i, .tyt-editor em { font-style: italic; }
/* 表情必须显式 inline-block：全站 main.css 里有条 img{display:block}，
   不覆盖的话编辑器里点一个表情就独占一行 */
.tyt-editor img.tyt-ed-emote { display: inline-block; width: 24px; height: 24px; vertical-align: middle; }
.tyt-editor img.tyt-ed-img { max-width: 100%; vertical-align: middle; border-radius: 3px; }
.tyt-editor .tyt-ed-quote {
    border-left: 3px solid #C9B98F; background: #FBF7EE; color: #6B6250;
    padding: 6px 10px; margin: 6px 0; font-size: 13px; border-radius: 0 3px 3px 0;
}
.tyt-editor .tyt-ed-code {
    background: #F5F5F5; border: 1px dashed #D9D9D9; padding: 8px 10px; margin: 6px 0;
    font-family: Consolas, Monaco, "Courier New", monospace; font-size: 12.5px;
    white-space: pre-wrap; word-break: break-all;
}

/* ---------- 颜色板（色块由 JS 生成，颜色与编辑器内置调色板一致） ---------- */
.tyt-color-wrap { position: relative; display: inline-block; }
.tyt-color-panel {
    position: absolute; top: 22px; left: 0; z-index: 100;
    background: #FFF; border: 1px solid #C9B98F; border-radius: 4px; padding: 6px;
    display: grid; grid-template-columns: repeat(8, 16px); gap: 3px;
}
.tyt-color-panel i { width: 16px; height: 16px; border: 1px solid #999; cursor: pointer; display: block; }
.tyt-color-panel i:hover { border-color: #CC0000; }

/* ---------- 表情区（常驻在输入框下方：不用找按钮，点一下插进光标处） ---------- */
.tyt-emote-tray {
    margin-top: 8px; padding: 8px 10px 10px;
    background: #FAFBFC; border: 1px solid #E4E8ED; border-radius: 4px;
}
.tyt-emote-tray-title { font-size: 12px; color: #8A93A0; margin-bottom: 6px; }
.tyt-emote-tray-grid { display: grid; grid-template-columns: repeat(13, 28px); gap: 4px; }
.tyt-emote-tray-grid img { width: 28px; height: 28px; cursor: pointer; display: block; border-radius: 3px; }
.tyt-emote-tray-grid img:hover { background: #FFF3D6; }

/* ---------- 帖子正文里渲染出来的表情图（服务端 Bbcode 输出） ---------- */
/* 同样要显式 inline-block：正文里的表情是跟文字混排的，不能独占一行 */
.tyt-floor-content img.bb-emote,
.tyt-body img.bb-emote { display: inline-block; width: 26px; height: 26px; vertical-align: middle; }

@media (max-width: 600px) {
    .tyt-emote-tray-grid { grid-template-columns: repeat(8, 30px); }
    .tyt-editor { min-height: 100px; }
}