/* Boss back office. Tokens from the approved canvas, "Varianta 2 · stil HighLevel". */
:root {
  --nav-bg: #0F1B2D; --nav-hover: #172539; --nav-active: #1E3556; --nav-text: #E4E9F1; --nav-muted: #97A6BA; --nav-line: #22324A; --nav-icon-on: #8DB8FF;
  --bg: #F5F7FA; --surface: #FFFFFF; --border: #E3E8EF; --rule: #EEF1F5; --field: #D0D5DD;
  --t1: #101828; --t2: #475467; --t3: #667085;
  --primary: #1D5FD1; --primary-hover: #174DAA; --primary-pale: #E8F0FD; --primary-line: #C7D8F8;
  --create: #C2410C; --create-hover: #9A3412;
  --boss: #6D3FD6; --boss-pale: #F4EFFF; --boss-line: #CDB9F7; --boss-ink: #5530B0;
  --ok: #15803D; --ok-pale: #DCFCE7; --warn: #A15C07; --warn-pale: #FEF3C7; --danger: #C62828; --danger-pale: #FDECEC;
  --wa: #1FA855; --tg: #2A9BD8;
  --radius: 8px; --radius-lg: 12px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--t1); font: 14px/20px Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
::selection { background: var(--primary-pale); }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shell */
.shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
.side { flex: 1 1 248px; max-width: 100%; background: var(--nav-bg); color: var(--nav-text); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; }
.workspace { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 10px; background: var(--nav-hover); }
.workspace .logo { width: 28px; height: 28px; border-radius: 8px; background: var(--boss); color: #fff; display: grid; place-items: center; font-weight: 600; }
.workspace small { display: block; color: var(--nav-muted); font-size: 12px; line-height: 16px; }
.side-search { margin-top: 10px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: var(--radius); background: var(--nav-hover); color: var(--nav-muted); }
.side-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--nav-text); }
.side-search input::placeholder { color: var(--nav-muted); }
.boss-btn { margin: 8px 0 6px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius); background: var(--boss); color: #fff; font-weight: 600; cursor: pointer; }
.boss-btn:hover { background: #5B30BF; }
.nav-group { margin: 12px 0 4px; padding: 12px 10px 0; border-top: 1px solid var(--nav-line); color: var(--nav-muted); font-size: 11px; line-height: 16px; font-weight: 600; }
.nav-item { min-height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 10px; border-radius: var(--radius); color: var(--nav-text); text-decoration: none; }
.nav-item:hover { background: var(--nav-hover); color: #fff; }
.nav-item svg { color: var(--nav-muted); flex-shrink: 0; }
.nav-item[aria-current="page"] { background: var(--nav-active); color: #fff; font-weight: 600; }
.nav-item[aria-current="page"] svg { color: var(--nav-icon-on); }
.nav-item .grow { flex: 1; }
.nav-badge { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.nav-soon { font-size: 11px; color: var(--nav-muted); }
.side-foot { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid var(--nav-line); display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--nav-muted); font-size: 13px; }
.side-foot button { border: 0; background: transparent; color: var(--nav-text); cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.side-foot button:hover { background: var(--nav-hover); }

.topbar { min-height: 56px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 28px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar .module { display: flex; align-items: center; font-size: 20px; line-height: 28px; font-weight: 600; }
.tabs { display: flex; flex-wrap: wrap; gap: 0 24px; }
.tab { min-height: 56px; display: flex; align-items: center; gap: 6px; color: var(--t2); font-weight: 500; text-decoration: none; }
.tab:hover { color: var(--t1); }
.tab[aria-current="page"] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); }
.count { height: 18px; padding: 0 6px; border-radius: 999px; background: var(--rule); color: var(--t2); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.tab[aria-current="page"] .count { background: var(--primary); color: #fff; }

.content { width: 100%; max-width: 1280px; padding: 24px 24px 96px; display: flex; flex-direction: column; gap: 20px; }
.content.wide { max-width: none; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.page-head h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
.page-head p { color: var(--t2); margin-top: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Buttons */
.btn { height: 36px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--field); background: var(--surface); color: var(--t1); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn:hover { background: #F9FAFB; color: var(--t1); }
.btn-primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); color: #fff; }
.btn-create { border-color: var(--create); background: var(--create); color: #fff; }
.btn-create:hover { background: var(--create-hover); color: #fff; }
.btn-group { display: inline-flex; border: 1px solid var(--field); border-radius: var(--radius); overflow: hidden; }
.btn-group button { height: 32px; padding: 0 12px; border: 0; border-right: 1px solid var(--field); background: var(--surface); font-size: 13px; font-weight: 500; cursor: pointer; }
.btn-group button:last-child { border-right: 0; }
.btn-group .g { color: var(--ok); } .btn-group .b { color: var(--primary); } .btn-group .r { color: var(--danger); }
.chip { height: 32px; padding: 0 12px; border: 1px solid var(--boss-line); border-radius: 999px; background: var(--surface); color: var(--boss-ink); font-size: 13px; cursor: pointer; }
.chip:hover { background: var(--boss-pale); }

/* Pills and dots */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot-sm { width: 6px; height: 6px; }
.dot-wa { background: var(--wa); } .dot-tg { background: var(--tg); }
.pill-ok { background: var(--ok-pale); color: var(--ok); } .pill-warn { background: var(--warn-pale); color: var(--warn); }
.pill-info { background: var(--primary-pale); color: var(--primary); } .pill-muted { background: var(--rule); color: var(--t2); }

/* Cards and panels */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; background: var(--primary-pale); border: 1px solid var(--primary-line); border-radius: 10px; }
.banner span { flex: 1 1 300px; }
.boss-card { background: var(--boss-pale); border: 1px solid var(--boss-line); border-radius: var(--radius-lg); }
.boss-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--boss); color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ok); }
.kpis { display: flex; flex-wrap: wrap; gap: 16px; }
.kpi { flex: 1 1 200px; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.kpi .label { color: var(--t2); font-weight: 500; }
.kpi .value { font-size: 30px; line-height: 36px; font-weight: 600; }
.kpi small { font-size: 12px; color: var(--t2); }
.meter { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: #13795B; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 16px; }
.field { flex: 1 1 160px; display: flex; flex-direction: column; gap: 6px; }
.field.grow { flex: 2 1 240px; }
.field span { font-size: 12px; font-weight: 500; color: var(--t2); }
.field select, .field input { height: 36px; padding: 0 10px; border: 1px solid var(--field); border-radius: var(--radius); background: var(--surface); }

/* Skeleton pages */
.blocks { display: flex; flex-wrap: wrap; gap: 16px; }
.block { min-width: 0; padding: 14px 16px; background: var(--rule); border: 1px dashed #C9D1DB; border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.block b { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--t2); }
.block i { display: block; height: 10px; border-radius: 4px; background: #E1E6ED; }

/* Inbox */
.inbox { flex: 1; display: flex; flex-wrap: wrap; min-height: 0; }
.convlist { flex: 1 1 320px; min-width: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.convlist-head { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--rule); }
.search { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--field); border-radius: var(--radius); color: var(--t3); background: var(--surface); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--t1); background: transparent; }
.stage-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-filter button { height: 26px; padding: 0 10px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.stage-filter .all { background: var(--t1); color: #fff; }
.conv { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); color: var(--t1); text-decoration: none; }
.conv:hover { background: #F9FAFB; color: var(--t1); }
.conv[aria-current="true"] { background: var(--primary-pale); }
.avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-row { display: flex; justify-content: space-between; gap: 8px; }
.conv-row time { font-size: 12px; color: var(--t2); }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conv .preview { color: var(--t2); }
.conv .preview.unread { color: var(--t1); font-weight: 500; }
.unread-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.conv-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); }
.thread { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.thread-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.thread-head .who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.messages { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: #F9FAFB; }
.day { align-self: center; font-size: 12px; color: var(--t3); }
.msg { max-width: 68%; display: flex; flex-direction: column; gap: 4px; }
.msg p { padding: 10px 14px; }
.msg small { font-size: 12px; color: var(--t3); }
.msg.in { align-self: flex-start; } .msg.in p { background: #F2F4F7; border-radius: 14px 14px 14px 4px; }
.msg.out { align-self: flex-end; align-items: flex-end; } .msg.out p { background: var(--primary-pale); border-radius: 14px 14px 4px 14px; }
.msg.out small.boss { color: var(--boss); }
.proposal { margin-top: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.proposal .title { display: flex; align-items: center; gap: 8px; color: var(--boss-ink); font-weight: 600; font-size: 13px; }
.proposal .text { padding: 10px 12px; background: var(--surface); border-radius: var(--radius); }
.composer { padding: 12px 20px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.composer form { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--field); border-radius: 10px; }
.composer input { flex: 1; min-width: 0; height: 32px; border: 0; outline: 0; }
.icon-btn { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--boss); }
.person { flex: 1 1 280px; min-width: 0; background: var(--surface); border-left: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.journey li { height: 6px; border-radius: 3px; }
.next-step { padding: 14px; background: var(--danger-pale); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; }
.next-step .late { font-size: 12px; font-weight: 600; color: var(--danger); }
.seq { display: flex; flex-direction: column; gap: 8px; }
.seq-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }

/* Pipeline */
.board-scroll { overflow-x: auto; padding-bottom: 8px; }
.board { display: flex; gap: 12px; align-items: flex-start; min-width: max-content; }
.column { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.column-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; }
.column-head .name { display: flex; align-items: center; gap: 8px; }
.column-head small { font-size: 12px; color: var(--t2); }
.deal { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--t1); text-decoration: none; }
.deal:hover { border-color: #C9D1DB; color: var(--t1); box-shadow: 0 2px 8px rgba(16, 24, 40, .06); }
.deal .meta { font-size: 12px; line-height: 16px; color: var(--t2); }
.deal .due { font-size: 12px; line-height: 16px; color: var(--t2); padding-top: 6px; border-top: 1px solid var(--rule); }
.deal .due.late { color: var(--danger); font-weight: 500; }
.boss-tag { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--boss-pale); color: var(--boss-ink); font-size: 12px; line-height: 16px; }

/* Agents */
.dispatcher { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 20px; }
.dispatcher .mark { width: 48px; height: 48px; border-radius: 12px; background: var(--boss); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 20px; }
.agents { display: flex; flex-wrap: wrap; gap: 16px; }
.agent { flex: 1 1 260px; min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.agent.off { background: #FAFBFC; border-style: dashed; border-color: #C9D1DB; }
.agent header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent .small { font-size: 12px; color: var(--t2); }
.agent .needs { font-size: 12px; color: var(--warn); }
.agent footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 13px; }
.table-wrap { overflow-x: auto; }
table.list { width: 100%; min-width: 760px; border-collapse: collapse; }
table.list th { text-align: left; padding: 10px 16px; font-size: 12px; font-weight: 500; color: var(--t2); border-bottom: 1px solid var(--border); }
table.list td { padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.list tr:last-child td { border-bottom: 0; }

/* Follow-up: talk to the agent on the left, see the plan on the right */
.seq-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.seq-picker a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--t1); text-decoration: none; font-weight: 500; }
.seq-picker a:hover { border-color: #C9D1DB; color: var(--t1); }
.seq-picker a[aria-current="true"] { border-color: var(--primary); background: var(--primary-pale); color: var(--primary); }
.seq-picker small { color: var(--t2); font-weight: 400; }
.fu { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.fu-chat { flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; }
.fu-chat .messages { border-radius: var(--radius-lg) var(--radius-lg) 0 0; min-height: 380px; }
.fu-chat .msg p { font-size: 15px; line-height: 22px; }
.fu-chat .msg.out p { background: var(--primary); color: #fff; }
.fu-chat .msg.in p { background: var(--surface); border: 1px solid var(--border); }
.agent-name { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--boss-ink); font-weight: 600; }
.ideas { display: flex; flex-wrap: wrap; gap: 8px; }
.talk { display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.talk input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--field); border-radius: 10px; font-size: 15px; }
.mic-big { width: 52px; height: 52px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--boss); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mic-big:hover { background: #5B30BF; }
.fu-plan { flex: 2 1 340px; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.plan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plan-step { display: flex; gap: 14px; }
.plan-step .num { display: flex; flex-direction: column; align-items: center; }
.plan-step .num b { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-pale); color: var(--primary); display: grid; place-items: center; font-size: 14px; }
.plan-step .num i { flex: 1; width: 2px; background: var(--border); margin: 4px 0; }
.plan-step:last-child .num i { display: none; }
.plan-step .what { padding-bottom: 18px; display: flex; flex-direction: column; gap: 2px; }
.plan-step .when { font-size: 13px; font-weight: 600; color: var(--primary); }
.plan-step .text { font-size: 15px; line-height: 22px; }
.plan-step .how { font-size: 12px; color: var(--t2); }
.plan-stop { padding: 12px 14px; background: var(--ok-pale); color: #14532D; border-radius: 10px; font-size: 14px; }
.btn-big { height: 52px; font-size: 16px; justify-content: center; }

/* Boss plan card */
.plan-params { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; padding: 10px 12px; background: var(--surface); border-radius: var(--radius); }
.plan-params dt { color: var(--t2); font-size: 13px; }
.plan-params dd { margin: 0; }

/* Connectors: cards like an app store */
.connector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.connector { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.connector.off { background: #FAFBFC; }
.connector header { display: flex; align-items: center; gap: 12px; }
.connector header small { color: var(--t2); font-size: 12px; }
.connector-logo { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--primary-pale); color: var(--primary); display: grid; place-items: center; font-weight: 600; font-size: 18px; }
.connector.off .connector-logo { background: var(--rule); color: var(--t3); }
.connector .does { color: var(--t2); }
.note { font-size: 13px; color: var(--t2); }
.connector footer { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* Channels and connection checklist */
.channel { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.channel:last-child { border-bottom: 0; }
.channel .who { flex: 1 1 260px; display: flex; align-items: center; gap: 12px; }
.channel .info { flex: 1 1 220px; font-size: 13px; color: var(--t2); }
.dot-lg { width: 10px; height: 10px; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.step:last-child { border-bottom: 0; }
.step .mark { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--rule); color: var(--t2); }
.step.done .mark { background: var(--ok-pale); color: var(--ok); }
.step .how { color: var(--t2); margin-top: 2px; }
.copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.copy code { padding: 6px 10px; background: #F2F4F7; border: 1px solid var(--border); border-radius: 6px; font: 13px/20px ui-monospace, "SFMono-Regular", Menlo, monospace; word-break: break-all; }
.progress { height: 8px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--primary); }

/* Agent sheets */
.sheet { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fact { display: flex; flex-direction: column; gap: 6px; }
.fact > b { font-size: 12px; color: var(--t2); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 2px 8px; border-radius: 999px; background: var(--rule); color: var(--t1); font-size: 12px; }
.prompt { margin: 0; padding: 16px; max-height: 420px; overflow: auto; background: #F9FAFB; border: 1px solid var(--border); border-radius: var(--radius); font: 13px/20px ui-monospace, "SFMono-Regular", Menlo, monospace; white-space: pre-wrap; }

/* Media library */
.upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 16px; }
.upload input[type=file] { height: auto; padding: 6px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.media { display: flex; flex-direction: column; overflow: hidden; }
.media .thumb { aspect-ratio: 9 / 16; max-height: 300px; background: #0F1B2D; display: grid; place-items: center; color: var(--nav-muted); }
.media .thumb video, .media .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media .body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.media .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.media small { color: var(--t2); font-size: 12px; }
.empty { padding: 40px 20px; text-align: center; color: var(--t2); border: 1px dashed #C9D1DB; border-radius: var(--radius-lg); }
.link-danger { border: 0; background: none; padding: 0; color: var(--danger); font-size: 13px; cursor: pointer; }

/* Floating Boss */
.fab { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--boss); color: #fff; box-shadow: 0 8px 24px rgba(16, 24, 40, .18); display: grid; place-items: center; cursor: pointer; }
.fab:hover { background: #5B30BF; }

/* Login */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--nav-bg); }
.login-card { width: 100%; max-width: 400px; padding: 32px; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 48px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 20px; }
.login-card .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.login-card .brand span { width: 36px; height: 36px; border-radius: 10px; background: var(--boss); color: #fff; display: grid; place-items: center; font-size: 18px; }
.login-card h1 { font-size: 22px; line-height: 30px; font-weight: 600; }
.login-card p { color: var(--t2); }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.login-card input { height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: var(--radius); }
.login-card .btn { height: 44px; justify-content: center; font-size: 15px; }
.error { padding: 10px 12px; background: var(--danger-pale); color: var(--danger); border-radius: var(--radius); font-weight: 500; }

@media (max-width: 720px) {
  .side { padding-bottom: 16px; }
  .msg { max-width: 88%; }
}
/* Jarvis (voice) */
.jarvis-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 12px 12px; font-size: 13px; color: var(--t2); background: var(--surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.fu-chat .talk { border-radius: 0; }
.jarvis-bar [data-jarvis-status] { flex: 1 1 100%; }
.jarvis-bar label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mic-big.listening { background: var(--danger); animation: jarvis-pulse 1.2s ease-in-out infinite; }
@keyframes jarvis-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,45,32,.45); } 50% { box-shadow: 0 0 0 10px rgba(217,45,32,0); } }
@media (prefers-reduced-motion: reduce) { .mic-big.listening { animation: none; } }