/* Phase 1 업무 보고실 */
.employee-room-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.employee-room-mode-tabs,
.report-room-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface-2) 82%, transparent);
}

.employee-room-mode-tab,
.report-room-tab {
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    padding: 8px 12px;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.employee-room-mode-tab:hover,
.report-room-tab:hover {
    color: var(--color-text-primary);
}

.employee-room-mode-tab:active,
.report-room-tab:active,
.report-room-refresh-btn:active,
.report-task-card:active {
    transform: translateY(1px);
}

.employee-room-mode-tab.is-active,
.report-room-tab.is-active {
    color: var(--color-on-accent);
    background: var(--color-accent);
}

.employee-room-mode-count {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    margin-left: 5px;
    padding: 0 5px;
    place-items: center;
    border-radius: 99px;
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
    font-size: 0.68rem;
}

.employee-room-mode-tab.is-active .employee-room-mode-count {
    color: var(--color-accent);
    background: var(--color-on-accent);
}

.employee-report-room {
    display: grid;
    gap: 22px;
}

.report-room-command {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    padding: 28px 30px;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    background:
        linear-gradient(130deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-accent) 9%, var(--color-surface)) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-on-accent) 8%, transparent);
}

.report-room-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--color-info-text);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.report-room-command h3,
.report-room-detail-header h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1.2rem;
    letter-spacing: -0.025em;
}

.report-room-command p {
    max-width: 60ch;
    margin: 8px 0 0;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.6;
}

.report-room-composer {
    display: grid;
    grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
}

.report-room-composer-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.report-room-composer-field span {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.report-room-employee-select,
.report-room-command-input {
    width: 100%;
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.82rem;
}

.report-room-employee-select {
    min-height: 42px;
    padding: 0 12px;
}

.report-room-command-input {
    min-height: 42px;
    max-height: 96px;
    padding: 10px 12px;
    line-height: 1.45;
    resize: vertical;
}

.report-room-submit-btn {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    background: var(--color-accent);
    color: var(--color-on-accent);
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0 18px;
}

.report-room-submit-btn:disabled {
    cursor: wait;
    opacity: 0.62;
}

.report-room-command-status {
    min-height: 20px;
    white-space: pre-line;
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    line-height: 1.55;
}

.report-room-command-status.is-success {
    color: var(--color-success-text);
}

.report-room-command-status.is-error {
    color: var(--color-danger-text);
}

.report-room-thread {
    display: grid;
    gap: 12px;
    max-height: min(58vh, 620px);
    min-height: 210px;
    overflow-y: auto;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface-2) 72%, transparent), var(--color-surface));
    scroll-behavior: smooth;
}

.report-room-chat-empty {
    align-self: center;
    justify-self: center;
    max-width: 420px;
    text-align: center;
}

.report-room-chat-empty strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 800;
}

.report-room-chat-empty p {
    margin: 8px 0 0;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.55;
}

.report-room-chat-message {
    display: flex;
    align-items: flex-start;
}

.report-room-chat-message.is-user {
    justify-content: flex-end;
}

.report-room-chat-bubble {
    display: grid;
    gap: 8px;
    width: min(720px, 86%);
    padding: 13px 14px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-bg) 68%, transparent);
}

.report-room-chat-message.is-user .report-room-chat-bubble {
    width: min(620px, 82%);
    color: var(--color-on-accent);
    border-color: color-mix(in srgb, var(--color-accent) 76%, var(--color-border));
    background: var(--color-accent);
}

.report-room-chat-message.is-success .report-room-chat-bubble {
    border-color: color-mix(in srgb, var(--color-success-text) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-success-bg) 68%, var(--color-surface));
}

.report-room-chat-message.is-warning .report-room-chat-bubble {
    border-color: color-mix(in srgb, var(--color-warning-text) 42%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning-bg) 72%, var(--color-surface));
}

.report-room-chat-message.is-error .report-room-chat-bubble {
    border-color: var(--color-danger-border);
    background: color-mix(in srgb, var(--color-danger-bg) 72%, var(--color-surface));
}

.report-room-chat-message.is-muted .report-room-chat-bubble {
    opacity: 0.82;
}

.report-room-chat-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--color-text-muted);
    font-size: 0.64rem;
    font-weight: 750;
}

.report-room-chat-message.is-user .report-room-chat-meta {
    color: color-mix(in srgb, var(--color-on-accent) 72%, transparent);
}

.report-room-chat-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
    font-size: 0.8rem;
    line-height: 1.62;
}

.report-room-chat-message.is-user .report-room-chat-text {
    color: var(--color-on-accent);
}

.report-room-chat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.report-room-chat-action {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 1px solid var(--color-border-strong);
    border-radius: 9px;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 750;
    padding: 0 10px;
    text-decoration: none;
    transition: background 180ms ease, transform 180ms ease;
}

