/* ============================================================
   TerritoryIQ — app-territory-command.css
   Territory Command page — full-canvas game board layout.
   ============================================================ */

/* ── Empty state (no session) ────────────────────────────── */
.tiq-tc-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 56px);
    padding: 3rem 1.5rem;
    background: transparent;
}

.tiq-tc-empty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    max-width: 420px;
}

.tiq-tc-empty-icon { margin-bottom: 0.5rem; }

.tiq-tc-empty-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--tiq-text);
    margin: 0;
    letter-spacing: -0.02em;
}

.tiq-tc-empty-desc {
    font-size: 0.9rem;
    color: var(--tiq-text-3);
    line-height: 1.7;
    margin: 0;
}

/* ── Shell ───────────────────────────────────────────────── */
.tiq-tc-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    overflow: hidden;
    background: var(--tiq-bg);
}

/* ── Command header bar ──────────────────────────────────── */
.tiq-tc-header {
    background: var(--tiq-ink);
    background-image: radial-gradient(circle at 1px 1px, rgba(0,178,122,0.08) 1px, transparent 0);
    background-size: 24px 24px;
    border-bottom: 1px solid rgba(0,178,122,0.2);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
    position: relative;
}

.tiq-tc-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--tiq-green) 0%, var(--tiq-green-bright) 30%, transparent 70%);
}

.tiq-tc-header-left { display: flex; flex-direction: column; gap: 2px; }

.tiq-tc-header-eyebrow {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--tiq-green);
}

.tiq-tc-header-address {
    font-size: 0.9rem;
    font-weight: 700;
    color: #F1F5F9;
    letter-spacing: -0.01em;
}

.tiq-tc-header-brand {
    color: var(--tiq-green-bright);
}

.tiq-tc-header-sep {
    color: #475569;
    margin: 0 2px;
}

.tiq-tc-header-type {
    font-size: 0.7rem;
    color: #64748B;
    font-weight: 500;
    margin-top: 1px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tiq-tc-header-radius {
    font-size: 0.78rem;
    font-weight: 400;
    color: #64748B;
    margin-left: 4px;
}

.tiq-tc-header-stats {
    display: flex;
    gap: 1.25rem;
    margin-left: auto;
}

.tiq-tc-header-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.tiq-tc-header-stat-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #F1F5F9;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.tiq-tc-green { color: var(--tiq-green-bright) !important; }
.tiq-tc-amber { color: #FCD34D !important; }
.tiq-tc-red   { color: #FCA5A5 !important; }

.tiq-tc-header-stat-lbl {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #475569;
}

.tiq-tc-header-actions { flex-shrink: 0; }

/* ── Body (map + toggle + panel) ────────────────────────── */
.tiq-tc-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative; /* needed so absolute toggle is contained here */
}

/* ── Map ─────────────────────────────────────────────────── */
.tiq-tc-map-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.tiq-tc-map {
    width: 100%;
    height: 100%;
}

/* ── Timeline strip at bottom of map ────────────────────── */
.tiq-tc-timeline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10,22,40,0.88);
    border-top: 1px solid rgba(0,178,122,0.2);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(8px);
    z-index: 10;
}

.tiq-tc-timeline-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tiq-green);
    flex-shrink: 0;
}

.tiq-tc-timeline-track {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.tiq-tc-timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.tiq-tc-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tiq-green);
    box-shadow: 0 0 8px rgba(0,178,122,0.6);
}

.tiq-tc-timeline-node--active .tiq-tc-timeline-dot {
    box-shadow: 0 0 12px rgba(0,178,122,0.8);
}

.tiq-tc-timeline-date {
    font-size: 0.62rem;
    color: var(--tiq-green);
    font-weight: 600;
    white-space: nowrap;
}

.tiq-tc-timeline-future {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    color: #334155;
    font-style: italic;
}

