/* GENERATED from src/features/inbox-v2/styles/kit.css by scripts/scope-inbox-css.cjs — do not edit. */
/* OutGainer UI kit — component styles. Tokens come from colors_and_type.css.
   Class names mirror the product's Tailwind usage so the markup reads cleanly. */

.ib * { box-sizing: border-box; }
.ib { margin: 0; }
.ib button { font-family: inherit; }

/* icon helper — lucide svg sized via --s */
.ib .ic { display: inline-flex; align-items: center; justify-content: center; }
.ib .ic svg { width: var(--s, 16px); height: var(--s, 16px); stroke-width: 2; }

/* ---------- buttons ---------- */
.ib .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
  border-radius: var(--radius-md); font-size:14px; font-weight:500; cursor:pointer;
  height:36px; padding:0 16px; border:1px solid transparent; transition: background .15s, box-shadow .15s, color .15s; }
.ib .btn:disabled { opacity:.5; cursor:not-allowed; }
.ib .btn .ic svg { width:16px; height:16px; }
.ib .btn-default { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-card); }
.ib .btn-default:hover:not(:disabled) { background: color-mix(in oklch, var(--primary) 90%, black); }
.ib .btn-outline { background: var(--card); color: var(--foreground); border-color: var(--input); box-shadow: var(--shadow-card); }
.ib .btn-outline:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); }
.ib .btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.ib .btn-secondary:hover:not(:disabled) { background: color-mix(in oklch, var(--secondary) 80%, var(--border)); }
.ib .btn-ghost { background: transparent; color: var(--foreground); }
.ib .btn-ghost:hover:not(:disabled) { background: var(--accent); color: var(--accent-foreground); }
.ib .btn-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.ib .btn-danger-ghost { background: transparent; color: var(--destructive); }
.ib .btn-danger-ghost:hover { background: color-mix(in oklch, var(--destructive) 10%, white); }
.ib .btn-sm { height:32px; padding:0 12px; font-size:12px; }
.ib .btn-icon { height:36px; width:36px; padding:0; }
.ib .btn-block { width:100%; }

/* ---------- inputs ---------- */
.ib .input { height:38px; width:100%; border:1px solid var(--input); background: var(--card);
  border-radius: var(--radius-md); padding:0 12px; font-size:14px; color: var(--foreground); outline:none; }
.ib .input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 22%, transparent); }
.ib .input::placeholder { color: var(--muted-foreground); }
.ib .label { font-size:13px; font-weight:500; color: var(--foreground); }
.ib .textarea { width:100%; resize:none; border:1px solid var(--border); background: var(--background);
  border-radius: var(--radius-md); padding:8px 12px; font-size:14px; color: var(--foreground); outline:none; font-family:inherit; line-height:1.5; }
.ib .textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 22%, transparent); }
.ib .textarea[readonly] { background: color-mix(in oklch, var(--muted) 30%, var(--card)); cursor:default; }

/* ---------- card ---------- */
.ib .card { background: var(--card); border:1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.ib .card-pad { padding:24px; }
.ib .card-hover { transition: box-shadow .15s; }
.ib .card-hover:hover { box-shadow: var(--shadow-elevated); }

/* ---------- pills / badges ---------- */
.ib .pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px;
  font-size:12px; font-weight:500; border:1px solid; line-height:1.3; }
