/* CARE Dashboard Kit — Modules
 *
 * App Shell, Filter-Bar, Master-Detail, Chat-Workspace, Tabbed Card Header.
 * Light rules only. Dark overrides stay in base.html / page templates.
 * Class names match existing markup (no rename).
 */

/* --- App Shell --- */
body {
    margin: 0;
    padding: 0;
    font-family: var(--oc-font-sans);
    background-color: var(--content-bg);
    color: var(--text-primary);
}

.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Navigation */
.sidebar {
    width: var(--layout-sidebar-width);
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    border-right: 1px solid var(--sidebar-border);
    transition: transform 0.2s ease;
}

.sidebar-header {
    height: var(--layout-topbar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-brand {
    font-size: var(--type-size-16);
    font-weight: var(--type-card-title-weight);
    letter-spacing: var(--type-card-title-letter-spacing);
    color: var(--sidebar-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.sidebar-brand:hover {
    color: var(--sidebar-text);
    text-decoration: none;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
}

.sidebar-conversations {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.75rem 0 0;
}

.sidebar-conversations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.75rem 0.75rem;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-conversations-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sidebar-text);
}

.sidebar-conversations-actions {
    display: flex;
    gap: 0.35rem;
}

.sidebar-conversations-actions .btn {
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    line-height: 1.2;
}

.sidebar .conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.65rem 0.75rem 1rem;
}

.sidebar .conversation-list-item {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--sidebar-border);
    background: var(--is4it-white);
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    text-align: left;
    margin-bottom: 0.45rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    color: var(--sidebar-text);
    height: 5.25rem;
    min-height: 5.25rem;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar .conversation-list-item:hover {
    border-color: var(--is4it-black);
    background: var(--sidebar-hover-bg);
}

.sidebar .conversation-list-item.active {
    border-color: var(--is4it-black);
    background: var(--is4it-lime);
}

.sidebar .conversation-list-meta {
    font-size: 0.68rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .conversation-list-preview {
    font-size: 0.8rem;
    color: var(--text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar .conversation-list-loading,
.sidebar .conversation-list-empty,
.sidebar .conversation-list-error {
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.sidebar .conversation-list-error {
    color: var(--status-critical-foreground);
}

.nav-section {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-section-title {
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    margin-top: var(--space-1);
    font-size: var(--type-label-tag-sm-size);
    font-weight: var(--type-label-tag-weight);
    line-height: var(--type-label-tag-line-height);
    text-transform: uppercase;
    letter-spacing: var(--type-label-tag-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
    color: var(--sidebar-muted);
}

.nav-section-icon {
    width: 1.125rem;
    height: 1.125rem;
    object-fit: contain;
    opacity: 0.6;
}

.nav-item {
    margin: 0;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 44px;
    padding: 0 10px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: var(--type-label-button-size);
    font-weight: var(--type-label-button-weight);
    letter-spacing: var(--type-body-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sidebar .nav-link:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-text);
}

.sidebar .nav-link.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    border-left-color: var(--sidebar-active-border);
}

.sidebar .nav-link i {
    width: 22px;
    text-align: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* ===== Sidebar drilldown (Figma: Role Menu Drilldown) ===== */
.nav-view {
    display: none;
    flex-direction: column;
    gap: 4px;
}

.nav-view.active {
    display: flex;
}

.sidebar .nav-drill-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    height: 40px;
    padding: 0 10px;
    width: 100%;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    color: var(--sidebar-text);
    font-family: inherit;
    font-size: var(--type-label-button-size);
    font-weight: var(--type-label-button-weight);
    letter-spacing: var(--type-body-letter-spacing);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sidebar .nav-drill-trigger:hover {
    background-color: var(--sidebar-hover-bg);
}

.sidebar .nav-drill-trigger .ca-icon-chevron-right {
    font-size: 0.85rem;
    color: var(--sidebar-muted);
    flex-shrink: 0;
}

.sidebar .nav-drill-back {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 44px;
    padding: 0 10px;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--sidebar-border);
    background: none;
    color: var(--sidebar-text);
    font-family: inherit;
    font-size: var(--type-label-button-size);
    font-weight: var(--type-label-button-weight);
    letter-spacing: var(--type-body-letter-spacing);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sidebar .nav-drill-back:hover {
    background-color: var(--sidebar-hover-bg);
}

.sidebar .nav-drill-back .ca-icon-arrow-left {
    font-size: 1.05rem;
    flex-shrink: 0;
}

.nav-drill-title {
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    margin-top: var(--space-1);
    font-size: var(--type-label-tag-sm-size);
    font-weight: var(--type-label-tag-weight);
    text-transform: uppercase;
    letter-spacing: var(--type-label-tag-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
    color: var(--sidebar-muted);
}

/* Main Content Area */
.main-wrapper {
    flex: 1;
    min-width: 0;
    margin-left: var(--layout-sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--content-bg);
    transition: margin-left 0.2s ease;
}

.main-wrapper.no-sidebar {
    margin-left: 0;
}

/* Desktop sidebar collapse (toggled from the topbar) */
body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}

body.sidebar-collapsed .main-wrapper:not(.no-sidebar) {
    margin-left: 0;
}

/* Top Bar */
.topbar {
    height: var(--layout-topbar-height);
    background-color: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

/* Sidebar toggle (menu icon) in the topbar */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background-color: var(--chrome-hover);
}

/* Breadcrumb bar */
.breadcrumb-bar {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 1rem;
    min-width: 0;
    font-size: var(--type-caption-size);
    font-weight: var(--type-caption-strong-weight);
    letter-spacing: var(--type-caption-letter-spacing);
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-bar .breadcrumb-sep {
    color: var(--text-secondary);
    margin: 0 0.4rem;
}

.tenant-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--light-gray);
    color: var(--text-primary);
    padding: 0.375rem 0.625rem;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Shared style for tenant selector and view-as dropdowns */
.topbar-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 40px;
    padding: 0 0.625rem;
    border: 1px solid var(--light-gray);
    border-radius: var(--oc-user-chip-radius);
    background: var(--surface-topbar);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.topbar-dropdown-btn:hover {
    background-color: var(--off-white);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.topbar-dropdown-btn .ca-icon-chevron-down {
    font-size: 0.7rem;
    opacity: 0.7;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* Account / tenant chip (lila) */
.user-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    height: 40px;
    padding: 0 0.625rem 0 0.5rem;
    border: none;
    border-radius: var(--oc-user-chip-radius);
    background: var(--oc-user-toggle-bg);
    color: var(--is4it-black);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.user-menu-btn:hover {
    background: var(--oc-user-toggle-bg);
    color: var(--is4it-black);
    filter: brightness(0.97);
}

.user-menu-btn .ca-icon-chevron-down {
    font-size: 0.7rem;
    opacity: 0.8;
}

.logout-btn {
    background-color: transparent;
    border: 1px solid var(--light-gray);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: var(--oc-user-chip-radius);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    background-color: var(--off-white);
    border-color: var(--border-default);
}

/* Content Area */
.main-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    min-width: 0;
    overflow-x: hidden;
    background-color: var(--content-bg);
}

/* App Footer */
.app-footer {
    min-height: var(--layout-footer-min-height);
    background-color: var(--footer-bg);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    padding: 0 0.875rem;
    font-size: 12px;
    flex-shrink: 0;
}

/* Readable-width container for text-heavy / form pages */
.content-readable {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Full-width container for data-heavy / dashboard pages */
.content-fluid {
    width: 100%;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-wrapper {
        margin-left: 0;
    }

    .topbar {
        padding: 0 0.25rem;
        gap: 0.25rem;
    }

    .topbar-left {
        gap: 0.25rem;
        min-width: 0;
        overflow: hidden;
    }

    .topbar-right {
        gap: 0.25rem;
        flex-shrink: 0;
    }

    .topbar-dropdown-btn span,
    .user-menu-btn span {
        display: none;
    }

    .breadcrumb-bar {
        padding: 0 0.5rem;
    }

    .viewing-tenant-banner,
    .viewing-as-banner {
        display: none;
    }

    .main-content {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .main-content {
        padding: 0.75rem;
    }
}

/* Overlay for mobile.
   Scrim rgba(0,0,0,0.5) is a deliberate hardcode — tokens.css has no overlay/scrim,
   and Figma defines no scrim primitive. Do not invent one. */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.sidebar-overlay.show {
    display: block;
}

/* MSP Tenant Switcher Styles */
.viewing-tenant-banner .badge {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(255, 193, 7, 0);
    }
}



.user-tenant-switch-link {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: inherit;
}

.user-tenant-switch-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* View-As-Role Badge */
.viewing-as-banner .badge {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    animation: pulse-info 2s infinite;
}

@keyframes pulse-info {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(13, 202, 240, 0); }
}

/* Test-env banner: deliberately whitelisted hardcodes (Phase 3).
   Not Kit tokens — keep yellow warning chrome until Figma defines env tokens. */
.topbar.test-environment {
    background-color: #fff3cd;
    color: #664d03;
    border-bottom-color: #ffecb5;
}

.topbar-env-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #664d03;
    white-space: nowrap;
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
}

.topbar .theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.topbar .theme-toggle-btn:hover {
    background-color: var(--chrome-hover);
}

/* Session-Expired-Banner (sitzt im Shell-Layout über .main-content) */
.global-auth-banner {
    display: none;
    margin: 1rem 1.5rem 0;
    border-left: 5px solid var(--status-critical-foreground);
    box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--status-critical-foreground) 12%, transparent);
}

.global-auth-banner.show {
    display: block;
}

.global-auth-banner-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.75;
}

/* MSP-Kontext-Chrome */
.msp-delegated-context {
    border-left: 4px solid var(--status-info-foreground);
}

.msp-customer-badge {
    color: var(--text-secondary) !important;
    white-space: normal;
    text-align: left;
}


/* --- Filter-Bar + Master-Detail (Cases) --- */
/* ===== S-03 Case-Übersicht (Figma: CARE — Dashboard Kit, Screen / S-08 / Content) =====
   Scroll-Modell: Viewport Workspace. Filterleiste bleibt stehen, Queue und
   Detailpanel scrollen jeweils intern. */
body:has(.cases-page) .main-wrapper {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}
body:has(.cases-page) .main-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.cases-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-4);
}

/* --- Filterleiste (eine Zeile: Primary + Secondary) --- */
.cases-filter-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    flex-shrink: 0;
    background-color: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 10px 14px;
}
.cases-filter-primary {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.cases-filter-fields {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.cases-filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--metrics-gap-field-label-control);
    min-width: 180px;
}
.cases-filter-label {
    margin: 0;
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    letter-spacing: var(--type-label-letter-spacing);
    line-height: var(--type-label-line-height);
    text-transform: uppercase;
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
    color: var(--text-secondary);
}
.cases-filter-bar .form-select,
.cases-filter-bar .form-control {
    height: 36px;
    padding: 0 10px;
    font-size: var(--type-body-sm-size);
    border-radius: var(--radius-md);
    border-color: var(--border-default);
    background-color: var(--surface-default);
    color: var(--text-primary);
}
/* Der delegierte Kundenfilter rendert ein Label mit verschachteltem Select. */
.cases-filter-field > .form-label {
    display: flex;
    flex-direction: column;
    gap: var(--metrics-gap-field-label-control);
    margin: 0;
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    letter-spacing: var(--type-label-letter-spacing);
    line-height: var(--type-label-line-height);
    text-transform: uppercase;
    color: var(--text-secondary);
}
.cases-filter-field > .form-label .form-select {
    font-size: var(--type-body-sm-size);
    font-weight: var(--type-body-sm-weight);
    letter-spacing: var(--type-body-sm-letter-spacing);
    text-transform: none;
    color: var(--text-primary);
}
.cases-filter-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.cases-filter-secondary {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
    flex: 0 1 auto;
}

/* --- Master-Detail --- */
.cases-layout {
    display: flex;
    gap: var(--space-4);
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}
.cases-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background-color: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}
.cases-queue-panel {
    flex: 1 1 58%;
}
.case-detail-panel {
    flex: 1 1 42%;
}

