/*!
 * simpleEditor.css
 * ---------------------------------------------------------------------------
 * File này chứa phần chức năng (định vị thanh nổi, chữ mờ placeholder, quy tắc
 * font-weight bắt buộc — xem chú thích ở .se-area h3) VÀ một bộ baseline mặc
 * định tối thiểu (padding/line-height/box-sizing) để nhúng vào trang nào cũng
 * tạm ổn kể cả khi trang chủ chưa viết CSS riêng. Trang chủ vẫn ghi đè thoải
 * mái bằng selector cụ thể hơn (không dùng !important cho phần cosmetic, nên
 * selector nào cụ thể hơn `.se-area` sẽ luôn thắng).
 *
 * Riêng `.se { height:auto !important }` là CỐ Ý dùng !important — đây là rule
 * phòng vệ, không phải cosmetic: chặn mọi height cố định (kể cả style inline)
 * lỡ gán lên container tích hợp, tránh phá cơ chế tự giãn theo nội dung. Muốn
 * giới hạn chiều cao thật sự thì dùng max-height, không dùng height.
 *
 * Mọi selector đều nằm trong `.se` (khung) hoặc `.se-bar` (thanh nổi), không có
 * selector trần nên nhúng vào trang nào cũng không đụng giao diện sẵn có.
 *
 * ---------------------------------------------------------------------------
 * MẪU CSS CHO TRANG CHỦ — chép vào file của bạn rồi sửa theo ý (ghi đè baseline):
 *
 *   .se-area{
 *     min-height:210px;
 *     padding:22px 24px;
 *     background:#fff;
 *     border:1px solid #e2e0d9;
 *     border-radius:2px;
 *     font-family:Georgia, serif;
 *     font-size:17px;
 *     line-height:1.7;
 *     caret-color:#1f4fd8;
 *   }
 *   .se-area:focus{ border-color:#c9c6bd }
 *   .se-area p{ margin:0 0 .8em }
 *   .se-area h3{ font-size:21px; margin:1.2em 0 .45em }
 *
 * Đổi màu thanh nổi thì ghi đè biến:
 *
 *   .se-bar{ --se-accent:#0a7d55; --se-bg:#fff; --se-rule:#ddd; }
 * ---------------------------------------------------------------------------
 */
/* ===================== khung soạn thảo: chức năng + baseline tối thiểu ===================== */
.se {
    position: relative;
    height: auto !important; /* xem ghi chú "phòng vệ" ở đầu file — cố ý !important */
}
.se-area {
    outline: none;
    overflow-wrap: break-word;
    word-break: break-word;
    /* baseline tối thiểu — trang chủ ghi đè bằng selector cụ thể hơn nếu cần */
    padding: 6px 8px;
    line-height: 1.4;
    box-sizing: border-box;
}
/* Chữ mờ vẽ bằng ::before của KHỐI ĐẦU TIÊN, không phải của .se-area.
   Nếu vẽ trên .se-area thì nó nằm trên một dòng riêng, còn con trỏ đứng trong
   thẻ khối ở dòng dưới — chữ mờ và con trỏ lệch nhau một hàng.
   Nội dung truyền qua biến --se-ph (JS đặt) vì attr() chỉ đọc được thuộc tính
   của chính phần tử mang pseudo-element.
   QUAN TRỌNG: đặt position:absolute cho ::before (và position:relative cho khối cha)
   để chữ mờ KHÔNG chiếm chỗ trong dòng chữ thật — nếu để nó chảy theo dòng bình thường
   (kiểu cũ), vị trí con trỏ hợp lệ duy nhất trong <p><br></p> (ngay trước <br>) sẽ nằm
   NGAY SAU toàn bộ bề rộng chữ mờ, tức là lệch hẳn về cuối dòng thay vì đầu dòng — đúng
   như lỗi đã gặp. Tách ::before ra khỏi dòng chảy thì <br> luôn ở vị trí thật sự đầu
   dòng, con trỏ luôn đúng chỗ, không cần đụng tới <br> (vẫn cần <br> để khối rỗng có
   chiều cao và bấm được — xem _normalize()). */
.se-area.se-empty> :first-child {
    position: relative;
}
.se-area.se-empty> :first-child::before {
    content: var(--se-ph, "");
    position: absolute;
    left: 0;
    top: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .45;
    pointer-events: none;
}
/* Bắt buộc giữ dưới 600. Trình duyệt coi chữ nặng >= 600 là "đang in đậm";
   khi đó execCommand('bold') chạy nhánh GỠ đậm và chèn
   <span style="font-weight:normal"> thay vì tạo <strong>. Muốn tiêu đề nổi hơn
   thì tăng font-size ở CSS trang chủ, đừng tăng font-weight. */