.ib .pill .ic svg { width:14px; height:14px; }
.ib .pill-new { background:color-mix(in oklch,var(--info) 10%,white); color:var(--info); border-color:color-mix(in oklch,var(--info) 20%,white); }
.ib .pill-pending { background:color-mix(in oklch,var(--warning) 15%,white); color:var(--warning-foreground); border-color:color-mix(in oklch,var(--warning) 30%,white); }
.ib .pill-approved, .ib .pill-resolved { background:color-mix(in oklch,var(--success) 10%,white); color:var(--success); border-color:color-mix(in oklch,var(--success) 20%,white); }
.ib .pill-sent { background:color-mix(in oklch,var(--primary) 10%,white); color:var(--primary); border-color:color-mix(in oklch,var(--primary) 20%,white); }
.ib .pill-hidden, .ib .pill-neutral, .ib .pill-spam { background:var(--muted); color:var(--muted-foreground); border-color:var(--border); }
.ib .pill-escalated, .ib .pill-negative, .ib .pill-complaint { background:color-mix(in oklch,var(--destructive) 10%,white); color:var(--destructive); border-color:color-mix(in oklch,var(--destructive) 20%,white); }
.ib .pill-lead { background:color-mix(in oklch,var(--primary) 10%,white); color:var(--primary); border-color:color-mix(in oklch,var(--primary) 20%,white); }
.ib .pill-question { background:color-mix(in oklch,var(--info) 10%,white); color:var(--info); border-color:color-mix(in oklch,var(--info) 20%,white); }
.ib .pill-praise, .ib .pill-positive { background:color-mix(in oklch,var(--success) 10%,white); color:var(--success); border-color:color-mix(in oklch,var(--success) 20%,white); }
.ib .pill-low { background:color-mix(in oklch,var(--success) 10%,white); color:var(--success); border-color:color-mix(in oklch,var(--success) 20%,white); }
.ib .pill-medium { background:color-mix(in oklch,var(--warning) 15%,white); color:var(--warning-foreground); border-color:color-mix(in oklch,var(--warning) 30%,white); }
.ib .pill-high { background:color-mix(in oklch,var(--destructive) 10%,white); color:var(--destructive); border-color:color-mix(in oklch,var(--destructive) 20%,white); }
.ib .pill-platform { background:var(--secondary); color:var(--secondary-foreground); border-color:var(--border); }

/* confidence meter */
.ib .conf { display:inline-flex; align-items:center; gap:8px; }
.ib .conf-track { width:64px; height:6px; border-radius:999px; background:var(--muted); overflow:hidden; }
.ib .conf-fill { height:100%; border-radius:999px; }
.ib .conf-num { font-size:12px; font-weight:500; color:var(--muted-foreground); font-variant-numeric:tabular-nums; }

/* ---------- layout shell ---------- */
.ib .app { display:flex; min-height:100vh; background: var(--background); }
.ib .sidebar { position:sticky; top:0; height:100vh; width:256px; flex-shrink:0; display:flex; flex-direction:column;
  border-right:1px solid var(--sidebar-border); background: var(--sidebar); }