@media (max-width: 992px) {
    body:has(.cases-page) .main-wrapper {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    body:has(.cases-page) .main-content {
        overflow-y: auto;
    }
    .cases-page {
        flex: none;
        min-height: 0;
    }
    .cases-layout {
        flex-wrap: wrap;
        flex: none;
        min-height: 0;
    }
    .cases-queue-panel,
    .case-detail-panel {
        flex: 1 1 100%;
        max-height: min(70vh, 36rem);
    }
}

/* Narrow filter control (page-size); value preserved from former inline style. */
.cases-filter-field--compact {
    min-width: 120px;
}

/* --- Case Queue --- */
.queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 70px;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--border-default);
    flex-shrink: 0;
}
.queue-title {
    margin: 0;
    font-size: var(--type-card-title-size);
    font-weight: var(--type-card-title-weight);
    line-height: var(--type-card-title-line-height);
    color: var(--text-primary);
}
.queue-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
#casesTable {
    width: 100%;
    /* Unterhalb dieser Breite lieber horizontal scrollen als Statuslabels dauerhaft kürzen. */
    min-width: 940px;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0;
    color: var(--text-primary);
}
/* Column head ≈ Label/Tag Small (11 / Demi / 5% / UPPER). */
#casesTable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 12px;
    background-color: var(--surface-default);
    border-bottom: 1px solid var(--border-default);
    font-size: var(--type-label-tag-sm-size);
    font-weight: var(--type-label-tag-weight);
    letter-spacing: var(--type-label-tag-letter-spacing);
    line-height: var(--type-label-tag-line-height);
    text-transform: uppercase;
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#casesTable tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-default);
    vertical-align: middle;
    font-size: var(--type-body-sm-size);
    overflow: hidden;
}
#casesTable th.col-updated,
#casesTable td.col-updated {
    text-align: right;
}
/* Q5: column widths are intentional IA — move only, do not retune. */
#casesTable th.col-subject,
#casesTable td.col-subject { width: 26%; }
#casesTable th.col-user,
#casesTable td.col-user { width: 14%; }
#casesTable th.col-customer,
#casesTable td.col-customer { width: 12%; }
#casesTable th.col-status,
#casesTable td.col-status { width: 18%; }
#casesTable th.col-relevance,
#casesTable td.col-relevance { width: 18%; }
#casesTable th.col-conversations,
#casesTable td.col-conversations { width: 6%; }
#casesTable th.col-updated,
#casesTable td.col-updated { width: 18%; }
#casesTable td.col-user {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#casesTable td .status-chip {
    max-width: 100%;
    padding: 3px 8px;
    font-size: 11px;
}
.case-result-row {
    cursor: pointer;
}
.case-result-row.has-unread-reply > td {
    background-color: var(--status-attention-background);
}
.case-result-row:hover > td {
    background-color: var(--chrome-hover);
}
.case-result-row.has-unread-reply:hover:not(.is-selected) > td {
    background-color: color-mix(in srgb, var(--chrome-hover) 45%, var(--status-attention-background));
}
.case-result-row.is-selected > td {
    background-color: var(--surface-muted);
    background-color: color-mix(in srgb, var(--brand-highlight) 16%, var(--surface-card));
}
.case-result-row.is-selected > td:first-child {
    box-shadow: inset 6px 0 0 var(--brand-highlight);
}
.case-row-title,
.case-row-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.case-row-title {
    font-weight: var(--type-body-strong-weight);
    line-height: 18px;
    letter-spacing: var(--type-body-letter-spacing);
    color: var(--text-primary);
}
.case-row-subtitle {
    font-size: var(--type-caption-size);
    font-weight: var(--type-caption-weight);
    line-height: var(--type-caption-line-height);
    letter-spacing: var(--type-caption-letter-spacing);
    color: var(--text-secondary);
}
.case-row-updated {
    font-size: var(--type-caption-size);
    color: var(--text-secondary);
}
.queue-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 52px;
    padding: 6px var(--space-4);
    border-top: 1px solid var(--border-default);
    flex-shrink: 0;
}
.queue-footer-info {
    font-size: var(--type-caption-size);
    font-weight: var(--type-caption-strong-weight);
    letter-spacing: var(--type-caption-letter-spacing);
    color: var(--text-secondary);
}
.queue-pagination {
    display: flex;
    gap: var(--space-2);
}

