/* Panel Projektanta — TSX-matched design (white header, underline tabs, card layout) */

/* ------------------------------------------------------------------ Override core layout for Projektanta */

/* White header — 56px, shadow, white bg instead of navy */
body.maptoo .maptoo-nav {
    height: 56px !important;
    background: #fff !important;
    color: #1A1E2E !important;
    border-bottom: 1px solid #E5E8F0 !important;
    box-shadow: 0 1px 4px rgba(15, 27, 68, 0.06) !important;
    padding: 0 20px;
    gap: 12px;
}

body.maptoo .maptoo-nav-logo img {
    height: 44px;
    width: auto;
    object-fit: contain;
}

body.maptoo .maptoo-nav-divider {
    width: 1px;
    height: 28px;
    background: #E5E8F0;
    margin: 0 4px;
    flex-shrink: 0;
}

body.maptoo .maptoo-nav-title {
    font-size: 14px;
    font-weight: 700;
    color: #1A1E2E;
    margin-left: 0;
}

body.maptoo .maptoo-nav-user {
    margin-left: auto;
    gap: 8px;
}

body.maptoo #nav-username {
    font-size: 13px;
    color: #4A5578;
}

body.maptoo .maptoo-nav-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4F6CE0, #6A85FF);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

/* Layout — updated nav height */
body.maptoo .maptoo-layout {
    min-height: calc(100vh - 56px);
}

/* ------------------------------------------------------------------ Sidebar: 200px, white, compact */

body.maptoo .maptoo-sidebar {
    width: 200px;
    background: #fff;
    border-right: 1px solid #E5E8F0;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
}

body.maptoo .maptoo-sidebar nav {
    padding: 0 8px;
    flex: 1;
}

body.maptoo .maptoo-sidebar-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: #4A5578;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    margin-bottom: 2px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

body.maptoo .maptoo-sidebar-link:hover {
    background: rgba(235, 240, 255, 0.5);
    color: #4A5578;
}

body.maptoo .maptoo-sidebar-link.active {
    background: #EBF0FF;
    color: #4F6CE0;
    font-weight: 600;
}

body.maptoo .maptoo-sidebar-link .sidebar-icon {
    font-size: 16px;
    flex-shrink: 0;
}

/* Logout section at bottom */
body.maptoo .sidebar-logout-section {
    margin-top: auto;
    padding: 10px 8px 0;
    border-top: 1px solid #F0F2F8;
}

body.maptoo .sidebar-logout-btn {
    border: 1px solid #E5E8F0 !important;
    background: #F7F8FC !important;
    color: #7A8BB5 !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    border-radius: 7px !important;
    padding: 8px 10px !important;
}

body.maptoo .sidebar-logout-btn:hover {
    background: #EEF0F6 !important;
    color: #4A5578 !important;
}

/* ------------------------------------------------------------------ Main content area */

body.maptoo .maptoo-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;       /* zmienione z overflow:hidden — pozwala scrollowac w dol */
    overflow-x: hidden;
    padding: 0;
    max-width: none;
    background: #F7F8FC;
}

/* Inner views that have padding */
#view-login,
#view-welcome {
    padding: var(--sp-lg);
    overflow-y: auto;
    flex: 1;
}

#view-projects {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

#view-team {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* ------------------------------------------------------------------ Page header */

.projektanta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 8px;
    flex-shrink: 0;
}

.projektanta-header h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1A1E2E;
}

/* ------------------------------------------------------------------ Type tabs (WZ / MPZP / ZPI / POG) — underline style */