.report-room-chat-action:hover {
    background: var(--color-surface-hover);
}

.report-room-chat-action:active {
    transform: translateY(1px);
}

.report-room-refresh-btn,
.report-room-detail-close,
.report-room-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 9px 12px;
    transition: background 180ms ease, transform 180ms ease;
}

.report-room-finding-list,
.report-room-candidate-list {
    display: grid;
    gap: 8px;
}

.report-room-finding {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border-left: 3px solid var(--color-info-text);
    border-radius: 0 10px 10px 0;
    background: var(--color-info-bg);
}

.report-room-finding.is-warning {
    border-left-color: var(--color-warning-text);
    background: var(--color-warning-bg);
}

.report-room-finding.is-danger {
    border-left-color: var(--color-danger-text);
    background: var(--color-danger-bg);
}

.report-room-finding.is-excluded {
    opacity: 0.56;
}

.report-room-finding strong,
.report-room-finding span,
.report-room-finding small {
    overflow-wrap: anywhere;
}

.report-room-finding strong {
    color: var(--color-text-primary);
    font-size: 0.72rem;
}

.report-room-finding span {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    line-height: 1.5;
}

.report-room-finding small {
    color: var(--color-text-muted);
    font-size: 0.62rem;
}

.report-room-candidate-btn {
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 10px 12px;
    text-align: left;
}

.report-room-candidate-btn:hover {
    background: var(--color-surface-hover);
}

.report-room-schedule-item {
    gap: 10px;
}

.report-room-schedule-item strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.report-room-schedule-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 3px 8px;
}

.report-room-schedule-fields {
    display: grid;
    grid-template-columns: minmax(96px, 0.18fr) minmax(96px, 0.18fr) minmax(180px, 1fr);
    gap: 8px;
}

.report-room-schedule-fields label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.report-room-schedule-fields label span {
    color: var(--color-text-muted);
    font-size: 0.62rem;
    font-weight: 800;
}

.report-room-schedule-fields input {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.76rem;
    padding: 0 9px;
}

.report-room-schedule-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.report-room-schedule-actions .report-room-approval-btn {
    min-height: 36px;
    border-radius: 10px;
    font-size: 0.74rem;
}

.report-room-refresh-btn:hover,
.report-room-detail-close:hover {
    background: var(--color-surface-hover);
}

.report-room-refresh-btn.is-loading svg {
    animation: report-room-spin 900ms linear infinite;
}

@keyframes report-room-spin {
    to { transform: rotate(360deg); }
}

.report-room-metrics {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    border-block: 1px solid var(--color-border);
}

.report-room-metric {
    position: relative;
    min-height: 88px;
    padding: 18px 20px;
    border-right: 1px solid var(--color-border);
}

.report-room-metric:last-child {
    border-right: 0;
}

.report-room-metric-label {
    display: block;
    margin-bottom: 7px;
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
}

.report-room-metric-value {
    color: var(--color-text-primary);
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.report-room-metric.is-decision .report-room-metric-value {
    color: var(--color-warning-text);
}

.report-room-metric.is-failed .report-room-metric-value {
    color: var(--color-danger-text);
}

.report-room-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.report-room-tabs {
    max-width: 100%;
    overflow-x: auto;
}

.report-room-tab {
    white-space: nowrap;
}

.report-room-sync-status {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.report-room-list {
    display: grid;
    gap: 12px;
}

.report-task-card {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
    animation: report-room-rise 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--report-index, 0) * 45ms);
}

@keyframes report-room-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.report-task-card:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
}

.report-task-rail {
    background: var(--task-status-color, var(--color-text-muted));
}

.report-task-main {
    min-width: 0;
    padding: 18px 0;
}

.report-task-topline,
.report-task-meta,
.report-room-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.report-task-status,
.report-task-role,
.report-room-detail-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 99px;
    color: var(--color-text-secondary);
    background: var(--color-surface-2);
    font-size: 0.67rem;
    font-weight: 750;
}

.report-task-status {
    color: var(--task-status-color, var(--color-text-secondary));
    background: color-mix(in srgb, var(--task-status-color, var(--color-text-secondary)) 13%, transparent);
}

.report-task-title {
    margin: 9px 0 5px;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    letter-spacing: -0.015em;
}

.report-task-summary {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 10px;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.report-task-meta {
    color: var(--color-text-muted);
    font-size: 0.68rem;
}

.report-task-open {
    display: grid;
    width: 44px;
    place-items: center;
    color: var(--color-text-muted);
    border-left: 1px solid var(--color-border);
}

.report-room-state {
    display: grid;
    min-height: 240px;
    padding: 34px;
    place-items: center;
    border: 1px dashed var(--color-border-strong);
    border-radius: 18px;
    color: var(--color-text-secondary);
    text-align: center;
}

.report-room-state strong {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-primary);
    font-size: 0.94rem;
}