/* --- Selected Case (detail preview) --- */
.case-detail-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.case-context-strip {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 12px var(--space-4);
    background-color: var(--surface-muted);
    border-bottom: 1px solid var(--border-default);
}
.case-context-fields {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    min-width: 0;
}
.case-context-field {
    display: flex;
    flex-direction: column;
    gap: var(--metrics-gap-label-value);
    min-width: 0;
}
/* Context label ≈ Label/Badge (Demi 12, leading 1.4); not full Label/UPPER tracking. */
.case-context-label {
    font-size: var(--type-label-badge-size);
    font-weight: var(--type-label-badge-weight);
    line-height: var(--type-label-badge-line-height);
    letter-spacing: var(--type-label-badge-letter-spacing);
    text-transform: uppercase;
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
    color: var(--text-secondary);
}
.case-context-value {
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-line-height);
    letter-spacing: var(--type-body-letter-spacing);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}
.case-context-value.is-customer {
    font-size: var(--type-card-title-size);
    font-weight: var(--type-card-title-weight);
}
.case-itsm-link,
.case-inline-link {
    color: var(--action-primary-foreground);
    text-decoration: underline;
}
.case-inline-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}
.case-detail-section {
    padding: 12px var(--space-4);
    border-bottom: 1px solid var(--border-default);
}
/* Figma "Case Header / Title Block" sets leading 1.4, not the section-title 1.3. */
.case-detail-title {
    margin: 0;
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: 1.4;
    color: var(--text-primary);
}
.case-detail-user {
    margin: 0;
    font-size: var(--type-card-title-size);
    font-weight: var(--type-card-title-weight);
    line-height: var(--type-card-title-line-height);
    color: var(--text-primary);
}
.case-detail-timestamps {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--metrics-gap-title-meta);
    font-size: var(--type-body-sm-size);
    letter-spacing: var(--type-body-sm-letter-spacing);
    color: var(--text-secondary);
}
.case-section-title {
    margin: 0 0 var(--metrics-gap-title-body);
    font-size: var(--type-card-title-size);
    font-weight: var(--type-card-title-weight);
    line-height: var(--type-card-title-line-height);
    color: var(--text-primary);
}
.case-summary-label {
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    letter-spacing: var(--type-label-letter-spacing);
    line-height: var(--type-label-line-height);
    text-transform: uppercase;
    color: var(--text-secondary);
}
.case-summary-value {
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
    color: var(--text-primary);
    white-space: pre-wrap;
}
.case-decision-context,
.hc-decision-context {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--surface-muted);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm);
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line-height);
    color: var(--text-secondary);
    white-space: pre-wrap;
}
.case-findings-list,
.hc-findings-list,
.case-open-points-list,
.hc-open-points-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.case-open-points-list,
.hc-open-points-list {
    list-style: disc;
    padding-left: var(--space-4);
}
.case-finding,
.hc-finding {
    display: flex;
    flex-direction: column;
    gap: var(--metrics-gap-label-value);
}
.case-finding-attempt,
.hc-finding-attempt {
    color: var(--text-primary);
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line-height);
}
.case-finding-outcome,
.hc-finding-outcome {
    color: var(--text-secondary);
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line-height);
}
.case-placeholder {
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line-height);
    color: var(--text-secondary);
}
.case-evidence-chip {
    padding: 8px 10px;
    margin-bottom: 6px;
    background-color: var(--surface-muted);
    border-radius: var(--radius-md);
    font-size: var(--type-body-sm-size);
    color: var(--text-primary);
}
.case-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: 6px var(--space-4);
    border-top: 1px solid var(--border-default);
    flex-shrink: 0;
}
.case-detail-empty {
    padding: var(--space-6);
    font-size: var(--type-body-sm-size);
    color: var(--text-secondary);
}