/* ── Right panel ─────────────────────────────────────────── */
.tiq-tc-panel {
    width: 360px;
    flex-shrink: 0;
    background: var(--tiq-surface);
    border-left: 1px solid var(--tiq-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: width 0.25s ease;
}

/* Panel inner content wrapper */
.tiq-tc-panel-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    width: 360px;
}

.tiq-tc-body--collapsed .tiq-tc-panel-inner {
    width: 0;
}

/* Panel tab switcher */
.tiq-tc-panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--tiq-border);
    background: var(--tiq-surface-2);
    flex-shrink: 0;
}

.tiq-tc-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tiq-text-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    letter-spacing: 0.01em;
}

.tiq-tc-tab:hover { color: var(--tiq-text-2); }

.tiq-tc-tab--active {
    color: var(--tiq-green-dim);
    border-bottom-color: var(--tiq-green);
    background: var(--tiq-surface);
}

/* Panel body */
.tiq-tc-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--tiq-border) transparent;
}

.tiq-tc-panel-body::-webkit-scrollbar { width: 4px; }
.tiq-tc-panel-body::-webkit-scrollbar-thumb { background: var(--tiq-border); border-radius: 2px; }

.tiq-tc-panel-section-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--tiq-text-4);
    padding: 4px 0 2px;
    border-top: 1px solid var(--tiq-border);
    margin-top: 4px;
}

.tiq-tc-panel-section-label:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* Strategy context box */
.tiq-tc-strategy-box {
    background: var(--tiq-ink);
    background-image: radial-gradient(circle at 1px 1px, rgba(0,178,122,0.07) 1px, transparent 0);
    background-size: 20px 20px;
    border: 1px solid rgba(0,178,122,0.2);
    border-radius: 10px;
    padding: 12px 14px;
}

.tiq-tc-strategy-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--tiq-green);
    margin-bottom: 6px;
}

.tiq-tc-strategy-text {
    font-size: 0.84rem;
    color: #94A3B8;
    line-height: 1.65;
}

.tiq-tc-strategy-text strong { color: #CBD5E1; font-weight: 600; }

/* Agent prompt hint */
.tiq-tc-agent-prompt-hint {
    font-size: 0.82rem;
    color: var(--tiq-text-4);
    font-style: italic;
    line-height: 1.6;
    padding: 8px 12px;
    background: var(--tiq-surface-2);
    border: 1.5px dashed var(--tiq-border);
    border-radius: 8px;
}

/* ── Coming soon state ───────────────────────────────────── */
.tiq-tc-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 24px 16px;
}

.tiq-tc-coming-soon-icon { margin-bottom: 4px; }

.tiq-tc-coming-soon-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tiq-text);
    letter-spacing: -0.01em;
}

.tiq-tc-coming-soon-desc {
    font-size: 0.82rem;
    color: var(--tiq-text-3);
    line-height: 1.65;
    max-width: 280px;
}

.tiq-tc-coming-soon-channels {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

.tiq-tc-channel-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.tiq-tc-channel-pill--meta  { background: #E7F0FD; color: #1877F2; }
.tiq-tc-channel-pill--mail  { background: #F0FDF9; color: var(--tiq-green-dim); }
.tiq-tc-channel-pill--other { background: var(--tiq-surface-2); color: var(--tiq-text-3); }

/* ── Save + New Chat action row ──────────────────────────── */
.tiq-tc-chat-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 0;
    justify-content: flex-end;
}

.tiq-tc-chat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    line-height: 1;
    white-space: nowrap;
}

.tiq-tc-chat-action-btn--save {
    background: rgba(0,178,122,0.1);
    border-color: rgba(0,178,122,0.3);
    color: var(--tiq-green-dim);
}

.tiq-tc-chat-action-btn--save:hover:not(:disabled) {
    background: rgba(0,178,122,0.18);
    border-color: rgba(0,178,122,0.5);
}

.tiq-tc-chat-action-btn--new {
    background: var(--tiq-surface-2);
    border-color: var(--tiq-border);
    color: var(--tiq-text-3);
}

.tiq-tc-chat-action-btn--new:hover:not(:disabled) {
    background: var(--tiq-surface-3, #1e293b);
    color: var(--tiq-text-2);
}

.tiq-tc-chat-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── New Chat picker modal ───────────────────────────────── */
.tiq-tc-chat-picker {
    max-width: 400px;
    width: 90vw;
}

.tiq-tc-picker-section-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--tiq-text-4);
    margin: 10px 0 4px;
    padding-top: 10px;
    border-top: 1px solid var(--tiq-border);
}