.report-room-state p {
    max-width: 46ch;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.6;
}

.report-room-skeleton {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    min-height: 118px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 16px;
}

.report-room-skeleton::before {
    content: "";
    background: var(--color-border-strong);
}

.report-room-skeleton-lines {
    display: grid;
    gap: 10px;
    padding: 22px;
}

.report-room-skeleton-line {
    height: 10px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--color-surface-2), var(--color-surface-hover), var(--color-surface-2));
    background-size: 200% 100%;
    animation: report-room-shimmer 1.5s ease-in-out infinite;
}

.report-room-skeleton-line:nth-child(1) { width: 25%; }
.report-room-skeleton-line:nth-child(2) { width: 62%; }
.report-room-skeleton-line:nth-child(3) { width: 84%; }

@keyframes report-room-shimmer {
    to { background-position: -200% 0; }
}

.report-room-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 3vw, 42px);
}

.report-room-detail-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: color-mix(in srgb, var(--color-bg) 76%, transparent);
    backdrop-filter: blur(5px);
    cursor: default;
}

.report-room-detail-panel {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100vw - 48px));
    max-height: calc(100dvh - 72px);
    min-width: 0;
    overflow-y: auto;
    border: 1px solid var(--color-border-strong);
    border-radius: 20px;
    background: var(--color-bg);
    box-shadow: var(--shadow-overlay);
    animation: report-room-panel-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes report-room-panel-in {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.report-room-detail-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(18px);
}

.report-room-detail-body {
    display: grid;
    gap: 0;
    padding: 0;
}

.report-room-unified-report {
    display: grid;
    background: var(--color-bg);
}

.report-room-report-lead {
    display: grid;
    gap: 14px;
    padding: 26px 24px 24px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 96%, var(--color-accent) 4%), var(--color-bg));
}

.report-room-report-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

.report-room-report-title-copy {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.report-room-report-eyebrow {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 850;
}

.report-room-report-title-copy h4 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.18;
    text-wrap: balance;
}

.report-room-report-status {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    font-size: 0.72rem;
    font-weight: 850;
    padding: 0 10px;
    white-space: nowrap;
}

.report-room-report-brief {
    max-width: 760px;
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.92rem;
    line-height: 1.72;
    white-space: pre-wrap;
}

.report-room-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.report-room-report-meta span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    font-weight: 760;
    padding: 0 9px;
}

.report-room-report-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.report-room-report-kicker span,
.report-room-report-section-head span {
    color: var(--color-text-muted);
    font-size: 0.66rem;
    font-weight: 850;
}

.report-room-report-kicker strong {
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 5px 8px;
}

.report-room-report-flow-wrap {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 16px 24px;
}

.report-room-report-section {
    display: grid;
    gap: 14px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--color-border);
}

.report-room-report-section.is-log {
    border-bottom: 0;
}

.report-room-report-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.report-room-report-section-head h4 {
    margin: 4px 0 0;
    color: var(--color-text-primary);
    font-size: 0.96rem;
    line-height: 1.35;
}

.report-room-report-section-body {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.report-room-report-section.is-final-report {
    background: color-mix(in srgb, var(--color-surface) 72%, var(--color-bg));
}

.report-room-report-section.is-conversation {
    background: var(--color-bg);
}

.report-room-final-report {
    display: grid;
    gap: 16px;
    border: 1px solid color-mix(in srgb, var(--color-accent) 34%, var(--color-border));
    border-left: 4px solid var(--color-accent);
    border-radius: 12px;
    background: var(--color-surface);
    padding: 18px 18px 20px;
}

.report-room-final-report.is-pending {
    border-color: var(--color-border);
    border-left-color: var(--color-text-muted);
}

.report-room-final-report-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.report-room-final-report-head span {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.67rem;
    font-weight: 850;
}

.report-room-final-report-head strong {
    display: block;
    margin-top: 5px;
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

.report-room-final-report-head em {
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 850;
    padding: 6px 8px;
    white-space: nowrap;
}

.report-room-final-report-body {
    color: var(--color-text-primary);
    font-size: 0.94rem;
    line-height: 1.82;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.report-room-employee-conversation {
    display: grid;
    gap: 14px;
}

.report-room-conversation-empty {
    display: grid;
    gap: 5px;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface) 74%, transparent);
    padding: 15px 16px;
}

.report-room-conversation-empty strong {
    color: var(--color-text-primary);
    font-size: 0.84rem;
}

.report-room-conversation-empty p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.55;
}

.report-room-input-required {
    gap: 12px;
}

.report-room-input-guide {
    display: grid;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--color-warning-text) 34%, var(--color-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-warning-text) 8%, var(--color-surface));
    padding: 14px 15px;
}

