/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-2kqggoasz4] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-2kqggoasz4] {
    flex: 1;
    /* Bounded viewport height na WSZYSTKICH szerokościach (nie tylko ≥1300px) — inaczej na tablecie
       (821-1300px) main rósł z treścią i cała strona scrollowała zamiast kontenera wiadomości.
       App-shell: topbar sticky, treść scrolluje wewnątrz. dvh uwzględnia mobilny URL bar. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.content-wrapper[b-2kqggoasz4] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sidebar[b-2kqggoasz4] {
    background: linear-gradient(180deg, #022c32 0%, #1e4c53 100%);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.22s ease, width 0.22s ease, margin-left 0.22s ease;
    /* Cienki, wtopiony scrollbar zamiast grubego systemowego (na ciemnym tle wygladal brzydko).
       Firefox: scrollbar-width/color; WebKit: pseudo-elementy nizej. Thumb = pojawia sie na hover. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.sidebar[b-2kqggoasz4]::-webkit-scrollbar {
    width: 8px;
}
.sidebar[b-2kqggoasz4]::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar[b-2kqggoasz4]::-webkit-scrollbar-thumb {
    /* border+background-clip daje wrazenie waskiego paska z odstepem od krawedzi */
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.sidebar:hover[b-2kqggoasz4]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    background-clip: content-box;
}
.sidebar[b-2kqggoasz4]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.42);
    background-clip: content-box;
}

.sidebar-backdrop[b-2kqggoasz4] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index: 90;
}

#blazor-error-ui[b-2kqggoasz4] {
    color-scheme: light only;
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-2kqggoasz4] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ─── Desktop (>=1300px): sidebar inline, default VISIBLE.
       Optional class `sidebar-collapsed` (persisted in localStorage) hides it. ─── */
