/* ═══ AI Review Beauty — diff card + highlight gợi ý (đồng bộ mockup AI 3.0) ═══ */

/* card lỗi */
.aib-item{ background:#fff; border:1px solid #EDF0F5; border-radius:14px; padding:14px 16px; margin:0 0 14px;
    box-shadow:0 2px 10px rgba(15,23,42,.05); }
.aib-row{ display:flex; gap:10px; align-items:flex-start; margin:0 0 8px; }
.aib-row:last-child{ margin-bottom:0; }
.aib-ic{ flex:0 0 auto; width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
    font-size:12px; font-weight:900; line-height:1; margin-top:1px; }
.aib-ic--bad{ background:#FEE2E2; color:#DC2626; }
.aib-ic--good{ background:#D1FAE5; color:#059669; }
.aib-ic--ok{ background:#D1FAE5; color:#059669; }
.aib-txt{ line-height:1.65; font-size:14.5px; }
.aib-row--bad .aib-txt{ color:#B91C1C; }
.aib-row--good .aib-txt{ color:#047857; }
.aib-row--ok .aib-txt{ color:#065F46; font-weight:600; }
u.aib-del{ text-decoration:underline; text-decoration-color:#F87171; text-decoration-thickness:2px;
    text-underline-offset:3px; font-weight:700; }
u.aib-ins{ text-decoration:underline; text-decoration-color:#34D399; text-decoration-thickness:2px;
    text-underline-offset:3px; font-weight:700; }

/* note giải thích */
.aib-note{ display:flex; gap:9px; background:#F8FAFC; border:1px solid #EEF2F7; border-radius:12px;
    padding:10px 14px; margin-top:10px; font-size:13.5px; color:#334155; line-height:1.6; }
.aib-note b{ color:#0F172A; }
.aib-note-ic{ flex:0 0 auto; font-size:14px; }
.aib-note--ok{ background:#ECFDF5; border-color:#D1FAE5; color:#047857; }

/* nút "+N lỗi khác" */
.aib-more{ display:inline-flex; align-items:center; gap:6px; margin:2px 0 14px; padding:8px 16px;
    border:1.5px dashed #CBD5E1; border-radius:999px; background:transparent; color:#64748B;
    font-size:13px; font-weight:700; cursor:pointer; transition:.15s; }
.aib-more:hover{ border-color:#8B5CF6; color:#7C3AED; background:#F5F3FF; }
.aib-hidden{ display:none !important; }

/* highlight câu lỗi trong bài làm */
mark.aib-hl{ background:linear-gradient(180deg,transparent 45%,#FDE68A 45%); border-radius:4px;
    padding:1px 2px; cursor:pointer; color:inherit; transition:.15s; }
mark.aib-hl:hover{ background:#FDE68A; }

/* popover gợi ý */
.aib-pop{ position:absolute; z-index:99999; width:min(440px,90vw); background:#fff; border:1px solid #D1FAE5;
    border-radius:14px; box-shadow:0 18px 50px rgba(5,150,105,.18),0 4px 14px rgba(15,23,42,.10);
    padding:14px 16px; display:none; }
.aib-pop.is-show{ display:block; animation:aibPop .16s ease-out; }
@keyframes aibPop{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none; } }
.aib-pop-head{ font-size:10.5px; font-weight:900; letter-spacing:1.5px; color:#059669; margin-bottom:7px; }
.aib-pop-corr{ font-size:14.5px; font-weight:700; font-style:italic; color:#065F46; line-height:1.6; }
.aib-pop-note{ margin-top:8px; padding-top:8px; border-top:1px dashed #D1FAE5; font-size:13px; color:#475569; line-height:1.6; }

/* ── dark mode (flat) ── */
html.ae-dark-mode .aib-item{ background:#16181D; border-color:rgba(255,255,255,.09); box-shadow:none; }
html.ae-dark-mode .aib-row--bad .aib-txt{ color:#FCA5A5; }
html.ae-dark-mode .aib-row--good .aib-txt{ color:#6EE7B7; }
html.ae-dark-mode .aib-row--ok .aib-txt{ color:#6EE7B7; }
html.ae-dark-mode .aib-ic--bad{ background:rgba(220,38,38,.18); }
html.ae-dark-mode .aib-ic--good, html.ae-dark-mode .aib-ic--ok{ background:rgba(5,150,105,.2); }
html.ae-dark-mode .aib-note{ background:#1D2026; border-color:rgba(255,255,255,.08); color:#CBD5E1; }
html.ae-dark-mode .aib-note b{ color:#F1F5F9; }
html.ae-dark-mode .aib-note--ok{ background:rgba(5,150,105,.12); border-color:rgba(5,150,105,.25); color:#6EE7B7; }
html.ae-dark-mode .aib-more{ border-color:#3F4652; color:#94A3B8; }
html.ae-dark-mode mark.aib-hl{ background:linear-gradient(180deg,transparent 45%,rgba(217,119,6,.55) 45%); }
html.ae-dark-mode mark.aib-hl:hover{ background:rgba(217,119,6,.55); }
html.ae-dark-mode .aib-pop{ background:#1B1E24; border-color:rgba(5,150,105,.35); }
html.ae-dark-mode .aib-pop-corr{ color:#6EE7B7; }
html.ae-dark-mode .aib-pop-note{ color:#94A3B8; border-top-color:rgba(255,255,255,.1); }

/* ── skeuo (giấy ấm) ── */
html.theme-skeuo .aib-item{ background:#FFFDF6; border:1px solid #E6DCBE; box-shadow:0 1px 1px rgba(0,0,0,.05); }
html.theme-skeuo .aib-note{ background:#FAF6EA; border-color:#E6DCBE; }
html.theme-skeuo.ae-dark-mode .aib-item{ background:#241E16; border-color:rgba(255,214,150,.16); }
html.theme-skeuo.ae-dark-mode .aib-note{ background:#1B160F; border-color:rgba(255,214,150,.14); color:#D8CBA8; }

/* ── AI section trong popover (gợi ý theo frame chấm IELTS) ── */
u.aib-del{ cursor:pointer; }
u.aib-del:hover{ background:#FEF2F2; border-radius:4px; }
.aib-pop-ai{ margin-top:10px; }
.aib-ai-loading{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#7C3AED;
    padding:9px 0 2px; border-top:1px dashed #E9D5FF; margin-top:2px; }
.aib-ai-spin{ width:13px; height:13px; border:2px solid #DDD6FE; border-top-color:#7C3AED; border-radius:50%;
    animation:aibSpin .7s linear infinite; }
@keyframes aibSpin{ to{ transform:rotate(360deg); } }
.aib-ai-err{ font-size:12px; color:#B91C1C; padding-top:8px; border-top:1px dashed #FECACA; margin-top:4px; }
.aib-ai-head{ display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding-top:10px; border-top:1px dashed #E2E8F0; margin-top:4px; }
.aib-ai-badge{ font-size:10px; font-weight:900; letter-spacing:.6px; padding:3px 9px; border-radius:999px; }
.aib-ai-badge--gra{ background:#FEE2E2; color:#B91C1C; }
.aib-ai-badge--lr { background:#EDE9FE; color:#6D28D9; }
.aib-ai-badge--cc { background:#DBEAFE; color:#1D4ED8; }
.aib-ai-badge--tr { background:#FFEDD5; color:#C2410C; }
.aib-ai-brand{ font-size:10px; font-weight:800; letter-spacing:.8px; color:#7C3AED; }
.aib-ai-explain{ margin-top:8px; font-size:13px; color:#334155; line-height:1.6; }
.aib-ai-alts-label{ margin-top:10px; font-size:10.5px; font-weight:900; letter-spacing:1px; color:#059669; text-transform:uppercase; }
.aib-ai-alt{ margin-top:7px; background:#F0FDF4; border:1px solid #DCFCE7; border-radius:10px; padding:8px 11px; }
.aib-ai-alt-text{ font-size:13px; font-weight:700; color:#065F46; font-style:italic; line-height:1.5; }
.aib-ai-alt-note{ font-size:11.5px; color:#64748B; margin-top:3px; line-height:1.5; }
.aib-ai-tip{ margin-top:10px; font-size:12.5px; color:#92400E; background:#FFFBEB; border:1px solid #FEF3C7;
    border-radius:10px; padding:8px 11px; line-height:1.55; }

html.ae-dark-mode u.aib-del:hover{ background:rgba(220,38,38,.16); }
html.ae-dark-mode .aib-ai-head{ border-top-color:rgba(255,255,255,.1); }
html.ae-dark-mode .aib-ai-explain{ color:#CBD5E1; }
html.ae-dark-mode .aib-ai-alt{ background:rgba(5,150,105,.1); border-color:rgba(5,150,105,.22); }
html.ae-dark-mode .aib-ai-alt-text{ color:#6EE7B7; }
html.ae-dark-mode .aib-ai-alt-note{ color:#94A3B8; }
html.ae-dark-mode .aib-ai-tip{ background:rgba(217,119,6,.1); border-color:rgba(217,119,6,.25); color:#FCD34D; }

/* ── dark mode: badge tiêu chí + chi tiết AI (fix obscure — nền light bị giữ,
      chữ bị global dark rule sơn nhạt → chìm. Ép cặp nền đậm + chữ sáng) ── */
html.ae-dark-mode .aib-ai-badge--gra{ background:rgba(220,38,38,.22) !important; color:#FCA5A5 !important; }
html.ae-dark-mode .aib-ai-badge--lr { background:rgba(124,58,237,.26) !important; color:#C4B5FD !important; }
html.ae-dark-mode .aib-ai-badge--cc { background:rgba(29,78,216,.28) !important; color:#93C5FD !important; }
html.ae-dark-mode .aib-ai-badge--tr { background:rgba(194,65,12,.26) !important; color:#FDBA74 !important; }
html.ae-dark-mode .aib-ai-brand{ color:#C4B5FD !important; }
html.ae-dark-mode .aib-ai-alts-label{ color:#6EE7B7 !important; }
html.ae-dark-mode .aib-ai-loading{ color:#C4B5FD; border-top-color:rgba(196,181,253,.22); }
html.ae-dark-mode .aib-ai-spin{ border-color:rgba(196,181,253,.28); border-top-color:#C4B5FD; }
html.ae-dark-mode .aib-ai-err{ color:#FCA5A5; border-top-color:rgba(252,165,165,.3); }
html.ae-dark-mode .aib-pop-head{ color:#6EE7B7; }

/* từ gạch xanh cũng bấm được → popup "vì sao tốt hơn" */
u.aib-ins{ cursor:pointer; }
u.aib-ins:hover{ background:#ECFDF5; border-radius:4px; }
html.ae-dark-mode u.aib-ins:hover{ background:rgba(5,150,105,.18); }