.report-room-input-guide strong {
    color: var(--color-text-primary);
    font-size: 0.86rem;
}

.report-room-input-guide p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.report-room-input-form {
    display: grid;
    gap: 11px;
}

.report-room-evidence-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-border);
}

.report-room-evidence-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.report-room-evidence-chip-list span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    font-weight: 750;
    padding: 0 10px;
    overflow-wrap: anywhere;
}

.report-room-detail-disclosure {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
}

.report-room-detail-disclosure summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: 0.78rem;
    font-weight: 850;
    padding: 0 14px;
}

.report-room-detail-disclosure summary::-webkit-details-marker {
    display: none;
}

.report-room-detail-disclosure summary::before {
    content: "+";
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 6px;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}

.report-room-detail-disclosure[open] summary::before {
    content: "-";
}

.report-room-detail-disclosure summary span {
    min-width: 0;
    flex: 1;
}

.report-room-detail-disclosure summary strong {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.report-room-detail-disclosure-body {
    display: grid;
    gap: 16px;
    border-top: 1px solid var(--color-border);
    padding: 16px;
}

.report-room-instruction-stack {
    display: grid;
    gap: 12px;
}

.report-room-instruction-current {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    padding: 15px 16px;
}

.report-room-instruction-current span,
.report-room-instruction-history-item span,
.report-room-followup-head span {
    color: var(--color-text-muted);
    font-size: 0.67rem;
    font-weight: 850;
}

.report-room-instruction-current strong {
    display: block;
    margin-top: 6px;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.report-room-instruction-current small,
.report-room-instruction-history-item time,
.report-room-followup-head small {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 750;
    white-space: nowrap;
}

.report-room-instruction-history {
    display: grid;
    gap: 10px;
}

.report-room-instruction-history-item {
    display: grid;
    gap: 5px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg);
    padding: 12px;
}

.report-room-instruction-history-item p {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.8rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.report-room-followup-composer {
    display: grid;
    gap: 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface) 86%, var(--color-surface-2));
    padding: 14px;
}

.report-room-followup-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.report-room-followup-head strong {
    display: block;
    margin-top: 4px;
    color: var(--color-text-primary);
    font-size: 0.86rem;
}

.report-room-followup-text {
    width: 100%;
    min-height: 86px;
    resize: vertical;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.83rem;
    line-height: 1.55;
    padding: 11px 12px;
}

.report-room-followup-text:focus {
    outline: 2px solid color-mix(in srgb, var(--color-accent) 42%, transparent);
    outline-offset: 2px;
    border-color: color-mix(in srgb, var(--color-accent) 72%, var(--color-border));
}

.report-room-followup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.report-room-followup-actions span {
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.report-room-followup-button-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.report-room-followup-button-group .report-room-approval-btn {
    min-width: 92px;
}

.report-room-progress-action-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    padding: 16px;
}

.report-room-progress-action-panel strong {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

.report-room-progress-action-panel p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.6;
}

.report-room-progress-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.report-room-action-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.report-room-action-header.is-warning {
    background: color-mix(in srgb, var(--color-warning-bg) 72%, var(--color-surface));
}

.report-room-action-header.is-success {
    background: color-mix(in srgb, var(--color-success-bg) 62%, var(--color-surface));
}

.report-room-action-header.is-danger {
    background: color-mix(in srgb, var(--color-danger-bg) 68%, var(--color-surface));
}

.report-room-action-header.is-info {
    background: color-mix(in srgb, var(--color-info-bg) 62%, var(--color-surface));
}

.report-room-action-header.is-muted {
    background: var(--color-surface-2);
}

.report-room-action-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.report-room-action-copy span {
    color: var(--color-text-muted);
    font-size: 0.66rem;
    font-weight: 800;
}

.report-room-action-copy h4 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.98rem;
    line-height: 1.35;
}

.report-room-action-copy p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    line-height: 1.55;
}

.report-room-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-room-action-primary,
.report-room-action-secondary {
    min-height: 38px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0 14px;
    white-space: nowrap;
    transition: background 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.report-room-action-primary {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.report-room-action-secondary {
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.report-room-action-primary:hover,
.report-room-action-secondary:hover {
    opacity: 0.88;
}

.report-room-detail-section {
    display: grid;
    gap: 11px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.report-room-detail-section:first-child {
    padding-top: 0;
    border-top: 0;
}

.report-room-detail-section h4 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.8rem;
}

.report-room-detail-copy {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.79rem;
    line-height: 1.65;
    white-space: pre-wrap;
}

.report-room-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-border);
}

.report-room-detail-field {
    min-width: 0;
    padding: 12px;
    background: var(--color-surface);
}

.report-room-detail-field span {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-muted);
    font-size: 0.65rem;
}

.report-room-detail-field strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    line-height: 1.5;
}

.report-room-detail-section .report-room-flow {
    padding: 0;
    border-bottom: 0;
}