.type-tabs {
    background: #fff;
    border-bottom: 1px solid #E5E8F0;
    display: flex;
    gap: 0;
    padding: 0 20px;
    border-radius: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

.type-tab {
    flex: none;
    padding: 14px 20px;
    border: none;
    background: none;
    border-radius: 0;
    border-bottom: 2.5px solid transparent;
    font-size: 13.5px;
    font-weight: 400;
    color: #7A8BB5;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
    box-shadow: none;
}

.type-tab:hover {
    color: #4F6CE0;
    background: none;
    box-shadow: none;
}

.type-tab.active {
    border-bottom-color: #4F6CE0;
    color: #4F6CE0;
    font-weight: 700;
    background: none;
    box-shadow: none;
}

.type-tab-label {
    font-weight: 800;
}

.type-tab-full {
    display: none;
    margin-left: 0;
    font-weight: 400;
    font-size: 12.5px;
    opacity: 1;
}

.type-tab.active .type-tab-full {
    color: #4F6CE0;
}

.type-tab:not(.active) .type-tab-full {
    color: #B0B8D0;
}

@media (min-width: 768px) {
    .type-tab-full {
        display: inline;
    }
}

/* ------------------------------------------------------------------ Status tabs (Do zrobienia / W trakcie / Zakończone) — underline style */

.status-tabs {
    background: #fff;
    border-bottom: 1px solid #E5E8F0;
    display: flex;
    gap: 0;
    padding: 0 20px;
    align-items: center;
    margin-bottom: 0;
    flex-shrink: 0;
}

.status-tab {
    padding: 11px 16px;
    border: none;
    background: none;
    border-bottom: 2.5px solid transparent;
    font-size: 13.5px;
    font-weight: 400;
    color: #7A8BB5;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 0;
    display: flex;
    gap: 6px;
    align-items: center;
}

.status-tab:hover {
    color: #1A1E2E;
}

.status-tab.active {
    color: #1A1E2E;
    border-bottom-color: #4F6CE0;
    font-weight: 600;
}

/* Circle counter badges */
.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    background: #F0F2F8;
    color: #7A8BB5;
    margin-left: 0;
}

.status-tab.active .tab-count {
    background: #4F6CE0;
    color: #fff;
}

/* ------------------------------------------------------------------ Search bar */

.search-bar {
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #F0F2F8;
    position: relative;
    margin-bottom: 0;
    flex-shrink: 0;
}

.search-bar .maptoo-input {
    width: 100%;
    padding: 8px 14px 8px 36px;
    border-radius: 7px;
    border: 1.5px solid #E5E8F0;
    font-size: 13.5px;
    outline: none;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%239AAACF' stroke-width='2'/%3E%3Cpath stroke='%239AAACF' stroke-width='2' d='m16 16 4 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}

.search-bar .maptoo-input:focus {
    border-color: #4F6CE0;
    box-shadow: 0 0 0 3px rgba(79, 108, 224, 0.1);
}

/* ------------------------------------------------------------------ Project list (card style from TSX) */

.project-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-list-item {
    display: flex;
    flex-direction: row;       /* poziomo — wszystko w jednej linii dla kompaktowosci */
    align-items: center;
    gap: 10px;
    padding: 8px 12px;          /* zmniejszony padding 13/16 → 8/12 */
    background: #fff;
    border: 1px solid #E8EBF5;
    border-radius: 7px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 27, 68, 0.03);
    transition: box-shadow 0.15s;
}

.project-list-item:hover {
    box-shadow: 0 2px 8px rgba(79, 108, 224, 0.1);
    border-color: #D0D8F0;
}

/* Top row: type badge + name + status badge */
.project-list-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.project-list-item-top-left {
    display: flex;
    gap: 7px;
    align-items: center;
    min-width: 0;
    flex: 1;
}

/* Type badge (small pill) */
.project-list-item-icon {
    width: auto;
    height: auto;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
    padding: 2px 8px;
}

