/* ============================================================
   Lira Agent page (Pages/LiraAgent) — dark "agents at work" UI.
   Global (not scoped) because the page is split into child
   components that share one look. Every class is prefixed la-.
   The page is always dark, whatever the app theme is.
   The admin-only Operations tab keeps its own scoped styles.
   ============================================================ */

.la-page {
    --la-bg: #0b0d12;
    --la-surface: #12151c;
    --la-surface-2: #161a23;
    --la-border: #222733;
    --la-border-soft: #1c212c;
    --la-line: #262c39;
    --la-text: #e8eaf0;
    --la-dim: #8b93a7;
    --la-faint: #6b7388;
    --la-soft: #b6bdd0;
    --la-gold: #f2b632;
    --la-gold-bg: #2a2210;
    --la-gold-line: #3a2f12;
    --la-green: #3ddc97;
    --la-green-bg: #10261d;
    --la-green-line: #1d5a3f;
    --la-red: #ff7a7a;
    --la-red-bg: #2a1414;

    background: var(--la-bg);
    color: var(--la-text);
    font-family: 'Manrope', system-ui, sans-serif;
    border-radius: 18px;
    padding: 32px 40px 40px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-height: calc(100vh - 120px);
}
.la-page *, .la-page *::before, .la-page *::after { box-sizing: border-box; }
.la-page button { font-family: inherit; }