.report-room-timeline {
    display: grid;
    gap: 0;
}

.report-room-event {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 18px;
}

.report-room-event::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: -2px;
    left: 5px;
    width: 1px;
    background: var(--color-border-strong);
}

.report-room-event:last-child::before {
    display: none;
}

.report-room-event-dot {
    width: 11px;
    height: 11px;
    margin-top: 3px;
    border: 2px solid var(--color-bg);
    border-radius: 50%;
    background: var(--color-info-text);
    box-shadow: 0 0 0 1px var(--color-border-strong);
}

.report-room-event strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-primary);
    font-size: 0.76rem;
}

.report-room-event p,
.report-room-event time {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    line-height: 1.5;
}

.report-room-cancel-btn {
    width: 100%;
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg);
}

/* ── 태스크 디테일 히어로 ─────────────────────────── */
.report-room-detail-hero {
    padding: 22px 24px 20px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(135deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-accent) 5%, var(--color-surface)) 100%);
}

.report-room-detail-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.report-room-detail-summary {
    margin: 0 0 12px;
    color: var(--color-text-primary);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.55;
    letter-spacing: -0.015em;
    white-space: pre-wrap;
}

.report-room-detail-summary.is-empty {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    font-weight: 400;
}

.report-room-detail-bullets {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.report-room-detail-bullet {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

.report-room-detail-bullet::before {
    content: "·";
    color: var(--color-accent);
    font-weight: 900;
    flex-shrink: 0;
}

/* ── 업무 플로우 단계 ─────────────────────────────── */
.report-room-flow {
    display: flex;
    align-items: flex-start;
    padding: 18px 24px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-border);
}

.report-room-flow::-webkit-scrollbar {
    display: none;
}

.report-room-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-width: 52px;
    max-width: 70px;
}

.report-room-flow-step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
    background: var(--color-surface-2);
    transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    flex-shrink: 0;
}

.report-room-flow-step-label {
    font-size: 0.6rem;
    font-weight: 650;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.3;
    word-break: keep-all;
}

.report-room-flow-connector {
    flex-shrink: 0;
    width: 20px;
    min-width: 14px;
    height: 2px;
    margin-top: 5px;
    background: var(--color-border-strong);
    align-self: flex-start;
}

.report-room-flow-step.is-done .report-room-flow-step-dot {
    background: var(--color-success-text);
    border-color: var(--color-success-text);
}

.report-room-flow-step.is-done .report-room-flow-step-label {
    color: var(--color-text-secondary);
}

.report-room-flow-step.is-current .report-room-flow-step-dot {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.report-room-flow-step.is-current .report-room-flow-step-label {
    color: var(--color-accent);
    font-weight: 800;
}

.report-room-flow-step.is-blocked .report-room-flow-step-dot {
    background: var(--color-danger-text);
    border-color: var(--color-danger-text);
}

.report-room-flow-step.is-blocked .report-room-flow-step-label {
    color: var(--color-danger-text);
    font-weight: 800;
}

/* ── 승인 CTA ─────────────────────────────────────── */
.report-room-approval-cta {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border);
}

.report-room-approval-btn {
    min-height: 44px;
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0 18px;
    transition: background 180ms ease, opacity 180ms ease;
}

.report-room-approval-btn--approve {
    flex: 1;
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
}

.report-room-approval-btn--approve:hover {
    opacity: 0.88;
}

.report-room-approval-btn--reject {
    flex: 0 0 auto;
    min-width: 68px;
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg);
}

.report-room-approval-btn--reject:hover {
    background: color-mix(in srgb, var(--color-danger-bg) 80%, var(--color-danger-text));
}

/* ── 처리 탭 작업대 ─────────────────────────────────── */
.report-room-work-section {
    display: grid;
    gap: 12px;
}

.report-room-work-section + .report-room-work-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.report-room-work-section-head,
.report-room-review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.report-room-work-section-head span,
.report-room-review-head span {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.report-room-work-section-head strong,
.report-room-review-head strong {
    min-width: 0;
    color: var(--color-text-primary);
    font-size: 0.86rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.report-room-review-panel {
    display: grid;
    gap: 14px;
}

.report-room-before-after {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-border);
}

.report-room-before-after > div {
    min-width: 0;
    padding: 14px;
    background: var(--color-surface);
}

.report-room-before-after span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-muted);
    font-size: 0.67rem;
    font-weight: 800;
}

.report-room-before-after p {
    margin: 0 0 6px;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.report-room-before-after p:last-child {
    margin-bottom: 0;
}

.report-room-confirm-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.report-room-confirm-list span {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: 750;
    padding: 0 10px;
}

.report-room-work-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.report-room-review-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.report-room-review-table-head,
.report-room-review-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(80px, 0.8fr) minmax(90px, 0.8fr);
    gap: 10px;
    padding: 10px 12px;
}