/* Technikbereich (Diagnose-/Adminfunktionen).
   Not part of the Figma Cases frame, so the original 0.7rem stays as-is
   instead of being snapped to a type token.
   Shared class: ai_threads.html, events.html and aoki_events.html still carry
   their own identical copy in page CSS and win by source order. Phase 5 drops
   those copies; until then keep this rule and the copies in sync. */
.detail-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
/* AI-thread / conversation list rows in the Cases detail panel.
   Not the Phase-4 Commit-2 message thread module (.thread-* for chat bubbles). */
.thread-row {
    border-left: 3px solid var(--border-default);
    padding: 0.35rem 0 0.35rem 0.75rem;
    margin-bottom: 0.4rem;
}
.chan-pill,
.cap-pill {
    display: inline-block;
    padding: 0.1em 0.5em;
    margin: 0 0.2em 0.2em 0;
    font-size: 0.7rem;
    border-radius: var(--radius-md);
    background-color: var(--surface-muted);
    color: var(--text-secondary);
}


/* --- Chat-Workspace --- */
/* ===== Prisca Webchat (Figma: CARE — Dashboard Kit, S-04 Prisca Webchat) =====
   The whole workspace is a single soft-shadow card: a full-width header on
   top, then a row of history panel (left) + chat panel (right). Chat colors
   come from the CARE chat tokens defined below; neutral colors reuse the
   shell tokens from base.html. Class names are kept stable so the existing
   dark-mode overrides in base.html keep applying. */
/* Full-bleed: the chat fills the whole main-content between topbar and
   footer (Figma: Primedesk App Shell). No outer padding, radius or shadow. */
body:has(.prisca-workspace-card) .main-wrapper {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}
body:has(.prisca-workspace-card) .main-content {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.prisca-workspace-card {
    --prisca-avatar-bg: var(--chat-avatar-assistant-background);
    --prisca-accent: var(--is4it-purple);
    --prisca-chat-bg: var(--chat-thread-background);
    --prisca-user-bubble: var(--chat-message-user-background);
    --prisca-assistant-bubble: var(--surface-muted);
    --prisca-border: var(--surface-muted);
    --prisca-surface: var(--surface-card);

    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--prisca-surface);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

/* ===== Header (module-header) ===== */
.prisca-workspace-card .chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 76px;
    flex-shrink: 0;
    padding: 16px 24px;
    background: var(--prisca-surface);
    border-bottom: 1px solid var(--prisca-border);
    color: var(--text-primary);
    border-radius: 0;
}

.prisca-workspace-card .chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--prisca-avatar-bg);
    color: var(--is4it-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    border: none;
}

.chat-header-info h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}

.chat-header-info p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* ===== Workspace row ===== */
.prisca-workspace {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* ===== History panel ===== */
.prisca-workspace-card .conversations-panel {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--prisca-surface);
    border: none;
    border-right: 1px solid var(--prisca-border);
    border-radius: 0;
    overflow: hidden;
}

.prisca-workspace-card .conversations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border-bottom: none;
}

.prisca-workspace-card .conversations-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}

.conversations-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.prisca-workspace-card .conversations-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 999px;
    border: none;
    background: var(--prisca-surface);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1;
}

.prisca-workspace-card .conversations-actions .btn:hover {
    background: var(--light-gray);
    color: var(--text-primary);
}

.prisca-workspace-card .conversations-actions #newConversationBtn {
    background: var(--prisca-assistant-bubble);
    color: var(--text-secondary);
}

.prisca-workspace-card .conversations-actions #newConversationBtn:hover {
    background: var(--prisca-accent);
    color: var(--text-primary);
}

.prisca-workspace-card .conversation-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    background: transparent;
}

.prisca-workspace-card .conversation-list-item {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: 72px;
    min-height: 72px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--metrics-gap-title-meta);
    padding: 8px 12px;
    border: 1px solid var(--prisca-border);
    border-radius: 8px;
    background: var(--prisca-surface);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.prisca-workspace-card .conversation-list-item:hover {
    border-color: var(--prisca-accent);
}

.prisca-workspace-card .conversation-list-item.active {
    border-color: var(--prisca-accent);
    background: rgba(198, 173, 247, 0.1);
}

.prisca-workspace-card .conversation-list-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 28px;
    border-radius: 1px;
    background: var(--prisca-accent);
}

.prisca-workspace-card .conversation-list-preview {
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    word-break: break-word;
}