.project-list-item-icon.type-wz { background: #EBF0FF; color: #4F6CE0; }
.project-list-item-icon.type-mpzp { background: #E8F8EF; color: #1B7A3D; }
.project-list-item-icon.type-zpi { background: #FFF3E0; color: #E67E22; }
.project-list-item-icon.type-pog { background: #F3E5F5; color: #7B1FA2; }

.project-list-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;     /* tytul i meta w jednej linii */
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.project-list-item-title {
    font-size: 13px !important;
    font-weight: 600;
    color: #1A1E2E;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Status badge (pill) */
.project-list-item-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.project-list-item-status.status-todo { background: #F0F2F8; color: #7A8BB5; }
.project-list-item-status.status-inprogress { background: #EBF0FF; color: #4F6CE0; }
.project-list-item-status.status-done { background: #E8F8EF; color: #1B7A3D; }

/* Bottom row: progress bar + percentage + timestamp */
.project-list-item-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-progress-bar {
    flex: 1;
    height: 4px;
    background: #F0F2F8;
    border-radius: 2px;
    overflow: hidden;
}

.project-progress-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: #4F6CE0;
    transition: width 0.3s ease;
}

.project-progress-bar-fill.complete {
    background: #27AE60;
}

.project-list-item-progress-pct {
    font-size: 12px;
    color: #7A8BB5;
    flex-shrink: 0;
}

.project-list-item-meta {
    font-size: 11px;
    color: #9CA3AF;
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    white-space: nowrap;
}

.project-list-item-actions {
    display: flex;
    gap: var(--sp-sm);
    flex-shrink: 0;
}

/* ---- Akcje w zakładce Zakończone ---- */
.action-btn-group {
    display: flex;
    gap: var(--sp-xs);
}

/* ------------------------------------------------------------------ Case documents view */

.case-docs-layout {
    display: block;        /* nie grid — pełna szerokość bez panelu AI obok */
    margin-bottom: var(--sp-lg);
}

.case-docs-section,
.case-ai-section {
    background: white;
    border: 1px solid rgba(15, 27, 68, 0.08);
    border-radius: var(--radius-md);
    padding: var(--sp-md);
    width: 100%;
}

/* ──── Podgląd dokumentu — pełna szerokość ──── */
#doc-preview-panel {
    width: 100%;
}
#doc-preview-content {
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
}

/* Pozwól sekcji dokumentów scrollować się — parent .maptoo-main ma
   overflow:hidden co zacinało wysokie panele */
#case-documents-view {
    overflow-y: auto !important;
    flex: 1;
    min-height: 0;
}
body.maptoo .maptoo-main {
    overflow-y: auto !important;
}

/* Split view: PDF (lewo) + tekst AI (prawo) — pełna szerokość 50/50
   Wysokość fixed A4: 1200px (wystarczy na pełną A4 + toolbar PDF.js).
   Strona scrolluje się jeśli ekran mniejszy. */
.doc-split-view {
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: stretch;
    height: 1200px;     /* sztywne — A4 portret z paskiem narzedzi PDF.js */
    min-height: 1100px;
}
.doc-split-left,
.doc-split-right {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;   /* żeby flexbox poprawnie obliczył wysokość */
}
.doc-split-left > div:last-child {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.doc-split-left iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 6px;
    background: #fff;
    display: block;
}
.doc-split-right #doc-right-rendered {
    flex: 1;
    display: block;        /* było flex w niektórych miejscach — block stabilniejszy */
    border: 1px solid #E5E8F0;
    border-radius: 6px;
    background: #F4F6FB;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scroll-behavior: smooth;
}

/* Tabele w renderowanej tresci (marked.parse) — stylowane na czytelne ramki.
   Bez tego marked produkuje <table> bez border, co wyglada jak nieformatowany tekst. */
.markdown-page table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
    font-size: 12px;
    background: #fff;
}
.markdown-page table th,
.markdown-page table td {
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
}
.markdown-page table th {
    background: #f3f4f6;
    font-weight: 600;
    color: #1A1E2E;
}
.markdown-page table tr:nth-child(even) td {
    background: #fafbfc;
}
.markdown-page p { margin: 6px 0; }
.markdown-page h1, .markdown-page h2, .markdown-page h3 { margin: 14px 0 6px; font-weight: 700; }
.markdown-page h1 { font-size: 16px; }
.markdown-page h2 { font-size: 14px; }
.markdown-page h3 { font-size: 13px; }
.markdown-page ul, .markdown-page ol { margin: 6px 0; padding-left: 24px; }
.markdown-page li { margin: 2px 0; }

/* Edytowalna treść .markdown-page — wygląda jak rendered + można wpisywać */
.markdown-page[contenteditable] {
    outline: none;
    cursor: text;
    transition: background 0.15s;
}
.markdown-page[contenteditable]:hover {
    background: rgba(37, 99, 235, 0.02);
}
.markdown-page[contenteditable]:focus {
    background: rgba(37, 99, 235, 0.04);
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.15);
    border-radius: 4px;
}
/* Tab Edytuj — kontener flex, textarea wypelnia caly panel */
.doc-split-right #doc-right-edit {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.doc-split-right #doc-right-edit > textarea#ocr-text-area {
    flex: 1;
    width: 100%;
    /* Font jak w dokumencie urzedowym — czytelna serif czcionka */
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 13px;
    line-height: 1.5;
    color: #1F2937;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #E5E8F0;
    border-radius: 6px;
    resize: none;
    outline: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    min-height: 0;
}
.doc-split-right #doc-right-edit > textarea#ocr-text-area:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* Pasek nawigacji stron */
#doc-page-navigator {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: #F4F6FB;
    border: 1px solid #E5E8F0;
    border-radius: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
#doc-page-navigator .page-nav-btn {
    transition: all 0.15s ease;
    cursor: pointer;
    min-width: 30px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: #1A1E2E;
    border: 1px solid #E5E8F0;
    border-radius: 4px;
}
#doc-page-navigator .page-nav-btn:hover {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