.report-room-review-table-head {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: 0.66rem;
    font-weight: 800;
}

.report-room-review-table-row {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.72rem;
}

.report-room-review-table-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.report-room-schedule-timeline {
    display: grid;
    gap: 10px;
}

.report-room-schedule-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.report-room-schedule-row.is-applied,
.report-room-schedule-row.is-excluded {
    opacity: 0.68;
}

.report-room-schedule-time {
    display: grid;
    align-content: start;
    gap: 3px;
    color: var(--color-text-primary);
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding-top: 10px;
}

.report-room-schedule-time span {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 650;
}

.report-room-schedule-block {
    min-width: 0;
    display: grid;
    gap: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    padding: 12px;
}

.report-room-schedule-row.is-buffer .report-room-schedule-block {
    min-height: 38px;
    align-items: center;
    border-style: dashed;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.report-room-schedule-block-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.report-room-schedule-block-top strong {
    min-width: 0;
    color: var(--color-text-primary);
    font-size: 0.83rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.report-room-schedule-block-top em {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 800;
    padding: 3px 8px;
}

/* ── 디테일 탭 ────────────────────────────────────── */
.report-room-detail-tabs {
    display: flex;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-border);
}

.report-room-detail-tab {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 12px 6px;
    margin-bottom: -1px;
    margin-right: 18px;
    transition: color 180ms ease, border-color 180ms ease;
}

.report-room-detail-tab:hover {
    color: var(--color-text-primary);
}

.report-room-detail-tab.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.report-room-detail-tab-panel {
    display: grid;
    gap: 0;
    padding: 20px 24px;
}

.report-room-detail-result-content {
    display: grid;
    gap: 14px;
}

.report-room-detail-answer-only {
    padding: 22px 24px 28px;
}

.report-room-detail-conversation {
    display: grid;
    gap: 16px;
}

.report-room-detail-message {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.report-room-detail-message.is-user {
    align-items: flex-end;
}

.report-room-detail-message.is-assistant {
    align-items: flex-start;
}

.report-room-detail-speaker {
    margin-left: 2px;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.report-room-detail-bubble {
    max-width: min(760px, 92%);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.88rem;
    line-height: 1.72;
    padding: 15px 16px;
}

.report-room-detail-message.is-user .report-room-detail-bubble {
    max-width: min(640px, 86%);
    border-color: color-mix(in srgb, var(--color-accent) 76%, var(--color-border));
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 0.82rem;
    line-height: 1.55;
}

.report-room-detail-message.is-note .report-room-detail-bubble {
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 86%, var(--color-surface-2));
    color: var(--color-text-primary);
}

.report-room-detail-actions {
    display: flex;
    max-width: min(760px, 92%);
    justify-content: flex-start;
}

/* Part 1 업무 보고실 3존 레이아웃 */
#employeeRoomView.is-report-room-mode {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 0;
}

#employeeRoomView.is-report-room-mode .employee-room-header {
    margin-bottom: 14px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.employee-report-room {
    min-height: calc(100dvh - 108px);
}

.report-room-layout {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 108px);
    min-height: 640px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.report-room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--color-border);
}

.report-room-header h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1.04rem;
    line-height: 1.25;
}

.report-room-body {
    display: grid;
    grid-template-columns: 104px minmax(360px, 1.15fr) minmax(320px, 0.85fr);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.report-room-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: auto;
    min-height: 0;
    padding: 10px 8px;
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-2) 56%, transparent);
}

.report-room-sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-height: 58px;
    padding: 8px 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.report-room-sidebar-item:hover {
    border-color: var(--color-border);
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.report-room-sidebar-item:active {
    transform: translateY(1px);
}

.report-room-sidebar-item.is-active {
    border-color: color-mix(in srgb, var(--color-accent) 54%, var(--color-border));
    background: var(--color-accent-muted);
    color: var(--color-info-text);
}

.report-room-sidebar-label {
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
}

.report-room-sidebar-badge,
.report-room-sidebar-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    padding: 0 7px;
}

.report-room-sidebar-badge {
    color: var(--color-warning-text);
    background: var(--color-warning-bg);
}

.report-room-sidebar-meta {
    color: var(--color-text-muted);
    background: var(--color-surface);
}

.report-room-main {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-bg) 38%, transparent);
}

.report-room-chat-panel {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-surface-2));
}

.report-room-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    min-height: 54px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 86%, transparent);
}

.report-room-panel-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: 0.62rem;
    font-weight: 850;
}

.report-room-panel-head h4 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.92rem;
    line-height: 1.25;
}

.report-room-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
}

.report-room-auto-feed {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 12px;
    scroll-behavior: smooth;
}