.prisca-workspace-card .conversation-list-meta {
    font-size: 11px;
    line-height: 16px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prisca-workspace-card .conversation-list-empty,
.prisca-workspace-card .conversation-list-loading,
.prisca-workspace-card .conversation-list-error {
    padding: 0.75rem 0.25rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.prisca-workspace-card .conversation-list-error {
    color: var(--status-critical-foreground);
}

/* ===== Chat panel ===== */
.prisca-workspace-card .chat-page {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--prisca-chat-bg);
    border: none;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.prisca-workspace-card .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    background: var(--prisca-chat-bg);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== Composer ===== */
.prisca-workspace-card .chat-composer {
    flex-shrink: 0;
    display: block;
    padding: 8px 16px;
    background: var(--prisca-chat-bg);
    border: none;
    border-top: 1px solid var(--prisca-border);
    border-radius: 0;
}

.chat-composer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding: 6px 6px 6px 14px;
    background: var(--prisca-assistant-bubble);
    border: 1px solid var(--prisca-border);
    border-radius: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.chat-composer.drag-over .chat-composer-row {
    border-color: var(--prisca-accent);
    box-shadow: 0 0 0 2px rgba(198, 173, 247, 0.35);
}

.chat-attach-preview {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--prisca-assistant-bubble);
    border: 1px solid var(--prisca-border);
    border-radius: 12px;
}

.chat-attach-preview.visible {
    display: flex;
}

.chat-attach-preview img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.chat-attach-preview-meta {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-attach-remove {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-attach-remove:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}

/* Height matches line-height so the placeholder sits on the same
   vertical center as the attach/send icons (align-items: center).
   A taller min-height left the text top-aligned inside the box. */
.prisca-workspace-card .chat-composer textarea {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
    min-height: 1.5em;
    max-height: 120px;
    font-family: inherit;
    color: var(--text-primary);
    display: block;
}
.prisca-workspace-card .chat-composer textarea::placeholder {
    color: var(--text-secondary);
}

.prisca-workspace-card .chat-composer #chatAttach {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.prisca-workspace-card .chat-composer #chatAttach:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}
.prisca-workspace-card .chat-composer #chatAttach:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.prisca-workspace-card .chat-composer #chatSend {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: var(--prisca-user-bubble);
    color: var(--chat-message-user-foreground);
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
}
.prisca-workspace-card .chat-composer #chatSend:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 768px) {
    body:has(.prisca-workspace-card) .main-wrapper {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    body:has(.prisca-workspace-card) .main-content {
        overflow-y: auto;
    }
    .prisca-workspace-card {
        flex: none;
        height: auto;
        min-height: 0;
    }
    .prisca-workspace {
        flex-direction: column;
    }
    .prisca-workspace-card .conversations-panel {
        width: 100%;
        max-height: 38vh;
        border-right: none;
        border-bottom: 1px solid var(--prisca-border);
    }
    .prisca-workspace-card .chat-page {
        height: calc(100vh - 220px);
        min-height: 420px;
    }
}


/* --- Tabbed Card Header --- */
/* --- Block 4: Konversations-Tabs im Card-Header --- */
.hc-card-header-tabs {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6) 0;
    border-bottom: 1px solid var(--border-default);
    overflow-x: auto;
}
.hc-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
}
.hc-tab-label {
    padding: var(--space-3) var(--space-4);
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--type-label-line-height);
    letter-spacing: var(--type-label-letter-spacing);
    text-transform: uppercase;
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
    white-space: nowrap;
    color: var(--text-secondary);
}
.hc-tab-indicator {
    height: 2px;
    background-color: transparent;
}
.hc-tab[aria-selected="true"] .hc-tab-label {
    color: var(--focus-default);
}
.hc-tab[aria-selected="true"] .hc-tab-indicator {
    background-color: var(--focus-default);
}

@media (max-width: 1100px) {
    .hc-card-header-tabs {
        padding: var(--space-3) var(--space-4) 0;
    }
}

@media (max-width: 768px) {
    .hc-card-header-tabs {
        padding: var(--space-2) var(--space-3) 0;
    }
}


/* --- Case Handover (S-01) --- */
/* ===== S-01 Case-Handover (Figma: CARE — Dashboard Kit, S-01 / Case Handover) =====
   Scroll-Modell: Page Scroll. Dokumentartiger Case-Detailaufbau mit genau einer
   primären vertikalen Scrollachse; die Blöcke wachsen mit dem Inhalt. */
.handover-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}
#handoverStack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.hc-section-heading {
    margin: 0 0 var(--metrics-gap-title-body);
    font-size: var(--type-label-badge-size);
    font-weight: var(--type-label-badge-weight);
    line-height: var(--type-label-badge-line-height);
    letter-spacing: var(--type-label-badge-letter-spacing);
    text-transform: uppercase;
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
    color: var(--text-secondary);
}
.hc-subheading {
    margin: 0 0 var(--metrics-gap-title-body);
    font-size: var(--type-card-title-size);
    font-weight: var(--type-card-title-weight);
    line-height: var(--type-card-title-line-height);
    color: var(--text-primary);
}

/* Block 1: Context Strip + Overview */
.hc-context-strip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 12px var(--space-4);
    background-color: var(--surface-muted);
    border-bottom: 1px solid var(--border-default);
}
.hc-context-fields {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    min-width: 0;
}
.hc-context-field {
    display: flex;
    flex-direction: column;
    gap: var(--metrics-gap-label-value);
    min-width: 0;
}
/* Context labels: Label/Badge (Demi 12, leading 1.4). */
.hc-context-label {
    font-size: var(--type-label-badge-size);
    font-weight: var(--type-label-badge-weight);
    line-height: var(--type-label-badge-line-height);
    letter-spacing: var(--type-label-badge-letter-spacing);
    text-transform: uppercase;
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
    color: var(--text-secondary);
}
.hc-context-value {
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    letter-spacing: var(--type-body-letter-spacing);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-context-value.is-customer {
    font-size: var(--type-card-title-size);
    font-weight: var(--type-card-title-weight);
}
.hc-itsm-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--action-primary-foreground);
    text-decoration: underline;
}
.hc-overview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 10px var(--space-4);
    border-bottom: 1px solid var(--border-default);
}
.hc-overview-main {
    flex: 1 1 auto;
    min-width: 0;
}
/* Figma S-01 Case Overview title: font-size/24, leading 1.4 (screen frame leads). */
.hc-overview-title {
    margin: 0;
    font-size: var(--type-size-24);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}