.ib .sidebar-scroll { flex:1; min-height:0; overflow-y:auto; }
.ib .brand { display:flex; align-items:center; gap:10px; padding:20px; text-decoration:none; }
.ib .brand-tile { width:32px; height:32px; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ib .brand-tile .ic svg { width:16px; height:16px; }
.ib .brand-name { font-size:14px; font-weight:600; color: var(--sidebar-foreground); line-height:1.15; }
.ib .brand-tag { font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color: var(--muted-foreground); }
.ib .nav { display:flex; flex-direction:column; gap:12px; padding:8px 12px; }
.ib .nav-section { display:flex; flex-direction:column; gap:2px; }
.ib .nav-eyebrow { padding:8px 12px 4px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color: color-mix(in oklch, var(--muted-foreground) 70%, transparent); }
.ib .nav-item { display:flex; align-items:center; gap:12px; border-radius: var(--radius-lg); padding:8px 12px;
  font-size:14px; font-weight:500; color: color-mix(in oklch, var(--sidebar-foreground) 70%, transparent); cursor:pointer; border:none; background:none; text-align:left; width:100%; transition: background .12s, color .12s; }
.ib .nav-item:hover { background: color-mix(in oklch, var(--sidebar-accent) 60%, transparent); color: var(--sidebar-foreground); }
.ib .nav-item .ic svg { width:16px; height:16px; color: var(--muted-foreground); }
.ib .nav-item.active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.ib .nav-item.active .ic svg { color: var(--primary); }
.ib .nav-item .lbl { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ib .nav-soon { border-radius:999px; background:color-mix(in oklch,var(--primary) 10%,white); color: var(--primary); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; padding:2px 6px; }
.ib .sidebar-foot { border-top:1px solid var(--sidebar-border); padding:16px 20px; }
.ib .trial { border-radius: var(--radius-lg); background: color-mix(in oklch, var(--accent) 60%, white); padding:12px; }
.ib .trial-title { font-size:12px; font-weight:600; color: var(--accent-foreground); }
.ib .trial-body { margin-top:4px; font-size:12px; color: var(--muted-foreground); }

.ib .main { display:flex; flex-direction:column; flex:1; min-width:0; }
.ib .topbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; height:64px;
  border-bottom:1px solid var(--border); background: var(--background); padding:0 24px; }
.ib .topbar-search { position:relative; flex:1; max-width:420px; margin-left:8px; }
.ib .topbar-search .ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); }
.ib .topbar-search .ic svg { width:16px; height:16px; color: var(--muted-foreground); }
.ib .topbar-search input { height:36px; width:100%; border:1px solid var(--border); background: var(--card); border-radius: var(--radius-lg); padding:0 12px 0 34px; font-size:14px; outline:none; }
.ib .topbar-search input:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 22%, transparent); }
.ib .topbar-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.ib .icon-btn { position:relative; border:none; background:none; border-radius: var(--radius-md); padding:8px; cursor:pointer; color: var(--muted-foreground); }
.ib .icon-btn:hover { background: var(--accent); }
.ib .icon-btn .ic svg { width:20px; height:20px; }
.ib .notif-dot { position:absolute; right:6px; top:6px; width:8px; height:8px; border-radius:999px; background: var(--destructive); }
.ib .avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background: var(--primary); color: var(--primary-foreground); font-weight:600; }
.ib .user-btn { display:flex; align-items:center; gap:8px; border:none; background:none; border-radius: var(--radius-md); padding:4px 8px 4px 4px; cursor:pointer; }
.ib .user-btn:hover { background: var(--accent); }

.ib .brand-switch { display:flex; align-items:center; gap:8px; border:1px solid var(--border); background: var(--card); border-radius: var(--radius-lg); padding:6px 10px; cursor:pointer; font-size:13px; font-weight:500; }
.ib .brand-switch:hover { background: var(--accent); }
.ib .brand-switch .dot { width:18px; height:18px; border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:700; }

.ib .content { flex:1; padding:24px 32px; }
.ib .container { max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:32px; }

/* page header */
.ib .page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border); padding-bottom:24px; flex-wrap:wrap; }
.ib .page-title { font-size:24px; font-weight:600; letter-spacing:-0.02em; }
.ib .page-sub { margin-top:4px; font-size:14px; color: var(--muted-foreground); }

/* demo banner */
.ib .demo-banner { display:flex; align-items:center; gap:10px; background: color-mix(in oklch,var(--warning) 12%,white);
  border-bottom:1px solid color-mix(in oklch,var(--warning) 30%,white); color: var(--warning-foreground); font-size:13px; padding:8px 24px; }
.ib .demo-banner .ic svg { width:16px; height:16px; }