.report-room-feed-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 14px;
    border: 1px solid var(--color-border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--color-surface) 92%, var(--color-surface-2));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-bg) 54%, transparent);
}

.report-room-feed-item.is-approval {
    border-color: color-mix(in srgb, var(--color-warning-text) 38%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning-bg) 36%, var(--color-surface));
}

.report-room-feed-item.is-failed {
    border-color: var(--color-danger-border);
}

.report-room-feed-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.report-room-feed-role-badge,
.report-room-feed-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 22px;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 800;
    padding: 2px 8px;
}

.report-room-feed-role-badge {
    color: var(--color-info-text);
    background: var(--color-accent-muted);
}

.report-room-feed-status {
    color: var(--feed-status-color, var(--color-text-secondary));
    background: var(--color-surface-2);
}

.report-room-feed-title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: 0.82rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-room-feed-time {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

.report-room-feed-summary {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.report-room-feed-instruction {
    margin: -2px 0 0;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.report-room-feed-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.report-room-feed-approve-btn,
.report-room-feed-expand-btn,
.report-room-feed-reject-btn {
    min-height: 32px;
    border-radius: 9px;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0 11px;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.report-room-feed-approve-btn,
.report-room-feed-expand-btn {
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.report-room-feed-reject-btn {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
}

.report-room-feed-approve-btn:hover,
.report-room-feed-expand-btn:hover {
    background: var(--color-accent-hover);
}

.report-room-feed-reject-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.report-room-feed-approve-btn:active,
.report-room-feed-expand-btn:active,
.report-room-feed-reject-btn:active {
    transform: translateY(1px);
}

.report-room-feed-approve-btn:disabled,
.report-room-feed-expand-btn:disabled,
.report-room-feed-reject-btn:disabled {
    cursor: wait;
    opacity: 0.56;
}

.report-room-feed-progress-mini {
    color: var(--color-info-text);
    font-size: 0.72rem;
    font-weight: 750;
}

.report-room-feed-item-expanded {
    display: grid;
    gap: 12px;
    max-height: min(42vh, 420px);
    overflow-y: auto;
    margin-top: 5px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.report-room-feed-item-expanded.hidden {
    display: none;
}

.report-room-feed-item-expanded .report-room-finding small {
    display: -webkit-box;
    max-height: 4.8em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.report-room-feed-expand-loading,
.report-room-feed-expand-summary {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.6;
}

.report-room-feed-expand-list {
    margin: 0 0 0 18px;
    padding: 0;
    color: var(--color-text-secondary);
    font-size: 0.74rem;
    line-height: 1.55;
}

.report-room-feed-expand-error,
.report-room-feed-action-error {
    color: var(--color-danger-text);
    font-size: 0.72rem;
    font-weight: 750;
}

.report-room-feed-confirmed {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--color-success-text);
    font-size: 0.76rem;
    font-weight: 850;
}

.report-room-feed-confirmed::before {
    content: "✓";
    margin-right: 5px;
}

.report-room-feed-confirmed.is-rejected {
    color: var(--color-danger-text);
}

.report-room-feed-confirmed.is-rejected::before {
    content: "✕";
}

.report-room-command-zone {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    max-height: none;
    border-top: 0;
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-surface-2));
}

.report-room-command-zone .report-room-thread {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    max-height: none;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.report-room-command-zone .report-room-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 9px;
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-surface);
}

.report-room-command-zone .report-room-composer-field {
    min-width: 0;
}

.report-room-command-zone .report-room-composer-field:not(.is-wide) {
    order: 1;
}

.report-room-command-zone .report-room-submit-btn {
    order: 2;
    min-width: 86px;
}

.report-room-command-zone .report-room-composer-field.is-wide {
    grid-column: 1 / -1;
    order: 3;
}

.report-room-command-zone .report-room-command-status {
    min-height: 18px;
    padding: 0 16px 12px;
}

.report-room-command-zone .report-room-command-input {
    min-height: 58px;
    max-height: 140px;
}

.report-room-progress-track {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
}

.report-room-progress-stage {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 750;
}

.report-room-progress-stage.is-done {
    color: var(--color-success-text);
}

.report-room-progress-stage.is-active {
    color: var(--color-info-text);
}

.report-room-progress-stage.is-error {
    color: var(--color-danger-text);
}

.report-room-palette {
    position: absolute;
    right: 12px;
    bottom: 166px;
    left: 12px;
    z-index: 12;
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-floating);
}

.report-room-palette.hidden {
    display: none;
}

.report-room-palette-item {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    text-align: left;
}

.report-room-palette-item:last-child {
    border-bottom: 0;
}

.report-room-palette-item:hover,
.report-room-palette-item:focus-visible {
    background: var(--color-surface-hover);
}

@media (max-width: 720px) {
    #employeeRoomView {
        padding-top: calc(env(safe-area-inset-top, 0px) + 76px);
    }
    #employeeRoomView.is-report-room-mode {
        width: 100%;
        max-width: none;
        padding-inline: 12px;
    }
    .employee-room-header {
        align-items: stretch;
        flex-direction: column;
    }
    .employee-room-mode-tabs {
        align-self: stretch;
    }
    .employee-room-mode-tab {
        flex: 1;
    }
    .employee-report-room {
        min-height: 0;
    }
    .report-room-layout {
        height: auto;
        min-height: calc(100dvh - 188px);
        overflow: visible;
        border-radius: 14px;
    }
    .report-room-header {
        align-items: flex-start;
        padding: 12px;
    }
    .report-room-body {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
    }
    .report-room-sidebar {
        width: 100%;
        flex: 0 0 auto;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
        padding: 7px 8px;
        -webkit-overflow-scrolling: touch;
    }
    .report-room-sidebar-item {
        flex: 0 0 auto;
        min-height: 40px;
        flex-direction: row;
        padding: 7px 10px;
    }
    .report-room-main {
        min-height: 420px;
        height: min(62dvh, 620px);
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }
    .report-room-chat-panel {
        min-height: 420px;
        height: min(58dvh, 620px);
    }
    .report-room-feed-header {
        align-items: stretch;
        flex-direction: column;
    }
    .report-room-command-zone {
        min-height: 0;
    }
    .report-room-command-zone .report-room-composer {
        grid-template-columns: 1fr;
    }
    .report-room-command-zone .report-room-composer-field:not(.is-wide),
    .report-room-command-zone .report-room-submit-btn,
    .report-room-command-zone .report-room-composer-field.is-wide {
        grid-column: 1;
        order: initial;
    }
    .report-room-palette {
        bottom: 184px;
    }
    .report-room-command {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    .report-room-refresh-btn {
        justify-self: start;
    }
    .report-room-composer {
        grid-template-columns: 1fr;
    }
    .report-room-thread {
        max-height: 60vh;
        padding: 14px;
    }
    .report-room-chat-bubble,
    .report-room-chat-message.is-user .report-room-chat-bubble {
        width: 100%;
    }
    .report-room-submit-btn {
        justify-self: start;
        min-width: 96px;
    }
    .report-room-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .report-room-metric:nth-child(2) {
        border-right: 0;
    }
    .report-room-metric:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border);
    }
    .report-room-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .report-room-sync-status {
        padding-left: 4px;
    }
    .report-room-detail-overlay {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }
    .report-room-detail-scrim {
        display: none;
    }
    .report-room-detail-panel {
        width: 100%;
        max-height: none;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    .report-room-report-lead,
    .report-room-report-section {
        padding: 18px 16px;
    }
    .report-room-report-title-row,
    .report-room-progress-action-panel {
        grid-template-columns: 1fr;
    }
    .report-room-final-report {
        padding: 16px;
    }
    .report-room-final-report-head {
        align-items: stretch;
        flex-direction: column;
    }
    .report-room-final-report-head em {
        align-self: start;
    }
    .report-room-instruction-current {
        grid-template-columns: 1fr;
    }
    .report-room-followup-head,
    .report-room-followup-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .report-room-followup-button-group {
        justify-content: stretch;
    }
    .report-room-followup-button-group .report-room-approval-btn {
        flex: 1 1 120px;
    }
    .report-room-followup-actions .report-room-approval-btn {
        width: 100%;
    }
    .report-room-report-status {
        justify-self: start;
    }
    .report-room-report-flow-wrap {
        padding: 14px 16px;
    }
    .report-room-report-kicker {
        align-items: flex-start;
        flex-direction: column;
    }
    .report-room-progress-actions {
        justify-content: stretch;
    }
    .report-room-progress-actions .report-room-approval-btn {
        flex: 1 1 140px;
    }
    .report-room-evidence-grid,
    .report-room-detail-grid {
        grid-template-columns: 1fr;
    }
    .report-room-detail-disclosure-body {
        padding: 14px;
    }
    .report-room-detail-answer-only {
        padding: 18px 16px 24px;
    }
    .report-room-detail-bubble,
    .report-room-detail-message.is-user .report-room-detail-bubble {
        max-width: 100%;
    }
    .report-room-action-header {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .report-room-action-buttons {
        justify-content: stretch;
    }
    .report-room-action-primary,
    .report-room-action-secondary {
        flex: 1;
    }
    .report-room-before-after,
    .report-room-work-actions {
        grid-template-columns: 1fr;
    }
    .report-room-review-table-head,
    .report-room-review-table-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
    .report-room-schedule-row {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 9px;
    }
    .report-room-schedule-fields,
    .report-room-schedule-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .report-task-card,
    .report-room-detail-panel,
    .report-room-refresh-btn.is-loading svg,
    .report-room-skeleton-line {
        animation: none;
    }
}