/* Sekcje per-strona w panelu OCR — wygląd zbliżony do skanu A4 */
.ocr-page-section {
    padding: 14px 22px 16px 22px;
    margin: 8px 8px;
    background: #fff;
    border: 1px solid #E5E8F0;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    scroll-margin-top: 10px;
}
.ocr-page-section + .ocr-page-section {
    margin-top: 6px;
}
.ocr-page-section .ocr-page-label {
    font-size: 8px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #E5E8F0;
}

/* Markdown wewnątrz strony — kompaktowy, dokument-like */
.ocr-page-section .markdown-body {
    font-size: 9.5px;
    line-height: 1.35;
    color: #1F2937;
    text-align: justify;
}
.ocr-page-section .markdown-body > * + * {
    margin-top: 2px;
}
.ocr-page-section .markdown-body h1,
.ocr-page-section .markdown-body h2,
.ocr-page-section .markdown-body h3,
.ocr-page-section .markdown-body h4 {
    font-weight: 700;
    color: #1A1E2E;
    margin: 4px 0 2px 0;
    line-height: 1.25;
    text-align: left;
}
.ocr-page-section .markdown-body h1 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
.ocr-page-section .markdown-body h2 { font-size: 10px; }
.ocr-page-section .markdown-body h3 { font-size: 9.5px; }
.ocr-page-section .markdown-body h4 { font-size: 9.5px; font-weight: 600; }
.ocr-page-section .markdown-body p {
    margin: 2px 0;
    font-size: 9.5px;
}
.ocr-page-section .markdown-body ul,
.ocr-page-section .markdown-body ol {
    margin: 2px 0 2px 16px;
    padding: 0;
}
.ocr-page-section .markdown-body li {
    margin: 0;
    font-size: 9.5px;
    line-height: 1.35;
}
.ocr-page-section .markdown-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 4px 0;
    font-size: 8.5px;
}
.ocr-page-section .markdown-body th,
.ocr-page-section .markdown-body td {
    border: 1px solid #D1D5DB;
    padding: 2px 4px;
    text-align: left;
    line-height: 1.3;
}
.ocr-page-section .markdown-body th {
    background: #F3F4F6;
    font-weight: 600;
}
.ocr-page-section .markdown-body strong {
    font-weight: 600;
}
.ocr-page-section .markdown-body em {
    font-style: italic;
    color: #6B7280;
}
.ocr-page-section .markdown-body blockquote {
    border-left: 2px solid #2563eb;
    padding-left: 8px;
    margin: 4px 0;
    color: #4B5563;
    font-size: 9px;
}
.ocr-page-section .markdown-body hr {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid #E5E8F0;
}

/* Tło panelu OCR — szare jak czytnik PDF */
#doc-right-rendered {
    background: #F4F6FB !important;
}

.case-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-md);
}

.case-section-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1A1E2E;
    margin: 0;
}

.case-docs-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.doc-card {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    border: 1px solid rgba(15, 27, 68, 0.08);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
    cursor: pointer;
}

.doc-card:hover {
    background: rgba(79, 108, 224, 0.04);
}

.doc-card.selected {
    border-color: var(--maptoo-blue);
    background: rgba(79, 108, 224, 0.06);
}

.doc-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: #FEE2E2;
    color: #DC2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.doc-card-icon.type-doc { background: #DBEAFE; color: #2563EB; }
.doc-card-icon.type-img { background: #D1FAE5; color: #059669; }

.doc-card-body {
    flex: 1;
    min-width: 0;
}

.doc-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #1A1E2E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-card-meta {
    font-size: 12px;
    color: #7A8BB5;
}

/* Document preview */

.doc-preview-panel {
    margin-top: var(--sp-md);
}

.doc-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-sm) 0;
    margin-top: var(--sp-md);
    border-top: 1px solid rgba(15, 27, 68, 0.08);
}

.doc-preview-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1A1E2E;
    margin: 0;
}

.doc-preview-content {
    padding: var(--sp-md);
    background: rgba(15, 27, 68, 0.02);
    border: 1px solid rgba(15, 27, 68, 0.08);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.6;
    color: #1A1E2E;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    cursor: pointer;
}

/* Full-screen document editor modal */
.doc-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-editor-modal {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.doc-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #E5E8F0;
    flex-shrink: 0;
}

.doc-editor-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1A1E2E;
    margin: 0;
}

.doc-editor-header .doc-editor-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.doc-editor-textarea {
    flex: 1;
    width: 100%;
    padding: 20px;
    border: none;
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #1A1E2E;
    resize: none;
    outline: none;
}

.doc-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-top: 1px solid #E5E8F0;
    font-size: 12px;
    color: #7A8BB5;
    flex-shrink: 0;
}

/* AI analysis result */