.tiq-tc-picker-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}

.tiq-tc-picker-row:hover {
    background: rgba(0,178,122,0.05);
}

.tiq-tc-picker-row input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--tiq-green);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.tiq-tc-picker-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tiq-tc-picker-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--tiq-text);
}

.tiq-tc-picker-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}

.tiq-tc-picker-badge--brief {
    background: rgba(0,178,122,0.15);
    color: var(--tiq-green-dim);
}

.tiq-tc-picker-badge--convo {
    background: rgba(99,102,241,0.15);
    color: #818CF8;
}

.tiq-tc-picker-meta {
    font-size: 0.76rem;
    color: var(--tiq-text-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* ── Past conversations section ──────────────────────────── */
.tiq-tc-past-convos {
    margin-top: 4px;
    border-top: 1px solid var(--tiq-border);
    padding-top: 8px;
}

.tiq-tc-past-convos-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tiq-text-4);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 2px 0;
    width: 100%;
    text-align: left;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}

.tiq-tc-past-convos-toggle:hover { color: var(--tiq-text-3); }

.tiq-tc-past-convos-caret {
    margin-left: auto;
    font-size: 0.6rem;
    color: var(--tiq-text-4);
}

.tiq-tc-past-convo-row {
    padding: 7px 8px;
    border-radius: 6px;
    background: var(--tiq-surface-2);
    margin-top: 5px;
    transition: background 0.12s;
}

.tiq-tc-past-convo-row:hover {
    background: var(--tiq-surface-3, #1e293b);
}

.tiq-tc-past-convo-row--active {
    background: rgba(0,178,122,0.08);
    border: 1px solid rgba(0,178,122,0.2);
}

.tiq-tc-past-convo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}

.tiq-tc-past-convo-date {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--tiq-text-4);
}

.tiq-tc-past-convo-continue {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--tiq-green-dim);
    opacity: 0;
    transition: opacity 0.12s;
    white-space: nowrap;
}

.tiq-tc-past-convo-row:hover .tiq-tc-past-convo-continue {
    opacity: 1;
}

.tiq-tc-past-convo-active-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(0,178,122,0.15);
    color: var(--tiq-green-dim);
    white-space: nowrap;
}

.tiq-tc-past-convo-preview {
    font-size: 0.78rem;
    color: var(--tiq-text-3);
    font-style: italic;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Context banner ────────────────────────────────── */
.tiq-tc-context-banner {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    background: rgba(0,178,122,0.08);
    border: 1px solid rgba(0,178,122,0.2);
    border-radius: 6px;
    font-size: 0.76rem;
    color: var(--tiq-green-dim);
    font-weight: 500;
}

.tiq-tc-context-banner span {
    flex: 1;
}

.tiq-tc-context-banner-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--tiq-text-4);
    padding: 0 2px;
    line-height: 1;
    font-family: inherit;
    transition: color 0.12s;
}

.tiq-tc-context-banner-dismiss:hover {
    color: var(--tiq-text-2);
}

/* ── Upsell wall ────────────────────────────────── */
.tiq-tc-upsell-wall {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 20px 16px;
    background: var(--tiq-surface-2);
    border: 1px solid var(--tiq-border);
    border-radius: 10px;
    margin: 4px 0;
}

.tiq-tc-upsell-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.tiq-tc-upsell-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--tiq-text);
    letter-spacing: -0.01em;
}

