.dashboard-layout { flex-direction: row; padding: 0; max-width: none; height: 100vh; overflow: hidden; }

.dashboard-sidebar {
    width: var(--sidebar-width); background: #222222;
    border-right: 1px solid var(--bs-border-color); display: flex;
    flex-direction: column; align-items: center; padding: 2rem 0;
    z-index: 10;
}

.sidebar-logo { margin-bottom: 1.25rem; opacity: 0.9; }
.sidebar-menu { flex: 1; display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; }

.menu-item {
    width: 48px; height: 48px; border-radius: 8px; border: none;
    background: transparent; color: var(--bs-secondary); display: flex;
    align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; text-decoration: none;
}

.menu-item:hover { background: var(--surface-hover); color: #fff; }
.menu-item.active { background: var(--bs-primary); color: #fff; }
.menu-item.logout-btn { margin-top: auto; color: var(--bs-danger); opacity: 0.7; }
.menu-item.logout-btn:hover { opacity: 1; background: rgba(239, 68, 68, 0.1); }

.dashboard-content { 
    flex: 1; padding: 1.5rem 2rem; overflow-y: auto; 
    background: var(--bs-body-bg);
}

.dashboard-content.full-bleed {
    padding: 0;
}

.dashboard-content-inner {
    height: 100%;
}

.content-header { 
    margin-bottom: 1.5rem; padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.content-header-desc {
    color: var(--bs-secondary);
    margin-top: 0.5rem;
    max-width: 700px;
    line-height: 1.6;
}

.dashboard-subtitle { 
    font-size: 0.65rem; color: var(--bs-primary); font-weight: 800; 
    text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.5rem;
    display: flex; align-items: center; gap: 8px;
}

.dashboard-subtitle::before {
    content: ""; width: 12px; height: 1px; background: currentColor; opacity: 0.5;
}

.dashboard-title { 
    font-size: 1.75rem; color: #fff; font-weight: 700; margin: 0; 
    letter-spacing: -0.01em;
}

.dashboard-overview {
    animation: screenFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Dashboard Cards --- */
.dash-card {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s;
}

.dash-card:hover {
    border-color: rgba(14, 165, 233, 0.3);
    background: var(--surface-hover);
}

.dash-card-title {
    margin: 0 0 0.5rem;
    color: var(--bs-body-color);
    font-size: 0.9rem;
    font-weight: 600;
}

/* --- Dashboard Modules --- */
.download-options { display: flex; gap: 1rem; margin-top: 0.5rem; }
.download-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 1.25rem 1rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 12px; color: #fff; text-decoration: none; font-weight: 600; transition: all 0.2s; }
.download-btn:hover { background: var(--surface-hover); border-color: rgba(14, 165, 233, 0.3); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.download-btn.recommended { border-color: var(--bs-primary); background: rgba(14, 165, 233, 0.08); }
.download-btn.recommended:hover { box-shadow: 0 12px 30px rgba(14, 165, 233, 0.15); }
.download-btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.download-btn.disabled:hover { transform: none; box-shadow: none; background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
.platform-badge { font-size: 0.75rem; color: var(--bs-primary); margin-top: 0.75rem; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: 1px; }

/* --- Remote Control Screen --- */
.remote-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
/*
 * Centres the button independently of the label beneath it. The label's text
 * changes length as the session progresses ("Tap to Speak" → "Listening…" →
 * "Didn't catch that — tap to speak"), and without this the widest string
 * stretched the wrapper and dragged the button off-centre with it.
 */
.mic-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.mic-btn { width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, 0.02); border: 2px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.4s; margin-bottom: 1.25rem; flex-shrink: 0; }
.mic-btn.active { background: rgba(239, 68, 68, 0.08); border-color: var(--bs-danger); box-shadow: 0 0 50px rgba(239, 68, 68, 0.2); animation: micPulse 2s infinite; }
@keyframes micPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.mic-icon { width: 64px; height: 64px; fill: var(--bs-secondary); transition: fill 0.3s; }
.mic-btn.active .mic-icon { fill: var(--bs-danger); }
/*
 * min-height reserves two lines. The longest state text wraps on a narrow
 * handset, and without the reservation the button jumped vertically each time the
 * label grew or shrank — the same shift as the horizontal one, on the other axis.
 */
.mic-state-text {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--bs-secondary);
    text-transform: uppercase;
    text-align: center;
    min-height: 2.6em;
    padding: 0 1rem;
    /* Bounded so a long message wraps rather than widening the flex container. */
    max-width: 20rem;
}
.mic-state-text.active { color: var(--bs-danger); }
.session-end-btn { width: 100%; margin-top: 2rem; background: rgba(239, 68, 68, 0.1); color: var(--bs-danger); border: 1px solid rgba(239, 68, 68, 0.1); }

.full-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.screen-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--bs-body-bg); flex-direction: column; }
.screen-overlay.active { display: flex; }

/* --- Admin Tables --- */
.admin-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.admin-table thead th {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-table tbody tr {
    border-bottom: 1px solid var(--bs-border-color);
    transition: background 0.2s;
}

.admin-table tbody tr:hover {
    background: var(--surface-hover);
}

.admin-table tbody td {
    padding: 1rem 0.75rem;
    vertical-align: middle;
}

.admin-table .key-mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--bs-primary);
}

/* --- Tools Documentation --- */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

.tool-card {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.2s;
    cursor: default;
}

.tool-card:hover {
    border-color: rgba(14, 165, 233, 0.3);
    background: var(--surface-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.tool-card-name {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-card-desc {
    font-size: 0.9rem;
    color: var(--bs-body-color);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.tool-card-params {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.param-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    font-weight: 600;
}

.param-tag.required {
    background: rgba(14, 165, 233, 0.12);
    color: var(--bs-primary);
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.param-tag.optional {
    background: rgba(156, 163, 175, 0.12);
    color: var(--bs-secondary);
    border: 1px solid rgba(156, 163, 175, 0.2);
}

/* Used by the security page for defaults and ranges ("Default: 50"), and for
   marking a guardrail as unconditional. Without this rule the tag rendered with
   the base class only - no background, no border - so it read as loose text
   rather than a tag. */
.param-tag.info {
    background: rgba(250, 204, 21, 0.1);
    color: #eab308;
    border: 1px solid rgba(250, 204, 21, 0.22);
}

.tool-category {
    margin-bottom: 1.5rem;
}

.tool-category-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tool-category-desc {
    color: var(--bs-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    max-width: 700px;
}

.tool-category-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.tool-category-icon.unity { background: rgba(14, 165, 233, 0.15); color: var(--bs-primary); }
.tool-category-icon.dev { background: rgba(6, 182, 212, 0.15); color: var(--bs-info); }
.tool-category-icon.safety { background: rgba(16, 185, 129, 0.15); color: var(--bs-success); }

/* --- Extracted & Refactored Dashboard Classes --- */

.btn-install-pwa {
    display: none;
    margin-top: 1rem;
    width: 100%;
}

.section-no-padding {
    padding: 0 0 2rem;
}

.tool-category-icon.muted-white {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tool-card-detailed {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tool-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top; /* Anchored to the top of the image */
    opacity: 0.9;
}

.tool-card-image-missing {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.2);
    font-size: 2rem;
    flex-direction: column;
    gap: 0.5rem;
}

.tool-card-image-missing span {
    font-size: 0.8rem;
}

.tool-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0;
}

.feature-grid-icon-mini {
    margin: 0;
    padding: 0.5rem;
    font-size: 1.1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.tool-card-title {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
}

.tool-card-description {
    margin: 0;
    font-size: 0.9rem;
    color: var(--bs-secondary);
    line-height: 1.5;
    flex-grow: 1;
}

.param-none-tag {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    font-style: italic;
}

.tool-card-video-wrapper,
.tool-card-image-wrapper {
    width: calc(100% + 2.5rem);
    max-width: calc(100% + 2.5rem);
    margin-top: -1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-bottom: 1rem;
    aspect-ratio: 16/9;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-card-video-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0;
}

.tutorial-duration-badge {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    color: var(--bs-secondary);
}

/* --- Hero Card Transition --- */
.hero-card-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    opacity: 0;
    z-index: 100000;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.hero-card-backdrop.active {
    opacity: 1;
    pointer-events: all;
}

.hero-card-expanding {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border-color: var(--bs-primary) !important;
    background: var(--bs-tertiary-bg) !important;
    cursor: pointer;
}

.hero-card-expanding .tool-card-video-wrapper,
.hero-card-expanding .tool-card-image-wrapper {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-card-active {
    cursor: default;
    border-radius: 12px;
}

.hero-card-active .tool-card-video-wrapper,
.hero-card-active .tool-card-image-wrapper {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    border-radius: 8px;
}

/* --- Licensing & Downloads Cards --- */
.dashboard-card {
    background: rgba(0,0,0,0.2);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
}

/* --- Licensing Page Layout --- */
.license-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.license-col {
    flex: 1 1 400px;
    min-width: 0;
}

.dashboard-card.license-width {
    max-width: 600px;
}

.dashboard-card.downloads-width {
    max-width: 800px;
}

.dashboard-card-title-main {
    margin-top: 0;
}

.dashboard-card-desc {
    color: var(--bs-secondary);
    margin-bottom: 1rem;
}

.dashboard-card-desc.mb-2 {
    margin-bottom: 1.25rem;
}

.license-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.03);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

.license-key-display {
    font-family: monospace;
    font-size: 1.25rem;
    letter-spacing: 2px;
    color: var(--bs-primary);
    font-weight: 600;
}

.btn-copy-license {
    background: rgba(255,255,255,0.1);
    padding: 0.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    color: white;
}

.license-details-grid {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1rem;
}

.license-details-grid > div {
    min-width: 0;
}

.license-detail-label {
    font-size: 0.85rem;
    color: var(--bs-secondary);
    text-transform: uppercase;
    font-weight: 700;
}

.license-detail-val {
    font-weight: 500;
    font-size: 1.1rem;
    margin-top: 0.25rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.license-detail-val.active {
    font-weight: 700;
    color: var(--bs-success);
}

.license-detail-val.revoked,
.license-detail-val.expired {
    font-weight: 700;
    color: var(--bs-danger);
}

.license-detail-val.plan {
    color: var(--bs-success);
    text-transform: capitalize;
}

.license-detail-val.expired-val {
    color: var(--bs-danger);
}

.license-detail-val.normal-val {
    color: var(--bs-secondary);
}

.download-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.download-btn-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

.platform-badge.mt-half {
    margin-top: 0.5rem;
}

/* --- Warning, Verification, and Device Status Banners --- */
.license-warning-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}

.license-warning-card {
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
}

.license-warning-title {
    margin-top: 0;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.license-warning-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.btn-license-verify {
    background: white;
    color: var(--bs-danger);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* --- Modern Device Status Grid & Dashboard Cards --- */
.device-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.device-companion-card,
.device-info-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    padding: 1.5rem;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.device-companion-card:hover,
.device-info-card:hover {
    border-color: rgba(14, 165, 233, 0.25);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.dash-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dash-card-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dash-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(14, 165, 233, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-card-icon.alt {
    background: rgba(6, 182, 212, 0.1);
}

.dash-card-title {
    margin: 0;
    color: var(--bs-body-color);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.dash-card-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--bs-secondary);
}

.device-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--bs-border-color);
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.device-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-secondary);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.device-status-dot.online {
    background: var(--bs-success);
    box-shadow: 0 0 10px var(--bs-success);
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.device-status-text {
    color: var(--bs-secondary);
    transition: color 0.3s ease;
}

.dash-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.device-status-description {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

.device-status-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: auto;
}

.device-connect-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.device-connect-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3);
}

.btn-scan-qr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 8px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.btn-scan-qr:hover {
    background: rgba(14, 165, 233, 0.15);
    border-color: var(--bs-primary);
    transform: translateY(-1px);
}

.dash-card-footer {
    display: flex;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-secondary);
    font-size: 0.775rem;
}

.device-status-footer {
    margin: 0;
    color: var(--bs-secondary);
}

.capability-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.capability-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.85rem;
    color: var(--bs-body-color);
}

.quick-nav-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

.qr-scanner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: #000;
    display: none;
    flex-direction: column;
}

.qr-scanner-overlay.active {
    display: flex;
}

.qr-scanner-header {
    display: flex;
    justify-content: flex-end;
    padding: calc(env(safe-area-inset-top, 0px) + 0.75rem) 1rem 0.5rem;
}

.qr-scanner-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-scanner-video {
    flex: 1 1 auto;
    width: 100%;
    object-fit: cover;
}

.qr-scanner-hint {
    padding: 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem) calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
    color: #fff;
    text-align: center;
    font-size: 0.875rem;
}

/* --- Responsive Dashboard Styles --- */

/* Hide the IDE download card on mobile and tablet — the IDE is desktop-only. */
@media (max-width: 1024px) {
    .download-ide-card {
        display: none;
    }
}

@media (max-width: 768px) {
    .layout-container {
        flex-direction: column;
        height: calc(100vh - 58px);
        overflow: hidden;
    }

    .dashboard-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        /* Lift the bar above the home-indicator safe area on gesture-nav
           handsets so the tap targets stay reachable and content padding can
           match the bar's actual on-screen footprint. */
        padding: 6px 0.5rem calc(6px + env(safe-area-inset-bottom, 0px)) 0.5rem;
        border-top: 1px solid var(--bs-border-color);
        border-right: none;
        background: #1c1c1c;
        z-index: 1000;
        box-sizing: border-box;
    }

    .sidebar-logo {
        display: none;
    }

    .sidebar-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        margin: 0;
        gap: 0.35rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 0.25rem;
    }

    .sidebar-menu::-webkit-scrollbar {
        display: none;
    }

    .menu-item {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .menu-item.logout-btn {
        margin-top: 0;
    }

    .dashboard-content {
        /* Space at bottom so the fixed bottom navbar and the phone's home-indicator
           safe area don't obscure content. 5rem clears the 60px bar; the safe-area
           inset is added on top for handsets with a gesture home indicator. */
        padding: 1.5rem 1rem calc(5rem + env(safe-area-inset-bottom, 0px));
    }

    /* full-bleed pages drop all padding, so they need the bottom-bar clearance
       reapplied at matching specificity or the fixed sidebar covers their content. */
    .dashboard-content.full-bleed {
        padding: 0 0 calc(60px + env(safe-area-inset-bottom, 0px));
    }

    .content-header {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
    }

    .dashboard-title {
        font-size: 1.5rem;
    }

    .dashboard-card {
        padding: 1.25rem;
    }

    .license-wrapper {
        padding: 0.75rem 1rem;
    }

    .license-key-display {
        font-size: 1rem;
        letter-spacing: 1px;
        word-break: break-all;
    }

    .license-details-grid {
        gap: 1rem;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }

    .license-detail-val {
        font-size: 0.95rem;
    }

    .tools-grid {
        grid-template-columns: 1fr;
    }

    .tool-card-detailed {
        padding: 1.25rem;
    }

    .tool-card-video-wrapper,
    .tool-card-image-wrapper {
        width: calc(100% + 2.5rem);
        max-width: calc(100% + 2.5rem);
        margin-top: -1.25rem;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        margin-bottom: 1rem;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .dash-card form {
        flex-direction: column;
        align-items: stretch !important;
    }

    .dash-card form button {
        width: 100%;
    }
}
/* Admin-only notice on the download card when the published builds disagree.
   Platforms are released separately, so one can quietly fall behind after a
   release where only the other was rebuilt. Styled like .warning-banner but
   block-level, since it sits above the download grid rather than inline. */
.release-mismatch-banner {
    display: block;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    background: rgba(251, 191, 36, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    line-height: 1.5;
}

.release-mismatch-banner strong {
    color: #fbbf24;
}

/* --- Agent Tool Activity (mobile remote) --- */

/*
 * Anchored to the top so it never competes with the mic button, which occupies
 * the centre and is the one control the user aims at. Below the approval sheet's
 * z-index (1100): a held tool call needs an answer, and activity notes must not
 * cover the buttons that give it.
 */
.tool-activity {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    left: 0.75rem;
    right: 0.75rem;
    z-index: 1050;
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    /* Reports state; must never intercept a tap meant for the screen beneath. */
    pointer-events: none;
}

.tool-activity.visible {
    opacity: 1;
    transform: translateY(0);
}

.tool-activity-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bs-primary);
    margin-bottom: 0.4rem;
}

.tool-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/*
 * Monospace and wrapping: these lines are file paths and shell commands, where a
 * truncated middle hides the part that matters.
 */
.tool-activity-row {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    line-height: 1.4;
    color: #ddd;
    overflow-wrap: anywhere;
}

/* --- Tool Approval Sheet (mobile remote) --- */

/*
 * Sits above the remote overlay (z-index 1000): the whole point is that it
 * interrupts, since a held tool call blocks the agent until it is answered.
 */
.approval-sheet {
    display: none;
    width: 100%;
    max-width: 480px;
    pointer-events: auto;
}

.approval-sheet.active {
    display: block;
    animation: slideUpFade 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.approval-card {
    width: 100%;
    max-width: 480px;
    background: #222222;
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 1.5rem;
    /* Clears the home indicator on gesture-nav phones. */
    margin-bottom: env(safe-area-inset-bottom, 0);
}

.approval-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.approval-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fbbf24;
}

/* "2 of 5" — the only cue that more calls are waiting behind this card. */
.approval-position {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-secondary);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

/*
 * Visually quieter than approve/deny, and separated from them, so browsing the
 * batch is never mistaken for answering it.
 */
.approval-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.approval-nav-btn {
    flex: 1;
    min-height: 40px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--bs-secondary);
    border: 1px solid var(--bs-border-color);
}

.approval-nav-btn:disabled {
    opacity: 0.35;
}

.approval-tool {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

/*
 * Commands and paths are long and have no spaces, so they must be allowed to break
 * anywhere; otherwise the card widens past the viewport and the buttons leave the
 * screen. Capped in height so a huge argument cannot push them off the bottom.
 */
.approval-summary {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--bs-secondary);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    max-height: 30vh;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.approval-timer {
    font-size: 0.8125rem;
    color: var(--bs-secondary);
    margin-bottom: 1rem;
}

.approval-actions {
    display: flex;
    gap: 0.75rem;
}

/*
 * Both at least 48px tall: this is a destructive-action prompt answered one-handed,
 * and a mis-tap is exactly the failure mode to design out.
 */
.approval-actions .btn {
    flex: 1;
    min-height: 48px;
    font-weight: 700;
    border-radius: 10px;
}

.approval-deny {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.approval-approve {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

/* --- Permission Level (mobile remote) --- */

/*
 * Compact, above the mic area, visible before the user speaks — the level decides
 * whether a tool runs on its own or stops to ask. Below the approval sheet's
 * z-index (1100): a held tool call still interrupts and must stay on top.
 */
.permission-level-row {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    left: 0.75rem;
    right: 0.75rem;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.permission-level-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bs-secondary);
}

/*
 * Shows the level in force. Autonomous reads as a warning: destructive actions
 * then run without asking, which the user should see before they speak.
 */
.permission-level-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: capitalize;
    color: var(--bs-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

.permission-level-badge.autonomous {
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.45);
}

/* Segmented control — three tappable options for the live session only. */
.permission-level-options {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.permission-level-option {
    min-height: 32px;
    padding: 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--bs-secondary);
    border: 1px solid var(--bs-border-color);
}

.permission-level-option:hover {
    background: var(--surface-hover);
    color: #fff;
}

.permission-level-option.active {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* Autonomous option stays warning-coloured even when active. */
.permission-level-option[data-level='autonomous'].active {
    background: rgba(239, 68, 68, 0.85);
    border-color: rgba(239, 68, 68, 0.85);
    color: #fff;
}

/* --- Micro Plan Sheet (mobile remote) --- */

/*
 * Modelled on the approval sheet but one rung below it (z-index 1090 < 1100): a
 * held tool call interrupts and must stay on top. Like the approval card it
 * blocks the turn until answered, since the model is waiting for the tap.
 */
.micro-plan-sheet {
    display: none;
    width: 100%;
    max-width: 480px;
    pointer-events: auto;
}

.micro-plan-sheet.active {
    display: block;
    animation: slideUpFade 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.micro-plan-card {
    width: 100%;
    max-width: 480px;
    background: #222222;
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 1.5rem;
    /* Clears the home indicator on gesture-nav phones. */
    margin-bottom: env(safe-area-inset-bottom, 0);
}

.micro-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.micro-plan-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fbbf24;
}

/*
 * Task titles only — full prompts are too long to read on a handset. Monospace
 * and wrapping like the approval summary, capped in height so a long plan cannot
 * push the buttons off the bottom.
 */
.micro-plan-tasks {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--bs-secondary);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    padding: 0.75rem 0.75rem 0.75rem 1.75rem;
    margin-bottom: 0.75rem;
    max-height: 35vh;
    overflow-y: auto;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.micro-plan-timer {
    font-size: 0.8125rem;
    color: var(--bs-secondary);
    margin-bottom: 1rem;
}

.micro-plan-actions {
    display: flex;
    gap: 0.75rem;
}

/*
 * Both at least 48px tall, like the approval buttons: this is answered
 * one-handed and a mis-tap is the failure mode to design out.
 */
.micro-plan-actions .btn {
    flex: 1;
    min-height: 48px;
    font-weight: 700;
    border-radius: 10px;
}

.micro-plan-reject {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.micro-plan-reject:disabled {
    opacity: 0.45;
}

.micro-plan-approve {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.micro-plan-approve:disabled {
    opacity: 0.45;
}

@media (max-width: 768px) {
    .permission-level-options {
        margin-left: 0;
        width: 100%;
    }

    .permission-level-option {
        flex: 1;
    }
}

/* --- Global Overlay Stack --- */
.global-overlay-stack {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
    z-index: 1050;
    align-items: center;
    pointer-events: none;
    width: 90%;
    max-width: 480px;
}

@media (max-width: 768px) {
    .global-overlay-stack {
        bottom: 80px; /* clear bottom navbar */
    }
}

/* --- Pipeline Status Floating Pill --- */
.pipeline-pill {
    display: none;
    align-items: center;
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 8px 12px 8px 16px;
    font-size: 0.85rem;
    color: var(--bs-body-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.pipeline-pill.active {
    display: flex;
    animation: slideUpFade 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes slideUpFade {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.pipeline-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(14, 165, 233, 0.2);
    border-top: 2px solid var(--bs-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pipeline-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    margin-right: 12px;
}

.pipeline-stop-btn {
    border-radius: 50px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: auto;
    border: none;
    background: rgba(239, 68, 68, 0.15);
    color: var(--bs-danger);
    transition: all 0.2s ease;
}

.pipeline-stop-btn:hover {
    background: var(--bs-danger);
    color: #fff;
}