.ai-key-info {
    margin-top: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.ai-key-row {
    display: flex;
    gap: var(--sp-sm);
    padding: var(--sp-xs) 0;
    border-bottom: 1px solid rgba(15, 27, 68, 0.06);
    font-size: 13px;
}

.ai-key-label {
    width: 140px;
    flex-shrink: 0;
    font-weight: 600;
    color: #7A8BB5;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3px;
    padding-top: 2px;
}

.ai-key-value {
    color: #1A1E2E;
    font-weight: 500;
}

/* Action section */

.case-action-section {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    padding: var(--sp-lg) 0;
    border-top: 1px solid rgba(15, 27, 68, 0.08);
}

.plugin-warning {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    background: #FEF3C7;
    border: 1px solid #F59E0B;
    border-radius: var(--radius-sm);
    color: #92400E;
    font-size: 13px;
}

.plugin-success {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    background: #D1FAE5;
    border: 1px solid #10B981;
    border-radius: var(--radius-sm);
    color: #065F46;
    font-size: 13px;
}

@media (max-width: 1024px) {
    /* Na mniejszych ekranach split-view stack pionowy */
    .doc-split-view { flex-direction: column; }
    .doc-split-left,
    .doc-split-right { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ Municipality folders */

.municipality-folder {
    margin-bottom: 8px;
}

.municipality-folder-header {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    background: rgba(15, 27, 68, 0.04);
    border: 1px solid rgba(15, 27, 68, 0.08);
    border-radius: 9px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    margin-bottom: var(--sp-xs);
}

.municipality-folder-header:hover {
    background: rgba(15, 27, 68, 0.07);
}

.municipality-folder-header svg {
    color: #4F6CE0;
    flex-shrink: 0;
}

.municipality-folder-name {
    font-size: 14px;
    font-weight: 700;
    color: #1A1E2E;
}

.municipality-folder-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    background: #4F6CE0;
    color: white;
}

.municipality-folder-items {
    padding-left: var(--sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.municipality-folder.collapsed .municipality-folder-items {
    display: none;
}

.municipality-folder.collapsed .municipality-folder-header svg {
    transform: rotate(-90deg);
}

/* ------------------------------------------------------------------ WZ Data Panel */

.wz-data-panel {
    background: white;
    border: 1px solid rgba(15, 27, 68, 0.08);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-md);
    overflow: hidden;
}

.wz-data-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-sm) var(--sp-md);
    background: rgba(79, 108, 224, 0.06);
    border-bottom: 1px solid rgba(15, 27, 68, 0.06);
}

.wz-data-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #1A1E2E;
    margin: 0;
}

.wz-data-body {
    padding: var(--sp-md);
}

.wz-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
    padding-bottom: var(--sp-md);
    border-bottom: 1px solid rgba(15, 27, 68, 0.06);
}

.wz-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wz-info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7A8BB5;
    font-weight: 600;
}

.wz-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #1A1E2E;
}

.wz-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--sp-sm);
}

.wz-stat-card {
    padding: var(--sp-sm);
    background: rgba(15, 27, 68, 0.02);
    border: 1px solid rgba(15, 27, 68, 0.06);
    border-radius: var(--radius-sm);
}

.wz-stat-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7A8BB5;
    font-weight: 600;
    margin-bottom: var(--sp-xs);
}

.wz-stat-card-values {
    display: flex;
    gap: var(--sp-sm);
    font-size: 13px;
}