@media (min-width: 1300px) {
    .page[b-2kqggoasz4] {
        flex-direction: row;
        min-height: 100vh;
    }
    .sidebar[b-2kqggoasz4] {
        width: 230px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    main[b-2kqggoasz4] {
        flex: 1;
        min-width: 0;
        max-width: calc(100vw - 230px);
        overflow-x: hidden;
        height: 100vh;
        overflow-y: auto;
    }
    .page.sidebar-collapsed .sidebar[b-2kqggoasz4] {
        margin-left: -230px;
    }
    .page.sidebar-collapsed main[b-2kqggoasz4] {
        max-width: 100vw;
    }
}

/* ─── Mobile/Tablet (<1300px): sidebar HIDDEN by default (overlay drawer).
       Optional class `sidebar-open-mobile` shows it with backdrop.
       Default-without-class = sensible state, so JS render timing doesn't matter. ─── */
@media (max-width: 1299.98px) {
    .page[b-2kqggoasz4] {
        flex-direction: column;
        /* height (NIE min-height) — .page ograniczone do viewportu, żeby main (flex:1) wypełnił ekran
           i scrollował WEWNĄTRZ (app-shell). Z min-height .page rosło z treścią → cała strona scrollowała,
           a lista wiadomości nie miała własnego scrolla. dvh uwzglednia mobilny URL bar. */
        height: 100vh;
        height: 100dvh;
    }
    .sidebar[b-2kqggoasz4] {
        position: fixed;
        top: 0; left: 0;
        width: 260px;
        height: 100vh;       /* fallback dla starych przeglądarek */
        height: 100dvh;      /* nowoczesne — uwzglednia mobile URL bar */
        z-index: 100;
        transform: translateX(-100%);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    .page.sidebar-open-mobile .sidebar[b-2kqggoasz4] {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }
    .page.sidebar-open-mobile .sidebar-backdrop[b-2kqggoasz4] {
        display: block;
    }
    main[b-2kqggoasz4] {
        flex: 1;
        min-width: 0;
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* Old toggler (Bootstrap-clone in NavMenu) — hidden, replaced by topbar hamburger */
[b-2kqggoasz4] .navbar-toggler { display: none !important; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-9lrca5jz97] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    z-index: 2;
}
.navbar-toggler:hover[b-9lrca5jz97] {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}
.navbar-toggler:checked[b-9lrca5jz97] {
    background-color: rgba(0, 146, 68, 0.3);
    border-color: #009244;
}

.top-row[b-9lrca5jz97] {
    min-height: 3.5rem;
    background: linear-gradient(135deg, #022c32 0%, #1e4c53 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-bottom: 2px solid #009244;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
}

.navbar-brand[b-9lrca5jz97] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.navbar-brand:hover[b-9lrca5jz97] { color: #c1d11c !important; transform: translateX(2px); }
.brand-icon[b-9lrca5jz97] {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    flex-shrink: 0;
}

.bi[b-9lrca5jz97] {
    display: inline-block;
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.7rem;
    top: -1px;
    background-size: cover;
    flex-shrink: 0;
}

.bi-house-nav-menu[b-9lrca5jz97]       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); }
.bi-list-nav-menu[b-9lrca5jz97]        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E"); }
.bi-download-nav-menu[b-9lrca5jz97]    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z'/%3E%3C/svg%3E"); }
.bi-clock-nav-menu[b-9lrca5jz97]       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E"); }
.bi-person-add-nav-menu[b-9lrca5jz97]  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zM13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E"); }
.bi-people-nav-menu[b-9lrca5jz97]      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E"); }
.bi-grid-nav-menu[b-9lrca5jz97]        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E"); }
.bi-graph-nav-menu[b-9lrca5jz97]       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z'/%3E%3C/svg%3E"); }
.bi-shield-nav-menu[b-9lrca5jz97]      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3C/svg%3E"); }
.bi-logout-nav-menu[b-9lrca5jz97]      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/%3E%3C/svg%3E"); }
.bi-person-fill-nav-menu[b-9lrca5jz97] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E"); }

.nav-section-header[b-9lrca5jz97] {
    color: #8b9aab;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.7rem 1rem 0.25rem;
    margin: 0;
}

.nav-item[b-9lrca5jz97] {
    font-size: 0.92rem;
    padding: 0 0.5rem;
}

.nav-item[b-9lrca5jz97]  .nav-link {
    color: #EDF2F7;
    background: none;
    border: none;
    border-radius: 8px;
    height: 2.4rem;
    display: flex;
    align-items: center;
    line-height: 1.2;
    width: 100%;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    padding: 0 0.75rem;
}
.nav-item[b-9lrca5jz97]  .nav-link::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    height: 100%; width: 0;
    background: linear-gradient(90deg, #009244 0%, #c1d11c 100%);
    transition: width 0.3s ease;
    border-radius: 8px 0 0 8px;
}
.nav-item[b-9lrca5jz97]  .nav-link:hover::before { width: 4px; }
.nav-item[b-9lrca5jz97]  a.active {
    background: linear-gradient(90deg, rgba(0,146,68,0.18) 0%, rgba(193,209,28,0.10) 100%);
    color: #c1d11c;
    font-weight: 600;
    border-left: 4px solid #009244;
}
.nav-item[b-9lrca5jz97]  a.active .bi { transform: scale(1.1); }
.nav-item[b-9lrca5jz97]  .nav-link:hover {
    background-color: rgba(255,255,255,0.08);
    color: #ffffff;
}

.nav-item[b-9lrca5jz97]  button.nav-link {
    cursor: pointer;
    text-align: left;
}

.nav-scrollable[b-9lrca5jz97] {
    display: none;
    background: linear-gradient(180deg, #111317 0%, #1e4c53 100%);
    flex: 1;
    overflow-y: auto;
}

.navbar-toggler:checked ~ .nav-scrollable[b-9lrca5jz97] { display: block; }

@media (min-width: 641px) {
    .navbar-toggler[b-9lrca5jz97] { display: none; }
    .nav-scrollable[b-9lrca5jz97] {
        display: flex;
        flex-direction: column;
        height: auto;
        flex: 1;
        overflow-y: auto;
        background: transparent;
    }
}

.user-card[b-9lrca5jz97] {
    margin-top: auto;
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.user-card .user-name[b-9lrca5jz97] { color: #c1d11c; font-weight: 600; }
.user-card .user-role[b-9lrca5jz97] { color: rgba(255,255,255,0.55); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ─── ABCare-specific sidebar elements ─── */
.sidebar-brand[b-9lrca5jz97] {
    min-height: 3.5rem;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(135deg, #022c32 0%, #1e4c53 100%);
    border-bottom: 2px solid #009244;
    flex: none;
}
.sidebar-brand .logo-mark[b-9lrca5jz97] {
    width: 30px;
    height: 30px;
    background: #13211a;
    border-radius: 7px;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    flex: none;
}
.sidebar-brand .logo-mark svg[b-9lrca5jz97] {
    width: 18px;
    height: 18px;
}
.sidebar-brand .brand-text[b-9lrca5jz97] {
    font-family: 'Instrument Serif', serif;
    font-size: 1.35rem;
    color: #fff;
    letter-spacing: -0.01em;
}
.sidebar-brand .brand-text em[b-9lrca5jz97] {
    color: #c1d11c;
    font-style: italic;
}

/* Close (X) button — visible only on mobile/tablet drawer */
.sidebar-close[b-9lrca5jz97] {
    margin-left: auto;
    width: 36px; height: 36px;
    display: none;
    place-items: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.sidebar-close:hover[b-9lrca5jz97] { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-close svg[b-9lrca5jz97] {
    width: 20px; height: 20px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 1299.98px) {
    .sidebar-close[b-9lrca5jz97] { display: grid; }
}

.tenant-switcher[b-9lrca5jz97] {
    margin: 0.75rem 1rem 0.5rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12.5px;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
.tenant-switcher:hover[b-9lrca5jz97] {
    background: rgba(255, 255, 255, 0.10);
}
.tenant-switcher .ts-avatar[b-9lrca5jz97] {
    width: 22px;
    height: 22px;
    background: #c1d11c;
    color: #022c32;
    border-radius: 4px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 10.5px;
    flex: none;
}
.tenant-switcher .ts-name[b-9lrca5jz97] {
    flex: 1;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tenant-switcher .ts-chevron[b-9lrca5jz97] {
    opacity: 0.5;
    font-size: 11px;
}

.nav-section[b-9lrca5jz97] {
    padding: 0.75rem 0.65rem 0.25rem;
}
.nav-section-label[b-9lrca5jz97] {
    padding: 0.25rem 0.7rem 0.5rem;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}

.nav-section[b-9lrca5jz97]  .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    margin: 1px 0;
    height: 2.2rem;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.18s;
}
.nav-section[b-9lrca5jz97]  .nav-link::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    height: 100%; width: 0;
    background: linear-gradient(90deg, #009244 0%, #c1d11c 100%);
    transition: width 0.25s;
    border-radius: 6px 0 0 6px;
}
.nav-section[b-9lrca5jz97]  .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}
.nav-section[b-9lrca5jz97]  .nav-link:hover::before {
    width: 3px;
}
.nav-section[b-9lrca5jz97]  .nav-link.active {
    background: linear-gradient(90deg, rgba(0, 146, 68, 0.22) 0%, rgba(193, 209, 28, 0.06) 100%);
    color: #c1d11c;
    font-weight: 500;
}
.nav-section[b-9lrca5jz97]  .nav-link.active::before {
    width: 4px;
}

/* ─── Inline SVG icons w nav-link (zamiast bi-* classes z hardcoded ikona) ─── */
.nav-section[b-9lrca5jz97]  .nav-link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

/* ─── Collapsible nav section (HTML <details>) ─── */
.nav-collapsible[b-9lrca5jz97] {
    padding: 0;
    margin: 0.5rem 0.65rem;
}
.nav-collapsible[open][b-9lrca5jz97] { padding-bottom: 0.5rem; }
.nav-section-summary[b-9lrca5jz97] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    list-style: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}
.nav-section-summary[b-9lrca5jz97]::-webkit-details-marker { display: none; }
.nav-section-summary:hover[b-9lrca5jz97] {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
}
.nav-section-icon[b-9lrca5jz97] {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nav-section-chev[b-9lrca5jz97] {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    margin-left: auto;
    transition: transform 0.2s;
}
.nav-collapsible[open] .nav-section-chev[b-9lrca5jz97] {
    transform: rotate(180deg);
}
.nav-section-body[b-9lrca5jz97] {
    padding-top: 0.25rem;
}

.nav-account[b-9lrca5jz97] {
    margin-top: auto;
    padding: 0.75rem 0.65rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* Sticky bottom — bez tego na mobile gdy menu jest dluzsze niż viewport,
       nav-account schowane na dole listy i user musi scrollowac. Sticky przykleja
       avatar+logout zawsze widoczne nad scroll content. */
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg,
                                color-mix(in srgb, var(--p4) 0%, transparent) 0%,
                                var(--p4) 35%,
                                var(--p4) 100%);
    backdrop-filter: blur(4px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.nav-account[b-9lrca5jz97]  .nav-user {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    min-width: 0;
    transition: background 0.15s;
}
.nav-account[b-9lrca5jz97]  .nav-user:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.nav-account .user-avatar[b-9lrca5jz97] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8a4c, #c4392f);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 11px;
    flex: none;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.1);
}
.nav-account .user-line[b-9lrca5jz97] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.nav-account .user-name[b-9lrca5jz97] {
    font-size: 12.5px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-account .user-line small[b-9lrca5jz97] {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1px;
}
.abc-theme-toggle[b-9lrca5jz97] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    flex: none;
    font-size: 16px;
    line-height: 1;
}
.abc-theme-toggle:hover[b-9lrca5jz97] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.abc-theme-toggle .abc-theme-label[b-9lrca5jz97] { display: none; }  /* tylko ikona w sidebar */
.abc-theme-toggle .abc-theme-icon-light[b-9lrca5jz97],
.abc-theme-toggle .abc-theme-icon-dark[b-9lrca5jz97] {
    line-height: 1;
}

.logout-form[b-9lrca5jz97] {
    margin: 0;
}
.logout-btn[b-9lrca5jz97] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    flex: none;
}
.logout-btn:hover[b-9lrca5jz97] {
    background: rgba(196, 57, 47, 0.18);
    color: #ff8a8a;
}
.logout-btn .bi[b-9lrca5jz97] {
    margin: 0;
}

/* ─── Tenant dropdown (HTML <details>) ─── */
.tenant-switcher-wrap[b-9lrca5jz97] {
    margin: 0.75rem 1rem 0.5rem;
    position: relative;
}
.tenant-switcher-wrap[open] > summary .ts-chevron[b-9lrca5jz97] { transform: rotate(180deg); }
.tenant-switcher-wrap > summary[b-9lrca5jz97] {
    list-style: none;
    cursor: pointer;
}
.tenant-switcher-wrap > summary[b-9lrca5jz97]::-webkit-details-marker { display: none; }
.tenant-switcher-wrap > .tenant-switcher[b-9lrca5jz97] {
    margin: 0;
    width: 100%;
}
.tenant-switcher-wrap > .tenant-switcher .ts-chevron[b-9lrca5jz97] {
    transition: transform 0.2s;
    display: inline-block;
}
.tenant-switcher.tenant-static[b-9lrca5jz97] {
    cursor: default;
}
.tenant-switcher.tenant-static:hover[b-9lrca5jz97] {
    background: rgba(255, 255, 255, 0.06);
}

/* __support panel obsługi context card — kompaktowy info-block + CTA do /support/tenants.
   Zastępuje sytuacyjny .tenant-switcher dla supportu (długie nazwy klientów łamały się
   w pojedynczym horizontal chip). */
.support-context-card[b-9lrca5jz97] {
    margin: 0.75rem 1rem 0.5rem;
    padding: 0.65rem 0.8rem 0.7rem;
    background: linear-gradient(180deg, rgba(193, 209, 28, 0.10), rgba(193, 209, 28, 0.03));
    border: 1px solid rgba(193, 209, 28, 0.30);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.support-context-card .scc-label[b-9lrca5jz97] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c1d11c;
    opacity: 0.85;
}
.support-context-card .scc-tenant[b-9lrca5jz97] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.support-context-card .scc-tenant-avatar[b-9lrca5jz97] {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: #c1d11c;
    color: #022c32;
    font-weight: 700;
    font-size: 10.5px;
    display: grid;
    place-items: center;
}
.support-context-card .scc-tenant-name[b-9lrca5jz97] {
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.support-context-card .scc-cta[b-9lrca5jz97] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    border-radius: 5px;
    background: rgba(193, 209, 28, 0.14);
    border: 1px solid rgba(193, 209, 28, 0.35);
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}
.support-context-card .scc-cta:hover[b-9lrca5jz97] {
    background: rgba(193, 209, 28, 0.25);
    border-color: rgba(193, 209, 28, 0.55);
    text-decoration: none;
}
.support-context-card .scc-cta svg[b-9lrca5jz97] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex: none;
}
.support-context-card .scc-cta span[b-9lrca5jz97] {
    flex: 1;
}
.support-context-card .scc-cta strong[b-9lrca5jz97] {
    color: #c1d11c;
    font-weight: 600;
}
.support-context-card .scc-cta .scc-arrow[b-9lrca5jz97] {
    opacity: 0.7;
}

.tenant-dropdown[b-9lrca5jz97] {
    margin-top: 0.35rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tenant-dropdown-form[b-9lrca5jz97] { margin: 0; }
.tenant-dropdown-item[b-9lrca5jz97] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
    transition: all 0.12s;
}
.tenant-dropdown-item:hover[b-9lrca5jz97] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.tenant-dropdown-item.active[b-9lrca5jz97] {
    background: linear-gradient(90deg, rgba(0, 146, 68, 0.22) 0%, rgba(193, 209, 28, 0.06) 100%);
    color: #c1d11c;
    font-weight: 500;
}
.tenant-dropdown-item .td-avatar[b-9lrca5jz97] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #c1d11c;
    color: #022c32;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 9px;
    flex: none;
}
.tenant-dropdown-item .td-name[b-9lrca5jz97] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tenant-dropdown-item .td-check[b-9lrca5jz97] {
    color: #c1d11c;
    font-size: 13px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Ukryte stany — pokazane warunkowo gdy modal ma odpowiednią klasę. */
.abc-reconnect-first-attempt-visible[b-ebu9s7um9j],
.abc-reconnect-retrying-visible[b-ebu9s7um9j],
.abc-reconnect-failed-visible[b-ebu9s7um9j],
.abc-reconnect-paused-visible[b-ebu9s7um9j],
.abc-reconnect-resume-failed-visible[b-ebu9s7um9j],
.abc-reconnect-show-while-trying[b-ebu9s7um9j] {
    display: none;
}

#components-reconnect-modal[b-ebu9s7um9j] {
    /* Domyślnie schowany — pokazuje się tylko gdy ma klasę state. */
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    max-width: 360px;
    min-width: 280px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    pointer-events: auto;
}

@media (max-width: 480px) {
    #components-reconnect-modal[b-ebu9s7um9j] {
        left: 0.75rem;
        right: 0.75rem;
        max-width: none;
    }
}

#components-reconnect-modal.components-reconnect-show[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-retrying[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-failed[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-paused[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-resume-failed[b-ebu9s7um9j] {
    display: block;
    animation: abc-reconnect-slide-in-b-ebu9s7um9j 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Per-state visibility */
#components-reconnect-modal.components-reconnect-show .abc-reconnect-first-attempt-visible[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-show .abc-reconnect-show-while-trying[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-retrying .abc-reconnect-retrying-visible[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-retrying .abc-reconnect-show-while-trying[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-failed .abc-reconnect-failed-visible[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-paused .abc-reconnect-paused-visible[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-resume-failed .abc-reconnect-resume-failed-visible[b-ebu9s7um9j] {
    display: inline-block;
}

.abc-reconnect-card[b-ebu9s7um9j] {
    background: white;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--global-palette1, #009244);
}

#components-reconnect-modal.components-reconnect-failed .abc-reconnect-card[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-resume-failed .abc-reconnect-card[b-ebu9s7um9j] {
    border-left-color: #dc3545;
}

.abc-reconnect-row[b-ebu9s7um9j] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.abc-reconnect-spinner[b-ebu9s7um9j] {
    width: 18px;
    height: 18px;
    border: 2px solid #d0d6cf;
    border-top-color: var(--global-palette1, #009244);
    border-radius: 50%;
    animation: abc-reconnect-spin-b-ebu9s7um9j 0.9s linear infinite;
    flex-shrink: 0;
    margin-top: 2px;
}

#components-reconnect-modal.components-reconnect-failed .abc-reconnect-spinner[b-ebu9s7um9j],
#components-reconnect-modal.components-reconnect-resume-failed .abc-reconnect-spinner[b-ebu9s7um9j] {
    border: 2px solid #f4d0d3;
    border-top-color: #dc3545;
    animation: none;
}

.abc-reconnect-text[b-ebu9s7um9j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.abc-reconnect-text strong[b-ebu9s7um9j] {
    font-size: 13.5px;
    color: var(--global-palette3, #111317);
    font-weight: 600;
    line-height: 1.3;
}

.abc-reconnect-hint[b-ebu9s7um9j] {
    font-size: 11.5px;
    color: var(--text-faint, #6b6b66);
    line-height: 1.35;
}

.abc-reconnect-actions[b-ebu9s7um9j] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.7rem;
    flex-wrap: wrap;
}

.abc-reconnect-btn[b-ebu9s7um9j] {
    border: 0;
    background: var(--global-palette1, #009244);
    color: white;
    padding: 0.4rem 0.85rem;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.abc-reconnect-btn:hover[b-ebu9s7um9j] { filter: brightness(0.95); }
.abc-reconnect-btn:active[b-ebu9s7um9j] { filter: brightness(0.88); }

.abc-reconnect-btn-ghost[b-ebu9s7um9j] {
    background: transparent;
    color: var(--text-soft, #4a6a6e);
    border: 1px solid var(--line, #e0e0d8);
}

@keyframes abc-reconnect-slide-in-b-ebu9s7um9j {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes abc-reconnect-spin-b-ebu9s7um9j {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Admin/Reliability.razor.rz.scp.css */
/* Panel niezawodności automatyzacji — kafelki podsumowania + badge stanu. Styl editorial-utility. */
.rel-summary[b-m8wpopiixv] {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}
.rel-stat[b-m8wpopiixv] {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.rel-stat.danger[b-m8wpopiixv] { border-color: var(--danger); }
.rel-stat.warn[b-m8wpopiixv] { border-color: var(--warn, #b8730a); }
.rel-num[b-m8wpopiixv] { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--text); }
.rel-stat.danger .rel-num[b-m8wpopiixv] { color: var(--danger); }
.rel-stat.warn .rel-num[b-m8wpopiixv] { color: var(--warn, #b8730a); }
.rel-lbl[b-m8wpopiixv] { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }

.rel-badge[b-m8wpopiixv] {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.rel-badge.s-dead[b-m8wpopiixv] { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); }
.rel-badge.s-failed[b-m8wpopiixv] { background: var(--warn-bg, #fbedd8); color: var(--warn, #b8730a); }
.rel-badge.s-proc[b-m8wpopiixv] { background: var(--cream-2); color: var(--text-soft); }
.rel-badge.s-retry[b-m8wpopiixv] { background: var(--ok-bg); color: var(--p1); }
/* /Components/Pages/Board/BoardPage.razor.rz.scp.css */
.board-content[b-hygwa6x821] {
    max-width: none;
}

.board-head[b-hygwa6x821] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

/* ── Segmented control (Zgłoszenia / Zadania) ── */
.seg[b-hygwa6x821] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    flex: 0 0 auto;
}

.seg-btn[b-hygwa6x821] {
    height: 30px;
    padding: 0 0.95rem;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-soft);
    white-space: nowrap;
    transition: color 0.14s, background 0.14s, box-shadow 0.14s;
}

.seg-btn:hover[b-hygwa6x821] {
    color: var(--text);
}

.seg-on[b-hygwa6x821] {
    background: var(--paper);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
}

.board-empty[b-hygwa6x821] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 14px;
}

/* Karty tablicy (ticket + zadanie) wyekstrahowane do współdzielonych komponentów
   TicketBoardCard / TaskBoardCard — style .bcard* żyją tam (scoped razem z kartą,
   żeby działały też w Skrzynce i Zadaniach). */
/* /Components/Pages/Chat/ChatPage.razor.rz.scp.css */
.chat-shell[b-0bdv1kcinw] {
    display: grid;
    grid-template-columns: 288px 1fr;
    height: calc(100vh - var(--topbar-h, 3.5rem));
    height: calc(100dvh - var(--topbar-h, 3.5rem));
    overflow: hidden;
}

/* ─── Rail ─── */
.chat-rail[b-0bdv1kcinw] {
    border-right: 1px solid var(--line);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rail-head[b-0bdv1kcinw] {
    padding: 1rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--line);
}
.rail-title h1[b-0bdv1kcinw] {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}
.rail-title h1 em[b-0bdv1kcinw] { font-style: italic; color: var(--p1); }

.rail-scroll[b-0bdv1kcinw] { flex: 1; overflow-y: auto; padding: 0.5rem 0.5rem 1.5rem; }
.rail-section[b-0bdv1kcinw] { margin-top: 0.5rem; }
.rail-section-head[b-0bdv1kcinw] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0.6rem 0.3rem;
}
.rail-section-head .label[b-0bdv1kcinw] {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-faint);
}
.rail-section-head .add[b-0bdv1kcinw] {
    width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px;
    color: var(--text-faint); background: none; border: none; cursor: pointer; transition: all 0.12s;
}
.rail-section-head .add:hover[b-0bdv1kcinw] { background: var(--cream-2); color: var(--p1); }
.rail-section-head .add svg[b-0bdv1kcinw] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.rail-empty[b-0bdv1kcinw] { font-size: 12px; color: var(--text-faint); padding: 0.3rem 0.6rem 0.5rem; line-height: 1.5; }

.rail-item[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.42rem 0.6rem; margin: 1px 0;
    border-radius: var(--radius-sm);
    cursor: pointer; position: relative;
    color: var(--text-soft);
    transition: background 0.12s, color 0.12s;
}
.rail-item:hover[b-0bdv1kcinw] { background: var(--cream-2); }
.rail-item.active[b-0bdv1kcinw] { background: color-mix(in srgb, var(--p1) 9%, var(--cream-2)); color: var(--text); }
.rail-item.active[b-0bdv1kcinw]::before {
    content: ''; position: absolute; left: -0.5rem; top: 6px; bottom: 6px; width: 3px;
    background: var(--p1); border-radius: 0 3px 3px 0;
}
.rail-item .hash[b-0bdv1kcinw] { font-family: 'Geist Mono', monospace; color: var(--text-faint); font-size: 14px; width: 16px; text-align: center; flex: none; }
.rail-item.active .hash[b-0bdv1kcinw] { color: var(--p1); }
.rail-item .nm[b-0bdv1kcinw] { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item.unread[b-0bdv1kcinw] { color: var(--text); }
.rail-item.unread .nm[b-0bdv1kcinw] { font-weight: 600; }
.rail-badge[b-0bdv1kcinw] {
    font-family: 'Geist Mono', monospace; font-size: 10.5px; font-weight: 600;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--p1); color: #fff; flex: none;
}
.rail-item.browse[b-0bdv1kcinw] { color: var(--text-faint); }
.rail-item.browse:hover .rail-join[b-0bdv1kcinw] { opacity: 1; }
.rail-join[b-0bdv1kcinw] {
    margin-left: auto; font-size: 11px; font-weight: 600; color: var(--p1);
    background: none; border: none; cursor: pointer; opacity: 0.7; transition: opacity 0.12s; flex: none;
}
.rail-join:hover[b-0bdv1kcinw] { text-decoration: underline; }

/* ─── Stream ─── */
.chat-main[b-0bdv1kcinw] { display: flex; flex-direction: column; overflow: hidden; background: var(--cream); min-width: 0; }

.chat-blank[b-0bdv1kcinw] {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem; gap: 0.3rem;
}
.chat-blank svg[b-0bdv1kcinw] { width: 44px; height: 44px; stroke: var(--line-strong); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.5rem; }
.chat-blank-title[b-0bdv1kcinw] { font-family: 'Instrument Serif', serif; font-size: 1.5rem; color: var(--text); }
.chat-blank-sub[b-0bdv1kcinw] { font-size: 13px; color: var(--text-faint); max-width: 320px; line-height: 1.55; }

.chat-header[b-0bdv1kcinw] {
    height: 3.4rem; flex: none; padding: 0 1.25rem;
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
}
.h-title[b-0bdv1kcinw] { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.h-hash[b-0bdv1kcinw] { font-family: 'Geist Mono', monospace; color: var(--text-faint); font-size: 1.1rem; }
.h-name[b-0bdv1kcinw] { font-family: 'Instrument Serif', serif; font-size: 1.4rem; line-height: 1; color: var(--text); }
.h-topic[b-0bdv1kcinw] {
    font-size: 12.5px; color: var(--text-soft);
    padding-left: 0.75rem; border-left: 1px solid var(--line);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h-right[b-0bdv1kcinw] { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.h-online[b-0bdv1kcinw] { font-size: 11.5px; color: var(--text-soft); }

.stream[b-0bdv1kcinw] { flex: 1; overflow-y: auto; padding: 1rem 1.5rem 0.5rem; }
.stream-info[b-0bdv1kcinw] { font-size: 12.5px; color: var(--text-faint); text-align: center; padding: 1.5rem 1rem; }

.msg-group[b-0bdv1kcinw] { display: flex; gap: 0.7rem; padding: 0.15rem 0; margin-top: 0.6rem; }
.msg-group .g-ava[b-0bdv1kcinw] { flex: none; margin-top: 2px; width: 36px; height: 36px; font-size: 13px; }
.msg-group .g-body[b-0bdv1kcinw] { flex: 1; min-width: 0; }
.msg-group .g-head[b-0bdv1kcinw] { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1px; }
.msg-group .g-author[b-0bdv1kcinw] { font-size: 13px; font-weight: 600; color: var(--text); }
.msg-group .g-author.me[b-0bdv1kcinw] { color: var(--p1); }
.msg-group .g-time[b-0bdv1kcinw] { font-size: 10px; color: var(--text-faint); }
.msg-line[b-0bdv1kcinw] { padding: 1px 0; border-radius: 5px; }
.msg-line .txt[b-0bdv1kcinw] { font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-wrap: break-word; }

/* ─── Composer ─── */
.composer-wrap[b-0bdv1kcinw] { flex: none; padding: 0.4rem 1.5rem 1rem; }
.composer[b-0bdv1kcinw] {
    border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
    background: var(--paper); box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.composer:focus-within[b-0bdv1kcinw] { border-color: var(--p1); box-shadow: 0 0 0 3px rgba(1,147,68,0.1); }
.composer textarea[b-0bdv1kcinw] {
    width: 100%; border: none; background: none; resize: none;
    font-family: inherit; font-size: 13.5px; color: var(--text);
    padding: 0.7rem 0.85rem 0.3rem; min-height: 2.4rem; max-height: 12rem;
}
.composer textarea:focus[b-0bdv1kcinw] { outline: none; }
.composer textarea[b-0bdv1kcinw]::placeholder { color: var(--text-faint); }
.composer-bar[b-0bdv1kcinw] { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem 0.45rem; }
.composer-bar .spacer[b-0bdv1kcinw] { flex: 1; }
.composer-bar .hint[b-0bdv1kcinw] { font-size: 10.5px; color: var(--text-soft); }
.composer-bar .hint kbd[b-0bdv1kcinw] { font-family: 'Geist Mono', monospace; color: var(--text); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 4px; font-size: 10px; }
.send-btn[b-0bdv1kcinw] { height: 30px; padding: 0 0.9rem; }

/* ─── Create channel modal ─── */
.chat-create[b-0bdv1kcinw] { max-width: 460px; width: 100%; display: flex; flex-direction: column; }
.chat-create-head[b-0bdv1kcinw] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; background: var(--cream); border-bottom: 1px solid var(--line);
}
.chat-create-title[b-0bdv1kcinw] { margin: 0; font-family: 'Instrument Serif', serif; font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--text); }
.chat-create-head .modal-close[b-0bdv1kcinw] {
    width: 30px; height: 30px; border-radius: 8px; background: transparent; color: var(--text-soft);
    display: grid; place-items: center; border: none; cursor: pointer; transition: all 0.14s;
}
.chat-create-head .modal-close:hover[b-0bdv1kcinw] { background: var(--danger-bg); color: var(--danger); }
.chat-create-head .modal-close svg[b-0bdv1kcinw] { width: 18px; height: 18px; }
.chat-create-body[b-0bdv1kcinw] { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem; }
.chat-create-label[b-0bdv1kcinw] { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); margin: 0.5rem 0 0.1rem; }
.chat-create-label:first-child[b-0bdv1kcinw] { margin-top: 0; }
.chat-create-err[b-0bdv1kcinw] { align-self: flex-start; margin-top: 0.5rem; }
.chat-create-foot[b-0bdv1kcinw] { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--line); }
.chat-create-foot .spacer[b-0bdv1kcinw] { flex: 1; }

/* ─── DM avatar w railu / nagłówku ─── */
.rail-item.rail-dm .dm-ava[b-0bdv1kcinw] { width: 22px; height: 22px; font-size: 9px; flex: none; border: none; box-shadow: none; }
.rail-item.rail-dm .nm[b-0bdv1kcinw] { margin-left: 0; }
.rail-item.rail-dm.active[b-0bdv1kcinw]::before { top: 4px; bottom: 4px; }
.h-title .h-dm-ava[b-0bdv1kcinw] { width: 26px; height: 26px; font-size: 10px; border: none; box-shadow: none; margin-right: 0.1rem; }

/* ─── Segmented (widoczność kanału) ─── */
.seg[b-0bdv1kcinw] { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px; align-self: flex-start; }
.seg-btn[b-0bdv1kcinw] { height: 28px; padding: 0 0.85rem; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--text-soft); background: none; border: none; cursor: pointer; transition: all 0.14s; }
.seg-btn:hover[b-0bdv1kcinw] { color: var(--text); }
.seg-on[b-0bdv1kcinw] { background: var(--paper); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }

/* ─── Picker osób (DM / członkowie prywatnego) ─── */
.member-picker[b-0bdv1kcinw] { display: flex; flex-direction: column; gap: 1px; max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.25rem; margin-top: 0.15rem; }
.member-picker.tall[b-0bdv1kcinw] { max-height: 320px; }
.member-row[b-0bdv1kcinw] { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); cursor: pointer; width: 100%; text-align: left; background: none; border: none; font: inherit; color: var(--text); transition: background 0.12s; }
.member-row:hover[b-0bdv1kcinw] { background: var(--cream-2); }
.member-row input[type=checkbox][b-0bdv1kcinw] { accent-color: var(--p1); width: 15px; height: 15px; }
.member-ava[b-0bdv1kcinw] { width: 26px; height: 26px; font-size: 10px; border: none; box-shadow: none; flex: none; }
.member-name[b-0bdv1kcinw] { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Mobile ─── */
@media (max-width: 900px) {
    .chat-shell[b-0bdv1kcinw] { grid-template-columns: 1fr; }
    /* Gdy kanał wybrany — pokaż stream, ukryj rail; gdy nie — rail. Sterowane klasą na przyszłość;
       MVP: rail zawsze widoczny, stream pod nim (scroll). */
    .chat-rail[b-0bdv1kcinw] { max-height: 40vh; }
}
/* /Components/Pages/Clients/BillingPage.razor.rz.scp.css */
/* Do rozliczenia → rejestracja faktury. Scoped CSS. */

.bl-toolbar[b-a0dmd6lwq8] {
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.bl-field[b-a0dmd6lwq8] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.bl-field label[b-a0dmd6lwq8] { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.bl-field select[b-a0dmd6lwq8] { min-width: 14rem; }
.bl-spacer[b-a0dmd6lwq8] { flex: 1; }

.bl-total[b-a0dmd6lwq8] { text-align: right; }
.bl-total-h[b-a0dmd6lwq8] { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.bl-total-l[b-a0dmd6lwq8] { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }

/* ── Grupy kontrahentów ── */

.bl-group[b-a0dmd6lwq8] { margin-bottom: 0.9rem; }

.bl-group-head[b-a0dmd6lwq8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.bl-check[b-a0dmd6lwq8] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 13.5px; }
.bl-group-sum[b-a0dmd6lwq8] { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }

.bl-table[b-a0dmd6lwq8] { font-size: 12.5px; }
.bl-row.picked[b-a0dmd6lwq8] { background: var(--cream); }
.bl-engagement[b-a0dmd6lwq8] { font-size: 11px; color: var(--text-faint); margin-left: 0.4rem; }

/* ── Pasek zaznaczenia ── */

.bl-selection[b-a0dmd6lwq8] {
    position: sticky;
    bottom: 0.8rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    background: var(--paper);
    border: 1px solid var(--line-strong, var(--line));
    border-left: 3px solid var(--p1);
    border-radius: 10px;
    box-shadow: var(--shadow-md, var(--shadow-sm));
    font-size: 13px;
}

.bl-selection .mono[b-a0dmd6lwq8] { font-variant-numeric: tabular-nums; }

/* ── Faktury ── */

.bl-invoices-head[b-a0dmd6lwq8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}

.bl-section-title[b-a0dmd6lwq8] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-soft);
    margin: 0;
}

.bl-summary[b-a0dmd6lwq8] {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 6px;
    font-size: 12.5px;
}

@media (max-width: 760px) {
    .bl-field select[b-a0dmd6lwq8] { min-width: 0; width: 100%; }
    .bl-field[b-a0dmd6lwq8] { width: 100%; }
}
/* /Components/Pages/Clients/ClientCardPage.razor.rz.scp.css */
/* Karta kontrahenta — układ dwukolumnowy (fakty/osoby/reguły | oś czasu poczty).
   Scoped CSS: działa wyłącznie w tym komponencie. */

.client-card-grid[b-albimi99e9] {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Grid items domyślnie mają min-width: auto — bez tego długi temat rozpycha kolumnę
   i ellipsis nigdy się nie odpala. */
.client-card-grid > *[b-albimi99e9] {
    min-width: 0;
}

@media (max-width: 900px) {
    .client-card-grid[b-albimi99e9] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.section-title[b-albimi99e9] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-soft);
    margin: 0 0 0.7rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.fact-list[b-albimi99e9] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.8rem;
    margin: 0;
    font-size: 12.5px;
}

.fact-list dt[b-albimi99e9] {
    color: var(--text-faint);
}

.fact-list dd[b-albimi99e9] {
    margin: 0;
    text-align: right;
}

.plain-list[b-albimi99e9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.plain-list li[b-albimi99e9] {
    min-width: 0;
}

.person-name[b-albimi99e9] {
    display: block;
    font-size: 13px;
    font-weight: 500;
}

.person-meta[b-albimi99e9] {
    display: block;
    font-size: 11px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rule-row[b-albimi99e9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12.5px;
}

/* Wykonana praca — ostatnie wpisy czasu */
.work-row[b-albimi99e9] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 12px;
    min-width: 0;
}

.work-time[b-albimi99e9] { font-weight: 600; white-space: nowrap; min-width: 3.6rem; }

.work-what[b-albimi99e9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-date[b-albimi99e9] { color: var(--text-faint); white-space: nowrap; }

/* Faktury kontrahenta */
.invoice-row[b-albimi99e9] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 12px;
    min-width: 0;
}

.invoice-number[b-albimi99e9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-amount[b-albimi99e9] { font-weight: 600; white-space: nowrap; }
.invoice-date[b-albimi99e9] { color: var(--text-faint); white-space: nowrap; }

.rule-row > .mono[b-albimi99e9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rule-add[b-albimi99e9] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.rule-add input[b-albimi99e9] {
    flex: 1;
    min-width: 0;
}

.preview-box[b-albimi99e9] {
    margin-top: 0.6rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 6px;
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* ── Wspólna oś czasu (poczta + praca + faktury) ── */

.tl-head[b-albimi99e9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.tl-head .section-title[b-albimi99e9] { margin: 0; }
.tl-filters[b-albimi99e9] { display: flex; gap: 0.3rem; flex-wrap: wrap; }

/* Znacznik rodzaju wpisu — na tyle wyrazisty, żeby dało się skanować listę wzrokiem,
   na tyle cichy, żeby nie konkurował z treścią. */
.tl-kind[b-albimi99e9] {
    display: inline-block;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 0.4rem;
    vertical-align: 1px;
    background: var(--cream);
    color: var(--text-soft);
}

.tl-kind-time[b-albimi99e9] { background: rgba(1, 147, 68, 0.12); color: var(--p1); }
.tl-kind-invoice[b-albimi99e9] { background: rgba(0, 0, 0, 0.06); }
/* Poprawka wpisu czasu — ostrzegawcza, bo to ona bywa przedmiotem sporu o rozliczenie. */
.tl-kind-correction[b-albimi99e9] { background: rgba(194, 120, 3, 0.14); color: #8a5a00; }

/* ── Wiersze osi ── */

.mail-timeline[b-albimi99e9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mail-row[b-albimi99e9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

.mail-row:last-child[b-albimi99e9] {
    border-bottom: none;
}

.mail-date[b-albimi99e9] {
    font-size: 11px;
    color: var(--text-faint);
    white-space: nowrap;
    padding-top: 2px;
}

.mail-main[b-albimi99e9] {
    min-width: 0;
}

/* Inline, nie block — obok tytułu stoi znacznik rodzaju (.tl-kind). */
.mail-subject[b-albimi99e9] {
    font-size: 13px;
    font-weight: 500;
}

.mail-meta[b-albimi99e9] {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 1px;
}

.mail-preview[b-albimi99e9] {
    font-size: 12px;
    color: var(--text-soft);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nagrobek — wątek istnieje, ale użytkownik nie ma dostępu do jego skrzynki.
   Celowo widoczny (nie ukrywamy wiersza), celowo pozbawiony treści. */
.mail-row.tombstone .mail-locked[b-albimi99e9] {
    font-size: 12.5px;
    color: var(--text-faint);
    font-style: italic;
}

.mail-row.tombstone[b-albimi99e9] {
    opacity: 0.75;
}
/* /Components/Pages/Clients/ServiceReportsPage.razor.rz.scp.css */
/* Raporty modułu „Obsługa". Scoped CSS. */

.rp-head[b-h8iwvrd7af] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.rp-actions[b-h8iwvrd7af] { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.rp-range[b-h8iwvrd7af] {
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.rp-field[b-h8iwvrd7af] { display: flex; flex-direction: column; gap: 0.2rem; }
.rp-field label[b-h8iwvrd7af] { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.rp-presets[b-h8iwvrd7af] { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.rp-period[b-h8iwvrd7af] { font-size: 12.5px; color: var(--text-soft); margin: 0 0 1rem; }

/* ── Kafelki podsumowania ── */

.rp-summary[b-h8iwvrd7af] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.1rem;
}

.rp-tile[b-h8iwvrd7af] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong, var(--line));
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    min-width: 0;
}

.rp-tile-accent[b-h8iwvrd7af] { border-left-color: var(--p1); }

.rp-tile-l[b-h8iwvrd7af] {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: 0.3rem;
}

.rp-tile-v[b-h8iwvrd7af] {
    display: block;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.rp-tile-v small[b-h8iwvrd7af] { font-size: 11px; color: var(--text-faint); margin-left: 0.3rem; }

/* ── Pasek udziału ── */

.rp-bar[b-h8iwvrd7af] {
    display: inline-block;
    width: 4.5rem;
    height: 6px;
    background: var(--cream);
    border-radius: 999px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 0.4rem;
}

.rp-bar-fill[b-h8iwvrd7af] {
    display: block;
    height: 100%;
    background: var(--p1);
}

.rp-bar-label[b-h8iwvrd7af] { font-size: 11px; color: var(--text-soft); }

@media (max-width: 900px) {
    .rp-summary[b-h8iwvrd7af] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Wydruk ──
   Natywny: @media print + window.print(), bez html2canvas/jsPDF. Przeglądarka drukuje lepiej
   niż jakakolwiek biblioteka i sama robi z tego PDF. */
@media print {
    .no-print[b-h8iwvrd7af] { display: none !important; }

    .rp-summary[b-h8iwvrd7af] { grid-template-columns: repeat(4, 1fr); }

    .rp-tile[b-h8iwvrd7af],
    .card[b-h8iwvrd7af] {
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
    }

    /* Pasek udziału na papierze bywa niewidoczny — zostaje liczba obok niego. */
    .rp-bar[b-h8iwvrd7af] { border: 1px solid #999; }
    .rp-bar-fill[b-h8iwvrd7af] { background: #666; }
}
/* /Components/Pages/Clients/TimeLogPage.razor.rz.scp.css */
/* Rejestr czasu — siatka tygodniowa + licznik. Scoped CSS: działa tylko w tym komponencie. */

.tl-head[b-v084tl0ir6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

/* ── Biegnący licznik ── */

.timer-chip[b-v084tl0ir6] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.8rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.tpulse[b-v084tl0ir6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--p1);
    flex: none;
    animation: tpulse-b-v084tl0ir6 1.6s ease-in-out infinite;
}

@keyframes tpulse-b-v084tl0ir6 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.tinfo[b-v084tl0ir6] { min-width: 0; }
.tinfo .tt[b-v084tl0ir6] { font-size: 12.5px; font-weight: 500; }
.tinfo .ts[b-v084tl0ir6] { font-size: 11px; color: var(--text-faint); }
.tval[b-v084tl0ir6] { font-size: 15px; font-variant-numeric: tabular-nums; }

/* ── Pasek narzędzi ── */

.tl-toolbar[b-v084tl0ir6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.week-nav[b-v084tl0ir6] { display: flex; align-items: center; gap: 0.3rem; }
.week-nav .wlabel[b-v084tl0ir6] { font-size: 13px; min-width: 12rem; text-align: center; }
.tl-spacer[b-v084tl0ir6] { flex: 1; }
.week-total[b-v084tl0ir6] { text-align: right; }
.week-total .wt-h[b-v084tl0ir6] { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.week-total .wt-l[b-v084tl0ir6] { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }

/* ── Szybkie dopisanie ── */

.quick-add[b-v084tl0ir6] {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.qa-field[b-v084tl0ir6] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.qa-field label[b-v084tl0ir6] { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.qa-field select[b-v084tl0ir6], .qa-field input[b-v084tl0ir6] { min-width: 9rem; }
.qa-grow[b-v084tl0ir6] { flex: 1; min-width: 12rem; }
.qa-grow input[b-v084tl0ir6] { width: 100%; }
.qa-narrow select[b-v084tl0ir6], .qa-narrow input[b-v084tl0ir6] { min-width: 5.5rem; width: 5.5rem; }
.qa-actions[b-v084tl0ir6] { display: flex; gap: 0.4rem; }

.qa-newengagement[b-v084tl0ir6] {
    display: flex;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--line);
}

.qa-newengagement input[b-v084tl0ir6] { flex: 1; min-width: 0; }

/* ── Siatka ── */

.tgrid[b-v084tl0ir6] { width: 100%; border-collapse: collapse; min-width: 720px; }

.tgrid thead th[b-v084tl0ir6] {
    text-align: center;
    padding: 0.5rem 0.4rem;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.tgrid thead th.col-task[b-v084tl0ir6] { text-align: left; }
.tgrid thead th .dnum[b-v084tl0ir6] { display: block; font-size: 13px; letter-spacing: 0; color: var(--text-faint); font-weight: 400; }
.tgrid th.today[b-v084tl0ir6], .tgrid td.today[b-v084tl0ir6] { background: var(--cream); }

.tgrid td[b-v084tl0ir6] {
    padding: 0.3rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.tgrid td.col-task[b-v084tl0ir6] { text-align: left; min-width: 14rem; }
.tgrid td.col-tot[b-v084tl0ir6] { text-align: right; white-space: nowrap; }

.grp-row td[b-v084tl0ir6] { background: var(--cream); border-bottom: 1px solid var(--line); font-size: 12.5px; }
.tot-row td[b-v084tl0ir6] { font-size: 12.5px; border-bottom: none; padding-top: 0.55rem; }

.act-row .act-name[b-v084tl0ir6] { font-size: 12.5px; }
.act-row .act-note[b-v084tl0ir6] { font-size: 11px; color: var(--text-faint); margin-left: 0.4rem; }

.bdot[b-v084tl0ir6] { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 0.45rem; }
.bdot.bill[b-v084tl0ir6] { background: var(--p1); }
.bdot.nobill[b-v084tl0ir6] { background: var(--line-strong, #ccc); }

/* Komórki — pusta jest klikalna, ale nie krzyczy kolorem. */
.cellbtn[b-v084tl0ir6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 3.2rem;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.cellbtn:hover[b-v084tl0ir6] { background: var(--cream-2, var(--cream)); border-color: var(--line); }
.cellbtn.empty[b-v084tl0ir6]::after { content: "+"; color: transparent; }
.cellbtn.empty:hover[b-v084tl0ir6]::after { color: var(--text-faint); }
.cellbtn.filled[b-v084tl0ir6] { background: var(--cream); border-color: var(--line); }
.cellbtn.multi[b-v084tl0ir6] { background: var(--cream); border-color: var(--line-strong, var(--line)); }
.cellbtn.multi .multi-dot[b-v084tl0ir6] {
    margin-left: 0.3rem;
    font-size: 10px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--p1);
    color: #fff;
}

/* Zablokowane i biegnące nie są przyciskami — nie da się ich kliknąć przez pomyłkę. */
.cellbtn.locked[b-v084tl0ir6] { cursor: not-allowed; opacity: 0.7; background: repeating-linear-gradient(45deg, var(--cream), var(--cream) 4px, transparent 4px, transparent 8px); }
.cellbtn.running[b-v084tl0ir6] { cursor: default; color: var(--p1); font-weight: 600; }

.cell-input[b-v084tl0ir6] {
    width: 100%;
    min-width: 3.2rem;
    height: 30px;
    padding: 0 0.4rem;
    border: 1px solid var(--p1);
    border-radius: 6px;
    font-size: 12.5px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Panel dnia ── */

.plain-list[b-v084tl0ir6] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.day-entry[b-v084tl0ir6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12.5px;
}

.day-entry-time[b-v084tl0ir6] { min-width: 4.5rem; font-weight: 500; }
.day-entry-who[b-v084tl0ir6] { color: var(--text-soft); }
.day-entry-note[b-v084tl0ir6] { color: var(--text-faint); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
    .quick-add .qa-field[b-v084tl0ir6], .quick-add .qa-actions[b-v084tl0ir6] { width: 100%; }
    .qa-field select[b-v084tl0ir6], .qa-field input[b-v084tl0ir6], .qa-narrow select[b-v084tl0ir6], .qa-narrow input[b-v084tl0ir6] { width: 100%; min-width: 0; }
    .timer-chip[b-v084tl0ir6] { width: 100%; }
}
/* /Components/Pages/Conversation/Conversation.razor.rz.scp.css */
/* ─── Shell ──────────────────────────────────────────────────────────── */
.conv-shell[b-ayj7cev44r] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    overflow: hidden;
    position: relative;
}
.conv-shell.side-hidden[b-ayj7cev44r] { grid-template-columns: minmax(0, 1fr); }
.conv-shell.side-hidden .conv-side[b-ayj7cev44r] { display: none; }
@media (min-width: 1600px) {
    .conv-shell[b-ayj7cev44r] {
        grid-template-columns: minmax(0, 1fr) 400px;
        padding: 0.65rem 1rem;
        gap: 1rem;
    }
}

.conv-thread[b-ayj7cev44r] {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);  /* mniejszy radius — bardziej "pracowniczy", mniej miękki */
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    min-height: 0;
}

.conv-side[b-ayj7cev44r] {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    padding-right: 4px;
}

/* ─── Header ─────────────────────────────────────────────────────────── */
/* Compact: 2 cienkie wiersze. Wiersz 1 = back + kanał + subject + ticket# + chipy (SLA/agent/presence) + akcje.
   Wiersz 2 (mini-strip) = status + Take/Przejmij. Tagi i klient są w sidebarze. */
.conv-head[b-ayj7cev44r] {
    padding: 0.45rem 1rem 0.5rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.conv-head-row1[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 28px;
    flex-wrap: wrap;  /* na wąskich ekranach akcje mogą zjechać */
}
.conv-back[b-ayj7cev44r] {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    color: var(--text-soft);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    flex: none;
}
.conv-back:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); }
.conv-back svg[b-ayj7cev44r] {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.conv-kind[b-ayj7cev44r] {
    color: var(--text-faint);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    margin: 0;
    flex: none;  /* NIE rośnie — subject ma flex:1 i zajmuje resztę */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-head-actions[b-ayj7cev44r] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex: none;
}
.snooze-until[b-ayj7cev44r] {
    font-size: 11.5px;
    color: var(--text-soft);
    padding: 0.3rem 0.55rem;
    background: var(--cream-2);
    border-radius: 6px;
}

/* Title — inline w wierszu 1, kompaktowy. Editorial serif zachowany, ale font dramatycznie mniejszy
   (~1.1rem zamiast ~1.7rem) bo musi się zmieścić obok kanału, ticket# i akcji. */
.conv-title[b-ayj7cev44r] {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.2;
    margin: 0;
    cursor: pointer;
    transition: opacity 0.15s;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;  /* trochę cięższy bo mniejszy */
}
.conv-title:hover[b-ayj7cev44r] { opacity: 0.75; }
.conv-ticket-inline[b-ayj7cev44r] {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11.5px;
    color: var(--text-faint);
    flex: none;
    white-space: nowrap;
}
.subject-edit-hint[b-ayj7cev44r] {
    font-size: 0.7em;
    color: var(--text-faint);
    margin-left: 0.3rem;
    opacity: 0;
    transition: opacity 0.15s;
}
.conv-title:hover .subject-edit-hint[b-ayj7cev44r] { opacity: 1; }
.subject-input[b-ayj7cev44r] {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 500;
    padding: 0.35rem 0.55rem;
    width: 100%;
    font-family: var(--font-display, inherit);
}
.subject-hint[b-ayj7cev44r] {
    color: var(--text-faint);
    font-size: 11px;
    margin-left: 0.5rem;
    align-self: center;
}

/* Mini-strip pod wierszem 1 — tylko status + Take/Przejmij. Tagi i customer są w sidebarze. */
.conv-strip[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    margin-top: 0;
    min-height: 24px;
}
.strip-sep[b-ayj7cev44r] {
    flex: 1;
    min-width: 0.5rem;
}

/* Customer chip — clickable, opens modal */
.cust-chip[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.cust-chip:hover[b-ayj7cev44r] { background: var(--cream-2); border-color: var(--line-strong); }
.cust-chip:active[b-ayj7cev44r] { transform: translateY(1px); }
.cust-chip-name[b-ayj7cev44r] {
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cust-chip-chev[b-ayj7cev44r] {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.45;
}

/* Agent chip — display only */
.agent-chip[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: var(--cream-2);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--text-soft);
}
.agent-chip svg[b-ayj7cev44r] {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.7;
}

/* Mini presence indicator (kropka + liczba) — inline w wierszu 1 zamiast big chip per-viewer. */
.conv-presence-mini[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    background: var(--cream-2);
    color: var(--text-soft);
    border-radius: 999px;
    font-size: 11px;
    font-family: var(--mono, ui-monospace, monospace);
    cursor: help;
}

/* Sidebar: customer card (avatar + name + login) — kompaktowy pojedynczy wiersz, kliknięcie = modal. */
.conv-side-customer[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, transform 0.05s;
    width: 100%;
    border: 1px solid var(--line);
}
.conv-side-customer:hover[b-ayj7cev44r] { background: var(--cream-2); }
.conv-side-customer:active[b-ayj7cev44r] { transform: translateY(1px); }
.conv-side-customer-avatar[b-ayj7cev44r] {
    flex: none;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    /* background + color pochodzi z .avatar-circle.c-1 z app.css */
}
.conv-side-customer-text[b-ayj7cev44r] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.45rem;
}
.conv-side-customer-name[b-ayj7cev44r] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
}
.conv-side-customer-login[b-ayj7cev44r] {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
.conv-side-customer-chev[b-ayj7cev44r] {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2;
    color: var(--text-faint);
    flex: none;
}

/* Sidebar: tagi konwersacji — kompakt karta. */
.conv-side-tags-card[b-ayj7cev44r] {
    padding: 0.65rem 0.85rem;
}
.conv-side-tags-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}
.conv-side-tags-list[b-ayj7cev44r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
}

/* Mobile: extras chipy w stripie (SLA + customer) — pokazują się gdy strip mobile-open. */
.conv-strip-mobile-extras[b-ayj7cev44r] { display: contents; }

/* Side toggle in header */
.conv-side-toggle[b-ayj7cev44r] {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.conv-side-toggle:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); border-color: var(--line-strong); }
.conv-side-toggle[aria-pressed="true"][b-ayj7cev44r] { background: var(--cream-2); color: var(--text); border-color: var(--line-strong); }
.conv-side-toggle svg[b-ayj7cev44r] {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ─── Stream + messages ──────────────────────────────────────────────── */
.conv-stream[b-ayj7cev44r] {
    padding: 0.75rem 0.9rem;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: linear-gradient(180deg, var(--cream-2) 0%, var(--paper) 100%);
}

.load-older-banner[b-ayj7cev44r] {
    align-self: center;
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
}

/* ─── Order context chip (pod subject) — info ktore zamowienie ──────── */
.conv-order-context[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding: 0.45rem 0.65rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--info);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--text-soft);
    flex-wrap: wrap;
}
.conv-order-context svg[b-ayj7cev44r] { color: var(--info); }
.conv-order-label[b-ayj7cev44r] {
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}
.conv-order-id[b-ayj7cev44r] { color: var(--text); font-size: 12.5px; }
.conv-order-amount[b-ayj7cev44r] { color: var(--p1); font-weight: 500; }
.conv-order-items[b-ayj7cev44r] { color: var(--text-faint); font-size: 11.5px; }
.conv-order-more[b-ayj7cev44r] {
    color: var(--info);
    font-size: 11.5px;
    margin-left: auto;
    font-weight: 500;
}

/* ─── Pinned messages bar (sticky on top of thread) ──────────────────── */
.pinned-bar[b-ayj7cev44r] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    border-left-width: 3px;
    border-radius: 8px;
    padding: 0.5rem 0.6rem 0.6rem;
    margin-bottom: 0.6rem;
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}
.pinned-bar-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--warn, #8a5b00);
    font-weight: 500;
    margin-bottom: 0.4rem;
}
/* Pinned bar w stanie collapsed = 1 linijka (trigger button), bez listy. Margin redukujemy. */
.pinned-bar.collapsed[b-ayj7cev44r] { padding: 0.3rem 0.55rem; }
.pinned-bar.collapsed .pinned-bar-head[b-ayj7cev44r] { margin-bottom: 0; }
/* Toggle button (mobile + desktop): pełna szerokość, klikalny w całość. */
.pinned-bar-toggle[b-ayj7cev44r] {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.pinned-bar-toggle:hover[b-ayj7cev44r] { color: var(--p1); }
.pinned-bar-chevron[b-ayj7cev44r] {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-faint, #888);
}
.pinned-icon[b-ayj7cev44r] {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pinned-list[b-ayj7cev44r] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 180px;
    overflow-y: auto;
}
.pinned-item[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: var(--paper);
    border: 1px solid rgba(201, 138, 20, 0.15);
    border-radius: 6px;
    font-size: 12px;
}
.pinned-link[b-ayj7cev44r] {
    flex: 1;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
}
.pinned-link:hover[b-ayj7cev44r] { color: var(--p1); }
.pinned-author[b-ayj7cev44r] {
    font-size: 11px;
    color: var(--text-soft);
    flex: none;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pinned-preview[b-ayj7cev44r] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.pinned-unpin[b-ayj7cev44r] {
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0 0.25rem;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    flex: none;
}
.pinned-unpin:hover[b-ayj7cev44r] { background: rgba(0,0,0,0.06); color: var(--text); }

/* Pin button on each message — visible on hover, always on pinned */
.msg-pin[b-ayj7cev44r] {
    background: transparent;
    border: none;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 4px;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    margin-left: auto;
}
.msg:hover .msg-pin[b-ayj7cev44r] { opacity: 0.6; }
.msg-pin:hover[b-ayj7cev44r] { opacity: 1 !important; color: var(--warn, #8a5b00); background: rgba(201, 138, 20, 0.08); }
.msg-pin.active[b-ayj7cev44r] {
    opacity: 1;
    color: var(--warn, #8a5b00);
}
.msg-pin.active:hover[b-ayj7cev44r] { color: var(--danger); }
.msg-pin svg[b-ayj7cev44r] {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.msg.pinned .msg-body[b-ayj7cev44r] {
    box-shadow: 0 0 0 2px rgba(201, 138, 20, 0.2), var(--shadow-sm);
}

.msg[b-ayj7cev44r] {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 0.55rem;
    max-width: 82%;
    align-items: flex-start;
}
.msg.inbound[b-ayj7cev44r] { align-self: flex-start; }
.msg.outbound[b-ayj7cev44r] {
    align-self: flex-end;
    grid-template-columns: 1fr 30px;
}
.msg.outbound .msg-avatar[b-ayj7cev44r] { grid-column: 2; grid-row: 1; }
.msg.outbound .msg-body[b-ayj7cev44r] { grid-column: 1; grid-row: 1; }
.msg.internal[b-ayj7cev44r] { align-self: stretch; max-width: 100%; }

.msg-avatar[b-ayj7cev44r] { display: flex; justify-content: center; padding-top: 1px; }
.msg-body[b-ayj7cev44r] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.55rem 0.8rem 0.6rem;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    /* Długie URL-e / numery śledzenia / słowa bez spacji łamią się zamiast przepełniać bąbel
       (krytyczne na wąskich ekranach — inaczej mobile scrolluje poziomo). */
    overflow-wrap: anywhere;
}
/* Outbound: subtelne tlo z palette + lewy akcent paskowy.
   Uzywamy tokens-based bg zamiast hardcoded gradient — w dark mode automagic. */
.msg.outbound .msg-body[b-ayj7cev44r] {
    background: var(--paper);
    border-color: var(--line);
    border-left: 3px solid var(--p1);
}
.msg.internal .msg-body[b-ayj7cev44r] {
    background: var(--warn-bg);
    border-color: var(--warn);
    border-left: 3px solid var(--warn);
    color: var(--text);
}
.msg.delivery-pending .msg-body[b-ayj7cev44r] { opacity: 0.75; border-style: dashed; }
.msg.delivery-failed .msg-body[b-ayj7cev44r] {
    background: var(--danger-bg);
    border-color: var(--danger);
    border-left: 3px solid var(--danger);
    color: var(--text);
}

.msg-context[b-ayj7cev44r] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.6rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s, border-color 0.12s;
}
.msg-context.order[b-ayj7cev44r] { border-left-color: var(--info); }
.msg-context.return[b-ayj7cev44r] { border-left-color: var(--warn); }
.msg-context.dispute[b-ayj7cev44r] { border-left-color: var(--danger); }
.msg-context:hover[b-ayj7cev44r] { background: var(--paper); border-color: var(--line-strong); }
.msg-context-img[b-ayj7cev44r] {
    width: 36px; height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex: none;
    background: var(--paper);
}
.msg-context-text[b-ayj7cev44r] { flex: 1; min-width: 0; }
.msg-context-label[b-ayj7cev44r] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    font-weight: 500;
}
.msg-context-title[b-ayj7cev44r] {
    font-size: 12.5px;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}
.msg-context-price[b-ayj7cev44r] {
    font-size: 11.5px;
    color: var(--text-soft);
    margin-top: 1px;
}
.msg-failure[b-ayj7cev44r] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--danger-bg);
    border-left: 3px solid var(--danger);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text);
}
.msg-failure strong[b-ayj7cev44r] { color: var(--danger); }

/* Translation BYOK — inline pod treścią inbound message */
.msg-translate-btn[b-ayj7cev44r] {
    margin-top: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: 4px;
    font-size: 11.5px;
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.12s;
}
.msg-translate-btn:hover:not(:disabled)[b-ayj7cev44r] {
    background: var(--cream-2);
    color: var(--text);
    border-style: solid;
    border-color: var(--p1);
}
.msg-translate-btn:disabled[b-ayj7cev44r] { opacity: 0.5; cursor: wait; }

.msg-translation[b-ayj7cev44r] {
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: color-mix(in srgb, var(--p1) 5%, transparent);
    border-left: 3px solid var(--p1);
    border-radius: 4px;
    font-size: 13px;
}
.msg-translation.msg-translation-err[b-ayj7cev44r] {
    background: var(--danger-bg);
    border-left-color: var(--danger);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--danger);
    font-size: 12px;
}
.msg-translation-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 11px;
    color: var(--text-faint);
    margin-bottom: 0.3rem;
}
.msg-translation-flag[b-ayj7cev44r] { font-size: 12px; }
.msg-translation-cache[b-ayj7cev44r] {
    padding: 1px 5px; border-radius: 999px;
    background: var(--cream-2); font-size: 10px;
    color: var(--text-soft);
}
.msg-translation-close[b-ayj7cev44r] {
    margin-left: auto; background: transparent; border: none;
    color: var(--text-faint); cursor: pointer;
    font-size: 14px; line-height: 1;
}
.msg-translation-close:hover[b-ayj7cev44r] { color: var(--text); }
.msg-translation-body[b-ayj7cev44r] { white-space: pre-wrap; }
.msg-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.msg-head strong[b-ayj7cev44r] { font-size: 13px; color: var(--text); }
.msg-time[b-ayj7cev44r] { font-size: 11px; color: var(--text-faint); }
.msg-text[b-ayj7cev44r] {
    font-size: 13.5px;
    color: var(--text);
    white-space: pre-wrap;
    line-height: 1.55;
}
.msg-attachments[b-ayj7cev44r] {
    margin-top: 0.5rem;
    font-size: 11.5px;
    color: var(--text-soft);
}

/* Presence chips (kto ogląda / pisze) — inline-flex obok siebie, nigdy full-width. */
.conv-presence[b-ayj7cev44r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0.3rem 0 0.4rem;
    justify-content: flex-start;
}
.conv-presence > .presence-chip[b-ayj7cev44r] {
    flex: 0 0 auto;
    width: auto;
    max-width: max-content;
    font-size: 11px;
    padding: 2px 8px;
    line-height: 1.4;
}
.presence-dot[b-ayj7cev44r] {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.presence-dot.typing[b-ayj7cev44r] {
    animation: presencePulse 1.2s ease-in-out infinite;
}
.presence-name[b-ayj7cev44r] { font-weight: 600; }
.presence-action[b-ayj7cev44r] { color: inherit; opacity: 0.85; font-weight: 400; }

/* ─── Composer ───────────────────────────────────────────────────────── */
.conv-composer[b-ayj7cev44r] {
    border-top: 1px solid var(--line);
    background: var(--paper);
    padding: 0.55rem 1rem 0.65rem;
}

/* Banner "Odpowiesz z: …" — pokazuje email skrzynki ABCare z której pójdzie reply.
   Mniejsze padding bo to tylko info, nie akcja. */
.reply-from-banner[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.65rem;
    margin-bottom: 0.45rem;
    background: var(--cream-2);
    border: 1px dashed var(--line-strong);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--text);
}
.reply-from-banner svg[b-ayj7cev44r] { color: var(--text-faint); }
.reply-from-banner strong[b-ayj7cev44r] { color: var(--text); }
[data-theme="dark"] .reply-from-banner[b-ayj7cev44r] { background: rgba(255,255,255,0.04); }

/* Collision warning — pokazywany NAD composer gdy inny agent aktywnie pisze. Pomarańczowy
   żeby był wyraźny (różny od info/danger które już mają zastosowanie). */
.collision-warning[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--warn);
}
.collision-warning strong[b-ayj7cev44r] { color: var(--warn); font-weight: 700; }
.collision-warning span[b-ayj7cev44r] { color: var(--text); }
.composer-tabs[b-ayj7cev44r] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.c-tab[b-ayj7cev44r] {
    font-size: 12px;
    color: var(--text-soft);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.c-tab:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); }
.c-tab.active[b-ayj7cev44r] {
    background: var(--cream-2);
    color: var(--text);
    font-weight: 500;
    border-color: var(--line);
}
.composer-area[b-ayj7cev44r] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cream-2);
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    resize: vertical;
    min-height: 60px;
    max-height: 33vh;        /* rośnie z treścią do ~1/3 ekranu, potem własny scroll */
    field-sizing: content;   /* auto-grow do treści (też przy wstawieniu draftu); starsze przeglądarki: fixed+scroll, bez regresji */
    overflow-y: auto;
}
.composer-area:disabled[b-ayj7cev44r] { color: var(--text-faint); }
.composer-actions[b-ayj7cev44r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

/* ─── Composer attachments preview (before send) ─────────────────────── */
.composer-attachments[b-ayj7cev44r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
}
.composer-att-chip[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem 0.3rem 0.4rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--text);
    max-width: 260px;
}
.composer-att-chip svg[b-ayj7cev44r] {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    color: var(--text-soft);
    flex: none;
}
.composer-att-name[b-ayj7cev44r] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.composer-att-size[b-ayj7cev44r] { color: var(--text-faint); font-size: 10.5px; }
.composer-att-remove[b-ayj7cev44r] {
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 0 0.2rem;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
}
.composer-att-remove:hover[b-ayj7cev44r] { background: rgba(0,0,0,0.06); color: var(--text); }

/* Attachments rendered inside message body */
.msg-attachments-list[b-ayj7cev44r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.msg-att-chip[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem 0.3rem 0.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--text);
    text-decoration: none;
}
.msg-att-chip:hover[b-ayj7cev44r] { background: var(--cream-2); border-color: var(--line-strong); }
.msg-att-chip svg[b-ayj7cev44r] {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    color: var(--text-soft);
    flex: none;
}

/* ─── Tags inside strip ──────────────────────────────────────────────── */
.tag[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem 0.2rem 0.6rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 11.5px;
    color: var(--text-soft);
    line-height: 1.2;
    /* Nie pozwól, by pojedynczy długi tag przepełnił panel — mieści się i łamie w razie potrzeby. */
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}
.tag.success[b-ayj7cev44r] { background: var(--ok-bg); color: var(--ok); border-color: rgba(1,147,68,0.25); }
.tag.warning[b-ayj7cev44r], .tag.warn[b-ayj7cev44r] { background: var(--warn-bg); color: var(--warn); border-color: rgba(201,138,20,0.25); }
.tag.danger[b-ayj7cev44r] { background: var(--danger-bg); color: var(--danger); border-color: rgba(192,46,29,0.25); }
.tag.info[b-ayj7cev44r] { background: var(--info-bg); color: var(--info); }
.tag-remove[b-ayj7cev44r] {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 0.15rem;
    font-size: 14px;
    line-height: 1;
    opacity: 0.5;
    border-radius: 50%;
}
.tag-remove:hover[b-ayj7cev44r] { opacity: 1; background: rgba(0,0,0,0.06); }
.tag-add-btn[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    background: transparent;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    font-size: 11.5px;
    color: var(--text-faint);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}
.tag-add-btn:hover[b-ayj7cev44r] { border-style: solid; color: var(--text); background: var(--cream-2); }

.tag-picker[b-ayj7cev44r] { position: relative; display: inline-block; }

/* Picker dropdown anchored to + tag button, absolute overlay */
.tag-picker-anchor[b-ayj7cev44r] { position: relative; display: inline-flex; }
.tag-picker-pop[b-ayj7cev44r] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    min-width: 240px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tag-picker-pop .tag-picker-list[b-ayj7cev44r] {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    max-height: 240px;
    overflow-y: auto;
}
@media (max-width: 600px) {
    .tag-picker-pop[b-ayj7cev44r] {
        position: fixed;
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}
.tag-picker-input[b-ayj7cev44r] {
    font-size: 12px;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--paper);
    min-width: 160px;
    max-width: 100%;
    font-family: inherit;
}
.tag-picker-list[b-ayj7cev44r] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
    min-width: 220px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 50;
    padding: 0.3rem;
}
.tag-picker-item[b-ayj7cev44r] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
}
.tag-picker-item:hover[b-ayj7cev44r] { background: var(--cream-2); }
.tag-picker-new[b-ayj7cev44r] {
    color: var(--p1);
    border-top: 1px solid var(--line);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}

/* ─── Tagi w nagłówku (przeniesione z sidebara conv-side-tags) ────────── */
.conv-head-tags[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    min-width: 0;
}
/* Picker w nagłówku renderowany in-flow (lista position:static). .conv-thread ma overflow:hidden,
   więc absolutny dropdown byłby przycięty; flex-basis:100% => własny pełny wiersz w stripie. */
.conv-head-tag-picker[b-ayj7cev44r] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 100%;
    margin-top: 0.15rem;
    padding: 0.45rem;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    max-width: 420px;
    z-index: 5;
}
.conv-head-tag-picker .tag-picker-list[b-ayj7cev44r] {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    max-height: 220px;
    overflow-y: auto;
}

/* ─── Historia akcji: leniwe ładowanie + filtr szumu ─────────────────── */
.history-open-btn[b-ayj7cev44r] { width: 100%; justify-content: center; }
.history-toolbar[b-ayj7cev44r] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.4rem;
}
.history-filter-toggle[b-ayj7cev44r] {
    font-family: inherit;
    font-size: 11px;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.history-filter-toggle:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text-soft); }
.history-filter-toggle.on[b-ayj7cev44r] {
    background: var(--cream-2);
    color: var(--text);
    border-color: var(--line-strong);
}

/* ─── Mini audit (Historia akcji) — scroll wewnatrz drawer ───────────── */
.mini-audit[b-ayj7cev44r] {
    list-style: none;
    margin: 0;
    padding: 0 0.25rem 0 0;
    /* Dluga lista (50 eventow) bez ograniczenia zalewa caly side drawer i blokuje dostęp
       do reszty sekcji ponizej. `overflow-y: scroll` (zamiast auto) zawsze rezerwuje pasek,
       żeby user wiedział że ma scroll bez najeżdżania. */
    max-height: 280px;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.mini-audit[b-ayj7cev44r]::-webkit-scrollbar { width: 8px; }
.mini-audit[b-ayj7cev44r]::-webkit-scrollbar-track { background: transparent; }
.mini-audit[b-ayj7cev44r]::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 4px;
}
.mini-audit[b-ayj7cev44r]::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
.mini-audit li[b-ayj7cev44r] {
    display: flex;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--line);
}
.mini-audit li:last-child[b-ayj7cev44r] { border-bottom: none; }
.mini-audit .audit-dot[b-ayj7cev44r] {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex: none;
    background: var(--text-faint);
}
.mini-audit .audit-dot.tone-ok[b-ayj7cev44r] { background: var(--p1); }
.mini-audit .audit-dot.tone-warn[b-ayj7cev44r] { background: var(--warn, #c98a00); }
.mini-audit .audit-dot.tone-danger[b-ayj7cev44r] { background: var(--danger); }
.mini-audit .audit-dot.tone-info[b-ayj7cev44r] { background: var(--info, #2a8ec9); }
.mini-audit-body[b-ayj7cev44r] { flex: 1; min-width: 0; }
.mini-audit-title[b-ayj7cev44r] {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.mini-audit-time[b-ayj7cev44r] {
    font-size: 10.5px;
    color: var(--text-faint);
}

/* ─── "W rozmowie" card — refs from messages ─────────────────────────── */
.conv-refs[b-ayj7cev44r] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.conv-ref[b-ayj7cev44r] {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 6px;
    align-items: flex-start;
}
.conv-ref.order[b-ayj7cev44r] { border-left-color: var(--info, #2a8ec9); }
.conv-ref.return[b-ayj7cev44r] { border-left-color: var(--warn, #c98a00); }
.conv-ref.dispute[b-ayj7cev44r] { border-left-color: var(--danger); }
.conv-ref-img[b-ayj7cev44r] {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--paper);
    flex: none;
}
.conv-ref-img-fallback[b-ayj7cev44r] {
    display: grid; place-items: center;
    font-size: 18px;
    background: var(--paper);
    border: 1px solid var(--line);
}
.conv-ref-text[b-ayj7cev44r] { min-width: 0; flex: 1; }
.conv-ref-label[b-ayj7cev44r] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    font-weight: 500;
    margin-bottom: 1px;
}
.conv-ref-title[b-ayj7cev44r] {
    display: block;
    font-size: 12.5px;
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin-top: 2px;
}
.conv-ref-title:hover[b-ayj7cev44r] { color: var(--p1); text-decoration: underline; }
.conv-ref-meta[b-ayj7cev44r] {
    font-size: 11px;
    color: var(--text-soft);
    margin-top: 0.2rem;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* ─── Order rows (in aside) ────────────────────────────────────────── */
.ord-row[b-ayj7cev44r] {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}
.ord-row:last-child[b-ayj7cev44r] { border-bottom: none; }
.ord-row-disputed[b-ayj7cev44r] {
    padding-left: 0.6rem;
    margin-left: -0.6rem;
    border-left: 3px solid var(--danger);
    background: var(--danger-bg);
    border-radius: 0 6px 6px 0;
    padding-right: 0.6rem;
    margin-right: -0.4rem;
}
.ord-meta-line[b-ayj7cev44r] {
    display: flex;
    gap: 0.4rem;
    font-size: 11.5px;
    color: var(--text-soft);
    margin-top: 0.25rem;
}
.ord-meta-label[b-ayj7cev44r] {
    color: var(--text-faint);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
}
.ord-buyer[b-ayj7cev44r] {
    margin-top: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 5px;
}
.ord-lineitems[b-ayj7cev44r] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--line);
}
.ord-lineitem[b-ayj7cev44r] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: 12px;
}
.ord-lineitem:last-child[b-ayj7cev44r] { border-bottom: none; }
.ord-lineitem-name[b-ayj7cev44r] {
    flex: 1;
    color: var(--text);
    line-height: 1.3;
}
.ord-lineitem-name a[b-ayj7cev44r] {
    color: var(--global-palette1);
    text-decoration: none;
}
.ord-lineitem-name a:hover[b-ayj7cev44r] { text-decoration: underline; }
.ord-lineitem-qty[b-ayj7cev44r] {
    flex-shrink: 0;
    color: var(--text-faint);
    font-size: 11.5px;
}
.ord-mentions[b-ayj7cev44r] {
    margin-top: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: var(--cream-2);
    border-radius: 4px;
    font-size: 11.5px;
}
.ord-mentions-list[b-ayj7cev44r] {
    list-style: none;
    padding: 0;
    margin: 0.2rem 0 0;
}
.ord-mentions-list li[b-ayj7cev44r] {
    padding: 0.15rem 0;
    color: var(--text);
}
.ord-external-link[b-ayj7cev44r] {
    display: inline-block;
    color: var(--p1);
    font-size: 11.5px;
    text-decoration: none;
    font-weight: 500;
}
.ord-external-link:hover[b-ayj7cev44r] { text-decoration: underline; }
.ord-actions[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.ord-refresh-form[b-ayj7cev44r] { margin: 0; }
.btn-link-ghost[b-ayj7cev44r] {
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}
.btn-link-ghost:hover[b-ayj7cev44r] { color: var(--p1); text-decoration: underline; }

/* Button "Pokaż wszystkie" w nagłówku karty aside — kompaktowy chip-style, zawsze widoczny */
.aside-show-all[b-ayj7cev44r] {
    background: rgba(0, 146, 68, 0.08);
    border: 1px solid var(--p1);
    border-radius: 14px;
    color: var(--p1);
    font-size: 11.5px;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.aside-show-all:hover[b-ayj7cev44r] {
    background: var(--p1);
    color: #fff;
}
.ord-head[b-ayj7cev44r] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.ord-meta[b-ayj7cev44r] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ─── Customer modal ─────────────────────────────────────────────────── */
.cust-modal[b-ayj7cev44r] {
    max-width: 720px;
    width: calc(100% - 2rem);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.cust-modal-head[b-ayj7cev44r] {
    padding: 1.25rem 1.5rem 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
}
.cust-modal-ident[b-ayj7cev44r] {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    min-width: 0;
}
.cust-modal-ident > div[b-ayj7cev44r] { min-width: 0; }
.cust-modal-name[b-ayj7cev44r] {
    font-size: 1.5rem;
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cust-modal-meta[b-ayj7cev44r] {
    font-size: 11.5px;
    color: var(--text-faint);
    margin: 0.2rem 0 0;
}
.cust-modal-head-actions[b-ayj7cev44r] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex: none;
}
.cust-modal-close[b-ayj7cev44r] {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-soft);
    cursor: pointer;
    margin-left: 0.3rem;
}
.cust-modal-close:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); }
.cust-modal-close svg[b-ayj7cev44r] {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.cust-modal-body[b-ayj7cev44r] {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
}
.cust-modal-grid[b-ayj7cev44r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.cust-modal-section[b-ayj7cev44r] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.cust-modal-section-full[b-ayj7cev44r] {
    margin-top: 1.5rem;
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}
.cust-modal-section-title[b-ayj7cev44r] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin: 0 0 0.35rem;
    font-weight: 500;
}
.cust-modal-count[b-ayj7cev44r] {
    background: var(--cream-2);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    color: var(--text-soft);
    margin-left: 0.3rem;
}
.cust-kv[b-ayj7cev44r] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.45rem 0.85rem;
    margin: 0;
    font-size: 13px;
}
.cust-kv dt[b-ayj7cev44r] {
    color: var(--text-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: center;
}
.cust-kv dd[b-ayj7cev44r] {
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}
.cust-tags-row[b-ayj7cev44r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}
.cust-notes-body[b-ayj7cev44r] {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin: 0;
    padding: 0.5rem 0.65rem;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    white-space: pre-wrap;
}

/* ─── Other open conversations (in modal) ────────────────────────────── */
.other-convs[b-ayj7cev44r] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}
.other-conv-link[b-ayj7cev44r] {
    display: block;
    padding: 0.5rem 0.65rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.12s;
}
.other-conv-link:hover[b-ayj7cev44r] { background: var(--cream-2); border-color: var(--line-strong); }
.other-conv-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
    margin-bottom: 0.25rem;
}
.other-conv-head .chip[b-ayj7cev44r] { flex-shrink: 0; }
.other-conv-subj[b-ayj7cev44r] {
    font-size: 12.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.other-conv-meta[b-ayj7cev44r] {
    font-size: 10.5px;
    color: var(--text-faint);
    margin-top: 0.2rem;
}

/* ─── Side drawer header (mobile only) ───────────────────────────────── */
.side-drawer-head[b-ayj7cev44r] { display: none; }

/* ─── Side backdrop (mobile only) ────────────────────────────────────── */
.conv-side-backdrop[b-ayj7cev44r] { display: none; }

/* ─── Mobile: side panel becomes right drawer ────────────────────────── */
@media (max-width: 1199.98px) {
    .conv-shell[b-ayj7cev44r] {
        grid-template-columns: 1fr;
        padding: 0.75rem 1rem;
        gap: 0;
    }
    aside.conv-side[b-ayj7cev44r] {
        position: fixed;
        top: var(--topbar-h);
        right: 0;
        height: calc(100vh - var(--topbar-h));
        height: calc(100dvh - var(--topbar-h));
        width: min(380px, 92vw);
        max-width: 92vw;
        background: var(--cream);
        border-left: 1px solid var(--line);
        padding: 0.85rem 0.85rem 1rem;
        z-index: 95;
        transform: translateX(100%) !important;
        transition: transform 0.22s ease;
        box-shadow: -4px 0 24px rgba(0,0,0,0.12);
        pointer-events: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    aside.conv-side.drawer-open[b-ayj7cev44r] {
        transform: translateX(0) !important;
        pointer-events: auto;
    }
    .conv-shell.side-backdrop-show .conv-side-backdrop[b-ayj7cev44r] {
        position: fixed;
        inset: var(--topbar-h) 0 0 0;
        background: rgba(0,0,0,0.35);
        z-index: 94;
        backdrop-filter: blur(2px);
        display: block;
        animation: fadeIn-b-ayj7cev44r 0.18s ease;
    }
    /* On mobile, side panel default hidden — `display: none` for inline class — but keep transform fallback */
    .conv-shell.side-hidden[b-ayj7cev44r] { /* ignored on mobile, panel stays as drawer */ }
    .conv-shell.side-hidden .conv-side[b-ayj7cev44r] { display: flex; }
    .side-drawer-head[b-ayj7cev44r] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 0.75rem;
        border-bottom: 1px solid var(--line);
        margin-bottom: 0.75rem;
    }
    .side-drawer-head strong[b-ayj7cev44r] {
        font-size: 13px;
        color: var(--text);
    }
    .side-drawer-close[b-ayj7cev44r] {
        background: transparent;
        border: none;
        width: 32px; height: 32px;
        display: grid; place-items: center;
        border-radius: 6px;
        color: var(--text-soft);
        cursor: pointer;
    }
    .side-drawer-close:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); }
    .side-drawer-close svg[b-ayj7cev44r] {
        width: 18px; height: 18px;
        stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }

    /* Header chips wrap naturally on small viewports */
    .conv-strip[b-ayj7cev44r] { gap: 0.35rem 0.4rem; }
    .cust-chip-name[b-ayj7cev44r] { max-width: 140px; }

    /* Modal full-width on mobile */
    .cust-modal[b-ayj7cev44r] {
        max-height: calc(100vh - 2rem);
        max-width: none;
    }
    .cust-modal-grid[b-ayj7cev44r] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 640px) {
    .conv-head[b-ayj7cev44r] { padding: 0.7rem 0.85rem 0.75rem; }
    .conv-title[b-ayj7cev44r] { font-size: 1.2rem; }
    .conv-stream[b-ayj7cev44r] { padding: 0.7rem; }
    .conv-composer[b-ayj7cev44r] { padding: 0.7rem 0.85rem; }
    .msg[b-ayj7cev44r] { max-width: 100%; }
    .cust-modal-head[b-ayj7cev44r] { padding: 1rem 1rem 0.85rem; }
    .cust-modal-body[b-ayj7cev44r] { padding: 1rem; }
}

@keyframes fadeIn-b-ayj7cev44r {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Kontrolki odslaniane najechaniem — na dotyku widoczne zawsze ──────────────
   ⚠ `opacity: 0` + `:hover` to na telefonie funkcja, ktora NIE ISTNIEJE: nie ma
   najechania, wiec nic nie mowi, ze przypiecie wiadomosci albo edycja tematu sa
   w ogole mozliwe. Sonda ukladu tego nie zlapie — mierzy rozmiar elementu, a nie
   to, czy da sie go zobaczyc. Wyszlo dopiero z obejrzenia czystego zrzutu. */
@media (pointer: coarse) {
    .msg-pin[b-ayj7cev44r] { opacity: 0.6; }
    .subject-edit-hint[b-ayj7cev44r] { opacity: 1; }
}
/* /Components/Pages/Conversation/ConversationTasksPanel.razor.rz.scp.css */
.conv-tasks[b-jr1hovzphb] {
    padding: 0;
    overflow: hidden;
}

.conv-tasks-head[b-jr1hovzphb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--line);
}

.conv-tasks-title[b-jr1hovzphb] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.conv-tasks-add[b-jr1hovzphb] {
    background: none;
    border: none;
    color: var(--p1);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

.conv-tasks-add:hover[b-jr1hovzphb] {
    text-decoration: underline;
}

.conv-tasks-list[b-jr1hovzphb] {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.5rem;
    gap: 0.15rem;
}

.conv-tasks-empty[b-jr1hovzphb] {
    font-size: 11.5px;
    color: var(--text-faint);
    padding: 0.35rem;
    line-height: 1.5;
}

.conv-task-item[b-jr1hovzphb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 7px;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    font: inherit;
}

.conv-task-item:hover[b-jr1hovzphb] {
    background: var(--cream);
}

.conv-task-dot[b-jr1hovzphb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.conv-task-dot.tone-todo[b-jr1hovzphb] {
    background: var(--text-faint);
}

.conv-task-dot.tone-progress[b-jr1hovzphb] {
    background: var(--info);
}

.conv-task-dot.tone-done[b-jr1hovzphb] {
    background: var(--ok);
}

.conv-task-title[b-jr1hovzphb] {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-task-agent[b-jr1hovzphb] {
    font-size: 10.5px;
    color: var(--text-faint);
    flex: 0 0 auto;
}
/* /Components/Pages/Conversation/InternalChatPanel.razor.rz.scp.css */
.team-chat[b-ofzzhot8tk] {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.team-chat-head[b-ofzzhot8tk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--line);
}

.team-chat-title[b-ofzzhot8tk] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.team-chat-count[b-ofzzhot8tk] {
    font-size: 11px;
    color: var(--text-faint);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 0 7px;
    line-height: 18px;
}

.team-chat-stream[b-ofzzhot8tk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.7rem 0.85rem;
}

.team-chat-empty[b-ofzzhot8tk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: 1.4rem 0.75rem;
    font-size: 12px;
    color: var(--text-faint);
    line-height: 1.5;
}

.team-chat-empty-ico[b-ofzzhot8tk] {
    width: 30px;
    height: 30px;
    stroke: var(--line-strong);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 0.25rem;
}

.team-chat-empty-hint strong[b-ofzzhot8tk] {
    color: var(--p1);
    font-weight: 600;
}

/* Wiadomość = wiersz: awatar autora (tylko cudze) + bąbel. */
.team-chat-msg[b-ofzzhot8tk] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    max-width: 92%;
    align-self: flex-start;
}

.team-chat-msg.mine[b-ofzzhot8tk] {
    align-self: flex-end;
}

.team-chat-ava[b-ofzzhot8tk] {
    margin-top: 1px;
    width: 26px;
    height: 26px;
    font-size: 10px;
}

.team-chat-bubble[b-ofzzhot8tk] {
    min-width: 0;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
}

.team-chat-msg.mine .team-chat-bubble[b-ofzzhot8tk] {
    background: color-mix(in srgb, var(--p1) 12%, var(--paper));
    border-color: color-mix(in srgb, var(--p1) 30%, var(--line));
}

.team-chat-msg-head[b-ofzzhot8tk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 2px;
}

.team-chat-msg-author[b-ofzzhot8tk] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
}

.team-chat-msg-time[b-ofzzhot8tk] {
    font-size: 10px;
    color: var(--text-faint);
}

.team-chat-msg-body[b-ofzzhot8tk] {
    font-size: 12.5px;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.team-chat-composer[b-ofzzhot8tk] {
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    border-top: 1px solid var(--line);
    align-items: flex-end;
}

.team-chat-input[b-ofzzhot8tk] {
    flex: 1;
    resize: none;
    font: inherit;
    font-size: 12.5px;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--text);
}

.team-chat-input:focus[b-ofzzhot8tk] {
    outline: none;
    border-color: var(--p1);
}

.team-chat-send[b-ofzzhot8tk] {
    white-space: nowrap;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.greet-row[b-gzweo6u5xm] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Alert banner — wzorowany na mockup dashboard.html */
.alert-banner[b-gzweo6u5xm] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--danger);
    background: var(--danger-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    animation: shake-in-b-gzweo6u5xm 0.6s ease-out forwards;
    color: var(--text);
}

@keyframes shake-in-b-gzweo6u5xm {
    0% { transform: translateX(0); opacity: 0; }
    25% { transform: translateX(-3px); opacity: 0.5; }
    50% { transform: translateX(3px); opacity: 0.8; }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); opacity: 1; }
}

.alert-bar[b-gzweo6u5xm] { width: 5px; background: var(--danger); }
.alert-icon[b-gzweo6u5xm] {
    width: 56px;
    display: grid; place-items: center;
    background: rgba(196,57,47,0.08);
    color: var(--danger);
}
.alert-icon svg[b-gzweo6u5xm] { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.alert-content[b-gzweo6u5xm] {
    flex: 1;
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.alert-text[b-gzweo6u5xm] { color: var(--text); }
.alert-text strong[b-gzweo6u5xm] { color: var(--danger); font-weight: 600; }
.alert-text .alert-headline[b-gzweo6u5xm] { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.alert-text .alert-sub[b-gzweo6u5xm] { font-size: 12px; color: var(--text-soft); }
.alert-actions[b-gzweo6u5xm] { display: flex; gap: 0.5rem; }

/* KPI grid — układ kolumn zostaje TUTAJ (jest dashboardowy: sztywne 4 kolumny).
   ⚠ Wygląd samego kafelka (.kpi, .kpi-label, .kpi-value, .kpi-sub) przeniesiony do app.css:
   scoped CSS działa TYLKO w swoim komponencie, a tych klas używają też raporty
   (/reports/sla, /reports/messages) — tam kafelki renderowały się jako goły tekst bez karty. */
.kpi-grid[b-gzweo6u5xm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}

/* Dashboard grid (główna sekcja po KPI) */
.dash-grid[b-gzweo6u5xm] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
}

/* Priority list */
.prio-list[b-gzweo6u5xm] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.prio-row[b-gzweo6u5xm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
    transition: background 0.12s;
}

.prio-list li:last-child .prio-row[b-gzweo6u5xm] { border-bottom: none; }
.prio-row:hover[b-gzweo6u5xm] { background: var(--cream); margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: var(--radius-sm); }

.prio-name[b-gzweo6u5xm] {
    font-weight: 500;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prio-snippet[b-gzweo6u5xm] {
    font-size: 12px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prio-sla[b-gzweo6u5xm] { flex: none; }

/* Responsive */
@media (max-width: 1100px) {
    .kpi-grid[b-gzweo6u5xm] { grid-template-columns: repeat(2, 1fr); }
    .dash-grid[b-gzweo6u5xm] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .kpi-grid[b-gzweo6u5xm] { grid-template-columns: 1fr; gap: 0.6rem; }
    .alert-content[b-gzweo6u5xm] { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
/* /Components/Pages/Email/Email.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   Sekcja Email — widok mail-native (Blok 1: rail skrzynek + lista wątków).
   Makieta źródłowa: tmp/mockups/email.html. Wypełnia .content-wrapper (flex).
   ══════════════════════════════════════════════════════════════════════ */

.email-page[b-htpzkw8q8z] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.email-shell[b-htpzkw8q8z] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    /* Brak otwartego wątku → lista na CAŁĄ szerokość (kolumna czytnika = 0fr).
       Otwarcie wątku → czytnik zajmuje 3fr, lista się zwęża.

       `transition` obsługuje TYLKO zwijanie panelu skrzynek — czyli zmianę klasy na żyjącym
       elemencie. Przy zmianie wątku nie ma czego animować, bo shell renderuje się od razu
       z docelową siatką (klasa `reader-open` liczona z parametru trasy, patrz Email.razor).

       ⚠ Gdyby ktoś wrócił do liczenia `reader-open` ze stanu ustawianego w `OnParametersSetAsync`:
       shell wyrenderuje się najpierw jako zamknięty (czytnik 0fr), a zaraz potem otwarty (3fr) —
       i ten `transition` zacznie animować KAŻDE wejście w wątek, jakby czytnik otwierał się od zera.
       Dokładnie tak wyglądał zgłoszony błąd „wątek wjeżdża z lewej przy każdej zmianie". */
    grid-template-columns: 248px minmax(400px, 1fr) 0fr;
    overflow: hidden;
    transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .email-shell[b-htpzkw8q8z] { transition: none; }
}
.email-shell.reader-open[b-htpzkw8q8z] { grid-template-columns: 248px minmax(400px, 1fr) 3fr; }
.email-shell.rail-collapsed[b-htpzkw8q8z] { grid-template-columns: minmax(400px, 1fr) 0fr; }
.email-shell.rail-collapsed.reader-open[b-htpzkw8q8z] { grid-template-columns: minmax(400px, 1fr) 3fr; }
.email-shell.rail-collapsed .mbox-rail[b-htpzkw8q8z] { display: none; }


/* ── Rail: skrzynki ── */
.mbox-rail[b-htpzkw8q8z] {
    border-right: 1px solid var(--line);
    background: var(--cream);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.rail-head[b-htpzkw8q8z] { padding: 1rem 1.1rem 0.5rem; }
.rail-title[b-htpzkw8q8z] { font-family: 'Instrument Serif', serif; font-size: 1.4rem; line-height: 1; }

.mbox-group[b-htpzkw8q8z] { padding: 0.5rem 0.6rem; }
.mbox-group-foot[b-htpzkw8q8z] { margin-top: auto; }
.mbox-group-label[b-htpzkw8q8z] {
    padding: 0.4rem 0.5rem 0.3rem;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* .mbox-item jest <button> — reset chrome */
.mbox-item[b-htpzkw8q8z] {
    width: 100%;
    text-align: left;
    font-family: inherit;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s;
}
.mbox-item:hover[b-htpzkw8q8z] { background: var(--cream-2); }
.mbox-item.active[b-htpzkw8q8z] { background: var(--paper); box-shadow: var(--shadow-inset); font-weight: 500; }
.mbox-item.disabled[b-htpzkw8q8z] { cursor: default; opacity: 0.55; }
.mbox-item.disabled:hover[b-htpzkw8q8z] { background: none; }

.mbox-dot[b-htpzkw8q8z] { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mbox-dot.ring[b-htpzkw8q8z] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-faint); }
.mbox-item .lbl[b-htpzkw8q8z] { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbox-item .cnt[b-htpzkw8q8z] { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--text-faint); }
.mbox-item .cnt.hot[b-htpzkw8q8z] { background: var(--danger); color: #fff; padding: 0 6px; border-radius: 999px; }

.soon[b-htpzkw8q8z] {
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--p1);
    background: var(--ok-bg);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}
.mbox-empty[b-htpzkw8q8z] { padding: 0.4rem 0.55rem; font-size: 12px; color: var(--text-faint); }

/* ── Foldery e-mail (Gmail UX) — Odebrane/Robocze/Wysłane/Archiwum/Kosz + etykiety/kanały ── */
.fold-group[b-htpzkw8q8z] { padding: 0.3rem 0.6rem; }
.fold-group-label[b-htpzkw8q8z] {
    padding: 0.55rem 0.5rem 0.35rem;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
/* .fold-item bywa <button> — reset chrome (jak .mbox-item) */
.fold-item[b-htpzkw8q8z] {
    width: 100%;
    text-align: left;
    font-family: inherit;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.fold-item:hover[b-htpzkw8q8z] { background: var(--cream-2); }
.fold-item.active[b-htpzkw8q8z] { background: var(--paper); box-shadow: var(--shadow-inset); font-weight: 600; }
.fold-item.active[b-htpzkw8q8z]::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--grad-brand);
}
.fold-item svg[b-htpzkw8q8z] { width: 16px; height: 16px; color: var(--text-soft); stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.fold-item.active svg[b-htpzkw8q8z] { color: var(--p1); }
.fold-item .lbl[b-htpzkw8q8z] { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold-item .cnt[b-htpzkw8q8z] { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--text-faint); }
.fold-item .cnt.hot[b-htpzkw8q8z] { background: var(--danger); color: #fff; padding: 0 6px; border-radius: 999px; }
.fold-item .cnt.draft[b-htpzkw8q8z] { background: var(--warn); color: #6a4a00; padding: 0 6px; border-radius: 999px; font-weight: 600; }
.fold-item.disabled[b-htpzkw8q8z] { cursor: default; opacity: 0.55; }
.fold-item.disabled:hover[b-htpzkw8q8z] { background: none; }

/* etykiety — kolorowa kropka (kropka koloru z EmailChannel.Color; tone-swatch dla tagów jest globalny) */
.lbl-dot[b-htpzkw8q8z] { width: 9px; height: 9px; border-radius: 50%; flex: none; margin: 0 3px; }

/* A4 — etykieta jako cel upuszczenia (wątek pod kursorem podczas przeciągania) */
.fold-item.drag-over[b-htpzkw8q8z] { background: var(--ok-bg); box-shadow: inset 0 0 0 1.5px var(--p1); }
.fold-item.drag-over .lbl[b-htpzkw8q8z] { color: var(--text); font-weight: 600; }
.fold-item.drag-over .lbl-dot[b-htpzkw8q8z] { transform: scale(1.25); transition: transform .1s; }

/* „Edytuj etykiety" — link do strony tagów (wyciszony) */
.fold-add-btn[b-htpzkw8q8z] { color: var(--text-faint); text-decoration: none; }
.fold-add-btn svg[b-htpzkw8q8z] { width: 14px; height: 14px; }
/* „Odznacz wszystkie" — mały link w nagłówku sekcji Etykiety */
.fold-clear[b-htpzkw8q8z] {
    margin-left: auto;
    background: none; border: none; padding: 0;
    font-family: inherit; font-size: 10.5px; font-weight: 600;
    text-transform: none; letter-spacing: 0;
    color: var(--p1); cursor: pointer;
}
.fold-clear:hover[b-htpzkw8q8z] { text-decoration: underline; }
.fold-add-input[b-htpzkw8q8z] {
    width: calc(100% - 1.1rem);
    margin: 0.1rem 0.55rem 0.35rem;
    height: 30px;
    box-sizing: border-box;
    padding: 0 0.6rem;
    background: var(--paper);
    border: 1px solid var(--p1);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
}
.fold-add-input:focus[b-htpzkw8q8z] { outline: none; box-shadow: 0 0 0 3px rgba(1, 147, 68, 0.1); }

/* ── Wskaźnik draftu na wątku (żółty pill z ołówkiem) ── */
.draft-chip[b-htpzkw8q8z] {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0 6px;
    height: 16px;
    border-radius: 999px;
    background: var(--warn-bg);
    color: #8a6512;
    border: 1px solid #f0d9a8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    flex: none;
}
.draft-chip svg[b-htpzkw8q8z] { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }
/* zajawka draftu w kolorze roboczych */
.ti-snippet.draft[b-htpzkw8q8z] { color: #a9791a; font-style: italic; }

/* ── Środek: lista wątków ── */
.thread-list[b-htpzkw8q8z] {
    border-right: 1px solid var(--line);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.tl-head[b-htpzkw8q8z] {
    padding: 0.7rem 0.8rem 0.6rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tl-head-top[b-htpzkw8q8z] { display: flex; align-items: center; gap: 0.5rem; }
.tl-head-bottom[b-htpzkw8q8z] { display: flex; align-items: center; gap: 0.6rem; min-height: 24px; }
.tl-title[b-htpzkw8q8z] { font-weight: 600; font-size: 14px; }
.tl-title small[b-htpzkw8q8z] {
    color: var(--text-faint);
    font-weight: 400;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    margin-left: 0.35rem;
}
/* Znacznik aktywnej etykiety obok „Wątki". Bez niego filtr po etykiecie był niewidoczny —
   lista wyglądała po prostu na pustszą. Klik = wyczyść filtr. */
.tl-labelchip[b-htpzkw8q8z] {
    display: inline-flex; align-items: center; gap: 0.32rem; flex: none; max-width: 42%;
    height: 24px; padding: 0 0.3rem 0 0.45rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--paper);
    color: var(--text-soft); font-family: inherit; font-size: 11.5px; font-weight: 500;
}
.tl-labelchip:hover[b-htpzkw8q8z] { border-color: var(--p1); color: var(--text); }
.lc-dot[b-htpzkw8q8z] { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* min-width:0 — bez tego grid/flex item nie zejdzie poniżej treści i ellipsis nie zadziała. */
.lc-name[b-htpzkw8q8z] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-x[b-htpzkw8q8z] { flex: none; width: 15px; height: 15px; display: inline-grid; place-items: center;
    border-radius: 50%; font-size: 13px; line-height: 1; color: var(--text-faint); }
.tl-labelchip:hover .lc-x[b-htpzkw8q8z] { background: var(--cream-2); color: var(--danger); }

/* Wiersz szkicu NOWEJ wiadomości (folder „Robocze"). Nie ma nadawcy ani wątku, więc zamiast
   inicjałów klienta dostaje ikonę ołówka — od razu widać, że to coś, co sam piszesz. */
.thread-item.compose-draft .draft-avatar[b-htpzkw8q8z] {
    background: var(--warn-bg); color: #8a6512; border: 1px solid #f0d9a8;
    display: inline-grid; place-items: center;
}
.thread-item.compose-draft .draft-avatar svg[b-htpzkw8q8z] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.thread-item.compose-draft .ti-from[b-htpzkw8q8z] { color: var(--text-soft); }

.tl-search[b-htpzkw8q8z] { flex: 1 1 auto; min-width: 0; position: relative; }
.tl-search input[b-htpzkw8q8z] {
    height: 30px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.6rem 0 1.9rem;
    background: var(--cream-2);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
}
.tl-search input:focus[b-htpzkw8q8z] { outline: none; background: var(--paper); border-color: var(--p1); }
.tl-search svg[b-htpzkw8q8z] {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--text-faint);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

/* przełącznik chowania railu */
.rail-toggle[b-htpzkw8q8z] {
    flex: none;
    width: 30px; height: 30px;
    display: inline-grid; place-items: center;
    border: none; background: none; border-radius: var(--radius-sm);
    color: var(--text-faint); cursor: pointer;
}
.rail-toggle:hover[b-htpzkw8q8z] { background: var(--cream-2); color: var(--text); }
.rail-toggle svg[b-htpzkw8q8z] { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* R4 — „Napisz" nowy mail */
.compose-btn[b-htpzkw8q8z] {
    flex: none;
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.7rem; border: none; border-radius: 999px;
    background: #009244;
    color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: background 0.14s;
}
.compose-btn:hover[b-htpzkw8q8z] { background: #007a38; }
.compose-btn svg[b-htpzkw8q8z] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* „Odczytaj wszystkie" */
.tl-readall[b-htpzkw8q8z] {
    flex: none;
    margin-left: auto;
    border: none; background: none;
    font-family: inherit; font-size: 11.5px; color: var(--p1);
    cursor: pointer; padding: 0.2rem 0.35rem; border-radius: var(--radius-sm); font-weight: 500;
    white-space: nowrap;
}
.tl-readall:hover[b-htpzkw8q8z] { background: var(--ok-bg); }

/* pasek akcji masowych */
.bulk-bar[b-htpzkw8q8z] { flex: 1; display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.bulk-count[b-htpzkw8q8z] { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.bulk-act[b-htpzkw8q8z] {
    border: 1px solid var(--line-strong); background: var(--paper);
    font-family: inherit; font-size: 12px; color: var(--text-soft);
    padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
}
.bulk-act:hover[b-htpzkw8q8z] { border-color: var(--p1); color: var(--p1); }
.bulk-clear[b-htpzkw8q8z] {
    margin-left: auto; flex: none;
    width: 26px; height: 26px; display: inline-grid; place-items: center;
    border: none; background: none; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer;
}
.bulk-clear:hover[b-htpzkw8q8z] { background: var(--cream-2); color: var(--text); }
.bulk-clear svg[b-htpzkw8q8z] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* position:relative = kotwica wskaźnika pull-to-refresh; overscroll contain = brak natywnego PTR/chaining */
.tl-scroll[b-htpzkw8q8z] { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }

/* Tło szuflady skrzynek (mobile) — na desktopie nieużywane. */
.mobile-rail-backdrop[b-htpzkw8q8z] { display: none; }
.tl-info[b-htpzkw8q8z] { padding: 1.4rem 1rem; font-size: 13px; color: var(--text-faint); text-align: center; }

/* ── Menu kontekstowe (prawy przycisk) ── */
.ctx-backdrop[b-htpzkw8q8z] { position: fixed; inset: 0; z-index: 300; }
.ctx-menu[b-htpzkw8q8z] {
    position: fixed;
    z-index: 301;
    min-width: 220px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ctx-item[b-htpzkw8q8z] {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%; text-align: left;
    border: none; background: none; font-family: inherit; font-size: 13px; color: var(--text);
    padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer;
}
.ctx-item:hover[b-htpzkw8q8z] { background: var(--cream-2); }
.ctx-item svg[b-htpzkw8q8z] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; color: var(--text-faint); }

.thread-item[b-htpzkw8q8z] {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
    text-decoration: none;
    color: inherit;
    /* Dotyk: żadnego natywnego menu/"lupy"/„otwórz w nowej karcie" po przytrzymaniu (menu = tylko prawy przycisk na PC).
       user-select:none wyłącza zaznaczanie tekstu, które na Androidzie odpalało natywne menu blokujące drag.
       touch-action zostaje domyślne — inaczej padłoby przewijanie listy. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.thread-item:hover[b-htpzkw8q8z] { background: var(--cream); }
.thread-item.picked[b-htpzkw8q8z] { background: var(--ok-bg); }
/* A4 — wiersz w trakcie przeciągania (subtelne wyszarzenie źródła) */
.thread-item.dragging[b-htpzkw8q8z] { opacity: 0.5; }

/* checkbox zaznaczenia — subtelny, widoczny na hover/gdy zaznaczony */
.ti-check[b-htpzkw8q8z] { display: inline-grid; place-items: center; opacity: 0; transition: opacity 0.12s; cursor: pointer; }
.thread-item:hover .ti-check[b-htpzkw8q8z],
.thread-item.picked .ti-check[b-htpzkw8q8z] { opacity: 1; }
.ti-check input[b-htpzkw8q8z] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--p1); }
/* Na dotyku 15 px to jedna trzecia palca — zaznaczanie wątków było loterią.
   Powiększamy kontrolkę i całą etykietę wokół niej; wiersz i tak jest wyższy przez avatar,
   więc lista nie rośnie. ⚠ Ta reguła MUSI być tutaj, nie globalnie: `.ti-check input`
   jest bardziej szczegółowe niż `input[type=checkbox]` i wygrywa z regułą ogólną. */
@media (pointer: coarse) {
    /* ⚠ WAŻNIEJSZE OD ROZMIARU: pole wyboru było odsłaniane najechaniem myszą
       (`opacity: 0` + `:hover`), a na dotyku najechania NIE MA. Na telefonie zaznaczanie
       wątków było więc nie tyle trudne, co NIEWIDOCZNE — nic nie mówiło, że w ogóle istnieje.
       Sonda tego nie łapała, bo mierzy rozmiar elementu, a nie to, czy da się go zobaczyć:
       przezroczysty jest sam rodzic, więc `opacity` samej kontrolki dalej wynosi 1. */
    .ti-check[b-htpzkw8q8z] { opacity: 1; min-width: 40px; min-height: 40px; }
    .ti-check input[b-htpzkw8q8z] { width: 22px; height: 22px; }
}
.thread-item.active[b-htpzkw8q8z] { background: var(--cream-2); }
.thread-item.active[b-htpzkw8q8z]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--grad-brand);
}
.thread-item.unread .ti-from[b-htpzkw8q8z],
.thread-item.unread .ti-subject[b-htpzkw8q8z] { font-weight: 600; color: var(--text); }

.ti-body[b-htpzkw8q8z] { min-width: 0; }
.ti-line1[b-htpzkw8q8z] { display: flex; align-items: center; gap: 0.4rem; }
.ti-from[b-htpzkw8q8z] {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* T4 — licznik wiadomości w wątku: pill z ikoną dymka (dawniej gołe „5" mono, słabo widoczne). */
.ti-count[b-htpzkw8q8z] {
    display: inline-flex; align-items: center; gap: 0.2rem; flex: none;
    padding: 0 6px 0 4px; height: 17px; border-radius: 999px;
    background: var(--cream-2); color: var(--text-soft);
    font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ti-count svg[b-htpzkw8q8z] { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.ti-subject[b-htpzkw8q8z] {
    font-size: 12.5px;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.ti-snippet[b-htpzkw8q8z] {
    font-size: 12px;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.ti-meta[b-htpzkw8q8z] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.ti-date[b-htpzkw8q8z] { font-size: 11px; color: var(--text-faint); font-family: 'Geist Mono', monospace; white-space: nowrap; }
.unread-dot[b-htpzkw8q8z] { width: 8px; height: 8px; border-radius: 50%; background: var(--p1); }

/* ── Gwiazdka „Oznaczone" na wierszu (toggle; klik nie otwiera wątku) ── */
.thread-star[b-htpzkw8q8z] {
    background: none; border: none; padding: 0;
    display: inline-grid; place-items: center;
    width: 20px; height: 20px; cursor: pointer;
    color: var(--text-faint);
    opacity: 0.38;
    transition: opacity 0.12s, color 0.12s, transform 0.1s;
}
.thread-star svg[b-htpzkw8q8z] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.thread-star:hover[b-htpzkw8q8z] { color: var(--warn); transform: scale(1.12); }
/* Kontur odznaczonej gwiazdki widoczny ZAWSZE (na dotyku nie ma hover) — mocniejszy na hover; oznaczona pełna. */
.thread-item:hover .thread-star[b-htpzkw8q8z],
.thread-star:hover[b-htpzkw8q8z],
.thread-star:focus-visible[b-htpzkw8q8z],
.thread-star.starred[b-htpzkw8q8z] { opacity: 1; }
.thread-star.starred[b-htpzkw8q8z] { color: var(--warn); }
.thread-star.starred svg[b-htpzkw8q8z] { fill: currentColor; }

/* avatar-circle (kolor + rozmiar z app.css) — tu tylko zabezpieczenie przed skurczem w gridzie */
.thread-item .avatar-circle[b-htpzkw8q8z] { flex: none; }

/* ── Czytnik ── */
.reader[b-htpzkw8q8z] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;              /* pozwala kolumnie zwinąć się do 0 (grid item ma domyślnie min-width:auto) */
    background: var(--cream);
}
/* Placeholder pustego czytnika niepotrzebny — gdy nic nie otwarte kolumna czytnika ma 0 szerokości. */
.reader-empty[b-htpzkw8q8z] { display: none; }
/* ── Czytnik NIE wjeżdża animacją. Świadoma rezygnacja, nie przeoczenie ──────────────────────────
   Był tu slajd `reader-in` z klasą `reader-anim`, dodawaną tylko przy przejściu zamknięty→otwarty.
   Wyglądało to poprawnie i NIE DZIAŁAŁO: slajd leciał przy każdej zmianie wątku. Dwa powody, oba
   zmierzone w przeglądarce (`scratchpad/Probe-Anim.ps1`):

   1. Przy zmianie /email/thread/A → /B Blazor odtwarza CAŁY komponent strony — `.email-shell`
      i lista wątków to nowe węzły DOM. Żadne pole C# nie przeżywa, więc nie da się odróżnić
      „pierwsze otwarcie" od „kolejny wątek": po odtworzeniu zawsze wygląda jak pierwsze.
   2. `.thread-reader` też jest nowym węzłem, a animacja CSS odpala się na każdym nowo wstawionym
      elemencie — „już się odegrała" nie istnieje.

   Warunek dałoby się utrzymać poza komponentem (sessionStorage), ale klasę można dopiąć dopiero
   PO pierwszym renderze — czyli czytnik najpierw mignąłby w pełni, a potem wjechał. Gorzej niż brak
   animacji. Gdyby slajd miał wrócić, trzeba najpierw przestać odtwarzać komponent przy zmianie wątku. */
.reader-empty-inner[b-htpzkw8q8z] { text-align: center; color: var(--text-faint); padding: 2rem; }
.reader-empty-icon[b-htpzkw8q8z] {
    width: 46px;
    height: 46px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
    opacity: 0.5;
    margin-bottom: 0.8rem;
}
.reader-empty-title[b-htpzkw8q8z] { font-size: 15px; font-weight: 600; color: var(--text-soft); }
.reader-empty-sub[b-htpzkw8q8z] { font-size: 12.5px; margin-top: 0.3rem; }

/* A4 — pigułka potwierdzenia po upuszczeniu wątku na etykietę */
.drop-flash[b-htpzkw8q8z] {
    position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 300;
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem;
    background: var(--ok-bg); border: 1px solid var(--p1); border-radius: 999px;
    font-size: 12.5px; color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    animation: drop-flash-in-b-htpzkw8q8z 0.2s ease;
}
.drop-flash svg[b-htpzkw8q8z] { width: 15px; height: 15px; stroke: var(--p1); fill: none; stroke-width: 2.2; flex: none; }
@keyframes drop-flash-in-b-htpzkw8q8z { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Chip etykiety poczty w wierszu wątku (obok gwiazdki/draft-chipa) ── */
.lbl-chip[b-htpzkw8q8z] {
    display: inline-flex; align-items: center; gap: 0.28rem;
    padding: 0 7px; height: 16px; border-radius: 999px;
    background: color-mix(in srgb, var(--lbl-color, #3b82f6) 14%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--lbl-color, #3b82f6) 45%, transparent);
    color: var(--text-soft);
    font-size: 10px; font-weight: 600; letter-spacing: .01em;
    white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.lbl-chip-dot[b-htpzkw8q8z] { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--lbl-color, #3b82f6); }

/* ── Filtr po tagach w nagłówku listy (rozwijany panel; osobny od etykiet poczty) ── */
.tl-tagfilter[b-htpzkw8q8z] { position: relative; margin-left: auto; flex: none; }
.tagfilter-btn[b-htpzkw8q8z] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.22rem 0.5rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); font-family: inherit; font-size: 11.5px; color: var(--text-soft); cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.tagfilter-btn:hover[b-htpzkw8q8z], .tagfilter-btn.on[b-htpzkw8q8z] { border-color: var(--p1); color: var(--p1); }
.tagfilter-btn.has[b-htpzkw8q8z] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
.tagfilter-btn svg[b-htpzkw8q8z] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.tagfilter-btn .tagfilter-chev[b-htpzkw8q8z] { width: 11px; height: 11px; }
.tagfilter-cnt[b-htpzkw8q8z] {
    display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 999px; background: var(--p1); color: #fff; font-size: 9.5px; font-weight: 700;
    font-family: 'Geist Mono', monospace;
}
.tagfilter-backdrop[b-htpzkw8q8z] { position: fixed; inset: 0; z-index: 200; }
.tagfilter-panel[b-htpzkw8q8z] {
    position: absolute; top: calc(100% + 5px); right: 0; z-index: 201;
    display: flex; flex-direction: column; gap: 1px;
    min-width: 200px; max-width: 260px; max-height: 300px; overflow-y: auto; padding: 5px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
}
.tagfilter-head[b-htpzkw8q8z] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.35rem 0.45rem 0.4rem; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 600;
}
.tagfilter-clear[b-htpzkw8q8z] {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--p1);
}
.tagfilter-clear:hover[b-htpzkw8q8z] { text-decoration: underline; }
.tagfilter-empty[b-htpzkw8q8z] { padding: 0.5rem 0.55rem; font-size: 11.5px; color: var(--text-faint); }
.tagfilter-opt[b-htpzkw8q8z] {
    display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
    padding: 0.4rem 0.5rem; border: none; background: none; border-radius: 7px;
    cursor: pointer; color: var(--text); font-family: inherit; font-size: 12.5px;
}
.tagfilter-opt:hover[b-htpzkw8q8z] { background: var(--cream-2); }
.tagfilter-opt.sel[b-htpzkw8q8z] { background: var(--ok-bg); }
.tagfilter-check[b-htpzkw8q8z] { width: 14px; flex: none; color: var(--p1); font-weight: 700; font-size: 11px; text-align: center; }
.tagfilter-dot[b-htpzkw8q8z] { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tagfilter-name[b-htpzkw8q8z] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Overlay drop-zon etykiet (podczas przeciągania wątku) — kwadraty na dole/środku ekranu ──
   Wrapper nie łapie zdarzeń (pointer-events:none), tylko siatka kwadratów — żeby nie blokować UI pod spodem. */
.label-drop-overlay[b-htpzkw8q8z] {
    --sq: 92px;   /* rozmiar kwadratu-etykiety; mobilnie zmniejszany w media query */
    position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 320;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    /* definite width (nie tylko max-width) — inaczej siatka (shrink-to-fit) losowo dawała 1–2 kolumny */
    width: min(92vw, 720px); pointer-events: none;
}
.label-drop-hint[b-htpzkw8q8z] {
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-soft); background: var(--paper); border: 1px solid var(--line);
    padding: 0.2rem 0.7rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.label-drop-grid[b-htpzkw8q8z] {
    /* Grid z auto-fit — spójna liczba kolumn wypełniająca szerokość (flex-wrap dawał 1 kol. na wąskich ekranach).
       auto-fit zwija puste tory, justify-content centruje ostatni niepełny rząd. */
    display: grid; grid-template-columns: repeat(auto-fit, var(--sq, 92px));
    justify-content: center; gap: 0.5rem; width: fit-content; max-width: 100%;
    padding: 0.7rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); pointer-events: auto;
    /* Wiele etykiet (np. 10+): siatka nigdy nie może zasłonić całego ekranu ani wyjechać poza górę —
       kapujemy wysokość i pozwalamy przewijać samą siatkę. */
    max-height: min(48vh, 360px); overflow-y: auto;
}
.label-drop-square[b-htpzkw8q8z] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
    width: var(--sq, 92px); height: 72px; padding: 0.4rem;
    border-radius: 12px; border: 2px dashed color-mix(in srgb, var(--lbl-color, #3b82f6) 55%, transparent);
    background: color-mix(in srgb, var(--lbl-color, #3b82f6) 8%, var(--paper));
    cursor: copy; transition: transform 0.1s, box-shadow 0.12s, background 0.12s;
}
.label-drop-square.over[b-htpzkw8q8z] {
    transform: scale(1.06);
    background: color-mix(in srgb, var(--lbl-color, #3b82f6) 20%, var(--paper));
    box-shadow: 0 0 0 2px var(--lbl-color, #3b82f6) inset;
}
.lds-dot[b-htpzkw8q8z] { width: 14px; height: 14px; border-radius: 50%; background: var(--lbl-color, #3b82f6); flex: none; pointer-events: none; }
.lds-name[b-htpzkw8q8z] {
    font-size: 11px; font-weight: 600; color: var(--text); text-align: center; line-height: 1.15;
    max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    pointer-events: none;
}

/* ── Responsywność ── */
/* Tablet: rail chowany, zostają 2 kolumny (lista + reader). */
@media (max-width: 1200px) and (min-width: 821px) {
    .email-shell[b-htpzkw8q8z],
    .email-shell.rail-collapsed[b-htpzkw8q8z] { grid-template-columns: minmax(320px, 1fr) 0fr; }
    .email-shell.reader-open[b-htpzkw8q8z],
    .email-shell.rail-collapsed.reader-open[b-htpzkw8q8z] { grid-template-columns: minmax(320px, 1fr) 3fr; }
    .mbox-rail[b-htpzkw8q8z] { display: none; }
}

/* Mobile: drill-down. Lista PEŁNY EKRAN; po tapnięciu wątku — reader pełny ekran (lista schowana),
   X w czytniku wraca do listy. Skrzynki jako poziome chipy nad listą (rail ukryty). */
@media (max-width: 820px) {
    .email-shell[b-htpzkw8q8z],
    .email-shell.rail-collapsed[b-htpzkw8q8z] { display: block; position: relative; }

    .thread-list[b-htpzkw8q8z] { display: flex; height: 100%; border-right: none; }
    .reader[b-htpzkw8q8z] { display: none; }
    .email-shell.reader-open .thread-list[b-htpzkw8q8z] { display: none; }
    .email-shell.reader-open .reader[b-htpzkw8q8z] { display: flex; height: 100%; }
    .reader-empty[b-htpzkw8q8z] { display: none; }

    /* Skrzynki jako SZUFLADA — otwierana przyciskiem (rail-toggle) w nagłówku listy.
       Pokazuje pełną listę skrzynek (jak na desktopie), nie chipy.
       Nadpisujemy też `.rail-collapsed .mbox-rail{display:none}` (desktopowe) — na mobile rail-toggle
       flipuje railCollapsed, ale to NIE może ukryć szuflady. */
    .mbox-rail[b-htpzkw8q8z],
    .email-shell.rail-collapsed .mbox-rail[b-htpzkw8q8z] {
        display: flex;
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 120;
        width: 80%; max-width: 320px;
        transform: translateX(-100%);
        transition: transform 0.24s ease;
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.28);
    }
    .email-shell.mobile-rail-open .mbox-rail[b-htpzkw8q8z] { transform: translateX(0); }
    .mobile-rail-backdrop[b-htpzkw8q8z] { display: none; }
    .email-shell.mobile-rail-open .mobile-rail-backdrop[b-htpzkw8q8z] {
        display: block; position: fixed; inset: 0; z-index: 119;
        background: rgba(20, 22, 28, 0.45);
    }

    /* Overlay etykiet na mobile: mniejsze kwadraty (--sq), by 10+ etykiet mieściło się w mniej rzędach
       i nie zjadało całego ekranu (siatka i tak jest przewijalna przez max-height wyżej). */
    .label-drop-overlay[b-htpzkw8q8z] { --sq: 74px; bottom: 0.9rem; width: min(96vw, 520px); }
    .label-drop-square[b-htpzkw8q8z] { height: 58px; }
    .lds-dot[b-htpzkw8q8z] { width: 12px; height: 12px; }
    .lds-name[b-htpzkw8q8z] { font-size: 10px; }
}

/* ── Cele dotykowe na telefonie ────────────────────────────────────────────────
   Zmierzone na 390 px: "Napisz" 80x27, "Tagi" 70x25, "Odczytaj wszystkie" 114x23,
   gwiazdka 20x20, przelacznik skrzynek 30x30. Palec to ~9 mm, czyli ~44 px —
   w 20-pikselowa gwiazdke miedzy dwoma wierszami listy trafia sie na trzeci raz.
   Powiekszamy POLE KLIKANIA, nie tekst i nie ikone: gestosc listy zostaje bez zmian.
   Tylko pod (pointer: coarse) — na komputerze interfejs sie nie rozpycha. */
@media (pointer: coarse) {
    .compose-btn[b-htpzkw8q8z],
    .tagfilter-btn[b-htpzkw8q8z],
    .tl-readall[b-htpzkw8q8z] { min-height: 38px; }

    .rail-toggle[b-htpzkw8q8z] { width: 38px; height: 38px; }

    /* Gwiazdka i tak stoi w wolnym miejscu obok godziny — powiekszamy sam obszar
       dotyku, ikona zostaje 15 px, wiec wizualnie nic sie nie zmienia. */
    .thread-star[b-htpzkw8q8z] {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* /Components/Pages/Email/EmailComposeModal.razor.rz.scp.css */
/* Modal „Napisz" — nowy wątek e-mail. Bazuje na globalnym .modal-overlay/.modal-dialog/.form-input/.btn. */

.compose-modal[b-arz1dtfgf7] { width: min(640px, 94vw); max-height: 90vh; display: flex; flex-direction: column; }

.compose-head[b-arz1dtfgf7] { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.2rem 0.7rem; border-bottom: 1px solid var(--line); }
.compose-title[b-arz1dtfgf7] { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.4rem; margin: 0; color: var(--text); }
.compose-head .modal-close[b-arz1dtfgf7] { margin-left: auto; }

.compose-body[b-arz1dtfgf7] { padding: 0.9rem 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; }
.compose-field[b-arz1dtfgf7] { display: flex; flex-direction: column; gap: 0.25rem; }
.compose-label[b-arz1dtfgf7] { font-size: 11.5px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.compose-nomailbox[b-arz1dtfgf7] { font-size: 12.5px; color: var(--text-faint); padding: 0.4rem 0; }
.compose-area[b-arz1dtfgf7] { min-height: 160px; field-sizing: content; max-height: 42vh; resize: vertical; line-height: 1.5; }
.compose-error[b-arz1dtfgf7] { align-self: flex-start; }

.compose-foot[b-arz1dtfgf7] { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.2rem; border-top: 1px solid var(--line); }
.compose-sig[b-arz1dtfgf7] { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.compose-hint[b-arz1dtfgf7] { font-size: 11px; color: var(--text-faint); }

/* Podpis — podgląd + wybór (kopia stylów z czytnika; scoped CSS nie przechodzi między komponentami) */
.sig-pick[b-arz1dtfgf7] { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 11.5px; color: var(--text-faint); }
.sig-pick select[b-arz1dtfgf7] { font-family: inherit; font-size: 11.5px; color: var(--text); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.15rem 0.4rem; max-width: 190px; }
.sig-toggle[b-arz1dtfgf7] { border: none; background: none; padding: 0; font-size: 11.5px; color: var(--p1); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.sig-preview[b-arz1dtfgf7] { border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--cream); overflow: hidden; }
.sig-preview-label[b-arz1dtfgf7] { padding: 0.3rem 0.6rem; font-size: 10.5px; color: var(--text-faint); border-bottom: 1px dashed var(--line); background: var(--cream-2); }
.sig-preview-body[b-arz1dtfgf7] { padding: 0.55rem 0.7rem; font-size: 12.5px; color: var(--text); max-height: 140px; overflow: auto; overflow-wrap: anywhere; }
.sig-preview-body img[b-arz1dtfgf7] { max-width: 100%; height: auto; }

/* Minimalny WYSIWYG — toolbar + contenteditable (scoped CSS nie przechodzi między komponentami). */
.rich-toolbar[b-arz1dtfgf7] { display: flex; gap: 0.25rem; padding: 0.3rem 0.4rem; border: 1px solid var(--line-strong); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--cream-2); }
.rich-toolbar .btn[b-arz1dtfgf7] { padding: 0.2rem 0.45rem; min-width: 30px; line-height: 1; }
.rich-toolbar .btn svg[b-arz1dtfgf7] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rich-toolbar .btn strong[b-arz1dtfgf7], .rich-toolbar .btn em[b-arz1dtfgf7] { font-size: 13px; }
.rich-editor[b-arz1dtfgf7] { min-height: 160px; max-height: 42vh; overflow: auto; line-height: 1.5; padding: 0.5rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 0 0 var(--radius-sm) var(--radius-sm); outline: none; overflow-wrap: anywhere; background: var(--paper); color: var(--text); font-family: inherit; font-size: 13.5px; }
.rich-editor:focus[b-arz1dtfgf7] { border-color: var(--p1); }
.rich-editor:empty[b-arz1dtfgf7]::before { content: attr(data-placeholder); color: var(--text-faint); }
.rich-editor img.abc-inline-img[b-arz1dtfgf7] { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 0.3rem 0; }

/* 2b — spinacz + chipy załączników-plików (scoped na modal; te same klasy co reply, osobny komponent) */
.rich-toolbar .rich-attach[b-arz1dtfgf7] { cursor: pointer; display: inline-grid; place-items: center; }
.reply-atts[b-arz1dtfgf7] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.reply-att-chip[b-arz1dtfgf7] { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 260px; padding: 0.25rem 0.35rem 0.25rem 0.55rem; background: var(--cream); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11.5px; color: var(--text); }
.reply-att-chip > svg[b-arz1dtfgf7] { width: 13px; height: 13px; stroke: var(--ch-email, currentColor); fill: none; stroke-width: 1.7; flex: none; }
.reply-att-chip .rac-name[b-arz1dtfgf7] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-att-chip .rac-size[b-arz1dtfgf7] { color: var(--text-faint); font-family: 'Geist Mono', monospace; font-size: 10px; flex: none; }
.reply-att-chip .rac-remove[b-arz1dtfgf7] { border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; flex: none; border-radius: 50%; }
.reply-att-chip .rac-remove:hover:not(:disabled)[b-arz1dtfgf7] { color: var(--danger); background: var(--line); }

/* ── #8c — DW/UDW w kompozytorze (pola schowane domyślnie, jak przy odpowiedzi) ── */
.compose-to-row[b-arz1dtfgf7] { display: flex; align-items: center; gap: 0.4rem; }
.compose-to-row .form-input[b-arz1dtfgf7] { flex: 1 1 auto; min-width: 0; }
.compose-cc-toggle[b-arz1dtfgf7] { flex: none; padding: 0 10px; height: 32px; border-radius: 999px; border: 1px dashed var(--line-strong); background: none; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.compose-cc-toggle:hover[b-arz1dtfgf7], .compose-cc-toggle.on[b-arz1dtfgf7] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); border-style: solid; }
.compose-cc[b-arz1dtfgf7] { gap: 0.4rem; }
.compose-cc-line[b-arz1dtfgf7] { display: flex; align-items: center; gap: 0.5rem; }
.compose-cc-lbl[b-arz1dtfgf7] { flex: none; width: 34px; font-size: 11px; font-weight: 600; color: var(--text-faint); }
.compose-cc-line .form-input[b-arz1dtfgf7] { flex: 1 1 auto; min-width: 0; }

/* ── #8c — dziedziczone załączniki (forward): read-only, bez „×" ── */
.compose-inherited[b-arz1dtfgf7] { align-items: center; }
.compose-inherited-lbl[b-arz1dtfgf7] { font-size: 11px; color: var(--text-faint); font-weight: 600; flex: none; }
.reply-att-chip.inherited[b-arz1dtfgf7] { background: var(--ok-bg); border-color: color-mix(in srgb, var(--p1) 35%, transparent); }
.reply-att-chip.inherited > svg[b-arz1dtfgf7] { stroke: var(--p1); }

/* ── K3-4 — pasek „Cofnij" (kopia stylu z czytnika; scoped CSS nie przechodzi między komponentami) ── */
.reply-undo[b-arz1dtfgf7] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem 0.3rem 0.7rem;
    background: var(--warn-bg); border: 1px solid #f0d9a8; border-radius: 999px; }
.reply-undo > svg[b-arz1dtfgf7] { width: 16px; height: 16px; stroke: #8a6512; fill: none; stroke-width: 2; flex: none; }
.reply-undo-txt[b-arz1dtfgf7] { font-size: 13px; color: #8a6512; }
.reply-undo-txt strong[b-arz1dtfgf7] { font-variant-numeric: tabular-nums; }

/* ── M1 — kompozytor „Napisz/Przekaż" na PEŁNY EKRAN na mobile ──
   Wcześniej modal (max-height 90vh) zostawiał biały pas pod stopką (~1/4 ekranu) i ucinał się.
   Fullscreen: head + body(rośnie, scroll) + foot(zakotwiczona na dole); edytor wypełnia wolne miejsce. */
@media (max-width: 820px) {
    .modal-overlay[b-arz1dtfgf7] { padding: 0; }
    .compose-modal[b-arz1dtfgf7] {
        width: 100%; max-width: none;
        height: 100dvh; max-height: none;
        border-radius: 0;
    }
    .compose-body[b-arz1dtfgf7] { flex: 1 1 auto; min-height: 0; }
    /* Pole „Treść" (to z edytorem) wypełnia wolną przestrzeń; edytor rośnie razem z nim. */
    .compose-field:has(.rich-editor)[b-arz1dtfgf7] { flex: 1 1 auto; min-height: 0; }
    .rich-editor[b-arz1dtfgf7] { flex: 1 1 auto; max-height: none; min-height: 120px; }
    .compose-foot[b-arz1dtfgf7] { flex: none; flex-wrap: wrap; row-gap: 0.4rem; }
    .compose-sig[b-arz1dtfgf7] { min-width: 0; }
}

/* ── V2 — X „zamknij" widoczny w trybie JASNYM. Globalny .modal-close jest biały (na ciemny nagłówek),
   a nagłówek kompozytora jest jasny (paper) → biały X był niewidoczny. Ciemny znak + subtelny hover. */
.compose-head .modal-close[b-arz1dtfgf7] { background: none; color: var(--text-soft); }
.compose-head .modal-close:hover[b-arz1dtfgf7] { background: var(--cream-2); color: var(--text); }
.compose-head .modal-close svg[b-arz1dtfgf7] { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* ── V1 — oznaczanie niepoprawnych adresów e-mail ── */
.form-input.addr-invalid[b-arz1dtfgf7] { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent); }
.compose-addr-warn[b-arz1dtfgf7] { margin-top: 0.3rem; font-size: 11.5px; color: var(--danger); overflow-wrap: anywhere; }
/* /Components/Pages/Email/EmailThread.razor.rz.scp.css */
/* Pełnookienny czytnik wątku (route /email/window/{id}) — wypełnia .content-wrapper. */
.email-standalone[b-3953lzt2a5] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    background: var(--cream);
}
/* /Components/Pages/Email/EmailThreadReader.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════
   Czytnik wątku e-mail (Blok 2). Makieta: tmp/mockups/email.html (.msg / .quote / .att).
   ══════════════════════════════════════════════════════════════════════ */

.thread-reader[b-g4ufztonjl] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Wjazd treści przy otwarciu PIERWSZEGO wątku (gdy wcześniej nic nie było otwarte).
   ⚠ Klasę `abc-wjazd` dopina JavaScript z App.razor, nie Blazor — i to jest konieczne, nie fanaberia:
   zmiana wątku odtwarza cały komponent strony, więc dla CSS „pierwsze otwarcie" i „kolejny wątek"
   wyglądają identycznie, a żaden stan w C# tego nie przeżyje. Pamięć o tym, czy czytnik był już
   otwarty, żyje w sessionStorage — czyli w jedynym miejscu, które przeżywa nawigację. */
.thread-reader.abc-wjazd[b-g4ufztonjl] {
    animation: reader-in-b-g4ufztonjl 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes reader-in-b-g4ufztonjl {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .thread-reader.abc-wjazd[b-g4ufztonjl] { animation: none; }
}

/* R3.1 — potwierdzenie po utworzeniu zadania z maila (floating pigułka) */
.task-flash[b-g4ufztonjl] { position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.4rem 0.4rem 0.75rem; background: var(--ok-bg); border: 1px solid var(--p1); border-radius: 999px; font-size: 12.5px; color: var(--text); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.task-flash > svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: var(--p1); fill: none; stroke-width: 2; flex: none; }
.task-flash a[b-g4ufztonjl] { color: var(--p1); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.task-flash-x[b-g4ufztonjl] { width: 20px; height: 20px; display: inline-grid; place-items: center; border: none; background: none; color: var(--text-faint); cursor: pointer; border-radius: var(--radius-sm); flex: none; }
.task-flash-x svg[b-g4ufztonjl] { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.task-flash-x:hover[b-g4ufztonjl] { background: var(--line); color: var(--text); }
.tr-info[b-g4ufztonjl] { padding: 2rem 1.4rem; color: var(--text-faint); font-size: 13px; }

/* ── Nagłówek ── */
.reader-head[b-g4ufztonjl] {
    padding: 1rem 1.4rem 0.85rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    /* Nagłówek mierzy SIEBIE, nie okno — patrz @container niżej. */
    container-type: inline-size;
    container-name: rh;
}
.rh-top[b-g4ufztonjl] { display: flex; align-items: flex-start; gap: 1rem; }
/* ⚠ `flex: 1` jest tu OBOWIĄZKOWE, nie kosmetyczne. Bez niego temat ma flex-basis:auto i przy
   `min-width: 0` kurczy się do NAJDŁUŻSZEGO SŁOWA, bo sąsiedni pasek akcji ma `flex: none`
   i nie ustępuje ani piksela. Efekt: „Problem / z / płatnością / BLIK / #164830" w siedmiu
   linijkach obok metra wolnego miejsca. Skracamy wielokropkiem — temat to jedna linia. */
.rh-subject[b-g4ufztonjl] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.15;
    color: var(--text);
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rh-actions[b-g4ufztonjl] { margin-left: auto; display: flex; gap: 0.4rem; flex: none; align-items: center; }
.reader-close[b-g4ufztonjl] {
    width: 32px; height: 32px;
    display: inline-grid; place-items: center;
    border: none; background: none; border-radius: var(--radius-sm);
    color: var(--text-faint); cursor: pointer;
}
.reader-close:hover[b-g4ufztonjl] { background: var(--cream-2); color: var(--text); }
.reader-close svg[b-g4ufztonjl] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── #8 — „⋯" (rzadsze akcje). DESKTOP: .rh-more i .rh-more-menu są PRZEZROCZYSTE dla layoutu
   (display: contents), więc ich przyciski leżą płasko w .rh-actions dokładnie jak przed redesignem —
   zero zmian dla desktopu przy jednym kawałku markupu. Samo „⋯" ukryte. ── */
.rh-more[b-g4ufztonjl] { display: contents; }
.rh-more-menu[b-g4ufztonjl] { display: contents; }
.rh-more-btn[b-g4ufztonjl] { display: none; }
.rh-more-backdrop[b-g4ufztonjl] { position: fixed; inset: 0; z-index: 40; }

/* ── Rzadsze akcje chowają się pod „⋯", gdy pasek jest za wąski ──────────────────────────────
   Pasek ma sześć przycisków z etykietami („Jako zgłoszenie", „Oznacz jako nieprzeczytaną", …)
   i zajmuje ok. 880 px. Na temat zostawało ~120 px, więc łamał się na pojedyncze słowa.

   ⚠ To MUSI być @container, nie @media. Szerokość czytnika nie wynika z szerokości okna, tylko
   z tego, ile paneli jest otwartych: przy trzech kolumnach (skrzynki + wątki + czytnik) na Full HD
   czytnik ma ~1030 px, a przy zwiniętych panelach — dwa razy tyle. Próg liczony po oknie mijał się
   z celem: przy 1920 px okno jest „szerokie", a pasek ciasny. Container query pyta sam pasek.

   Próg: 880 px akcji + ~320 px na sensowny temat. */
@container rh (max-width: 1200px) {
    .rh-more[b-g4ufztonjl] { display: inline-block; position: relative; flex: none; }
    .rh-more-btn[b-g4ufztonjl] { display: inline-grid; }
    .rh-more-btn.on[b-g4ufztonjl] { background: var(--cream-2); color: var(--text); }
    .rh-more-menu[b-g4ufztonjl] {
        display: none;
        position: absolute; top: calc(100% + 6px); right: 0; z-index: 41;
        flex-direction: column; gap: 1px; min-width: 208px; padding: 4px;
        background: var(--paper); border: 1px solid var(--line);
        border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
        animation: ai-menu-pop-b-g4ufztonjl .16s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .rh-more.on .rh-more-menu[b-g4ufztonjl] { display: flex; }
    /* Pozycje wyglądają jak menu, nie jak przyciski paska (kasuje obrys/tło .btn-secondary). */
    .rh-actions .rh-more-menu .btn.btn-secondary[b-g4ufztonjl] {
        display: flex; align-items: center; justify-content: flex-start; gap: 0.55rem;
        width: 100%; min-width: 0; padding: 0.5rem; text-align: left;
        border: none; background: none; border-radius: 7px;
        font-size: 12.5px; font-weight: 400; color: var(--text);
    }
    .rh-actions .rh-more-menu .btn.btn-secondary svg[b-g4ufztonjl] { width: 15px; height: 15px; margin: 0; flex: none; color: var(--text-faint); }
    .rh-actions .rh-more-menu .btn.btn-secondary:hover[b-g4ufztonjl] { background: var(--cream-2); }
    .rh-actions .rh-more-menu .btn.spam-on[b-g4ufztonjl] { color: var(--danger); }
}

/* Mobile — przycisk powrotu do listy (drill-down). Desktop: ukryty (lista jest obok). */
.reader-back[b-g4ufztonjl] { display: none; }
@media (max-width: 820px) {
    .reader-back[b-g4ufztonjl] {
        display: inline-grid; place-items: center; flex: none;
        width: 36px; height: 36px; margin-right: 0.15rem;
        border: none; background: none; border-radius: var(--radius-sm);
        color: var(--text); cursor: pointer;
    }
    .reader-back svg[b-g4ufztonjl] { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
    .reader-head[b-g4ufztonjl] { padding: 0.4rem 0.75rem 0.45rem; }

    /* Temat: CAŁA szerokość, POD paskiem ikon. Wcześniej siedział między „‹" a rzędem siedmiu ikon
       (zostawało mu ~90 px) i zawijał się na cztery linijki. Bez zmiany DOM: flex-wrap + order —
       back(0) → actions(2) → subject(3, flex-basis 100% = własny rząd).
       Większy/mocniejszy tytuł = więcej obecności, mniej wrażenia pustej przestrzeni w nagłówku. */
    .rh-top[b-g4ufztonjl] { align-items: center; flex-wrap: wrap; gap: 0; }
    .rh-actions[b-g4ufztonjl] { order: 2; gap: 0.1rem; }
    .rh-subject[b-g4ufztonjl] {
        order: 3; flex-basis: 100%; margin-top: 0.05rem;
        font-size: 1.35rem; line-height: 1.2;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* „×" zbędny — „‹" po lewej robi dokładnie to samo (powrót do listy). */
    .rh-close-x[b-g4ufztonjl] { display: none; }

    /* Menu „⋯" jest już włączone wyżej (max-width: 1800px) — tu nie ma czego powtarzać. */
}

.rh-meta[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; flex-wrap: wrap; }
/* Dane wątku (skrzynka / klient / szkic). DESKTOP: display:contents → leżą płasko w .rh-meta jak dawniej,
   a „szczegóły" nie istnieje (tam wszystko widać od razu). MOBILE: chowają się — patrz media query niżej. */
.rh-facts[b-g4ufztonjl] { display: contents; }
.rh-details-btn[b-g4ufztonjl] { display: none; }
.rh-channel[b-g4ufztonjl] { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 12.5px; color: var(--text-soft); }
.rh-channel .channel-icon[b-g4ufztonjl] { width: 18px; height: 18px; font-size: 10px; }
.rh-sub[b-g4ufztonjl] { color: var(--text-faint); font-size: 12px; }

/* Chip „masz szkic odpowiedzi" w nagłówku (scoped — .draft-chip z Email.razor.css nie przekracza granicy komponentu) */
.draft-chip[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.28rem;
    padding: 0 6px; height: 18px; border-radius: 999px;
    background: var(--warn-bg); color: #8a6512; border: 1px solid #f0d9a8;
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; flex: none;
}
.draft-chip svg[b-g4ufztonjl] { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Gwiazdka „Oznaczone" w nagłówku czytnika (reużywa .reader-close jako baza ikony 32px) */
.rh-star svg[b-g4ufztonjl] { fill: none; }
.rh-star:hover[b-g4ufztonjl] { color: var(--warn); }
.rh-star.starred[b-g4ufztonjl] { color: var(--warn); }
.rh-star.starred svg[b-g4ufztonjl] { fill: currentColor; }

/* „To nie spam" — subtelne wyróżnienie przycisku gdy konwersacja jest już w Spamie */
.rh-actions .btn.spam-on[b-g4ufztonjl] { color: var(--danger); }

/* ── Etykieta poczty w nagłówku (single, mailowy system ODRĘBNY od tagów) — chip aktualnej + dropdown zmiany ── */
.rh-label[b-g4ufztonjl] { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
/* Chip = PRZYCISK (sam otwiera listę). Wcześniej był <span> + osobne „zmień" obok — chip wyglądał
   na klikalny, ale nie był, a na dotyku to pierwsza rzecz, w którą celuje palec. */
.rh-label-chip[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 1px 6px 1px 7px; height: 20px; border-radius: 999px;
    background: color-mix(in srgb, var(--rh-lbl-color, #3b82f6) 14%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--rh-lbl-color, #3b82f6) 45%, transparent);
    font-family: inherit; font-size: 11px; color: var(--text); white-space: nowrap; max-width: 220px;
    cursor: pointer;
}
.rh-label-chip:hover[b-g4ufztonjl], .rh-label-chip.on[b-g4ufztonjl] {
    background: color-mix(in srgb, var(--rh-lbl-color, #3b82f6) 24%, var(--paper));
    border-color: var(--rh-lbl-color, #3b82f6);
}
.rh-label-caret[b-g4ufztonjl] { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.4; flex: none; opacity: .5; transition: transform .15s; }
.rh-label-chip.on .rh-label-caret[b-g4ufztonjl] { transform: rotate(180deg); opacity: .8; }
.rh-label-dot[b-g4ufztonjl] { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--rh-lbl-color, #3b82f6); }
.rh-label-dot.none[b-g4ufztonjl] { background: none; border: 1.5px dashed var(--line-strong); }
.rh-label-name[b-g4ufztonjl] { overflow: hidden; text-overflow: ellipsis; }
.rh-label-btn[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 1px 8px; height: 20px; border-radius: 999px;
    border: 1px dashed var(--line-strong); background: none;
    font-family: inherit; font-size: 11px; color: var(--text-soft); cursor: pointer;
}
.rh-label-btn:hover[b-g4ufztonjl], .rh-label-btn.on[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
.rh-label-btn svg[b-g4ufztonjl] { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.rh-label-backdrop[b-g4ufztonjl] { position: fixed; inset: 0; z-index: 40; }
.rh-label-menu[b-g4ufztonjl] {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 41;
    display: flex; flex-direction: column; gap: 1px;
    min-width: 190px; max-height: 260px; overflow-y: auto; padding: 4px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
    animation: ai-menu-pop-b-g4ufztonjl .16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rh-label-opt[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.5rem; text-align: left; width: 100%;
    padding: 0.4rem 0.5rem; border: none; background: none; border-radius: 7px;
    cursor: pointer; color: var(--text); font-family: inherit; font-size: 12.5px;
}
.rh-label-opt:hover[b-g4ufztonjl] { background: var(--cream-2); }
.rh-label-opt.sel[b-g4ufztonjl] { background: var(--ok-bg); font-weight: 600; }
.rh-label-empty[b-g4ufztonjl] { padding: 0.5rem 0.55rem; font-size: 11.5px; color: var(--text-faint); }

/* ── A5/A6 — etykiety wątku w nagłówku (chipy z „×", „+ etykieta", propozycje AI) ── */
.rh-tags[b-g4ufztonjl] { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.1rem; }
.rh-tag[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 1px 4px 1px 7px; height: 20px; border-radius: 999px;
    background: color-mix(in srgb, var(--rh-tag-color, #9ca3af) 12%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--rh-tag-color, #9ca3af) 45%, transparent);
    font-size: 11px; color: var(--text); white-space: nowrap; max-width: 220px;
}
.rh-tag-dot[b-g4ufztonjl] { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--rh-tag-color, #9ca3af); }
.rh-tag-name[b-g4ufztonjl] { overflow: hidden; text-overflow: ellipsis; }
.rh-tag-x[b-g4ufztonjl] { border: none; background: none; padding: 0 2px; font-size: 14px; line-height: 1; color: var(--text-faint); cursor: pointer; border-radius: 50%; flex: none; }
.rh-tag-x:hover[b-g4ufztonjl] { color: var(--danger); }

.rh-tagadd[b-g4ufztonjl] { position: relative; display: inline-flex; }
.rh-tagadd-btn[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 1px 8px; height: 20px; border-radius: 999px;
    border: 1px dashed var(--line-strong); background: none;
    font-family: inherit; font-size: 11px; color: var(--text-soft); cursor: pointer;
}
.rh-tagadd-btn:hover[b-g4ufztonjl], .rh-tagadd-btn.on[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
.rh-tagadd-btn svg[b-g4ufztonjl] { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; flex: none; }

.rh-tag-backdrop[b-g4ufztonjl] { position: fixed; inset: 0; z-index: 40; }
.rh-tag-menu[b-g4ufztonjl] {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 41;
    display: flex; flex-direction: column; gap: 1px;
    min-width: 190px; max-height: 260px; overflow-y: auto; padding: 4px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
    animation: ai-menu-pop-b-g4ufztonjl .16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rh-tag-opt[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.5rem; text-align: left; width: 100%;
    padding: 0.4rem 0.5rem; border: none; background: none; border-radius: 7px;
    cursor: pointer; color: var(--text); font-family: inherit; font-size: 12.5px;
}
.rh-tag-opt:hover[b-g4ufztonjl] { background: var(--cream-2); }
.rh-tag-empty[b-g4ufztonjl] { padding: 0.5rem 0.55rem; font-size: 11.5px; color: var(--text-faint); }

.rh-ai-sug[b-g4ufztonjl] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.rh-ai-sug-lbl[b-g4ufztonjl] { font-size: 10.5px; color: var(--text-faint); font-weight: 600; }
.rh-ai-chip[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 1px 8px 1px 6px; height: 20px; border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--rh-tag-color, #9ca3af) 55%, transparent);
    background: none; font-family: inherit; font-size: 11px; color: var(--text-soft); cursor: pointer;
}
.rh-ai-chip:hover[b-g4ufztonjl] { background: color-mix(in srgb, var(--rh-tag-color, #9ca3af) 14%, var(--paper)); color: var(--text); }

/* ══ #8 — mobilny nagłówek: progressive disclosure danych wątku ══════════════════════════════════
   ⚠ Ten blok MUSI stać PO bazowych .rh-meta/.rh-label/.rh-tags — ta sama specyficzność, więc
   decyduje kolejność w pliku. Media query wyżej (przy .reader-back) przegrałaby z bazą niżej. */
@media (max-width: 820px) {
    .rh-meta[b-g4ufztonjl] { gap: 0.35rem 0.4rem; margin-top: 0.3rem; }

    /* Widoczne od razu: chip etykiety + „+ tag" + „szczegóły". Reszta pod rozwinięciem. */
    .rh-label[b-g4ufztonjl] { order: 1; }
    .rh-tags[b-g4ufztonjl] { order: 2; flex-basis: auto; flex: 1 1 auto; min-width: 0; margin-top: 0; }
    .rh-details-btn[b-g4ufztonjl] {
        order: 3; margin-left: auto; flex: none;
        display: inline-flex; align-items: center; gap: 0.2rem;
        padding: 1px 7px; height: 20px; border-radius: 999px;
        border: 1px solid var(--line-strong); background: none;
        font-family: inherit; font-size: 11px; color: var(--text-soft); cursor: pointer;
    }
    .rh-details-btn svg[b-g4ufztonjl] { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; flex: none; transition: transform .15s; }
    .rh-details-btn.on[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
    .rh-details-btn.on svg[b-g4ufztonjl] { transform: rotate(180deg); }

    /* Skrzynka / klient / szkic — trzy linijki nad treścią, potrzebne rzadko. */
    .rh-facts[b-g4ufztonjl] {
        display: none; order: 4; flex-basis: 100%;
        flex-direction: column; align-items: flex-start; gap: 0.3rem;
        margin-top: 0.35rem; padding-top: 0.4rem; border-top: 1px dashed var(--line);
    }
    .rh-meta.open .rh-facts[b-g4ufztonjl] { display: flex; }
    .rh-sub[b-g4ufztonjl] { line-height: 1.45; }
}

/* R2.2 — pasek szukania w wątku */
.rh-search-toggle.on[b-g4ufztonjl] { background: var(--cream-2); color: var(--p1); }
.rh-search[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding: 0.3rem 0.5rem; background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.rh-search > svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: var(--text-faint); fill: none; stroke-width: 2; flex: none; }
.rh-search input[b-g4ufztonjl] { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); }
.rh-search input[b-g4ufztonjl]::placeholder { color: var(--text-faint); }
.rh-search-count[b-g4ufztonjl] { font-size: 11.5px; color: var(--p1); font-weight: 600; white-space: nowrap; flex: none; }
.rh-search-scope[b-g4ufztonjl] { font-size: 11px; color: var(--text-faint); white-space: nowrap; flex: none; }
.rh-search-clear[b-g4ufztonjl] { width: 22px; height: 22px; display: inline-grid; place-items: center; border: none; background: none; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer; flex: none; }
.rh-search-clear:hover[b-g4ufztonjl] { background: var(--line); color: var(--text); }
.rh-search-clear svg[b-g4ufztonjl] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

/* R2.1 — „załaduj starsze" nad listą wiadomości */
.load-older[b-g4ufztonjl] { align-self: center; margin: 0.3rem 0 0.5rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--text-soft); font-size: 12px; font-family: inherit; cursor: pointer; }
.load-older:hover:not(:disabled)[b-g4ufztonjl] { border-color: var(--p1); color: var(--text); }
.load-older:disabled[b-g4ufztonjl] { opacity: .6; cursor: default; }
.load-older svg[b-g4ufztonjl] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* R2.2 — podświetlenie dopasowanych / przygaszenie reszty */
.msg.match[b-g4ufztonjl] { border-color: var(--p1); box-shadow: 0 0 0 2px rgba(1, 147, 68, 0.18); }
.msg.collapsed.dim[b-g4ufztonjl] { opacity: .4; }
.msg.collapsed.dim:hover[b-g4ufztonjl] { opacity: .85; }

/* ── Lista wiadomości ── */
.reader-scroll[b-g4ufztonjl] {
    position: relative;         /* kotwica wskaźnika pull-to-refresh (.abc-ptr) */
    flex: 1 1 auto;
    min-height: 220px;          /* lista wiadomości ZAWSZE ma miejsce + własny scroll (nie kurczy się do zera) */
    overflow-y: auto;
    overscroll-behavior-y: contain;  /* zabija natywny pull-to-refresh Chrome/WebView + scroll-chaining */
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--cream);
    scrollbar-width: thin;
    scrollbar-color: var(--text-faint) transparent;
}
.reader-scroll[b-g4ufztonjl]::-webkit-scrollbar { width: 12px; }
.reader-scroll[b-g4ufztonjl]::-webkit-scrollbar-thumb { background: var(--text-faint); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.reader-scroll[b-g4ufztonjl]::-webkit-scrollbar-thumb:hover { background: var(--text-soft); background-clip: content-box; }

.msg[b-g4ufztonjl] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-height: 50px;   /* każda wiadomość ma min. 50px (równy rytm rzędów) */
    /* Karta w przewijanej liście NIE może się kurczyć: element flex-column .reader-scroll
       inaczej ściska rozwiniętą wiadomość do min-height:50px, a overflow:hidden obcina treść
       (BUG „po kliknięciu brak 40vh/wysokości tekstu"). flex:none = trzymaj wysokość treści,
       kontener .reader-scroll przewija. Rozwinięta i tak ma wewnętrzny cap 40vh w bąblu. */
    flex: none;
}
.msg-head[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.9rem; cursor: pointer; }
.msg-head .avatar-circle[b-g4ufztonjl] { flex: none; }
.mh-body[b-g4ufztonjl] { min-width: 0; flex: 1; }
.mh-from[b-g4ufztonjl] { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-from small[b-g4ufztonjl] { color: var(--text-faint); font-weight: 400; font-size: 11.5px; margin-left: 0.35rem; }
.mh-dir[b-g4ufztonjl] { font-size: 11px; color: var(--text-faint); margin-top: 1px; display: inline-flex; align-items: center; gap: 0.25rem; }
.mh-date[b-g4ufztonjl] { font-size: 11px; color: var(--text-faint); font-family: 'Geist Mono', monospace; white-space: nowrap; flex: none; align-self: flex-start; }
.mh-tick[b-g4ufztonjl] { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; flex: none; }
/* „Wysłane" — ciche (szare); wyróżniają się tylko stany wymagające uwagi. */
.mh-dir.d-delivered[b-g4ufztonjl] { color: var(--text-faint); }
.mh-dir.d-pending[b-g4ufztonjl] { color: var(--warn); }
.mh-dir.d-failed[b-g4ufztonjl] { color: var(--danger); font-weight: 600; }

/* collapsed = slim jednoliniowy rząd, bez chrome karty — równy rytm z rozwiniętymi kartami.
   Bez margin-top:-1px (rytm daje gap w .reader-scroll). Padding większy → spójna wysokość rzędu ~38px. */
.msg.collapsed[b-g4ufztonjl] { box-shadow: none; background: transparent; border-color: transparent; border-radius: var(--radius-sm); display: flex; align-items: center; }
.msg.collapsed:hover[b-g4ufztonjl] { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-sm); }
.msg.collapsed .msg-head[b-g4ufztonjl] { padding: 0.42rem 0.7rem; gap: 0.5rem; flex: 1; width: 100%; }
.msg.collapsed .mh-from[b-g4ufztonjl] { font-size: 12px; font-weight: 500; flex: none; }
.msg.collapsed .mh-body[b-g4ufztonjl] { display: flex; align-items: baseline; gap: 0.4rem; }
.msg.collapsed .mh-date[b-g4ufztonjl] { font-size: 10.5px; }
.msg.collapsed .mh-preview[b-g4ufztonjl] { color: var(--text-faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msg-body-wrap[b-g4ufztonjl] { border-top: 1px solid var(--line); }
.msg-body[b-g4ufztonjl] { padding: 0.85rem 1.1rem; font-size: 13.5px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.msg-body-text[b-g4ufztonjl] { white-space: normal; }

/* Rozwinięta wiadomość: tyle ile tekstu, ale MAX 40vh — i scrolluje w SWOIM bąblu.
   Jedna długa wiadomość nie rozpycha całego wątku i zawsze da się ją przeczytać. */
.msg-frame-scroll[b-g4ufztonjl] { max-height: 40vh; overflow-y: auto; }
.msg-body-html[b-g4ufztonjl] { max-height: 40vh; overflow-y: auto; }
.msg-body-text[b-g4ufztonjl] { max-height: 40vh; overflow-y: auto; }
.msg-frame-scroll[b-g4ufztonjl]::-webkit-scrollbar, .msg-body-html[b-g4ufztonjl]::-webkit-scrollbar, .msg-body-text[b-g4ufztonjl]::-webkit-scrollbar { width: 8px; }
.msg-frame-scroll[b-g4ufztonjl]::-webkit-scrollbar-thumb, .msg-body-html[b-g4ufztonjl]::-webkit-scrollbar-thumb, .msg-body-text[b-g4ufztonjl]::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* Nasza treść (outbound/notatka) renderowana INLINE — bez iframe (patrz EmailThreadReader.razor).
   Wysokość = wysokość treści, więc krótkie „Ok" to mały bąbel, nie pusty 150px iframe. */
.msg-body-html img[b-g4ufztonjl] { max-width: 100%; height: auto; }
.msg-body-html img.abc-inline-img[b-g4ufztonjl] { border-radius: var(--radius-sm); margin: 0.3rem 0; }
.msg-body-html a[b-g4ufztonjl] { color: var(--ch-email, #0b6b3a); text-decoration: underline; text-underline-offset: 2px; }
.msg-body-html p[b-g4ufztonjl] { margin: 0 0 0.5rem; }
.msg-body-html ul[b-g4ufztonjl], .msg-body-html ol[b-g4ufztonjl] { margin: 0.2rem 0 0.5rem; padding-left: 1.4rem; }
.msg-body-html blockquote[b-g4ufztonjl] { margin: 0.3rem 0; padding-left: 0.8rem; border-left: 3px solid var(--line-strong); color: var(--text-soft); }
.msg-body-html > :last-child[b-g4ufztonjl] { margin-bottom: 0; }
.msg-body-html > :first-child[b-g4ufztonjl] { margin-top: 0; }

/* Render maila w izolowanym iframe — własny reset, białe tło, auto-height (JS abcEmailFrame.fit) */
.msg-frame[b-g4ufztonjl] {
    display: block;
    width: 100%;
    border: 0;
    min-height: 44px;
    background: #fff;
    color-scheme: light;
}

/* Pasek „zablokowano obrazki" */
.img-bar[b-g4ufztonjl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.8rem;
    background: var(--warn-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--warn);
}
.img-bar svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; }
.img-bar .btn[b-g4ufztonjl] { margin-left: auto; flex: none; }

/* Rekonstrukcja cytatu z wątku */
.quote-toggle[b-g4ufztonjl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.2rem 1.3rem 1rem;
    padding: 0.2rem 0.6rem;
    background: var(--cream-2);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-soft);
    cursor: pointer;
    font-weight: 500;
    user-select: none;
}
.quote-toggle:hover[b-g4ufztonjl] { background: var(--line); }
.quote-toggle .dots[b-g4ufztonjl] { font-family: 'Geist Mono', monospace; letter-spacing: 1px; }
.quoted[b-g4ufztonjl] {
    margin: 0 1.3rem 1.1rem;
    border-left: 3px solid var(--line-strong);
    padding: 0.35rem 0 0.35rem 0.9rem;
    color: var(--text-faint);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}
.quoted .qmeta[b-g4ufztonjl] { font-style: italic; margin-bottom: 0.25rem; }
.quoted :is(p)[b-g4ufztonjl] { margin: 0 0 0.5rem; }

/* Załączniki */
.msg-atts[b-g4ufztonjl] { display: flex; gap: 0.5rem; padding: 0 1.3rem 1.1rem; flex-wrap: wrap; }
.att[b-g4ufztonjl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    max-width: 260px;
}
.att:hover[b-g4ufztonjl] { border-color: var(--p1); }
.att svg[b-g4ufztonjl] { width: 15px; height: 15px; color: var(--ch-email); stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; }
.att .att-name[b-g4ufztonjl] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att .as[b-g4ufztonjl] { color: var(--text-faint); font-family: 'Geist Mono', monospace; font-size: 10.5px; flex: none; }
/* K3-3 — załączniki z podglądem (obraz/PDF) i „Pobierz wszystkie" */
.att.att-preview[b-g4ufztonjl] { cursor: zoom-in; }
.att.att-preview:hover[b-g4ufztonjl] { background: var(--ok-bg); }
.att.att-zip[b-g4ufztonjl] { background: none; border-style: dashed; color: var(--text-soft); cursor: pointer; }
.att.att-zip:hover[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
.att.att-zip svg[b-g4ufztonjl] { color: var(--text-soft); }
.att.att-zip:hover svg[b-g4ufztonjl] { color: var(--p1); }

/* ── #8 — pasek akcji pod wątkiem (TYLKO mobile; desktop ma kompozytor inline i go nie potrzebuje) ── */
.reader-actionbar[b-g4ufztonjl] { display: none; }

/* ── Odpowiedź inline ── */
.reply-dock[b-g4ufztonjl] { border-top: 1px solid var(--line); background: var(--paper); padding: 0.8rem 1.1rem 1rem; flex: none; }
.reply-box[b-g4ufztonjl] { border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--paper); overflow: visible; transition: border-color .15s, box-shadow .15s; }
.reply-box:focus-within[b-g4ufztonjl] { border-color: var(--p1); box-shadow: 0 0 0 3px rgba(1,147,68,0.1); }
.reply-box.sending[b-g4ufztonjl] { opacity: .75; }

/* Zapisany szkic — subtelna bursztynowa poświata + banner „Szkic zapisany automatycznie · czas" */
.reply-box.has-draft[b-g4ufztonjl] { box-shadow: 0 0 0 3px rgba(224, 168, 0, 0.12); }
.draft-banner[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    background: var(--warn-bg);
    border-bottom: 1px solid #f0d9a8;
    font-size: 11.5px; color: #8a6512; font-weight: 500;
}
.draft-banner svg[b-g4ufztonjl] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.draft-banner .discard[b-g4ufztonjl] { margin-left: auto; color: var(--danger); cursor: pointer; font-weight: 600; }
.draft-banner .discard:hover[b-g4ufztonjl] { text-decoration: underline; }
.reply-from[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem 0.5rem 0.9rem; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-soft); }
.reply-from .rf-text[b-g4ufztonjl] { display: flex; align-items: baseline; gap: 0.35rem; min-width: 0; white-space: nowrap; }
/* Adresat („Do: X") ma pierwszeństwo; skrzynka („z …") ustępuje i ucina się pierwsza (flex-shrink duży). */
.rf-lead[b-g4ufztonjl] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rf-mailbox[b-g4ufztonjl] { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-faint); }
.reply-from strong[b-g4ufztonjl] { color: var(--text); font-weight: 600; }

/* „Wszystkim" / „DW" — akcje przy nagłówku kompozytora (przed ↗ „rozwiń"). */
.rf-btn[b-g4ufztonjl] {
    flex: none; display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--text-soft); font-family: inherit; font-size: 11px; cursor: pointer;
    white-space: nowrap;
}
.rf-btn:hover:not(:disabled)[b-g4ufztonjl] { background: var(--cream-2); color: var(--text); }
.rf-btn.on[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg, var(--cream-2)); }
.rf-btn:disabled[b-g4ufztonjl] { opacity: .55; cursor: not-allowed; }
.rf-btn svg[b-g4ufztonjl] { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Pola DW/UDW — pokazywane dopiero po kliknięciu „DW" albo „Wszystkim" (jak w Gmailu). */
.reply-cc[b-g4ufztonjl] { display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid var(--line); background: var(--cream-2); }
.reply-cc-row[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.9rem; }
.reply-cc-row > span[b-g4ufztonjl] { flex: none; width: 34px; font-size: 11.5px; color: var(--text-faint); }
.reply-cc-row input[b-g4ufztonjl] {
    flex: 1 1 auto; min-width: 0;
    border: none; background: none; outline: none;
    font-family: inherit; font-size: 12.5px; color: var(--text);
}
.reply-cc-row input[b-g4ufztonjl]::placeholder { color: var(--text-faint); }
.composer-expand[b-g4ufztonjl] { margin-left: auto; flex: none; width: 26px; height: 26px; display: inline-grid; place-items: center; border: none; background: none; border-radius: var(--radius-sm); color: var(--text-faint); cursor: pointer; }
.composer-expand:hover[b-g4ufztonjl] { background: var(--cream-2); color: var(--text); }
/* „Wyślij" w nagłówku kompozytora — TYLKO arkusz pełnoekranowy na telefonie (reguła w @media niżej).
   Domyślnie schowany: na desktopie i w zwiniętym docku wysyła przycisk ze stopki. */
.rf-send[b-g4ufztonjl] { display: none; }
.composer-expand svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reply-area[b-g4ufztonjl] {
    display: block; width: 100%; box-sizing: border-box;
    border: 0; outline: none; resize: vertical;
    padding: 0.75rem 0.9rem; min-height: 110px;
    /* R1.1 — rośnie z tekstem, po limicie scroll; resize:vertical zostawia ręczną kontrolę.
       Cap 20vh (nie 34vh) — inline composer nie zjada listy wątku przy pisaniu; dłuższe pisanie
       → „rozwiń do okna" (.reply-dock.expanded). */
    field-sizing: content; max-height: 26vh; overflow-y: auto;
    color: var(--text); font-size: 13.5px; font-family: inherit; line-height: 1.5; background: transparent;
}
.reply-area[b-g4ufztonjl]::placeholder { color: var(--text-faint); }
.reply-error[b-g4ufztonjl] { padding: 0.3rem 0.9rem; color: var(--danger); font-size: 12px; }
.reply-foot[b-g4ufztonjl] { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem 0.65rem; }
.reply-hint[b-g4ufztonjl] { font-size: 11px; color: var(--text-faint); }
/* Spam — propozycja zablokowania nadawcy tuż po oznaczeniu. Siedzi nad kompozytorem, żeby user
   zobaczył ją bez przewijania, i znika po wyborze (albo gdy adres jest już zablokowany). */
.spam-prompt[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.55rem; flex: none;
    padding: 0.55rem 0.9rem; background: var(--warn-bg); border-top: 1px solid #f0d9a8;
}
.spam-prompt > svg[b-g4ufztonjl] { width: 16px; height: 16px; stroke: #8a6512; fill: none; stroke-width: 2; flex: none; }
.spam-prompt.done[b-g4ufztonjl] { background: var(--ok-bg, #eef8f1); border-top-color: #bfe3cc; }
.spam-prompt.done > svg[b-g4ufztonjl] { stroke: var(--p1, #019344); }
/* min-width:0 — inaczej długi adres rozpycha pasek i przyciski uciekają poza obrys. */
.sp-text[b-g4ufztonjl] { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: #7a5a10; }
.spam-prompt.done .sp-text[b-g4ufztonjl] { color: var(--text-soft); }
.sp-text strong[b-g4ufztonjl] { overflow-wrap: anywhere; }
.sp-text small[b-g4ufztonjl] { display: block; font-size: 11px; opacity: .8; }
.sp-btn[b-g4ufztonjl] {
    flex: none; height: 30px; padding: 0 0.7rem; border-radius: 8px; cursor: pointer;
    border: 1px solid #dcc089; background: var(--paper); color: #7a5a10;
    font-family: inherit; font-size: 12px; font-weight: 600;
}
.sp-yes[b-g4ufztonjl] { background: var(--danger); border-color: transparent; color: #fff; }

/* K3-4 — pasek „Cofnij wysyłkę" (okno przed faktyczną wysyłką). Siedzi NA WĄTKU, nie w kompozytorze:
   po kliknięciu Wyślij kompozytor się zamyka i user wraca do czytania rozmowy.
   Kompozytor jest wtedy chowany klasą (nie usuwany z DOM), żeby „Cofnij" miał co przywrócić. */
.reply-dock.undo-hidden[b-g4ufztonjl], .reader-actionbar.undo-hidden[b-g4ufztonjl] { display: none !important; }
.thread-undo[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.5rem; flex: none;
    padding: 0.55rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--warn-bg); border-top: 1px solid #f0d9a8;
}
.thread-undo > svg[b-g4ufztonjl] { width: 16px; height: 16px; stroke: #8a6512; fill: none; stroke-width: 2; flex: none; }
.tu-text[b-g4ufztonjl] { font-size: 13px; color: #8a6512; flex: 1 1 auto; min-width: 0; }
.tu-text strong[b-g4ufztonjl] { font-variant-numeric: tabular-nums; }
.tu-btn[b-g4ufztonjl] {
    flex: none; height: 32px; padding: 0 0.8rem; border-radius: 9px; cursor: pointer;
    border: 1px solid #dcc089; background: var(--paper); color: #7a5a10;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.tu-btn:active[b-g4ufztonjl] { background: color-mix(in srgb, #8a6512 10%, var(--paper)); }
/* „Wyślij teraz" — akcja wprzód, więc odróżniona wypełnieniem od wycofującego „Cofnij". */
.tu-now[b-g4ufztonjl] { background: var(--global-palette1); border-color: transparent; color: #fff; }

/* ── R1.2/R1.3 — podgląd + wybór podpisu ── */
.sig-control[b-g4ufztonjl] { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.sig-pick[b-g4ufztonjl] { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 11.5px; color: var(--text-faint); }
.sig-pick select[b-g4ufztonjl] {
    font-family: inherit; font-size: 11.5px; color: var(--text); background: var(--paper);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.15rem 0.4rem; max-width: 190px;
}
.sig-toggle[b-g4ufztonjl] { border: none; background: none; padding: 0; font-size: 11.5px; color: var(--p1); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.sig-toggle:hover[b-g4ufztonjl] { color: var(--p1-strong, var(--p1)); }
.sig-preview[b-g4ufztonjl] { margin: 0 0.9rem 0.2rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--cream); overflow: hidden; }
.sig-preview-label[b-g4ufztonjl] { padding: 0.3rem 0.6rem; font-size: 10.5px; color: var(--text-faint); border-bottom: 1px dashed var(--line); background: var(--cream-2); }
.sig-preview-body[b-g4ufztonjl] { padding: 0.55rem 0.7rem; font-size: 12.5px; color: var(--text); max-height: 160px; overflow: auto; overflow-wrap: anywhere; }
.sig-preview-body img[b-g4ufztonjl] { max-width: 100%; height: auto; }

/* ── Minimalny WYSIWYG w polu odpowiedzi (toolbar + contenteditable) ── */
.reply-box .rich-toolbar[b-g4ufztonjl] { display: flex; gap: 0.25rem; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--line); background: var(--cream-2); flex-wrap: wrap; }
.reply-box .rich-toolbar .btn[b-g4ufztonjl] { padding: 0.2rem 0.45rem; min-width: 30px; line-height: 1; }
.reply-box .rich-toolbar .btn svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reply-box .rich-toolbar .btn strong[b-g4ufztonjl], .reply-box .rich-toolbar .btn em[b-g4ufztonjl] { font-size: 13px; }
/* „Aa" toggle formatowania — desktop: zbędny (formatowanie zawsze widoczne, wrapper przezroczysty). */
.fmt-toggle[b-g4ufztonjl] { display: none; }
.fmt-tools[b-g4ufztonjl] { display: contents; }
.fmt-toggle svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reply-editor[b-g4ufztonjl] {
    display: block; width: 100%; box-sizing: border-box;
    /* Cap 20vh — inline composer zostawia widoczny wątek przy pisaniu (Image #12). Dłuższe pisanie
       → „rozwiń do okna" gdzie max-height znika (.reply-dock.expanded .reply-editor). */
    padding: 0.75rem 0.9rem; min-height: 110px; max-height: 26vh; overflow: auto;
    outline: none; color: var(--text); font-size: 13.5px; font-family: inherit; line-height: 1.5; background: transparent;
    overflow-wrap: anywhere;
}
.reply-editor:empty[b-g4ufztonjl]::before { content: attr(data-placeholder); color: var(--text-faint); }
.reply-editor img.abc-inline-img[b-g4ufztonjl] { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 0.3rem 0; }

/* 2b — spinacz + chipy załączników-plików */
.reply-box .rich-toolbar .rich-attach[b-g4ufztonjl] { cursor: pointer; display: inline-grid; place-items: center; }
.reply-atts[b-g4ufztonjl] { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.45rem 0.9rem 0; }
.reply-att-chip[b-g4ufztonjl] { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 260px; padding: 0.25rem 0.35rem 0.25rem 0.55rem; background: var(--cream); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11.5px; color: var(--text); }
.reply-att-chip > svg[b-g4ufztonjl] { width: 13px; height: 13px; stroke: var(--ch-email, currentColor); fill: none; stroke-width: 1.7; flex: none; }
.reply-att-chip .rac-name[b-g4ufztonjl] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-att-chip .rac-size[b-g4ufztonjl] { color: var(--text-faint); font-family: 'Geist Mono', monospace; font-size: 10px; flex: none; }
.reply-att-chip .rac-remove[b-g4ufztonjl] { border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; flex: none; border-radius: 50%; }
.reply-att-chip .rac-remove:hover:not(:disabled)[b-g4ufztonjl] { color: var(--danger); background: var(--line); }

/* ── Toolbox AI: jedna ikonka „✨ AI" → rozwijane opcje (styl macOS: pop + stagger) ── */
.ai-toolbox[b-g4ufztonjl] { position: relative; flex: none; }
.ai-fab[b-g4ufztonjl] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.28rem 0.62rem; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--paper);
    color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.ai-fab:hover:not(:disabled)[b-g4ufztonjl], .ai-fab.on[b-g4ufztonjl] { border-color: var(--p1); color: var(--p1); background: var(--ok-bg); }
.ai-fab:disabled[b-g4ufztonjl] { opacity: .55; cursor: default; }
.ai-fab .ai-fab-ic[b-g4ufztonjl] { font-size: 13px; line-height: 1; }
.ai-fab.busy[b-g4ufztonjl] { pointer-events: none; }
.ai-fab-spin[b-g4ufztonjl] {
    width: 13px; height: 13px; flex: none;
    border: 2px solid color-mix(in srgb, var(--p1) 25%, transparent); border-top-color: var(--p1);
    border-radius: 50%; animation: ai-spin-b-g4ufztonjl .7s linear infinite;
}
@keyframes ai-spin-b-g4ufztonjl { to { transform: rotate(360deg); } }

.ai-menu-backdrop[b-g4ufztonjl] { position: fixed; inset: 0; z-index: 40; }
.ai-menu[b-g4ufztonjl] {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 41;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 252px; padding: 5px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    transform-origin: top right;
    animation: ai-menu-pop-b-g4ufztonjl .19s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ai-menu-pop-b-g4ufztonjl {
    from { opacity: 0; transform: scale(.82) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ai-opt[b-g4ufztonjl] {
    display: flex; align-items: center; gap: 0.65rem; text-align: left; width: 100%;
    padding: 0.5rem 0.55rem; border: none; background: none; border-radius: 10px;
    cursor: pointer; color: var(--text); font-family: inherit;
    animation: ai-opt-in-b-g4ufztonjl .30s both cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ai-opt:hover:not(:disabled)[b-g4ufztonjl] { background: var(--cream-2); }
.ai-opt:disabled[b-g4ufztonjl] { opacity: .5; cursor: default; }
.ai-opt:nth-child(1)[b-g4ufztonjl] { animation-delay: .03s; }
.ai-opt:nth-child(2)[b-g4ufztonjl] { animation-delay: .07s; }
.ai-opt:nth-child(3)[b-g4ufztonjl] { animation-delay: .11s; }
@keyframes ai-opt-in-b-g4ufztonjl {
    from { opacity: 0; transform: translateY(-6px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-opt-ic[b-g4ufztonjl] { font-size: 17px; width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--cream); border-radius: 9px; }
.ai-opt-tx[b-g4ufztonjl] { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ai-opt-tx strong[b-g4ufztonjl] { font-size: 13px; font-weight: 600; }
.ai-opt-tx small[b-g4ufztonjl] { font-size: 11px; color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) {
    .ai-menu[b-g4ufztonjl], .ai-opt[b-g4ufztonjl] { animation: none; }
    .ai-fab-spin[b-g4ufztonjl] { animation-duration: 1.2s; }
}

/* „Generuj ponownie" — subtelny link przy reużytym wyniku AI (wymusza świeże, płatne wywołanie). */
.ai-regen[b-g4ufztonjl] {
    border: none; background: none; padding: 0; flex: none;
    font-family: inherit; font-size: 10.5px; font-weight: 600; color: var(--p1);
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.ai-regen:hover:not(:disabled)[b-g4ufztonjl] { color: var(--p1-strong, var(--p1)); }
.ai-regen:disabled[b-g4ufztonjl] { opacity: .5; cursor: default; text-decoration: none; }

/* ── R1.4 — composer rozwinięty do modala (więcej miejsca na pisanie) ── */
/* grid-template-columns: minmax(0,1fr) — bez tego niejawna kolumna jest sizowana MIN-CONTENTEM, a nagłówek
   „Odpowiadasz z: …" (white-space: nowrap) rozpychał ją ponad szerokość ekranu: arkusz robił się szerszy
   niż telefon i toolbar z ✨AI (oraz wybór podpisu) wyjeżdżał poza prawą krawędź. Definite track = .rf-text
   normalnie skraca się wielokropkiem. */
.reply-dock.expanded[b-g4ufztonjl] { position: fixed; inset: 0; z-index: 250; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 4vh 4vw; border-top: 0; background: none; }
.composer-backdrop[b-g4ufztonjl] { position: fixed; inset: 0; background: rgba(20, 22, 28, 0.44); }
.reply-dock.expanded .reply-box[b-g4ufztonjl] { position: relative; z-index: 1; width: min(780px, 94vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); }
.reply-dock.expanded .reply-area[b-g4ufztonjl] { flex: 1 1 auto; field-sizing: normal; max-height: none; min-height: 42vh; resize: none; }
.reply-dock.expanded .reply-editor[b-g4ufztonjl] { flex: 1 1 auto; max-height: none; min-height: 42vh; }
.reply-dock.expanded .reply-foot[b-g4ufztonjl] { flex: none; }

/* ── Mobile: wygodniejsze pisanie odpowiedzi ── */
@media (max-width: 820px) {
    /* Toolbar zwięzły: [Aa][spinacz] … [✨AI]. Formatowanie (B/I/listy/link) schowane pod „Aa".
       BEZ overflow (ucinałby menu AI) — nadmiar zawija się do nowego rzędu. */
    .reply-box .rich-toolbar[b-g4ufztonjl] { flex-wrap: wrap; align-items: center; }
    .fmt-toggle[b-g4ufztonjl] { display: inline-grid; place-items: center; flex: none; }
    .fmt-tools[b-g4ufztonjl] { display: none; }
    .fmt-tools.open[b-g4ufztonjl] {
        display: flex; gap: 0.2rem; order: 20; flex-basis: 100%;
        margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--line);
    }
    /* Menu AI otwiera się w GÓRĘ (kompozytor inline jest przy dolnej krawędzi ekranu). */
    .ai-menu[b-g4ufztonjl] { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }
    /* ...ALE w arkuszu pełnoekranowym toolbar jest przy GÓRNEJ krawędzi — menu w górę uciekłoby
       poza ekran (widoczna zostawała tylko ostatnia pozycja). Tam otwieramy w DÓŁ, przy przycisku. */
    .reply-dock.expanded .ai-menu[b-g4ufztonjl] { top: calc(100% + 6px); bottom: auto; transform-origin: top right; }

    /* ── #8 — arkusz na PEŁNY ekran (nie modal z marginesem). Kompozytor jest teraz JEDYNĄ drogą do
       odpowiedzi na telefonie, a modal zostawiał ~12 px backdropu z każdej strony — nie ma w co trafić
       palcem, żeby go zamknąć. Pełny ekran + wyraźny „zwiń" w rogu zamiast celowania w szparę. */
    .reply-dock.expanded[b-g4ufztonjl] { padding: 0; }
    .reply-dock.expanded .reply-box[b-g4ufztonjl] {
        width: 100%; max-width: none; height: 100%; max-height: none;
        border: 0; border-radius: 0; box-shadow: none;
    }
    .composer-backdrop[b-g4ufztonjl] { display: none; }   /* arkusz zajmuje cały ekran — backdropu i tak nie widać */
    /* Cel dotykowy „zwiń" — 32px to za mało jak na jedyne wyjście z arkusza. */
    .reply-dock.expanded .composer-expand[b-g4ufztonjl] { width: 38px; height: 38px; }
    .reply-dock.expanded .composer-expand svg[b-g4ufztonjl] { width: 17px; height: 17px; }

    /* Wyższe, stabilne pole tekstu (więcej miejsca; mniej „skakania w górę" przy pisaniu). */
    .reply-editor[b-g4ufztonjl], .reply-area[b-g4ufztonjl] { min-height: 130px; max-height: 30vh; }

    /* ── #8 — kompozytor ZWINIĘTY. W wątku najczęściej się CZYTA, a dock na stałe zjadał ~⅓ ekranu.
       Otwiera go pasek akcji niżej — od razu jako arkusz pełnoekranowy (.expanded).
       display:none, NIE usunięcie z DOM: edytor musi żyć, żeby szkic (autozapis) i staged-załączniki
       przetrwały zwinięcie. getHtml() czyta innerHTML, więc brak layoutu mu nie przeszkadza.
       Tym samym znikł problem stopki wypychanej poza ekran przez podgląd podpisu — arkusz ma własny layout. */
    .reply-dock:not(.expanded)[b-g4ufztonjl] { display: none; }

    /* Pasek akcji = JEDEN rząd jak w Gmailu: ikona „Odpowiedz" + „Odp. wszystkim" + „Przekaż dalej".
       Wcześniej były dwa rzędy z pełnymi napisami — zjadały dolną strefę i dublowały akcje. */
    .reader-actionbar[b-g4ufztonjl] {
        display: flex; flex-direction: column; gap: 0.35rem; flex: none;
        padding: 0.5rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
        background: var(--paper); border-top: 1px solid var(--line);
    }
    .ab-row[b-g4ufztonjl] { display: flex; gap: 0.4rem; align-items: stretch; }
    /* Ikona „Odpowiedz" — jedyny akcent kolorem w pasku; stała szerokość, nie kurczy się przy
       długich etykietach obok. */
    .ab-icon[b-g4ufztonjl] {
        flex: 0 0 52px; width: 52px; display: inline-flex; align-items: center; justify-content: center;
        height: 42px; border-radius: 11px; border: none;
        background: var(--global-palette1); color: #fff; cursor: pointer;
    }
    .ab-icon svg[b-g4ufztonjl] { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
    .ab-icon:active[b-g4ufztonjl] { transform: scale(0.98); }
    /* Szkic — ikona przejmuje rolę chipa „masz szkic" (bursztyn + ołówek), bo w jednym rzędzie
       nie mieści się napis „Dokończ odpowiedź". */
    .ab-icon.has-draft[b-g4ufztonjl] { background: var(--warn-bg); color: #8a6512; border: 1px solid #f0d9a8; }
    .ab-btn[b-g4ufztonjl] {
        /* min-width:0 — bez tego flex-item nie schodzi poniżej treści i „Przekaż dalej" wypycha rząd. */
        flex: 1 1 0; min-width: 0;
        display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
        height: 42px; border-radius: 11px;
        border: 1px solid var(--line-strong); background: var(--paper);
        color: var(--text-soft); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ab-btn svg[b-g4ufztonjl] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
    .ab-btn:active[b-g4ufztonjl] { background: var(--cream-2); }
    /* Brak adresata „wszystkim" → „Odpowiedz" jest jedyną akcją odpowiedzi, więc dostaje akcent. */
    .ab-btn-main[b-g4ufztonjl] { background: var(--global-palette1); color: #fff; border: none; font-weight: 600; }
    .ab-btn-main.has-draft[b-g4ufztonjl] { background: var(--warn-bg); color: #8a6512; border: 1px solid #f0d9a8; }
    /* „Odrzuć szkic" — akcja niszcząca i rzadka: poza głównym rzędem, jako dyskretny link,
       żeby nie zabierała szerokości akcjom codziennym. */
    .ab-discard[b-g4ufztonjl] {
        display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
        width: 100%; height: 30px; border: none; background: none; cursor: pointer;
        color: var(--danger); font-family: inherit; font-size: 12px; font-weight: 500;
    }
    .ab-discard svg[b-g4ufztonjl] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
    .ab-discard:active[b-g4ufztonjl] { background: color-mix(in srgb, var(--danger) 10%, var(--paper)); border-radius: 8px; }

    /* Stopka: Wyślij + wybór podpisu nie mieszczą się w jednym rzędzie → zawijamy;
       podpis w osobnym rzędzie na całą szerokość, select się kurczy (nie ucieka za obrys),
       „Pokaż/Ukryj podpis" zawsze widoczny. */
    .reply-foot[b-g4ufztonjl] { flex-wrap: wrap; row-gap: 0.5rem; }
    .sig-control[b-g4ufztonjl] { width: 100%; margin-left: 0; justify-content: space-between; gap: 0.5rem; }
    .sig-pick[b-g4ufztonjl] { min-width: 0; flex: 1 1 auto; }
    .sig-pick select[b-g4ufztonjl] { min-width: 0; max-width: 100%; flex: 1 1 auto; }
    .sig-toggle[b-g4ufztonjl] { flex: none; white-space: nowrap; }

    /* „Rozwiń do okna" (przycisk ↗) = PEŁNOEKRANOWY arkusz od GÓRY: edytor rośnie w dół,
       Wyślij zawsze widoczny na dole — bez przewijania w górę. */
    /* Arkusz pełnoekranowy: „Wyślij" wskakuje do nagłówka (kciuk i tak jest przy górze przy pisaniu,
       a dolny przycisk chowała klawiatura). Dolny w tym trybie znika, żeby nie było dwóch „Wyślij". */
    .reply-dock.expanded .rf-send[b-g4ufztonjl] {
        display: inline-flex; align-items: center; gap: 0.3rem; flex: none;
        height: 32px; padding: 0 0.7rem; margin-left: 0.15rem; border: none; border-radius: 9px;
        background: var(--global-palette1); color: #fff; cursor: pointer;
        font-family: inherit; font-size: 12.5px; font-weight: 600;
    }
    .reply-dock.expanded .rf-send svg[b-g4ufztonjl] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .reply-dock.expanded .rf-send:disabled[b-g4ufztonjl] { opacity: .6; cursor: not-allowed; }
    /* Nagłówek robi się ciasny — „z <adres skrzynki>" ustępuje pierwszy, adresat zostaje. */
    .reply-dock.expanded .rf-mailbox[b-g4ufztonjl] { display: none; }
    .reply-dock.expanded .reply-foot > .btn-primary[b-g4ufztonjl] { display: none; }

    .reply-dock.expanded[b-g4ufztonjl] { place-items: stretch; padding: 0; }
    .reply-dock.expanded .reply-box[b-g4ufztonjl] { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; box-shadow: none; }
    .reply-dock.expanded .reply-editor[b-g4ufztonjl],
    .reply-dock.expanded .reply-area[b-g4ufztonjl] { min-height: 0; max-height: none; flex: 1 1 auto; }
}

/* ── V1 — oznaczanie niepoprawnych adresów DW/UDW ── */
.reply-cc input.addr-invalid[b-g4ufztonjl] { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent); }
.reply-addr-warn[b-g4ufztonjl] { font-size: 11px; color: var(--danger); margin: 0.1rem 0 0.2rem; overflow-wrap: anywhere; }
/* /Components/Pages/Inbox/Inbox.razor.rz.scp.css */
.inbox-head[b-e6qt5fasb8] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Widok Tablica potrzebuje pełnej szerokości (kolumny Kanban). */
.content.inbox-board-view[b-e6qt5fasb8] {
    max-width: none;
}

/* Przełącznik Tabela/Tablica przeniesiony do wspólnego <ViewToggle /> (Components/Shared).
   Dawne .seg/.seg-btn/.seg-on usunięte — jedno źródło stylu segmentu. */

.t-head .sortable[b-e6qt5fasb8] {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.t-head .sortable:hover[b-e6qt5fasb8] {
    color: var(--text);
}

/* inbox-search / btn-icon-clear / bulk-bar / bulk-tag-dropdown / filter-bar / f-chip / f-sep
   — przeniesione do wwwroot/app.css (używane też przez Outbox/Audit/ApiLimits) */

.t-row.selected[b-e6qt5fasb8] {
    background: var(--cream-2);
    box-shadow: inset 3px 0 0 var(--p1, #019344);
}

/* Inbox table */
.inbox-table[b-e6qt5fasb8] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.t-head[b-e6qt5fasb8] {
    display: grid;
    grid-template-columns: 12px 36px 1.6fr 2.2fr 110px 1fr 50px 50px 90px;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    font-weight: 500;
    align-items: center;
}

.t-row[b-e6qt5fasb8] {
    display: grid;
    grid-template-columns: 12px 36px 1.6fr 2.2fr 110px 1fr 50px 50px 90px;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
    align-items: center;
    transition: background 0.12s;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.t-row:last-child[b-e6qt5fasb8] { border-bottom: none; }
.t-row:hover[b-e6qt5fasb8] { background: var(--cream); }
.t-row.unread[b-e6qt5fasb8] { background: linear-gradient(90deg, rgba(1,147,68,0.025) 0%, transparent 30%); }
.t-row.unread[b-e6qt5fasb8]::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--p1);
}

/* Status tinting — subtle row glow + 3px left bar (open dominates unread, closed dims) */
.t-row.status-closed[b-e6qt5fasb8] {
    background: rgba(120, 120, 120, 0.04);
    opacity: 0.78;
}
.t-row.status-closed:hover[b-e6qt5fasb8] { opacity: 1; background: var(--cream); }
.t-row.status-closed[b-e6qt5fasb8]::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--text-faint);
}
.t-row.status-pending[b-e6qt5fasb8]::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--warn, #c98a00);
}
.t-row.status-snoozed[b-e6qt5fasb8]::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--info, #2a8ec9);
}
/* Unread bar wins over status bar */
.t-row.unread[b-e6qt5fasb8]::before { z-index: 1; }

/* SLA row tinting — breach maluje cały wiersz na lekki czerwony alert */
.t-row.sla-breached[b-e6qt5fasb8] {
    background: linear-gradient(90deg, rgba(192, 46, 29, 0.10) 0%, rgba(192, 46, 29, 0.04) 60%, transparent 100%);
}
.t-row.sla-breached:hover[b-e6qt5fasb8] {
    background: linear-gradient(90deg, rgba(192, 46, 29, 0.16) 0%, rgba(192, 46, 29, 0.08) 60%, var(--cream) 100%);
}
.t-row.sla-danger[b-e6qt5fasb8] {
    background: linear-gradient(90deg, rgba(201, 138, 0, 0.08) 0%, rgba(201, 138, 0, 0.02) 60%, transparent 100%);
}
.t-row.sla-warn[b-e6qt5fasb8] {
    background: linear-gradient(90deg, rgba(201, 138, 0, 0.04) 0%, transparent 50%);
}

/* Inline status badge in snippet column */
.status-badge[b-e6qt5fasb8] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.45rem;
    vertical-align: middle;
    font-family: 'Geist Mono', monospace;
}
.status-badge-open[b-e6qt5fasb8] {
    background: rgba(1,147,68,0.12);
    color: var(--p1);
}
.status-badge-pending[b-e6qt5fasb8] {
    background: rgba(201,138,0,0.12);
    color: var(--warn, #c98a00);
}
.status-badge-snoozed[b-e6qt5fasb8] {
    background: rgba(42,142,201,0.12);
    color: var(--info, #2a8ec9);
}
.status-badge-closed[b-e6qt5fasb8] {
    background: var(--cream-2);
    color: var(--text-soft);
}

.t-leader[b-e6qt5fasb8] { display: flex; justify-content: center; }
.unread-dot[b-e6qt5fasb8] {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--p1);
    box-shadow: 0 0 0 2px rgba(1,147,68,0.15);
}

.t-customer[b-e6qt5fasb8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.t-customer .c-name[b-e6qt5fasb8] {
    font-weight: 500;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Brand chip — kropka pomocna do szybkiego rozpoznania sklepu w skrzynce.
   Tooltip (title) na hover pokazuje nazwę brandu. Tenant z 1 brandem też ją widzi (subtelna identyfikacja). */
.t-customer .c-name .brand-dot[b-e6qt5fasb8] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
    flex-shrink: 0;
}

.t-row.unread .t-customer .c-name[b-e6qt5fasb8] { font-weight: 600; }

.t-customer .c-login[b-e6qt5fasb8] {
    font-size: 11.5px;
    color: var(--text-faint);
    font-family: 'Geist Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t-snippet[b-e6qt5fasb8] {
    font-size: 13px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    display: block;  /* musi byc block zeby max-width dzialal w grid item (inline domyslnie ignorowal) */
}

.t-row.unread .t-snippet[b-e6qt5fasb8] { color: var(--text); }

.t-snippet .subject[b-e6qt5fasb8] {
    color: var(--text);
    font-weight: 500;
    margin-right: 0.35rem;
}

.t-row.unread .t-snippet .subject[b-e6qt5fasb8] { font-weight: 600; }

.t-snippet .ticket-num[b-e6qt5fasb8] {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--text-faint);
    margin-right: 0.4rem;
    padding: 1px 5px;
    background: var(--cream-2);
    border-radius: 4px;
    flex: none;
}

.t-sla[b-e6qt5fasb8] { display: flex; flex-direction: column; gap: 4px; }
.t-sla .label[b-e6qt5fasb8] {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    color: var(--text-soft);
}
.t-sla .label.danger[b-e6qt5fasb8] { color: var(--danger); font-weight: 600; }
.t-sla .label.warn[b-e6qt5fasb8] { color: var(--warn); font-weight: 600; }
.t-sla .label.ok[b-e6qt5fasb8] { color: var(--text-faint); }

.t-tags[b-e6qt5fasb8] { display: flex; gap: 4px; flex-wrap: wrap; }

.t-time[b-e6qt5fasb8] {
    font-family: 'Geist Mono', monospace;
    font-size: 11.5px;
    color: var(--text-soft);
    text-align: right;
}

.t-time .abs[b-e6qt5fasb8] {
    display: block;
    font-size: 10px;
    color: var(--text-faint);
    margin-top: 1px;
}

.t-pager[b-e6qt5fasb8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--cream);
    border-top: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 12.5px;
}

.t-pager .nums[b-e6qt5fasb8] { font-family: 'Geist Mono', monospace; }
.t-pager strong[b-e6qt5fasb8] { color: var(--text); font-weight: 600; }

.desktop-only[b-e6qt5fasb8] { display: grid; }

@media (max-width: 1200px) {
    .t-head[b-e6qt5fasb8], .t-row[b-e6qt5fasb8] {
        grid-template-columns: 12px 36px 1.4fr 1.6fr 110px 90px;
        gap: 0.5rem;
    }
    /* Hide tagi, agent, count w średnich szerokościach */
    .t-head > :nth-child(n+6):nth-child(-n+8)[b-e6qt5fasb8],
    .t-row > :nth-child(n+6):nth-child(-n+8)[b-e6qt5fasb8] { display: none; }
}

@media (max-width: 900px) {
    .desktop-only[b-e6qt5fasb8] { display: none; }
    .t-row[b-e6qt5fasb8] {
        grid-template-columns: auto 1fr auto;
        gap: 0.6rem;
        padding: 0.75rem 0.95rem;
        align-items: flex-start;
    }
    .t-row > :nth-child(1)[b-e6qt5fasb8] { /* leader (unread bar) — left padding */
        display: none;
    }
    .t-row > :nth-child(2)[b-e6qt5fasb8] { /* channel icon */
        grid-row: 1 / span 2;
    }
    .t-row > :nth-child(3)[b-e6qt5fasb8] { /* customer */
        grid-row: 1;
        min-width: 0;
    }
    .t-row > :nth-child(4)[b-e6qt5fasb8] { /* snippet */
        grid-column: 2 / span 1;
        grid-row: 2;
        min-width: 0;
    }
    .t-row > :nth-child(5)[b-e6qt5fasb8] { /* sla */
        grid-column: 3;
        grid-row: 1;
        text-align: right;
    }
    .t-row > :nth-child(6)[b-e6qt5fasb8],
    .t-row > :nth-child(7)[b-e6qt5fasb8],
    .t-row > :nth-child(8)[b-e6qt5fasb8] { display: none; }
    .t-row > :nth-child(9)[b-e6qt5fasb8] { /* time */
        grid-column: 3;
        grid-row: 2;
    }
    .t-row > :nth-child(9) .abs[b-e6qt5fasb8] { display: none; }
}
/* /Components/Pages/Integrations/Email/AddEmailAccount.razor.rz.scp.css */
/* Walidacja per-pole formularza podłączania skrzynki:
   czerwona ramka na błędnym polu + komunikat pod polem + podsumowanie przy przyciskach.
   Style scoped — dotyczą tylko inputów tego komponentu. */

.form-input.input-error[b-tss4ekv6bi] {
    border-color: var(--danger);
    background: color-mix(in oklab, var(--danger) 5%, transparent);
}

.form-input.input-error:focus[b-tss4ekv6bi] {
    outline: none;
    border-color: var(--danger);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--danger) 22%, transparent);
}

.field-error[b-tss4ekv6bi] {
    display: block;
    color: var(--danger);
    font-size: 11px;
    font-weight: 500;
    margin-top: 0.2rem;
}

.form-error-summary[b-tss4ekv6bi] {
    border: 1px solid var(--danger);
    background: color-mix(in oklab, var(--danger) 8%, transparent);
    color: var(--danger);
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    font-size: 12.5px;
    font-weight: 500;
    margin-bottom: 0.2rem;
}
/* /Components/Pages/Integrations/Integrations.razor.rz.scp.css */
.head-row[b-ij54nucs0t] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.integ-grid[b-ij54nucs0t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.integ-card[b-ij54nucs0t] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.15rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.integ-card.tone-ok[b-ij54nucs0t] { border-left-color: var(--p1); }
.integ-card.tone-warn[b-ij54nucs0t] { border-left-color: var(--warn); }
.integ-card.tone-danger[b-ij54nucs0t] { border-left-color: var(--danger); }

.integ-card:hover[b-ij54nucs0t] { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.integ-head[b-ij54nucs0t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.integ-brand[b-ij54nucs0t] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.integ-brand strong[b-ij54nucs0t] { font-size: 14px; color: var(--text); }

.integ-meta[b-ij54nucs0t] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.integ-meta .kv-row[b-ij54nucs0t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: 12.5px;
}

.integ-meta .kv-row:last-child[b-ij54nucs0t] { border-bottom: none; }

.integ-meta .kv-label[b-ij54nucs0t] {
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10.5px;
    font-weight: 500;
}

.integ-meta .kv-val[b-ij54nucs0t] {
    color: var(--text);
    text-align: right;
    font-size: 12px;
}

/* Layout: jeden wiersz, primary po lewej, ikony destructive po prawej (auto-margin).
   Icon-only destructive (32×32px) zostawiają miejsce na 2 tekstowe primary buttons nawet
   w wąskiej karcie — bez wrap. Gdyby się jednak nie zmieściło, danger przeskakuje w
   nowy wiersz z prawym wyrównaniem. */
.integ-actions[b-ij54nucs0t] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.integ-actions[b-ij54nucs0t]  .integ-actions-primary {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.integ-actions[b-ij54nucs0t]  .integ-actions-danger {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    margin-left: auto;  /* zawsze do prawej (ważne też dla wrapped case — własna linia z right-align) */
}

/* Icon-only buttons w danger group — square 32×32, subtle hover, brak border domyślnie */
.integ-actions[b-ij54nucs0t]  .integ-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-soft);
    transition: all 0.15s ease;
    padding: 0;
}

.integ-actions[b-ij54nucs0t]  .integ-icon-btn:hover {
    background: var(--cream-2);
    color: var(--text);
    border-color: var(--line-strong);
}

/* "Ukryj" hover → soft danger (subtle, bo bezpieczna akcja — można cofnąć) */
.integ-actions[b-ij54nucs0t]  .integ-icon-hide:hover {
    background: #fbe9e6;
    color: var(--danger);
    border-color: #f1c5be;
}

/* "Usuń" hover → solid danger (mocny sygnał — destrukcyjne, irreversible) */
.integ-actions[b-ij54nucs0t]  .integ-icon-delete:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

[data-theme="dark"] .integ-actions[b-ij54nucs0t]  .integ-icon-btn:hover {
    background: var(--cream-2);
}
[data-theme="dark"] .integ-actions[b-ij54nucs0t]  .integ-icon-hide:hover {
    background: rgba(196,57,47,0.12);
    border-color: rgba(196,57,47,0.32);
    color: #f08a82;
}

/* Sync interval — segmented chip group per ConnectorAccount.
   Każdy pill to osobny formularz post — klik = natychmiastowy zapis (zero "Zapisz" button). */
.interval-pills[b-ij54nucs0t] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: var(--cream-2);
    padding: 0.25rem;
    border-radius: 10px;
    border: 1px solid var(--line);
}

.interval-pills form[b-ij54nucs0t] { display: inline; margin: 0; padding: 0; }

.interval-pills .f-chip[b-ij54nucs0t] {
    padding: 0.3rem 0.7rem;
    font-size: 12px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 7px;
    color: var(--text-soft);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.12s;
}

.interval-pills .f-chip:hover[b-ij54nucs0t] { background: var(--paper); color: var(--text); }

.interval-pills .f-chip.active[b-ij54nucs0t] {
    background: var(--p1);
    color: #fff;
    border-color: var(--p1);
}

/* Powod, dla ktorego przycisk naprawy jest niedostepny. Ta sama waga co przyciski obok,
   ale bez ramki — to komunikat, nie akcja. */
.integ-actions[b-ij54nucs0t]  .integ-perm-note {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-soft);
    max-width: 30ch;
}

.integ-actions[b-ij54nucs0t]  .integ-perm-note strong { color: var(--text); font-weight: 600; }

/* Wybor w drugim kroku usuwania integracji — klikalna karta, nie sam maly krazek radia.
   Cala etykieta jest celem klikniecia, wiec na telefonie tez da sie w to trafic. */
.del-choice[b-ij54nucs0t] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: .6rem;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.del-choice:hover[b-ij54nucs0t] { border-color: var(--line-strong); }
.del-choice.is-picked[b-ij54nucs0t] { border-color: var(--p1); background: color-mix(in oklab, var(--p1) 6%, transparent); }
.del-choice-danger.is-picked[b-ij54nucs0t] { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 7%, transparent); }
.del-choice input[type="radio"][b-ij54nucs0t] { margin-top: .2rem; flex: none; }
.del-choice > span[b-ij54nucs0t] { min-width: 0; }
.del-choice-desc[b-ij54nucs0t] {
    display: block;
    margin-top: .3rem;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-soft);
}
/* /Components/Pages/Settings/WorkTaskStatusesSettings.razor.rz.scp.css */
.ts-head[b-v3ss4i8gbi] { margin-bottom: 1.25rem; }

.ts-flash[b-v3ss4i8gbi] {
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 13px;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
}
.ts-flash-ok[b-v3ss4i8gbi]  { background: color-mix(in srgb, var(--p1) 10%, var(--paper)); border-color: color-mix(in srgb, var(--p1) 35%, var(--line)); color: var(--text); }
.ts-flash-err[b-v3ss4i8gbi] { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); color: var(--danger); }

.ts-card[b-v3ss4i8gbi] { padding: 0; overflow: hidden; }

/* ── Formularz edycji ── */
.ts-edit[b-v3ss4i8gbi] {
    padding: 1rem 1.35rem 1.1rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}

.ts-edit-grid[b-v3ss4i8gbi] {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto 90px auto auto;
    gap: 0.8rem;
    align-items: end;
}

.ts-field[b-v3ss4i8gbi] { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ts-field-flags[b-v3ss4i8gbi] { flex-direction: column; gap: 0.35rem; }
.ts-field-actions[b-v3ss4i8gbi] { flex-direction: row; gap: 0.4rem; align-items: center; }

.ts-label[b-v3ss4i8gbi] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    font-weight: 600;
}

.ts-color-row[b-v3ss4i8gbi] { display: flex; gap: 0.4rem; align-items: center; }
.ts-color[b-v3ss4i8gbi] {
    width: 36px; height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    cursor: pointer;
    flex: none;
}
.ts-color-hex[b-v3ss4i8gbi] { width: 88px; }

.ts-check[b-v3ss4i8gbi] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12.5px;
    color: var(--text-soft);
    cursor: pointer;
    white-space: nowrap;
}
.ts-check input[b-v3ss4i8gbi] { accent-color: var(--p1); }

.ts-preview[b-v3ss4i8gbi] {
    margin: 0.9rem 0 0;
    font-size: 12.5px;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ts-hint[b-v3ss4i8gbi] { color: var(--text-faint); }

/* ── Tabela ── */
.ts-table[b-v3ss4i8gbi] { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ts-table thead th[b-v3ss4i8gbi] {
    background: var(--cream);
    text-align: left;
    padding: 0.6rem 1rem;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
}
.ts-table td[b-v3ss4i8gbi] { padding: 0.6rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ts-table tbody tr:last-child td[b-v3ss4i8gbi] { border-bottom: none; }

.ts-muted[b-v3ss4i8gbi] { color: var(--text-faint); font-size: 12px; }

.ts-swatch[b-v3ss4i8gbi] {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
    margin-right: 0.4rem;
    vertical-align: -1px;
    border: 1px solid rgba(0,0,0,0.08);
}

.ts-link[b-v3ss4i8gbi] {
    background: none;
    border: none;
    padding: 0;
    font-size: 12.5px;
    color: var(--p1);
    cursor: pointer;
}
.ts-link:hover[b-v3ss4i8gbi] { text-decoration: underline; }
.ts-link-danger[b-v3ss4i8gbi] { color: var(--danger); }
.ts-sep[b-v3ss4i8gbi] { color: var(--text-faint); margin: 0 0.3rem; }

.ts-empty[b-v3ss4i8gbi] { padding: 2rem; text-align: center; color: var(--text-soft); font-size: 13.5px; }

@media (max-width: 760px) {
    .ts-edit-grid[b-v3ss4i8gbi] { grid-template-columns: 1fr; }
    .ts-field-actions[b-v3ss4i8gbi] { justify-content: flex-start; }
}
/* /Components/Pages/Tasks/TaskDetailPage.razor.rz.scp.css */
/* ── Powrót ── */
.task-back[b-0zau9n34jo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-soft);
    text-decoration: none;
    margin-bottom: 0.9rem;
    transition: color 0.14s;
}

.task-back:hover[b-0zau9n34jo] { color: var(--p1); }

.task-back svg[b-0zau9n34jo] {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.task-detail-loading[b-0zau9n34jo],
.task-detail-missing[b-0zau9n34jo] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 14px;
}

.task-detail-missing-title[b-0zau9n34jo] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: 0.3rem;
}

.task-detail-missing .btn[b-0zau9n34jo] { margin-top: 0.8rem; }

/* ── Kontener zadania: pełna szerokość (jak konwersacje), sidebar trzyma balans ── */
.td-wrap[b-0zau9n34jo] { width: 100%; }

/* ── Editorial header ── */
.td-head[b-0zau9n34jo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.td-head-titles[b-0zau9n34jo] { flex: 1; min-width: 0; }
.td-eyebrow[b-0zau9n34jo] { color: var(--text-faint); margin: 0 0 0.3rem; }
.td-title-row[b-0zau9n34jo] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.task-prio-dot[b-0zau9n34jo] {
    width: 11px; height: 11px;
    border-radius: 50%;
    flex: none;
}
.td-title-input[b-0zau9n34jo],
.td-title-static[b-0zau9n34jo] {
    flex: 1;
    min-width: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0;
}
.td-title-input[b-0zau9n34jo] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.1rem 0.5rem;
    margin: -0.1rem -0.5rem;
    transition: border-color 0.14s, background 0.14s;
}
.td-title-input:hover[b-0zau9n34jo] { border-color: var(--line); }
.td-title-input:focus[b-0zau9n34jo] { outline: none; border-color: var(--p1); background: var(--paper); }
.td-title-input[b-0zau9n34jo]::placeholder { color: var(--text-faint); font-style: italic; }

.td-status[b-0zau9n34jo] {
    flex: none;
    margin-top: 0.45rem;
    font-size: 12px;
    padding: 3px 12px;
}
.td-side-title[b-0zau9n34jo] { font-size: 1.15rem; }

/* ── Tagi zadania (chipy .tag globalne + picker globalny) ── */
.td-tags-head[b-0zau9n34jo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.td-tags-list[b-0zau9n34jo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

/* ── Grid 2 kolumny ── */
.task-detail-grid[b-0zau9n34jo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.4rem;
    align-items: stretch;
}

.task-detail-main[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}

.task-detail-side[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (max-width: 900px) {
    .task-detail-grid[b-0zau9n34jo] { grid-template-columns: 1fr; }
}

/* ── Opis: edytowalny blok prozy, nie pudełko formularza ── */
.td-desc-input[b-0zau9n34jo] {
    width: 100%;
    resize: vertical;
    min-height: 3.4rem;
    field-sizing: content;       /* auto-rośnie z treścią (Chromium); rows= to fallback */
    max-height: 420px;
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--cream);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    transition: border-color 0.14s, background 0.14s;
}
.td-desc-input:hover[b-0zau9n34jo] { border-color: var(--line); }
.td-desc-input:focus[b-0zau9n34jo] { outline: none; border-color: var(--p1); background: var(--paper); }
.td-desc-input[b-0zau9n34jo]::placeholder { color: var(--text-faint); }

.task-desc-static[b-0zau9n34jo] {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13.5px;
    color: var(--text);
    margin: 0;
}

.task-desc-empty[b-0zau9n34jo] {
    font-size: 13px;
    color: var(--text-faint);
    margin: 0;
}

/* ── Dyskusja ── */
.task-disc-card[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    flex: 1;                     /* dyskusja rośnie, wyrównując lewą kolumnę do sidebara */
}

.task-disc-count[b-0zau9n34jo] {
    font-size: 11px;
    color: var(--text-faint);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 0 7px;
    line-height: 18px;
}

.task-disc-stream[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    min-height: 150px;
    overflow-y: auto;
    padding: 0.9rem 1rem;
}

.task-disc-empty[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1.6rem 0.75rem;
    font-size: 12.5px;
    color: var(--text-faint);
    line-height: 1.5;
}

.task-disc-empty-ico[b-0zau9n34jo] {
    width: 32px; height: 32px;
    stroke: var(--line-strong); fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.task-disc-msg[b-0zau9n34jo] {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    max-width: 90%;
    align-self: flex-start;
}

.task-disc-msg.mine[b-0zau9n34jo] { align-self: flex-end; }

.task-disc-ava[b-0zau9n34jo] {
    margin-top: 1px;
    width: 28px; height: 28px;
    font-size: 10.5px;
    flex: none;
}

.task-disc-bubble[b-0zau9n34jo] {
    min-width: 0;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.45rem 0.65rem;
}

.task-disc-msg.mine .task-disc-bubble[b-0zau9n34jo] {
    background: color-mix(in srgb, var(--p1) 12%, var(--paper));
    border-color: color-mix(in srgb, var(--p1) 30%, var(--line));
}

.task-disc-msg-head[b-0zau9n34jo] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 2px;
}

.task-disc-author[b-0zau9n34jo] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
}

.task-disc-time[b-0zau9n34jo] {
    font-size: 10px;
    color: var(--text-faint);
    white-space: nowrap;
}

.task-disc-body[b-0zau9n34jo] {
    font-size: 13px;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.task-disc-composer[b-0zau9n34jo] {
    display: flex;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--line);
    align-items: flex-end;
    position: relative;   /* kotwica dla pickera @wzmianek */
}

/* ── @wzmianki: podpowiadacz w composerze + chip w treści ── */
.task-mention-picker[b-0zau9n34jo] {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: calc(100% - 0.35rem);
    z-index: 30;
    background: var(--cream-1, #fffdf7);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
    padding: 0.25rem;
}

.task-mention-hint[b-0zau9n34jo] {
    font-size: 10.5px;
    color: var(--text-faint);
    padding: 0.3rem 0.55rem 0.4rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.2rem;
    font-family: 'Geist Mono', monospace;
    letter-spacing: 0.02em;
}

.task-mention-item[b-0zau9n34jo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
}

.task-mention-item:hover[b-0zau9n34jo] {
    background: var(--cream-2, #f8f3e8);
}

.task-mention-ava[b-0zau9n34jo] {
    width: 22px;
    height: 22px;
    font-size: 10px;
    flex: 0 0 auto;
}

.task-mention-name[b-0zau9n34jo] {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-mention-handle[b-0zau9n34jo] {
    font-size: 12px;
    color: var(--text-faint);
    margin-left: auto;
    flex: 0 0 auto;
}

.task-mention-chip[b-0zau9n34jo] {
    color: var(--global-palette1, #009244);
    font-weight: 600;
    background: color-mix(in srgb, var(--global-palette1, #009244) 12%, transparent);
    border-radius: 4px;
    padding: 0 0.15rem;
}

.task-disc-input[b-0zau9n34jo] {
    flex: 1;
    resize: none;
    font: inherit;
    font-size: 13px;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--text);
}

.task-disc-input:focus[b-0zau9n34jo] { outline: none; border-color: var(--p1); }

.task-disc-send[b-0zau9n34jo] { white-space: nowrap; }

/* ── Sidebar ── */
.task-side-card[b-0zau9n34jo] { padding: 0; }

.task-side-body[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.task-side-field[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.task-side-label[b-0zau9n34jo] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    font-weight: 600;
}

.task-side-value[b-0zau9n34jo] {
    font-size: 13px;
    color: var(--text);
}

.task-side-sub[b-0zau9n34jo] {
    font-size: 11px;
    color: var(--text-faint);
}

.task-side-muted[b-0zau9n34jo] {
    font-size: 12.5px;
    color: var(--text-faint);
}

.task-prio-inline[b-0zau9n34jo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
}

/* ── Osoba (wykonawca / uczestnik) ── */
.task-person[b-0zau9n34jo] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 13px;
}

.task-person-row[b-0zau9n34jo] {
    display: flex;
    width: 100%;
}

.task-person-name[b-0zau9n34jo] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.task-person-remove[b-0zau9n34jo] {
    flex: none;
    width: 20px; height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: var(--text-faint);
    font-size: 15px;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}

.task-person-remove:hover[b-0zau9n34jo] { background: var(--danger-bg); color: var(--danger); }

/* ── Dodawanie uczestnika ── */
.task-add-participant[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--line);
}

.task-add-participant-row[b-0zau9n34jo] {
    display: flex;
    gap: 0.4rem;
}

.task-add-participant-row select[b-0zau9n34jo] { flex: 1; min-width: 0; }
.task-add-participant-row .btn[b-0zau9n34jo] { flex: none; }

/* ── Termin po terminie ── */
.tasks-due-over[b-0zau9n34jo] { color: var(--danger); font-weight: 600; }

.task-overdue-tag[b-0zau9n34jo] {
    display: inline-block;
    margin-top: 0.15rem;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 600;
    color: var(--danger);
    background: var(--danger-bg);
    border-radius: 999px;
    padding: 1px 7px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Link do zgłoszenia ── */
.task-conv-link[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: var(--text);
}

.task-conv-num[b-0zau9n34jo] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--p1);
}

.task-conv-link:hover .task-conv-num[b-0zau9n34jo] { text-decoration: underline; }

.task-conv-subj[b-0zau9n34jo] {
    font-size: 12px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Powiązane zgłoszenia (lista wielu + picker) ── */
.td-conv-list[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.td-conv-row[b-0zau9n34jo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.td-conv-row .task-conv-link[b-0zau9n34jo] { flex: 1 1 auto; min-width: 0; }

.td-conv-hint[b-0zau9n34jo] {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 12px;
}

/* Wynik wyszukiwania w pickerze: numer + temat + klient w jednym wierszu. */
.td-conv-result[b-0zau9n34jo] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    width: 100%;
    text-align: left;
}

.td-conv-result-text[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.td-conv-result-cust[b-0zau9n34jo] {
    font-size: 11px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Historia (oś czasu) ── */
/* Toolbar filtra historii — przełącznik szumu (comment_added/mentioned). */
.task-log-toolbar[b-0zau9n34jo] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}
.task-log-filter[b-0zau9n34jo] {
    font-family: inherit;
    font-size: 11px;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.task-log-filter:hover[b-0zau9n34jo] { background: var(--surface-2, rgba(0,0,0,0.03)); color: var(--text-soft); }
.task-log-filter.on[b-0zau9n34jo] {
    background: var(--surface-2, rgba(0,0,0,0.04));
    color: var(--text);
    border-color: var(--line-strong);
}

.task-log[b-0zau9n34jo] {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* pionowa linia łącząca kropki */
.task-log[b-0zau9n34jo]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--line);
}

.task-log-item[b-0zau9n34jo] {
    position: relative;
    display: flex;
    gap: 0.6rem;
    padding: 0.35rem 0 0.35rem 0;
}

.task-log-dot[b-0zau9n34jo] {
    position: relative;
    z-index: 1;
    flex: none;
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--line-strong);
    box-shadow: 0 0 0 3px var(--paper);   /* przykrywa linię pod kropką */
}

.task-log-ok[b-0zau9n34jo]      { background: var(--p1); }
.task-log-info[b-0zau9n34jo]    { background: var(--info); }
.task-log-warn[b-0zau9n34jo]    { background: var(--warn); }
.task-log-danger[b-0zau9n34jo]  { background: var(--danger); }
.task-log-accent[b-0zau9n34jo]  { background: var(--global-palette2, #c1d11c); }
.task-log-muted[b-0zau9n34jo]   { background: var(--line-strong); }

.task-log-content[b-0zau9n34jo] { min-width: 0; }

.task-log-summary[b-0zau9n34jo] {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}

.task-log-meta[b-0zau9n34jo] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 1px;
}

.task-log-actor[b-0zau9n34jo] {
    font-size: 11px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-log-time[b-0zau9n34jo] {
    font-size: 10px;
    color: var(--text-faint);
    white-space: nowrap;
    flex: none;
}

/* ── Usuń ── */
.task-delete-btn[b-0zau9n34jo] { align-self: flex-start; }
/* /Components/Pages/Tasks/TaskEditModal.razor.rz.scp.css */
.task-modal[b-c37nb0nvnq] {
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.task-modal-head[b-c37nb0nvnq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}

.task-modal-title[b-c37nb0nvnq] {
    margin: 0;
    font-family: 'Instrument Serif', serif;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Nadpisz globalny .modal-close (biały na ciemnym nagłówku) — tu nagłówek jest jasny. */
.task-modal-head .modal-close[b-c37nb0nvnq] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-soft);
    transition: background 0.14s, color 0.14s;
}

.task-modal-head .modal-close:hover[b-c37nb0nvnq] {
    background: var(--danger-bg);
    color: var(--danger);
}

.task-modal-head .modal-close svg[b-c37nb0nvnq] {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.task-modal-body[b-c37nb0nvnq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem;
}

.task-modal-label[b-c37nb0nvnq] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    margin: 0.5rem 0 0.1rem;
}

.task-modal-label:first-child[b-c37nb0nvnq] {
    margin-top: 0;
}

.task-modal-textarea[b-c37nb0nvnq] {
    resize: vertical;
    min-height: 60px;
}

.task-modal-row[b-c37nb0nvnq] {
    display: flex;
    gap: 0.75rem;
}

.task-modal-field[b-c37nb0nvnq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.task-modal-linkchip[b-c37nb0nvnq] {
    align-self: flex-start;
    margin-bottom: 0.4rem;
}

.task-modal-error[b-c37nb0nvnq] {
    margin-top: 0.6rem;
    align-self: flex-start;
}

.task-modal-foot[b-c37nb0nvnq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--line);
}

.task-modal-spacer[b-c37nb0nvnq] {
    flex: 1;
}

@media (max-width: 560px) {
    .task-modal-row[b-c37nb0nvnq] {
        flex-direction: column;
        gap: 0.35rem;
    }
}
/* /Components/Pages/Tasks/TasksPage.razor.rz.scp.css */
.tasks-head[b-hei3780ofq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ⚠ Kolumna z tytułem musi mieć `min-width: 0`, inaczej na telefonie przyciski o stałej
   szerokości spychają ją do ~200 px i podtytuł łamie się na cztery linijki, mając obok
   pół ekranu pustego miejsca. Domyślne `min-width: auto` na elemencie flex tego nie puszcza. */
.tasks-head > :first-child[b-hei3780ofq] {
    min-width: 0;
    flex: 1 1 auto;
}

/* Akcje nagłówka: przełącznik widoku (Tabela/Tablica) + „Nowe zadanie". */
.tasks-head-actions[b-hei3780ofq] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

/* Na wąskim ekranie przyciski schodzą pod tytuł — inaczej zabierają mu połowę szerokości. */
@media (max-width: 560px) {
    .tasks-head[b-hei3780ofq] { flex-wrap: wrap; }
    .tasks-head-actions[b-hei3780ofq] { width: 100%; }
}

/* Widok Tablica potrzebuje pełnej szerokości (kolumny Kanban) — zdejmij ograniczenie .content. */
.content.tasks-board-view[b-hei3780ofq] {
    max-width: none;
}

/* Toolbar filtrów przebudowany na wspólne klasy z app.css:
   .inbox-search (szukajka) + .filter-bar / .ms-dropdown / .f-chip / .f-sep (filtry).
   Przełącznik Tabela/Tablica → wspólny <ViewToggle />. Dawne .tasks-toolbar / .tasks-search* /
   .tfilter* / .seg* / .tasks-filters-sep usunięte (kontrolki zastąpione, .seg był duplikatem). */

/* ── Empty state ── */
.tasks-empty[b-hei3780ofq] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.tasks-empty-ico[b-hei3780ofq] {
    width: 40px;
    height: 40px;
    stroke: var(--line-strong);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 0.35rem;
}

.tasks-empty-title[b-hei3780ofq] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-soft);
}

.tasks-empty-sub[b-hei3780ofq] {
    font-size: 13px;
    color: var(--text-faint);
    margin-bottom: 0.6rem;
}

/* ── Table ── */
.tasks-table-card[b-hei3780ofq] {
    padding: 0;
    overflow: hidden;
}

.tasks-table[b-hei3780ofq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.tasks-table thead th[b-hei3780ofq] {
    background: var(--cream);
    text-align: left;
    padding: 0.65rem 1rem;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
}

.tasks-table td[b-hei3780ofq] {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.tasks-table tbody tr:last-child td[b-hei3780ofq] {
    border-bottom: none;
}

.tasks-row[b-hei3780ofq] {
    cursor: pointer;
    transition: background 0.12s;
}

.tasks-row:hover[b-hei3780ofq] {
    background: var(--cream);
}

.tasks-title[b-hei3780ofq] {
    font-weight: 600;
    color: var(--text);
}

.tasks-desc[b-hei3780ofq] {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 2px;
}

/* Priorytet — kolorowa kropka + etykieta (lekki „legend" znacznik). */
.tasks-prio[b-hei3780ofq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.tasks-prio-dot[b-hei3780ofq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

/* Wykonawca — awatar + nazwa. */
.tasks-assignee[b-hei3780ofq] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.tasks-assignee > span:last-child[b-hei3780ofq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasks-due-over[b-hei3780ofq] {
    color: var(--danger);
    font-weight: 600;
}

.tasks-overdue-tag[b-hei3780ofq] {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 10px;
    font-weight: 600;
    color: var(--danger);
    background: var(--danger-bg);
    border-radius: 999px;
    padding: 1px 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.tasks-conv-link[b-hei3780ofq] {
    color: var(--p1);
    text-decoration: none;
}

.tasks-conv-link:hover[b-hei3780ofq] {
    text-decoration: underline;
}

.tasks-standalone[b-hei3780ofq] {
    color: var(--text-faint);
    font-size: 12px;
}

/* ── Mobile cards ── */
.tasks-mcard[b-hei3780ofq] {
    position: relative;
    cursor: pointer;
    padding-left: 1rem;
    overflow: hidden;
}

.tasks-mcard[b-hei3780ofq]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent, var(--line-strong));
}

/* Tytuł zadania — pełna szerokość, zawija się naturalnie (nie ściska statusu w prawy róg). */
.tasks-mcard-title[b-hei3780ofq] {
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Meta: status · priorytet · wykonawca · termin — chipy w jednym zawijanym rzędzie pod tytułem. */
.tasks-mcard-meta[b-hei3780ofq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.55rem;
    font-size: 12.5px;
    color: var(--text-soft);
}

/* Status jako pełnoprawny chip w rzędzie meta — nie zawija się w środku etykiety. */
.tasks-mcard-status[b-hei3780ofq] {
    flex: none;
    white-space: nowrap;
}
/* /Components/Pages/Vault/VaultPage.razor.rz.scp.css */
/* Sejf firmowy — style ekranu.
   Motyw: dokument z redakcją. Wartość nigdy nie udaje kropek — jest zaczerniona paskiem tuszu,
   a odsłonięcie to zdarzenie (pasek się cofa, biegnie lont), nie przełącznik.
   ⚠ To jest CSS SCOPED — działa wyłącznie w tym komponencie. */

/* ─────────────── Nagłówek ─────────────── */
.vault-head[b-f9vxsmtd1u] { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.vault-sub[b-f9vxsmtd1u] { color: var(--text-soft); font-size: 12.5px; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.vault-actions[b-f9vxsmtd1u] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.state-pill[b-f9vxsmtd1u] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 3px 10px 3px 7px; border-radius: 999px;
    background: var(--ok-bg); color: var(--p1);
    font-size: 11.5px; font-weight: 500;
}
.state-pill svg[b-f9vxsmtd1u] { width: 13px; height: 13px; }

.vault-error[b-f9vxsmtd1u] {
    background: var(--danger-bg); color: var(--danger);
    border-radius: var(--radius); padding: 0.6rem 0.85rem;
    font-size: 12.5px; margin-bottom: 1rem;
}

/* ─────────────── Układ ─────────────── */
.vault-grid[b-f9vxsmtd1u] { display: grid; grid-template-columns: 214px 1fr; gap: 1.25rem; align-items: start; }

.rail[b-f9vxsmtd1u] {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 0.5rem; position: sticky; top: 1rem;
}
.rail-label[b-f9vxsmtd1u] { padding: 0.4rem 0.6rem 0.5rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); font-weight: 600; }
.fold[b-f9vxsmtd1u] {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%; text-align: left; border: none; background: none; cursor: pointer;
    padding: 0.42rem 0.55rem; margin-bottom: 1px;
    border-radius: 6px; font-size: 12.5px; font-family: inherit; color: var(--text-soft);
    transition: background 0.13s, color 0.13s;
}
.fold:hover[b-f9vxsmtd1u] { background: var(--cream-2); color: var(--text); }
.fold.active[b-f9vxsmtd1u] { background: var(--p4); color: #fff; font-weight: 500; }
.fold.root[b-f9vxsmtd1u] { font-weight: 500; color: var(--text); }
.fold .fname[b-f9vxsmtd1u] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold .fico[b-f9vxsmtd1u] { width: 14px; height: 14px; flex: none; opacity: 0.55; }
.fold.active .fico[b-f9vxsmtd1u] { opacity: 0.9; }

/* Prowadnica drzewa — jedna kreska na poziom. Bez niej dwa podfoldery obok siebie
   wygladaja jak rodzenstwo tego samego rodzica, choc nimi nie sa. */
.fold .tree-guide[b-f9vxsmtd1u] {
    width: 11px; flex: none; align-self: stretch;
    border-left: 1px solid var(--line-strong);
    margin-left: 3px;
}
.fold.active .tree-guide[b-f9vxsmtd1u] { border-left-color: rgba(255, 255, 255, 0.28); }
.fold .n[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; opacity: 0.55; }
.fold.active .n[b-f9vxsmtd1u] { opacity: 0.85; }
.rail-sep[b-f9vxsmtd1u] { height: 1px; background: var(--line); margin: 0.5rem 0.3rem; }
.rail-foot[b-f9vxsmtd1u] { padding: 0.35rem 0.6rem 0.2rem; }
.rail-foot button[b-f9vxsmtd1u] { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--p1); font-weight: 500; padding: 0; }
.rail-foot button:hover[b-f9vxsmtd1u] { text-decoration: underline; }
.rail-foot button.danger[b-f9vxsmtd1u] { color: var(--danger); display: block; margin-top: 0.35rem; }

/* ─────────────── Pasek narzędzi ─────────────── */
.vtoolbar[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.vsearch input[b-f9vxsmtd1u] {
    height: 34px; width: 280px; padding: 0 0.7rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    font-family: inherit; font-size: 12.5px; background: var(--paper); color: var(--text);
}
.vsearch input:focus[b-f9vxsmtd1u] { outline: none; border-color: var(--p1); box-shadow: 0 0 0 3px rgba(1, 147, 68, 0.12); }
.fchips[b-f9vxsmtd1u] { display: flex; gap: 0.3rem; }
.fchip[b-f9vxsmtd1u] {
    border: none; cursor: pointer; font-family: inherit;
    font-size: 12px; padding: 5px 11px; border-radius: 999px;
    background: var(--cream-2); color: var(--text-soft); font-weight: 500;
    transition: background 0.13s, color 0.13s;
}
.fchip:hover[b-f9vxsmtd1u] { background: var(--line); }
.fchip.active[b-f9vxsmtd1u] { background: var(--p4); color: #fff; }

/* ─────────────── Tabela ─────────────── */
.tbl-wrap[b-f9vxsmtd1u] { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.vtbl[b-f9vxsmtd1u] { width: 100%; border-collapse: collapse; }
.vtbl thead th[b-f9vxsmtd1u] {
    text-align: left; padding: 0.65rem 1rem;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-soft); font-weight: 600;
    border-bottom: 1px solid var(--line); background: var(--cream);
}
.vtbl tbody tr[b-f9vxsmtd1u] { border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.14s; }
.vtbl tbody tr:last-child[b-f9vxsmtd1u] { border-bottom: none; }
.vtbl tbody tr:hover[b-f9vxsmtd1u] { background: var(--cream); }
.vtbl td[b-f9vxsmtd1u] { padding: 0.7rem 1rem; vertical-align: middle; }

.vname[b-f9vxsmtd1u] { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 0.4rem; color: var(--text); }
.vname .locknote[b-f9vxsmtd1u] { color: var(--warn); font-size: 10px; }
.vdesc[b-f9vxsmtd1u] { font-size: 11.5px; color: var(--text-soft); margin-top: 1px; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ Pasek tuszu — sygnatura ekranu ══ */
.secret[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.6rem; }
.kind[b-f9vxsmtd1u] {
    font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-faint); width: 5.2rem; flex: none;
}
.ink[b-f9vxsmtd1u] { position: relative; width: 134px; height: 19px; flex: none; display: flex; align-items: center; }
.ink .val[b-f9vxsmtd1u] {
    font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px;
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
    opacity: 0; transition: opacity 0.15s 0.1s;
}
/* Szerokość paska jest STAŁA — długość hasła też jest informacją. */
.ink .bar[b-f9vxsmtd1u] {
    position: absolute; inset: 0; background: var(--p3); border-radius: 2px;
    transform-origin: right center; transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.ink.open .bar[b-f9vxsmtd1u] { transform: scaleX(0); }
.ink.open .val[b-f9vxsmtd1u] { opacity: 1; }
.ink .fuse[b-f9vxsmtd1u] { position: absolute; left: 0; bottom: -4px; height: 2px; background: var(--p1); border-radius: 2px; width: 0; opacity: 0; }
.ink.open .fuse[b-f9vxsmtd1u] { width: 100%; opacity: 1; animation: vault-burn-b-f9vxsmtd1u 30s linear forwards; }
@keyframes vault-burn-b-f9vxsmtd1u { to { width: 0; } }

.secret-actions[b-f9vxsmtd1u] { display: flex; gap: 0.15rem; align-items: center; }
.mini-act[b-f9vxsmtd1u] {
    width: 28px; height: 28px; display: grid; place-items: center;
    border: none; background: none; cursor: pointer; font-size: 13px;
    border-radius: 6px; color: var(--text-faint); transition: background 0.13s, color 0.13s;
}
.mini-act:hover[b-f9vxsmtd1u] { background: var(--cream-2); color: var(--p1); }
.mini-act.on[b-f9vxsmtd1u] { color: var(--p1); background: var(--ok-bg); }

.faces[b-f9vxsmtd1u] { display: flex; align-items: center; }
.faces .avatar[b-f9vxsmtd1u] { margin-left: -6px; box-shadow: 0 0 0 2px var(--paper); }
.faces .avatar:first-child[b-f9vxsmtd1u] { margin-left: 0; }
.faces .more[b-f9vxsmtd1u] {
    margin-left: -6px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--cream-2); color: var(--text-soft);
    display: grid; place-items: center; font-size: 9.5px; font-weight: 600;
    box-shadow: 0 0 0 2px var(--paper);
}

.td-when[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-soft); }
.td-when small[b-f9vxsmtd1u] { display: block; color: var(--text-faint); font-size: 10.5px; font-family: inherit; }

.vault-empty[b-f9vxsmtd1u] { color: var(--text-soft); font-size: 13px; line-height: 1.7; }
.vault-empty strong[b-f9vxsmtd1u] { color: var(--text); }

/* ─────────────── Szuflada ─────────────── */
.drawer-backdrop[b-f9vxsmtd1u] { position: fixed; inset: 0; background: rgba(17, 19, 23, 0.5); z-index: 150; }
/* Szeroka szuflada — klucz prywatny albo procedura na 40 linii potrzebuje miejsca.
   Waska kolumna zamieniala je w niekonczace sie przewijanie. */
.drawer[b-f9vxsmtd1u] {
    position: fixed; right: 0; top: 0; height: 100vh; width: min(980px, 96vw);
    background: var(--paper); border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg); z-index: 200;
    display: flex; flex-direction: column;
    animation: vault-slide-b-f9vxsmtd1u 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes vault-slide-b-f9vxsmtd1u { from { transform: translateX(100%); } to { transform: none; } }
.drawer-head[b-f9vxsmtd1u] { padding: 1.1rem 1.25rem 0.9rem; border-bottom: 1px solid var(--line); }
.dh-top[b-f9vxsmtd1u] { display: flex; align-items: flex-start; gap: 0.75rem; }
.drawer-title[b-f9vxsmtd1u] { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; flex: 1; margin: 0; }
.drawer-close[b-f9vxsmtd1u] { width: 30px; height: 30px; border: none; background: none; cursor: pointer; font-size: 20px; line-height: 1; border-radius: 6px; color: var(--text-faint); flex: none; }
.drawer-close:hover[b-f9vxsmtd1u] { background: var(--cream-2); color: var(--text); }
.drawer-meta[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.drawer-body[b-f9vxsmtd1u] { flex: 1; overflow-y: auto; padding: 1.1rem 1.5rem 2rem; }

.drawer-cols[b-f9vxsmtd1u] { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
/* ⚠ min-width:0 na kolumnach siatki — bez tego długa linia klucza rozpycha kolumnę i psuje układ. */
.dcol[b-f9vxsmtd1u] { min-width: 0; }
.dcol-side[b-f9vxsmtd1u] { border-left: 1px solid var(--line); padding-left: 1.5rem; }

.dsec[b-f9vxsmtd1u] { margin-bottom: 1.5rem; }
.dsec-title[b-f9vxsmtd1u] { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); font-weight: 600; margin-bottom: 0.6rem; }
.dsec-actions[b-f9vxsmtd1u] { display: flex; gap: 0.4rem; margin-top: 0.8rem; }
.dsec-actions .danger[b-f9vxsmtd1u] { color: var(--danger); }

.big-secret[b-f9vxsmtd1u] { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem; }
.big-ink[b-f9vxsmtd1u] { position: relative; min-height: 42px; display: flex; align-items: center; }
.big-ink .bval[b-f9vxsmtd1u] {
    font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.55;
    word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--text);
    opacity: 0; transition: opacity 0.15s 0.1s;
    /* Długa notatka nie może rozpychać szuflady w nieskończoność — dostaje własne przewijanie. */
    max-height: 52vh; overflow-y: auto; width: 100%;
}
.big-ink .bbar[b-f9vxsmtd1u] {
    position: absolute; inset: 0; background: var(--p3); border-radius: 4px;
    transform-origin: right center; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: grid; place-items: center;
}
.big-ink .bbar span[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: rgba(255, 255, 255, 0.42); letter-spacing: 0.1em; text-transform: uppercase; }
.big-ink.open .bbar[b-f9vxsmtd1u] { transform: scaleX(0); }
.big-ink.open .bval[b-f9vxsmtd1u] { opacity: 1; }
.big-actions[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem; flex-wrap: wrap; }
.big-actions .sp[b-f9vxsmtd1u] { margin-left: auto; }
.logged-note[b-f9vxsmtd1u] { font-size: 11px; color: var(--text-faint); }

.dfields[b-f9vxsmtd1u] { display: grid; gap: 0.7rem; }
.dfield[b-f9vxsmtd1u] { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.6rem; align-items: baseline; font-size: 12.5px; }
.dfield .dl[b-f9vxsmtd1u] { color: var(--text-faint); font-size: 11.5px; }
.dfield .dv[b-f9vxsmtd1u] { color: var(--text); word-break: break-word; }
.dfield .dv.mono[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; }
.file-link[b-f9vxsmtd1u] { color: var(--p1); font-weight: 500; }

.acl-row[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.acl-row:last-of-type[b-f9vxsmtd1u] { border-bottom: none; }
.acl-who[b-f9vxsmtd1u] { flex: 1; min-width: 0; }
.acl-who .an[b-f9vxsmtd1u] { display: block; font-size: 12.5px; font-weight: 500; }
.acl-who .aw[b-f9vxsmtd1u] { display: block; font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.acl-tag[b-f9vxsmtd1u] { font-size: 10.5px; padding: 1px 7px; border-radius: 4px; background: var(--cream-2); color: var(--text-soft); font-weight: 500; white-space: nowrap; }
.acl-tag.inherit[b-f9vxsmtd1u] { background: var(--info-bg); color: var(--info); }
.acl-tag.extra[b-f9vxsmtd1u] { background: var(--ok-bg); color: var(--p1); }
.acl-tag.denied[b-f9vxsmtd1u] { background: var(--danger-bg); color: var(--danger); }
.acl-add[b-f9vxsmtd1u] { display: flex; gap: 0.4rem; margin-top: 0.75rem; }
.acl-add select[b-f9vxsmtd1u] { flex: 1; }
.acl-hint[b-f9vxsmtd1u] { font-size: 11px; color: var(--text-faint); margin-top: 0.5rem; line-height: 1.5; }

.hist[b-f9vxsmtd1u] { display: grid; }
.hrow[b-f9vxsmtd1u] { display: flex; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.hrow:last-child[b-f9vxsmtd1u] { border-bottom: none; }
.hdot[b-f9vxsmtd1u] { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); margin-top: 0.4rem; flex: none; }
.hdot.reveal[b-f9vxsmtd1u] { background: var(--warn); }
.hdot.edit[b-f9vxsmtd1u] { background: var(--info); }
.hdot.create[b-f9vxsmtd1u] { background: var(--p1); }
.hdot.denied[b-f9vxsmtd1u] { background: var(--danger); }
.hbody[b-f9vxsmtd1u] { flex: 1; min-width: 0; }
.hbody .hw[b-f9vxsmtd1u] { font-weight: 500; }
.hbody .hd[b-f9vxsmtd1u] { color: var(--text-soft); font-size: 11.5px; }
.htime[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* ─────────────── Ekran blokady ─────────────── */
.lockscreen[b-f9vxsmtd1u] {
    position: fixed; inset: 0; z-index: 400;
    background: var(--cream);
    background-image:
        radial-gradient(at 15% 10%, rgba(1, 147, 68, 0.08) 0, transparent 45%),
        radial-gradient(at 85% 90%, rgba(193, 209, 28, 0.07) 0, transparent 45%);
    display: grid; place-items: center; padding: 1.5rem;
}
.lockbox[b-f9vxsmtd1u] { width: min(430px, 100%); text-align: center; }
.lock-mark[b-f9vxsmtd1u] {
    width: 54px; height: 54px; margin: 0 auto 1.25rem;
    border-radius: 14px; background: var(--grad-dark);
    display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(2, 44, 50, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.lock-mark svg[b-f9vxsmtd1u] { width: 24px; height: 24px; color: var(--p2); }
.lock-title[b-f9vxsmtd1u] { font-size: 2.1rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.lock-title em[b-f9vxsmtd1u] { font-style: italic; color: var(--p1); margin-left: 0.12em; }
.lock-sub[b-f9vxsmtd1u] { color: var(--text-soft); font-size: 13px; margin-top: 0.6rem; line-height: 1.6; }
.lock-form[b-f9vxsmtd1u] { margin-top: 1.5rem; display: grid; gap: 0.6rem; }
.lock-form input[b-f9vxsmtd1u] { height: 44px; text-align: center; font-size: 14px; }
.lock-form .btn[b-f9vxsmtd1u] { height: 44px; justify-content: center; }
.lock-error[b-f9vxsmtd1u] { margin-top: 0.9rem; font-size: 12.5px; color: var(--danger); }
.lock-foot[b-f9vxsmtd1u] { margin-top: 1.25rem; font-size: 11.5px; color: var(--text-faint); line-height: 1.6; }

/* ─────────────── Formularz wpisu ─────────────── */
.vault-modal[b-f9vxsmtd1u] { max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; }
.vault-form[b-f9vxsmtd1u] { display: grid; gap: 0.95rem; }
.field label[b-f9vxsmtd1u] { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 600; margin-bottom: 0.35rem; }
.field textarea[b-f9vxsmtd1u] { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; line-height: 1.55; resize: vertical; }
.field .hint[b-f9vxsmtd1u] { font-size: 11px; color: var(--text-faint); margin-top: 0.3rem; }
.field .hint.danger[b-f9vxsmtd1u] { color: var(--danger); }

.seg[b-f9vxsmtd1u] { display: flex; gap: 0.25rem; background: var(--cream-2); padding: 3px; border-radius: var(--radius); }
.seg button[b-f9vxsmtd1u] { flex: 1; border: none; cursor: pointer; font-family: inherit; padding: 0.4rem 0.5rem; border-radius: 6px; font-size: 12px; background: none; color: var(--text-soft); font-weight: 500; }
.seg button.active[b-f9vxsmtd1u] { background: var(--paper); color: var(--text); box-shadow: var(--shadow-sm); }

.gen-row[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem; flex-wrap: wrap; }
.gen-row .sp[b-f9vxsmtd1u] { margin-left: auto; }
.strength[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.4rem; font-size: 11px; color: var(--text-soft); }
.sbar[b-f9vxsmtd1u] { width: 68px; height: 4px; border-radius: 999px; background: var(--cream-2); overflow: hidden; }
.sbar i[b-f9vxsmtd1u] { display: block; height: 100%; border-radius: 999px; transition: width 0.25s, background 0.25s; }
.inline-check[b-f9vxsmtd1u] { display: flex; align-items: center; gap: 0.35rem; font-size: 12px; color: var(--text-soft); text-transform: none; letter-spacing: 0; font-weight: 400; margin: 0; }
.inline-check input[b-f9vxsmtd1u] { width: auto; }

.vault-toast[b-f9vxsmtd1u] {
    position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
    background: var(--p3); color: #fff; padding: 0.6rem 1rem;
    border-radius: var(--radius); font-size: 12.5px; z-index: 900;
    box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
    .ink .bar[b-f9vxsmtd1u], .big-ink .bbar[b-f9vxsmtd1u], .drawer[b-f9vxsmtd1u] { transition: none; animation: none; }
    .ink.open .fuse[b-f9vxsmtd1u] { animation: none; width: 100%; }
}

/* Wąski ekran — szuflada wraca do jednej kolumny (kreska pionowa nie ma czego oddzielać). */
@media (max-width: 900px) {
    .drawer-cols[b-f9vxsmtd1u] { grid-template-columns: 1fr; gap: 0; }
    .dcol-side[b-f9vxsmtd1u] { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.25rem; }
    .big-ink .bval[b-f9vxsmtd1u] { max-height: 40vh; }
}

@media (max-width: 1150px) {
    .vault-grid[b-f9vxsmtd1u] { grid-template-columns: 1fr; }
    .rail[b-f9vxsmtd1u] { position: static; display: flex; gap: 0.3rem; overflow-x: auto; padding: 0.4rem; }
    .rail-label[b-f9vxsmtd1u], .rail-sep[b-f9vxsmtd1u], .rail-foot[b-f9vxsmtd1u] { display: none; }
    .fold[b-f9vxsmtd1u] { width: auto; white-space: nowrap; }
    /* W poziomej szynie drzewo nie ma sensu — prowadnice i tak nie pokazywalyby zagniezdzenia. */
    .fold .tree-guide[b-f9vxsmtd1u] { display: none; }
}
@media (max-width: 900px) {
    .vsearch[b-f9vxsmtd1u] { flex: 1; }
    .vsearch input[b-f9vxsmtd1u] { width: 100%; }
    .vtbl thead[b-f9vxsmtd1u] { display: none; }
    .vtbl tbody tr[b-f9vxsmtd1u] { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; padding: 0.75rem 1rem; }
    .vtbl td[b-f9vxsmtd1u] { padding: 0; }
    .vtbl td:nth-child(4)[b-f9vxsmtd1u], .vtbl td:nth-child(5)[b-f9vxsmtd1u] { text-align: left; }
}
/* /Components/Shared/KanbanBoard.razor.rz.scp.css */
.kanban[b-ggpoluqmxj] {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.kanban-col[b-ggpoluqmxj] {
    flex: 1 1 0;
    min-width: 250px;
    max-width: 380px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-top: 2px solid var(--col-accent, var(--line-strong));
    border-radius: var(--radius-lg, 12px);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* Trwa ciągnięcie — wszystkie kolumny sygnalizują, że są strefami zrzutu. */
.kanban.is-dragging .kanban-col[b-ggpoluqmxj] {
    border-color: var(--line-strong);
}

/* Kolumna pod kursorem — akcent statusu, delikatne uniesienie. */
.kanban-col.drop-over[b-ggpoluqmxj] {
    background: color-mix(in srgb, var(--col-accent, var(--p1)) 9%, var(--cream));
    border-color: var(--col-accent, var(--p1));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--col-accent, var(--p1)) 20%, transparent);
}

.kanban-col-head[b-ggpoluqmxj] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: inherit;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
    z-index: 1;
}

.kanban-col-dot[b-ggpoluqmxj] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--col-accent, var(--text-faint));
    flex: none;
}

.kanban-col-title[b-ggpoluqmxj] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    margin-right: auto;
}

.kanban-col-count[b-ggpoluqmxj] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-soft);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 0 8px;
    line-height: 18px;
    min-width: 24px;
    text-align: center;
}

.kanban-col-body[b-ggpoluqmxj] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.6rem;
    overflow-y: auto;
    flex: 1;
    min-height: 80px;
}

.kanban-col-empty[b-ggpoluqmxj] {
    font-size: 11.5px;
    color: var(--text-faint);
    text-align: center;
    padding: 1.2rem 0.5rem;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.kanban-col.drop-over .kanban-col-empty[b-ggpoluqmxj] {
    border-color: var(--col-accent, var(--p1));
    color: var(--col-accent, var(--text-soft));
    background: color-mix(in srgb, var(--col-accent, var(--p1)) 6%, transparent);
}

/* Karta full-bleed — padding=0, aby szablon karty rysował grzbiet akcentu flush do krawędzi. */
.kanban-card[b-ggpoluqmxj] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
    cursor: grab;
    transition: box-shadow 0.14s, transform 0.14s, opacity 0.14s;
    /* NIE kurcz i NIE rozciągaj karty w gęstej kolumnie — każda zachowuje naturalną
       wysokość, a kolumna (overflow-y:auto) się przewija. min-height gwarantuje
       czytelny kafelek nawet gdy część pól jest pusta. flex-column + stretch dziecka
       (.bcard flex:1) sprawia, że grzbiet akcentu sięga do dolnej krawędzi karty. */
    flex: 0 0 auto;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.kanban-card:hover[b-ggpoluqmxj] {
    box-shadow: 0 4px 14px rgba(17,19,23,0.10);
    transform: translateY(-1px);
    border-color: var(--line-strong);
}

.kanban-card:active[b-ggpoluqmxj] {
    cursor: grabbing;
}

.kanban-card.dragging[b-ggpoluqmxj] {
    opacity: 0.35;
    border-style: dashed;
    box-shadow: none;
    transform: none;
}
/* /Components/Shared/Pager.razor.rz.scp.css */
.pager[b-mhwh0keb2i] {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--line);
    background: var(--cream-2);
}

.pager-btn[b-mhwh0keb2i] {
    min-width: 32px;
    height: 32px;
    padding: 0 0.55rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text-soft);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s;
}

.pager-btn:hover:not(:disabled)[b-mhwh0keb2i] {
    background: var(--cream);
    color: var(--text);
    border-color: var(--line-strong);
}

.pager-btn.active[b-mhwh0keb2i] {
    background: var(--p1);
    color: #fff;
    border-color: var(--p1);
}

.pager-btn:disabled[b-mhwh0keb2i] {
    opacity: 0.35;
    cursor: not-allowed;
}

.pager-ellipsis[b-mhwh0keb2i] {
    color: var(--text-faint);
    padding: 0 0.4rem;
    font-size: 12.5px;
}

.pager-meta[b-mhwh0keb2i] {
    margin-left: auto;
    color: var(--text-soft);
    font-size: 12.5px;
}
/* /Components/Shared/TaskBoardCard.razor.rz.scp.css */
/* ── Karta zadania na tablicy Kanban (scoped, wspólna dla BoardPage + Zadań) ── */
.bcard[b-l43gvl73cq] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
    padding: 0.55rem 0.7rem 0.6rem 0.85rem;
}

/* Grzbiet akcentu — priorytet — flush do lewej krawędzi karty. */
.bcard[b-l43gvl73cq]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent, var(--line-strong));
}

.bcard-grow[b-l43gvl73cq] {
    flex: 1 1 auto;
}

.bcard-subject[b-l43gvl73cq] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bcard-due[b-l43gvl73cq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    font-size: 11px;
    color: var(--text-soft);
}

.bcard-due-ico[b-l43gvl73cq] {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bcard-due.overdue[b-l43gvl73cq] {
    color: var(--danger);
    font-weight: 600;
}

/* Rząd tagów zadania (chipy .tag globalne) — max 3 + licznik reszty. */
.bcard-tags[b-l43gvl73cq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.45rem;
}

.bcard-tags-more[b-l43gvl73cq] {
    font-size: 10.5px;
    color: var(--text-faint);
    font-weight: 600;
}

.bcard-foot[b-l43gvl73cq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* auto = dosuń stopkę do dołu, by zadanie z małą liczbą pól wypełniało kartę
       (min-height 120px) czysto, bez pustej przestrzeni na dole. */
    margin-top: auto;
    padding-top: 0.6rem;
}

.bcard-unassigned[b-l43gvl73cq] {
    font-size: 11px;
    color: var(--text-faint);
    font-style: italic;
}

/* Odnośnik do powiązanego zgłoszenia — klikany <span> wewnątrz karty-linku. */
.bcard-conv[b-l43gvl73cq] {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 11px;
    color: var(--p1);
    text-decoration: none;
    cursor: pointer;
}

.bcard-conv:hover[b-l43gvl73cq] {
    text-decoration: underline;
}
/* /Components/Shared/TaskTimeBilling.razor.rz.scp.css */
/* Sekcja „Doliczony czas" na karcie zadania + modal doliczania. Scoped CSS. */

.ttb-list[b-vm86m1h4um] {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ttb-list li[b-vm86m1h4um] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 11.5px;
    min-width: 0;
}

.ttb-time[b-vm86m1h4um] { font-weight: 600; white-space: nowrap; }
.ttb-client[b-vm86m1h4um] { color: var(--text-soft); white-space: nowrap; }

.ttb-what[b-vm86m1h4um] {
    color: var(--text-faint);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ttb-total[b-vm86m1h4um] {
    font-size: 11.5px;
    color: var(--text-soft);
    margin: 0;
    padding-top: 0.35rem;
    border-top: 1px solid var(--line);
}

.ttb-picked[b-vm86m1h4um] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
}

.ttb-results[b-vm86m1h4um] {
    display: flex;
    flex-direction: column;
    margin-top: 0.35rem;
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.ttb-result[b-vm86m1h4um] {
    text-align: left;
    padding: 0.4rem 0.6rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    cursor: pointer;
}

.ttb-result:last-child[b-vm86m1h4um] { border-bottom: none; }
.ttb-result:hover[b-vm86m1h4um] { background: var(--cream); }
/* /Components/Shared/TicketBoardCard.razor.rz.scp.css */
/* ── Karta zgłoszenia na tablicy Kanban (scoped, wspólna dla BoardPage + Skrzynki) ── */
.bcard[b-mlqiu8imxu] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
    padding: 0.55rem 0.7rem 0.6rem 0.85rem;
}

/* Grzbiet akcentu — pilność SLA — flush do lewej krawędzi karty. */
.bcard[b-mlqiu8imxu]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent, var(--line-strong));
}

/* ── Nieprzeczytane ──
   Ta sama kropka co w widoku tabeli (.unread-dot w Inbox.razor.css) — jeden nawyk wzrokowy
   w obu widokach. Do tego delikatne podbarwienie całej karty: na tablicy temat jest pogrubiony
   ZAWSZE, więc pogrubienie samo w sobie niczego nie odróżnia. */
.unread-dot[b-mlqiu8imxu] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--p1);
    box-shadow: 0 0 0 3px rgba(1, 147, 68, 0.18);
    flex: none;
}

/* Karta nieprzeczytana musi być rozpoznawalna z drugiego końca ekranu, bez czytania.
   Pierwsza wersja (delikatny gradient) ginęła na tle — stąd pełne tło, wyraźniejsza ramka
   i mocniejszy temat. Przeczytane trzymamy w tonie stonowanym, żeby różnica działała
   w OBIE strony: nie tylko „ta jest podświetlona", ale i „tamte są wyciszone". */
.bcard.unread[b-mlqiu8imxu] {
    background: #eaf5ee;
    box-shadow: inset 0 0 0 1px rgba(1, 147, 68, 0.28);
}

.bcard.unread .bcard-subject[b-mlqiu8imxu] {
    font-weight: 700;
    color: var(--text);
}

.bcard.unread .bcard-cust[b-mlqiu8imxu],
.bcard.unread .bcard-preview[b-mlqiu8imxu] {
    color: var(--text-soft);
}

.bcard:not(.unread) .bcard-subject[b-mlqiu8imxu] {
    font-weight: 500;
    color: var(--text-soft);
}

.bcard-top[b-mlqiu8imxu] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.bcard-grow[b-mlqiu8imxu] {
    flex: 1 1 auto;
}

.bcard-num[b-mlqiu8imxu] {
    font-size: 11px;
    color: var(--text-faint);
    font-weight: 600;
}

.bcard-sla[b-mlqiu8imxu] {
    font-size: 10px;
    padding: 1px 7px;
}

.bcard-subject[b-mlqiu8imxu] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bcard-cust[b-mlqiu8imxu] {
    font-size: 11.5px;
    color: var(--text-soft);
    margin-top: 3px;
}

/* Podgląd ostatniej wiadomości — jedna linia, dyskretny szary. */
.bcard-preview[b-mlqiu8imxu] {
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.35;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rząd tagów konwersacji — te same chipy .tag co w liście Skrzynki. */
.bcard-tags[b-mlqiu8imxu] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0.5rem;
}

.bcard-tags-more[b-mlqiu8imxu] {
    font-size: 11px;
    color: var(--text-faint);
    align-self: center;
}

.bcard-foot[b-mlqiu8imxu] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* auto = dosuń stopkę do dołu, gdy karta jest wyższa niż jej treść (rzadkie pola). */
    margin-top: auto;
    padding-top: 0.6rem;
}

/* Licznik wiadomości — dyskretny, wyrównany do prawej krawędzi stopki. */
.bcard-msgs[b-mlqiu8imxu] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 11px;
    color: var(--text-faint);
}

.bcard-msgs-ico[b-mlqiu8imxu] {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bcard-agent[b-mlqiu8imxu] {
    font-size: 11.5px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcard-unassigned[b-mlqiu8imxu] {
    font-size: 11px;
    color: var(--text-faint);
    font-style: italic;
}
/* /Components/Shared/ViewToggle.razor.rz.scp.css */
/* Ikonkowy segmented control (Tabela / Tablica). Jedno źródło stylu — zastępuje
   zduplikowane .seg w Inbox.razor.css i TasksPage.razor.css. */
.view-toggle[b-g4jlwhoipj] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    flex: 0 0 auto;
}

.vt-btn[b-g4jlwhoipj] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 30px;
    padding: 0 0.8rem;
    border: none;
    background: none;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-soft);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.14s, background 0.14s, box-shadow 0.14s;
    font-family: inherit;
}

.vt-btn:hover[b-g4jlwhoipj] {
    color: var(--text);
}

.vt-btn.vt-on[b-g4jlwhoipj] {
    background: var(--paper);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.vt-ico[b-g4jlwhoipj] {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
    color: var(--text-faint);
}

.vt-btn:hover .vt-ico[b-g4jlwhoipj] {
    color: var(--text-soft);
}

/* Aktywny segment — akcent marki na ikonie (spójne z .ms-dropdown.has-selection). */
.vt-btn.vt-on .vt-ico[b-g4jlwhoipj] {
    color: var(--p1);
}

/* Bardzo wąskie ekrany — sam ikonki, bez etykiet (przełącznik zostaje kompaktowy). */
@media (max-width: 560px) {
    .vt-label[b-g4jlwhoipj] {
        display: none;
    }

    .vt-btn[b-g4jlwhoipj] {
        padding: 0 0.6rem;
    }
}

/* 32x30 to ponizej progu dotyku — przelacznik widoku stoi w pasku akcji na kazdej liscie. */
@media (pointer: coarse) {
    .vt-btn[b-g4jlwhoipj] { min-width: 38px; min-height: 38px; }
}