/* === CheckDi compare panel (2026-10-14) ===
   Styles for /content/js/checkdi-compare-panel.js (the panel itself is built by that script; see its header
   for which pages use it and why). Same warm look as the recommended box (checkdi-recommend.css): gradient
   #FFF8F0 -> #FFF5EB, orange border, 8px radius, mascot. ASCII-only file. */
/* No font-family here (owner 2026-10-14 "why do i still see the weird thai font again"): the panel inherits the
   page body stack like every card - mp/th/CLAUDE.md "Thai fonts - DON'T declare one on body text". The first
   version declared 'Lato','Sarabun','Kanit' and painted the Thai in Sarabun. */
#cmp-bar { position: fixed; left: 0; right: 0; bottom: 12px; z-index: 999; display: none; padding: 0 12px; }
#cmp-bar .cmp-panel { max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(135deg, #FFF8F0 0%, #FFF5EB 100%); border: 1px solid rgba(249,159,56,.45); border-radius: 8px; box-shadow: 0 6px 24px rgba(26,29,35,.18); }
#cmp-bar .cmp-mascot { width: 64px; height: auto; flex: 0 0 auto; margin-top: -26px; }
#cmp-bar .cmp-main { flex: 1 1 auto; min-width: 0; }
/* no letter-spacing on the who line: it splits Thai sara am */
#cmp-bar .cmp-who { font-size: 12px; font-weight: 700; color: #F7881F; }
#cmp-bar .cmp-title { font-size: 15px; font-weight: 700; color: #1a1d23; }
#cmp-bar .cmp-hint { font-size: 12px; font-weight: 400; color: #767676; }
#cmp-bar .cmp-hint.warn { color: #B8501E; }
#cmp-bar .cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#cmp-bar .cmp-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 160px; height: 30px; padding: 0 6px 0 3px; background: #fff; border: 1px solid #FFE0B2; border-radius: 20px; font-size: 12px; color: #1a1d23; }
#cmp-bar .cmp-chip img { width: 24px; height: 24px; object-fit: contain; border-radius: 50%; background: #fff; flex: 0 0 auto; }
#cmp-bar .cmp-chip .cmp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cmp-bar .cmp-chip .cmp-x { border: 0; background: none; padding: 0 2px; color: #999; font-size: 15px; line-height: 1; cursor: pointer; }
#cmp-bar .cmp-chip .cmp-x:hover { color: #B8501E; }
#cmp-bar .cmp-chip.empty { width: 30px; justify-content: center; padding: 0; border-style: dashed; color: #c9b8a6; background: transparent; }
#cmp-bar .cmp-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
#cmp-bar #cmp-go { margin: 0; color: #1a1d23; font-weight: 600; white-space: nowrap; }
#cmp-bar .cmp-clear { font-size: 13px; color: #767676; text-decoration: underline; cursor: pointer; }
/* Site chat bubble: a stylesheet !important rule, NOT an inline style - the widget (autodigi, loads late)
   rewrites its own inline `bottom: 15px`, which put its "Talk to us" tooltip on the compare button. */
body.cmp-open #unknown { bottom: var(--cmp-lift, 124px) !important; }
@media (max-width: 600px) {
    #cmp-bar { bottom: 8px; padding: 0 8px; }
    #cmp-bar .cmp-panel { flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; }
    #cmp-bar .cmp-mascot { width: 48px; margin-top: -20px; }
    #cmp-bar .cmp-chip { max-width: none; }
    #cmp-bar .cmp-chip .cmp-name { display: none; }
    #cmp-bar .cmp-actions { width: 100%; }
    #cmp-bar #cmp-go { flex: 1 1 auto; }
}