.wz-stat-val {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wz-stat-val-label {
    font-size: 10px;
    color: #7A8BB5;
}

.wz-stat-val-num {
    font-weight: 700;
    color: #1A1E2E;
}

/* ------------------------------------------------------------------ Editor header */

.editor-header {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
    padding: 16px 20px;
    border-bottom: 1px solid #E5E8F0;
    background: #fff;
    border-radius: 0;
}

.editor-header h2 {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: #1A1E2E;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Back button matching TSX */
.editor-header .maptoo-btn-secondary {
    border: none;
    background: none;
    color: #4F6CE0;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
    cursor: pointer;
}

.editor-header .maptoo-btn-secondary:hover {
    background: none;
    color: #3E5CD0;
}

/* ------------------------------------------------------------------ Accent button (Generuj AI) */

.maptoo-btn-accent {
    background: linear-gradient(135deg, #4F6CE0, #6A85FF);
    color: white;
    border: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.maptoo-btn-accent:hover {
    background: linear-gradient(135deg, #3d5bd4, #5a75ef);
    box-shadow: 0 2px 8px rgba(79, 108, 224, 0.3);
}

.maptoo-btn-accent:disabled {
    background: #7A8BB5;
    opacity: 0.5;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ AI Generating overlay */

.ai-generating-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 27, 68, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.ai-generating-content {
    background: white;
    padding: var(--sp-xl);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(15, 27, 68, 0.2);
}

.ai-generating-content p {
    margin-top: var(--sp-md);
    font-size: 16px;
    font-weight: 600;
    color: #1A1E2E;
}

.ai-generating-content .agent-dot-pulse {
    justify-content: center;
}

.ai-generating-content .agent-dot-pulse span {
    width: 10px;
    height: 10px;
}

/* ------------------------------------------------------------------ Empty state */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    gap: 12px;
    color: #B0B8D0;
    text-align: center;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 0;
    opacity: 1;
}

.empty-state p {
    font-size: 14px;
    color: #7A8BB5;
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ Editor layout */

.editor-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-md);
    padding: 0 20px 20px;
    min-height: calc(100vh - 56px - 260px);
}

.editor-main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 6px 8px;
    background: #F7F8FC;
    border: 1px solid #E5E8F0;
    border-radius: 8px;
    flex-wrap: wrap;
}

.editor-toolbar .separator {
    width: 1px;
    height: 24px;
    background: rgba(15, 27, 68, 0.1);
}

.editor-toolbar .maptoo-btn-sm {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #E5E8F0;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    color: #4A5578;
    font-weight: 400;
}

.editor-toolbar .maptoo-btn-accent {
    color: #4F6CE0;
    font-weight: 600;
    background: #fff;
    border: 1px solid #E5E8F0;
}

.editor-toolbar .maptoo-btn-accent:hover {
    background: #EBF0FF;
    box-shadow: none;
}

.editor-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: 13px;
    color: #7A8BB5;
}

.editor-status .save-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27AE60;
}

.editor-status .save-indicator.unsaved {
    background: #E67E22;
}

.editor-textarea {
    flex: 1;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #E5E8F0;
    border-radius: 8px;
    font-family: var(--maptoo-font);
    font-size: 13.5px;
    line-height: 1.6;
    color: #1A1E2E;
    resize: vertical;
    min-height: 400px;
    box-sizing: border-box;
}

.editor-textarea:focus {
    outline: none;
    border-color: #4F6CE0;
    box-shadow: 0 0 0 3px rgba(79, 108, 224, 0.1);
}

.editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #7A8BB5;
    padding: var(--sp-xs) 0;
}

/* Detail view action buttons matching TSX */
.editor-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

.editor-actions .maptoo-btn-secondary {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1.5px solid #E5E8F0;
    background: #fff;
    color: #4A5578;
    font-size: 13px;
}

.editor-actions .maptoo-btn-primary {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

/* ------------------------------------------------------------------ Editor sidebar */

.editor-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}

.sidebar-section {
    background: white;
    border: 1px solid #E5E8F0;
    border-radius: 9px;
    overflow: hidden;
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-sm) var(--sp-md);
    background: rgba(172, 194, 255, 0.1);
    font-size: 13px;
    font-weight: 600;
    color: #1A1E2E;
    cursor: pointer;
    user-select: none;
}

.sidebar-section-header:hover {
    background: rgba(172, 194, 255, 0.18);
}

.sidebar-section-body {
    padding: var(--sp-md);
}

/* ------------------------------------------------------------------ Comments */

.comment-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    max-height: 400px;
    overflow-y: auto;
}

.comment-item {
    padding: var(--sp-sm);
    border-radius: var(--radius-sm);
    background: rgba(172, 194, 255, 0.06);
}

.comment-item.reply {
    margin-left: var(--sp-md);
    border-left: 2px solid var(--maptoo-very-light-blue);
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-xs);
}

.comment-author {
    font-size: 13px;
    font-weight: 600;
    color: #1A1E2E;
}

.comment-date {
    font-size: 11px;
    color: #7A8BB5;
}

.comment-body {
    font-size: 14px;
    color: #1A1E2E;
    line-height: 1.4;
}

.comment-actions {
    display: flex;
    gap: var(--sp-sm);
    margin-top: var(--sp-xs);
}

.comment-actions button {
    background: none;
    border: none;
    font-size: 12px;
    color: #4F6CE0;
    cursor: pointer;
    padding: 0;
}

.comment-actions button:hover {
    text-decoration: underline;
}

.comment-input-wrap {
    display: flex;
    gap: var(--sp-xs);
    padding-top: var(--sp-sm);
    border-top: 1px solid rgba(15, 27, 68, 0.06);
}