.tiq-tc-upsell-body {
    font-size: 0.78rem;
    color: var(--tiq-text-4);
    line-height: 1.6;
    max-width: 260px;
}

.tiq-tc-upsell-btn {
    text-decoration: none;
    font-size: 0.82rem;
    padding: 0.5rem 1.1rem;
    margin-top: 4px;
}

/* ── Quota indicator ───────────────────────────── */
.tiq-tc-quota-indicator {
    font-size: 0.71rem;
    color: var(--tiq-text-4);
    padding: 4px 12px 0;
    text-align: right;
}

.tiq-tc-quota-upgrade {
    color: var(--tiq-green-dim);
    text-decoration: none;
    font-weight: 600;
}

.tiq-tc-quota-upgrade:hover {
    text-decoration: underline;
}

/* ── Subscribe-to-save upsell button ────────────── */
.tiq-tc-chat-action-btn--upsell {
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.3);
    color: #b45309;
}

.tiq-tc-chat-action-btn--upsell:hover:not(:disabled) {
    background: rgba(251,191,36,0.18);
    border-color: rgba(251,191,36,0.5);
}

/* ── Panel collapse toggle ───────────────────────────────── */
/*
   The toggle is a sibling of .tiq-tc-panel inside .tiq-tc-body (position:relative).
   On desktop: absolutely positioned on the left edge of the panel area.
   On mobile: position:fixed so it floats above the map at the viewport right edge,
   unaffected by any stacking context. z-index:101 puts it above the panel (100).
*/
.tiq-tc-panel-toggle {
    position: absolute;
    right: 360px; /* = panel width; sits flush against panel's left edge */
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 28px;
    height: 48px;
    background: var(--tiq-surface);
    border: 1px solid var(--tiq-border);
    border-right: none;
    border-radius: 6px 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tiq-text-4);
    transition: background 0.15s, color 0.15s, right 0.25s ease;
    padding: 0;
    font-family: inherit;
}

.tiq-tc-panel-toggle:hover {
    background: var(--tiq-surface-2);
    color: var(--tiq-text-2);
}

/* Collapsed: panel is gone, toggle moves to far right with open styling */
.tiq-tc-body--collapsed .tiq-tc-panel-toggle {
    right: 0;
    border-right: 1px solid rgba(0,178,122,0.3);
    border-radius: 6px 0 0 6px;
    background: var(--tiq-ink);
    color: var(--tiq-green-dim);
    border-color: rgba(0,178,122,0.3);
}

.tiq-tc-body--collapsed .tiq-tc-panel-toggle:hover {
    background: var(--tiq-surface);
}

/* Collapsed state: panel shrinks to zero */
.tiq-tc-body--collapsed .tiq-tc-panel {
    width: 0;
    min-width: 0;
    flex-shrink: 1;
    border-left: none;
}

.tiq-tc-body--collapsed .tiq-tc-panel-inner {
    width: 0;
}

/* Map expands to fill when panel is collapsed */
.tiq-tc-body--collapsed .tiq-tc-map-wrap {
    flex: 1;
}