.hc-overview-user {
    margin: 2px 0 0;
    font-size: var(--type-card-title-size);
    font-weight: var(--type-card-title-weight);
    line-height: var(--type-card-title-line-height);
    color: var(--text-primary);
}
.hc-overview-timestamps {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    flex-shrink: 0;
    font-size: var(--type-body-sm-size);
    line-height: 1.4;
    letter-spacing: var(--type-body-sm-letter-spacing);
    color: var(--text-secondary);
    text-align: right;
}
.hc-overview-summary {
    display: flex;
    flex-direction: column;
    gap: var(--metrics-gap-title-body);
    padding: 12px var(--space-4);
}
.hc-narrative {
    margin: 0;
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-line-height);
    letter-spacing: var(--type-body-letter-spacing);
    color: var(--text-primary);
    white-space: pre-wrap;
}

/* Block 2: Findings (2/3) + Decision Support (1/3) */
.hc-two-col {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--space-4);
    align-items: stretch;
}
.hc-two-col > .hc-card {
    display: flex;
    flex-direction: column;
}
.hc-followup-action {
    width: 100%;
}

/* Block 5: Link rows in technical details */
.hc-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px 12px;
    margin-bottom: var(--space-2);
    background-color: var(--surface-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line-height);
    color: var(--text-secondary);
    text-decoration: none;
}
.hc-link-row:last-child {
    margin-bottom: 0;
}
a.hc-link-row:hover {
    background-color: var(--chrome-hover);
    color: var(--text-primary);
}
.hc-link-affordance {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
}
.hc-collapse-affordance {
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

/* Loading / gap / deny — tokenized, stay page-module (not Figma 02 Components). */
.hc-placeholder {
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line-height);
    color: var(--text-secondary);
}
.hc-section-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: 12px;
    background-color: var(--status-critical-background);
    border: 1px solid var(--status-critical-border);
    border-radius: var(--radius-md);
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line-height);
    color: var(--status-critical-foreground);
}
.hc-skeleton {
    height: 14px;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--surface-muted);
    animation: hc-pulse 1.6s ease-in-out infinite;
}
.hc-skeleton:last-child {
    margin-bottom: 0;
}
.hc-skeleton.is-title {
    height: 24px;
    width: 45%;
}
.hc-skeleton.is-short {
    width: 30%;
}
.hc-skeleton.is-status {
    width: 110px;
    height: 25px;
    margin-bottom: 0;
}
.hc-skeleton.is-tab {
    width: 180px;
    margin: 12px 0;
}
@keyframes hc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .hc-skeleton { animation: none; }
}
.hc-deny {
    max-width: 620px;
    margin: 72px auto;
    padding: var(--space-6);
    background-color: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    text-align: center;
}
.hc-deny-title {
    margin: 0 0 var(--space-4);
    font-size: var(--type-size-24);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}
.hc-deny-body,
.hc-deny-hint {
    margin: 0 0 var(--space-2);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
    color: var(--text-secondary);
}
.hc-deny-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