.comment-input-wrap textarea {
    flex: 1;
    padding: var(--sp-sm);
    border: 1px solid rgba(15, 27, 68, 0.15);
    border-radius: var(--radius-sm);
    font-family: var(--maptoo-font);
    font-size: 13px;
    resize: none;
    min-height: 60px;
}

/* ------------------------------------------------------------------ Agent suggestions */

.agent-suggestion {
    padding: var(--sp-sm);
    background: rgba(79, 108, 224, 0.06);
    border-left: 3px solid #4F6CE0;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.4;
}

.agent-suggestion-source {
    font-size: 11px;
    color: #7A8BB5;
    margin-top: var(--sp-xs);
}

.agent-zone-suggestion { border-left-color: #27AE60; background: rgba(39, 174, 96, 0.06); }

.agent-zone-header {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-xs);
}

.agent-zone-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    background: #1A1E2E;
    color: #fff;
}

.agent-zone-rules { margin: var(--sp-xs) 0; padding-left: 18px; font-size: 12px; }
.agent-zone-rules li { margin-bottom: 2px; }
.agent-zone-actions { display: flex; gap: var(--sp-sm); margin-top: var(--sp-sm); }

.agent-law-citation { border-left-color: #E67E22; background: rgba(230, 126, 34, 0.06); }
.agent-citation-header { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-xs); }
.agent-citation-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; background: #E67E22; color: #fff; }
.agent-citation-text { font-size: 12px; line-height: 1.4; font-style: italic; }