@keyframes la-livepulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,151,.55); } 100% { box-shadow: 0 0 0 9px rgba(61,220,151,0); } }
@keyframes la-goldpulse { 0% { box-shadow: 0 0 0 0 rgba(242,182,50,.55); } 100% { box-shadow: 0 0 0 9px rgba(242,182,50,0); } }
@keyframes la-scan { 0% { transform: translateX(-120%); } 100% { transform: translateX(380%); } }
@keyframes la-orb { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes la-stripe { 0% { background-position: 0 0; } 100% { background-position: 32px 0; } }
@keyframes la-spin { to { transform: rotate(360deg); } }

.la-live-dot { animation: la-livepulse 1.8s infinite; }
.la-gold-dot { animation: la-goldpulse 1.8s infinite; }
.la-progress-live {
    background-image: linear-gradient(135deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%);
    background-size: 32px 32px;
    animation: la-stripe 1s linear infinite;
}

/* ── Header ─────────────────────────────────────────────── */
.la-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.la-header-text { display: flex; flex-direction: column; gap: 8px; }
.la-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--la-gold); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.la-title { margin: 0; font-size: 44px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--la-text); }
.la-sub { margin: 0; font-size: 16px; color: var(--la-dim); max-width: 640px; line-height: 1.5; }
.la-header-actions { display: flex; align-items: center; gap: 14px; }
.la-live-pill { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--la-green-bg); border: 1px solid var(--la-green-line); color: var(--la-green); font-size: 13px; font-weight: 700; }
.la-live-pill .la-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--la-green); display: inline-block; }
.la-btn-outline { height: 40px; padding: 0 16px; border: 1px solid var(--la-line); border-radius: 8px; background: transparent; color: var(--la-text); font-size: 13px; font-weight: 700; letter-spacing: .06em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.la-btn-outline:hover { border-color: var(--la-gold); color: var(--la-gold); }
.la-btn-outline.spinning svg { animation: la-spin .8s linear infinite; }

/* ── Tabs ───────────────────────────────────────────────── */
.la-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--la-border-soft); flex-wrap: wrap; }
.la-tab { padding: 12px 18px; font-size: 15px; font-weight: 600; color: var(--la-dim); background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.la-tab:hover { color: var(--la-text); }
.la-tab.active { font-weight: 700; color: var(--la-gold); border-bottom-color: var(--la-gold); }
.la-tab-badge { display: inline-block; margin-left: 8px; min-width: 20px; padding: 0 6px; height: 20px; line-height: 20px; border-radius: 10px; background: var(--la-gold); color: #1a1405; font-size: 11px; font-weight: 800; text-align: center; }
.la-pane[hidden] { display: none !important; }

/* ── Hero band ──────────────────────────────────────────── */
.la-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 40px; padding: 28px 32px; border-radius: 16px; background: var(--la-surface); border: 1px solid var(--la-border); }
.la-hero-glow { position: absolute; left: -60px; top: -80px; width: 320px; height: 320px; border-radius: 160px; background: radial-gradient(circle, rgba(242,182,50,.28), rgba(242,182,50,0) 68%); animation: la-orb 3.2s ease-in-out infinite; pointer-events: none; }
.la-hero-left { position: relative; display: flex; align-items: center; gap: 20px; width: 470px; flex-shrink: 0; }
.la-orb { width: 68px; height: 68px; border-radius: 34px; flex-shrink: 0; background: radial-gradient(circle at 35% 30%, #ffd977, #f2b632 45%, #b57a0c); display: flex; align-items: center; justify-content: center; color: #1a1405; }
.la-orb.idle { background: radial-gradient(circle at 35% 30%, #3a4152, #262c39 55%, #161a23); color: var(--la-dim); }
.la-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.la-hero-sub { font-size: 14px; color: var(--la-dim); line-height: 1.45; margin-top: 4px; }
.la-stats { position: relative; flex-grow: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.la-stat { display: flex; flex-direction: column; gap: 4px; padding-left: 20px; border-left: 1px solid var(--la-line); }
.la-stat-value { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.la-stat-value.gold { color: var(--la-gold); }
.la-stat-of { font-size: 18px; color: var(--la-dim); font-weight: 600; }
.la-stat-label { font-size: 13px; color: var(--la-dim); }
.la-attention { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 12px; border-radius: 14px; background: var(--la-gold-bg); border: 1px solid var(--la-gold-line); color: var(--la-gold); font-size: 12px; font-weight: 700; }

/* ── Two columns: agents + activity ─────────────────────── */
.la-columns { display: flex; gap: 24px; align-items: flex-start; }
.la-agents { width: 520px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.la-activity { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.la-h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; color: var(--la-text); margin: 0; }

/* agent card */
.la-agent { padding: 20px 22px; border-radius: 14px; background: var(--la-surface); border: 1px solid var(--la-border); display: flex; flex-direction: column; gap: 16px; }
.la-agent.working { border-color: var(--la-gold-line); }
.la-agent.offline { opacity: .7; }
.la-agent-top { display: flex; align-items: center; gap: 14px; }
.la-avatar { width: 42px; height: 42px; border-radius: 21px; background: var(--la-surface-2); border: 1px solid #333a4a; color: var(--la-soft); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.la-agent.working .la-avatar { background: var(--la-gold-bg); border-color: var(--la-gold); color: var(--la-gold); }
.la-agent-name { font-size: 16px; font-weight: 700; }
.la-agent-meta { font-size: 13px; color: var(--la-dim); }
.la-agent-info { flex-grow: 1; min-width: 0; }
.la-badge { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: 13px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.la-badge .la-dot { width: 7px; height: 7px; border-radius: 4px; display: inline-block; }
.la-badge.working { background: var(--la-gold-bg); color: var(--la-gold); }
.la-badge.working .la-dot { background: var(--la-gold); }
.la-badge.ready { background: var(--la-green-bg); color: var(--la-green); }
.la-badge.ready .la-dot { background: var(--la-green); }
.la-badge.offline { background: var(--la-surface-2); color: var(--la-dim); }
.la-badge.offline .la-dot { background: var(--la-faint); }
.la-badge.plain { background: var(--la-surface-2); color: var(--la-soft); }
.la-badge.done { background: var(--la-green-bg); color: var(--la-green); }
.la-badge.notice { background: var(--la-gold-bg); color: var(--la-gold); }
.la-badge.failed { background: var(--la-red-bg); color: var(--la-red); }

.la-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--la-bg); border: 1px solid var(--la-border-soft); font-size: 14px; font-weight: 600; min-width: 0; }
.la-file svg { flex-shrink: 0; }
.la-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.la-steps { display: flex; flex-direction: column; gap: 10px; }
.la-steps-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--la-dim); font-weight: 600; }
.la-steps-head .cur { color: var(--la-gold); font-weight: 700; }
.la-bars { display: flex; gap: 6px; }
.la-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--la-line); background-color: var(--la-line); }
.la-bar.done { background: var(--la-green); }
.la-bar.now { background-color: var(--la-gold); }
.la-bars.thin .la-bar { height: 5px; }
.la-step-names { display: flex; justify-content: space-between; font-size: 11px; color: var(--la-faint); font-weight: 600; gap: 4px; }

.la-watch { position: relative; overflow: hidden; height: 40px; border-radius: 8px; background: var(--la-bg); border: 1px solid var(--la-border-soft); display: flex; align-items: center; padding: 0 12px; gap: 10px; font-size: 14px; color: var(--la-dim); }
.la-watch .la-scan { position: absolute; left: 0; top: 0; width: 90px; height: 40px; background: linear-gradient(90deg, rgba(242,182,50,0), rgba(242,182,50,.16), rgba(242,182,50,0)); animation: la-scan 2.6s linear infinite; }
.la-watch svg, .la-watch span { position: relative; }

/* activity feed */
.la-feed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.la-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.la-chip { height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--la-line); background: transparent; color: var(--la-soft); font-size: 12px; font-weight: 700; cursor: pointer; }
.la-chip:hover { border-color: var(--la-gold); }
.la-chip.active { border-color: var(--la-gold); background: var(--la-gold-bg); color: var(--la-gold); }
.la-card { display: flex; flex-direction: column; border-radius: 14px; background: var(--la-surface); border: 1px solid var(--la-border); overflow: hidden; }
.la-event { display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--la-border-soft); }
.la-event:last-child { border-bottom: 0; }
.la-event-icon { width: 30px; height: 30px; border-radius: 15px; flex-shrink: 0; background: var(--la-surface-2); color: var(--la-soft); display: flex; align-items: center; justify-content: center; }
.la-event.tone-success .la-event-icon { background: var(--la-green-bg); color: var(--la-green); }
.la-event.tone-accent .la-event-icon { background: var(--la-gold-bg); color: var(--la-gold); }
.la-event.tone-notice .la-event-icon { background: var(--la-gold-bg); color: var(--la-gold); }
.la-event.tone-attention .la-event-icon { background: var(--la-red-bg); color: var(--la-red); }
.la-event-body { flex-grow: 1; min-width: 0; }
.la-event-title { font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.la-event-detail { font-size: 13px; color: var(--la-dim); margin-top: 2px; overflow-wrap: anywhere; }
.la-event-meta { font-size: 12px; color: var(--la-faint); margin-top: 6px; }
.la-empty { padding: 36px 24px; text-align: center; color: var(--la-dim); font-size: 14px; line-height: 1.5; }
.la-empty strong { display: block; color: var(--la-text); font-size: 16px; margin-bottom: 4px; }
.la-loading { display: flex; align-items: center; gap: 12px; color: var(--la-dim); font-size: 14px; padding: 12px 0; }
.la-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--la-line); border-top-color: var(--la-gold); animation: la-spin .8s linear infinite; }

/* ── Send documents ─────────────────────────────────────── */
.la-send { display: flex; gap: 32px; align-items: flex-start; }
.la-send-left { width: 600px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.la-send-right { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.la-h1 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.la-help { font-size: 14px; color: var(--la-dim); line-height: 1.5; margin-top: 4px; }
.la-drop { position: relative; height: 300px; border-radius: 16px; border: 2px dashed #5a4718; background: #14120c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; transition: border-color .15s, background .15s; }
.la-drop:hover, .la-drop.over { border-color: var(--la-gold); background: #1a160c; }
.la-drop.disabled { opacity: .55; pointer-events: none; }
.la-drop-icon { width: 64px; height: 64px; border-radius: 32px; background: var(--la-gold-bg); color: var(--la-gold); display: flex; align-items: center; justify-content: center; }
.la-drop-title { font-size: 18px; font-weight: 700; }
.la-drop-or { font-size: 14px; color: var(--la-dim); }
.la-browse { height: 44px; padding: 0 24px; border-radius: 10px; border: 1px solid var(--la-gold); background: transparent; color: var(--la-gold); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; }
.la-drop-note { font-size: 12px; color: var(--la-faint); }
/* the real <InputFile> covers the whole zone: click = browse, drop = add */
.la-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.la-label { font-size: 13px; font-weight: 700; color: var(--la-soft); margin-bottom: 10px; }
.la-targets { display: flex; gap: 8px; flex-wrap: wrap; }
.la-target { height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--la-line); background: transparent; color: var(--la-soft); font-size: 14px; font-weight: 600; cursor: pointer; }
.la-target:hover { border-color: var(--la-gold); }
.la-target.active { border-color: var(--la-gold); background: var(--la-gold-bg); color: var(--la-gold); font-weight: 700; }
.la-target:disabled { opacity: .45; cursor: not-allowed; }
.la-send-btn { height: 50px; border-radius: 10px; border: 0; background: var(--la-gold); color: #1a1405; font-size: 15px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.la-send-btn:hover:not(:disabled) { filter: brightness(1.08); }
.la-send-btn:disabled { background: var(--la-line); color: var(--la-faint); cursor: not-allowed; }
.la-notice { padding: 12px 14px; border-radius: 10px; background: var(--la-gold-bg); border: 1px solid var(--la-gold-line); color: var(--la-gold); font-size: 13px; line-height: 1.45; }
.la-notice.error { background: var(--la-red-bg); border-color: #4a2222; color: var(--la-red); }

.la-selected { display: flex; flex-direction: column; border-radius: 12px; background: var(--la-surface); border: 1px solid var(--la-border); overflow: hidden; }
.la-selected-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--la-border-soft); font-size: 13px; }
.la-selected-row:last-child { border-bottom: 0; }
.la-selected-name { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.la-selected-size { color: var(--la-faint); font-size: 12px; }
.la-x { width: 26px; height: 26px; border-radius: 13px; border: 0; background: transparent; color: var(--la-dim); cursor: pointer; font-size: 18px; line-height: 1; }
.la-x:hover { background: var(--la-surface-2); color: var(--la-text); }

.la-upload { padding: 16px 20px; border-bottom: 1px solid var(--la-border-soft); display: flex; flex-direction: column; gap: 10px; }
.la-upload:last-child { border-bottom: 0; }
.la-upload-row { display: flex; align-items: center; gap: 12px; }
.la-upload-row > svg { flex-shrink: 0; }
.la-upload-info { flex-grow: 1; min-width: 0; }
.la-upload-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-upload-sub { font-size: 12px; color: var(--la-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-upload-pct { font-size: 12px; font-weight: 700; color: var(--la-gold); white-space: nowrap; }
.la-upload-err { font-size: 12px; color: var(--la-red); }
.la-track { height: 6px; border-radius: 3px; background: var(--la-line); overflow: hidden; }
.la-track > div { height: 6px; border-radius: 3px; background-color: var(--la-gold); transition: width .2s; }
.la-foot { font-size: 13px; color: var(--la-faint); line-height: 1.5; }
.la-right-head { display: flex; align-items: center; justify-content: space-between; }
.la-right-head small { font-size: 13px; color: var(--la-dim); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
    .la-columns, .la-send { flex-direction: column; }
    .la-agents, .la-send-left { width: 100%; }
    .la-activity, .la-send-right { width: 100%; }
    .la-hero { flex-direction: column; align-items: flex-start; gap: 24px; }
    .la-hero-left { width: 100%; }
    .la-stats { width: 100%; }
}
@media (max-width: 720px) {
    .la-page { padding: 20px 16px 28px; border-radius: 12px; }
    .la-title { font-size: 32px; }
    .la-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .la-step-names { font-size: 10px; }
}

/* Operations tab (admin) keeps the app's themed look inside its own panel */
.la-ops { background: var(--ls-bg, #0A0A0C); color: var(--ls-text, #F4F1E8); border: 1px solid var(--ls-border, #2A2A31); border-radius: 14px; padding: 22px; }
.la-drop input[type=file].la-input-held { display: none; }

/* ── Spacing between hero and columns; long feed scrolls inside its card ── */
.la-pane { display: flex; flex-direction: column; gap: 26px; }
.la-activity .la-card { max-height: 620px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--la-line) transparent; }
.la-activity .la-card::-webkit-scrollbar { width: 8px; }
.la-activity .la-card::-webkit-scrollbar-thumb { background: var(--la-line); border-radius: 4px; }
.la-send-right .la-card { max-height: 560px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--la-line) transparent; }

/* ── Working card: step checklist ── */
.la-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.la-check { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--la-faint); }
.la-check-mark { width: 18px; height: 18px; border-radius: 9px; flex-shrink: 0; border: 1px solid var(--la-line); display: inline-flex; align-items: center; justify-content: center; }
.la-check.done { color: var(--la-soft); }
.la-check.done .la-check-mark { background: var(--la-green-bg); border-color: var(--la-green-line); color: var(--la-green); }
.la-check.now { color: var(--la-gold); font-weight: 700; }
.la-check.now .la-check-mark { border-color: var(--la-gold); background: var(--la-gold-bg); }
.la-check.now .la-dot { width: 7px; height: 7px; border-radius: 4px; background: var(--la-gold); display: inline-block; }