/* kpi */
.ib .kpi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (min-width:768px){ .ib .kpi-grid{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:1200px){ .ib .kpi-grid{ grid-template-columns:repeat(4,1fr);} }
.ib .kpi { padding:20px; }
.ib .kpi-top { display:flex; align-items:flex-start; justify-content:space-between; }
.ib .kpi-label { font-size:14px; font-weight:500; color: var(--muted-foreground); }
.ib .kpi-chip { display:inline-flex; padding:8px; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-foreground); }
.ib .kpi-chip .ic svg { width:16px; height:16px; }
.ib .kpi-value { margin-top:12px; display:flex; align-items:flex-end; gap:8px; font-size:30px; font-weight:600; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.ib .kpi-delta { display:inline-flex; align-items:center; gap:2px; border-radius: var(--radius-sm); padding:2px 6px; font-size:12px; font-weight:500; margin-bottom:6px; }
.ib .kpi-delta .ic svg { width:12px; height:12px; }
.ib .kpi-delta.up { background:color-mix(in oklch,var(--success) 10%,white); color:var(--success); }
.ib .kpi-delta.down { background:color-mix(in oklch,var(--destructive) 10%,white); color:var(--destructive); }
.ib .kpi-hint { margin-top:4px; font-size:12px; color: var(--muted-foreground); }

/* generic grid helpers */
.ib .grid { display:grid; gap:24px; }
.ib .cols-2 { grid-template-columns:1fr 1fr; }
.ib .cols-3 { grid-template-columns:repeat(3,1fr); }
.ib .span-2 { grid-column: span 2; }
@media (max-width:1000px){ .ib .cols-2, .ib .cols-3 { grid-template-columns:1fr; } .ib .span-2 { grid-column:auto; } }

.ib .section-title { font-size:16px; font-weight:600; }
.ib .section-sub { font-size:14px; color: var(--muted-foreground); margin-top:2px; }
.ib .row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ib .muted { color: var(--muted-foreground); }
.ib .divider-list > * + * { border-top:1px solid var(--border); }

/* filter pills */
.ib .filter-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px; }
.ib .filter-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:1px solid var(--border); background: var(--card); padding:5px 12px; font-size:12px; cursor:pointer; }
.ib .filter-pill:hover { background: var(--accent); }
.ib .filter-pill b { font-weight:600; }

/* attention list */
.ib .att-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }
.ib .att-left { display:flex; align-items:center; gap:12px; }

/* sentiment bars */
.ib .bars { display:flex; align-items:flex-end; gap:8px; height:160px; margin-top:20px; }
.ib .bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.ib .bar { width:100%; border-radius: var(--radius-md) var(--radius-md) 0 0; background: linear-gradient(to top, color-mix(in oklch,var(--primary) 60%,white), var(--primary)); }
.ib .bar-x { font-size:10px; color: var(--muted-foreground); }
.ib .legend { display:flex; gap:16px; margin-top:16px; font-size:12px; color: var(--muted-foreground); }
.ib .legend span { display:flex; align-items:center; gap:6px; }
.ib .legend .dot { width:8px; height:8px; border-radius:999px; }

/* meter rows */
.ib .meter-row + .meter-row { margin-top:16px; }
.ib .meter-track { height:6px; width:100%; border-radius:999px; background:var(--muted); overflow:hidden; margin-top:6px; }
.ib .meter-fill { height:100%; border-radius:999px; }

/* ---------- auth ---------- */
.ib .auth { display:flex; min-height:100vh; background: var(--background); }
.ib .auth-aside { position:relative; width:50%; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background: var(--primary); color: var(--primary-foreground); padding:48px; }
.ib .auth-aside .glow { position:absolute; inset:0; opacity:.3; background:
  radial-gradient(at 20% 0%, oklch(0.7 0.2 268) 0px, transparent 50%),
  radial-gradient(at 80% 100%, oklch(0.6 0.18 220) 0px, transparent 50%); }
.ib .auth-aside > * { position:relative; z-index:1; }
.ib .auth-logo { display:flex; align-items:center; gap:10px; }
.ib .auth-logo .tile { width:36px; height:36px; border-radius: var(--radius-md); background: rgba(255,255,255,.15); backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; }
.ib .auth-logo .tile .ic svg { width:20px; height:20px; }
.ib .auth-head { font-size:30px; font-weight:600; line-height:1.15; letter-spacing:-0.02em; }
.ib .auth-copy { max-width:420px; font-size:14px; color: rgba(255,255,255,.8); margin-top:16px; }
.ib .auth-list { margin-top:16px; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:14px; color: rgba(255,255,255,.85); }
.ib .auth-foot { font-size:12px; color: rgba(255,255,255,.6); }
.ib .auth-main { flex:1; display:flex; align-items:center; justify-content:center; padding:48px 24px; }
.ib .auth-form { width:100%; max-width:400px; }
.ib .auth-title { font-size:24px; font-weight:600; letter-spacing:-0.02em; }
.ib .auth-sub { margin-top:8px; font-size:14px; color: var(--muted-foreground); }
.ib .field { display:flex; flex-direction:column; gap:6px; }
.ib .link { color: var(--primary); font-weight:500; text-decoration:none; cursor:pointer; }
.ib .link:hover { text-decoration:underline; }
@media (max-width:900px){ .ib .auth-aside{ display:none; } }