/* Mobile: panel slides in from right as a fixed overlay */
@media (max-width: 768px) {
    .tiq-tc-panel {
        position: fixed;
        right: 0;
        top: 56px;
        bottom: 0;
        width: 320px;
        z-index: 100;
        transform: translateX(0);
        transition: transform 0.25s ease;
        overflow: hidden;
    }

    /* Collapsed: panel slides off-screen to the right */
    .tiq-tc-body--collapsed .tiq-tc-panel {
        width: 320px;
        transform: translateX(320px);
        border-left: 1px solid var(--tiq-border);
    }

    /* Panel inner always full-width on mobile */
    .tiq-tc-panel-inner,
    .tiq-tc-body--collapsed .tiq-tc-panel-inner {
        width: 100%;
    }

    /*
       On mobile the toggle is position:fixed, floating above both the map and the
       panel. Dark ink background ensures visibility regardless of what's behind it.
       z-index:101 puts it above the fixed panel (z-index:100).
    */
    .tiq-tc-panel-toggle {
        position: fixed;
        right: 0;
        top: 50vh;
        transform: translateY(-50%);
        z-index: 101;
        border-right: none;
        border-radius: 6px 0 0 6px;
        transition: background 0.15s, color 0.15s;
        /* Always dark on mobile — visible over both the map and the light panel */
        background: #0A1628;
        color: #00B27A;
        border-color: rgba(0,178,122,0.35);
        box-shadow: -2px 0 8px rgba(0,0,0,0.3);
    }

    .tiq-tc-panel-toggle:hover {
        background: #0F2040;
        color: #00D491;
    }

    /* Collapsed state — same dark styling, chevron flips via Razor */
    .tiq-tc-body--collapsed .tiq-tc-panel-toggle {
        background: #0A1628;
        color: #00B27A;
        border-color: rgba(0,178,122,0.35);
        box-shadow: -2px 0 8px rgba(0,0,0,0.3);
    }
}

/* ── Campaigns Tab ────────────────────────────────────────── */

.tiq-campaigns-section {
    border: 1px solid var(--tiq-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.tiq-campaigns-section-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--tiq-surface-2);
    border-bottom: 1px solid var(--tiq-border);
}

.tiq-campaigns-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #00B27A;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.tiq-campaigns-step-num--locked {
    background: var(--tiq-surface-2);
    border: 1px solid var(--tiq-border);
    color: var(--tiq-text-4);
}

.tiq-campaigns-step-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tiq-text-1);
    line-height: 1.3;
}

.tiq-campaigns-step-sub {
    font-size: 0.76rem;
    color: var(--tiq-text-4);
    margin-top: 2px;
}

.tiq-campaigns-body {
    padding: 14px;
}

.tiq-campaigns-desc {
    font-size: 0.82rem;
    color: var(--tiq-text-3);
    margin: 0 0 12px;
    line-height: 1.5;
}

.tiq-campaigns-audience-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tiq-campaigns-audience-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--tiq-surface-2);
    border: 1px solid var(--tiq-border);
    border-radius: 7px;
    padding: 8px 12px;
}

.tiq-campaigns-stat-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tiq-text-4);
}

.tiq-campaigns-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #00B27A;
}