@media (max-width: 1100px) {
    .hc-two-col {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .hc-context-strip {
        flex-direction: column;
        align-items: flex-start;
    }
    .hc-overview-header {
        flex-direction: column;
    }
    .hc-overview-timestamps {
        align-items: flex-start;
        text-align: left;
    }
    .hc-overview-title {
        font-size: var(--type-size-20);
    }
    .hc-overview-summary {
        padding: 12px var(--space-3);
    }
    .hc-context-strip,
    .hc-overview-header {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
    .hc-deny {
        margin: 40px auto;
        padding: var(--space-4);
    }
}

@media (max-width: 576px) {
    .handover-page {
        gap: var(--space-2);
    }
    .hc-context-fields {
        gap: var(--space-3);
    }
    .hc-skeleton.is-title {
        width: 80%;
    }
    .hc-skeleton.is-short {
        width: 50%;
    }
    .hc-link-row {
        flex-wrap: wrap;
    }
    .hc-deny-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hc-deny-title {
        font-size: var(--type-size-20);
    }
}


/* --- Message thread (Handover read-only + Chat live; Phase 4) --- */
/* Canonical .thread-* names. .hc-* aliases keep Handover markup stable.
   Distinct from Cases .thread-row (AI-thread list items). */
.thread,
.hc-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.thread-day,
.hc-day-separator {
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    letter-spacing: var(--type-label-letter-spacing);
    line-height: var(--type-label-line-height);
    text-transform: uppercase;
    text-box-trim: var(--type-text-box-trim);
    text-box-edge: var(--type-text-box-edge);
    color: var(--text-secondary);
}
.thread-message,
.hc-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.thread-message.is-user,
.hc-message.is-user {
    justify-content: flex-end;
}
.thread-avatar,
.hc-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background-color: var(--chat-avatar-assistant-background);
    color: var(--text-inverse);
    font-size: var(--type-size-12);
    font-weight: 600;
}
.thread-content,
.hc-message-content {
    display: flex;
    flex-direction: column;
    gap: var(--metrics-gap-title-meta);
    max-width: min(550px, 100%);
    min-width: 0;
}
.thread-meta,
.hc-message-meta {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--type-size-12);
    color: var(--text-secondary);
}
.thread-author,
.hc-message-author {
    font-weight: var(--type-label-weight);
    letter-spacing: var(--type-label-letter-spacing);
    text-transform: uppercase;
}
.thread-time {
    font-size: var(--type-caption-size);
    letter-spacing: var(--type-caption-letter-spacing);
    color: var(--text-secondary);
}
.thread-bubble,
.hc-bubble {
    padding: 10px 14px;
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-line-height);
    letter-spacing: var(--type-body-letter-spacing);
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}
.thread-bubble .msg-attachment-text,
.hc-bubble .msg-attachment-text {
    white-space: pre-wrap;
}
.thread-bubble .msg-attachment-image,
.hc-bubble .msg-attachment-image {
    display: block;
    max-width: 100%;
    max-height: 280px;
    width: auto;
    height: auto;
    border-radius: var(--radius-md);
    margin-top: 0.45rem;
    object-fit: contain;
    background: var(--surface-default);
}
.thread-bubble .msg-attachment-text + .msg-attachment-image,
.thread-bubble .msg-attachment-image + .msg-attachment-text,
.hc-bubble .msg-attachment-text + .msg-attachment-image,
.hc-bubble .msg-attachment-image + .msg-attachment-text {
    margin-top: 0.45rem;
}
.thread-message.is-user .thread-bubble,
.hc-message.is-user .hc-bubble,
.hc-message.is-user .thread-bubble,
.thread-message.is-user .hc-bubble {
    background-color: var(--chat-message-user-background);
    border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg);
}
.thread-message.is-assistant .thread-bubble,
.hc-message.is-assistant .hc-bubble,
.hc-message.is-assistant .thread-bubble,
.thread-message.is-assistant .hc-bubble {
    background-color: var(--chat-message-assistant-background);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
/* Handover: read-only text feedback */
.thread-feedback,
.hc-message-feedback {
    font-size: var(--type-size-12);
    line-height: 1.4;
    color: var(--text-secondary);
}

/* --- Chat live thread (column flex in .chat-messages; Scope 2A) --- */
.chat-messages .thread-message {
    max-width: 620px;
    justify-content: flex-start;
}
.chat-messages .thread-message.is-assistant {
    align-self: flex-start;
}
.chat-messages .thread-message.is-user {
    align-self: flex-end;
}
.chat-messages .thread-message.is-user .thread-content {
    align-items: flex-end;
}
.chat-messages .thread-message.is-assistant .thread-bubble {
    white-space: normal;
}
/* Chat keeps taller inline image preview than Handover (2A). */
.chat-messages .thread-bubble .msg-attachment-image {
    max-height: 360px;
    margin-top: 0.5rem;
    border-radius: var(--radius-md);
}
.chat-messages .thread-bubble .msg-attachment-text + .msg-attachment-image,
.chat-messages .thread-bubble .msg-attachment-image + .msg-attachment-text {
    margin-top: 0.5rem;
}

/* Markdown inside assistant bubbles */
.chat-messages .thread-message.is-assistant .thread-bubble > *:first-child { margin-top: 0; }
.chat-messages .thread-message.is-assistant .thread-bubble > *:last-child { margin-bottom: 0; }
.chat-messages .thread-message.is-assistant .thread-bubble p { margin: 0 0 0.5rem; }
.chat-messages .thread-message.is-assistant .thread-bubble ul,
.chat-messages .thread-message.is-assistant .thread-bubble ol { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.chat-messages .thread-message.is-assistant .thread-bubble li { margin-bottom: 0.15rem; }
.chat-messages .thread-message.is-assistant .thread-bubble h1,
.chat-messages .thread-message.is-assistant .thread-bubble h2,
.chat-messages .thread-message.is-assistant .thread-bubble h3,
.chat-messages .thread-message.is-assistant .thread-bubble h4,
.chat-messages .thread-message.is-assistant .thread-bubble h5,
.chat-messages .thread-message.is-assistant .thread-bubble h6 {
    margin: 0.4rem 0 0.3rem;
    font-weight: 600;
    line-height: 1.3;
}
.chat-messages .thread-message.is-assistant .thread-bubble h1 { font-size: 1.1rem; }
.chat-messages .thread-message.is-assistant .thread-bubble h2 { font-size: 1.05rem; }
.chat-messages .thread-message.is-assistant .thread-bubble h3,
.chat-messages .thread-message.is-assistant .thread-bubble h4,
.chat-messages .thread-message.is-assistant .thread-bubble h5,
.chat-messages .thread-message.is-assistant .thread-bubble h6 { font-size: 1rem; }
.chat-messages .thread-message.is-assistant .thread-bubble code {
    background-color: var(--surface-card);
    border: 1px solid var(--border-default);
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-sm);
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.chat-messages .thread-message.is-assistant .thread-bubble pre {
    background-color: var(--surface-card);
    border: 1px solid var(--border-default);
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 0 0 0.5rem;
}
.chat-messages .thread-message.is-assistant .thread-bubble pre code {
    background: transparent;
    border: none;
    padding: 0;
}
.chat-messages .thread-message.is-assistant .thread-bubble blockquote {
    margin: 0 0 0.5rem;
    padding: 0.1rem 0.6rem;
    border-left: 3px solid var(--border-default);
    color: var(--text-secondary);
}
.chat-messages .thread-message.is-assistant .thread-bubble a {
    color: var(--action-secondary-background);
    text-decoration: underline;
    word-break: break-word;
}
.chat-messages .thread-message.is-assistant .thread-bubble table {
    border-collapse: collapse;
    margin: 0 0 0.5rem;
}
.chat-messages .thread-message.is-assistant .thread-bubble th,
.chat-messages .thread-message.is-assistant .thread-bubble td {
    border: 1px solid var(--border-default);
    padding: 0.25rem 0.5rem;
}

/* Interactive icon feedback (Chat 2A — not Figma text “Helpful? Yes No”) */
.chat-messages .thread-feedback {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 0;
    font-size: var(--type-size-12);
    color: var(--text-secondary);
    opacity: 0.55;
    transition: opacity 0.15s ease-in-out;
}
.chat-messages .thread-message.is-assistant:hover .thread-feedback,
.chat-messages .thread-feedback.has-value {
    opacity: 0.95;
}
.chat-messages .thread-feedback-label {
    color: var(--text-secondary);
}
.chat-messages .thread-feedback-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 2px 5px;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
}
.chat-messages .thread-feedback-btn:hover {
    color: var(--text-primary);
    background: var(--chrome-hover);
}
/* Active ≠ hover: no chrome-active token yet — surface-muted stands in. */
.chat-messages .thread-feedback-btn.active {
    color: var(--text-primary);
    background: var(--surface-muted);
}
.chat-messages .thread-feedback-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Typing indicator */
.typing-indicator {
    display: none;
    align-self: flex-start;
    margin-left: 42px;
    padding: 0.7rem 1rem;
    background: var(--chat-message-assistant-background);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
.typing-indicator.visible {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}
.typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: typingPulse 1.2s ease infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .typing-dot { animation: none; }
}

.chat-error {
    display: none;
    background: var(--status-critical-background);
    color: var(--status-critical-foreground);
    border: 1px solid var(--status-critical-border);
    padding: 0.6rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    margin: 0 16px;
}
.chat-error.visible { display: block; }

/* Overlay (unavailable) — scrim kept deliberate (no Kit overlay token). */
.chat-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(48, 48, 48, 0.55);
    z-index: 10;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.chat-overlay.visible { display: flex; }
.chat-overlay-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    text-align: center;
    max-width: 360px;
    box-shadow: 0 8px 32px rgba(48, 48, 48, 0.2);
}
.chat-overlay-card .ca-icon { font-size: 2.5rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.chat-overlay-card h5 { margin: 0 0 0.5rem; color: var(--text-primary); }
.chat-overlay-card p { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }

.chat-welcome {
    align-self: center;
    margin: auto;
    text-align: center;
    padding: 2rem 1.5rem;
    color: var(--text-secondary);
}
.chat-welcome .ca-icon {
    font-size: 2.5rem;
    color: var(--chat-avatar-assistant-background);
    margin-bottom: 0.75rem;
}
.chat-welcome h5 { margin: 0 0 0.3rem; color: var(--text-primary); }
.chat-welcome p { margin: 0; font-size: 0.88rem; }

@media (max-width: 768px) {
    .chat-messages .thread-message {
        max-width: 92%;
    }
}

/* Chat workspace dark remaps (page-local dark left from Phase 3). */
html[data-theme="dark"] .prisca-workspace-card {
    background: var(--pd-bg-elevated);
    border: none;
    box-shadow: none;
}
html[data-theme="dark"] .prisca-workspace-card .chat-header {
    background: var(--pd-bg-elevated);
    border-bottom-color: var(--pd-border);
}
html[data-theme="dark"] .prisca-workspace-card .conversations-actions .btn {
    background: transparent;
    color: var(--pd-text-muted);
}
html[data-theme="dark"] .prisca-workspace-card .conversations-actions .btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--pd-text);
}
html[data-theme="dark"] .prisca-workspace-card .conversation-list-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--pd-border);
}
html[data-theme="dark"] .chat-composer-row {
    background: var(--pd-bg-elevated);
    border-color: var(--pd-border);
}