/* ---------- inbox ---------- */
.ib .inbox { display:flex; flex-direction:column; height: calc(100vh - 168px); min-height: 560px;
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius-xl); overflow:hidden; }
.ib .inbox-head { border-bottom:1px solid var(--border); background: var(--card); padding:20px 32px; }
.ib .inbox-cols { display:flex; min-height:0; flex:1; }
.ib .inbox-list { width:340px; flex-shrink:0; display:flex; flex-direction:column; border-right:1px solid var(--border); background: var(--card); }
.ib .inbox-list-head { border-bottom:1px solid var(--border); padding:16px; }
.ib .views { display:flex; gap:6px; overflow-x:auto; margin-top:12px; padding-bottom:2px; }
.ib .view-pill { display:flex; align-items:center; gap:6px; flex-shrink:0; border-radius:999px; border:1px solid var(--border); background: var(--card); padding:5px 10px; font-size:12px; font-weight:500; color: var(--muted-foreground); cursor:pointer; }
.ib .view-pill.active { border-color: var(--primary); background:color-mix(in oklch,var(--primary) 10%,white); color: var(--primary); box-shadow: var(--shadow-card); }
.ib .view-count { border-radius:999px; padding:0 6px; font-size:10px; background: var(--muted); color: var(--muted-foreground); }
.ib .view-pill.active .view-count { background: var(--primary); color: var(--primary-foreground); }
.ib .conv-list { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; }
.ib .conv { display:flex; flex-direction:column; gap:6px; border-radius: var(--radius-xl); border:1px solid transparent; padding:12px; cursor:pointer; text-align:left; background:none; width:100%; }
.ib .conv:hover { border-color: color-mix(in oklch,var(--border) 60%,transparent); background: color-mix(in oklch,var(--accent) 40%,transparent); }
.ib .conv.active { border-color: color-mix(in oklch,var(--primary) 60%,white); background: color-mix(in oklch,var(--primary) 5%,white); box-shadow: 0 0 0 1px color-mix(in oklch,var(--primary) 20%,transparent); }
.ib .conv-head { display:flex; gap:12px; }
.ib .conv-av { position:relative; width:40px; height:40px; border-radius:999px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;
  background: linear-gradient(135deg, color-mix(in oklch,var(--primary) 20%,white), var(--secondary)); }