.se-area h3 {
    font-weight: 500
}
/* Bảo đảm ba định dạng luôn nhìn thấy được, kể cả khi trang chủ reset CSS */
.se-area strong,
.se-area b {
    font-weight: 700
}
.se-area em,
.se-area i {
    font-style: italic
}
.se-area u {
    text-decoration: underline
}
/* ========================= thanh định dạng nổi ========================= */
.se-bar {
    --se-ink: #14161c;
    --se-rule: #e2e0d9;
    --se-bg: #ffffff;
    --se-accent: #1f4fd8;
    --se-wash: #e7ecff;
    --se-hover: #f0eee8;
    position: absolute;
    top: -9999px;   /* JS đặt lại top/left thật khi bật .se-show */
    left: 0;
    z-index: 2147483000;
    box-sizing: border-box;
    display: none;   /* ẩn hẳn khi chưa dùng — nhiều instance không đè lên nhau */
    gap: 2px;
    padding: 5px;
    background: var(--se-bg);
    border: 1px solid var(--se-rule);
    border-radius: 2px;
    box-shadow: 0 12px 26px -14px rgba(20, 22, 28, .5), 0 2px 6px rgba(20, 22, 28, .06);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
}
.se-bar.se-show {
    display: flex;
    opacity: 1;
    transform: translateY(0)
}
/* mũi nhọn trỏ về vùng chọn */
.se-bar::after {
    content: "";
    position: absolute;
    left: var(--se-arrow, 50%);
    bottom: -5px;
    width: 9px;
    height: 9px;
    background: var(--se-bg);
    border: 1px solid var(--se-rule);
    border-top: 0;
    border-left: 0;
    transform: translateX(-50%) rotate(45deg);
}
.se-bar.se-below::after {
    bottom: auto;
    top: -5px;
    border: 1px solid var(--se-rule);
    border-bottom: 0;
    border-right: 0;
}
.se-bar.se-no-arrow::after {
    display: none
}
.se-bar button {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--se-ink);
    cursor: pointer;
    font-family: Tahoma, Geneva, Verdana, sans-serif, "Times New Roman", serif;
    font-size: 14px;
    line-height: 1;
    transition: background .12s, color .12s;
}
/* mỗi nút mang đúng kiểu chữ mà nó tạo ra */
.se-bar button[data-act="heading"] {
    font-weight: 600
}
.se-bar button[data-act="bold"] {
    font-weight: 700
}
.se-bar button[data-act="italic"] {
    font-style: italic
}
.se-bar button[data-act="underline"] {
    text-decoration: underline;
    text-underline-offset: 3px
}
.se-bar button[data-act="clear"] {
    font-size: 14px;
    letter-spacing: -.02em
}
.se-bar button:hover {
    background: var(--se-hover)
}
.se-bar button.se-on {
    background: var(--se-wash);
    color: var(--se-accent)
}
.se-bar button:focus-visible {
    outline: 2px solid var(--se-accent);
    outline-offset: -2px
}
.se-bar .se-sep {
    width: 1px;
    background: var(--se-rule);
    margin: 7px 6px
}
@media (prefers-reduced-motion:reduce) {
    .se-bar {
        transition: none
    }
}
/* ============================ thẻ @mention ============================
   Thẻ là phần tử inline THẬT trong vùng soạn thảo (contenteditable="false"),
   KHÔNG phải lớp phủ. Chỉ đổi màu nền/chữ — không đổi cỡ hay độ đậm nên
   không làm xê dịch các ký tự xung quanh. */
.se-tag {
    white-space: nowrap;
    padding: 0 .15em;
    border-radius: 2px;
    background: #e7ecff;
    color: #1f4fd8;
}
/* để lại được chọn (không user-select:none) — bôi đen tràn qua thẻ vẫn hoạt động
   với execCommand/Range gốc của trình duyệt, không chỉ Range dựng bằng JS.
   Ghi đè màu bôi đen cho khớp nền/chữ của thẻ, tránh 2 màu xanh đá nhau. */
.se-tag::selection {
    background: #1f4fd8;
    color: #fff;
}
/* danh sách gợi ý khi gõ '@' — cùng phong cách với thanh .se-bar, gắn vào <body> */
.se-tag-list {
    font-size: 14px;
    --se-rule: #e2e0d9;
    --se-hover: #f0eee8;
    position: absolute;
    top: -9999px;   /* JS đặt lại top/left khi mở */
    left: 0;
    z-index: 2147483000;
    box-sizing: border-box;
    min-width: 220px;
    max-width: 420px;
    max-height: 380px;   /* đủ hiển thị ~10 mục trước khi cuộn dọc */
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid var(--se-rule);
    border-radius: 2px;
    box-shadow: 0 12px 26px -14px rgba(20, 22, 28, .5), 0 2px 6px rgba(20, 22, 28, .06);
    display: none;   /* ẩn hẳn khi chưa mở */
    opacity: 0;
    transition: opacity .12s ease;
}
.se-tag-list.se-show {
    display: block;
    opacity: 1;
}
/* thanh cuộn mảnh, giống #content-left-box */
.se-tag-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .25) transparent;
}
.se-tag-list::-webkit-scrollbar {
    width: 5px;
}
.se-tag-list::-webkit-scrollbar-track {
    background: transparent;
}
.se-tag-list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .25);
    border-radius: 4px;
}
.se-tag-list ul {
    margin: 0;
    padding: 4px;
    list-style: none;
}
.se-tag-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 2px;
    cursor: pointer;
}
/* nhãn dài bị cắt gọn bằng "…" thay vì tràn ngang ra ngoài khung */
.se-tag-list li > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.se-tag-list li.se-active,
.se-tag-list li:hover {
    background: var(--se-hover);
}
.se-tag-list li b {
    font-weight: inherit;
    background: #fff2a8;
}
.se-tag-list .se-tag-av {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    object-fit: cover;
}