.tiq-campaigns-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #00B27A;
    border: none;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.tiq-campaigns-download-btn:hover:not(:disabled) { background: #00996a; }
.tiq-campaigns-download-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tiq-campaigns-no-data-hint {
    font-size: 0.8rem;
    color: var(--tiq-text-4);
    margin: 8px 0 0;
    font-style: italic;
}

/* Campaign setup chat — reuses fi-agent-msg styles from app.css */
.tiq-campaigns-chat-thread {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tiq-campaigns-starters {
    margin-bottom: 10px;
}

.tiq-campaigns-starters-label {
    font-size: 0.72rem;
    color: var(--tiq-text-4);
    margin: 0 0 6px;
}

.tiq-campaigns-chips {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tiq-campaigns-chip {
    text-align: left;
    padding: 7px 10px;
    background: var(--tiq-surface-2);
    border: 1px solid var(--tiq-border);
    border-radius: 7px;
    font-size: 0.78rem;
    color: var(--tiq-text-3);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.tiq-campaigns-chip:hover { border-color: #00B27A; color: #00B27A; }

.tiq-campaigns-input-row {
    display: flex;
    gap: 6px;
}

.tiq-campaigns-input {
    flex: 1;
    min-width: 0;
}

.tiq-campaigns-send-btn {
    padding: 0 14px;
    background: #00B27A;
    border: none;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.tiq-campaigns-send-btn:hover:not(:disabled) { background: #00996a; }
.tiq-campaigns-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Campaign log form */
.tiq-campaigns-log-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.tiq-campaigns-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tiq-campaigns-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tiq-campaigns-form-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tiq-text-4);
}

.tiq-campaigns-save-btn {
    align-self: flex-start;
    padding: 7px 16px;
    background: #00B27A;
    border: none;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.tiq-campaigns-save-btn:hover:not(:disabled) { background: #00996a; }
.tiq-campaigns-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tiq-campaigns-saved-msg {
    font-size: 0.78rem;
    color: #00B27A;
    font-weight: 600;
}

/* Logged campaigns list */
.tiq-campaigns-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tiq-campaigns-list-empty {
    font-size: 0.8rem;
    color: var(--tiq-text-4);
    font-style: italic;
}

.tiq-campaigns-list-item {
    background: var(--tiq-surface-2);
    border: 1px solid var(--tiq-border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tiq-campaigns-list-item-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tiq-campaigns-list-item-date {
    font-size: 0.72rem;
    color: var(--tiq-text-4);
}

.tiq-campaigns-list-item-notes {
    font-size: 0.82rem;
    color: var(--tiq-text-2);
    word-break: break-word;
}

.tiq-campaigns-list-item-budget {
    font-size: 0.76rem;
    color: #00B27A;
    font-weight: 600;
}

.tiq-campaigns-list-item-delete {
    background: transparent;
    border: none;
    color: var(--tiq-text-4);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.tiq-campaigns-list-item-delete:hover { color: #ef4444; background: rgba(239,68,68,0.08); }

/* ── Multi-channel Campaign Cards ────────────────────────────────────── */

.tiq-camp-channel {
    border: 1px solid var(--tiq-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.tiq-camp-channel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: var(--tiq-surface-2);
}

.tiq-camp-channel-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tiq-text-1);
    flex: 1;
}

.tiq-camp-channel-count {
    font-size: 0.76rem;
    color: var(--tiq-text-4);
    font-weight: 400;
}

.tiq-camp-add-btn {
    padding: 4px 10px;
    background: rgba(0,178,122,0.1);
    border: 1px solid rgba(0,178,122,0.3);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #00B27A;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.tiq-camp-add-btn:hover { background: rgba(0,178,122,0.2); }

/* Campaign list */
.tiq-camp-list {
    display: flex;
    flex-direction: column;
}

.tiq-camp-item {
    padding: 10px 14px;
    border-top: 1px solid var(--tiq-border);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tiq-camp-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tiq-camp-item-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.tiq-camp-item-date {
    font-size: 0.72rem;
    color: var(--tiq-text-4);
}

.tiq-camp-result-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
}

.tiq-camp-result-badge--success {
    background: rgba(0,178,122,0.12);
    color: #00B27A;
}

.tiq-camp-result-badge--fail {
    background: rgba(239,68,68,0.08);
    color: #ef4444;
}

.tiq-camp-result-badge--unknown {
    background: var(--tiq-surface-2);
    color: var(--tiq-text-4);
    border: 1px solid var(--tiq-border);
}

.tiq-camp-item-notes {
    font-size: 0.82rem;
    color: var(--tiq-text-2);
    word-break: break-word;
}

.tiq-camp-item-targeting {
    font-size: 0.76rem;
    color: var(--tiq-text-4);
}

.tiq-camp-item-budget {
    font-size: 0.76rem;
    color: #00B27A;
    font-weight: 600;
}

.tiq-camp-item-delete {
    background: transparent;
    border: none;
    color: var(--tiq-text-4);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.tiq-camp-item-delete:hover { color: #ef4444; background: rgba(239,68,68,0.08); }

.tiq-camp-empty {
    padding: 11px 14px;
    font-size: 0.8rem;
    color: var(--tiq-text-4);
    font-style: italic;
    border-top: 1px solid var(--tiq-border);
    margin: 0;
}

/* Add form */
.tiq-camp-form {
    padding: 14px;
    border-top: 1px solid var(--tiq-border);
    background: var(--tiq-surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tiq-camp-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tiq-camp-form-label {
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--tiq-text-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tiq-camp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tiq-camp-form-textarea {
    resize: vertical;
    min-height: 52px;
    font-family: inherit;
}

.tiq-camp-form-textarea:not(:focus) {
    overflow: hidden;
}

/* Targeting type chips */
.tiq-camp-targeting-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tiq-camp-chip {
    padding: 4px 10px;
    background: var(--tiq-surface-2);
    border: 1px solid var(--tiq-border);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--tiq-text-3);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.tiq-camp-chip:hover { border-color: #00B27A; color: #00B27A; }

.tiq-camp-chip--active {
    background: rgba(0,178,122,0.1);
    border-color: #00B27A;
    color: #00B27A;
}

/* Result toggle */
.tiq-camp-result-toggle {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.tiq-camp-result-btn {
    padding: 5px 11px;
    background: var(--tiq-surface-2);
    border: 1px solid var(--tiq-border);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tiq-text-3);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.tiq-camp-result-btn:hover { border-color: var(--tiq-text-3); }

.tiq-camp-result-btn--active {
    border-color: var(--tiq-text-3);
    background: var(--tiq-surface-2);
    color: var(--tiq-text-1);
}

.tiq-camp-result-btn--success.tiq-camp-result-btn--active {
    background: rgba(0,178,122,0.1);
    border-color: #00B27A;
    color: #00B27A;
}

.tiq-camp-result-btn--fail.tiq-camp-result-btn--active {
    background: rgba(239,68,68,0.08);
    border-color: #ef4444;
    color: #ef4444;
}

/* Form actions */
.tiq-camp-form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tiq-camp-save-btn {
    padding: 7px 16px;
    background: #00B27A;
    border: none;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.tiq-camp-save-btn:hover:not(:disabled) { background: #00996a; }
.tiq-camp-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tiq-camp-cancel-btn {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--tiq-border);
    border-radius: 7px;
    font-size: 0.82rem;
    color: var(--tiq-text-3);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.tiq-camp-cancel-btn:hover { border-color: var(--tiq-text-3); color: var(--tiq-text-1); }

/* Meta Setup Guide collapsible */
.tiq-camp-setup-guide {
    border-top: 1px solid var(--tiq-border);
}

.tiq-camp-setup-toggle {
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tiq-text-4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.15s;
}

.tiq-camp-setup-toggle:hover { color: var(--tiq-text-1); }

.tiq-camp-setup-body {
    padding: 0 14px 14px;
}

/* ── Intelligence tab: action row & competitor management ──────────────── */

.tiq-tc-intel-actions {
    display: flex;
    gap: 8px;
    margin: 10px 0 4px;
    flex-wrap: wrap;
}

.tiq-tc-intel-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--tiq-surface-2);
    border: 1px solid var(--tiq-border);
    border-radius: 6px;
    color: var(--tiq-text-3);
    font-size: 0.76rem;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tiq-tc-intel-btn:hover:not(:disabled) { background: var(--tiq-surface-3); color: var(--tiq-text-1); }
.tiq-tc-intel-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tiq-tc-intel-reset {
    background: transparent;
    border: none;
    color: var(--tiq-text-4);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.tiq-tc-intel-reset:hover { color: #00B27A; }

/* Remove button per competitor row */
.tiq-comp-remove-btn {
    background: transparent;
    border: none;
    color: var(--tiq-text-4);
    font-size: 0.85rem;
    line-height: 1;
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.tiq-comp-remove-btn:hover { color: #ef4444; background: rgba(239,68,68,0.08); }

/* Manual add competitor */
.tiq-manual-add-wrap {
    margin-top: 12px;
}

.tiq-manual-add-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px dashed var(--tiq-border);
    border-radius: 6px;
    color: var(--tiq-text-4);
    font-size: 0.76rem;
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    width: 100%;
    justify-content: center;
}
.tiq-manual-add-toggle:hover { border-color: #00B27A; color: #00B27A; }

.tiq-manual-add-form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--tiq-surface-2);
    border: 1px solid var(--tiq-border);
    border-radius: 8px;
    padding: 12px;
}

/* ── Territory Brief eyebrow + refresh ─────────────────── */
.tiq-tc-brief-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tiq-text-4);
    margin-bottom: 6px;
}

.tiq-tc-brief-refresh-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--tiq-border);
    border-radius: 4px;
    color: var(--tiq-text-4);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 7px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.tiq-tc-brief-refresh-btn:hover {
    color: #00B27A;
    border-color: rgba(0,178,122,0.4);
    background: rgba(0,178,122,0.06);
}

/* ── Brief stale banner ─────────────────────────────────── */
.tiq-tc-brief-stale-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(245,158,11,0.07);
    border: 1px solid rgba(245,158,11,0.22);
    border-radius: 6px;
    font-size: 0.76rem;
    color: #92400e;
    margin-bottom: 8px;
}

.tiq-tc-brief-stale-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #00B27A;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0;
    font-family: inherit;
    transition: opacity 0.12s;
}
.tiq-tc-brief-stale-btn:hover { opacity: 0.75; }

/* ── Game Board — Command Modal (3-column Expand/Protect/Measure) ──────── */
.tiq-cmd-modal-body {
    display: flex;
    padding: 1rem 0.5rem;
    gap: 0;
}

.tiq-cmd-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 12px;
}

.tiq-cmd-col + .tiq-cmd-col {
    border-left: 1px solid #f3f4f6;
}

.tiq-cmd-col-header {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f3f4f6;
}

.tiq-cmd-col-header--expand  { color: #2563eb; }
.tiq-cmd-col-header--protect { color: #7c3aed; }
.tiq-cmd-col-header--measure { color: #0891b2; }

.tiq-cmd-btn {
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    font-family: inherit;
    line-height: 1.4;
}

.tiq-cmd-btn:hover                { background: #f9fafb; }
.tiq-cmd-btn--expand:hover  { border-color: #2563eb; }
.tiq-cmd-btn--protect:hover { border-color: #7c3aed; }
.tiq-cmd-btn--measure:hover { border-color: #0891b2; }

/* ── Game Board — Block Group Battlefield Status Hover Card ─────────────── */
.tiq-bg-hover-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    padding: 10px 12px;
    min-width: 220px;
    max-width: 264px;
    font-family: inherit;
    font-size: 13px;
    color: #374151;
}

.tiq-hover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.tiq-hover-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 4px;
    padding: 2px 7px;
    flex-shrink: 0;
    white-space: nowrap;
}
.tiq-hover-badge--green  { background: rgba(22,163,74,0.12);   color: #16a34a; }
.tiq-hover-badge--yellow { background: rgba(217,119,6,0.12);   color: #d97706; }
.tiq-hover-badge--red    { background: rgba(220,38,38,0.12);   color: #dc2626; }
.tiq-hover-badge--neutral{ background: rgba(107,114,128,0.10); color: #6b7280; }

.tiq-hover-geoid {
    font-size: 11px;
    color: #9ca3af;
    text-align: right;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tiq-hover-stats   { font-size: 12px; color: #374151; line-height: 1.5; }
.tiq-hover-muted   { color: #9ca3af; font-style: italic; }

.tiq-hover-divider {
    border-top: 1px solid #f3f4f6;
    margin: 7px 0;
}

.tiq-hover-section       { margin-bottom: 2px; }

.tiq-hover-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 4px;
}

.tiq-hover-defending { font-size: 12px; font-weight: 500; color: #7c3aed; }

.tiq-hover-campaign-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
    padding: 1px 0;
}

.tiq-hover-campaign-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tiq-hover-campaign-dot--meta        { background: #1877F2; }
.tiq-hover-campaign-dot--direct_mail { background: #6366F1; }
.tiq-hover-campaign-dot--sms         { background: #10B981; }
.tiq-hover-campaign-dot--email       { background: #F59E0B; }
.tiq-hover-campaign-dot--in_app      { background: #ef4444; }