.agent-precedent { border-left-color: #6A85FF; background: rgba(106, 133, 255, 0.06); }
.agent-precedent-header { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-xs); }
.agent-precedent-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; background: #6A85FF; color: #fff; }
.agent-precedent-score { margin-left: auto; font-size: 11px; font-weight: 600; color: #27AE60; }

.agent-connecting {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: 13px;
    color: #7A8BB5;
    padding: var(--sp-sm);
}

.agent-dot-pulse { display: inline-flex; gap: 4px; }
.agent-dot-pulse span { width: 6px; height: 6px; border-radius: 50%; background: #4F6CE0; animation: dotPulse 1.2s infinite; }
.agent-dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
.agent-dot-pulse span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------ Team panel */

.team-list { display: flex; flex-direction: column; gap: 8px; }

.team-member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 9px;
    border: 1px solid #E5E8F0;
    margin-bottom: 0;
    transition: background 0.15s;
}

.team-member-row:hover { background: rgba(235, 240, 255, 0.4); }

.team-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4F6CE0, #6A85FF);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.team-member-info { flex: 1; min-width: 0; }
.team-member-name { font-size: 14px; font-weight: 600; color: #1A1E2E; }
.team-member-email { font-size: 12.5px; color: #7A8BB5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-role-select { padding: 4px 8px; font-size: 13px; border: 1px solid rgba(15, 27, 68, 0.15); border-radius: var(--radius-sm); background: white; color: #1A1E2E; }

/* ------------------------------------------------------------------ Version history */

.version-list { display: flex; flex-direction: column; gap: var(--sp-xs); max-height: 250px; overflow-y: auto; }
.version-item { display: flex; align-items: flex-start; gap: var(--sp-sm); padding: var(--sp-xs) 0; font-size: 13px; }
.version-num { font-weight: 600; color: #4F6CE0; flex-shrink: 0; }
.version-detail { color: #7A8BB5; line-height: 1.3; }

/* ------------------------------------------------------------------ Responsive */

@media (max-width: 1024px) {
    .editor-layout { grid-template-columns: 1fr; }
    .editor-sidebar { order: -1; }
}

@media (max-width: 768px) {
    body.maptoo .maptoo-sidebar { display: none; }

    .type-tabs { flex-wrap: wrap; }
    .status-tabs { overflow-x: auto; }
    .projektanta-header { flex-direction: column; align-items: flex-start; gap: var(--sp-sm); }
    .wz-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .editor-header { flex-wrap: wrap; }

    .search-bar { padding: 12px 16px; }
    .project-list { padding: 4px 16px 16px; }
    .projektanta-header { padding: 14px 16px 8px; }
}

/* ============================================================================
   MESSAGES (skrzynka wiadomości)
   ============================================================================ */

/* Sidebar unread badge */
.msg-unread-badge {
    display: inline-block;
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #E74C3C;
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

/* Layout: dwie kolumny (lista + widok) */
.messages-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 0;
    height: calc(100vh - var(--nav-height) - 100px);
    min-height: 500px;
    background: white;
    border: 1px solid rgba(15, 27, 68, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.messages-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(15, 27, 68, 0.08);
    background: #FAFBFE;
}

.messages-filters {
    display: flex;
    gap: 4px;
    padding: 10px;
    border-bottom: 1px solid rgba(15, 27, 68, 0.08);
    background: white;
}

.msg-filter-btn {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #E5E8F0;
    border-radius: 7px;
    background: white;
    color: #4A5578;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 150ms;
}

.msg-filter-btn:hover {
    background: #F5F7FF;
    color: #4F6CE0;
}

.msg-filter-btn.active {
    background: #4F6CE0;
    color: white;
    border-color: #4F6CE0;
}

/* Lista wątków */
.messages-threads-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.msg-thread-item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(15, 27, 68, 0.06);
    cursor: pointer;
    transition: background 120ms;
}

.msg-thread-item:hover { background: #F5F7FF; }

.msg-thread-item.active {
    background: #ECF0FF;
    border-left: 3px solid #4F6CE0;
    padding-left: 13px;
}

.msg-thread-item.unread {
    background: rgba(79, 108, 224, 0.04);
}

.msg-thread-item.unread .msg-thread-subject,
.msg-thread-item.unread .msg-thread-person {
    font-weight: 700;
    color: #1A1E2E;
}

.msg-thread-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.msg-thread-person {
    font-size: 13px;
    font-weight: 600;
    color: #1A1E2E;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-thread-date {
    font-size: 11px;
    color: #7A8BB5;
    flex-shrink: 0;
    margin-left: 8px;
}

.msg-thread-subject {
    font-size: 13.5px;
    color: #1A1E2E;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-thread-snippet {
    font-size: 12px;
    color: #7A8BB5;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.msg-thread-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.msg-case-chip {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(79, 108, 224, 0.1);
    color: #4F6CE0;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.msg-attach-icon {
    font-size: 11px;
    color: #7A8BB5;
}

/* Prawy panel — widok wątku */
.messages-thread-view {
    display: flex;
    flex-direction: column;
    background: white;
}

.thread-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.thread-header {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(15, 27, 68, 0.08);
    background: #FAFBFE;
}

.thread-header h2 {
    font-size: 17px;
    font-weight: 700;
    color: #1A1E2E;
    margin-bottom: 8px;
}

.thread-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.msg-single {
    background: #FAFBFE;
    border: 1px solid rgba(15, 27, 68, 0.08);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}

.msg-single-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
}

.msg-status-pill {
    display: inline-block;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.msg-status-pill.unread {
    background: #4F6CE0;
    color: white;
}

.msg-single-body {
    font-size: 14px;
    color: #1A1E2E;
    line-height: 1.6;
    white-space: pre-wrap;
    margin-bottom: 8px;
}

/* Attachments */
.msg-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 27, 68, 0.06);
}

.msg-attach-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: white;
    border: 1px solid rgba(15, 27, 68, 0.08);
    border-radius: 6px;
    font-size: 12.5px;
}

.msg-attach-name {
    flex: 1;
    color: #1A1E2E;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-attach-size {
    color: #7A8BB5;
    font-size: 11px;
    white-space: nowrap;
}

.msg-attach-download {
    color: #4F6CE0;
    font-weight: 600;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 120ms;
}

.msg-attach-download:hover { background: #F5F7FF; }

/* Reply box */
.thread-reply {
    padding: 12px 24px 16px;
    border-top: 1px solid rgba(15, 27, 68, 0.08);
    background: #FAFBFE;
}

.thread-reply textarea {
    margin-bottom: 8px;
}

.thread-reply-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Compose modal */
.compose-dropzone {
    border: 2px dashed #CBD2E0;
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    color: #7A8BB5;
    font-size: 13px;
    transition: all 150ms;
}

.compose-dropzone:hover,
.compose-dropzone.dragover {
    border-color: #4F6CE0;
    background: #F5F7FF;
    color: #4F6CE0;
}

.compose-attachments-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compose-attach-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #F5F7FF;
    border-radius: 6px;
    font-size: 12.5px;
}

.compose-attach-remove {
    background: none;
    border: none;
    color: #E74C3C;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    font-family: inherit;
}

.compose-attach-remove:hover { color: #C0392B; }

.compose-case-chip {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(79, 108, 224, 0.1);
    color: #4F6CE0;
    font-weight: 700;
    border-radius: 10px;
    font-size: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
    .messages-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
        min-height: 80vh;
    }
    .messages-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(15, 27, 68, 0.08);
        max-height: 300px;
    }
}