.ib .conv-av .unread { position:absolute; top:-2px; right:-2px; width:10px; height:10px; border-radius:999px; background: var(--primary); border:2px solid var(--card); }
.ib .conv-name { font-size:14px; font-weight:600; }
.ib .conv-name.read { font-weight:500; }
.ib .conv-time { margin-left:auto; font-size:11px; color: var(--muted-foreground); flex-shrink:0; }
.ib .conv-meta { display:flex; align-items:center; gap:6px; font-size:11px; color: var(--muted-foreground); margin-top:2px; }
.ib .conv-meta .ic svg { width:14px; height:14px; }
.ib .conv-prev { font-size:12px; color: var(--muted-foreground); margin-top:4px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ib .conv-tags { display:flex; flex-wrap:wrap; gap:6px; padding-left:52px; }
.ib .sla-breach { display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:2px 9px; font-size:11px; font-weight:500; background:color-mix(in oklch,var(--destructive) 10%,white); color:var(--destructive); border:1px solid color-mix(in oklch,var(--destructive) 30%,white); }
.ib .sla-breach .ic svg { width:12px; height:12px; }
.ib .sla-ok { font-size:11px; color: var(--muted-foreground); }

/* thread */
.ib .thread { display:flex; flex-direction:column; flex:1; min-width:0; }
.ib .thread-head { display:flex; align-items:flex-start; gap:12px; border-bottom:1px solid var(--border); background: var(--card); padding:12px 24px; }
.ib .thread-av { width:40px; height:40px; border-radius:999px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; background: var(--secondary); color: var(--secondary-foreground); }
.ib .thread-title { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ib .thread-name { font-size:16px; font-weight:600; }
.ib .thread-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color: var(--muted-foreground); margin-top:4px; }
.ib .thread-actions { margin-left:auto; display:flex; align-items:center; gap:4px; }
.ib .thread-body { flex:1; overflow-y:auto; background: color-mix(in oklch,var(--muted) 30%,var(--background)); padding:20px 24px; display:flex; flex-direction:column; gap:16px; }
.ib .msg { display:flex; gap:12px; }
.ib .msg.out { justify-content:flex-end; }
.ib .msg-av { width:32px; height:32px; border-radius:999px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; background: var(--secondary); color: var(--secondary-foreground); }
.ib .msg-col { max-width:80%; display:flex; flex-direction:column; gap:4px; }
.ib .msg.out .msg-col { align-items:flex-end; }
.ib .msg-meta { display:flex; align-items:center; gap:8px; font-size:11px; color: var(--muted-foreground); }
.ib .bubble { border-radius: var(--radius-2xl); padding:12px 16px; font-size:14px; line-height:1.5; box-shadow: var(--shadow-card); }
.ib .bubble.in { border-top-left-radius: var(--radius-sm); border:1px solid var(--border); background: var(--card); }
.ib .bubble.agent { border-top-right-radius: var(--radius-sm); background: linear-gradient(135deg, var(--primary), color-mix(in oklch,var(--primary) 80%,black)); color: var(--primary-foreground); }
.ib .bubble.ai { border-top-left-radius: var(--radius-sm); border:1px dashed color-mix(in oklch,var(--primary) 40%,white); background: color-mix(in oklch,var(--primary) 5%,white); }
.ib .ai-tag { display:inline-flex; align-items:center; gap:4px; border-radius:999px; background:color-mix(in oklch,var(--primary) 10%,white); padding:2px 7px; font-size:10px; font-weight:500; color: var(--primary); }
.ib .ai-tag .ic svg { width:11px; height:11px; }

.ib .composer { border-top:1px solid var(--border); background: var(--card); padding:16px 24px; }
.ib .composer-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ib .composer-label { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color: var(--muted-foreground); }
.ib .composer-label .ic svg { width:14px; height:14px; color: var(--primary); }
.ib .composer-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; justify-content:flex-end; }
.ib .composer-why { font-size:12px; color: var(--muted-foreground); margin-right:auto; max-width:50%; }

.ib .thread-aside { width:280px; flex-shrink:0; display:flex; flex-direction:column; border-left:1px solid var(--border); background: var(--card); }
.ib .aside-head { border-bottom:1px solid var(--border); padding:16px 20px; font-size:14px; font-weight:600; }
.ib .aside-body { padding:16px 20px; display:flex; flex-direction:column; gap:20px; overflow-y:auto; }
.ib .aside-label { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--muted-foreground); }
.ib .aside-row { display:flex; align-items:center; justify-content:space-between; font-size:12px; margin-top:6px; }
.ib .kb-source { display:flex; align-items:center; justify-content:space-between; border-radius: var(--radius-md); border:1px solid var(--border); background: var(--background); padding:6px 10px; font-size:12px; margin-top:6px; }
.ib .kb-source .ic svg { width:12px; height:12px; color: var(--muted-foreground); }
.ib .lead-card { border-radius: var(--radius-md); border:1px solid var(--border); background: color-mix(in oklch,var(--muted) 30%,var(--card)); padding:12px; }
.ib .lead-card .t { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; }
.ib .lead-card .t .ic svg { width:14px; height:14px; color: var(--primary); }

@media (max-width:1100px){ .ib .thread-aside{ display:none; } }
@media (max-width:860px){ .ib .inbox-list{ width:100%; } .ib .thread{ display:none; } .ib .inbox.show-thread .inbox-list{ display:none; } .ib .inbox.show-thread .thread{ display:flex; } }