/* HSD onboarding: pack outline + one-question workspace (Page Scroll).
   Outline is a compact navigator; the workspace holds a single question so
   the page does not stack every card. KPIs stay sticky in the side column. */
.hsd-onboarding-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--layout-table-column-optional-width);
    gap: var(--layout-grid-gap);
    align-items: start;
}

.hsd-onboarding-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.hsd-onboarding-outline-body {
    max-height: 22rem;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--space-2);
}

.hsd-onboarding-kpis {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: calc(var(--layout-topbar-height) + var(--space-4));
}

.hsd-onboarding-kpi-value {
    font-size: var(--type-size-24);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: var(--metrics-gap-label-value);
}

.hsd-onboarding-pack-btn,
.hsd-onboarding-q {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    border-radius: var(--radius-sm);
}

.hsd-onboarding-pack-btn {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-weight: 600;
}

.hsd-onboarding-pack-btn:hover,
.hsd-onboarding-q:hover {
    background: var(--navigation-hover-background);
    color: var(--navigation-hover-foreground);
}

.hsd-onboarding-pack-btn.is-open {
    background: var(--surface-muted);
}

.hsd-onboarding-pack-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--navigation-foreground-muted);
}

.hsd-onboarding-pack.is-complete .hsd-onboarding-pack-icon {
    color: var(--status-success-foreground);
}

.hsd-onboarding-q-list {
    padding: 0 0 var(--space-2) var(--space-6);
}

.hsd-onboarding-q {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.hsd-onboarding-q.is-active {
    background: var(--selection-background);
    color: var(--selection-foreground);
}

.hsd-onboarding-q-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .hsd-onboarding-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hsd-onboarding-kpis {
        position: static;
        flex-direction: row;
    }

    .hsd-onboarding-kpi {
        flex: 1;
    }
}


/* --- Case Orbit (alternative Cases workspace) --- */
/* Scroll-Modell: Viewport Workspace. Toolbar bleibt stehen, Orbit-Canvas
   füllt den restlichen Viewport. */
body:has(.case-orbit-page) .main-wrapper {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}
body:has(.case-orbit-page) .main-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.case-orbit-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-4);
}
.case-orbit-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    flex-shrink: 0;
    background-color: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.case-orbit-toolbar-start,
.case-orbit-toolbar-end {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.case-orbit-title {
    margin: 0;
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
    letter-spacing: var(--type-section-title-letter-spacing);
    color: var(--text-primary);
}
.case-orbit-filter {
    min-width: 12rem;
}
.case-orbit-meta {
    margin: 0;
    color: var(--text-secondary);
}
.case-orbit-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background-color: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}
.case-orbit-hub,
.case-orbit-ring,
.case-orbit-card {
    position: absolute;
    left: 50%;
    top: 50%;
}
.case-orbit-hub {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    height: 6.5rem;
    transform: translate(-50%, -50%);
    background-color: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: 50%;
    color: var(--text-primary);
}
.case-orbit-hub-count {
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
}
.case-orbit-hub-label {
    color: var(--text-secondary);
    font-size: var(--type-caption-size);
}
.case-orbit-ring {
    width: calc(var(--orbit-radius) * 2);
    height: calc(var(--orbit-radius) * 2);
    transform: translate(-50%, -50%);
    border: 1px dashed var(--border-default);
    border-radius: 50%;
    pointer-events: none;
}
.case-orbit-card {
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 11.25rem;
    padding: var(--space-3);
    transform: translate(calc(-50% + var(--orbit-x)), calc(-50% + var(--orbit-y)));
    background-color: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
}
.case-orbit-card:hover,
.case-orbit-card:focus-visible {
    border-color: var(--border-strong);
    outline: none;
}
.case-orbit-card.tone-critical {
    border-color: var(--status-critical-border);
}
.case-orbit-card.tone-attention {
    border-color: var(--status-attention-border);
}
.case-orbit-card.tone-info {
    border-color: var(--status-info-border);
}
.case-orbit-card.tone-success {
    border-color: var(--status-success-border);
}
.case-orbit-card-id {
    color: var(--text-secondary);
    font-size: var(--type-caption-size);
}
.case-orbit-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.case-orbit-loading,
.case-orbit-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    padding: var(--space-4);
    text-align: center;
}

@media (max-width: 768px) {
    .case-orbit-stage {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        overflow: auto;
        padding: var(--space-3);
    }
    .case-orbit-ring {
        display: none;
    }
    .case-orbit-hub,
    .case-orbit-card {
        position: static;
        transform: none;
        width: 100%;
    }
    .case-orbit-hub {
        align-self: center;
    }
    .case-orbit-loading,
    .case-orbit-empty {
        position: static;
        min-height: 8rem;
    }
}