/* RSS ROD × shadcn-inspired semantic design system */
:root {
    --background: #f8f8f9;
    --foreground: #18181b;
    --card: #ffffff;
    --card-foreground: #18181b;
    --popover: #ffffff;
    --popover-foreground: #18181b;
    --primary: #d90b1c;
    --primary-foreground: #ffffff;
    --secondary: #f4f4f5;
    --secondary-foreground: #27272a;
    --muted-bg: #f4f4f5;
    --muted-foreground: #71717a;
    --accent: #fff1f2;
    --accent-foreground: #9f1239;
    --destructive: #dc2626;
    --destructive-foreground: #ffffff;
    --border: #e4e4e7;
    --input: #e4e4e7;
    --ring: #e11d48;
    --radius: .625rem;
    --sidebar-width: 256px;
    --topbar-height: 64px;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / .035);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04);
    --shadow-lg: 0 18px 45px rgb(0 0 0 / .11);
    --blue: var(--primary);
    --blue-soft: var(--accent);
    --ink: var(--foreground);
    --muted: var(--muted-foreground);
    --line: var(--border);
    --surface: var(--background);
}

.dark {
    --background: #09090b;
    --foreground: #fafafa;
    --card: #121214;
    --card-foreground: #fafafa;
    --popover: #121214;
    --popover-foreground: #fafafa;
    --primary: #f1263c;
    --primary-foreground: #ffffff;
    --secondary: #27272a;
    --secondary-foreground: #fafafa;
    --muted-bg: #27272a;
    --muted-foreground: #a1a1aa;
    --accent: #32151a;
    --accent-foreground: #fda4af;
    --border: #29292d;
    --input: #3f3f46;
    --ring: #fb7185;
    color-scheme: dark;
}

* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent; }
html, body { min-height: 100%; }
body {
    margin: 0;
    color: var(--foreground);
    background: var(--background);
    font-family: Inter, "Noto Sans Thai", "Leelawadee UI", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .9rem;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.text-secondary { color: var(--muted-foreground) !important; }

/* Application shell */
.app-frame { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.app-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1040; width: var(--sidebar-width);
    display: flex; flex-direction: column; color: #f4f4f5; background: #101012;
    border-right: 1px solid #252529;
}
.sidebar-brand { height: 76px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #252529; }
.brand-lockup { min-width: 0; display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.brand-symbol { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #3f3f46; border-radius: 11px; background: #18181b; }
.brand-symbol img { width: 100%; height: 100%; object-fit: cover; }
.brand-lockup strong { display: block; font-size: .89rem; line-height: 1.15; letter-spacing: .08em; }
.brand-lockup small { display: block; margin-top: 4px; color: #8f8f98; font-size: .67rem; line-height: 1; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 18px 12px; }
.nav-section-label { margin: 0 10px 7px; color: #6e6e77; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.app-nav-item { height: 40px; display: flex; align-items: center; gap: 11px; margin: 2px 0; padding: 0 11px; color: #a6a6af; border-radius: 8px; text-decoration: none; font-size: .84rem; font-weight: 550; transition: background .15s, color .15s, transform .15s; }
.app-nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.app-nav-item:hover { color: #fafafa; background: #202023; transform: translateX(1px); }
.app-nav-item.active { color: #fff; background: #29292d; box-shadow: inset 2px 0 var(--primary); }
.sidebar-footer { padding: 12px; border-top: 1px solid #252529; }
.channel-live { display: flex; align-items: center; gap: 10px; margin: 0 4px 12px; padding: 9px 10px; color: #d4d4d8; border: 1px solid #29292d; border-radius: 9px; background: #18181b; }
.channel-live > span { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 3px rgb(34 197 94 / .12); }
.channel-live strong, .channel-live small { display: block; line-height: 1.25; }
.channel-live strong { font-size: .73rem; }
.channel-live small { color: #71717a; font-size: .65rem; }
.user-menu { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; }
.user-menu:hover { background: #1f1f22; }
.user-avatar, .topbar-avatar { display: grid; place-items: center; color: #fff; font-weight: 700; border-radius: 999px; background: #be123c; }
.user-avatar { width: 34px; height: 34px; flex: 0 0 auto; font-size: .75rem; }
.user-copy { flex: 1; min-width: 0; }
.user-copy strong, .user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { color: #f4f4f5; font-size: .76rem; }
.user-copy small { color: #71717a; font-size: .64rem; }

.app-main { grid-column: 2; min-width: 0; min-height: 100vh; }
.app-topbar { position: sticky; top: 0; z-index: 1020; height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 24px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--background) 90%, transparent); backdrop-filter: blur(14px); }
.topbar-start, .topbar-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-heading { min-width: 0; }
.page-heading span { display: block; color: var(--muted-foreground); font-size: .65rem; line-height: 1.1; }
.page-heading strong { display: block; margin-top: 3px; overflow: hidden; font-size: .88rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.topbar-search { height: 34px; width: 230px; align-items: center; gap: 8px; padding: 0 8px 0 10px; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 8px; background: var(--card); text-decoration: none; box-shadow: var(--shadow-xs); }
.topbar-search svg { width: 15px; }
.topbar-search span { flex: 1; font-size: .74rem; }
.topbar-search kbd { color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 4px; background: var(--muted-bg); box-shadow: none; font: inherit; font-size: .63rem; }
.icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; color: inherit; border: 1px solid transparent; border-radius: 8px; background: transparent; text-decoration: none; transition: background .15s, border-color .15s; }
.icon-button:hover { color: inherit; border-color: var(--border); background: var(--card); }
.icon-button svg { width: 16px; height: 16px; }
.app-sidebar .icon-button { color: #a1a1aa; }
.app-sidebar .icon-button:hover { border-color: #3f3f46; background: #27272a; }
.topbar-avatar { width: 30px; height: 30px; font-size: .7rem; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border: 1px solid var(--background); border-radius: 999px; background: var(--primary); }
.theme-moon { display: none; }.dark .theme-moon { display: block; }.dark .theme-sun { display: none; }
.app-content { min-width: 0; }
.sidebar-backdrop { display: none; }

/* Component primitives */
.card { color: var(--card-foreground); border: 1px solid var(--border) !important; border-radius: var(--radius) !important; background: var(--card); box-shadow: var(--shadow-xs) !important; }
.card-body { padding: 1.25rem; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: .45rem .85rem; font-size: .78rem; font-weight: 600; border-radius: 8px; box-shadow: none !important; }
.btn-sm { min-height: 32px; padding: .35rem .7rem; font-size: .72rem; }
.btn svg { width: 14px; height: 14px; }
.btn-primary { color: var(--primary-foreground); border-color: var(--primary); background: var(--primary); background-image: none; }
.btn-primary:hover, .btn-primary:focus { color: var(--primary-foreground); border-color: color-mix(in srgb, var(--primary) 88%, #000); background: color-mix(in srgb, var(--primary) 88%, #000); }
.btn-light, .btn-outline-secondary { color: var(--secondary-foreground); border: 1px solid var(--border); background: var(--card); }
.btn-light:hover, .btn-outline-secondary:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--border) 60%, var(--foreground)); background: var(--secondary); }
.btn-outline-primary { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: transparent; }
.btn-danger { color: #fff; border-color: var(--destructive); background: var(--destructive); }
.form-control, .form-select { min-height: 38px; color: var(--foreground); border: 1px solid var(--input); border-radius: 8px; background-color: var(--background); font-size: .8rem; box-shadow: var(--shadow-xs); }
.form-control::placeholder { color: color-mix(in srgb, var(--muted-foreground) 75%, transparent); }
.form-control:focus, .form-select:focus { color: var(--foreground); border-color: var(--ring); background-color: var(--background); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 16%, transparent); }
.form-label { margin-bottom: .38rem; color: var(--foreground); font-size: .74rem; font-weight: 600; }
.form-check-input { border-color: var(--input); background-color: var(--card); }
.form-check-input:checked { border-color: var(--primary); background-color: var(--primary); }
.badge { padding: .33rem .55rem; font-size: .65rem; font-weight: 650; border-radius: 999px; }
.text-bg-light { color: var(--secondary-foreground) !important; background: var(--secondary) !important; }
.text-bg-success { color: #166534 !important; background: #dcfce7 !important; }
.text-bg-secondary { color: var(--muted-foreground) !important; background: var(--muted-bg) !important; }
.dark .text-bg-success { color: #86efac !important; background: #15351f !important; }
.table { --bs-table-color: var(--foreground); --bs-table-bg: transparent; --bs-table-border-color: var(--border); margin-bottom: 0; font-size: .78rem; }
.table > :not(caption) > * > * { padding: .82rem .9rem; vertical-align: middle; }
.table thead th, .table > tbody:first-child > tr:first-child > th { color: var(--muted-foreground); background: var(--muted-bg); font-size: .68rem; font-weight: 700; letter-spacing: .025em; }
.table-responsive { border-radius: calc(var(--radius) - 1px); }
.alert { border-radius: 9px; font-size: .79rem; }
.modal-content, .offcanvas { color: var(--foreground); border-color: var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-lg); }
.dropdown-menu { color: var(--popover-foreground); border-color: var(--border); border-radius: 9px; background: var(--popover); box-shadow: var(--shadow-lg); }
code { color: var(--primary); padding: .12rem .35rem; border-radius: 5px; background: var(--accent); font-size: .75em; }
hr { border-color: var(--border); opacity: 1; }

/* Page composition */
.app-content > main:not(.inbox-shell):not(.login-page) { max-width: 1540px; margin-inline: auto; }
.app-content h1 { letter-spacing: -.035em; }
.app-content h2, .app-content h3 { letter-spacing: -.018em; }
.metric-card { height: 124px; padding: 20px; overflow: visible; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-xs); }
.metric-card::before { display: none; }
.metric-card span { color: var(--muted-foreground); font-size: .74rem; font-weight: 550; }
.metric-card strong { color: var(--foreground); font-size: 1.85rem; letter-spacing: -.04em; }
.platform-stat { color: var(--foreground) !important; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card) !important; }
.channel-card::before { height: 2px; }
.platform-count { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); box-shadow: none; }
.add-channel-card { border: 1px dashed color-mix(in srgb, var(--primary) 42%, var(--border)) !important; background: color-mix(in srgb, var(--accent) 38%, var(--card)); }
.page-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.eyebrow { margin-bottom: 5px; color: var(--primary); font-size: .65rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.stat-card { height: 132px; display: flex; flex-direction: column; padding: 17px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-xs); }
.stat-card-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted-foreground); font-size: .73rem; font-weight: 600; }
.stat-card-head svg { width: 16px; height: 16px; }
.stat-card > strong { margin-top: 12px; font-size: 1.8rem; line-height: 1; letter-spacing: -.05em; }
.stat-card > small { margin-top: auto; color: var(--muted-foreground); font-size: .65rem; }
.card-header-clean { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.card-header-clean h2 { margin: 0; font-size: .86rem; font-weight: 700; }
.card-header-clean p { margin: 3px 0 0; color: var(--muted-foreground); font-size: .68rem; }
.card-header-clean > a { color: var(--muted-foreground); font-size: .7rem; text-decoration: none; }
.card-header-clean > a:hover { color: var(--primary); }
.table-customer { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.table-customer strong, .table-customer small { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-customer strong { font-size: .76rem; }.table-customer small { margin-top: 2px; color: var(--muted-foreground); font-size: .65rem; }
.mini-avatar { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; color: var(--accent-foreground); border-radius: 8px; background: var(--accent); font-size: .68rem; font-weight: 700; }
.channel-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; overflow: hidden; color: var(--muted-foreground); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.channel-badge > span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 99px; background: #71717a; }.channel-badge.line > span { background: #06c755; }.channel-badge.facebook > span { background: #1877f2; }
.status-badge { display: inline-flex; padding: .25rem .45rem; border-radius: 5px; background: var(--secondary); color: var(--secondary-foreground); font-size: .6rem; font-weight: 700; }.status-badge.open { color: #166534; background: #dcfce7; }.status-badge.pending { color: #92400e; background: #fef3c7; }.dark .status-badge.open { color: #86efac; background: #15351f; }.dark .status-badge.pending { color: #fcd34d; background: #3b2c10; }
.channel-list { padding: 7px 16px 16px; }
.channel-row { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.channel-row:last-child { border-bottom: 0; }.channel-row strong, .channel-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.channel-row strong { font-size: .75rem; }.channel-row small { margin-top: 3px; color: var(--muted-foreground); font-size: .64rem; }.channel-row > b { font-size: .9rem; }
.platform-icon { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 9px; background: var(--secondary); }.platform-icon svg { width: 16px; }.platform-icon.line { color: #069944; background: #eafbf1; }.platform-icon.facebook { color: #1877f2; background: #edf5ff; }.dark .platform-icon.line { background: #102d1c; }.dark .platform-icon.facebook { background: #10233d; }
.empty-state { min-height: 210px; display: grid; place-content: center; justify-items: center; color: var(--muted-foreground); text-align: center; }.empty-state svg { width: 28px; }.empty-state p { margin: 10px 0 2px; }.empty-state a { color: var(--primary); font-size: .7rem; }
.customer-search { height: 36px; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--card); box-shadow: var(--shadow-xs); }.customer-search svg { width: 14px; margin-left: 10px; color: var(--muted-foreground); }.customer-search input { width: 220px; height: 100%; padding: 0 9px; color: var(--foreground); border: 0; outline: 0; background: transparent; font-size: .73rem; }.customer-search button { height: 100%; padding: 0 12px; color: var(--primary-foreground); border: 0; background: var(--primary); font-size: .7rem; font-weight: 650; }
.cell-primary, .cell-secondary { display: block; }.cell-primary { font-size: .75rem; }.cell-secondary { margin-top: 3px; color: var(--muted-foreground); font-size: .65rem; }.count-chip { min-width: 26px; height: 24px; display: inline-grid; place-items: center; padding: 0 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--secondary); font-size: .68rem; font-weight: 700; }

/* Inbox workspace */
.page-inbox .app-topbar { position: relative; }
.page-inbox .app-content { height: calc(100vh - var(--topbar-height)); overflow: hidden; }
.inbox-shell { height: 100%; grid-template-columns: 176px minmax(285px, 330px) minmax(390px, 1fr) minmax(250px, 300px); color: var(--foreground); background: var(--card); }
.inbox-sidebar, .conversation-panel, .chat-panel { border-color: var(--border); }
.inbox-sidebar { background: var(--background); }
.inbox-sidebar h1 { font-size: .9rem !important; letter-spacing: -.01em; }
.filter-nav { gap: 2px; }
.filter-nav button { min-height: 34px; padding: 7px 10px; color: var(--muted-foreground); border-radius: 7px; font-size: .76rem; }
.filter-nav button:hover { color: var(--foreground); background: var(--secondary); }
.filter-nav button.active { color: var(--accent-foreground); background: var(--accent); box-shadow: none; }
.filter-nav button b { color: var(--primary-foreground); background: var(--primary); }
.filter-nav .channel-filter { padding-left: 24px; font-size: .71rem; }
.sidebar-status { color: var(--muted-foreground); border-color: var(--border); background: transparent; }
.panel-head { padding: 14px; border-color: var(--border); }
.search-box { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); }
.search-box:focus-within { border-color: var(--ring); background: var(--background); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 13%, transparent); }
.search-box input { color: var(--foreground); font-size: .76rem; }
.search-box svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted-foreground); }
.conversation-item { grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; padding: 12px 13px; border-color: var(--border); }
.conversation-item:hover { background: var(--secondary); }
.conversation-item.active { background: var(--accent); box-shadow: inset 2px 0 var(--primary); }
.customer-avatar { width: 38px; height: 38px; color: var(--accent-foreground); border: 1px solid var(--border); background: var(--accent); box-shadow: none; }
.customer-avatar.large { width: 60px; height: 60px; }
.conversation-name { font-size: .8rem; }
.conversation-preview { color: var(--muted-foreground); font-size: .72rem; }
.conversation-meta { font-size: .62rem; }
.unread-badge { background: var(--primary); }
.detail-panel { border-left: 0; background: var(--background); }
.detail-content { padding: 16px; }
.chat-head { height: 66px; padding: 10px 14px; border-color: var(--border); background: var(--card); }
.chat-head #chatName { font-size: .82rem; }
.message-list { padding: 22px; background-color: var(--background); background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--foreground) 8%, transparent) 1px, transparent 0); background-size: 20px 20px; }
.chat-empty { max-width: 290px; padding: 24px; color: var(--muted-foreground); }.chat-empty h2 { color: var(--foreground); font-size: 1rem; }.chat-empty p { font-size: .73rem; }.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 14px; color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 13px; background: var(--accent); }.empty-icon svg { width: 23px; }
.message { max-width: 72%; }
.bubble { padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-xs); font-size: .79rem; }
.message.staff .bubble { color: var(--primary-foreground); border-color: var(--primary); border-radius: 12px 12px 3px 12px; background: var(--primary); box-shadow: none; }
.message.customer .bubble { border-radius: 12px 12px 12px 3px; }
.message small { color: var(--muted-foreground); }
.composer { padding: 10px 13px 12px; border-color: var(--border); background: var(--card); }
.composer textarea { min-height: 42px; padding: 10px 12px; color: var(--foreground); border-color: var(--input); border-radius: 9px; background: var(--background); font-size: .79rem; }
.composer textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 13%, transparent); }
.quick-menu { color: var(--popover-foreground); border-color: var(--border); border-radius: 9px; background: var(--popover); box-shadow: var(--shadow-lg); }
.quick-option { color: inherit; background: transparent; }
.quick-option:hover { background: var(--secondary); }
.tag-check span { color: var(--muted-foreground); border-color: var(--border); border-radius: 7px; background: var(--card); }
.tag-check input:checked + span { color: var(--accent-foreground); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--accent); }
.note-item { border-color: var(--border); }

/* Login */
.login-page { background: #0d0d0f; }
.login-page::before { inset: 0; width: auto; height: auto; transform: none; background: radial-gradient(circle at 50% 0, rgb(225 29 72 / .18), transparent 34%); }
.login-page::after { display: none; }
.login-card { width: min(92vw, 420px); padding: 32px; color: #fafafa; text-align: left; border: 1px solid #2e2e33; border-radius: 14px; background: #151517; box-shadow: 0 26px 80px rgb(0 0 0 / .42) !important; }
.login-logo { width: 160px; margin: 0 auto 24px; border: 1px solid #34343a; border-radius: 11px; box-shadow: none; }
.login-kicker { text-align: center; color: #fb7185; }
.login-card .text-secondary { color: #8d8d96 !important; }
.login-card .form-control { color: #fafafa; border-color: #3f3f46; background: #0d0d0f; }
.login-brand-row { display: flex; align-items: center; gap: 11px; padding-bottom: 24px; border-bottom: 1px solid #29292d; }
.login-brand-icon { width: 42px; height: 42px; display: block; overflow: hidden; border: 1px solid #3f3f46; border-radius: 10px; }
.login-brand-icon img { width: 100%; height: 100%; object-fit: cover; }
.login-brand-row strong, .login-brand-row small { display: block; }
.login-brand-row strong { font-size: .85rem; letter-spacing: .08em; }
.login-brand-row small { margin-top: 3px; color: #71717a; font-size: .6rem; letter-spacing: .09em; }
.login-heading { padding: 26px 0 20px; }
.login-heading h1 { margin: 0 0 7px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.035em; }
.login-heading p { margin: 0; color: #8d8d96; font-size: .78rem; line-height: 1.55; }
.login-secure { color: #71717a; font-size: .66rem; }
.login-foot { display: flex; align-items: center; justify-content: center; margin-top: 24px; color: #71717a; font-size: .66rem; }

/* AI quality review and integrations */
.quality-score { width: 42px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; font-weight: 800; }
.quality-score.good { color: #166534; background: #dcfce7; }.quality-score.warn { color: #92400e; background: #fef3c7; }.quality-score.bad { color: #991b1b; background: #fee2e2; }
.dark .quality-score.good { color: #86efac; background: #15351f; }.dark .quality-score.warn { color: #fcd34d; background: #3b2c10; }.dark .quality-score.bad { color: #fca5a5; background: #3b1518; }
.quality-metric { min-height: 128px; display: grid; align-content: center; justify-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-xs); }
.quality-metric span { color: var(--muted-foreground); font-size: .72rem; font-weight: 650; }.quality-metric strong { margin-top: 6px; font-size: 2rem; line-height: 1; letter-spacing: -.06em; }.quality-metric small { color: var(--muted-foreground); font-size: .62rem; }
.quality-summary { font-size: .88rem; line-height: 1.75; }.quality-list { margin: 13px 0 0; padding-left: 1.15rem; }.quality-list li { margin: .55rem 0; line-height: 1.6; }
.evidence-item { padding: 14px 0; border-bottom: 1px solid var(--border); }.evidence-item:first-child { padding-top: 0; }.evidence-item:last-child { border-bottom: 0; }.evidence-item a { color: var(--primary); font-size: .68rem; }.evidence-item p { margin: 7px 0; font-size: .76rem; }.evidence-item blockquote { margin: 0; padding: 9px 11px; color: var(--muted-foreground); border-left: 2px solid var(--primary); border-radius: 0 7px 7px 0; background: var(--secondary); font-size: .7rem; }
.status-badge.completed, .status-badge.sent, .status-badge.active { color: #166534; background: #dcfce7; }.status-badge.failed, .status-badge.critical { color: #991b1b; background: #fee2e2; }.status-badge.queued, .status-badge.processing { color: #92400e; background: #fef3c7; }.dark .status-badge.completed, .dark .status-badge.sent, .dark .status-badge.active { color: #86efac; background: #15351f; }.dark .status-badge.failed { color: #fca5a5; background: #3b1518; }.dark .status-badge.queued, .dark .status-badge.processing { color: #fcd34d; background: #3b2c10; }
.secret-reveal { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; color: #fff; border: 1px solid #3f3f46; border-radius: var(--radius); background: #18181b; }.secret-reveal strong, .secret-reveal code { display: block; }.secret-reveal code { margin-top: 6px; color: #fda4af; background: transparent; word-break: break-all; }
.copy-field { min-height: 42px; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--background); }.copy-field code { flex: 1; overflow: hidden; color: var(--foreground); background: transparent; text-overflow: ellipsis; white-space: nowrap; }.copy-field button { align-self: stretch; padding: 0 12px; color: var(--primary); border: 0; border-left: 1px solid var(--border); background: var(--card); font-size: .68rem; font-weight: 700; }
.event-grid { display: flex; flex-wrap: wrap; gap: 7px; }.endpoint-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }.endpoint-row:last-child { border-bottom: 0; }.endpoint-row small { display: block; max-width: 520px; overflow: hidden; color: var(--muted-foreground); text-overflow: ellipsis; white-space: nowrap; }.endpoint-icon { width: 36px; height: 36px; display: grid; flex: 0 0 auto; place-items: center; color: var(--primary); border: 1px solid var(--border); border-radius: 9px; background: var(--accent); }.endpoint-icon svg { width: 16px; }
.integration-code { max-height: 430px; overflow: auto; margin: 0; padding: 16px; color: #e4e4e7; border: 1px solid #2f2f34; border-radius: 9px; background: #111113; font-size: .7rem; line-height: 1.6; }

/* Facebook Pages OAuth connection */
.page-identity { display: flex; align-items: center; gap: 11px; }.page-identity > img, .page-identity > span { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; object-fit: cover; color: var(--accent-foreground); border: 1px solid var(--border); border-radius: 999px; background: var(--accent); font-weight: 750; }.page-identity strong, .page-identity small { display: block; }.page-identity small { margin-top: 2px; color: var(--muted-foreground); font-size: .65rem; }
.connection-toggle { width: 42px; height: 23px; position: relative; padding: 0; border: 0; border-radius: 999px; background: #d4d4d8; transition: background .18s; }.connection-toggle span { width: 17px; height: 17px; position: absolute; top: 3px; left: 3px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .18s; }.connection-toggle.on { background: #22c55e; }.connection-toggle.on span { transform: translateX(19px); }
.oauth-body { min-height: 100vh; background: #f4f4f5; }.oauth-popup { min-height: 100vh; display: grid; place-items: center; padding: 24px; }.oauth-select, .oauth-result { width: min(100%, 560px); overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-lg); }.oauth-select { padding: 0 22px 22px; }.oauth-brand { display: flex; align-items: center; gap: 12px; margin: 0 -22px 18px; padding: 18px 22px; border-bottom: 1px solid var(--border); }.oauth-brand > span { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 9px; background: #1877f2; font-size: 1.5rem; font-weight: 800; }.oauth-brand strong, .oauth-brand small { display: block; }.oauth-brand small { margin-top: 3px; color: var(--muted-foreground); font-size: .7rem; }.oauth-select-actions { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--muted-foreground); font-size: .72rem; }.oauth-page-list { max-height: 440px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }.oauth-page-option { min-height: 67px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }.oauth-page-option:last-child { border-bottom: 0; }.oauth-page-option:hover { background: var(--secondary); }.oauth-page-option > img, .oauth-page-option .page-fallback { width: 40px; height: 40px; display: grid; flex: 0 0 auto; place-items: center; object-fit: cover; color: var(--accent-foreground); border-radius: 999px; background: var(--accent); font-weight: 750; }.oauth-page-option .page-copy { min-width: 0; flex: 1; }.oauth-page-option strong, .oauth-page-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.oauth-page-option strong { font-size: .78rem; }.oauth-page-option small { margin-top: 3px; color: var(--muted-foreground); font-size: .64rem; }.oauth-page-option em { color: #16a34a; font-size: .62rem; font-style: normal; font-weight: 700; }.oauth-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.oauth-result { padding: 30px; text-align: center; }.oauth-result h1 { margin: 12px 0 7px; font-size: 1.2rem; }.oauth-result > p { color: var(--muted-foreground); font-size: .78rem; line-height: 1.6; }.oauth-success-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: auto; color: #166534; border-radius: 999px; background: #dcfce7; font-size: 1.45rem; font-weight: 800; }.oauth-result.danger h1 { color: var(--destructive); }.import-results { margin: 18px 0; text-align: left; border: 1px solid var(--border); border-radius: 9px; }.import-results > div { padding: 10px 12px; border-bottom: 1px solid var(--border); }.import-results > div:last-child { border-bottom: 0; }.import-results strong { margin-right: 8px; }.import-results small { display: block; margin-top: 4px; color: var(--destructive); font-size: .64rem; }

/* Manual Facebook Page connection */
.manual-add-icon { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; border-radius: 10px; background: var(--primary); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 28%, transparent); }
.manual-add-icon svg { width: 18px; height: 18px; }
.manual-webhook-note { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--secondary) 75%, transparent); }
.manual-webhook-note > svg { width: 18px; flex: 0 0 auto; color: var(--primary); }
.manual-webhook-note > div { min-width: 0; flex: 1; }
.manual-webhook-note span, .manual-webhook-note code { display: block; }
.manual-webhook-note span { margin-bottom: 3px; color: var(--muted-foreground); font-size: .66rem; }
.manual-webhook-note code { overflow: hidden; color: var(--foreground); background: transparent; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.manual-webhook-note button { padding: 7px 10px; color: var(--primary); border: 1px solid var(--border); border-radius: 7px; background: var(--card); font-size: .66rem; font-weight: 700; }

@media (max-width: 1399px) {
    .inbox-shell { grid-template-columns: 160px 300px minmax(380px, 1fr); }
    .detail-panel { display: none; }
}
@media (max-width: 1199px) {
    :root { --sidebar-width: 224px; }
    .inbox-shell { grid-template-columns: 150px 290px minmax(360px, 1fr); }
}
@media (max-width: 991px) {
    .app-frame { display: block; }
    .app-sidebar { width: min(286px, 86vw); transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
    .app-sidebar.open { transform: translateX(0); }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 1035; background: rgb(0 0 0 / .5); backdrop-filter: blur(2px); }
    .sidebar-backdrop.show { display: block; }
    body.sidebar-open { overflow: hidden; }
    .app-main { min-height: 100vh; }
    .app-topbar { height: 58px; padding: 0 14px; }
    .page-inbox .app-content { height: calc(100vh - 58px); }
    .inbox-shell { height: 100%; grid-template-columns: 1fr; }
    .inbox-sidebar { display: none; }
    .conversation-panel, .chat-panel { grid-column: 1; grid-row: 1; }
    .chat-panel { transform: translateX(100%); transition: transform .2s ease; }
    .inbox-shell.chat-open .chat-panel { transform: translateX(0); }
    .chat-panel.empty { display: none; }
    .app-content > main:not(.inbox-shell):not(.login-page) { padding: 18px !important; }
}
@media (max-width: 575px) {
    .page-heading span { display: none; }
    .topbar-actions { gap: 3px; }
    .topbar-avatar { display: none; }
    .card-body { padding: 1rem; }
    .message-list { padding: 14px; }
    .message { max-width: 88%; }
    .composer { padding: 8px; }
    .composer .d-flex.flex-wrap { gap: 4px !important; }
    .composer .btn-sm { padding-inline: .55rem; }
    .login-card { padding: 24px; }
    .page-toolbar { align-items: flex-start; flex-direction: column; }
}