/* toast */
.ib .toast-wrap { position:fixed; top:16px; right:16px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.ib .toast { display:flex; align-items:center; gap:10px; background: var(--card); border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); padding:12px 14px; font-size:13px; font-weight:500; min-width:240px; animation: toastIn .2s ease; }
.ib .toast .ic svg { width:16px; height:16px; }
.ib .toast.success .ic svg { color: var(--success); }
.ib .toast.info .ic svg { color: var(--primary); }
@keyframes toastIn { from { opacity:0; transform: translateY(-8px);} to { opacity:1; transform:none; } }

/* ---------- segmented control / range toggle ---------- */
.ib .segmented { display:inline-flex; align-items:center; border:1px solid var(--border); background: var(--background); border-radius: var(--radius-md); padding:2px; gap:2px; }
.ib .segmented button { border:none; background:none; border-radius: var(--radius-sm); padding:5px 10px; font-size:12px; font-weight:500; color: var(--muted-foreground); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.ib .segmented button svg { width:14px; height:14px; }
.ib .segmented button.on { background: var(--accent); color: var(--accent-foreground); }

/* view pills (rounded filter chips, primary fill when active) */
.ib .chips { display:flex; flex-wrap:wrap; gap:6px; }
.ib .chip-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:1px solid var(--border); background: var(--card); padding:5px 12px; font-size:12px; font-weight:500; color: var(--muted-foreground); cursor:pointer; }
.ib .chip-pill:hover { background: var(--accent); color: var(--accent-foreground); }
.ib .chip-pill.on { border-color: var(--primary); background: color-mix(in oklch,var(--primary) 10%, white); color: var(--primary); }
.ib .chip-count { border-radius:999px; padding:0 6px; font-size:10px; background: var(--muted); color: var(--muted-foreground); }
.ib .chip-pill.on .chip-count { background: var(--primary); color: var(--primary-foreground); }
.ib .chip-solid.on { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* ---------- chart card ---------- */
.ib .chart-card { background: var(--card); border:1px solid var(--border); border-radius: var(--radius-xl); padding:20px; box-shadow: var(--shadow-card); }
.ib .chart-head { margin-bottom:12px; }
.ib .chart-title { font-size:14px; font-weight:600; }
.ib .chart-sub { font-size:12px; color: var(--muted-foreground); margin-top:2px; }
.ib .chart-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:12px; color: var(--muted-foreground); }
.ib .chart-legend span { display:flex; align-items:center; gap:6px; }
.ib .chart-legend .dot { width:8px; height:8px; border-radius:999px; }
.ib .donut-rows { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.ib .donut-row { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.ib .donut-row .l { display:flex; align-items:center; gap:8px; color: var(--muted-foreground); }
.ib .donut-row .dot { width:8px; height:8px; border-radius:999px; }
.ib .donut-row .v { font-weight:600; font-variant-numeric:tabular-nums; }

/* asset/topic rows */
.ib .asset-row + .asset-row { margin-top:12px; }
.ib .topic-list > * + * { border-top:1px solid var(--border); }
.ib .topic-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
.ib .topic-dot { width:8px; height:8px; border-radius:999px; flex-shrink:0; }
.ib .insight { border-radius: var(--radius-lg); border:1px solid var(--border); background: var(--background); padding:12px; }
.ib .insight + .insight { margin-top:12px; }
.ib .insight-ico { border-radius: var(--radius-md); padding:6px; display:inline-flex; }
.ib .insight-ico svg { width:14px; height:14px; }
.ib .impact { border-radius:999px; padding:1px 7px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.ib .impact-high { background: color-mix(in oklch,var(--primary) 10%, white); color: var(--primary); }
.ib .impact-medium { background: var(--muted); color: var(--muted-foreground); }
.ib .apply-link { display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:12px; font-weight:500; color: var(--primary); background:none; border:none; cursor:pointer; padding:0; }
.ib .apply-link svg { width:12px; height:12px; }

/* ---------- stars ---------- */
.ib .stars { display:inline-flex; align-items:center; gap:1px; }
.ib .stars svg { width:14px; height:14px; }
.ib .star-on { color: var(--warning); fill: var(--warning); }
.ib .star-off { color: color-mix(in oklch, var(--muted-foreground) 30%, transparent); }

/* ---------- table ---------- */
.ib .tbl-wrap { border:1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); overflow:hidden; box-shadow: var(--shadow-card); }
.ib .tbl { width:100%; border-collapse:collapse; font-size:14px; }
.ib .tbl thead tr { background: color-mix(in oklch,var(--muted) 40%, var(--card)); border-bottom:1px solid var(--border); }
.ib .tbl th { text-align:left; padding:12px 16px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color: var(--muted-foreground); }
.ib .tbl td { padding:14px 16px; border-bottom:1px solid color-mix(in oklch,var(--border) 60%, transparent); }
.ib .tbl tbody tr { cursor:pointer; }
.ib .tbl tbody tr:last-child td { border-bottom:none; }
.ib .tbl tbody tr:hover { background: color-mix(in oklch,var(--accent) 50%, transparent); }
.ib .tbl tbody tr.sel { background: color-mix(in oklch,var(--accent) 70%, transparent); }
.ib .src-chip { width:32px; height:32px; border-radius: var(--radius-sm); background: var(--muted); color: var(--muted-foreground); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }

/* reviews detail panel */
.ib .reviews-grid { display:grid; grid-template-columns: 1fr 400px; gap:24px; }
@media (max-width:1080px){ .ib .reviews-grid { grid-template-columns:1fr; } }
.ib .panel-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color: var(--muted-foreground); }
.ib .topic-tag { border-radius: var(--radius-sm); background: var(--muted); color: var(--muted-foreground); padding:2px 7px; font-size:10px; }
.ib .ai-panel-head { border-bottom:1px solid var(--border); padding:14px 16px; }
.ib .kb-pill { display:inline-flex; align-items:center; gap:5px; border-radius:999px; border:1px solid var(--border); background: var(--card); padding:3px 9px; font-size:11px; color: var(--muted-foreground); }
.ib .kb-pill svg { width:12px; height:12px; }

/* ---------- campaign card ---------- */
.ib .cmp-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
@media (max-width:1100px){ .ib .cmp-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:720px){ .ib .cmp-grid { grid-template-columns: 1fr; } }
.ib .cmp { display:flex; flex-direction:column; background: var(--card); border:1px solid var(--border); border-radius: var(--radius-xl); padding:20px; box-shadow: var(--shadow-card); transition: box-shadow .15s; }
.ib .cmp:hover { box-shadow: var(--shadow-elevated); }
.ib .cmp-stats { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; border-radius: var(--radius-lg); background: color-mix(in oklch,var(--muted) 40%, var(--card)); padding:12px; margin-top:16px; }
.ib .cmp-stat .k { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color: var(--muted-foreground); }
.ib .cmp-stat .v { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px; }
.ib .cmp-next { display:flex; align-items:flex-start; gap:8px; border-radius: var(--radius-md); border:1px solid color-mix(in oklch,var(--info) 30%, white); background: color-mix(in oklch,var(--info) 6%, white); padding:8px 10px; font-size:12px; margin-top:14px; }
.ib .cmp-next svg { width:14px; height:14px; color: var(--info); flex-shrink:0; margin-top:1px; }
.ib .cmp-foot { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); margin-top:16px; padding-top:12px; }
.ib .obj-pill { display:inline-flex; align-items:center; gap:4px; border-radius:999px; border:1px solid var(--border); background: var(--background); padding:2px 9px; font-size:11px; text-transform:capitalize; color: var(--muted-foreground); }
.ib .obj-pill svg { width:12px; height:12px; }

/* setup checklist */
.ib .check-row { display:flex; align-items:center; gap:12px; padding:10px 0; }
.ib .check-mark { width:22px; height:22px; border-radius:999px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ib .check-mark .ic svg { width:14px; height:14px; }
.ib .check-done { background:color-mix(in oklch,var(--success) 12%,white); color: var(--success); }
.ib .check-todo { border:1.5px solid var(--border); color: var(--muted-foreground); }