/* /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: color-mix(in srgb, var(--global-palette1) 30%, transparent);
    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, color-mix(in srgb, var(--global-palette1) 18%, transparent) 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;
}
/* Odnośnik obejmuje znak i nazwę; ma być celem dla palca i dla myszy, więc rozciąga się
   na oba i nie zmienia wyglądu paska. */
.sidebar-brand-link[b-9lrca5jz97] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    padding: 0.15rem 0.25rem;
    margin: -0.15rem -0.25rem;
}
.sidebar-brand-link:hover[b-9lrca5jz97] { background: rgba(255, 255, 255, 0.08); }
.sidebar-brand-link:focus-visible[b-9lrca5jz97] { outline: 2px solid #c1d11c; outline-offset: 2px; }

.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;
}

/* ── Kolory nawigacyjne sekcji (N2b, 18.09.2026) ──────────────────────────────────────────
   Każda sekcja ma własny kolor (`--sekcja`, z tokenów AB — bez nowych hexów): etykieta dostaje kwadrat
   w tym kolorze, ikona sekcji zwijanej jest w tym kolorze, a POZYCJA AKTYWNA bierze tło, tekst i pasek
   z koloru swojej sekcji. „Praca" zostaje limonkowa (dotychczasowy kolor aktywnej pozycji), więc
   najczęstszy ekran nie zmienia wyglądu — reszta przestaje być „wszystko w jednym odcieniu". */
.nav-section[b-9lrca5jz97] {
    padding: 0.75rem 0.65rem 0.25rem;
    --sekcja: var(--global-palette2);
}
.nav-section[data-sekcja="praca"][b-9lrca5jz97]       { --sekcja: var(--global-palette2); }
.nav-section[data-sekcja="poczta"][b-9lrca5jz97]      { --sekcja: color-mix(in srgb, var(--info) 70%, white); }
.nav-section[data-sekcja="obsluga"][b-9lrca5jz97]     { --sekcja: color-mix(in srgb, var(--warn) 80%, white); }
.nav-section[data-sekcja="zarzadzanie"][b-9lrca5jz97] { --sekcja: color-mix(in srgb, var(--global-palette6) 45%, white); }
.nav-section[data-sekcja="raporty"][b-9lrca5jz97]     { --sekcja: color-mix(in srgb, var(--global-palette1) 55%, white); }
.nav-section[data-sekcja="ustawienia"][b-9lrca5jz97],
.nav-section[data-sekcja="dziennik"][b-9lrca5jz97]    { --sekcja: rgba(255, 255, 255, 0.7); }
.nav-section-label[b-9lrca5jz97]::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 2px;
    background: var(--sekcja);
    margin-right: 0.45rem;
    vertical-align: 1px;
}
.nav-section-summary .nav-section-icon[b-9lrca5jz97] { color: var(--sekcja); }
.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, color-mix(in srgb, var(--sekcja) 20%, transparent) 0%, color-mix(in srgb, var(--sekcja) 6%, transparent) 100%);
    color: var(--sekcja);
    font-weight: 500;
}
.nav-section[b-9lrca5jz97]  .nav-link.active::before {
    width: 4px;
    background: var(--sekcja);
}
.nav-section[b-9lrca5jz97]  .nav-link.active .nav-link-icon { color: var(--sekcja); }

/* ─── 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, color-mix(in srgb, var(--global-palette1) 22%, transparent) 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;
}

/* Licznik nieprzeczytanej poczty przy pozycji "Poczta".
   Tresc dopisuje przegladarka (abc-realtime.js) po zdarzeniu o nowej poczcie - menu jest rysowane
   statycznie, wiec bez tego licznik ruszalby dopiero po odswiezeniu strony. */
/* Liczniki przy pozycjach jako pigułki (N2b): neutralna = nieprzeczytane, `uwaga` = po terminie (czerwień). */
.nav-licznik[b-9lrca5jz97] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    flex: none;
    font-variant-numeric: tabular-nums;
}
.nav-licznik-uwaga[b-9lrca5jz97] {
    background: var(--danger);
    color: var(--text-light);
}

/* ⚠ MENU BOCZNE TO NAJCZĘŚCIEJ DOTYKANA RZECZ W CAŁEJ APLIKACJI — a jego pozycje miały
   2,4 rem, czyli 38,4 px: o półtora piksela pod regułą domu. Zmierzone przyrządem Q
   (21.09.2026, 390×844): „nav-link 242×31" wracało jako pierwszy przykład celu poniżej
   czterdziestu na KAŻDYM z sześciu ekranów. Piksel i pół nie brzmi jak usterka, dopóki
   nie policzy się, ile razy dziennie ktoś celuje w tę listę palcem.
   Na myszy zostaje jak było: tam gęstość menu jest zaletą. */
@media (pointer: coarse) {
    /* ⚠ DWA SELEKTORY, bo pozycje menu mają dwa rodzice: `.nav-item` (sekcja główna)
       i `.nav-section` (podsekcje). Pierwsza wersja tej reguły (01:06) poprawiła tylko
       pierwszy z nich — a mierzone „nav-link 242×31" brało wysokość z drugiego,
       więc przyrząd po wydaniu pokazał dokładnie tę samą liczbę co przed nim.
       Poprawka, której nie widać w pomiarze, nie jest poprawką. */
    /* ⚠ PIKSELE, NIE `rem` — i to jest trzecia poprawka tego samego miejsca. `html` ma
       `font-size: 14px`, wiec 2,6 rem to 36,4 px, nie 41,6. Przyrzad po wydaniu 23
       pokazal „nav-link 242x36": poprawka zadzialala i dalej nie dowiozla progu.
       Gdzie celem jest KONKRETNA liczba pikseli pod palec, jednostka wzgledna wprowadza
       w blad tego, kto ja czyta. */
    .nav-item[b-9lrca5jz97]  .nav-link,
    .nav-section[b-9lrca5jz97]  .nav-link { height: auto; min-height: 40px; }
    .nav-section-label[b-9lrca5jz97] { min-height: 1.6rem; }
    /* Odnośnik „pomiń nawigację" i krzyżyk zamykający szufladę — też palcem. */
    .sidebar-close[b-9lrca5jz97] { min-height: 40px; min-width: 40px; }
    /* Naglowki sekcji menu SA klikalne (rozwijaja sekcje) — wiec sa celem dotykowym
       tak samo jak pozycje pod nimi, a mialy 30 px. */
    .nav-section-summary[b-9lrca5jz97] { min-height: 40px; box-sizing: border-box; }
    /* Wylogowanie na dole szuflady — 32 px to najmniejszy cel w calym menu, a akcja
       jest nieodwracalna w tym sensie, ze trzeba logowac sie od nowa. */
    .logout-btn[b-9lrca5jz97] { min-height: 40px; min-width: 40px; }
}
/* /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-soft, #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/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;
}

/* Prawa strona nagłówka: wybór okna + licznik ukrytych + przełącznik rodzaju tablicy.
   flex-wrap, bo na wąskim ekranie te trzy elementy nie mieszczą się w jednej linii. */
.board-head-right[b-hygwa6x821] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    flex: 1 1 auto;
    min-width: 0;
}

.board-okno[b-hygwa6x821] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12.5px;
    color: var(--text-soft);
    white-space: nowrap;
}

.board-okno select[b-hygwa6x821] {
    height: 30px;
    padding: 0 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--text);
    font-size: 12.5px;
}

/* Licznik ukrytych kart. Ciche chowanie zadań jest najczęstszą skargą na tę funkcję
   w konkurencyjnych produktach — dlatego liczba jest widoczna zawsze, gdy coś wypadło. */
.board-ukryte[b-hygwa6x821] {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 0.65rem;
    border-radius: 999px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 12px;
    white-space: nowrap;
}

/* ── 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] {
    /* ⚠ Bez tej linii przycisk brał tło DOMYŚLNE PRZEGLĄDARKI (buttonface, ok. #f0f0f0) — stała
       barwa, której motyw ciemny nie podmienia. W jasnym uchodziło to na sucho, w ciemnym dawało
       jasnoszarą pigułkę z jasnoszarym napisem: zmierzone 2,00 : 1. Nieaktywna zakładka
       przełącznika Zgłoszenia/Zadania była przez to nieczytelna. */
    background: transparent;
    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));
}

/* ── Filtry tablicy ──
   Klasy .filter-bar / .f-sort / .f-chip są globalne (app.css) — te same, co na liście zadań.
   Tutaj tylko drobne dopasowania. min-width:0 na polach wyboru, bo element flex domyślnie nie
   kurczy się poniżej swojej treści i na wąskim ekranie etykieta łamałaby się na pojedyncze słowa. */
.board-filtry[b-hygwa6x821] {
    margin-bottom: 0.9rem;
}

.board-filtry .f-sort[b-hygwa6x821] {
    min-width: 0;
    white-space: nowrap;
}

.board-filtry .f-sort-select[b-hygwa6x821] {
    max-width: 100%;
}

.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;
    position: relative;
}

/* ─── Szyna ─── */
.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);
    display: flex; align-items: center; gap: 0.5rem;
}
.rail-title[b-0bdv1kcinw] { flex: 1; min-width: 0; }
.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); }

/* Zamknięcie szuflady — na szerokim ekranie nie ma czego zamykać, więc nie istnieje. */
.rail-zamknij[b-0bdv1kcinw] { display: none; }

/* ─── Szukanie osoby / kanału ─── */
.rail-szukaj[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 0.45rem;
    margin: 0.6rem 0.7rem 0.2rem;
    padding: 0 0.6rem;
    height: 32px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color 0.14s, box-shadow 0.14s;
}
.rail-szukaj:focus-within[b-0bdv1kcinw] { border-color: var(--p1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 9%, transparent); }
.rail-szukaj svg[b-0bdv1kcinw] { width: 14px; height: 14px; stroke: var(--line-faint); fill: none; stroke-width: 2; flex: none; }
.rail-szukaj input[b-0bdv1kcinw] {
    flex: 1; min-width: 0; border: none; background: none; outline: none;
    font: inherit; font-size: 12.5px; color: var(--text);
}
.rail-szukaj input[b-0bdv1kcinw]::placeholder { color: var(--text-faint); }
.rail-szukaj input[b-0bdv1kcinw]::-webkit-search-cancel-button { display: none; }
.rail-szukaj-x[b-0bdv1kcinw] {
    border: none; background: none; cursor: pointer; color: var(--text-faint);
    font-size: 16px; line-height: 1; padding: 0 2px; flex: none;
}
.rail-szukaj-x:hover[b-0bdv1kcinw] { color: var(--text); }

.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-soft);
}
.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; display: inline-grid; place-items: center; }
.rail-item.active .hash[b-0bdv1kcinw] { color: var(--p1); }
.rail-item .nm[b-0bdv1kcinw] { flex: 1; min-width: 0; 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-tag[b-0bdv1kcinw] {
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-soft); background: var(--cream-2); border: 1px solid var(--line);
    border-radius: 4px; padding: 1px 4px; 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; }

/* ⚠ `.ikona-pinezka` i `.ikona-klodka` przeniesione do `app.css` (globalnie) — patrz komentarz
   w `ChatPage.razor` przy ikonach. Tutaj zostawał wymiar, którego nieostylowana ikona nigdy nie
   dostawała, bo wstawiana była z pominięciem kompilatora Razora. Reguła globalna działa
   niezależnie od tego, kto i jak ją kiedyś wstawi. */
.akcja-ikona[b-0bdv1kcinw] { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Główna kolumna ─── */
.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;
}
/* Kolumna o czytelnej mierze zamiast zdania rozciągniętego na 1170 px. Szerokość ekranu zjadają
   rzędy kanałów, które się zawijają — nie napis. */
.chat-blank-in[b-0bdv1kcinw] { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; max-width: 640px; width: 100%; }
/* ⚠ Wymiar podany WPROST — ikona bez własnego rozmiaru rozdyma się do kontenera. Ta sama
   blizna, co czarna plama 834×446 px w panelu przypiętych (12.08.2026, IkonyCzatuTests). */
.chat-blank > svg[b-0bdv1kcinw],
.chat-blank-in > 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-soft); max-width: 430px; line-height: 1.55; }

.chat-blank-akcje[b-0bdv1kcinw] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.15rem; }

/* ⚠ PRÓG 900 px, nie 768 px jak globalne .desktop-only / .mobile-only. Szyna z kanałami chowa
   się poza ekran dokładnie na 900 px (reguła niżej w tym pliku), a globalny przełącznik łamie
   się na 768 px. Pasmo 769–900 px zostawałoby więc bez szyny I bez przycisku, który ją otwiera —
   czyli bez jakiegokolwiek dojścia do listy kanałów. Dwa progi na jedną rzecz to nie jest
   szczegół stylu, tylko dziura w nawigacji. */
.blank-szyna[b-0bdv1kcinw] { display: none; }

.chat-blank-lista[b-0bdv1kcinw] { margin-top: 1.5rem; width: 100%; }
.chat-blank-etykieta[b-0bdv1kcinw] {
    font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-soft); margin-bottom: 0.5rem;
}
.chat-blank-chipy[b-0bdv1kcinw] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.blank-chip[b-0bdv1kcinw] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    max-width: 100%; padding: 0.32rem 0.7rem;
    background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px;
    color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
    transition: all 0.15s;
}
.blank-chip:hover[b-0bdv1kcinw] { border-color: var(--p1); color: var(--p1); }
.blank-chip:focus-visible[b-0bdv1kcinw] { outline: 2px solid var(--p1); outline-offset: 2px; }
.blank-chip-hash[b-0bdv1kcinw] { font-family: 'Geist Mono', monospace; color: var(--text-faint); }
.blank-chip:hover .blank-chip-hash[b-0bdv1kcinw] { color: var(--p1); }
/* Kanał, do którego się jeszcze nie należy, ma napisane WPROST, co zrobi kliknięcie — inaczej
   wygląda identycznie jak własny kanał i nie wiadomo, że dołącza. */
.blank-chip-akcja[b-0bdv1kcinw] { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--p1); }
.blank-chip.dolacz[b-0bdv1kcinw] { border-style: dashed; }

.chat-header[b-0bdv1kcinw] {
    height: 3.4rem; flex: none; padding: 0 0.9rem 0 1.25rem;
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
}
.h-menu[b-0bdv1kcinw] { display: none; }
.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); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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.25rem; flex: none; }
.h-online[b-0bdv1kcinw] { font-size: 11.5px; color: var(--text-soft); margin-right: 0.35rem; white-space: nowrap; }
.h-ikona[b-0bdv1kcinw] {
    width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 7px; border: 1px solid transparent; background: none;
    color: var(--text-soft); cursor: pointer; transition: all 0.13s;
}
.h-ikona:hover[b-0bdv1kcinw] { background: var(--cream-2); color: var(--text); }
.h-ikona.wl[b-0bdv1kcinw] { background: color-mix(in srgb, var(--p1) 12%, var(--paper)); border-color: color-mix(in srgb, var(--p1) 30%, transparent); color: var(--p1); }
.h-ikona svg[b-0bdv1kcinw] { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Panele nad strumieniem (szukanie / przypięte / pliki) ─── */
.czat-panel[b-0bdv1kcinw] {
    flex: none; max-height: 40%; overflow-y: auto;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 14px -12px rgba(0,0,0,0.35);
}
.czat-panel-head[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--paper); z-index: 1;
}
.czat-panel-head .spacer[b-0bdv1kcinw] { flex: 1; }
.czat-panel-head strong[b-0bdv1kcinw] { font-size: 12.5px; }
.czat-panel-ikona[b-0bdv1kcinw] { width: 14px; height: 14px; stroke: var(--text-soft); fill: none; stroke-width: 2; flex: none; }
.czat-panel-licznik[b-0bdv1kcinw] { font-size: 11px; color: var(--text-soft); }
.czat-panel-pole[b-0bdv1kcinw] {
    flex: 1; min-width: 0; height: 30px; padding: 0 0.6rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--cream-2); font: inherit; font-size: 12.5px; color: var(--text);
}
.czat-panel-pole:focus[b-0bdv1kcinw] { outline: none; border-color: var(--p1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 9%, transparent); }
.czat-panel-lista[b-0bdv1kcinw] { display: flex; flex-direction: column; padding: 0.35rem 0.6rem 0.6rem; }
.czat-trafienie[b-0bdv1kcinw] {
    display: flex; align-items: baseline; gap: 0.55rem; width: 100%; text-align: left;
    padding: 0.45rem 0.65rem; border: none; background: none; cursor: pointer;
    border-radius: var(--radius-sm); font: inherit; transition: background 0.12s;
}
.czat-trafienie:hover[b-0bdv1kcinw] { background: var(--cream-2); }
.czat-trafienie-kto[b-0bdv1kcinw] { font-size: 12px; font-weight: 600; color: var(--text); flex: none; }
.czat-trafienie-tekst[b-0bdv1kcinw] { font-size: 12.5px; color: var(--text-soft); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.czat-trafienie-kiedy[b-0bdv1kcinw] { font-size: 10.5px; color: var(--text-soft); flex: none; }

/* Zaznaczenie trafienia w fragmencie. Fragment przychodzi z serwisu jako gotowe, odkażone
   znaczniki (całość zakodowana, w środku wyłącznie <mark>) — patrz `Wartownik`.
   ⚠ Domyślny <mark> przeglądarki jest jaskrawożółty i w tym oknie wygląda jak usterka. */
.czat-trafienie-tekst mark[b-0bdv1kcinw] {
    background: color-mix(in srgb, var(--p1) 20%, transparent);
    color: var(--text);
    font-weight: 600;
    border-radius: 3px;
    padding: 0 1px;
}

/* Pozycja panelu przypiętych: skok do wiadomości + odpięcie. Dwa osobne przyciski obok siebie,
   bo przycisk w przycisku to nieprawidłowe znaczniki — kliknięcie w jeden trafiałoby w drugi. */
.czat-przypieta-rzad[b-0bdv1kcinw] { display: flex; align-items: center; gap: 0.15rem; }
.czat-przypieta-rzad .czat-trafienie[b-0bdv1kcinw] { flex: 1; min-width: 0; }
.czat-odepnij[b-0bdv1kcinw] {
    flex: none; width: 28px; height: 28px; display: grid; place-items: center;
    border: 1px solid transparent; border-radius: 7px; background: none;
    color: var(--text-faint); cursor: pointer; transition: all 0.13s;
}
.czat-odepnij:hover[b-0bdv1kcinw] { background: var(--danger-bg, #fdecec); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.czat-odepnij:disabled[b-0bdv1kcinw] { opacity: 0.45; cursor: not-allowed; }
/* Przekreślona pinezka — „zdejmij", nie „przypnij jeszcze raz". */
.czat-odepnij .ikona-pinezka[b-0bdv1kcinw] { width: 14px; height: 14px; }

/* ─── Strumień ─── */
.stream[b-0bdv1kcinw] { flex: 1; overflow-y: auto; padding: 1rem 1.5rem 0.75rem; }
.stream-info[b-0bdv1kcinw] { font-size: 12.5px; color: var(--text-faint); text-align: center; padding: 1.5rem 1rem; }
.stream-starsze[b-0bdv1kcinw] { display: flex; justify-content: center; padding: 0.2rem 0 0.8rem; }

/* Pasek „jesteś w środku historii". Stoi POD ostatnią wiadomością okna, bo to tam rozmowa
   się urywa — i tam człowiek szuka wyjaśnienia, dlaczego nic dalej nie ma. */
.stream-nowsze[b-0bdv1kcinw] { display: flex; justify-content: center; padding: 0.8rem 0 0.2rem; }
.stream-poczatek[b-0bdv1kcinw] {
    text-align: center; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-soft); padding: 0.2rem 0 1rem;
}

.czat-dzien[b-0bdv1kcinw] { display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0 0.7rem; }
.czat-dzien[b-0bdv1kcinw]::before, .czat-dzien[b-0bdv1kcinw]::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.czat-dzien span[b-0bdv1kcinw] {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-soft); background: var(--cream); padding: 0 0.2rem; flex: none;
}

/* Jedna wiadomość. Cudze po lewej z awatarem, moje po prawej bez.
   ⚠ Awatar równany do GÓRY, nie do dołu. Przy równaniu do dołu lądował pod dymkiem, obok
   godziny i reakcji — czyli daleko od nazwiska, do którego należy. */
.czat-w[b-0bdv1kcinw] { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 2px; }
.czat-w.pierwsza[b-0bdv1kcinw] { margin-top: 0.85rem; }
.czat-w.moja[b-0bdv1kcinw] { flex-direction: row-reverse; }

/* Lekkie zejście w dół — żeby środek awatara trafiał w linię nazwiska, a nie nad nią. */
.czat-ava[b-0bdv1kcinw] { flex: none; width: 30px; height: 30px; font-size: 11px; border: none; box-shadow: none; margin-top: 1px; }
.czat-w.cudza:not(.pierwsza) .czat-ava[b-0bdv1kcinw] { margin-top: 0; }
/* Miejsce po awatarze zostaje puste przy kolejnych wiadomościach tej samej osoby —
   inaczej dymki skakałyby w lewo i w prawo w obrębie jednej wypowiedzi. */
.czat-ava.pusty[b-0bdv1kcinw] { background: transparent !important; }

/* Awatar jest PRZYCISKIEM (otwiera rozmowę prywatną z autorem), więc trzeba zdjąć z niego
   wszystko, co przeglądarka dokłada przyciskom: własną czcionkę, obramowanie i wypełnienie.
   Bez `font: inherit` inicjały jadą systemowym krojem i wyraźnie odstają od reszty rozmowy. */
.czat-ava-btn[b-0bdv1kcinw] {
    padding: 0;
    font: inherit;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.czat-ava-btn:hover[b-0bdv1kcinw] { transform: scale(1.08); box-shadow: 0 0 0 2px color-mix(in srgb, var(--p1) 35%, transparent); }
.czat-ava-btn:focus-visible[b-0bdv1kcinw] { outline: 2px solid var(--p1); outline-offset: 2px; }
.czat-ava-btn:disabled[b-0bdv1kcinw] { cursor: default; transform: none; }

/* Wzmianka w treści. ⚠ To NIE jest wstawiony HTML — widok dzieli tekst na kawałki i sam stawia
   ten znacznik (patrz `WzmiankiWTresci`). Wyróżniona jest tylko wzmianka, która naprawdę
   wysyła powiadomienie. */
.czat-wzmianka[b-0bdv1kcinw] {
    color: var(--p1);
    font-weight: 600;
    background: color-mix(in srgb, var(--p1) 10%, transparent);
    border-radius: 4px;
    padding: 0 2px;
}
/* Wzmianka O MNIE jest mocniejsza — w rozmowie kilkunastu osób to jedyna rzecz, której
   naprawdę szuka się wzrokiem po powrocie do kanału. */
.czat-wzmianka.moja[b-0bdv1kcinw] {
    background: color-mix(in srgb, var(--p1) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p1) 35%, transparent);
}

.czat-kolumna[b-0bdv1kcinw] { display: flex; flex-direction: column; min-width: 0; max-width: min(680px, 76%); position: relative; }
.czat-w.moja .czat-kolumna[b-0bdv1kcinw] { align-items: flex-end; }

.czat-autor[b-0bdv1kcinw] { font-size: 11.5px; font-weight: 600; color: var(--text-soft); margin: 0 0 3px 0.7rem; }

.czat-dymek[b-0bdv1kcinw] {
    position: relative;
    padding: 0.5rem 0.8rem;
    border-radius: 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
.czat-w.cudza.pierwsza .czat-dymek[b-0bdv1kcinw] { border-bottom-left-radius: 4px; }
.czat-w.moja .czat-dymek[b-0bdv1kcinw] {
    background: color-mix(in srgb, var(--p1) 12%, var(--paper));
    border-color: color-mix(in srgb, var(--p1) 26%, var(--line));
}
.czat-w.moja.pierwsza .czat-dymek[b-0bdv1kcinw] { border-bottom-right-radius: 4px; }
.czat-dymek.usunieta[b-0bdv1kcinw] { background: var(--cream-2); border-style: dashed; box-shadow: none; }
.czat-dymek.przypieta[b-0bdv1kcinw] { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }

.czat-pinezka[b-0bdv1kcinw] {
    position: absolute; top: -7px; right: -7px;
    width: 20px; height: 20px; display: grid; place-items: center;
    border-radius: 999px; background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
    color: var(--warn);
}
.czat-pinezka .ikona-pinezka[b-0bdv1kcinw] { width: 11px; height: 11px; }

.czat-tekst[b-0bdv1kcinw] { font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.czat-tekst-usunieta[b-0bdv1kcinw] { color: var(--text-faint); font-style: italic; }

/* ─── Formatowanie w treści wiadomości ───────────────────────────────────────
   ⚠ To NIE jest wklejony HTML. Widok dostaje z `FormatWiadomosci` zwykły tekst plus flagi
   i sam stawia te znaczniki, więc każda reguła stąd dostaje atrybut zakresu i naprawdę działa.
   ⚠ Bloki dziedziczą rozmiar i kolor po `.czat-tekst` — wypowiedź złożona z listy i akapitu
   ma być jedną wypowiedzią, a nie dwoma krojami obok siebie. */
.czat-ozdoba.gruby[b-0bdv1kcinw] { font-weight: 700; }
.czat-ozdoba.pochyly[b-0bdv1kcinw] { font-style: italic; }
.czat-ozdoba.skreslony[b-0bdv1kcinw] { text-decoration: line-through; text-decoration-color: var(--line-faint); }

/* Odnośnik. Adres jest sprawdzony po stronie serwera (tylko http/https/mailto) — patrz
   `FormatWiadomosci.AdresBezpieczny`. */
.czat-odnosnik[b-0bdv1kcinw] { color: var(--p1); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.czat-odnosnik:hover[b-0bdv1kcinw] { text-decoration-thickness: 2px; }

/* Kod w linii. ⚠ Globalny `code` w app.css jest różowy (#d63384) — w dymku wygląda jak błąd. */
.czat-kod[b-0bdv1kcinw] {
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
    font-size: 0.88em; color: var(--text);
    background: color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 4px; padding: 1px 4px; overflow-wrap: anywhere;
}

.czat-blok-kodu[b-0bdv1kcinw] {
    margin: 0.3rem 0; padding: 0.45rem 0.6rem;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    border: 1px solid var(--line); border-radius: 8px;
    font-size: 12.5px; line-height: 1.45;
    overflow-x: auto;                     /* długa linia kodu ma się przewijać, nie rozpychać dymka */
    white-space: pre;
}
.czat-blok-kodu code[b-0bdv1kcinw] {
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
    color: var(--text); background: none; padding: 0; font-size: inherit;
}

/* Cytat w treści. ⚠ To NIE jest `.czat-cytat` — tamto jest cytatem odpowiedzi (klikalnym
   skrótem cudzej wypowiedzi), a to jest kawałek tekstu, który człowiek sam oznaczył. */
.czat-cytowanie[b-0bdv1kcinw] {
    margin: 0.25rem 0; padding: 0.1rem 0 0.1rem 0.6rem;
    border-left: 3px solid color-mix(in srgb, var(--p1) 45%, var(--line));
    color: var(--text-soft); font-size: 13.5px; line-height: 1.5;
    white-space: pre-wrap; overflow-wrap: anywhere;
}

.czat-lista[b-0bdv1kcinw] { margin: 0.25rem 0; padding-left: 1.35rem; font-size: 13.5px; line-height: 1.5; }
.czat-lista li[b-0bdv1kcinw] { margin: 1px 0; overflow-wrap: anywhere; }
.czat-lista li[b-0bdv1kcinw]::marker { color: var(--text-faint); }

.czat-cytat[b-0bdv1kcinw] {
    /* ⚠ `min-width: 0` i `max-width: 100%` NIE są ozdobą. Bez nich cytat odpowiedzi rozpychał się
       do szerokości cytowanego zdania: na telefonie (390 px) treść miała 336 px w przycisku
       szerokim na 292 px i wyjeżdżała 54 px poza dymek, wprost poza krawędź ekranu. Wielokropek
       nie ratował, bo `text-overflow` działa dopiero wtedy, gdy element MA ograniczoną szerokość
       — a ten rósł razem z tekstem. Ta sama pułapka co przy elementach siatki. */
    min-width: 0; max-width: 100%;
    display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
    margin: 0 0 0.4rem; padding: 0.3rem 0.5rem;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border-left: 3px solid var(--p1); border-radius: 0 6px 6px 0;
    border-top: none; border-right: none; border-bottom: none;
    cursor: pointer; font: inherit;
}
.czat-cytat:hover[b-0bdv1kcinw] { background: color-mix(in srgb, var(--text) 9%, transparent); }
.czat-cytat.usuniety[b-0bdv1kcinw] { border-left-color: var(--line-strong); }
.czat-cytat-autor[b-0bdv1kcinw] { font-size: 11px; font-weight: 600; color: var(--p1);
    min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.czat-cytat.usuniety .czat-cytat-autor[b-0bdv1kcinw] { color: var(--text-faint); }
.czat-cytat-tresc[b-0bdv1kcinw] { font-size: 12px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    /* patrz komentarz przy `.czat-cytat` — to dziecko musi WOLNO się skurczyć, inaczej
       jednowierszowy tekst bez spacji do złamania wypycha rodzica poza ekran */
    min-width: 0; max-width: 100%; }

/* Godzina, znacznik poprawki i reakcje w JEDNYM wierszu. Wcześniej były to dwa wiersze pod
   dymkiem: przy krótkim zdaniu stopka i reakcje zajmowały razem więcej pionu niż sama treść. */
.czat-stopka[b-0bdv1kcinw] { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 2px 0.3rem 0; }
.czat-w.moja .czat-stopka[b-0bdv1kcinw] { justify-content: flex-end; }
.czat-godzina[b-0bdv1kcinw] { font-size: 10px; color: var(--text-soft); }
.czat-poprawiona[b-0bdv1kcinw] { font-size: 10px; color: var(--text-soft); font-style: italic; }

.czat-reakcje[b-0bdv1kcinw] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.czat-w.moja .czat-reakcje[b-0bdv1kcinw] { justify-content: flex-end; }

/* Akcje wjeżdżają nad dymkiem dopiero pod kursorem — stale widoczne zaśmiecałyby rozmowę. */
.czat-akcje[b-0bdv1kcinw] {
    position: absolute; top: -14px;
    display: flex; align-items: center; gap: 1px;
    padding: 2px; border-radius: 8px;
    background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    opacity: 0; pointer-events: none; transition: opacity 0.12s;
    z-index: 2;
}
.czat-w.cudza .czat-akcje[b-0bdv1kcinw] { left: 0.5rem; }
.czat-w.moja .czat-akcje[b-0bdv1kcinw] { right: 0.5rem; }
.czat-w:hover .czat-akcje[b-0bdv1kcinw],
.czat-w:focus-within .czat-akcje[b-0bdv1kcinw] { opacity: 1; pointer-events: auto; }

/* Podświetlenie po skoku z panelu przypiętych / z cytatu. */
@keyframes czatWskazanie-b-0bdv1kcinw {
    0%   { background: color-mix(in srgb, var(--p1) 22%, transparent); }
    100% { background: transparent; }
}
.czat-wskazana[b-0bdv1kcinw] { animation: czatWskazanie-b-0bdv1kcinw 2.2s ease-out; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
    .czat-wskazana[b-0bdv1kcinw] { animation: none; outline: 2px solid var(--p1); outline-offset: 3px; border-radius: 12px; }
}

/* ─── Wybierak wzmianek (po „@") ───
   Stoi NAD kompozytorem, tak samo jak wybierak emotek. Panel pod polem zasłaniałby przycisk
   wysyłania na telefonie, a to jedyny przycisk, którego w kompozytorze nie wolno zasłonić. */
.wzmianki-panel[b-0bdv1kcinw] {
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.4rem;
    overflow: hidden;
    max-height: 232px;
    overflow-y: auto;
}
.wzmianki-hint[b-0bdv1kcinw] {
    padding: 0.3rem 0.7rem;
    font-size: 10.5px;
    color: var(--text-soft);
    background: var(--cream-2);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
}
.wzmianki-poz[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 0.55rem; width: 100%;
    padding: 0.4rem 0.7rem;
    background: none; border: none; cursor: pointer; text-align: left;
    font: inherit;
}
.wzmianki-poz:hover[b-0bdv1kcinw] { background: var(--cream-2); }
/* Wybór klawiaturą MUSI wyglądać inaczej niż najechanie kursorem — inaczej przy myszy nad listą
   nie da się poznać, którą pozycję wstawi Enter. */
.wzmianki-poz.wybrana[b-0bdv1kcinw] { background: color-mix(in srgb, var(--p1) 12%, var(--cream-2)); }
.wzmianki-ava[b-0bdv1kcinw] { width: 22px; height: 22px; font-size: 9.5px; flex: none; }
.wzmianki-nazwa[b-0bdv1kcinw] { font-size: 13px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wzmianki-login[b-0bdv1kcinw] { font-size: 11.5px; color: var(--text-soft); flex: none; }

/* ─── Wybierak emotek ───
   Stoi NAD kompozytorem, w tym samym opakowaniu — panel wypychający pole w dół przesuwałby
   rozmowę pod palcem przy każdym otwarciu. */
.emoji-panel[b-0bdv1kcinw] {
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.4rem;
    overflow: hidden;
}
.emoji-zakladki[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 0.15rem;
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid var(--line);
    background: var(--cream-2);
}
.emoji-zakladki .spacer[b-0bdv1kcinw] { flex: 1; }
.emoji-zakladka[b-0bdv1kcinw] {
    height: 24px; padding: 0 0.6rem; border-radius: 999px;
    font-size: 11.5px; font-weight: 500; color: var(--text-soft);
    background: none; border: none; cursor: pointer; transition: all 0.13s; white-space: nowrap;
}
.emoji-zakladka:hover[b-0bdv1kcinw] { color: var(--text); background: var(--paper); }
.emoji-zakladka.wl[b-0bdv1kcinw] { background: var(--paper); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.emoji-zamknij[b-0bdv1kcinw] {
    width: 24px; height: 24px; display: grid; place-items: center; flex: none;
    border: none; background: none; color: var(--text-faint); cursor: pointer;
    font-size: 16px; line-height: 1; border-radius: 6px;
}
.emoji-zamknij:hover[b-0bdv1kcinw] { background: var(--paper); color: var(--text); }
.emoji-siatka[b-0bdv1kcinw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 2px;
    padding: 0.4rem;
    max-height: 168px;
    overflow-y: auto;
}
.emoji-znak[b-0bdv1kcinw] {
    height: 32px; display: grid; place-items: center;
    font-size: 18px; line-height: 1;
    background: none; border: none; border-radius: 7px; cursor: pointer;
    transition: background 0.12s, transform 0.12s;
}
.emoji-znak:hover[b-0bdv1kcinw] { background: var(--cream-2); transform: scale(1.15); }
.emoji-znak:focus-visible[b-0bdv1kcinw] { outline: 2px solid var(--p1); outline-offset: 1px; }

/* ─── Kompozytor ─── */
.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 color-mix(in srgb, var(--global-palette1) 10%, transparent); }
.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); }
/* ─── Pasek formatowania ──────────────────────────────────────────────────────
   Osobny rząd NAD dolnym paskiem: dziewięć przycisków dołożonych do rzędu z wysyłaniem
   zepchnęłoby przycisk „Wyślij" poza kompozytor przy pierwszym zwężeniu okna.
   Na telefonie pasek jest schowany — patrz reguła w @media niżej. */
.composer-format[b-0bdv1kcinw] {
    display: flex; align-items: center; gap: 1px; flex-wrap: wrap;
    padding: 0.15rem 0.5rem 0; border-top: 1px solid var(--line);
    margin: 0.25rem 0.15rem 0;
}
.fmt-btn[b-0bdv1kcinw] {
    width: 27px; height: 27px; display: grid; place-items: center; flex: none;
    border: 1px solid transparent; border-radius: 6px; background: none;
    color: var(--text-soft); cursor: pointer; font: inherit; transition: all 0.12s;
}
.fmt-btn:hover[b-0bdv1kcinw] { background: var(--cream-2); color: var(--text); }
.fmt-btn:focus-visible[b-0bdv1kcinw] { outline: 2px solid var(--p1); outline-offset: 1px; }
.fmt-btn:disabled[b-0bdv1kcinw] { opacity: 0.4; cursor: not-allowed; }
.fmt-btn:disabled:hover[b-0bdv1kcinw] { background: none; color: var(--text-soft); }

/* Litery na przyciskach B/I/S pokazują WPROST, co przycisk zrobi — ikona „pogrubienia"
   musiałaby to dopiero zasugerować. */
.fmt-znak[b-0bdv1kcinw] { font-size: 12.5px; line-height: 1; font-weight: 600; }
.fmt-znak.gruby[b-0bdv1kcinw] { font-weight: 800; }
.fmt-znak.pochyly[b-0bdv1kcinw] { font-style: italic; font-family: 'Instrument Serif', serif; font-size: 14px; }
.fmt-znak.skreslony[b-0bdv1kcinw] { text-decoration: line-through; }

.fmt-kreska[b-0bdv1kcinw] { width: 1px; height: 15px; background: var(--line); margin: 0 0.25rem; flex: none; }

.ikona-format[b-0bdv1kcinw] { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.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; }
/* Otwarty wybierak emotek widać po przycisku — inaczej po przewinięciu panelu poza ekran
   nie wiadomo, czy jest otwarty, czy zniknął. */
.composer-bar .btn.wl[b-0bdv1kcinw] { background: color-mix(in srgb, var(--p1) 12%, var(--paper)); color: var(--p1); }
.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; }

/* ─── Okno: nowy kanał ─── */
.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; }
.chat-create-podpowiedz[b-0bdv1kcinw] { font-size: 11.5px; color: var(--text-soft); line-height: 1.5; margin-top: 0.2rem; }

/* ─── Awatar DM w szynie / 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; }

/* ─── Przełącznik widoczności 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); }

/* ─── Wybór 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; }

/* Zasłona pod szufladą — istnieje tylko na wąskim ekranie. */
.rail-zaslona[b-0bdv1kcinw] { display: none; }

/* ─── Wąski ekran ─────────────────────────────────────────────────────────
   ⚠ Szyna jest SZUFLADĄ, nie połową ekranu. Wcześniej stała na stałe z
   `max-height: 40vh` — czyli na telefonie prawie połowa widoku szła na listę
   kanałów, a na rozmowę zostawał pasek. Teraz domyślnie jest schowana i
   wjeżdża po dotknięciu hamburgera; wejście w kanał ją zamyka.            */
@media (max-width: 900px) {
    .chat-shell[b-0bdv1kcinw] { grid-template-columns: 1fr; }

    .chat-rail[b-0bdv1kcinw] {
        position: absolute; inset: 0 auto 0 0; z-index: 40;
        width: min(320px, 86vw);
        transform: translateX(-101%);
        transition: transform 0.22s ease;
        box-shadow: 12px 0 28px -18px rgba(0,0,0,0.5);
    }
    .chat-shell.rail-on .chat-rail[b-0bdv1kcinw] { transform: translateX(0); }

    .rail-zaslona[b-0bdv1kcinw] {
        display: block; position: absolute; inset: 0; z-index: 30;
        background: rgba(0,0,0,0.34);
        opacity: 0; pointer-events: none; transition: opacity 0.22s;
    }
    .chat-shell.rail-on .rail-zaslona[b-0bdv1kcinw] { opacity: 1; pointer-events: auto; }

    /* Szyna zjechała z ekranu — od TEGO progu (nie od 768 px) pusty ekran musi mieć własny
       przycisk otwierający listę kanałów. To jedyne dojście do niej w tym stanie: nagłówka
       rozmowy z „hamburgerem" tu nie ma, bo nie ma wybranej rozmowy. */
    .blank-szyna[b-0bdv1kcinw] { display: inline-flex; }

    .rail-zamknij[b-0bdv1kcinw] {
        display: grid; place-items: center; width: 30px; height: 30px; flex: none;
        border: none; background: none; color: var(--text-soft); cursor: pointer; border-radius: 7px;
    }
    .rail-zamknij:hover[b-0bdv1kcinw] { background: var(--cream-2); }
    .rail-zamknij svg[b-0bdv1kcinw] { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

    .h-menu[b-0bdv1kcinw] {
        display: grid; place-items: center; width: 32px; height: 32px; flex: none;
        border: none; background: none; color: var(--text-soft); cursor: pointer; border-radius: 7px;
        margin-left: -0.35rem;
    }
    .h-menu:hover[b-0bdv1kcinw] { background: var(--cream-2); }
    .h-menu svg[b-0bdv1kcinw] { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

    .chat-header[b-0bdv1kcinw] { padding: 0 0.6rem; gap: 0.4rem; }
    .h-name[b-0bdv1kcinw] { font-size: 1.15rem; }
    .h-topic[b-0bdv1kcinw], .h-online[b-0bdv1kcinw] { display: none; }

    .stream[b-0bdv1kcinw] { padding: 0.75rem 0.8rem 0.5rem; }
    .composer-wrap[b-0bdv1kcinw] { padding: 0.35rem 0.8rem 0.8rem; }
    .czat-kolumna[b-0bdv1kcinw] { max-width: 86%; }
    .czat-panel[b-0bdv1kcinw] { max-height: 55%; }
    .czat-panel-head[b-0bdv1kcinw] { padding: 0.55rem 0.8rem; }

    /* Tablet (769–900 px): najechanie kursorem bywa, ale bywa też dotyk — akcje stoją
       pod dymkiem na stałe. Telefon ma osobną regułę niżej. */
    .czat-akcje[b-0bdv1kcinw] { position: static; opacity: 1; pointer-events: auto; margin-top: 4px; box-shadow: none; background: transparent; border: none; padding: 0; }
    .czat-w.moja .czat-akcje[b-0bdv1kcinw] { justify-content: flex-end; }
}

/* ─── Telefon (≤768 px): akcje pod PRZYTRZYMANIEM ─────────────────────────
   Do 12.08.2026 stały tu na stałe — sześć przycisków pod każdą wypowiedzią, czyli przy
   krótkich zdaniach więcej przycisków niż treści. Teraz odsłania je przytrzymanie palca
   (liczy je `abc-czat.js`, bo zdarzenie `contextmenu` na dotyku jest globalnie zdławione),
   a dotknięcie gdziekolwiek indziej je chowa.

   ⚠ Reguła najechania (`:hover`) MUSI zostać tu przebita jawnie: na dotyku hover potrafi
   „przykleić się" do ostatnio dotkniętego elementu i akcje zostawałyby na ekranie na stałe. */
@media (max-width: 768px) {
    .czat-akcje[b-0bdv1kcinw],
    .czat-w:hover .czat-akcje[b-0bdv1kcinw],
    .czat-w:focus-within .czat-akcje[b-0bdv1kcinw] {
        position: static;
        opacity: 0;
        pointer-events: none;
        height: 0;
        margin: 0;
        overflow: hidden;
        box-shadow: none;
        background: transparent;
        border: none;
        padding: 0;
    }

    .czat-w.akcje-na-wierzchu .czat-akcje[b-0bdv1kcinw] {
        opacity: 1;
        pointer-events: auto;
        height: auto;
        margin-top: 4px;
        overflow: visible;
        flex-wrap: wrap;
    }
    .czat-w.moja.akcje-na-wierzchu .czat-akcje[b-0bdv1kcinw] { justify-content: flex-end; }

    /* Odsłonięta wiadomość ma być widać, którą się trzyma. */
    .czat-w.akcje-na-wierzchu .czat-dymek[b-0bdv1kcinw] {
        border-color: color-mix(in srgb, var(--p1) 45%, var(--line));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--global-palette1) 8%, transparent);
    }

    /* Bez tego przytrzymanie otwiera systemowe „Kopiuj/Udostępnij" NAD naszymi akcjami.
       Zaznaczanie tekstu zostaje włączone — z rozmowy trzeba móc skopiować numer zamówienia. */
    .czat-dymek[b-0bdv1kcinw] { -webkit-touch-callout: none; }

    /* Przyciski akcji rosną — 24 px to cel dla kursora, nie dla palca. */
    .czat-w.akcje-na-wierzchu .msg-akcja[b-0bdv1kcinw] { min-width: 34px; height: 34px; }
    .emoji-siatka[b-0bdv1kcinw] { max-height: 132px; }

    /* ⚠ PASEK FORMATOWANIA JEST TU SCHOWANY. Dziewięć przycisków na stałe pod polem zabiera
       na telefonie tyle pionu, co dwie wypowiedzi — a formatuje się co którąś wiadomość,
       nie każdą. Odsłania go przycisk „Aa” z dolnego rzędu (klasa mobile-only).

       ⚠ Rząd przewija się W BOK, nie łamie na dwie linie: łamanie dawałoby kompozytor,
       który rośnie i maleje przy każdym otwarciu paska, przesuwając rozmowę pod palcem. */
    .composer-format[b-0bdv1kcinw] { display: none; }
    .composer-format.otwarty[b-0bdv1kcinw] {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 0.15rem;
    }
    .composer-format.otwarty[b-0bdv1kcinw]::-webkit-scrollbar { display: none; }

    /* Cel dla palca, nie dla kursora — tak samo jak przyciski akcji wyżej. */
    .fmt-btn[b-0bdv1kcinw] { width: 34px; height: 34px; }
    .ikona-format[b-0bdv1kcinw] { width: 16px; height: 16px; }
}

/* ── Cele dotykowe czatu ──────────────────────────────────────────────────────
   Zmierzone 18.08.2026: 59 celów poniżej progu na tablecie i telefonie. Ekran czatu
   doszedł do przeglądu dopiero tej nocy (kanał otwiera się kliknięciem w wiersz, nie
   odnośnikiem, więc sonda nie umiała się do niego dostać).

   ⚠ Plakietka reakcji (`.msg-reakcja`) rośnie do 32 px, nie 44: reakcji bywa przy
   wiadomości kilkanaście obok siebie i przy 44 px pasek zająłby dwa wiersze na telefonie.
   32 px to kompromis między palcem a czytelnością wątku — świadomy, nie przeoczony. */
@media (pointer: coarse) {
    .h-ikona[b-0bdv1kcinw] {
        min-width: 40px;
        min-height: 40px;
    }
    .czat-ava[b-0bdv1kcinw] {
        width: 40px;
        height: 40px;
    }
    .msg-reakcja[b-0bdv1kcinw] {
        min-height: 32px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
/* /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-soft); }
.bl-field select[b-a0dmd6lwq8] { min-width: 14rem; }
.bl-spacer[b-a0dmd6lwq8] { flex: 1; }

/* ── Filtry ──
   Okres na górze i osobno, bo to on jest pierwszym pytaniem przy fakturowaniu; wybieraki pod nim
   w jednej siatce, żeby przy wąskim oknie zawijały się równo, a nie schodkami. */

.bl-filtry[b-a0dmd6lwq8] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.bl-zakresy[b-a0dmd6lwq8] { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.bl-pola[b-a0dmd6lwq8] {
    display: grid;
    /* `minmax(0, …)` — bez zera jako minimum element siatki nie da się zwęzić poniżej zawartości
       i długa nazwa kontrahenta w wybieraku rozpycha cały rząd. */
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 0.6rem;
    align-items: end;
}

/* Wybieraki w siatce mają swój rozmiar od kolumny, nie od najdłuższej opcji. */
.bl-pola .bl-field select[b-a0dmd6lwq8],
.bl-pola .bl-field input[b-a0dmd6lwq8] { min-width: 0; width: 100%; }

/* Szukanie dostaje więcej miejsca niż wybieraki — wpisuje się w nie zdanie, nie wybiera pozycję. */
.bl-field-szukaj[b-a0dmd6lwq8] { grid-column: span 2; }

.bl-podpis[b-a0dmd6lwq8] { font-size: 11.5px; color: var(--text-soft); }

.bl-podsumowanie[b-a0dmd6lwq8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-soft);
}

.bl-nota[b-a0dmd6lwq8] {
    margin: 0 0 0.8rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--p1);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--text-soft);
}

.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-soft); }

/* ── 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; }

/* Prawa strona nagłówka grupy: suma i przycisk „Pokaż wpisy" trzymają się razem.
   Bez tego `justify-content: space-between` rozrzuciłoby trzy elementy po całej szerokości
   i suma wylądowałaby na środku, z dala od kontrahenta, którego dotyczy. */
.bl-group-akcje[b-a0dmd6lwq8] { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.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); }
/* ⚠ `flex: 1` I `min-width: 0` RAZEM — jedno bez drugiego nie działa. Na telefonie komórka
   tabeli staje się układem elastycznym; bez `flex: 1` ten element kurczy się do najdłuższego
   słowa, a bez `min-width: 0` nie da się go zwęzić poniżej zawartości i wypycha wiersz. */
.bl-work[b-a0dmd6lwq8] { flex: 1; min-width: 0; }

.bl-engagement[b-a0dmd6lwq8] { font-size: 11px; color: var(--text-soft); margin-left: 0.4rem; }

/* ⚠ Na telefonie nazwa zlecenia dostaje WŁASNĄ linijkę. Wpisana w tę samą co opis pracy,
   zaczyna się przy prawej krawędzi i łamie po jednym słowie — a jest informacją drugorzędną,
   więc pod spodem i od lewej czyta się ją lepiej niż w resztce miejsca. */
@media (max-width: 768px) {
    .bl-engagement[b-a0dmd6lwq8] { display: block; margin-left: 0; text-align: right; }
}

/* ── 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;
}

/* ⚠ Faktura wskazana adresem (`/billing?client=…&invoice=…`) — wejście z osi czasu kontrahenta.
   Bez wyróżnienia człowiek ląduje na liście faktur i nie wie, która z nich była tą klikniętą;
   skok bez wskazania nie jest odpowiedzią. Ton ten sam, co pasek zaznaczenia niżej: kreska
   z lewej w kolorze wiodącym i cieplejsze tło.

   Tło idzie na `td`, a nie na `tr`: na telefonie `.data-table.responsive` przerabia wiersz na
   układ kartowy i tło z `tr` bywa wtedy przykryte tłem komórek. */
.bl-invoice-row.wskazana > td[b-a0dmd6lwq8] { background: var(--cream); }
.bl-invoice-row.wskazana > td:first-child[b-a0dmd6lwq8] { box-shadow: inset 3px 0 0 var(--p1); }

.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%; }
    /* Na telefonie każde pole bierze całą szerokość — dwie kolumny to tam dwa ścieśnięte wybieraki. */
    .bl-pola[b-a0dmd6lwq8] { grid-template-columns: 1fr; }
    .bl-field-szukaj[b-a0dmd6lwq8] { grid-column: auto; }
}
/* /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-soft);
    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; }

/* ⚠ Ta reguła dotyczy WYŁĄCZNIE wiersza reguły pocztowej, który ma dokładnie JEDNO dziecko
   `.mono` — adres albo domenę. Do 07.09.2026 tę samą klasę `rule-row` nosił wiersz wydatku,
   a on ma dwoje takich dzieci (datę i kwotę); oba dostawały stąd `flex: 1`, więc data, opis
   i kwota dzieliły szerokość panelu po równo — po 73 px z 283 px. Wiersz wydatku ma teraz
   własną klasę `.expense-row` niżej i tu już nie wchodzi. */
.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;
}

/* ── Wydatki kontrahenta ──────────────────────────────────────────────────────────────────
   Trzy elementy w wierszu, a tylko jeden z nich ma prawo się kurczyć: opis. Data i kwota
   zajmują tyle, ile naprawdę zajmują — kwota, którą się komuś wystawia, nie może zostać
   ucięta przez wielokropek, bo `214,50 P…` czyta się jak kwota w nieznanej walucie. */
.expense-row[b-albimi99e9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12.5px;
}

.expense-date[b-albimi99e9] {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: 11.5px;
    white-space: nowrap;
}

/* Opis bierze CAŁE pozostałe miejsce. `min-width: 0` zostaje, bo bez niego element flexa nie
   zejdzie poniżej najdłuższego wyrazu — ale tu ma zejść dopiero wtedy, gdy naprawdę zabraknie
   miejsca, a nie dlatego, że sąsiad bez powodu wziął sobie jedną trzecią panelu. */
.expense-what[b-albimi99e9] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

.expense-amount[b-albimi99e9] {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Formularz dopisywania. Pola mają szerokości wynikające z tego, co w nich stoi:
   data i kwota są krótkie i stałe, opis zjada resztę i to on zawija wiersz na wąskim ekranie. */
.expense-add[b-albimi99e9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.expense-add-date[b-albimi99e9] {
    flex: 0 0 auto;
    width: 9.5rem;
}

.expense-add-what[b-albimi99e9] {
    flex: 1 1 11rem;
    min-width: 11rem;
}

.expense-add-amount[b-albimi99e9] {
    flex: 0 0 auto;
    width: 7.5rem;
}

.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;
}

/* ── Cztery kafle nad kartą ──────────────────────────────────────────────────
   Sam UKŁAD kolumn; wygląd kafelka (.kpi, .kpi-label, .kpi-value, .kpi-sub, .tone-*)
   mieszka w app.css i ma tam zostać — te same kafle stoją na pulpicie i w raportach,
   a styl zakresowy działałby wyłącznie na tym ekranie. */
.kpi-strip[b-albimi99e9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Kafel „Do rozliczenia" PROWADZI do rozliczeń, więc jest odnośnikiem, a nie ramką
   z liczbą. Tutaj tylko to, czego <a> nie dziedziczy — reszta wyglądu z .kpi. */
a.kpi[b-albimi99e9] {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.kpi:hover .kpi-sub[b-albimi99e9],
a.kpi:focus-visible .kpi-sub[b-albimi99e9] { color: var(--p1); }

@media (max-width: 1100px) {
    .kpi-strip[b-albimi99e9] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
}

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

/* ── 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; }

/* Nagłówek dnia. ⚠ Zastąpił datę powtarzaną w KAŻDYM wierszu — przy dwudziestu pięciu
   pozycjach ten sam napis stał na stronie dwadzieścia parę razy i nie rozróżniał niczego. */
.feed-day[b-albimi99e9] {
    padding: 0.85rem 0 0.35rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    font-weight: 600;
}

.feed > .feed-day:first-child[b-albimi99e9] { padding-top: 0; }

.feed-list[b-albimi99e9] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feed-item[b-albimi99e9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: start;
    padding: 0.6rem 0;
    position: relative;
}

/* Nić łącząca zdarzenia w jeden ciąg. Biegnie od dołu ikony do następnego wiersza,
   więc ostatnie zdarzenie dnia jej nie dostaje — nie ma z czym łączyć. */
.feed-item[b-albimi99e9]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 2.5rem;
    bottom: -0.6rem;
    width: 2px;
    background: var(--line);
}

.feed-item:last-child[b-albimi99e9]::before { display: none; }

.feed-icon[b-albimi99e9] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-sm);
}

.feed-icon svg[b-albimi99e9] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Kolor niesie rodzaj zdarzenia szybciej niż napis — dlatego zastąpił szarą plakietkę
   z małym tekstem. Barwy z palety, nie z palca: poczta ma swój kolor kanału, praca
   firmową zieleń, faktura ciemną zieleń nagłówków, poprawka barwę ostrzeżenia. */
.fi-mail[b-albimi99e9] { background: linear-gradient(135deg, color-mix(in srgb, var(--ch-email) 75%, white), var(--ch-email)); }
.fi-time[b-albimi99e9] { background: linear-gradient(135deg, color-mix(in srgb, var(--p1) 78%, white), var(--p1)); }
.fi-invoice[b-albimi99e9] { background: linear-gradient(135deg, var(--p5), var(--p4)); }
.fi-correction[b-albimi99e9] { background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 80%, white), var(--warn)); }

.feed-body[b-albimi99e9] { min-width: 0; }

.feed-line1[b-albimi99e9] { margin-bottom: 2px; }

/* Inline, nie block — tytuł bywa odnośnikiem, a wiersz ma się łamać jak zdanie. */
.mail-subject[b-albimi99e9] {
    font-size: 13px;
    font-weight: 500;
}

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

/* Prawa kolumna: kwota faktury albo długość pracy. Ta liczba jest powodem, dla którego
   ktoś w ogóle otwiera kartę — wcześniej stała doklejona za kropką w linijce meta. */
.feed-right[b-albimi99e9] {
    text-align: right;
    white-space: nowrap;
    padding-top: 1px;
}

.feed-amt[b-albimi99e9] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.feed-amt.kwota[b-albimi99e9] { color: var(--p1); }

.feed-time[b-albimi99e9] {
    display: block;
    font-size: 11px;
    color: var(--text-soft);
    margin-top: 2px;
}

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

.feed-item.tombstone[b-albimi99e9] { opacity: 0.75; }

/* Na wąskim ekranie kwota schodzi pod treść — trzecia kolumna zjadała tam tytuł. */
@media (max-width: 560px) {
    .feed-item[b-albimi99e9] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .feed-right[b-albimi99e9] {
        grid-column: 2;
        text-align: left;
    }
}
/* /Components/Pages/Clients/KartaDnia.razor.rz.scp.css */
/* Karta jednego dnia — wariant telefonowy. Scoped CSS: klasy żyją tylko w tym komponencie. */

.day-card[b-vsek36e2en] {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    overflow: hidden;
    margin-bottom: 0.6rem;
}

.day-card.dzis[b-vsek36e2en] { border-color: var(--p1); }
.day-card.wskazany[b-vsek36e2en] { box-shadow: inset 3px 0 0 var(--p1); }

.dc-head[b-vsek36e2en] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
}

.dc-day[b-vsek36e2en] { font-weight: 600; }
.dc-sum[b-vsek36e2en] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-count[b-vsek36e2en] { color: var(--text-soft); font-size: 11.5px; }

/* ⚠ Cały wiersz jest celem dotykowym i ma co najmniej 44 px wysokości — przegląd interfejsu
   naliczył kiedyś 28 za małych celów na tablecie i 16 na telefonie. */
.dc-entry[b-vsek36e2en], .dc-add[b-vsek36e2en] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    text-align: left;
    font-size: 12.5px;
    cursor: pointer;
}

.dc-entry:focus-visible[b-vsek36e2en], .dc-add:focus-visible[b-vsek36e2en] { outline: 2px solid var(--p1); outline-offset: -2px; }

.dc-entry.locked[b-vsek36e2en] {
    background: repeating-linear-gradient(45deg,
        var(--cream), var(--cream) 4px, transparent 4px, transparent 8px);
}

.dc-body[b-vsek36e2en] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dc-who[b-vsek36e2en] { font-weight: 500; }
.dc-what[b-vsek36e2en] { color: var(--text-soft); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-author[b-vsek36e2en], .dc-locked[b-vsek36e2en] { color: var(--text-soft); }
.dc-time[b-vsek36e2en] { font-variant-numeric: tabular-nums; white-space: nowrap; }

.bdot[b-vsek36e2en] { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.bdot.bill[b-vsek36e2en] { background: var(--p1); }
.bdot.nobill[b-vsek36e2en] { background: var(--line-strong); }

.dc-add[b-vsek36e2en] {
    justify-content: center;
    border-bottom: none;
    color: var(--p1);
    font-weight: 600;
}
/* /Components/Pages/Clients/PanelWpisuCzasu.razor.rz.scp.css */
/* Panel wpisu czasu. Scoped CSS — klasy żyją tylko w tym komponencie; szkielet okna
   (.modal-overlay / .modal-dialog / .modal-header / .modal-body / .modal-footer) jest wspólny
   i stoi w app.css, więc go tu NIE powtarzamy. */

.panel-czasu[b-61rovwmwel] { max-width: 620px; }

.pc-tryb[b-61rovwmwel] { color: var(--text-soft); font-weight: 400; }

.pc-meta[b-61rovwmwel] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0 0.8rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: var(--cream);
    font-size: 11.5px;
    color: var(--text-soft);
}

.pc-blokada[b-61rovwmwel] {
    margin: 0 0 0.8rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border-left: 3px solid var(--warn);
    background: var(--warn-bg);
    color: var(--warn-mocny);
    font-size: 12.5px;
}

.pc-blokada a[b-61rovwmwel] { color: inherit; }

.pc-form[b-61rovwmwel] { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.pc-field[b-61rovwmwel] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 12rem; }
.pc-grow[b-61rovwmwel] { flex: 1 1 100%; }

.pc-field label[b-61rovwmwel], .pc-label[b-61rovwmwel] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
}

.pc-field select[b-61rovwmwel], .pc-field input[b-61rovwmwel], .pc-field textarea[b-61rovwmwel] { width: 100%; }

/* ⚠ Podpowiedź nie schodzi poniżej 12 px i nie używa najsłabszego szarego — inaczej powód,
   dla którego pole jest wyłączone, byłby najmniej czytelną rzeczą na ekranie. */
.pc-hint[b-61rovwmwel] { font-size: 12px; color: var(--text-soft); }
.pc-hint-uwaga[b-61rovwmwel] { color: var(--p1); }

/* Para godzin i minut ZOSTAJE parą także na telefonie — dwa pola obok siebie mieszczą się bez
   problemu, a rozciągnięte na całą szerokość wyglądałyby jak dwa osobne pytania. */
.pc-time-pair[b-61rovwmwel] { display: flex; align-items: center; gap: 0.35rem; }
.pc-unit[b-61rovwmwel] { display: inline-flex; align-items: baseline; gap: 0.25rem; flex: 1; }
.pc-unit input[b-61rovwmwel] { text-align: right; font-variant-numeric: tabular-nums; }
.pc-unit-label[b-61rovwmwel] { font-size: 11.5px; color: var(--text-soft); }

@media (max-width: 760px) {
    .panel-czasu[b-61rovwmwel] { max-width: 100%; }
    .pc-field[b-61rovwmwel] { flex: 1 1 100%; }
}
/* /Components/Pages/Clients/PasmoDnia.razor.rz.scp.css */
/* Pasmo jednego dnia. Scoped CSS — te klasy żyją wyłącznie w tym komponencie.
   Kolory WYŁĄCZNIE przez zmienne: wpisany na sztywno szary nie idzie za motywem ciemnym. */

th.col-day[b-moyi2guhlp] {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.7rem 0.5rem 0.2rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    font-weight: 500;
    background: var(--paper);
    position: sticky;
    left: 0;
    z-index: 1;
}

th.col-day.wskazany[b-moyi2guhlp] { box-shadow: inset 3px 0 0 var(--p1); }

.d-name[b-moyi2guhlp] { display: block; font-size: 12.5px; }
.d-date[b-moyi2guhlp] { display: block; font-size: 11px; color: var(--text-soft); }
.d-sum[b-moyi2guhlp] { display: block; font-size: 12.5px; font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
.d-run[b-moyi2guhlp] { display: block; font-size: 10.5px; color: var(--p1); }

tr.dzis th.col-day[b-moyi2guhlp], tr.dzis td.band[b-moyi2guhlp] { background: var(--cream); }

td.band[b-moyi2guhlp] {
    padding: 0.3rem 0.2rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    width: 100%;
}

/* Podziałka godzinowa jest TŁEM, nie danymi — czytnik dostaje treść z nazwy dostępnej przycisku.
   `--krok` (procent szerokości na jedną godzinę) wylicza komponent i wstawia w atrybut style,
   bo tylko on zna skalę całego tygodnia. */
.band-inner[b-moyi2guhlp] {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-height: 34px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background-color: var(--cream-2);
    background-image: repeating-linear-gradient(
        to right,
        var(--line-strong) 0, var(--line-strong) 1px,
        transparent 1px, transparent var(--krok, 12.5%));
}

.seg[b-moyi2guhlp], .seg-add[b-moyi2guhlp] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 34px;
    overflow: hidden;
    padding: 0 0.35rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.seg:hover[b-moyi2guhlp], .seg-add:hover[b-moyi2guhlp] { border-color: var(--p1); }
.seg:focus-visible[b-moyi2guhlp], .seg-add:focus-visible[b-moyi2guhlp] { outline: 2px solid var(--p1); outline-offset: 1px; }

/* ⚠ NA DOTYKU CEL MUSI BYĆ WIĘKSZY. Trzydzieści cztery piksele wystarczają myszy i nie
   wystarczają palcowi. Wskaźnikiem jest SPOSÓB STEROWANIA, nie szerokość ekranu: `pointer: coarse`
   łapie też duży tablet z dotykiem, którego zapytanie o szerokość by przepuściło. */
@media (pointer: coarse) {
    .seg[b-moyi2guhlp], .seg-add[b-moyi2guhlp] { min-width: 44px; min-height: 44px; }
    .band-inner[b-moyi2guhlp] { min-height: 48px; }
}

.seg-who[b-moyi2guhlp] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-time[b-moyi2guhlp] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg-what[b-moyi2guhlp] { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Nazwisko i „za co" chowają się DOPIERO wtedy, gdy naprawdę nie ma dla nich miejsca — i nigdy
   nie przenoszą się do dymka `title`: na dotyku dymek nie istnieje, więc informacja schowana pod
   najechaniem znika bezpowrotnie. Zapas na wąski segment niesie nazwa dostępna przycisku. */
.seg[b-moyi2guhlp] { container-type: inline-size; }

@container (max-width: 150px) { .seg-what[b-moyi2guhlp] { display: none; } }
@container (max-width: 90px) { .seg-who[b-moyi2guhlp] { display: none; } }

.bdot[b-moyi2guhlp] {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: auto;
}

.bdot.bill[b-moyi2guhlp] { background: var(--p1); }
/* ⚠ Bez wartości zapasowej: `--line-strong` w palecie JEST i idzie za motywem ciemnym. */
.bdot.nobill[b-moyi2guhlp] { background: var(--line-strong); }

/* Zafakturowany: kreskowane tło + kłódka, ale NADAL przycisk — panel powie, dlaczego nie wolno. */
.seg.locked[b-moyi2guhlp] {
    background: repeating-linear-gradient(45deg,
        var(--cream), var(--cream) 4px, transparent 4px, transparent 8px);
    color: var(--text-soft);
}

.seg.locked[b-moyi2guhlp]::before { content: "🔒"; font-size: 9px; flex: none; }

.seg.running[b-moyi2guhlp] { border-color: var(--p1); color: var(--p1); font-weight: 600; }
.seg.nobill[b-moyi2guhlp] { border-style: dashed; }

.seg-add[b-moyi2guhlp] {
    justify-content: center;
    background: transparent;
    border-style: dashed;
    color: var(--text-soft);
}

.seg-add .plus[b-moyi2guhlp] { font-size: 14px; line-height: 1; }
.seg-add .plus-txt[b-moyi2guhlp] { font-size: 12px; }
/* /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;
    /* ⚠ Bez zawijania trzy przyciski i zegar nachodzą na siebie na wąskim ekranie — widać to
       na telefonie od razu po wejściu, bo plakietka stoi w nagłówku. */
    flex-wrap: wrap;
    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-soft); }
.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-soft); }

/* ── 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; }

/* „Ostatnio używane" — własny, zwarty wiersz skrótów NAD formularzem (nie w siatce pól; W-1 18.09.2026). */
.qa-recent[b-v084tl0ir6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.7rem 1.25rem 0;
}
.qa-recent-label[b-v084tl0ir6] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    margin-right: 0.35rem;
}
.qa-recent .f-chip[b-v084tl0ir6] { background: var(--cream-2); border-color: var(--line); color: var(--text); }
.qa-recent .f-chip:hover[b-v084tl0ir6] { border-color: var(--p1); color: var(--p1); }
.grp-row .grp-client[b-v084tl0ir6] { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-strong, var(--line)); }
.grp-row .grp-client:hover[b-v084tl0ir6] { color: var(--p1); border-bottom-color: var(--p1); }
.qa-field label[b-v084tl0ir6] { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); }
.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-actions[b-v084tl0ir6] { display: flex; gap: 0.4rem; }

/* ── Czas: osobne pole godzin, osobne minut ──────────────────────────────────
   ⚠ Podpis stoi NAD parą i wiąże się z nią przez `aria-labelledby`, a nie przez <label for>:
   jeden podpis na dwa pola nie da się wskazać atrybutem `for`, a każde pole ma osobną
   etykietę czytnika ekranu („Godziny" / „Minuty"). Napisy „godz." i „min" są dla oka. */
.qa-time-label[b-v084tl0ir6] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
}

.qa-time-pair[b-v084tl0ir6] { display: flex; align-items: center; gap: 0.35rem; }

.qa-unit[b-v084tl0ir6] { display: inline-flex; align-items: baseline; gap: 0.25rem; }

.qa-unit input[b-v084tl0ir6] {
    width: 3.6rem;
    min-width: 3.6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.qa-unit-label[b-v084tl0ir6] { font-size: 11.5px; color: var(--text-soft); }

.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-soft); 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); }
/* ⚠ Bez wartości zapasowej: `--line-strong` w palecie JEST, a wpisany na sztywno szary nie idzie
   za motywem ciemnym — kropka „nierozliczalne" zostawała wtedy jasna na ciemnym tle. */
.bdot.nobill[b-v084tl0ir6] { background: var(--line-strong); }

/* 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;
}

/* ⚠ NA DOTYKU KOMÓRKA MUSI BYĆ WYŻSZA. Trzydzieści pikseli wystarcza myszy i nie wystarcza
   palcu — przegląd interfejsu 25.08.2026 naliczył 28 takich celów na tablecie i 16 na telefonie.
   Wskaźnikiem jest sposób sterowania, nie szerokość ekranu: `pointer: coarse` łapie też duży
   tablet z dotykiem, którego zapytanie o szerokość by przepuściło. */
@media (pointer: coarse) {
    .cellbtn[b-v084tl0ir6] { height: 44px; }
}

.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] { width: 100%; min-width: 0; }
    /* Para godzin i minut zostaje parą także na telefonie — dwa pola obok siebie mieszczą
       się bez problemu, a rozciągnięte na całą szerokość wyglądałyby jak dwa osobne pytania. */
    .qa-time-pair[b-v084tl0ir6] { width: 100%; }
    .qa-unit[b-v084tl0ir6] { flex: 1; }
    .qa-unit input[b-v084tl0ir6] { width: 100%; min-width: 0; }
    .timer-chip[b-v084tl0ir6] { width: 100%; }
}

/* Wiersz-zachęta w tygodniu bez wpisów. Siatka rysuje się ZAWSZE (nagłówki dni, kolumna sum),
   a ten wiersz daje jej to, czego przy zerze wpisów nie ma z czego zrobić: coś do kliknięcia. */
.zacheta-row td[b-v084tl0ir6] { background: var(--cream); }
.zacheta-row .act-name[b-v084tl0ir6] { color: var(--text-faint); font-style: italic; }
.zacheta-row .cellbtn.empty[b-v084tl0ir6]::after { color: var(--text-faint); }

/* ══ Rejestr JEDNEGO kontrahenta — dni w pionie, pasmo godzin w poziomie ══════════════════════
   Sam wiersz dnia (nagłówek + segmenty) rysuje komponent PasmoDnia i ma własny scoped CSS —
   scoped CSS nie sięga do znaczników innego komponentu, więc style muszą stać tam, gdzie
   znaczniki. Tutaj zostaje SZKIELET tabeli, podziałka nad nią i podpisy pod nią. */

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

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

.ctgrid thead th.col-day[b-v084tl0ir6] { width: 8.5rem; }

/* Podziałka godzin: tyle równych działek, ile godzin ma skala tygodnia. Dokładnie ten sam podział,
   co tło pasma — obie strony liczą go z ScaleMinutes, więc podpis stoi nad kreską. */
.ctgrid .ruler[b-v084tl0ir6] { display: flex; margin-top: 0.25rem; }
.ctgrid .ruler .tick[b-v084tl0ir6] {
    flex: 1;
    font-size: 10px;
    letter-spacing: 0;
    color: var(--text-soft);
    border-left: 1px solid var(--line);
    padding-left: 2px;
}

/* Kto pracował w tym tygodniu — legenda NAD siatką, nie w dymku: na dotyku dymek nie istnieje. */
.ctgrid-osoby[b-v084tl0ir6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.7rem;
    font-size: 12px;
}

.ctgrid-osoby .lead[b-v084tl0ir6] { color: var(--text-soft); }
.ctgrid-osoby .osoba[b-v084tl0ir6] { display: inline-flex; align-items: center; gap: 0.3rem; }
.ctgrid-osoby .mono[b-v084tl0ir6] { color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* ⚠ To zdanie ratuje przed czytaniem pasma jak kalendarza. Nie schodzi poniżej 12 px i nie
   używa najsłabszego szarego — informacja, bez której ekran kłamie, nie może być najmniej
   czytelną rzeczą na stronie. */
.ctgrid-uwaga[b-v084tl0ir6] {
    margin: 0 0 0.7rem;
    padding: 0.45rem 0.7rem;
    border-left: 3px solid var(--p1);
    background: var(--cream);
    border-radius: 0 8px 8px 0;
    font-size: 12.5px;
}

.ctgrid-note[b-v084tl0ir6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0.5rem 0 0;
    font-size: 12px;
    color: var(--text-soft);
}

.ctgrid-note .leg[b-v084tl0ir6] { display: inline-flex; align-items: center; gap: 0.3rem; }
.ctgrid-note strong[b-v084tl0ir6] { color: var(--text); }

.day-cards[b-v084tl0ir6] { margin-top: 0.2rem; }

/* Autor wpisu w panelu dnia widoku zbiorczego — pokazywany TYLKO wtedy, gdy jest kimś innym
   niż wykonawca. ⚠ `--text-soft`, nie `--text-faint`: nowy napis nie ma prawa być najsłabiej
   czytelną rzeczą na ekranie, a kontrast najsłabszego szarego jest właśnie poprawiany osobno. */
.day-entry-author[b-v084tl0ir6] { color: var(--text-soft); font-size: 12px; }
/* /Components/Pages/Conversation/Conversation.razor.rz.scp.css */
/* ─── Shell ──────────────────────────────────────────────────────────── */
.conv-shell[b-ayj7cev44r] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    /* Wiersz przycięty do wysokości okna. Bez tego rośnie do wysokości NAJWYŻSZEJ kolumny,
       więc panel boczny z rozwiniętymi sekcjami rozpychał całą stronę zamiast przewijać się
       u siebie — jego `overflow` nigdy nie miał czego przycinać. */
    grid-template-rows: minmax(0, 1fr);
    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;
}

/* Panel boczny jest tylko ramą — sam się NIE przewija. Przewija się obszar sekcji
   w środku (.conv-side-scroll), więc nagłówek szuflady na telefonie zostaje na wierzchu. */
.conv-side[b-ayj7cev44r] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Obszar przewijania sekcji. `min-height: 0` jest tu warunkiem działania, nie ozdobą:
   bez niego element nie zejdzie poniżej wysokości własnej treści i zamiast paska
   przewijania panelu wracamy do rozpychania strony. */
.conv-side-scroll[b-ayj7cev44r] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 4px;
}

/* ─── Zwijane sekcje panelu bocznego ─────────────────────────────────────────
   Panel ma JEDEN pasek przewijania — na obszarze sekcji. Żadna sekcja nie dostaje
   drugiego (przewijanie w przewijaniu gubi treść i myli kółko myszy).
   Stan rozwinięcia trzyma sam <details open>; nic nie jest zapamiętywane między
   wejściami — po wejściu i po odświeżeniu otwarty jest wyłącznie „Klient". */
.side-sec[b-ayj7cev44r] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    /* Sekcje nie kurczą się do wysokości obszaru. Inaczej otwarta sekcja zostaje
       ściśnięta i (przez `overflow: hidden` powyżej) po prostu ucina sobie treść. */
    flex: 0 0 auto;
}

.side-sec-head[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    user-select: none;
    list-style: none;              /* domyślny trójkącik <summary> — mamy własną strzałkę */
    transition: background 0.12s;
}
.side-sec-head[b-ayj7cev44r]::-webkit-details-marker { display: none; }
.side-sec-head:hover[b-ayj7cev44r] { background: var(--cream); }

.side-sec-title[b-ayj7cev44r] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    font-weight: 600;
    flex: none;
}

/* Podpis (np. „12 wiadomości") — kurczy się jako pierwszy i ucina wielokropkiem.
   Bez min-width: 0 długi login klienta rozpychałby nagłówek i wypychał strzałkę. */
.side-sec-meta[b-ayj7cev44r] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 11px;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-sec-chev[b-ayj7cev44r] {
    width: 14px; height: 14px;
    flex: none;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    color: var(--text-faint);
    transition: transform 0.15s;
}
.side-sec[open] > .side-sec-head > .side-sec-chev[b-ayj7cev44r] { transform: rotate(180deg); }
.side-sec[open] > .side-sec-head[b-ayj7cev44r] { border-bottom: 1px solid var(--line); }

.side-sec-body[b-ayj7cev44r] {
    padding: 0.7rem 0.85rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
/* Sekcje z własnym układem wewnętrznym (czat, zadania) same trzymają swoje odstępy. */
.side-sec-body-flush[b-ayj7cev44r] { padding: 0; gap: 0; }

.side-sec-hint[b-ayj7cev44r] {
    font-size: 11.5px;
    color: var(--text-soft);
    line-height: 1.5;
    margin: 0;
}

.side-sec-wide-btn[b-ayj7cev44r] { width: 100%; justify-content: center; }

/* Podsekcja wewnątrz sekcji (np. „Czego oczekuje kupujący" w Zamówieniach). */
.side-block[b-ayj7cev44r] { display: flex; flex-direction: column; gap: 0.35rem; }
.side-block + .side-block[b-ayj7cev44r] {
    padding-top: 0.7rem;
    border-top: 1px dashed var(--line);
}
.side-block-head[b-ayj7cev44r] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.side-block-title[b-ayj7cev44r] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.side-block-title em[b-ayj7cev44r] {
    font-style: italic;
    color: var(--text-faint);
    font-weight: 400;
}
.side-block-sub[b-ayj7cev44r] {
    font-size: 11px;
    color: var(--text-soft);
    line-height: 1.45;
    margin: 0;
}
.side-plain-list[b-ayj7cev44r] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ─── 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); }

/* ⚠ Reguła „.conv-side-toggle z napisem" stała TUTAJ i przegrywała z drugą, niżej w tym samym
   pliku (kwadrat 32×32). Przy równej wadze wygrywa późniejsza — więc przycisk był kwadratem
   i ucinał własny napis o 36 px (zmierzone 21.09 na wydaniu 33: szerokość 32, treść 66).
   Teraz jest JEDNA reguła, w miejscu tej kanonicznej („Side toggle in header"). */
.conv-side-toggle-mobile[b-ayj7cev44r] { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Okruszek do karty klienta. Stoi TUŻ przy strzałce powrotu, bo to druga droga „w górę":
   strzałka wraca do skrzynki, okruszek do człowieka, którego ta rozmowa dotyczy. */
.conv-okruszek-klient[b-ayj7cev44r] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    max-width: 14rem;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-soft);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-okruszek-klient svg[b-ayj7cev44r] { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.conv-okruszek-klient span[b-ayj7cev44r] { overflow: hidden; text-overflow: ellipsis; }
.conv-okruszek-klient: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-soft);
    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;
}
/* Kanał obok plakietki rodzaju w wierszu 1 (N2b). */
.conv-kanal[b-ayj7cev44r] { margin-right: 0.4rem; }
.conv-kind .kind-badge[b-ayj7cev44r] { vertical-align: middle; letter-spacing: 0.02em; }
.conv-head-actions[b-ayj7cev44r] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex: none;
    flex-wrap: wrap;
    margin-left: auto;  /* akcje trzymają prawą krawędź także po zejściu do drugiego wiersza (W-3) */
}
.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. */
/* ⚠ Temat NIE jest ucinany wielokropkiem (W-3, 18.09.2026). Do tej pory `white-space: nowrap` + `flex: 1;
   min-width: 0` oddawało całe miejsce plakietkom i akcjom — przy szerokim pasku akcji temat kurczył się do
   „Prośba o zwrot po term…", a właściciel pytał, czemu „nie widać w nagłówkach danych". Teraz temat ma
   gwarantowaną szerokość (14 rem) i zawija do DWÓCH linii; gdy plakietki i akcje się nie mieszczą, to ONE
   schodzą do drugiego wiersza (`flex-wrap: wrap` na `.conv-head-row1`), nie temat do wielokropka. Pełny temat
   nadal jest w dymku (`title`). */
.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 1 14rem;
    min-width: 14rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow-wrap: anywhere;
    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-soft);
    flex: none;
    white-space: nowrap;
}
.subject-edit-hint[b-ayj7cev44r] {
    font-size: 0.7em;
    color: var(--text-faint);
    margin-left: 0.3rem;
    /* Widoczna zawsze, po najechaniu wyraźniej (W-14, 19.09.2026): „widoczne dopiero po najechaniu"
       znaczy dla nowego pracownika „nie ma takiej możliwości". */
    opacity: 0.55;
    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: inherit;
}
.subject-hint[b-ayj7cev44r] {
    color: var(--text-soft);
    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 > span:last-child[b-ayj7cev44r] { white-space: nowrap; }  /* nazwisko w całości — plakietka schodzi niżej, nie ucina (W-3) */
.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.
   Kafel siedzi wewnątrz sekcji, więc rysuje się sam (bez klasy .card). */
.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%;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.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; }

/* Przycisk panelu bocznego w nagłówku. Niesie NAPIS, więc jest rzędem, nie kwadratem na ikonę:
   sama ikona nie mówi, że po drugiej stronie są klient, zadania i historia (opiekun J, 19.09).
   ⚠ `min-height` zamiast `height`, `width: auto` i `white-space: nowrap` — razem znaczą
   „przycisk ma się dopasować do napisu", a nie „napis ma się zmieścić w przycisku".
   `flex: none` trzyma go w całości, gdy rząd nagłówka robi się ciasny. */
.conv-side-toggle[b-ayj7cev44r] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    width: auto; min-height: 32px; padding: 0 0.5rem;
    white-space: nowrap; flex: none;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.15s;
}
.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;
    flex: none;
    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-soft);
}
.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-soft); 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) ──────────────────── */
/* Pasek „Pliki i media" (W-6, 18.09.2026): przyklejony do góry przewijanego wątku, kompaktowe kafelki. */
/* ⚠ PASEK „PLIKI I MEDIA" USUNIĘTY 20.09.2026. Był `position: sticky` w przewijanym wątku, więc
   zjadał górę rozmowy na KAŻDYM ekranie — także wtedy, gdy nikt plików nie szukał — a przycisk
   „Wszystkie" podmieniał go na panel stojący NIŻEJ w tym samym strumieniu, czyli poza kadrem:
   dla patrzącego zawartość po prostu znikała. Właściciel: „wisi na pół ekranu i do tego po
   kliknięciu »wszystkie« znika". Pliki mają teraz jedno miejsce — okno (`.pliki-modal`) otwierane
   przyciskiem w nagłówku i pozycją w menu „⋮". */
.pliki-modal[b-ayj7cev44r] {
    width: min(720px, 100%);
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
/* Panel jest jedyną treścią okna, więc to ON się przewija — okno ma stałą ramę.
   Bez `min-height: 0` element nie zejdzie poniżej wysokości własnej treści i zamiast paska
   przewijania wróciłoby rozpychanie okna poza ekran. */
.pliki-modal[b-ayj7cev44r]  .abc-pliki-panel {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Menu rozmowy: same kropki, bez słowa „Akcje" (właściciel, 20.09.2026). */
.mobile-actions-summary[b-ayj7cev44r] {
    display: inline-grid;
    place-items: center;
    width: 38px;
    padding: 0;
}
.mobile-actions-summary svg[b-ayj7cev44r] {
    width: 18px; height: 18px;
    fill: currentColor; stroke: none;
}
.mobile-actions-summary[b-ayj7cev44r]::-webkit-details-marker,
.mobile-actions-summary[b-ayj7cev44r]::marker { display: none; content: ""; }

.pinned-bar[b-ayj7cev44r] {
    position: sticky;
    top: 0;  /* gdy nad nim stoi pasek plików, oba są sticky — kolejność w DOM ustala, który jest wyżej */
    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-soft, #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); }

/* Przyciski przy wiadomości (przypnij, wydziel) — ZAWSZE widoczne, najechanie tylko je podbija.
   ⚠ Do 19.09.2026 stały na opacity: 0 i pojawiały się dopiero pod kursorem (W-14 właściciela, agent A:
   „10 przycisków widocznych dopiero po najechaniu"). Człowiek pierwszego dnia nie wie, że ma najeżdżać —
   dla niego tych funkcji po prostu nie było. Przypięte zostają pełne. */
.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.45;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    margin-left: auto;
}
.msg:hover .msg-pin[b-ayj7cev44r] { opacity: 0.85; }

/* ── Nagłówek rozmowy: kolor = RODZAJ akcji (W-8 właściciela, 19.09.2026) ──────────────────────
   STAN (Odłóż, Zamknij, Wznów) zostaje w .btn-secondary / .btn-primary z app.css.
   ALLEGRO = decyzje idące do Allegro (reklamacja, prośba o zakończenie): pomarańcz Allegro, żeby było
   widać, że to nie jest zmiana u nas, tylko komunikat do serwisu. AI = jedno menu w odcieniu palety 5
   (teal) — inny od zieleni stanu i pomarańczu Allegro. PLIKI i POWIĄZANIA = .btn-ghost + lekka ramka:
   to „pokaż / przenieś", nie decyzje. Hierarchia: przyciski stanu i Allegro mają wypełnienie,
   AI ma wypełnienie tintem, reszta jest przezroczysta. */
.conv-head-actions .ha-allegro[b-ayj7cev44r],
.mobile-actions-menu .ha-allegro[b-ayj7cev44r] {
    background: #fff3ea;
    border: 1px solid #f7b088;
    color: #9a3c05;
}
.conv-head-actions .ha-allegro:hover[b-ayj7cev44r] { background: #ffe4d1; border-color: #ff7a2f; color: #7a2e02; }

.ha-ai[b-ayj7cev44r] {
    background: color-mix(in srgb, var(--global-palette5, #1e4c53) 10%, var(--paper, #fff));
    border: 1px solid color-mix(in srgb, var(--global-palette5, #1e4c53) 40%, var(--paper, #fff));
    color: var(--global-palette4, #022c32);
}
.ha-ai:hover[b-ayj7cev44r] { background: color-mix(in srgb, var(--global-palette5, #1e4c53) 18%, var(--paper, #fff)); color: var(--global-palette4, #022c32); }

.conv-head-actions .ha-pliki[b-ayj7cev44r],
.conv-head-actions .ha-powiazania[b-ayj7cev44r] {
    border: 1px solid var(--line);
    color: var(--text-soft);
}
.conv-head-actions .ha-pliki:hover[b-ayj7cev44r],
.conv-head-actions .ha-powiazania:hover[b-ayj7cev44r] { border-color: var(--line-strong); color: var(--text); }
.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-soft);
    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-soft); }
.msg-text[b-ayj7cev44r] {
    font-size: 13.5px;
    color: var(--text);
    white-space: pre-wrap;
    line-height: 1.55;
    /* ⚠ Treść maila od obcego wchodzi tu bez ramki (audyt 25.09.2026, S2). `contain: paint`
       zamyka ją w tym pudełku: element staje się blokiem zawierającym także dla
       `position: fixed`, a wszystko poza nim jest przycinane — list nie przykryje aplikacji,
       nawet gdy w bazie leży treść odkażona jeszcze starą listą CSS. Szerokie tabele z poczty
       przewijają się w poziomie zamiast wychodzić poza dymek. */
    position: relative;
    contain: paint;
    overflow-x: auto;
}

/* ─── Obrazki osadzone w treści wiadomości ──────────────────────────────────────
   ⚠ `::deep` jest tu OBOWIĄZKOWE, nie ozdobne. Treść maila wchodzi do .msg-text przez
   MarkupString, więc jej <img> NIGDY nie dostanie atrybutu zakresu (b-…). Zapis
   `.msg-text img` skompilowałby się do `.msg-text img[b-…]` i nie złapał ANI JEDNEGO
   obrazka z poczty — reguła wyglądałaby na zrobioną i nic by nie robiła. Dokładnie tak
   umarło `.msg-body-html img` w czytniku poczty. `::deep` przenosi zakres na .msg-text
   (ten element jest pisany w .razor, więc atrybut ma), a potomek może być dowolny.
   Ta sama przyczyna stoi za tym, że `.msg-text mark.kw-hit` mieszka w app.css.

   Po co limit wysokości: rozmiar osadzonego obrazka wybiera NADAWCA. Zdjęcie 4000 px
   wysokości zajmuje kilka ekranów i wypycha resztę rozmowy poza widok — jedna wiadomość
   psuje czytelność całego wątku. Kadrujemy do 360 px; pełny rozmiar jest o jedno
   kliknięcie (powiększenie na ciemnym tle — abc-lightbox.js).

   `!important`: sanitizer przepuszcza atrybut `style`, więc styl inline nadawcy
   („height: 4000px") wygrałby ze zwykłą regułą arkusza. To zabezpieczenie przed treścią
   spoza naszej kontroli, nie skrót.
   `object-fit: contain`: gdy nadawca poda JAWNĄ wysokość, samo przycięcie jej do 360 px
   zdeformowałoby proporcje — contain wpisuje obrazek w ramkę, nie rozciąga go. */
.msg-text[b-ayj7cev44r]  img {
    max-width: 100% !important;
    max-height: 360px !important;
    object-fit: contain;
    object-position: left center;
    cursor: zoom-in;
}

/* Plik się NIE zdekodował (obcięty, nieznany format, martwy odnośnik). Domyślnie
   przeglądarka rysuje ikonę zepsutej grafiki i tekst alternatywny nadawcy — zamiast tego
   schludny prostokąt o stałej wysokości. Klasę dopina abc-email-images.js w reakcji na
   zdarzenie `error`; sam CSS takiego stanu nie wykryje.
   Podmieniamy WYGLĄD elementu, a nie sam element: treść MarkupString należy do Blazora
   i wyjmowanie z niej węzłów potrafi wywrócić późniejsze przerysowanie listy wiadomości. */
.msg-text[b-ayj7cev44r]  img.abc-img-broken {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 320px !important;
    height: 132px !important;      /* stała wysokość — ramka nie skacze zależnie od tego, co przyszło */
    max-height: 132px !important;
    background: var(--cream-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: default;
    font-size: 0;                  /* tekst alternatywny nadawcy nie ma tu nic do powiedzenia */
}
.msg-text[b-ayj7cev44r]  img.abc-img-broken::after {
    content: "Nie udało się wyświetlić obrazka";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 0.75rem;
    text-align: center;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-faint);
}

.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;
}

/* Podpis po lewej stronie rzędu narzędzi: kanał, adres nadawcy albo „Notatka wewn.".
   ⚠ Układ TUTAJ, nie w znaczniku — reguła telefonu go chowa, a stylu wpisanego w znacznik
   nie przykryje żaden selektor. */
.composer-nadawca-adres[b-ayj7cev44r] {
    color: var(--text-soft);
    font-size: 11.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.composer-nadawca .channel-icon[b-ayj7cev44r] { flex: none; }

.composer-nadawca[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

/* ⚠ NA TELEFONIE „WYŚLIJ" BYŁ POZA EKRANEM (26.08.2026). Rząd jest elastyczny, bez zawijania
   i bez przewijania, a przycisk wysyłki stoi w nim OSTATNI. Przy 390 px lewa grupa (adres
   nadawcy, załącznik, „✨ Podpowiedz", szablony) wypychała go poza prawą krawędź i nie dało
   się do niego dotrzeć żadnym gestem — czyli z telefonu NIE DAŁO SIĘ WYSŁAĆ ODPOWIEDZI
   z ekranu rozmowy. Znalezione przeglądem ekranów, nie okiem.

   Zawijanie, a nie przewijanie poziome: przy wysyłce przycisk musi być WIDOCZNY, a nie
   „osiągalny po przesunięciu". Wysyłka wchodzi wtedy w drugą linię i zostaje po prawej. */
@media (max-width: 768px) {
    .composer-actions[b-ayj7cev44r] {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        column-gap: 0.4rem;
    }

    .composer-actions > [data-testid="composer-send"][b-ayj7cev44r] {
        margin-left: auto;
    }

    /* ── Tryb pisania przy „Wyślij", nie nad polem (20.09.2026) ─────────────────────────────
       ⚠ PRÓG 768 px, TEN SAM CO GLOBALNE `.mobile-only`, a nie 640 px jak reszta reguł telefonu.
       Przełącznik `.composer-tryb` pokazuje się właśnie od `.mobile-only`; gdyby zakładki znikały
       dopiero przy 640 px, między 641 a 768 px stałyby OBA naraz — dwa sposoby przestawienia tego
       samego stanu, dwa centymetry od siebie. */
    .composer-tabs[b-ayj7cev44r] { display: none; }

    /* Zwinięte pole pisania oddaje wątkowi całą swoją wysokość. Treść zostaje w pamięci ekranu —
       chowa się sam widok (patrz `kompozytorZwiniety`). */
    .conv-composer.zwiniety .composer-area-wrap[b-ayj7cev44r],
    .conv-composer.zwiniety .composer-suggest[b-ayj7cev44r],
    .conv-composer.zwiniety .composer-attachments[b-ayj7cev44r],
    .conv-composer.zwiniety .collision-warning[b-ayj7cev44r] { display: none; }
}

/* ── Przełącznik „Odpowiedź / Notatka" w rzędzie narzędzi ────────────────────────────────────
   Widoczność załatwia globalna `.mobile-only`; tu jest tylko wygląd. Oba napisy stoją zawsze,
   bo przełącznik z jednym napisem nie mówi, co się stanie po dotknięciu. */
.composer-tryb[b-ayj7cev44r] {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--cream-2);
    cursor: pointer;
    font-family: inherit;
}
.composer-tryb-opcja[b-ayj7cev44r] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0.5rem;
    border-radius: 999px;
    font-size: 10.5px;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-faint);
    transition: background 0.12s, color 0.12s;
}
.composer-tryb-opcja.wybrana[b-ayj7cev44r] {
    background: var(--paper);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}
/* Notatka to inny adresat niż odpowiedź — przełącznik ma to mówić kolorem, nie samym pogrubieniem. */
.composer-tryb[aria-checked="true"] .composer-tryb-opcja.wybrana[b-ayj7cev44r] { background: var(--warn-bg); color: var(--warn); }

/* ── Zwijanie pola pisania ──────────────────────────────────────────────────────────────────── */
.composer-zwin[b-ayj7cev44r] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
}
.composer-zwin:hover[b-ayj7cev44r] { background: var(--cream-2); color: var(--text); }
.composer-zwin svg[b-ayj7cev44r] { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Pasek zwiniętego pola: dowód, że napisany tekst nie przepadł. */
.composer-szkic-pasek[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.6rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--cream-2);
    font-family: inherit;
    font-size: 12px;
    color: var(--text-soft);
    text-align: left;
    cursor: pointer;
}
.composer-szkic-znak[b-ayj7cev44r] { flex: none; opacity: 0.7; }
.composer-szkic-tresc[b-ayj7cev44r] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Kafelki zalączników ─ STYLE PRZENIESIONE DO app.css (11.08.2026) ───
   .composer-att-* i .msg-att-* mieszkały TUTAJ, czyli w stylach ZAKRESOWYCH jednego
   komponentu — a tych samych klas używały czat i dyskusja zadania, gdzie nie dostawały
   ani jednej reguły. Ikona bez wymiarów rozdymała się tam do 834×446 px czarnej plamy.
   Wspólne klasy muszą mieszkać w app.css; tu zostaje tylko to, co naprawdę jest
   własnością widoku zgłoszenia. */

/* ─── 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: color-mix(in srgb, var(--global-palette1) 25%, transparent); }
.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-soft);
    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;
}
/* ⚠ Lista trafień PŁYNIE W TREŚCI, nie wisi jako chmurka nad ekranem (naprawione 31.08.2026).
   Do tego dnia stało tu `position: absolute; top: calc(100% + 4px); left: 0`. W oknie
   „Połącz zgłoszenia” najbliższym pozycjonowanym przodkiem jest `.modal-overlay` — przyciemniona
   płachta na CAŁY ekran — więc sto procent znaczyło „wysokość ekranu”: lista rysowała się
   965 px od góry przy oknie przeglądarki wysokim na 950 px. Płachta jest przypięta
   (`position: fixed`), więc przewijanie jej nie sprowadzało i łączenia zgłoszeń NIE DAŁO SIĘ
   wykonać myszą. Pozostałe dwa użycia tej klasy na tym ekranie (`.tag-picker-pop`,
   `.conv-head-tag-picker`) i tak zdejmowały to pozycjonowanie z powrotem — absolutna chmurka
   nie służyła tu niczemu poza tą jedną awarią. Okno przewija się samo: `.modal-body` ma
   `overflow-y: auto` w dialogu ograniczonym do `max-height: 90vh`, więc lista mieści się
   także przy oknie wysokim na 900 px. */
.tag-picker-list[b-ayj7cev44r] {
    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-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    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-soft);
    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) ─────────────────────────────────────
   Wcześniej lista miała własny pasek przewijania wewnątrz przewijanego panelu —
   dwa paski jeden w drugim gubią treść i myli je kółko myszy. Teraz sekcja jest
   zwijana i pokazuje krótką listę, a pełną historię otwiera popup — nic nie ginie. */
.mini-audit[b-ayj7cev44r] {
    list-style: none;
    margin: 0;
    padding: 0 0.25rem 0 0;
}
/* W popupie „Pokaż pełną historię" przewija się modal, nie lista. */
.modal-body .mini-audit[b-ayj7cev44r] { max-height: none; }
.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(--line-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-soft);
}

/* ─── "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-soft);
    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-soft);
    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-soft);
    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-soft);
    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: color-mix(in srgb, var(--global-palette1) 8%, transparent);
    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-soft);
    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;
}
/* ⚠ `min-height: 0` JEST WARUNKIEM PRZEWIJANIA, NIE OZDOBĄ (20.09.2026, właściciel: „to się nie
   przewija na mobile"). Okno jest kolumną `flex`, a dziecko kolumny nie zejdzie samo poniżej wysokości
   własnej treści — `overflow-y: auto` nie ma wtedy czego przycinać i treść po prostu wystaje poza
   ekran, bez paska i bez gestu. Ta sama pułapka co w panelu bocznym rozmowy (`.conv-side-scroll`). */
.cust-modal-body[b-ayj7cev44r] {
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ── Nagłówek okna: jasny tekst na ciemnym tle ──────────────────────────────────────────────
   ⚠ `.modal-header` maluje tło gradientem palety i ustawia `color: white`, ale dzieci nadpisują je
   własnym kolorem (`--text-soft`, `display-heading`) — pomyślanym dla jasnego papieru. Na ciemnym
   pasku dawało to szary napis na ciemnej zieleni: „7 zamówień łącznie · 2453 PLN" i „Edytuj" były
   nieczytelne (zrzut właściciela z telefonu, 20.09.2026). Kolor bierze się TUTAJ, z jednego miejsca. */
.cust-modal-head .cust-modal-name[b-ayj7cev44r],
.cust-modal-head .cust-modal-name em[b-ayj7cev44r] { color: #fff; }
.cust-modal-head .cust-modal-meta[b-ayj7cev44r] { color: rgba(255, 255, 255, 0.82); }
.cust-modal-head .btn-ghost[b-ayj7cev44r] { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.cust-modal-head .btn-ghost:hover[b-ayj7cev44r] { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.cust-modal-head .cust-modal-close[b-ayj7cev44r] { color: #fff; opacity: 0.85; }
.cust-modal-head .cust-modal-close:hover[b-ayj7cev44r] { opacity: 1; background: rgba(255, 255, 255, 0.14); }

/* ⚠ KAŻDY ciemny pasek okna, nie tylko ten jeden. `.cust-modal-close` bierze kolor z palety
   dla jasnego tła (--text-soft) i na gradiencie nagłówka daje 1,80:1 przy progu 4,5:1 —
   czyli „widać, że coś tam jest". Właściciel zgłosił to na oknie „Historia akcji" (21.09),
   ale tych okien jest sześć; naprawa jednego nie jest naprawą wzorca.
   ⚠ Ta reguła MUSI stać w arkuszu komponentu: arkusz komponentów ładuje się PO app.css,
   więc `.modal-header .cust-modal-close` zapisane w app.css przegrałoby kolejnością. */
.modal-header .cust-modal-close[b-ayj7cev44r] { color: #fff; opacity: 1; }
.modal-header .cust-modal-close:hover[b-ayj7cev44r] { background: rgba(255, 255, 255, 0.18); color: #fff; }
.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-soft);
    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-soft);
    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-soft);
    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;
        /* Szuflada też nie przewija się sama — robi to obszar sekcji w środku,
           dzięki czemu pasek „Szczegóły konwersacji" zostaje widoczny u góry. */
        overflow: hidden;
    }
    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;
    }
}

/* Podpowiedzi szablonów nad polem odpowiedzi. Na dużym ekranie rząd zawijany, na telefonie
   (niżej) zostaje z nich jedna — patrz blok 640 px. */
.composer-suggest[b-ayj7cev44r] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
    /* ── 0. CAŁA SZEROKOŚĆ EKRANU (20.09.2026) ──────────────────────────────────────────────
       Właściciel: „powinno być szerzej, bez marginesów, bo po co na mobile". Rozmowa stała
       w kafelku z zaokrągleniem i cieniem — wzór z dużego ekranu, gdzie kafelek oddziela ją od
       tła i sąsiedniego panelu. Na telefonie sąsiada nie ma, a kafelek zabierał 24 px szerokości
       (2 × 12) z 390 — czyli jedno słowo w każdym wierszu wiadomości. */
    .conv-shell[b-ayj7cev44r] { padding: 0; gap: 0; }
    .conv-thread[b-ayj7cev44r] {
        border-left: none;
        border-right: none;
        border-radius: 0;
        box-shadow: none;
    }
    .conv-head[b-ayj7cev44r] { padding: 0.45rem 0.7rem 0.5rem; }

    /* ══ TELEFON: NAGŁÓWEK I KOMPOZYTOR ODDAJĄ MIEJSCE WIADOMOŚCIOM (20.09.2026) ═══════════════
       Zmierzone przyrządem (scenariusz OkiemT, pokaz, 390×844) PRZED tą zmianą:
         górny pasek 49 + nagłówek rozmowy 178 + kompozytor 289 = 516 px chromu (61 % okna),
         na wiadomości zostawało 258 px (31 %), a po rozwinięciu „Szczegóły" 160 px (19 %) —
         czyli dwie wiadomości, jedna ucięta. I to BEZ klawiatury ekranowej, która zabiera
         kolejne ~300 px: z nią na wątek nie zostaje nic.
       Właściciel (20.09.2026): „ta ilość miejsca na czat na mobile to patologia […] musisz to
       wszystko pochować do jakichś submenu i dać dużo więcej miejsca na konwersacje".

       ZASADA PODZIAŁU: w stałym widoku zostaje to, co czyta się PRZY KAŻDEJ WIADOMOŚCI — temat,
       stan sprawy, pole odpowiedzi z wysyłką. Wszystko, co sprawdza się RAZ (rodzaj, kanał, numer,
       opiekun, adres nadawcy, lista plików), idzie o jedno dotknięcie dalej: pod „▼ Więcej"
       albo pod „⋯ Akcje". Nic nie znika — każda rzecz schowana tutaj ma tam swój odpowiednik. */

    /* ── 1. Wiersz tematu: JEDEN wiersz zamiast trzech ──────────────────────────────────────
       Wiersz ma `flex-wrap: wrap`, a temat `min-width: 11rem` — więc przyciski „panel" i
       „⋯ Akcje" lądowały w osobnej linii, a plakietki rodzaju w jeszcze jednej. */
    .conv-head-row1[b-ayj7cev44r] { flex-wrap: nowrap; gap: 0.35rem; min-height: 0; }
    .conv-title[b-ayj7cev44r] {
        font-size: 1.05rem;
        /* ⚠ ZERO, nie 11rem. Przy `nowrap` to minimum rozpychało wiersz i wypychało przyciski
           poza krawędź; z zerem temat kurczy się do wielokropka, a przyciski zostają widoczne. */
        min-width: 0;
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }
    /* Odpowiedniki tych czterech siedzą w pasku „Szczegóły" (conv-strip-mobile-extras) i w panelu
       bocznym, więc para jest rozłączna i zawsze widać dokładnie jedną kopię. */
    .conv-head-row1 .conv-kind[b-ayj7cev44r],
    .conv-head-row1 .conv-ticket-inline[b-ayj7cev44r],
    .conv-head-row1 .agent-chip[b-ayj7cev44r],
    .conv-head-row1 .conv-presence-mini[b-ayj7cev44r] { display: none; }
    .conv-head-actions.mobile-only[b-ayj7cev44r] { flex: none; margin-left: auto; }

    /* ── 2. Pasek stanu ────────────────────────────────────────────────────────────────────── */
    .conv-strip-toggle[b-ayj7cev44r] { padding-top: 0.1rem; padding-bottom: 0.1rem; }

    /* Rozwinięty pasek bez powtórek z wiersza NAD nim. Przełącznik „▼ Więcej" zostaje widoczny
       po rozwinięciu i niesie już stan oraz termin — więc w pasku stały drugi raz, dwa centymetry
       niżej (widoczne na zrzucie PO, 20.09.2026: „Otwarte" nad „Otwarte"). Pochodzenie terminu
       zostaje w podpowiedzi przełącznika. */
    .conv-strip.mobile-open > .chip:first-child[b-ayj7cev44r],
    .conv-strip.mobile-open .conv-sla-mob[b-ayj7cev44r] { display: none; }

    /* ── 3. Pliki i media: w oknie, nie w wątku ────────────────────────────────────────────
       Pasek przyklejony do góry wątku zabierał 98 px z 390 (pomiar agenta J) i został usunięty
       — patrz uwaga przy `.pliki-modal`. Na telefonie pliki otwiera pozycja w menu „⋮". */

    /* ── 4. Kompozytor: jedna linia narzędzi zamiast dwóch ──────────────────────────────────
       Ikony zostają (cel dotyku pilnuje blok `pointer: coarse`), znikają NAPISY. Co robi ikona,
       mówi `title`, a te same akcje z pełnymi napisami są w menu „⋯ Akcje". */
    .conv-composer[b-ayj7cev44r] { padding: 0.5rem 0.85rem 0.6rem; }
    .composer-actions[b-ayj7cev44r] { margin-top: 0.35rem; gap: 0.3rem; }
    .etykieta-szeroko[b-ayj7cev44r] { display: none; }

    /* Na telefonie z podpisu zostaje SAMA PLAKIETKA kanału (22 px) — adres skrzynki schodzi,
       bo to najdłuższy element rzędu, a sprawdza się go raz. Pełna nazwa i adres są w podpowiedzi
       plakietki oraz w panelu bocznym. W trybie notatki pole ma własne tło (`.composer-internal`)
       i aktywny przełącznik „Notatka", więc i bez napisu widać, do kogo się pisze. */
    .composer-nadawca-adres[b-ayj7cev44r] { display: none; }

    /* Trzy podpowiedzi zawijały się na trzy wiersze (66 px). Zostaje pierwsza — najlepiej
       dopasowana, bo lista jest posortowana po trafieniach słów kluczowych. Reszta jest pod
       „📋" obok pola. */
    .composer-suggest[b-ayj7cev44r] { margin-bottom: 0.35rem; }
    .composer-suggest > :nth-child(n+2)[b-ayj7cev44r] { display: none; }

    /* ── 5. Wątek ma dostać to, co tu zaoszczędzone ────────────────────────────────────────── */
    .conv-stream[b-ayj7cev44r] { padding: 0.55rem 0.7rem; }
    /* ⚠ Temat jest w tym wierszu jedynym elementem, który się kurczy (flex: 1), więc oddawał
       miejsce WSZYSTKIM chipom naraz: zmierzone na 390 px — 20,8 px szerokości przy 146 px
       potrzebnych, czyli z „Zmiana adresu dostawy" widać było dwie litery. Wiersz ma
       `flex-wrap: wrap`, więc wystarczy dać tematowi minimum: wtedy to chipy (termin, poradnik)
       zjeżdżają do drugiej linii, a temat zostaje czytelny. */
    .conv-title[b-ayj7cev44r] { font-size: 1.2rem; min-width: 11rem; }
    .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; }

    /* Na telefonie okno klienta bierze cały ekran: kafelek z marginesem zostawiał treści ~70 % wysokości
       i to ona musiała się mieścić w tym, co zostało po nagłówku. */
    .cust-modal[b-ayj7cev44r] {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .cust-modal-head[b-ayj7cev44r] { padding: 0.9rem 1rem 0.8rem; }
    .cust-modal-name[b-ayj7cev44r] { font-size: 1.15rem; }
}

@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; }
}

/* ── Cele dotykowe w czytniku rozmowy ─────────────────────────────────────────
   Przejazd 18.08.2026: strzalka powrotu 28×28, pinezka przy wiadomosci 22×22,
   zakladki kompozytora („Odpowiedz" / „Notka wewn.") 83×27 — wszystko ponizej progu,
   w ktory da sie trafic palcem.

   ⚠ REALNY ROZMIAR, NIE WARSTWA `::after`. Sonda zalicza cel, gdy ma ≥32×32 px albo gdy
   cztery punkty szesnascie pikseli od srodka trafiaja w niego. Druga droga dziala tylko
   dla tego, co stoi w widocznym kadrze — pinezki wiadomosci przewinietych poza kadr
   przepadalyby mimo warstwy. Poza tym pinezka siedzi w naglowku wiadomosci obok autora
   i czasu: warstwa 44 px zachodzilaby na sasiadow zamiast rozsuwac.

   ⚠ Wylacznie `(pointer: coarse)` — na komputerze gestosc czytnika zostaje bez zmian. */
@media (pointer: coarse) {
    .conv-back[b-ayj7cev44r] { width: 40px; height: 40px; }

    /* ⚠ `flex: none` NIE jest ozdoba. Pinezka stoi w `.msg-head`, czyli w rzedzie zgietym,
       a domyslne `flex-shrink: 1` sciska ja z powrotem — pomiar pokazal 30×40 px zamiast
       40×40 mimo ustawionej szerokosci. Cel byl dalej za waski i sonda dalej go zglaszala. */
    .msg-pin[b-ayj7cev44r] { width: 40px; height: 40px; flex: none; }

    .c-tab[b-ayj7cev44r] {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 40px; min-width: 44px;
        padding: 0 0.85rem;
    }
}

/* ─── Podpowiedź „to wygląda na powtórkę" ────────────────────────────────────
   Dyskretna, jednolinijkowa (na telefonie zawija się na dwie). Ma być widoczna,
   ale nie ma udawać alarmu: to podpowiedź, a nie awaria. */
.dup-hint[b-ayj7cev44r] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--info, #3b7dd8);
    border-radius: 8px;
    background: color-mix(in srgb, var(--info, #3b7dd8) 6%, transparent);
    font-size: 12.5px;
    line-height: 1.45;
    flex-wrap: wrap;
}

.dup-hint-icon[b-ayj7cev44r] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--info, #3b7dd8);
}

/* min-width: 0 — bez tego długi temat rozpycha pasek zamiast się zawinąć. */
.dup-hint-text[b-ayj7cev44r] {
    flex: 1 1 220px;
    min-width: 0;
    color: var(--text-soft);
}

.dup-hint-link[b-ayj7cev44r] {
    font-weight: 600;
    white-space: nowrap;
}

.dup-hint-why[b-ayj7cev44r] {
    display: block;
    color: var(--text-soft);
    font-size: 11.5px;
}

.dup-hint-actions[b-ayj7cev44r] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

.dup-hint-dismiss[b-ayj7cev44r] {
    color: var(--text-faint);
}

/* Pasek zapisanego szkicu nad polem pisania. Ton stonowany — to potwierdzenie, nie ostrzeżenie. */
.conv-szkic-pasek[b-ayj7cev44r] {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    font-size: 11.5px;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--p1, #009244) 6%, transparent);
    border-bottom: 1px solid var(--line);
}
.conv-szkic-znak[b-ayj7cev44r] { color: var(--p1, #009244); }
.conv-szkic-odrzuc[b-ayj7cev44r] {
    margin-left: auto;
    background: none; border: none; padding: 0.15rem 0.35rem;
    font: inherit; color: var(--text-faint); cursor: pointer; text-decoration: underline;
}
.conv-szkic-odrzuc:hover[b-ayj7cev44r] { color: var(--danger, #c0392b); }
@media (pointer: coarse) { .conv-szkic-odrzuc[b-ayj7cev44r] { min-height: 40px; } }
/* /Components/Pages/Conversation/ConversationTasksPanel.razor.rz.scp.css */
/* Sekcja panelu bocznego — nagłówek i zwijanie trzyma Conversation.razor,
   tutaj jest sama zawartość (bez własnej ramki karty). */
.conv-tasks[b-jr1hovzphb] {
    padding: 0;
}

.conv-tasks-head[b-jr1hovzphb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem 0.35rem;
}

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

.conv-tasks-actions[b-jr1hovzphb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.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-soft);
    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(--line-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-soft);
    flex: 0 0 auto;
}
/* /Components/Pages/Conversation/DodajDoZadania.razor.rz.scp.css */
/* Okno „Dodaj do istniejącego zadania" — wyszukiwarka zadań przy rozmowie. Wygląd spójny
   z oknem zgłoszenia z zaznaczenia (MenuZaznaczenia.razor.css): ten sam lede, ten sam cytat fragmentu. */

.ddz-lede[b-wzw2dmxspz] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-soft);
    margin: 0 0 0.85rem;
}

.ddz-ok[b-wzw2dmxspz] {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 0.9rem;
}

.ddz-fragment[b-wzw2dmxspz] {
    border-left: 3px solid var(--global-palette1, #009244);
    background: var(--cream-2);
    border-radius: 0 6px 6px 0;
    padding: 0.6rem 0.75rem;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 160px;
    overflow-y: auto;
    margin-bottom: 0.85rem;
}

.ddz-wyniki[b-wzw2dmxspz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.5rem;
    min-height: 2.2rem;
}

.ddz-hint[b-wzw2dmxspz] {
    font-size: 12px;
    color: var(--text-faint);
    padding: 0.4rem 0.2rem;
}

.ddz-wynik[b-wzw2dmxspz] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.ddz-wynik:hover[b-wzw2dmxspz],
.ddz-wynik:focus-visible[b-wzw2dmxspz] {
    background: var(--cream-2);
    border-color: var(--line);
    outline: none;
}

.ddz-wynik:disabled[b-wzw2dmxspz] {
    opacity: 0.6;
    cursor: wait;
}

.ddz-kropka[b-wzw2dmxspz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ddz-tytul[b-wzw2dmxspz] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.ddz-meta[b-wzw2dmxspz] {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--text-soft);
}

.ddz-blad[b-wzw2dmxspz] {
    margin: 0.75rem 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--danger);
    background: var(--danger-bg);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
}
/* /Components/Pages/Conversation/MenuZaznaczenia.razor.rz.scp.css */
/* Menu kontekstowe nad zaznaczonym tekstem. Pozycja przychodzi atrybutem style z komponentu
   (jest wyliczana z rozmiaru okna), tutaj zostaje sam wygląd. */

/* ⚠ Element w warstwie nad stroną dostaje od przeglądarki własny zestaw stylów:
   `inset: 0`, `margin: auto`, `width/height: fit-content`, `border: solid`, `padding: .25em`
   i `overflow: auto`. Trzeba je zdjąć, bo pozycję wyliczamy sami — inaczej menu ląduje na środku
   okna zamiast przy zaznaczeniu. Zamknięty popover ma od przeglądarki `display: none` i tak
   zostaje: menu istnieje w drzewie tylko wtedy, gdy ma być widoczne. */
.menu-zaznaczenia[b-sd6k6lqf9c] {
    inset: auto;
    margin: 0;
    overflow: visible;
}

.menu-zaznaczenia[b-sd6k6lqf9c] {
    z-index: 3000;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.18));
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-zaznaczenia .pozycja[b-sd6k6lqf9c] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    /* min-width: 0 — inaczej długa etykieta rozpycha pozycję ponad szerokość menu. */
    min-width: 0;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.menu-zaznaczenia .pozycja span[b-sd6k6lqf9c] {
    flex: 1;
    min-width: 0;
}

.menu-zaznaczenia .pozycja svg[b-sd6k6lqf9c] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-soft);
}

.menu-zaznaczenia .pozycja:hover[b-sd6k6lqf9c] {
    background: var(--cream-2);
}

/* Stan skupienia MUSI być widoczny — menu da się obsłużyć strzałkami, a bez ramki nie widać,
   na czym się stoi. Domyślna obwódka przeglądarki znika na ciemnym tle, więc rysujemy własną. */
.menu-zaznaczenia .pozycja:focus[b-sd6k6lqf9c],
.menu-zaznaczenia .pozycja:focus-visible[b-sd6k6lqf9c] {
    background: var(--cream-2);
    outline: 2px solid var(--global-palette1, #009244);
    outline-offset: -2px;
}

/* ── Okno zakładania zgłoszenia ─────────────────────────────────────────── */

.menu-zaznaczenia-lede[b-sd6k6lqf9c] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-soft);
    margin: 0 0 0.85rem;
}

.menu-zaznaczenia-ok[b-sd6k6lqf9c] {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 0.9rem;
}

.menu-zaznaczenia-fragment[b-sd6k6lqf9c] {
    border-left: 3px solid var(--global-palette1, #009244);
    background: var(--cream-2);
    border-radius: 0 6px 6px 0;
    padding: 0.6rem 0.75rem;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.menu-zaznaczenia-etykieta[b-sd6k6lqf9c] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.menu-zaznaczenia-etykieta span[b-sd6k6lqf9c] {
    font-weight: 400;
    color: var(--text-faint);
}

.menu-zaznaczenia-blad[b-sd6k6lqf9c] {
    margin: 0.75rem 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--danger);
    background: var(--danger-bg);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
}
/* /Components/Pages/Conversation/PowiazaniaZgloszenia.razor.rz.scp.css */
/* Powiązania zgłoszeń wewnątrz wątku: „powstało z" i „powstały z tego". Obie sekcje są cienkie
   celowo — to kontekst przy rozmowie, a nie druga rozmowa. */

.powiazanie-zrodlo[b-wiksmoaogd],
.powiazanie-lista[b-wiksmoaogd] {
    border: 1px solid var(--line);
    border-left: 3px solid var(--global-palette1, #009244);
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
    background: var(--cream-2);
    padding: 0.65rem 0.85rem;
    margin: 0 0 0.9rem;
}

.powiazanie-naglowek[b-wiksmoaogd] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: 0.4rem;
}

.powiazanie-naglowek svg[b-wiksmoaogd] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.powiazanie-tresc[b-wiksmoaogd] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    /* min-width: 0 — bez tego długi temat rozpycha wiersz i wątek przewija się w bok. */
    min-width: 0;
}

.powiazanie-tresc a[b-wiksmoaogd],
.powiazanie-lista li a[b-wiksmoaogd] {
    /* flex: 1 — inaczej odnośnik kurczy się do najdłuższego wyrazu i tekst łamie się po literze. */
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.powiazanie-tresc a:hover[b-wiksmoaogd],
.powiazanie-lista li a:hover[b-wiksmoaogd] {
    color: var(--global-palette1, #009244);
    text-decoration: underline;
}

.powiazanie-kto[b-wiksmoaogd] {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}

.powiazanie-fragment[b-wiksmoaogd] {
    display: block;
    margin-top: 0.3rem;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-soft);
    font-style: italic;
    overflow-wrap: anywhere;
}

.powiazanie-lista ul[b-wiksmoaogd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.powiazanie-lista li[b-wiksmoaogd] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.powiazanie-lista li + li[b-wiksmoaogd] {
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
}

@media (max-width: 768px) {
    .powiazanie-kto[b-wiksmoaogd] {
        flex-basis: 100%;
    }
}
/* /Components/Pages/Customers/CustomerDetail.razor.rz.scp.css */
/* ─── Aktywność klienta (mini-audit) ──────────────────────────────────
   ⚠ Style listy żyły wyłącznie w Conversation.razor.css — a CSS izolowany działa TYLKO w swoim
   komponencie. Profil klienta dostawał gołą listę HTML: kropki wypunktowania obok kolorowych
   kropek, data pod spodem w osobnym wierszu (przejazd 25.09.2026, zrzut konw-11-profil-klienta).
   Ten sam wygląd co w panelu zgłoszenia. */
.mini-audit[b-ckrl1xz57a] {
    list-style: none;
    margin: 0;
    padding: 0 0.25rem 0 0;
}
.modal-body .mini-audit[b-ckrl1xz57a] { max-height: none; }
.mini-audit li[b-ckrl1xz57a] {
    display: flex;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--line);
}
.mini-audit li:last-child[b-ckrl1xz57a] { border-bottom: none; }
.mini-audit .audit-dot[b-ckrl1xz57a] {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex: none;
    background: var(--line-faint);
}
.mini-audit .audit-dot.tone-ok[b-ckrl1xz57a] { background: var(--p1); }
.mini-audit .audit-dot.tone-warn[b-ckrl1xz57a] { background: var(--warn, #c98a00); }
.mini-audit .audit-dot.tone-danger[b-ckrl1xz57a] { background: var(--danger); }
.mini-audit .audit-dot.tone-info[b-ckrl1xz57a] { background: var(--info, #2a8ec9); }
.mini-audit-body[b-ckrl1xz57a] { flex: 1; min-width: 0; }
.mini-audit-title[b-ckrl1xz57a] {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}
.mini-audit-time[b-ckrl1xz57a] {
    font-size: 10.5px;
    color: var(--text-soft);
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════════════════
   PULPIT OBSŁUGI — trzy bloki, siedem miar (29.08.2026)

   ⚠ Rodzina .alert-* (.alert-banner, .alert-bar, .alert-icon, .alert-content, .alert-text,
     .alert-actions) PRZENIESIONA STĄD DO app.css. Używa jej szesnaście innych ekranów,
     a styl leżał w arkuszu ZAKRESOWYM pulpitu — czyli nie działał nigdzie poza pulpitem.
     Te szesnaście ekranów rysowało „baner" jako goły tekst i nikt tego nie zgłosił, bo
     przeglądarka nieznaną klasę po prostu pomija. Sam pulpit nie ma już banerów wcale.
     Najbardziej bolało to przy „Sprawdź połączenie" na ekranie rozmowy, przy edycji skrzynki
     i przy jej podłączaniu: odpowiedź na kliknięcie renderowała się jako goły szary tekst,
     bez ramki i bez kolorowego paska z boku — czyli wyglądała jak przypadkowe zdanie wsunięte
     w formularz, a nie jak werdykt. ⚠ NIE PRZENOSIĆ TYCH KLAS Z POWROTEM TUTAJ.

   ⚠ Klasy poniżej są UŻYWANE WYŁĄCZNIE PRZEZ TEN EKRAN i dlatego wolno im być zakresowe.
     Wygląd kafelka raportów (.kpi, .kpi-value…) mieszka w app.css i tam zostaje.
   ══════════════════════════════════════════════════════════════════════════════════════════ */


/* ── Blok ────────────────────────────────────────────────────────────────────────────────
   Trzy bloki z nagłówkami zamiast jednego rzędu siedmiu kafelków. Prawo Hicka daje logarytm
   tylko wtedy, gdy zbiór da się dzielić — osiem niepogrupowanych kafelków czyta się gorzej
   niż dziesięć pogrupowanych w trzy bloki. */
.blok[b-gzweo6u5xm] { margin-bottom: 1.75rem; }

.blok-head[b-gzweo6u5xm] {
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    /* Kreska pod nagłówkiem NIESIE STAN BLOKU, a nie ozdobę: czerwona, gdy w środku jest
       alarm; pomarańczowa, gdy tylko ostrzeżenie; szara, gdy nic. Kolor jest tu wskazówką
       wtórną — treść bloku i tak stoi słowami w kafelkach (WCAG 2.1 SC 1.4.1). */
    border-bottom: 2px solid var(--line);
}
.blok-pali .blok-head[b-gzweo6u5xm] { border-bottom-color: var(--danger); }
.blok-uwaga-head .blok-head[b-gzweo6u5xm] { border-bottom-color: var(--warn); }

.blok-tytul[b-gzweo6u5xm] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.4rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}

.blok-lede[b-gzweo6u5xm] {
    margin: 0.25rem 0 0;
    font-size: 12.5px;
    /* --text-soft, nie --text-faint: ten tekst niesie treść, więc ma mieć kontrast 4,5:1. */
    color: var(--text-soft);
}

/* ── Kafelki ──────────────────────────────────────────────────────────────────────────────
   Zawijany rząd, nie sztywna siatka. Kafelek z zerem w bloku „Pali się" nie jest rysowany
   wcale, więc liczba kafelków bywa różna — a pojedyncza pilna rzecz ma wtedy zająć całą
   szerokość i nie dać się przeoczyć. */
.kafle[b-gzweo6u5xm] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.kafel[b-gzweo6u5xm] {
    flex: 1 1 250px;
    /* ⚠ Bez min-width:0 element flex nie schodzi poniżej najdłuższego słowa i rozpycha rząd. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem 1.1rem 0.9rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

/* KAŻDY kafelek jest odnośnikiem do przefiltrowanej listy — liczba, w którą nie da się
   kliknąć, to tapeta. Podnoszenie tylko dla tych, które naprawdę gdzieś prowadzą. */
a.kafel:hover[b-gzweo6u5xm] { transform: translateY(-2px); box-shadow: var(--shadow-md); }
a.kafel:focus-visible[b-gzweo6u5xm] { outline: 2px solid var(--p1); outline-offset: 2px; }
a.kafel:hover .kafel-akcja[b-gzweo6u5xm] { text-decoration: underline; }

.kafel-etykieta[b-gzweo6u5xm] {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 500;
    color: var(--text-soft);
}

.kafel-ikona[b-gzweo6u5xm] {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kafel-liczba[b-gzweo6u5xm] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
}

/* Miara czasu i zdania w miejscu liczby („2 dni", „wszystko działa") — ten sam krój,
   mniejszy stopień, żeby nie łamały się w kafelku. */
.kafel-liczba-czas[b-gzweo6u5xm] {
    font-size: 1.75rem;
    line-height: 1.15;
}

.kafel-podpis[b-gzweo6u5xm] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kafel-linia[b-gzweo6u5xm] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-soft);
}

/* Zdanie, które musi przejść przez oko: „w tym 3 bez opiekuna — nikt o nich nie wie". */
.kafel-linia-mocna[b-gzweo6u5xm] {
    color: var(--text);
    font-weight: 500;
}

/* Czasownik na końcu kafelka — mówi, co się stanie po kliknięciu, a nie dokąd prowadzi. */
.kafel-akcja[b-gzweo6u5xm] {
    margin-top: auto;
    padding-top: 0.4rem;
    font-size: 12px;
    font-weight: 500;
    color: var(--p1);
}

/* ── CZERWONY ─────────────────────────────────────────────────────────────────────────────
   Dokładnie dwie rzeczy w całej aplikacji: sprawy po terminie i konto, które nie pobiera
   wiadomości. Test Google SRE: „czy kiedykolwiek zignoruję ten alarm, wiedząc, że nic złego
   się nie dzieje?". Jeśli tak — kolor jest zły.
   Kontrast: --danger na --danger-bg to 4,51:1 w dzień i 4,88:1 w nocy — obie ponad progiem
   AA dla tekstu. Liczba wolno więc jest czerwona, bo nadal jest czytelna. */
.kafel-alarm[b-gzweo6u5xm] {
    background: var(--danger-bg);
    border-color: var(--danger);
    border-left-color: var(--danger);
}
.kafel-alarm .kafel-etykieta[b-gzweo6u5xm] { color: var(--danger); }
.kafel-alarm .kafel-liczba[b-gzweo6u5xm] { color: var(--danger); }
.kafel-alarm .kafel-linia[b-gzweo6u5xm] { color: var(--text); }
.kafel-alarm .kafel-linia-mocna[b-gzweo6u5xm] { font-weight: 600; }
.kafel-alarm .kafel-akcja[b-gzweo6u5xm] { color: var(--danger); }

/* ── POMARAŃCZOWY ─────────────────────────────────────────────────────────────────────────
   ⚠ --warn NIE JEST tu kolorem tekstu i to nie jest przeoczenie: #c98a14 na białym daje
     2,95:1, a na własnym tle 2,64:1 — obie wartości poniżej progu AA. Pomarańcz niesie więc
     pasek, ikonę i tło (elementy nietekstowe), a treść zostaje w --text i --text-soft,
     które mają 5,2:1 i więcej. Kafelek jest przez to wyraźnie słabszy od czerwonego —
     i dokładnie o to chodzi w hierarchii. */
.kafel-uwaga[b-gzweo6u5xm] {
    background: var(--warn-bg);
    border-color: var(--line);
    border-left-color: var(--warn);
}
.kafel-uwaga .kafel-ikona[b-gzweo6u5xm] { color: var(--warn); }
.kafel-uwaga .kafel-linia[b-gzweo6u5xm] { color: var(--text-soft); }
.kafel-uwaga .kafel-akcja[b-gzweo6u5xm] { color: var(--text); }

/* ── SPOKÓJ ───────────────────────────────────────────────────────────────────────────────
   Nie „0", tylko zdanie. Rząd zer to porażka projektowa: wygląda jak zepsuty licznik,
   a nie jak dobra wiadomość. */
.kafel-cichy[b-gzweo6u5xm] {
    border-left-color: var(--ok);
    cursor: default;
}
.kafel-cichy .kafel-ikona[b-gzweo6u5xm] { color: var(--ok); }
.kafel-cichy .kafel-liczba[b-gzweo6u5xm] {
    font-size: 1.4rem;
    color: var(--text-soft);
}

/* Kafelek, który świadomie nie prowadzi nigdzie, bo ekran docelowy wymaga uprawnienia,
   którego ta osoba nie ma. Nazwany, żeby dało się go odróżnić od przeoczenia — przyrząd
   w testach przegląda pulpit i szuka kafelków bez odnośnika. */
.kafel-bez-linku[b-gzweo6u5xm] { cursor: default; }

.kafel-szeroki[b-gzweo6u5xm] { flex-basis: 100%; }

/* ── Blok „Pali się", którego nie ma ──────────────────────────────────────────────────────
   Najlepsi nie wypełniają pustki komunikatem — usuwają element, który nie ma nic do
   powiedzenia. Cały blok znika i zostawia jedno zdanie plus najbliższy termin, żeby
   „spokojnie" nie było mylone z „nie policzyliśmy". */
.blok-spokoj[b-gzweo6u5xm] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--ok);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.spokoj-znak[b-gzweo6u5xm] {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ok-bg);
    color: var(--ok);
}
.spokoj-znak svg[b-gzweo6u5xm] {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spokoj-glowna[b-gzweo6u5xm] {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.15;
    color: var(--text);
}
.spokoj-drugorzedna[b-gzweo6u5xm] {
    margin: 0.15rem 0 0;
    font-size: 12.5px;
    color: var(--text-soft);
}

/* ── Pierwsze kroki ───────────────────────────────────────────────────────────────────────
   Świeża firma nie potrzebuje zer, tylko listy rzeczy do zrobienia z odnośnikiem prosto
   tam, gdzie się je robi. */
.pierwsze-kroki[b-gzweo6u5xm] {
    padding: 1.15rem 1.25rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--p1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.pierwsze-kroki-glowna[b-gzweo6u5xm] {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.15;
    color: var(--text);
}
.pierwsze-kroki-lede[b-gzweo6u5xm] {
    margin: 0.35rem 0 0.9rem;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-soft);
    max-width: 62ch;
}
.pierwsze-kroki-akcje[b-gzweo6u5xm] {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.pulpit-stopka-akcji[b-gzweo6u5xm] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

/* Dashboard grid — dwa wykresy aktywności obok siebie, równej wagi.
   ⚠ minmax(0, 1fr), nie 1fr: element siatki ma domyślnie min-width:auto i nie schodzi
     poniżej swojej zawartości, więc szeroki wykres rozpycha kolumnę. */
.dash-grid[b-gzweo6u5xm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

/* Lista priorytetow (.prio-*) oraz .greet-row przeniesione do app.css 02.09.2026 —
   uzywa ich takze raport SLA i dziewiec ekranow wsparcia, a styl zakresowy tam nie siega. */

/* ── Telefon ──────────────────────────────────────────────────────────────────────────────
   Przy 390 px kafelek dwukolumnowy ma niecałe 170 px i podpisy („mniej niż 3 dni robocze")
   łamią się na cztery wiersze. Jedna kolumna na całą szerokość czyta się lepiej, a blok
   „Pali się" ma i tak najwyżej trzy kafelki. */
@media (max-width: 1100px) {
    .dash-grid[b-gzweo6u5xm] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .kafle[b-gzweo6u5xm] { gap: 0.7rem; }
    .kafel[b-gzweo6u5xm] { flex-basis: 100%; }
    .kafel-liczba[b-gzweo6u5xm] { font-size: 2.1rem; }
    .kafel-liczba-czas[b-gzweo6u5xm] { font-size: 1.5rem; }
    .blok-tytul[b-gzweo6u5xm] { font-size: 1.25rem; }
    .blok-spokoj[b-gzweo6u5xm] { padding: 0.85rem 1rem; }
    .spokoj-glowna[b-gzweo6u5xm] { font-size: 1.15rem; }
    .pierwsze-kroki-akcje .btn[b-gzweo6u5xm] { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .kafel[b-gzweo6u5xm] { transition: none; }
    a.kafel:hover[b-gzweo6u5xm] { transform: none; }
}

/* „Dokończ pierwsze ustawienia” (25.09.2026) — karta nad pulpitem, dopóki kreator nie jest zamknięty. */
.wdrozenie-karta[b-gzweo6u5xm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    min-width: 0;
}

.wdrozenie-tresc[b-gzweo6u5xm] {
    flex: 1 1 320px;
    min-width: 0;
}

.wdrozenie-tytul[b-gzweo6u5xm] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.2rem;
}

.wdrozenie-lede[b-gzweo6u5xm] {
    color: var(--text-soft);
    font-size: 0.875rem;
    margin: 0 0 0.6rem;
}

.wdrozenie-pasek[b-gzweo6u5xm] {
    height: 6px;
    max-width: 360px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.wdrozenie-pasek span[b-gzweo6u5xm] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--grad-brand);
}

/* „Najpierw pokaż mi, gdzie co jest” — oprowadzenie po aplikacji, zanim klient skończy kreator. */
.wdrozenie-oprowadzenie[b-gzweo6u5xm] {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--global-palette1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wdrozenie-oprowadzenie:hover[b-gzweo6u5xm] {
    color: var(--text);
}

.wdrozenie-akcje[b-gzweo6u5xm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wdrozenie-akcje form[b-gzweo6u5xm] {
    margin: 0;
}

@media (max-width: 768px) {
    .wdrozenie-akcje[b-gzweo6u5xm] {
        width: 100%;
    }

    .wdrozenie-akcje > .btn[b-gzweo6u5xm],
    .wdrozenie-akcje form[b-gzweo6u5xm] {
        flex: 1 1 auto;
    }

    .wdrozenie-akcje .btn[b-gzweo6u5xm] {
        width: 100%;
        justify-content: center;
    }
}
/* /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;

    /* Wysokość wizytówki — potrzebna szufladzie skrzynek na telefonie (patrz koniec pliku).
       Trzymamy ją w zmiennej, żeby dwa miejsca nie rozjechały się przy pierwszej zmianie
       odstępu: pasek jest jedyną rzeczą, która przesuwa nagłówek listy w dół. */
    --wizytowka-h: 36px;
}

/* ── Wizytówka ekranu ──────────────────────────────────────────────────────────────────────
   Jedyne miejsce widoczne w KAŻDYM stanie poczty i na KAŻDEJ szerokości — dlatego stoi tu
   jedyny `h1` tego ekranu. Uzasadnienie miejsca: komentarz nad znacznikiem w Email.razor. */
/* „?" stoi TUŻ przy nazwie, nie na drugim końcu paska. Przy `space-between` odjeżdżał o całą
   szerokość okna od nagłówka, którego dotyczy — czytał się wtedy jak pomoc do paska górnego,
   a nie do poczty. Tak samo jak na /vault czy /reports/sla, gdzie stoi wewnątrz `h1`. */
.email-nameplate[b-htpzkw8q8z] {
    flex: none;
    height: var(--wizytowka-h);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.email-nameplate h1[b-htpzkw8q8z] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
    min-width: 0;
}

/* Stan przejściowy i stan „nie ma czego pokazać" — wypełniają resztę wysokości pod wizytówką. */
.email-state[b-htpzkw8q8z] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-faint);
}

/* ── Poczta bez ani jednej skrzynki ────────────────────────────────────────────────────────
   Zamiast pustego railu z napisem „brak skrzynek" (obok pełnej listy wątków z Allegro
   w Zgłoszeniach — sprzeczność, którą zgłosił użytkownik) pokazujemy jedną kartę: co widać
   w tym miejscu, gdzie są pozostałe rozmowy i co można zrobić dalej. */
.email-none[b-htpzkw8q8z] {
    padding: 1.5rem;
}

.none-card[b-htpzkw8q8z] {
    max-width: 520px;
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.8rem 1.6rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}

.none-icon[b-htpzkw8q8z] {
    width: 46px;
    height: 46px;
    stroke: var(--line-faint);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.55;
    margin-bottom: 0.9rem;
}

/* `h2`, nie `h1`: nazwą ekranu jest „Poczta" z wizytówki, a to jest tytuł STANU, w którym
   ekran się znalazł. `margin: 0` zeruje odstęp, który globalna reguła dokłada nagłówkom —
   odstęp do treści daje `.none-text`. */
.none-title[b-htpzkw8q8z] {
    font-family: 'Instrument Serif', serif;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--text);
    margin: 0;
}

.none-text[b-htpzkw8q8z] {
    margin-top: 0.6rem;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-soft);
}

.none-actions[b-htpzkw8q8z] {
    margin-top: 1.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

@media (max-width: 520px) {
    .none-card[b-htpzkw8q8z] { padding: 1.5rem 1.1rem 1.2rem; }
    .none-title[b-htpzkw8q8z] { font-size: 1.25rem; }
    .none-actions .btn[b-htpzkw8q8z] { flex: 1 1 100%; }
}

.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;
}
/* Szyna nie ma już własnego nagłówka („Skrzynki" + „?") — obie te rzeczy przeniosły się do
   wizytówki ekranu, bo tamta jest widoczna także przy zwiniętej szynie. Odstęp od góry, który
   dawał tamten wiersz, bierze na siebie pierwsza grupa. */
.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-soft);
    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(--line-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-soft); }
.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-soft);
    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-soft); }
.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 color-mix(in srgb, var(--global-palette1) 10%, transparent); }

/* ── 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;

    /* ⚠ NA TELEFONIE OSTATNI PRZYCISK BYŁ NIEOSIĄGALNY (26.08.2026). Rząd jest elastyczny,
       ale nie miał ani zawijania, ani przewijania — przy 390 px „Odczytaj wszystkie" wychodził
       145 px poza kontener i nie dało się do niego dotrzeć ŻADNYM gestem. Nie chodziło więc
       o wygląd, tylko o funkcję, której na telefonie po prostu nie ma.
       Poziome przewijanie, a nie zawijanie: te elementy to jeden ciąg filtrów i akcji,
       a zawinięcie ich do drugiej linii spycha listę wątków niżej na każdym ekranie.
       Znalezione przeglądem ekranów, nie okiem. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.tl-head-bottom[b-htpzkw8q8z]::-webkit-scrollbar { display: none; }
/* Elastyczne dzieci domyślnie kurczą się do zera i tekst łamie się na literach — tu mają
   zachować swoją szerokość i wyjechać poza ekran, bo od tego jest przewijanie wyżej. */
.tl-head-bottom > *[b-htpzkw8q8z] { flex-shrink: 0; }
.tl-title[b-htpzkw8q8z] { font-weight: 600; font-size: 14px; }
.tl-title small[b-htpzkw8q8z] {
    color: var(--text-soft);
    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; }

/* Dwa przełączniki skrzynek: jeden dla kolumny (komputer), drugi dla szuflady (telefon).
   Widoczny jest zawsze DOKŁADNIE jeden — próg 820 px to ten sam próg, na którym kolumna
   skrzynek zamienia się w szufladę. Powód rozdziału: patrz komentarz w Email.razor. */
.rail-toggle-szuflada[b-htpzkw8q8z] { display: none; }

/* 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); }
/* Ta sama akcja jako ikona w górnym rzędzie — widoczna tylko do 820 px (reguła w bloku szuflady niżej). */
.tl-readall-ikona[b-htpzkw8q8z] {
    display: none;
    flex: none;
    width: 40px; height: 40px;   /* cel dotykowy 40 px — reguła domu (TelefonISpojnoscTests) */
    place-items: center;
    border: none; background: none; border-radius: var(--radius-sm);
    color: var(--p1); cursor: pointer;
}
.tl-readall-ikona:hover[b-htpzkw8q8z] { background: var(--ok-bg); }
.tl-readall-ikona svg[b-htpzkw8q8z] { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 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, ale WIDOCZNY bez najechania (W-14, 19.09.2026: element widoczny dopiero
   pod kursorem to dla nowego pracownika element, którego nie ma); najechanie / zaznaczenie = pełny. */
.ti-check[b-htpzkw8q8z] { display: inline-grid; place-items: center; opacity: 0.45; 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); }
/* ⚠ Samo POGRUBIENIE nie wystarcza (agent H: „nieprzeczytane nieodróżnialne") — na liście, gdzie
   połowa tematów jest krótka, różnica grubości ginie. Dokładamy tło i mocniejszą kropkę.
   Pasek po lewej zostaje zarezerwowany dla wiersza OTWARTEGO (.active::before): dwa różne stany
   nie mogą mówić tym samym znakiem, bo wtedy żaden nic nie znaczy. */
.thread-item.unread:not(.active):not(.picked)[b-htpzkw8q8z] { background: color-mix(in srgb, var(--p1) 6%, var(--paper, #fff)); }
.thread-item.unread .ti-date[b-htpzkw8q8z] { color: var(--text); font-weight: 600; }

/* Przycisk „oznacz jako (nie)przeczytane" na wierszu — widoczny zawsze, mocniejszy pod kursorem.
   ⚠ Widoczny ZAWSZE, bo na dotyku najechania nie ma, a menu kontekstowego tam nie otwieramy. */
.thread-mark[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.42;
    transition: opacity .12s, color .12s;
}
.thread-mark svg[b-htpzkw8q8z] { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.thread-mark:hover[b-htpzkw8q8z] { opacity: 1; color: var(--p1); }
.thread-mark:focus-visible[b-htpzkw8q8z] { outline: 2px solid var(--p1); outline-offset: 2px; border-radius: 4px; }
@media (pointer: coarse) { .thread-mark[b-htpzkw8q8z] { opacity: 1; min-width: 40px; min-height: 40px; } }
/* Gwiazdka „Oznaczone" — 20 px to pół opuszki, a stoi tuż przy dacie i przy przycisku stanu.
   Na dotyku wszystkie trzy cele w tym rzędzie mają mieć po 40 px, inaczej trafia się w sąsiada. */
@media (pointer: coarse) { .thread-star[b-htpzkw8q8z] { min-width: 40px; min-height: 40px; } }

/* Pusty stan etykiet — droga na miejscu, nie instrukcja. */
.mbox-empty-link[b-htpzkw8q8z] { display: block; margin-top: 0.25rem; color: var(--p1); font-weight: 600; text-decoration: none; }
.mbox-empty-link:hover[b-htpzkw8q8z] { text-decoration: underline; }

.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-soft); 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) ── */
/* ⚠ Etykieta wiersza jest teraz PRZYCISKIEM (filtruje). Przeglądarka dokłada przyciskowi własne
   tło, ramkę i krój — bez tego zerowania kafelek etykiety wyglądałby w poczcie inaczej niż wszędzie. */
button.lbl-chip[b-htpzkw8q8z] { border: none; background: none; font: inherit; cursor: pointer; }
.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-soft); 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-soft); }
.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;
        /* Od tej wysokości zaczyna się szuflada skrzynek. Zmierzone na 390 px: wiersz z
           przełącznikiem kończył się na 96,8 px, więc szuflada startuje tuż pod nim i nie
           ma jak przykryć przycisku, którym się ją zamyka.

           ⚠ Wizytówka ekranu (01.09.2026) przesunęła ten wiersz o SWOJĄ wysokość w dół —
             gdyby próg został na 100 px, szuflada wróciłaby nad przełącznik i dotknięcie
             miejsca, w którym widać jej zamknięcie, znowu uruchamiałoby pobieranie skrzynki.
             To jest dokładnie usterka naprawiona 29.08.2026, więc próg liczy się z paska. */
        --szuflada-od-gory: calc(100px + var(--wizytowka-h));
    }

    .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; }

    /* Na telefonie przełącznik szuflady zastępuje przełącznik kolumny. */
    .rail-toggle-kolumna[b-htpzkw8q8z] { display: none; }
    .rail-toggle-szuflada[b-htpzkw8q8z] { display: inline-grid; }

    /* „Odczytaj wszystkie” na telefonie: ikona w górnym rzędzie zamiast napisu przyklejonego do
       prawej krawędzi rzędu filtrów, gdzie przykrywał „Nieprzeczytane” (przegląd zrzutów 25.09.2026). */
    .tl-readall[b-htpzkw8q8z] { display: none; }
    .tl-readall-ikona[b-htpzkw8q8z] { display: inline-grid; }

    /* 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 telefonie
       kolumna i szuflada to dwa osobne stany, a `rail-collapsed` NIE może ukryć szuflady.

       ⚠ `top` NIE jest zerem, i to jest cała poprawka z 29.08.2026. Szuflada wysunięta od
       samej góry przykrywała nagłówek listy, a w nim przełącznik, którym się ją zamyka:
       zmierzone na 390 px, przełącznik stał w 11,6–50,0 px, a przycisk „Pobierz nowe teraz"
       ze szuflady w 8,5–303,9 px, więc `document.elementFromPoint(30, 78)` zwracał PRZYCISK
       POBIERANIA. Dotknięcie miejsca, w którym widać zamknięcie szuflady, uruchamiało
       pobieranie skrzynki. Szuflada zaczyna się teraz pod wierszem z przełącznikiem. */
    .mbox-rail[b-htpzkw8q8z],
    .email-shell.rail-collapsed .mbox-rail[b-htpzkw8q8z] {
        display: flex;
        position: fixed; top: var(--szuflada-od-gory); 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);
    }

    /* Druga, niezależna zapora na to samo: nawet gdyby wiersz nagłówka kiedyś urósł i szuflada
       weszła pod przełącznik, przełącznik zostaje NAD nią i nad przyciemnieniem (120 i 119).
       Tło nieprzezroczyste, bo przy otwartej szufladzie reszta ekranu jest przygaszona. */
    .email-shell.mobile-rail-open .rail-toggle-szuflada[b-htpzkw8q8z] {
        position: relative;
        z-index: 130;
        background: var(--paper);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
        color: var(--text);
    }
    .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; }

    /* ⚠ „ODCZYTAJ WSZYSTKIE" STAŁO POZA EKRANEM (20.09.2026, przegląd list na telefonie).
       Pasek filtrów przewija się w poziomie, a ten przycisk ma `margin-left: auto`, więc auto-margines
       odsuwał go na koniec TREŚCI, nie okna: zmierzone na 390 px — lewa krawędź na 505 px, czyli
       poza ekranem, i nie było jak go zobaczyć bez przesuwania paska w bok.
       `sticky` trzyma go przy prawej krawędzi okna, a cień oddziela od chipów, które pod nim jadą. */
    .tl-readall[b-htpzkw8q8z] {
        position: sticky;
        right: 0;
        z-index: 2;
        background: var(--paper);
        box-shadow: -10px 0 8px -6px rgba(0, 0, 0, 0.12);
    }

    .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;
    }
}

/* ── "Pobierz nowe teraz" ─────────────────────────────────────────────────────────────────
   Przycisk sprawdza skrzynke poza kolejnoscia. Komunikat pod nim niesie odpowiedz serwera:
   albo "sprawdzamy", albo powod odmowy razem z czasem, ile jeszcze czekac. */
/* 12 px od góry, bo to teraz PIERWSZY element szyny — nagłówek szyny zniknął (patrz wyżej). */
.pobierz-teraz[b-htpzkw8q8z] {
    padding: 12px 10px 4px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pobierz-teraz button[b-htpzkw8q8z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 0;
}

.pobierz-teraz button[disabled][b-htpzkw8q8z] {
    opacity: .65;
    cursor: default;
}

.pobierz-teraz-info[b-htpzkw8q8z] {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

/* Odmowa to nie awaria - wyroznienie ma byc czytelne, a nie alarmujace. */
.pobierz-teraz-info.odmowa[b-htpzkw8q8z] {
    color: var(--global-palette4, #a26a12);
}

@media (max-width: 768px) {
    .pobierz-teraz[b-htpzkw8q8z] { padding: 6px 8px 2px 8px; }
    .pobierz-teraz button[b-htpzkw8q8z] { padding: 9px 10px; font-size: 13px; }
}

/* Cele dotykowe na ekranie poczty — wskazane przyrzadem Q (21.09.2026, 390x844).
   Kazdy z rozmiarem, ktory mial przed poprawka. */
@media (pointer: coarse) {
    .compose-btn[b-htpzkw8q8z] { min-height: 40px; }        /* bylo 80x38 — "Napisz", glowna akcja ekranu */
    .tagfilter-btn[b-htpzkw8q8z] { min-height: 40px; }      /* bylo 82x38 — filtry etykiet */
    .rail-toggle[b-htpzkw8q8z] { min-width: 40px; min-height: 40px; }  /* bylo 38x38 — "Pokaz skrzynki" */
    .mbox-empty-link[b-htpzkw8q8z] { display: inline-flex; align-items: center; min-height: 40px; }  /* bylo 279x18 */
    .tl-readall[b-htpzkw8q8z] { min-height: 40px; }         /* bylo 114x38 — "Odczytaj wszystkie" */
    /* ⚠ ZOSTAJE 22 px: pole wyboru watku (`.ti-check input`) siedzi w etykiecie `.ti-check`,
       ktora ma 40x40 i to ONA jest celem palca. Przyrzad mierzy element, nie jego klikalnego
       rodzica — i dlatego wypisuje te 22 px jako "za male". To nuansa przyrzadu, nie ekranu. */
}
/* /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-soft); }

/* 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-soft); }
.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-soft); 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; }
/* Ostrzeżenie pod załącznikami: szkic ich nie zachowa (agent H, 19.09.2026). */
.compose-att-hint[b-arz1dtfgf7] { margin: 0.4rem 0 0; font-size: 11.5px; line-height: 1.45; color: var(--warn, #8a5b00); }
.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-soft); 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-soft); }
.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-soft); 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. */
/* `h1` w osobnym oknie, `h2` w panelu — patrz komentarz w EmailThreadReader.razor. Rozmiar
   i waga są tu wpisane WPROST, żeby zmiana znacznika nie zmieniła ani jednego piksela:
   globalna reguła dokłada nagłówkom `margin-bottom` i `font-weight: 500`. */
.rh-subject[b-g4ufztonjl] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.15;
    margin: 0;
    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-soft); }

/* ── 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-soft); }

.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-soft); 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(--line-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-soft); 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 color-mix(in srgb, var(--global-palette1) 18%, transparent); }
.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(--line-faint) transparent;
}
.reader-scroll[b-g4ufztonjl]::-webkit-scrollbar { width: 12px; }
.reader-scroll[b-g4ufztonjl]::-webkit-scrollbar-thumb { background: var(--line-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-soft); font-weight: 400; font-size: 11.5px; margin-left: 0.35rem; }
.mh-dir[b-g4ufztonjl] { font-size: 11px; color: var(--text-soft); margin-top: 1px; display: inline-flex; align-items: center; gap: 0.25rem; }
.mh-date[b-g4ufztonjl] { font-size: 11px; color: var(--text-soft); 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-soft); 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. */
/* ⚠ `::deep` jest tu OBOWIĄZKOWE. Treść wchodzi do .msg-body-html przez MarkupString, więc jej <img>
   NIGDY nie dostanie atrybutu zakresu (b-…) — poprzedni zapis `.msg-body-html img` kompilował się do
   `.msg-body-html img[b-…]` i nie łapał ani jednego obrazka z wiadomości. Reguła wyglądała na zrobioną
   i nie robiła nic (sprawdzone w wygenerowanym ABCare.Web.styles.css). `::deep` przenosi zakres na
   .msg-body-html, który JEST pisany w .razor, więc atrybut ma.

   Limit wysokości: rozmiar obrazka wybiera nadawca — zdjęcie 4000 px wysokości zajmuje kilka ekranów.
   Kadrujemy do 360 px, pełny rozmiar jest o jedno kliknięcie (abc-lightbox.js łapie kliknięcia w całym
   .reader-scroll). `!important` — inline `style` z treści wiadomości wygrałby ze zwykłą regułą;
   `object-fit` ratuje proporcje, gdy w treści podano jawną wysokość. */
.msg-body-html[b-g4ufztonjl]  img {
    max-width: 100% !important;
    max-height: 360px !important;
    height: auto;
    object-fit: contain;
    object-position: left center;
    cursor: zoom-in;
}
.msg-body-html[b-g4ufztonjl]  img.abc-inline-img { border-radius: var(--radius-sm); margin: 0.3rem 0; }

/* Plik się NIE zdekodował — zamiast ikony zepsutej grafiki schludna ramka o stałej wysokości.
   Klasę dopina abc-email-images.js na zdarzenie `error` (sam CSS tego stanu nie wykryje);
   zmieniamy wygląd elementu, a nie strukturę, bo treść MarkupString należy do Blazora. */
.msg-body-html[b-g4ufztonjl]  img.abc-img-broken {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 320px !important;
    height: 132px !important;
    max-height: 132px !important;
    background: var(--cream-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: default;
    font-size: 0;
}
.msg-body-html[b-g4ufztonjl]  img.abc-img-broken::after {
    content: "Nie udało się wyświetlić obrazka";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 0.75rem;
    text-align: center;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-faint);
}
.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).
   Białe tło jest ŚWIADOME: mail przychodzi z kolorami dobranymi przez nadawcę pod jasne tło, więc
   przemalowanie go na ciemne psuje czytelność treści, na którą nie mamy wpływu. */
.msg-frame[b-g4ufztonjl] {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 44px;
    background: #fff;
    color-scheme: light;
}

/* ── Ciemny motyw: KARTKA, NIE DZIURA (20.09.2026, właściciel: „edytor w dark mode lipa") ────────
   Zrzut z telefonu: biały prostokąt pełnej szerokości, bez ramki i bez zaokrągleń, wklejony w prawie
   czarny ekran — wyglądał jak wyrwa w interfejsie, a nie jak wiadomość. Treści maila nie wolno
   przemalować (patrz wyżej), więc zmieniamy OPRAWĘ: kartka ma widoczny brzeg, cień i jest lekko
   przygaszona, żeby nie świeciła. `brightness` dotyka też tekstu — i o to chodzi: czerń na bieli
   robi się ciemną szarością na kremie, czyli kontrast, jaki ma papier. */
/* ⚠ Te same dwa warunki, co w `app.css`: jawny wybór ciemnego motywu ORAZ ustawienie systemowe,
   gdy człowiek nie wybrał nic. Sam `[data-theme="dark"]` pomija domyślnych — a to oni widzą ciemny
   ekran najczęściej. */
[data-theme="dark"] .msg-frame[b-g4ufztonjl] {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    filter: brightness(0.9);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .msg-frame[b-g4ufztonjl] {
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
        filter: brightness(0.9);
    }
}

/* 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-soft); 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); }
/* Załącznik trwale usunięty (retencja lub limit miejsca) — nie jest odnośnikiem,
   bo nie ma dokąd prowadzić. Ma wyglądać na nieaktywny, ale nadal być czytelny. */
.att.att-gone[b-g4ufztonjl] { cursor: help; opacity: .62; border-style: dashed; text-decoration: line-through; }
.att.att-gone:hover[b-g4ufztonjl] { border-color: var(--line); opacity: .85; }
.att.att-gone svg[b-g4ufztonjl] { color: var(--text-faint); }
.att.att-gone .as[b-g4ufztonjl] { text-decoration: none; font-style: italic; }

/* ── #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 color-mix(in srgb, var(--global-palette1) 10%, transparent); }
.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-soft); }
.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-soft); }
/* 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-soft); }
.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); }
.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-soft); 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-soft); 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-soft); }
@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); }
.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; }

/* ── Cele dotykowe w pasku nad wątkiem ────────────────────────────────────────
   Zmierzone 18.08.2026 na tablecie i telefonie: „etykieta" 74×20, „tag" 49×20,
   „szczegóły" 80×20 px — wysokość jednego wiersza tekstu. Ekran wątku poczty był
   przez cały czas poza zasięgiem sondy (odnajdywała go dopiero po naprawie
   rozpoznawania adresu z parametrami), więc te trzy przyciski nie były mierzone ANI RAZU.

   ⚠ Realna wysokość, nie niewidzialna warstwa `::after`: nakładka bywa przycięta przez
   `overflow` rodzica i wtedy pomiar jej nie widzi — poprawka wygląda w kodzie na zrobioną,
   a rozmiar się nie zmienia. Ta sama lekcja, co przy `.ts-link` i `.rd-back`. */
@media (pointer: coarse) {
    .rh-label-btn[b-g4ufztonjl],
    .rh-tagadd-btn[b-g4ufztonjl],
    .rh-details-btn[b-g4ufztonjl] {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        min-width: 44px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   NISKIE OKNO — pole odpowiedzi ma być osiągalne ZAWSZE
   ══════════════════════════════════════════════════════════════════════════════════════════════
   Właściciel, 21.09.2026 ze zrzutem: „przy takiej w ogóle nie da się przewinąć ekranu do
   odpowiedzi. Musisz tu coś innego wymyślić".

   POMIAR PRZED (stanowisko, wydanie 40, szerokość 1440):

     okno 1000 → pole w oknie, na treść zostaje 547 px
     okno  800 → pole w oknie, na treść zostaje 347 px
     okno  744 → pole w oknie, na treść zostaje 291 px
     okno  680 → pole POZA oknem (dół na 708 px) i NIC SIĘ NIE PRZEWIJA
     okno  600 → to samo

   MECHANIZM, nie przeczucie. Czytnik jest kolumną elastyczną z `overflow: hidden`; lista
   wiadomości ma `min-height: 220px`, a pasek odpowiedzi `flex: none`. Kiedy okno zejdzie poniżej
   sumy „nagłówek + 220 + pasek", kolumna nie ma się z czego skurczyć — więc pasek wychodzi poza
   dolną krawędź, a `overflow: hidden` obcina go BEZ paska przewijania. Element jest w drzewie,
   jest widoczny dla testu obecności i jest całkowicie nieosiągalny dla człowieka.

   CO ROBIMY — trzy stopnie, od najłagodniejszego:
     1. poniżej 820 px oddajemy pion z rzeczy stałych (mniejsze odstępy, niższe pole pisania);
     2. poniżej 700 px lista wiadomości może się skurczyć mocniej — ma własny przewijak, więc
        nic z niej nie ginie, a pasek odpowiedzi zostaje w oknie;
     3. poniżej 560 px zdejmujemy `overflow: hidden` z całego czytnika i dajemy mu własny
        przewijak. To jest PODŁOGA: przy każdej wysokości okna da się dojechać do „Wyślij",
        choćby przewijaniem. Lepiej przewijać, niż nie dosięgnąć.

   ⚠ Czego tu NIE ma: chowania kolumny z listą wątków. Rozważałem to (właściciel dopuszczał:
   „może trzeba przy takiej szerokości czy wysokości chować już ekran"), ale lista wątków zabiera
   szerokość, a brakuje WYSOKOŚCI — schowanie jej nie oddałoby ani jednego piksela w pionie. */

@media (max-height: 820px) {
    .reader-scroll[b-g4ufztonjl] { min-height: 140px; padding: 0.5rem 0.9rem; }
    .reply-dock[b-g4ufztonjl] { padding: 0.5rem 1.1rem 0.6rem; }
    .reply-area[b-g4ufztonjl] { min-height: 72px; max-height: 22vh; }
}

@media (max-height: 700px) {
    .reader-scroll[b-g4ufztonjl] { min-height: 96px; padding: 0.4rem 0.9rem; }
    .reply-dock[b-g4ufztonjl] { padding: 0.4rem 1.1rem 0.5rem; }
    .reply-area[b-g4ufztonjl] { min-height: 56px; max-height: 20vh; }
}

@media (max-height: 560px) {
    /* PODŁOGA: czytnik przestaje być sztywną kolumną i dostaje własny przewijak. */
    .thread-reader[b-g4ufztonjl] { overflow-y: auto; }
    .reader-scroll[b-g4ufztonjl] { min-height: 0; flex: 0 0 auto; overflow-y: visible; }
    .reply-area[b-g4ufztonjl] { min-height: 48px; }
}
/* /Components/Pages/Inbox/Inbox.razor.rz.scp.css */
/* .inbox-head przeniesiony do app.css 02.09.2026 — uzywa go piec innych ekranow. */

/* 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. */

/* ⚠ Nagłówek NIE wychodzi poza swoją kolumnę (przegląd zrzutów 25.09.2026: „OPIEKUNWIAD.”). Kolumny
   opiekuna i liczby wiadomości miały 50/44 px, a „OPIEKUN” wielkimi literami z odstępami ma ~57 px —
   napis wjeżdżał w sąsiedni i czytało się jedno słowo. Kolumny poszerzone do 64/56 px, a gdyby kiedyś
   znów zabrakło miejsca, napis kończy się wielokropkiem zamiast sklejać z sąsiadem.
   Pilnuje NaglowekTabeliZgloszenNieSklejaKolumnTests. Nie dotyczy dwóch pierwszych komórek:
   pola „zaznacz wszystkie” (kolumna 12 px — obcięcie by je przycięło) i „Kanał” (kolumna 36 px na
   ikony — „KANAŁ” ma ~45 px i mieści się razem z odstępem przed „Klient”, a obcięte czytało się „KAN…”,
   przegląd ABHelp 26.09). */
.t-head > div:nth-child(n+3)[b-e6qt5fasb8] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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 64px 56px 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 64px 56px 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, color-mix(in srgb, var(--global-palette1) 2.5%, transparent) 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(--line-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;
    /* ⚠ Znacznik stanu NIE ŁAMIE SIĘ w środku. „Czeka na klienta" rozbite na dwie linijki
       rozpycha wiersz listy i przestaje wyglądać jak jeden znacznik — przegląd interfejsu
       25.08.2026 złapał to na telefonie (100 px treści w rodzicu 235 px).
       Pojemnik `.t-badges` ma `overflow: hidden`, więc gdy zabraknie miejsca, znacznik
       zostanie przycięty — a to jest lepsze niż rozjechany wiersz. */
    white-space: nowrap;
}
.status-badge-open[b-e6qt5fasb8] {
    background: color-mix(in srgb, var(--global-palette1) 12%, transparent);
    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 color-mix(in srgb, var(--global-palette1) 15%, transparent);
}

.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-soft);
    font-family: 'Geist Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dwie linie: oznaczenia u góry, temat pod spodem.
   Jedna linia oznaczała, że chipy (rodzaj + kanał + status + numer) mają pierwszeństwo przed
   tematem — a to temat mówi, czego sprawa dotyczy. Przy oknie 1500 px zostawało na niego
   kilkadziesiąt pikseli. Wysokość wiersza się nie zmienia: sąsiednia kolumna z klientem
   i tak jest dwuliniowa.
   min-width: 0 na elemencie siatki jest WARUNKIEM działania przycinania — bez tego kolumna
   rozpycha się do najdłuższego tematu zamiast go skracać. */
.t-snippet[b-e6qt5fasb8] {
    font-size: 13px;
    color: var(--text-soft);
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}

.t-snippet .t-badges[b-e6qt5fasb8] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    overflow: hidden;
}

/* ⚠ NUMER ZGŁOSZENIA NIGDY NIE ZNIKA PO CICHU (29.08.2026).
   Przy 390 px w wierszu stały cztery znaczniki, a numer szedł ostatni: pojemnik `.t-badges`
   ma `overflow: hidden` i `text-overflow: clip`, więc `#1233377` pokazywał się jako `#12333`
   — bez wielokropka, bez żadnego znaku, że czegoś brakuje. Zmierzone: 24 takie numery na
   jednym ekranie, jeden przycięty o 18 px. Człowiek czyta skróconą liczbę jako KOMPLETNY
   numer zgłoszenia i przepisuje go klientowi — to nie jest kosmetyka, tylko zła informacja.

   Rozwiązanie: kurczą się ZNACZNIKI (i mówią o tym wielokropkiem), a numer nie kurczy się
   nigdy. Numer ma dodatkowo własny wielokropek — gdyby kiedyś zabrakło miejsca nawet na
   niego, ma być widać, że jest ucięty. */
.t-snippet .t-badges > *:not(.ticket-num)[b-e6qt5fasb8] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ⚠ `text-overflow` NIE DZIAŁA na pojemniku flex, a `.kind-badge` i chip kanału są `inline-flex`
   (globalnie, bo gdzie indziej niosą ikonę). W wierszu listy mają sam napis, więc tutaj — i tylko
   tutaj — robimy z nich blok; wysokość mają stałą, więc `line-height` zastępuje wyśrodkowanie
   flexem. Bez tego skrócony znacznik urywał się w połowie litery, tak samo po cichu jak numer. */
.t-snippet .t-badges > .kind-badge[b-e6qt5fasb8],
.t-snippet .t-badges > .email-channel-chip[b-e6qt5fasb8] {
    display: block;
    line-height: 18px;
}

.t-snippet .t-text[b-e6qt5fasb8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    display: block;
}

/* ⚠ TEMAT NIE MOŻE ZJEŚĆ CAŁEJ ZAJAWKI (03.09.2026).
   Temat i zajawka dzielą JEDEN budżet szerokości z wielokropkiem na końcu — i przy długim
   temacie temat brał wszystko. Na zrzucie z szerokości 1280 px (czyli tej, na której ludzie
   naprawdę pracują) wiersz wyglądał tak:

     Pytanie o zamowienie ruch-1788390940-220400 — O…

   Zostawała JEDNA LITERA wiadomości. Na 1920 px ta sama kolumna pokazywała
   „— Odpisaliśmy: Notatka od autom…", więc przy przeglądaniu na dużym ekranie usterki
   nie widać wcale.

   Ograniczenie do 55% jest ŚWIADOMIE niezależne od szerokości ekranu: wiąże dopiero wtedy,
   gdy temat jest długi — czyli dokładnie wtedy, gdy zajawka i tak by przepadła. Przy krótkim
   temacie nic się nie zmienia, bo do 55% mu daleko. Dostrajanie jednostek `fr` pod jeden
   punkt łamania załatwiłoby 1280 px i zostawiło 1360 px. */
.t-snippet .t-text .subject[b-e6qt5fasb8] {
    display: inline-block;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.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-soft);
    margin-right: 0.4rem;
    padding: 1px 5px;
    background: var(--cream-2);
    border-radius: 4px;
    /* Nie kurczy się i nie znika — miejsce oddają sąsiednie znaczniki (patrz reguła wyżej). */
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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-soft);
    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; }

/* ⚠ 1440 px = zwykły laptop pracownika obsługi (przegląd zrzutów 16.09.2026, P-01; decyzja właściciela
   17.09). Przy 1440 kolumna TEMAT miała ~330 px, a cztery znaczniki jedną linią zjadały ją całą:
   „E-M…", „Pozost…", „CZEKAMY NA KLIE…", temat urwany, zajawka poza oknem (zmierzone: sześć zajawek
   poza oknem). Przy 1920 wszystko wchodziło, więc na monitorze programisty usterki nie było.
   Poniżej 1600 px znaczniki zawijają się do drugiej linii — tak jak na telefonie — a temat dostaje
   własną, całą linię; kolumny boczne oddają kilka pikseli tematowi. */
@media (max-width: 1600px) and (min-width: 1201px) {
    .t-head[b-e6qt5fasb8], .t-row[b-e6qt5fasb8] {
        grid-template-columns: 12px 36px 1.4fr 2.8fr 100px 0.8fr 64px 56px 84px;
        gap: 0.6rem;
    }
    .t-snippet .t-badges[b-e6qt5fasb8] { flex-wrap: wrap; row-gap: 0.2rem; }
    .t-snippet .t-badges > *:not(.ticket-num)[b-e6qt5fasb8] {
        flex: 0 0 auto;
        overflow: visible;
        text-overflow: clip;
    }
}

/* Pusta kolumna TAGI. Gdy żaden wiersz na stronie nie ma tagu, kolumna zajmowała pełne 1fr pustego
   pasa (a firma bez tagów to każda świeża firma). Ekran dodaje klasę `bez-tagow` i kolumna znika,
   a jej szerokość idzie do tematu. Tylko powyżej 1200 px — niżej kolumnę i tak chowa reguła obok. */
@media (min-width: 1201px) {
    .inbox-table.bez-tagow .t-head[b-e6qt5fasb8],
    .inbox-table.bez-tagow .t-row[b-e6qt5fasb8] { grid-template-columns: 12px 36px 1.6fr 3.2fr 110px 64px 56px 90px; }
    .inbox-table.bez-tagow .t-head > :nth-child(6)[b-e6qt5fasb8],
    .inbox-table.bez-tagow .t-row > :nth-child(6)[b-e6qt5fasb8] { display: none; }
}
@media (max-width: 1600px) and (min-width: 1201px) {
    .inbox-table.bez-tagow .t-head[b-e6qt5fasb8],
    .inbox-table.bez-tagow .t-row[b-e6qt5fasb8] { grid-template-columns: 12px 36px 1.4fr 3.6fr 100px 64px 56px 84px; }
}

@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; }

    /* ⚠ NA TELEFONIE ZNACZNIKI PRZESTAJĄ SIĘ KURCZYĆ (02.09.2026).
       Kurczenie się znaczników na rzecz tematu jest słuszne na szerokim ekranie — tam po
       skróceniu dalej widać, co znaczą. Na telefonie ta sama reguła robiła z trzech znaczników
       „E-M…", „Pozos…" i „OTWA…", czyli trzy plamki bez treści zajmujące pół wiersza. Skrót,
       którego nie da się rozwinąć w głowie, jest gorszy niż zawinięcie do drugiej linii —
       tu wiersz jest kartą, a nie komórką tabeli, więc miejsce w pionie jest tanie. */
    .t-snippet .t-badges[b-e6qt5fasb8] { flex-wrap: wrap; }
    .t-snippet .t-badges > *:not(.ticket-num)[b-e6qt5fasb8] {
        flex: 0 0 auto;
        overflow: visible;
        text-overflow: clip;
    }

    /* ⚠ NA TELEFONIE TEMAT I ZAJAWKA PRZESTAJĄ DZIELIĆ JEDNĄ LINIĘ (09.09.2026, przegląd UX poz. 8).
       Przy oknie 390 px karta pokazywała DWA ucięte teksty obok siebie — „Produkt przyszedł u…"
       i „Poproszę o wy…" — z których żaden nie był czytelny. Temat dostawał 55% linii (reguła
       z 03.09, słuszna na szerokim ekranie: tam po podziale widać oba), czyli około dziewiętnastu
       znaków. Skrzynka jest ekranem, na którym się SKANUJE: po ucięciu do 19 znaków wszystkie
       tematy zaczynające się tak samo („Prośba o…", „Pytanie o…", „Zwrot —…") wyglądają identycznie
       i lista przestaje do czegokolwiek służyć.
       Powód, dla którego wolno je rozdzielić akurat tutaj, stoi trzy reguły wyżej i jest ten sam:
       wiersz jest na telefonie KARTĄ, a nie komórką tabeli, więc miejsce w pionie jest tanie. */
    .t-snippet .t-text[b-e6qt5fasb8] { white-space: normal; }
    .t-snippet .t-text .subject[b-e6qt5fasb8] {
        display: block;
        max-width: none;
        margin-right: 0;
        white-space: nowrap;   /* temat dalej jedną linią — ale CAŁEJ szerokości karty */
    }
    .t-snippet .t-myslnik[b-e6qt5fasb8] { display: none; }
    .t-snippet .t-zajawka[b-e6qt5fasb8] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
/* /Components/Pages/Integrations/AddIntegration.razor.rz.scp.css */
/* Wybor rodzaju integracji.

   ⚠ TE REGULY MIESZKALY W BLOKU <style> WEWNATRZ STRONY, czyli GLOBALNIE (30.08.2026).
   Nazwa `.integ-grid` jest uzywana takze na liscie integracji, ktora ma wlasny arkusz
   zakresowy o tej samej nazwie klasy — jedna strona narzucala wiec uklad drugiej, i to
   tylko wtedy, gdy akurat byla otwarta wczesniej. Arkusz zakresowy zamyka sprawe: reguly
   dotycza wylacznie tej strony.

   ⚠ `auto-fit`, NIE `auto-fill`. Przy `auto-fill` przegladarka tworzy tyle sciezek, ile
   sie zmiesci (na 1440 px — cztery), a dwa istniejace kafelki zajmuja dwie pierwsze
   i zostaja waskie na 320 px, z pusta polowa ekranu obok. `auto-fit` zwija puste sciezki
   i oddaje ich miejsce kafelkom — czyli robi to, po co ta strona dostala cala szerokosc. */

.integ-grid[b-yb6a55kt9z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: 1.1rem;
    align-items: start;
}

.integ-tile[b-yb6a55kt9z] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.25rem 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}

.integ-tile.available:hover[b-yb6a55kt9z] { border-color: var(--p1); box-shadow: var(--shadow-md); }
.integ-tile.coming-soon[b-yb6a55kt9z] { opacity: 0.7; }

.integ-tile-head[b-yb6a55kt9z] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.integ-tile-title[b-yb6a55kt9z] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.integ-tile-title strong[b-yb6a55kt9z] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.1;
    font-weight: 400;
    color: var(--text);
}

.integ-tile-sub[b-yb6a55kt9z] {
    font-size: 11.5px;
    color: var(--text-soft);
}

.integ-tile-desc[b-yb6a55kt9z] {
    font-size: 12.5px;
    color: var(--text-soft);
    line-height: 1.5;
    margin-bottom: 0.85rem;
    max-width: 68ch;
}

/* Przyciski maja siedziec na dole kafelka, zeby dwa kafelki roznej dlugosci konczyly sie
   rowno — inaczej „Polacz" jednego stoi w polowie wysokosci drugiego i wyglada to na
   przypadek. */
.integ-tile-actions[b-yb6a55kt9z] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.sandbox-toggle[b-yb6a55kt9z] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 11.5px;
    color: var(--text-soft);
    cursor: pointer;
    margin-left: auto;
}

.sandbox-toggle input[b-yb6a55kt9z] { accent-color: var(--warn); }
.sandbox-toggle:hover[b-yb6a55kt9z] { color: var(--text-soft); }

.sandbox-warning[b-yb6a55kt9z] {
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 0.7rem;
}

.sw-icon[b-yb6a55kt9z] { font-size: 1.4rem; color: var(--warn); line-height: 1; }
.sw-body[b-yb6a55kt9z] { flex: 1; min-width: 0; }
.sw-body strong[b-yb6a55kt9z] { display: block; color: var(--warn); font-size: 12.5px; margin-bottom: 0.25rem; }
.sw-body p[b-yb6a55kt9z] { font-size: 11.5px; color: var(--text); line-height: 1.45; }
.sw-body a[b-yb6a55kt9z] { color: var(--warn); text-decoration: underline; }

.sync-from-row[b-yb6a55kt9z] {
    margin-top: 0.85rem;
    margin-bottom: 0.9rem;
    padding: 0.65rem 0.75rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.sync-from-etykieta[b-yb6a55kt9z] {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--text-faint);
}

.sync-from-pole[b-yb6a55kt9z] {
    padding: 0.4rem 0.6rem;
    font-size: 12.5px;
    max-width: 11rem;
}

.sync-from-uwaga[b-yb6a55kt9z] {
    display: block;
    margin-top: 0.25rem;
    font-size: 10.5px;
    color: var(--text-soft);
}

/* Ostrzezenie „zanim podlaczysz" — to samo zdanie, co na formularzu recznego podlaczenia.
   Musi stac takze tutaj, bo logowanie przez Gmail i Outlook ten formularz OMIJA. */
.integ-tile-zanim[b-yb6a55kt9z] {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text);
}

.integ-tile-zanim strong:first-child[b-yb6a55kt9z] { color: var(--danger); }

.integ-tile-stopka[b-yb6a55kt9z] {
    margin-top: 0.6rem;
    font-size: 11px;
    color: var(--text-soft);
    line-height: 1.5;
}

/* ── Naglowek strony ─────────────────────────────────────────────────────────────── */

.add-glowa[b-yb6a55kt9z] {
    margin-bottom: 1.5rem;
    max-width: 72ch;
}

.add-okruchy[b-yb6a55kt9z] {
    color: var(--text-faint);
    margin-bottom: 0.4rem;
}

.add-okruchy a[b-yb6a55kt9z] { color: var(--text-faint); text-decoration: none; }
.add-okruchy a:hover[b-yb6a55kt9z] { color: var(--text-soft); text-decoration: underline; }

.add-tytul[b-yb6a55kt9z] { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }

.add-lede[b-yb6a55kt9z] {
    font-size: 13.5px;
    margin-top: 0.5rem;
}

/* ── Drobiazgi kafelkow ──────────────────────────────────────────────────────────── */

.integ-ikona[b-yb6a55kt9z] {
    width: 38px;
    height: 38px;
    font-size: 16px;
    border-radius: 9px;
    flex: none;
}

/* Drugi akapit opisu jest ciagiem dalszym pierwszego, wiec stoi tuz pod nim. */
.integ-tile-desc-ciag[b-yb6a55kt9z] { margin-top: -0.35rem; }

.sw-linki[b-yb6a55kt9z] { margin-top: 0.4rem; font-size: 11.5px; }

.sw-akcje[b-yb6a55kt9z] {
    margin-top: 0.7rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: no-preference) {
    .sandbox-warning[b-yb6a55kt9z] { animation: msFadeIn 0.15s ease-out; }
}

@media (max-width: 768px) {
    .integ-tile-actions > .btn[b-yb6a55kt9z] { flex: 1 1 auto; justify-content: center; }
}
/* /Components/Pages/Integrations/CytatSerweraPocztowego.razor.rz.scp.css */
/* Cytat z serwera pocztowego — wyglada JAK CYTAT, bo nim jest.

   Styl ma robic jedna rzecz: pokazac, ze to nie jest zdanie aplikacji. Stad kreska z lewej,
   inne tlo niz karta i kursywa na samej tresci. Gdyby to bylo sformatowane jak reszta ekranu,
   klient czytalby cudze zdanie jako nasze — a tego zdania nie mamy jak sprawdzic.

   ⚠ Styl zakresowy nalezy do TEGO komponentu. Klasy sa uzywane wylacznie tutaj, wiec nie ma
   ich w app.css: wspolne klasy zakresowe nie dzialaja poza wlasnym komponentem. */

.cytat-serwera[b-ib13cl6osu] {
    margin-top: .55rem;
    padding: .6rem .75rem;
    background: var(--warn-bg);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 1.5;
    /* Dlugie zdanie od obcego serwera potrafi byc jednym slowem bez spacji (adres strony).
       Bez tego rozpycha karte na siatce i lamie uklad calego ekranu. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.cytat-kto[b-ib13cl6osu] {
    color: var(--warn);
    font-weight: 650;
    margin-bottom: .25rem;
}

.cytat-tresc[b-ib13cl6osu] {
    margin: 0;
    padding: 0;
    font-style: italic;
    color: var(--text);
    /* Cudzysłow drukarski jest tu czescia znaczenia: pokazuje, gdzie zaczyna sie i konczy
       cudza wypowiedz — takze dla kogos, kto nie widzi kolorow. */
}

.cytat-tresc[b-ib13cl6osu]::before { content: "\201E"; }
.cytat-tresc[b-ib13cl6osu]::after  { content: "\201D"; }

.cytat-uwaga[b-ib13cl6osu] {
    margin-top: .3rem;
    font-size: 11px;
    color: var(--text-soft);
    font-style: normal;
}

/* Ostrzezenie „nie reczymy za te tresc" i „nie otwieraj adresow" ma byc widoczne, a nie schowane
   w drobnym druku obok reszty. RFC 9051 zada, zeby alarm byl WYRAZNIE oznaczony jako podejrzany —
   przypis w kolorze tla tego nie spelnia. */
.cytat-uwaga strong[b-ib13cl6osu] { color: var(--warn); font-weight: 650; }

.cytat-kiedy[b-ib13cl6osu] { display: block; }
/* /Components/Pages/Integrations/Email/AddEmailAccount.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════
   Ekran podlaczania skrzynki pocztowej.

   ⚠ CALY UKLAD PRZEROBIONY 30.08.2026 (zgloszenie wlasciciela: „tragicznie brzydki,
   porozwalane, ciasne, masz cala szerokosc ekranu"). Formularz stal w jednej kolumnie
   ograniczonej do 720 px — na monitorze 1440 zajmowal lewa polowe ekranu, a szesc sekcji
   jedna pod druga dawalo kilka ekranow przewijania. Teraz: dwie kolumny (co wpisujesz /
   co ustawiamy za Ciebie), kroki z numeracja, rzeczy rzadkie pod „Ustawieniami
   zaawansowanymi", sprawdzenie polaczenia jako szeroki przystanek, a glowna akcja
   w pasku przyklejonym do dolu okna.

   Wszystkie kolory z tokenow (--p1, --ok, --warn, --danger, --line, --paper, --cream…) —
   ani jednego hexa, zeby motyw ciemny dzialal sam z siebie.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Naglowek strony ──────────────────────────────────────────────────────────────── */

.skrz-glowa[b-tss4ekv6bi] {
    margin-bottom: 1.75rem;
    max-width: 74ch;
}

.skrz-okruchy[b-tss4ekv6bi] {
    color: var(--text-faint);
    margin-bottom: 0.4rem;
}

.skrz-okruchy a[b-tss4ekv6bi] {
    color: var(--text-faint);
    text-decoration: none;
}

.skrz-okruchy a:hover[b-tss4ekv6bi] { color: var(--text-soft); text-decoration: underline; }

.skrz-tytul[b-tss4ekv6bi] { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

.skrz-lede[b-tss4ekv6bi] {
    font-size: 14px;
    margin-top: 0.5rem;
    max-width: 62ch;
}

/* ── Uklad: co wpisujesz | co ustawiamy za Ciebie ──────────────────────────────────
   `minmax(0, …)` na OBU kolumnach, a nie samo `1fr`: bez tego dlugi adres serwera albo
   dluga nazwa uzytkownika rozpychaja sciezke siatki i cala strona zaczyna przewijac sie
   w bok. To ten sam blad, co element siatki bez `min-width: 0`. */

.skrz-uklad[b-tss4ekv6bi] {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 22rem);
    gap: 2.25rem;
    /* Tabliczka w prawej kolumnie jest ELEMENTEM SIATKI, nie zawartoscia opakowania — dzieki
       temu jej blokiem odniesienia jest cale pole siatki (wysokie jak lewa kolumna) i ma po
       czym jechac przy przewijaniu. Opakowana w `div` kurczacy sie do jej wlasnej wysokosci
       nie mialaby zapasu ani na piksel i `position: sticky` nie robiloby nic. */
    align-items: start;
    margin-bottom: 2.25rem;
}

.skrz-kroki[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 1.9rem;
    min-width: 0;
}

.skrz-kroki-szerokie[b-tss4ekv6bi] { margin-bottom: 2rem; }

@media (max-width: 1180px) {
    .skrz-uklad[b-tss4ekv6bi] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }
}

/* ── Pola formularza ──────────────────────────────────────────────────────────────── */

.pole[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.podpowiedz[b-tss4ekv6bi] {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-soft);
}

.podpowiedz strong[b-tss4ekv6bi] { color: var(--text-soft); }

.skrz-data[b-tss4ekv6bi] { margin-top: 0.15rem; }

.ptaszek[b-tss4ekv6bi] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text);
    cursor: pointer;
}

.ptaszek input[type="checkbox"][b-tss4ekv6bi] {
    margin-top: 0.15rem;
    accent-color: var(--p1);
    flex: none;
}

.ptaszek-samodzielny[b-tss4ekv6bi] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
}

.rola[b-tss4ekv6bi] { color: var(--text-faint); }

.pusto[b-tss4ekv6bi] {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-faint);
}

/* Lista osob potrafi urosnac do kilkudziesieciu wierszy — wtedy przewija sie u siebie,
   zamiast rozciagac kolumne na dwa ekrany. */
.lista-osob[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 13rem;
    overflow-y: auto;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
}

/* ── Trzy decyzje kroku „co sie stanie po zapisaniu" obok siebie ───────────────────── */

.trojka[b-tss4ekv6bi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.1rem;
    align-items: start;
}

/* ── Uwagi: ostrzegawcza, zakazujaca, informacyjna ─────────────────────────────────── */

.uwaga[b-tss4ekv6bi] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    min-width: 0;
}

.uwaga-znak[b-tss4ekv6bi] {
    flex: none;
    font-size: 15px;
    line-height: 1.3;
}

.uwaga-tresc[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.uwaga-tresc > strong[b-tss4ekv6bi] {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text);
}

.uwaga-tresc > span[b-tss4ekv6bi] {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

.uwaga-tresc code[b-tss4ekv6bi] {
    font-size: 11px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.uwaga-ostrzezenie[b-tss4ekv6bi] { border-color: var(--warn); background: var(--warn-bg); }

.uwaga-zakaz[b-tss4ekv6bi] { border-width: 1.5px; border-color: var(--danger); background: var(--danger-bg); }
.uwaga-zakaz .uwaga-tresc > strong[b-tss4ekv6bi] { color: var(--danger); }
.uwaga-zakaz .uwaga-tresc > span[b-tss4ekv6bi] { color: var(--text); }

.uwaga-info[b-tss4ekv6bi] { border-color: var(--line); background: var(--cream-2); }

/* Instrukcja hasła aplikacji Google — numerowane kroki czytelne na telefonie. */
.instrukcja-google[b-tss4ekv6bi] { margin-top: 0.75rem; }
.instrukcja-google ol[b-tss4ekv6bi] {
    margin: 0.2rem 0 0.35rem;
    padding-left: 1.2rem;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
}
.instrukcja-google li[b-tss4ekv6bi] { margin: 0.2rem 0; overflow-wrap: anywhere; }
.instrukcja-google a[b-tss4ekv6bi] { color: var(--p1, var(--global-palette1)); font-weight: 600; }

.dwie-uwagi[b-tss4ekv6bi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 0.85rem;
    align-items: start;
}

.domknij[b-tss4ekv6bi] {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-soft);
    max-width: 78ch;
}

/* ── Ustawienia zaawansowane ───────────────────────────────────────────────────────── */

.zaawansowane[b-tss4ekv6bi] {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
}

.zaawansowane-belka[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    list-style: none;
    background: var(--cream-2);
    transition: background 0.15s;
}

.zaawansowane-belka[b-tss4ekv6bi]::-webkit-details-marker { display: none; }

.zaawansowane-belka:hover[b-tss4ekv6bi] { background: var(--cream); }

/* Strzalka rysowana znakiem, a nie grafika — obraca sie po otwarciu bloku. */
.zaawansowane-tytul[b-tss4ekv6bi] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.zaawansowane-tytul[b-tss4ekv6bi]::before {
    content: '▸';
    color: var(--p1);
    font-size: 11px;
    transition: transform 0.15s;
}

.zaawansowane[open] .zaawansowane-tytul[b-tss4ekv6bi]::before { transform: rotate(90deg); }

/* ── Blok, ktory sie NIE zwija ──────────────────────────────────────────────────────
   „Ustawienia zaawansowane" przestaly byc <details> (01.09.2026, decyzja D8) — belka
   jest tam naglowkiem sekcji, a nie przyciskiem. Zdejmujemy wiec trzy rzeczy, ktore
   obiecuja klikanie: kursor, podswietlenie pod myszka i strzalke. Zostaje dokladnie
   ten sam ksztalt i te same odstepy, zeby oba bloki tego ekranu wygladaly jak rodzenstwo.
   ⚠ Regul wyzej NIE ruszamy: chodzi po nich drugi blok („Co robimy z poczta na Twoim
   serwerze"), ktory zwijany zostaje. */

.zaawansowane-stale > .zaawansowane-belka[b-tss4ekv6bi] { cursor: default; }
.zaawansowane-stale > .zaawansowane-belka:hover[b-tss4ekv6bi] { background: var(--cream-2); }
.zaawansowane-stale .zaawansowane-tytul[b-tss4ekv6bi]::before { content: none; }
.zaawansowane-stale .zaawansowane-opis[b-tss4ekv6bi] { padding-left: 0; max-width: 78ch; }

.zaawansowane-opis[b-tss4ekv6bi] {
    padding-left: 1.05rem;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-soft);
}

.zaawansowane-wnetrze[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0.9rem 1.1rem;
    border-top: 1px solid var(--line);
}

.grupa[b-tss4ekv6bi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.grupa-tytul[b-tss4ekv6bi] {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
}

/* ── Przystanek „sprawdz polaczenie" ───────────────────────────────────────────────
   Szeroki pas, a nie przycisk obok „Zapisz". To jedyny moment, w ktorym czlowiek
   dowiaduje sie, czy dobrze wpisal serwer, port i haslo — wczesniej wygladalo to na
   akcje drugiej kategorii i ludzie je pomijali. */

.stacja[b-tss4ekv6bi] {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--cream-2);
}

.stacja-lewa[b-tss4ekv6bi] {
    flex: 1 1 22rem;
    min-width: 0;
}

.stacja-zdanie[b-tss4ekv6bi] {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-soft);
    max-width: 68ch;
}

.stacja-przycisk[b-tss4ekv6bi] { flex: none; }

/* ── Pasek akcji przyklejony do dolu ───────────────────────────────────────────────
   Formularz ma kilka ekranow wysokosci; przycisk lezacy na samym koncu znikal z oczu
   po pierwszym przewinieciu. Tlo takie samo jak tlo strony (--cream), zeby pasek nie
   wygladal jak doklejona obca plansza. */

.pasek-akcji[b-tss4ekv6bi] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 0 0.4rem;
    background: var(--cream);
    border-top: 1px solid var(--line);
}

.pasek-przyciski[b-tss4ekv6bi] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Walidacja per-pole ────────────────────────────────────────────────────────────
   Czerwona ramka na blednym polu + komunikat pod polem + podsumowanie w pasku akcji. */

.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: var(--radius-sm);
    padding: 0.55rem 0.8rem;
    font-size: 12.5px;
    font-weight: 500;
}

/* ── Podpowiedz pod lista dostawcow ────────────────────────────────────────────────
   Co juz wpisalismy za klienta i skad to mamy. Zrodlo widoczne z zalozenia: pozycja
   bez potwierdzenia u dostawcy nie ma prawa byc na liscie, a klient ma sposob to
   sprawdzic. */

.dostawca-podpowiedz[b-tss4ekv6bi] {
    display: block;
    margin-top: 0.15rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--ok);
    border-radius: var(--radius-sm);
    background: var(--ok-bg);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text);
}

.dostawca-podpowiedz strong[b-tss4ekv6bi] { color: var(--text); }

/* Zdanie „rozpoznalismy dostawce po Twoim adresie" — stoi PIERWSZE, bo odpowiada na
   pytanie, ktore czlowiek zadaje sobie, gdy formularz sam sie wypelnia: kto to zrobil. */
.dostawca-rozpoznanie[b-tss4ekv6bi] {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-soft);
}

.dostawca-wskazowka[b-tss4ekv6bi] {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-soft);
}

/* Zdanie o limicie wysylki — oddzielone kreska, bo mowi o czym innym niz reszta
   tabliczki: nie o polach formularza, tylko o suficie, ktory dostawca narzuca skrzynce. */
.dostawca-limit[b-tss4ekv6bi] {
    display: block;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--ok);
    color: var(--text-soft);
}

.dostawca-zrodlo[b-tss4ekv6bi] {
    display: block;
    margin-top: 0.35rem;
    font-size: 10.5px;
    color: var(--text-soft);
}

.dostawca-zrodlo a[b-tss4ekv6bi] { color: var(--text-soft); text-decoration: underline; }
.dostawca-zrodlo a:hover[b-tss4ekv6bi] { color: var(--text); }

/* ── Telefon ───────────────────────────────────────────────────────────────────────
   Nic tu nie znika: kolumny skladaja sie w jedna, pasek akcji rozciaga przyciski na
   cala szerokosc, a przystanek sprawdzenia ustawia przycisk pod zdaniem. */

@media (max-width: 768px) {
    .skrz-glowa[b-tss4ekv6bi] { margin-bottom: 1.25rem; }
    .skrz-uklad[b-tss4ekv6bi] { gap: 1.4rem; margin-bottom: 1.6rem; }
    .skrz-kroki[b-tss4ekv6bi] { gap: 1.5rem; }

    .stacja[b-tss4ekv6bi] { padding: 0.85rem 0.9rem; gap: 0.85rem; }
    .stacja-przycisk[b-tss4ekv6bi] { width: 100%; }

    .pasek-przyciski > .btn[b-tss4ekv6bi] { flex: 1 1 auto; justify-content: center; }
}
/* /Components/Pages/Integrations/Email/KrokPodlaczenia.razor.rz.scp.css */
/* Krok podlaczania skrzynki — numer w kolumnie, kreska prowadzaca do nastepnego kroku.

   Kreska jest ::before na calej sekcji i siega ponizej jej dolnej krawedzi o wysokosc
   odstepu w siatce rodzica — dlatego ciagnie sie bez przerw miedzy krokami. Ostatni krok
   ma ja wygaszona, zeby nie prowadzila donikad. */

.krok[b-clbe4q22u3] {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0 1rem;
    min-width: 0;
}

.krok[b-clbe4q22u3]::before {
    content: '';
    position: absolute;
    left: 1.125rem;
    top: 2.6rem;
    bottom: -1.9rem;
    width: 1px;
    background: var(--line);
}

.krok-ostatni[b-clbe4q22u3]::before { display: none; }

.krok-slup[b-clbe4q22u3] {
    display: flex;
    justify-content: center;
}

.krok-numer[b-clbe4q22u3] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--p1);
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1;
    padding-bottom: 1px;
}

.krok-tresc[b-clbe4q22u3] {
    min-width: 0;
    padding-bottom: 0.25rem;
}

.krok-tytul[b-clbe4q22u3] {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0.3rem 0 0;
}

.krok-podtytul[b-clbe4q22u3] {
    font-size: 12.5px;
    color: var(--text-soft);
    line-height: 1.5;
    margin: 0.3rem 0 0;
    max-width: 62ch;
}

/* Kontener tresci kroku — rysuje go TEN komponent, wiec zakresowy selektor go trafia.
   Odstepy miedzy polami robi `gap`, a nie regula na dzieciach: dzieci przychodza od rodzica
   i niosa JEGO znacznik zakresu, wiec zaden selektor z tego arkusza by ich nie zlapal. */
.krok-pola[b-clbe4q22u3] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 0.9rem;
    min-width: 0;
}

@media (max-width: 560px) {
    .krok[b-clbe4q22u3] {
        grid-template-columns: 1.75rem minmax(0, 1fr);
        gap: 0 0.7rem;
    }
    .krok[b-clbe4q22u3]::before { left: 0.875rem; top: 2.1rem; }
    .krok-numer[b-clbe4q22u3] { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
    .krok-tytul[b-clbe4q22u3] { font-size: 1.25rem; }
}
/* /Components/Pages/Integrations/Email/PodsumowanieSkrzynki.razor.rz.scp.css */
/* Tabliczka znamionowa — panel „co ustawiamy za Ciebie".

   Wzorowana na tabliczce urzadzenia, a nie na karcie marketingowej: wloskowe linie miedzy
   wierszami, etykiety drobne i wersalikami, wartosci krojem maszynowym. To jest jedyne
   miejsce na tym ekranie z takim rytmem — reszta strony ma byc przy nim cicha. */

.tabliczka[b-9431xk8nxh] {
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-width: 0;
}

.tabliczka-glowa[b-9431xk8nxh] {
    padding: 0.9rem 1.05rem 0.8rem;
    border-bottom: 1px solid var(--line);
    background: var(--cream-2);
}

.tabliczka-etykieta[b-9431xk8nxh] {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-soft);
}

.tabliczka-adres[b-9431xk8nxh] {
    display: block;
    margin-top: 0.3rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    overflow-wrap: anywhere;
}

.tabliczka-lista[b-9431xk8nxh] {
    margin: 0;
    padding: 0.25rem 1.05rem 0.5rem;
}

.tabliczka-wiersz[b-9431xk8nxh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
}

.tabliczka-wiersz:last-child[b-9431xk8nxh] { border-bottom: none; }

.tabliczka-wiersz dt[b-9431xk8nxh] {
    font-size: 11.5px;
    color: var(--text-soft);
    line-height: 1.35;
    min-width: 0;
}

.tabliczka-wiersz dd[b-9431xk8nxh] {
    margin: 0;
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.tabliczka-brak[b-9431xk8nxh] {
    color: var(--text-faint);
    font-style: italic;
}

.tabliczka-znacznik[b-9431xk8nxh] {
    display: block;
    margin-top: 0.15rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}

.tabliczka-znacznik-ok[b-9431xk8nxh] { color: var(--ok); }
.tabliczka-znacznik-uwaga[b-9431xk8nxh] { color: var(--warn); }

.tabliczka-haslo[b-9431xk8nxh] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.75rem 1.05rem 0.85rem;
    border-top: 1px solid var(--line);
    background: var(--cream);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-soft);
}

.tabliczka-haslo strong[b-9431xk8nxh] { color: var(--text); }

/* Na waskim ekranie tabliczka przestaje byc kolumna obok formularza i staje sie zwyklym
   blokiem — przyklejanie jej do gory zabieraloby wtedy pol ekranu treaci. */
@media (max-width: 1180px) {
    .tabliczka[b-9431xk8nxh] { position: static; }
}

@media (max-width: 560px) {
    .tabliczka-wiersz[b-9431xk8nxh] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }
    .tabliczka-wiersz dd[b-9431xk8nxh] { text-align: left; }
    .tabliczka-znacznik[b-9431xk8nxh] { display: inline; margin-left: 0.4rem; }
}
/* /Components/Pages/Integrations/Email/WynikSprawdzenia.razor.rz.scp.css */
/* Wynik sprawdzenia polaczenia.

   ⚠ TLO, NIE TYLKO RAMKA. Poprzednia wersja korzystala z `.alert-banner`, ktora ma na stale
   tlo ostrzegawcze — samo przemalowanie obrysu na zielono dawalo przy UDANYM polaczeniu
   zielona ramke na czerwonym tle, czyli sukces wygladajacy jak awaria. Tutaj oba stany maja
   wlasny komplet: obrys, tlo i kolor znaku. */

.wynik[b-bfctlcsz5m] {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.95rem 1.1rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--line);
    background: var(--paper);
    animation: fade-up 0.25s ease-out;
}

.wynik-ok[b-bfctlcsz5m] {
    border-color: var(--ok);
    background: var(--ok-bg);
}

.wynik-zle[b-bfctlcsz5m] {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.wynik-znak[b-bfctlcsz5m] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-light);
}

.wynik-ok .wynik-znak[b-bfctlcsz5m] { background: var(--ok); }
.wynik-zle .wynik-znak[b-bfctlcsz5m] { background: var(--danger); }

.wynik-tresc[b-bfctlcsz5m] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.wynik-naglowek[b-bfctlcsz5m] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.wynik-ok .wynik-naglowek[b-bfctlcsz5m] { color: var(--ok); }
.wynik-zle .wynik-naglowek[b-bfctlcsz5m] { color: var(--danger); }

/* Numer sprawdzenia — ma być widać, ale nie krzyczeć: to ślad po kliknięciu, nie treść wyniku. */
.wynik-proba[b-bfctlcsz5m] {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-soft);
    margin-left: 0.35rem;
}

.wynik-zdanie[b-bfctlcsz5m] {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
    overflow-wrap: anywhere;
}

.wynik-rada[b-bfctlcsz5m] {
    margin-top: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px solid color-mix(in oklab, var(--danger) 25%, transparent);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-soft);
}

.wynik-rada strong[b-bfctlcsz5m] { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
    .wynik[b-bfctlcsz5m] { animation: none; }
}
/* /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;
}

/* ⚠ DWIE KOLUMNY NA MONITORZE, NIE TRZY (30.08.2026). Przy `minmax(320px, 1fr)` kontener 1210 px
   mieścił trzy karty po ~370 px: listy wyboru retencji („7 dni / 30 dni / 90 dni / 1 rok / zawsze")
   łamały się na dwie linie, etykiety zawijały, karty rosły do różnych wysokości i nic się między
   nimi nie zestawiało. `min(100%, 480px)` daje dwie karty po ~595 px na 1440 px, a na telefonie
   nie wypycha treści poza ekran — bez `min()` kolumna 480 px byłaby szersza niż okno 390 px. */
.integ-grid[b-ij54nucs0t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
    gap: 1rem;
    /* Karty w jednym rzędzie mają wspólną wysokość (domyślne `stretch`) — stopka z przyciskami
       ląduje wtedy na tej samej linii w obu kartach i da się je porównać wzrokiem. */
    align-items: stretch;
}

/* Stopka z akcjami dosuwana do dołu karty, żeby przy równej wysokości kart przyciski stały
   w jednej linii niezależnie od tego, ile wierszy ma karta wyżej. */
.integ-card .integ-actions[b-ij54nucs0t] { margin-top: auto; }

/* Przestroga o bezpowrotnym kasowaniu — RAZ, nad listą. Ton poważny, ale nie alarmowy:
   to jest opis skutku ustawienia, nie awaria. */
.integ-przestroga[b-ij54nucs0t] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--danger-bg);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm);
}

.integ-przestroga > span:first-child[b-ij54nucs0t] { color: var(--danger); font-weight: 700; flex: none; }

.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; }

/* Wiersz z grupą znaczników („7 dni / 30 dni / …"). Etykieta NAD wyborem, nie obok:
   przy etykiecie z lewej i znacznikach dociśniętych do prawej przez środek karty biegła
   pustka, a sama grupa dostawała tak mało miejsca, że łamała się na dwie linie. */
.integ-meta .kv-row.kv-stack[b-ij54nucs0t] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding-bottom: 0.6rem;
}

.integ-meta .kv-row.kv-stack .kv-label[b-ij54nucs0t] { padding-top: 0; }

/* Nagłówek grupy „Ustawienia tego konta" — ten sam punkt zaczepienia w każdej karcie. */
.integ-section[b-ij54nucs0t] {
    margin: 0.9rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--text-soft);
}

.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; }

/* Skrzynka czekajaca na ponowne wpisanie hasla. Ton ostrzegawczy, nie alarmowy: nic nie
   jest zepsute, brakuje jednej rzeczy — i dlatego ten blok ma powiedziec, jakiej. */
.integ-do-wpisania[b-ij54nucs0t] {
    margin-top: .55rem;
    padding: .6rem .75rem;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
    background: var(--warn-bg);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm);
}

.integ-do-wpisania strong[b-ij54nucs0t] { display: block; color: var(--warn); font-weight: 650; margin-bottom: .2rem; }

/* 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/Reliability/Reliability.razor.rz.scp.css */
/* Panel niezawodności automatyzacji — kafelki podsumowania + badge stanu. Styl editorial-utility. */
.rel-summary[b-wvd523bzl9] {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}
.rel-stat[b-wvd523bzl9] {
    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-wvd523bzl9] { border-color: var(--danger); }
.rel-stat.warn[b-wvd523bzl9] { border-color: var(--warn, #b8730a); }
.rel-num[b-wvd523bzl9] { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--text); }
.rel-stat.danger .rel-num[b-wvd523bzl9] { color: var(--danger); }
.rel-stat.warn .rel-num[b-wvd523bzl9] { color: var(--warn, #b8730a); }
.rel-lbl[b-wvd523bzl9] { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.03em; }

.rel-badge[b-wvd523bzl9] {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.rel-badge.s-dead[b-wvd523bzl9] { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); }
.rel-badge.s-failed[b-wvd523bzl9] { background: var(--warn-bg, #fbedd8); color: var(--warn, #b8730a); }
.rel-badge.s-proc[b-wvd523bzl9] { background: var(--cream-2); color: var(--text-soft); }
.rel-badge.s-retry[b-wvd523bzl9] { background: var(--ok-bg); color: var(--p1); }

/* ─── Tabela ───
   ⚠ „Dlaczego się nie udało" to jedyny powód, dla którego ktokolwiek wchodzi na ten ekran, więc
   ta kolumna dostaje najwięcej miejsca i ZAWIJA SIĘ zamiast urywać wielokropkiem. Reszta kolumn
   ma stałe szerokości, żeby nie odbierały jej miejsca przy dłuższych nazwach zdarzeń. */
.rel-table[b-wvd523bzl9] { table-layout: fixed; }
.rel-table .rel-col-when[b-wvd523bzl9] { width: 96px; }
.rel-table .rel-col-what[b-wvd523bzl9] { width: 190px; }
.rel-table .rel-col-tenant[b-wvd523bzl9] { width: 150px; }
.rel-table .rel-col-state[b-wvd523bzl9] { width: 110px; }
/* ⚠ 64 px NIE WYSTARCZAŁO NA WŁASNY NAGŁÓWEK. Napis „PRÓBY" jest wersalikami z odstępem
   0.08em, a komórka oddaje 2×1rem na wewnętrzne marginesy — na treść zostawało 32 px i słowo
   łamało się w środku, jako „PRÓB / Y". Dopóki ekran był panelem obsługi, oglądały go dwie
   osoby; od 02.09.2026 ogląda go klient. Pilnuje tego sprawdzenie w abcare-niezawodnosc-izolacja,
   które liczy, na ile linii przeglądarka rozbiła sam tekst nagłówka. */
.rel-table .rel-col-tries[b-wvd523bzl9] { width: 88px; }
.rel-table .rel-col-do[b-wvd523bzl9] { width: 150px; }
.rel-table .rel-col-why[b-wvd523bzl9] { width: auto; }

.rel-table td.rel-why[b-wvd523bzl9] {
    font-size: 12px;
    color: var(--text-soft);
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

.rel-table td.rel-tenant[b-wvd523bzl9] {
    font-size: 12px;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

.rel-table td.rel-do[b-wvd523bzl9] { white-space: nowrap; }

/* Na karcie telefonu powód jest zdaniem, nie liczbą — etykieta nad tekstem, tekst do lewej. */
.data-card-row.rel-card-why[b-wvd523bzl9] { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.data-card-row.rel-card-why .value[b-wvd523bzl9] { text-align: left; font-weight: 400; font-size: 0.85rem; line-height: 1.5; }

/* ── Najczęstsze przyczyny ────────────────────────────────────────────────────────
   Powstało 04.09.2026. Ekran pokazywał na stanowisku 59 572 wiersze, z czego 53 031
   miało JEDNĄ przyczynę. Karta z liczbą mówi to jednym spojrzeniem, a kliknięcie
   zawęża listę — dopiero wtedy „zaznacz wszystkie pasujące" znaczy coś sensownego. */
.rel-przyczyny-lista[b-wvd523bzl9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}
.rel-przyczyna[b-wvd523bzl9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
.rel-przyczyna:hover[b-wvd523bzl9] { border-color: var(--p1); }
.rel-przyczyna.wybrana[b-wvd523bzl9] { border-color: var(--p1); background: var(--cream-2); }
.rel-przyczyna-ile[b-wvd523bzl9] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
/* ⚠ `min-width: 0` na elemencie elastycznym — bez tego długa przyczyna nie daje się
   skrócić i rozpycha kartę poza krawędź ekranu. */
.rel-przyczyna-tekst[b-wvd523bzl9] {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-soft);
}

/* ── Pasek nad tabelą: zawężenie po firmie + działania na zaznaczeniu ──────────────
   Powstał 03.09.2026. Na stanowisku ekran pokazywał 933 zdarzenia z jedną przyczyną,
   a jedyną drogą było klikanie „Ponów" wiersz po wierszu. */
.rel-pasek[b-wvd523bzl9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 0.9rem;
}
.rel-pasek-pole[b-wvd523bzl9] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.rel-pasek-pole > span[b-wvd523bzl9] { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }
.rel-pasek-pole select[b-wvd523bzl9] { min-width: 0; max-width: 320px; }

/* Pasek działania. `margin-left: auto` dopycha go w prawo na szerokim ekranie, a przy
   zawinięciu (telefon) wraca pod zawężenie i zajmuje całą szerokość. */
.rel-zaznaczenie[b-wvd523bzl9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--p1);
    border-radius: 8px;
    background: var(--ok-bg);
    font-size: 12.5px;
}
.rel-zaznaczenie strong[b-wvd523bzl9] { font-size: 15px; color: var(--p1); }

/* Kolumna zaznaczania. Szerokość stała — inaczej pole wyboru rozpycha się razem
   z komórką i nagłówek „Kiedy" ucieka o kilkanaście pikseli w prawo. */
.rel-table .rel-col-zazn[b-wvd523bzl9] { width: 38px; text-align: center; }
.rel-table td.rel-col-zazn[b-wvd523bzl9] { padding-right: 0; }
.rel-table .rel-col-zazn input[b-wvd523bzl9] { cursor: pointer; }

/* Zaznaczony wiersz musi być widoczny BEZ patrzenia na pole wyboru — przy pięćdziesięciu
   wierszach samo pole ginie w lewej krawędzi. */
.rel-wiersz-zazn[b-wvd523bzl9] { background: var(--ok-bg); }
article.data-card.rel-wiersz-zazn[b-wvd523bzl9] { border-color: var(--p1); }

/* „próba za 3 min" pod plakietką stanu. Mała, bo to dopowiedzenie, nie druga plakietka. */
.rel-kolejna[b-wvd523bzl9] {
    font-size: 10.5px;
    color: var(--text-soft);
    margin-top: 0.2rem;
    white-space: nowrap;
}
/* /Components/Pages/Settings/FeaturesSettings.razor.rz.scp.css */
/* Funkcje firmy — dwa pytania jedno pod drugim, w szerokości wygodnej do czytania. */

.funkcje-firmy[b-sydj7d9ex0] {
    max-width: 880px;
}

.funkcje-karta[b-sydj7d9ex0] {
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.funkcje-komunikat[b-sydj7d9ex0] {
    display: flex;
    padding: 0.55rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 13px;
    border-radius: var(--radius);
    white-space: normal;
    line-height: 1.5;
}

.funkcje-stopka[b-sydj7d9ex0] {
    color: var(--text-soft);
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
}

@media (max-width: 768px) {
    .funkcje-karta[b-sydj7d9ex0] {
        padding: 1rem;
    }
}
/* /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-soft);
    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-soft);
    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); }

/* ⚠ POLE DOTYKU — powiekszone BEZ zmiany wygladu.
   "Edytuj" i "Usun" to tekstowe przyciski w kolumnie akcji: 36x19 i 29x19 px. Na dotyku
   to szpilka, a stoja OBOK SIEBIE — chybienie trafia w sasiada, czyli w "Usun".
   Rozdecie ich wizualnie rozepchneloby wiersz tabeli, wiec zamiast tego rozciagamy sam
   obszar klikalny warstwa `::after`: uklad bez zmian, palec dostaje 40 px wysokosci.
   Odstep miedzy nimi zwiekszony, zeby powiekszone pola sie nie nakladaly — dwa cele
   dotykowe, ktore na siebie zachodza, sa gorsze niz jeden maly. */
@media (pointer: coarse) {
    /* ⚠ Najpierw probowalem warstwy `::after` z ujemnymi odstepami — uklad bez zmian, palec
       dostaje 40 px. Pomiar pokazal, ze to NIE DZIALA w komorce tabeli: warstwa jest przycinana
       i dotkniecie szesnascie pikseli nad tekstem laduje poza przyciskiem.
       Zamiast walczyc z przycinaniem dajemy realna wysokosc — ale WYLACZNIE na dotyku, wiec
       na komputerze gestosc tabeli zostaje bez zmian. Wiersz rosnie o kilka pikseli tylko tam,
       gdzie i tak jest wiecej miejsca w pionie niz precyzji w palcu. */
    .ts-link[b-v3ss4i8gbi] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        min-width: 44px;
        padding: 0 0.5rem;
    }

    /* Odstep miedzy akcjami — dwa cele dotykowe, ktore na siebie zachodza, sa gorsze
       niz jeden maly: chybienie trafia w sasiada, czyli tutaj w "Usun". */
    .ts-sep[b-v3ss4i8gbi] { margin: 0 0.55rem; }
}
.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/Setup/SetupPage.razor.rz.scp.css */
/* „Pierwsze ustawienia”. Układ: trasa kroków po lewej (to prawdziwa sekwencja — stąd numery),
   bieżący krok w jednej karcie po prawej. Jedyny wyróżniony element to pasek postępu pod
   nagłówkiem; reszta cicha. Kolory wyłącznie ze zmiennych palety — działa też w trybie ciemnym.
   Treść kroków rysują komponenty-dzieci, dlatego ich klasy idą przez ::deep. */

.kreator[b-75l1njw76f] {
    max-width: 1080px;
}

/* ── Pasek postępu ─────────────────────────────────────────────── */
.kreator-pasek[b-75l1njw76f] {
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    margin: 0.25rem 0 1.25rem;
}

.kreator-pasek-wypelnienie[b-75l1njw76f] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--grad-brand);
    transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .kreator-pasek-wypelnienie[b-75l1njw76f] { transition: none; }
}

.kreator-komunikat[b-75l1njw76f] {
    display: flex;
    padding: 0.55rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 13px;
    border-radius: var(--radius);
    white-space: normal;
    line-height: 1.5;
}

/* ── Układ: trasa + krok ───────────────────────────────────────── */
.kreator-uklad[b-75l1njw76f] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.kreator-trasa[b-75l1njw76f] {
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
    min-width: 0;
}

.kreator-trasa ol[b-75l1njw76f] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    /* Linia łącząca kroki — przebiega za znacznikami. */
    background: linear-gradient(var(--line-strong), var(--line-strong)) no-repeat 0.95rem 1rem / 2px calc(100% - 2rem);
}

.kreator-trasa a[b-75l1njw76f] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.4rem;
    border-radius: var(--radius);
    color: var(--text-soft);
    text-decoration: none;
    min-width: 0;
}

.kreator-trasa a:hover[b-75l1njw76f] {
    background: var(--cream-2);
    color: var(--text);
}

.kreator-trasa a:focus-visible[b-75l1njw76f] {
    outline: 2px solid var(--p1);
    outline-offset: 2px;
}

.kreator-znacznik[b-75l1njw76f] {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    background: var(--paper);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}

.kreator-trasa li.zrobiony .kreator-znacznik[b-75l1njw76f] {
    border-color: var(--p1);
    background: var(--p1);
    color: var(--text-light);
}

/* Pominięty: przerywana obwódka i kreska zamiast numeru — ani „zrobiony”, ani „jeszcze przed Tobą”. */
.kreator-trasa li.pominiety .kreator-znacznik[b-75l1njw76f] {
    border-style: dashed;
    color: var(--text-soft);
}

.kreator-trasa li.biezacy a[b-75l1njw76f] {
    color: var(--text);
    font-weight: 600;
    background: var(--ok-bg);
}

.kreator-trasa li.biezacy .kreator-znacznik[b-75l1njw76f] {
    border-color: var(--p1);
    color: var(--p1);
}

.kreator-trasa li.biezacy.zrobiony .kreator-znacznik[b-75l1njw76f] {
    color: var(--text-light);
}

.kreator-trasa-nazwa[b-75l1njw76f] {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Karta kroku ───────────────────────────────────────────────── */
.kreator-krok[b-75l1njw76f] {
    padding: 1.4rem 1.6rem 1.5rem;
    min-width: 0;
}

.kreator-numer[b-75l1njw76f] {
    margin: 0 0 0.2rem;
    font-size: 0.8rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.kreator-krok[b-75l1njw76f]  .kreator-krok-tytul {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.4rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-krok-lede {
    color: var(--text-soft);
    margin: 0 0 1.25rem;
    max-width: 64ch;
    line-height: 1.55;
}

.kreator-krok[b-75l1njw76f]  .kreator-podtytul {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 1.5rem 0 0.5rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-komunikat {
    display: flex;
    padding: 0.55rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 13px;
    border-radius: var(--radius);
    white-space: normal;
    line-height: 1.5;
}

.kreator-krok[b-75l1njw76f]  .kreator-podpowiedz {
    color: var(--text-soft);
    font-size: 0.875rem;
    margin: 0.75rem 0 0;
    overflow-wrap: anywhere;
}

.kreator-krok[b-75l1njw76f]  .kreator-uwaga {
    color: var(--text-soft);
    font-size: 0.875rem;
    margin: 1.25rem 0 0;
    padding-left: 0.75rem;
    border-left: 3px solid var(--p2);
}

/* Pola formularzy kroków */
.kreator-krok[b-75l1njw76f]  .kreator-allegro-form,
.kreator-krok[b-75l1njw76f]  .kreator-zaproszenie {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-pole {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    flex: 1 1 220px;
}

.kreator-krok[b-75l1njw76f]  .kreator-pole .kreator-podpowiedz {
    margin: 0;
    font-size: 0.8rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-etykieta {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text);
}

/* Lista podłączonych kont / skrzynek / osób */
.kreator-krok[b-75l1njw76f]  .kreator-lista {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.kreator-krok[b-75l1njw76f]  .kreator-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--line);
    min-width: 0;
}

.kreator-krok[b-75l1njw76f]  .kreator-lista li:first-child {
    border-top: 0;
}

.kreator-krok[b-75l1njw76f]  .kreator-lista-nazwa {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-weight: 500;
}

/* Trzy drogi podłączenia skrzynki */
.kreator-krok[b-75l1njw76f]  .kreator-drogi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-droga {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    text-decoration: none;
    min-width: 0;
}

.kreator-krok[b-75l1njw76f]  .kreator-droga:hover,
.kreator-krok[b-75l1njw76f]  .kreator-droga:focus-visible {
    border-color: var(--p1);
    box-shadow: inset 0 0 0 1px var(--p1);
}

.kreator-krok[b-75l1njw76f]  .kreator-droga-tytul {
    font-weight: 600;
    color: var(--text);
}

.kreator-krok[b-75l1njw76f]  .kreator-droga-opis {
    font-size: 0.8rem;
    color: var(--text-soft);
}

/* Opisy ról pod zaproszeniem */
.kreator-krok[b-75l1njw76f]  .kreator-role {
    margin: 1rem 0 1.25rem;
    display: grid;
    gap: 0.4rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-role dt {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
}

.kreator-krok[b-75l1njw76f]  .kreator-role dd {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.kreator-krok[b-75l1njw76f]  .kreator-link-zaproszenia {
    overflow-wrap: anywhere;
}

/* Podsumowanie */
.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem 0.65rem 2.4rem;
    border-top: 1px solid var(--line);
    position: relative;
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie li:first-child {
    border-top: 0;
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie li::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.4rem;
    border-radius: 50%;
    border: 2px solid var(--line-faint);
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie li.zrobiony::before {
    border-color: var(--p1);
    background: var(--p1);
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie-nazwa {
    font-weight: 600;
    color: var(--text);
    min-width: 0;
}

.kreator-krok[b-75l1njw76f]  .kreator-podsumowanie-stan {
    color: var(--text-soft);
    font-size: 0.875rem;
}

.kreator-krok[b-75l1njw76f]  .kreator-pozniej {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* Przyciski na dole kroku */
.kreator-krok[b-75l1njw76f]  .kreator-akcje {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.kreator-krok[b-75l1njw76f]  .kreator-przejscie {
    display: inline-flex;
    margin: 0;
}

/* ── Telefon: trasa zamienia się w rząd znaczników nad krokiem ── */
@media (max-width: 768px) {
    .kreator-uklad[b-75l1njw76f] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .kreator-trasa[b-75l1njw76f] {
        position: static;
    }

    .kreator-trasa ol[b-75l1njw76f] {
        flex-direction: row;
        justify-content: space-between;
        background: linear-gradient(var(--line-strong), var(--line-strong)) no-repeat 0 50% / 100% 2px;
    }

    .kreator-trasa a[b-75l1njw76f] {
        padding: 0.25rem;
        background: transparent;
    }

    .kreator-trasa li.biezacy a[b-75l1njw76f] {
        background: transparent;
    }

    /* Nazwa kroku jest w nagłówku karty — na wąskim ekranie zostają same znaczniki. */
    .kreator-trasa-nazwa[b-75l1njw76f] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .kreator-krok[b-75l1njw76f] {
        padding: 1rem;
    }

    .kreator-krok[b-75l1njw76f]  .kreator-drogi {
        grid-template-columns: minmax(0, 1fr);
    }

    .kreator-krok[b-75l1njw76f]  .kreator-podsumowanie li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .kreator-krok[b-75l1njw76f]  .kreator-podsumowanie-stan {
        grid-column: 1;
        grid-row: 2;
    }

    .kreator-krok[b-75l1njw76f]  .kreator-akcje {
        justify-content: stretch;
    }

    .kreator-krok[b-75l1njw76f]  .kreator-akcje > .btn,
    .kreator-krok[b-75l1njw76f]  .kreator-akcje .kreator-przejscie,
    .kreator-krok[b-75l1njw76f]  .kreator-akcje .kreator-przejscie .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}
/* /Components/Pages/Tasks/TaskBulkReplyModal.razor.rz.scp.css */
/* Okno „Odpowiedz zbiorczo” — podgląd wysyłki + jedna treść dla wszystkich wątków. */

.tbr-dialog[b-71hov3rcon] {
    max-width: 720px;
    width: min(720px, 94vw);
}

.tbr-lead[b-71hov3rcon] {
    margin: 0 0 0.75rem;
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.5;
}

/* Zdanie „Poleci N wiadomości" — najważniejsza informacja w oknie, więc czytelniejsza niż plakietki. */
.tbr-ile[b-71hov3rcon] {
    margin: 0 0 0.6rem;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}

/* Ostrzeżenie „z tego zadania już wychodziła wiadomość". */
.tbr-bylo[b-71hov3rcon] {
    display: block;
    margin-bottom: 0.6rem;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
}

/* Rozbicie „ile nie wyjdzie i dlaczego". */
.tbr-powody[b-71hov3rcon] {
    margin: -0.4rem 0 0.75rem;
    padding-left: 1.1rem;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-soft);
}

/* Haczyk „wyślij także do spraw już zamkniętych (N)". */
.tbr-zamkniete[b-71hov3rcon] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    cursor: pointer;
}

.tbr-zamkniete input[b-71hov3rcon] { margin-top: 0.15rem; flex: none; }

/* Potwierdzenie ponownej wysyłki — ma zatrzymać rękę, więc stoi nad przyciskami i jest widoczne. */
.tbr-potwierdzenie[b-71hov3rcon] {
    margin: 0.75rem 0 0;
    padding: 0.75rem;
    border: 1px solid var(--global-palette5, #e0a800);
    border-radius: 8px;
    background: rgba(255, 193, 7, 0.08);
}

.tbr-potwierdzenie p[b-71hov3rcon] {
    margin: 0 0 0.6rem;
    font-size: 13px;
    line-height: 1.5;
}

.tbr-potwierdzenie-akcje[b-71hov3rcon] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.tbr-summary[b-71hov3rcon],
.tbr-wynik[b-71hov3rcon] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.tbr-klienci[b-71hov3rcon] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
}

/* Lista zgłoszeń: przy 200 pozycjach okno nie może rosnąć w nieskończoność — przewijamy w środku. */
.tbr-lista[b-71hov3rcon] {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.35rem;
    margin-bottom: 0.75rem;
}

.tbr-wiersz[b-71hov3rcon] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.3rem 0.35rem;
    border-radius: 6px;
    font-size: 12px;
}

.tbr-wiersz + .tbr-wiersz[b-71hov3rcon] { border-top: 1px solid var(--line); }

.tbr-wiersz-pominiety[b-71hov3rcon] { opacity: 0.62; }

.tbr-klient[b-71hov3rcon] {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 8rem;
}

.tbr-stan[b-71hov3rcon] { color: var(--text-soft); }

.tbr-werdykt[b-71hov3rcon] {
    margin-left: auto;
    font-size: 11px;
    white-space: nowrap;
}

.tbr-idzie[b-71hov3rcon] { color: var(--global-palette1); font-weight: 600; }
.tbr-pominiete[b-71hov3rcon] { color: var(--warn); }

.tbr-wzorce[b-71hov3rcon] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.tbr-tresc[b-71hov3rcon] {
    width: 100%;
    resize: vertical;
    font-family: inherit;
}

.tbr-podpowiedz[b-71hov3rcon] {
    margin: 0.35rem 0 0;
    font-size: 11px;
    color: var(--text-soft);
}

.tbr-wstawka[b-71hov3rcon] {
    background: none;
    border: 1px dashed var(--line);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 11px;
    color: var(--text-soft);
    cursor: pointer;
}

.tbr-wstawka:hover[b-71hov3rcon] { color: var(--global-palette1); border-color: var(--global-palette1); }

/* Postęp — przy dwustu zgłoszeniach człowiek musi widzieć, że coś się dzieje. */
.tbr-postep[b-71hov3rcon] {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tbr-postep-pasek[b-71hov3rcon] {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--cream-2);
    overflow: hidden;
}

.tbr-postep-pasek span[b-71hov3rcon] {
    display: block;
    height: 100%;
    background: var(--global-palette1);
    transition: width 0.2s ease;
}

.tbr-postep-opis[b-71hov3rcon] {
    font-size: 12px;
    color: var(--text-soft);
    white-space: nowrap;
}

.tbr-blad[b-71hov3rcon] {
    margin: 0.2rem 0 0;
    font-size: 12px;
    color: var(--danger);
}
/* /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;
}

/* Nagłówek stanu przejściowego i stanu „nie ma czego pokazać". Rozmiar i waga wpisane WPROST,
   bo to jest `h1` — bez tego globalna reguła dałaby mu domyślne 2em i stan „wczytuję" krzyczałby
   głośniej niż samo zadanie. */
.task-detail-state-title[b-0zau9n34jo] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-soft);
    margin: 0 0 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; }
/* To jest `h1` (patrz komentarz w TaskDetailPage.razor). `margin: 0` i `font-weight: 400`
   zdejmują to, co globalna reguła dokłada nagłówkom — wiersz ma wyglądać dokładnie tak, jak
   wyglądał jako `div`. Rozmiar pisma siedzi niżej, na dzieciach. */
.td-title-row[b-0zau9n34jo] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    margin: 0;
    font-weight: 400;
}

/* Zdanie wprowadzające pod tytułem — 13 px, jak na pozostałych ekranach szczegółu.
   Globalne `.lede` ma 1,05 rem i 56ch, co pod tytułem zadania czytałoby się jak drugi tytuł. */
.td-lede[b-0zau9n34jo] {
    font-size: 13px;
    margin-top: 0.5rem;
    max-width: 620px;
}
.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;
}

/* Przełącznik statusu w nagłówku — TYLKO na wąskim ekranie. Na dużym stoi w panelu obok treści
   i tam zostaje; dwa te same przełączniki widoczne naraz to dwa miejsca do kliknięcia i pytanie,
   czym się różnią. */
.td-status-wybor[b-0zau9n34jo] { display: none; }
.td-status-wybor select[b-0zau9n34jo] { min-width: 9.5rem; }

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

    /* Zmierzone na pokazie (390×844): przełącznik w panelu leżał 892 px w dół, na stronie wysokiej
       2254 px. Tu jest od razu pod tytułem, a plakietka (powtórka tego samego stanu) schodzi. */
    .td-status-wybor[b-0zau9n34jo] { display: inline-flex; flex: none; }
    .td-status[b-0zau9n34jo] { display: none; }
}

/* ── 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-soft);
    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;

    /* ⚠ SUFIT WYSOKOŚCI jest tu obowiązkowy, a nie kosmetyczny.
       Do 11.08.2026 stało tu samo `flex: 1` + `overflow-y: auto` — i wyglądało poprawnie,
       bo `overflow-y` sugeruje, że coś się przewija. Nie przewijało się nic: żaden rodzic
       (.task-detail-main → .task-disc-card) nie ma ograniczonej wysokości, więc `flex: 1`
       rośnie do wysokości treści, a przewijanie nie ma czego uciąć. Przy dwóch wpisach
       nie widać różnicy; przy trzydziestu dyskusja wypychała stronę daleko poza ekran,
       a pole do pisania uciekało pod dolną krawędź.
       Sufit liczony od okna, nie od piksela: ma się mieścić na jednym ekranie tak samo
       jak strumień w panelu rozmowy. */
    max-height: clamp(220px, 46vh, 560px);
    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-soft);
    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);
    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-soft);
    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-soft);
    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-soft);
}

.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;
}

/* Krzyżyk usuwania (uczestnik, powiązane zgłoszenie) — z obwódką, żeby było go WIDAĆ bez najechania
   (W-14 właściciela, 19.09.2026: „przycisk zamykania widać dopiero po najechaniu"). Najechanie = czerwień. */
.task-person-remove[b-0zau9n34jo] {
    flex: none;
    width: 22px; height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.task-person-remove:hover[b-0zau9n34jo] { background: var(--danger-bg); color: var(--danger); border-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;
}

/* Klient / kanal / stan przy podpietym zgloszeniu — bez nich lista mowila tylko „ile”. */
.td-conv-meta[b-0zau9n34jo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

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

.td-conv-chan[b-0zau9n34jo] { font-size: 10px; }

.td-conv-state[b-0zau9n34jo] {
    font-size: 11px;
    color: var(--text-soft);
}

/* Klienci, ktorych sprawa dotyczy — „potem wiemy kto”. */
.td-klienci[b-0zau9n34jo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* Pasek z akcjami zbiorczymi nad lista zgloszen. */
.td-bulk-bar[b-0zau9n34jo] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 1rem 0.5rem;
}

.td-bulk-bar .btn[b-0zau9n34jo] { width: 100%; }

/* Slad „Powiadomiono N zgloszen, data" — zeby nikt nie wyslal tego samego drugi raz. */
.td-bulk-slad[b-0zau9n34jo] {
    margin: 0 1rem 0.6rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    background: var(--cream-2);
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-soft);
}

/* ── 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-soft);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.task-log-filter:hover[b-0zau9n34jo] { background: var(--cream-2); color: var(--text-soft); }
.task-log-filter.on[b-0zau9n34jo] {
    background: var(--cream-2);
    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-soft);
    white-space: nowrap;
    flex: none;
}

/* ── Usuń ── */
.task-delete-btn[b-0zau9n34jo] { align-self: flex-start; }

/* ── Cele dotykowe ────────────────────────────────────────────────────────────
   Przejazd 18.08.2026: odnośnik „Zadania" 66×19, krzyżyk przy osobie 20×20,
   filtr dziennika ~21 px wysokości — palec trafia obok.

   ⚠ REALNY ROZMIAR, NIE WARSTWA `::after`: sonda zalicza cel po rozmiarze (≥32×32) albo
   po czterech punktach szesnaście pikseli od środka — a druga droga działa wyłącznie dla
   elementów w widocznym kadrze. Panel boczny zadania i dziennik zmian leżą pod zgięciem
   strony, więc warstwa nic by tam nie dała.

   Klasy WSPÓŁDZIELONE („+ tag", „+ zgłoszenie", kosz przy załączniku) mają swoje reguły
   w `app.css` — tutaj byłyby zakresowe, czyli nie objęłyby okna tagów rozmowy ani
   komponentu załączników. */
@media (pointer: coarse) {
    .task-back[b-0zau9n34jo] { min-height: 40px; min-width: 44px; }

    .task-person-remove[b-0zau9n34jo] { width: 40px; height: 40px; }

    .task-log-filter[b-0zau9n34jo] {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 40px; min-width: 44px;
        padding: 0.15rem 0.85rem;
    }

    /* Odnośnik do powiązanego zgłoszenia — dwie linijki tekstu, ale bez własnej wysokości. */
    .task-conv-link[b-0zau9n34jo] { justify-content: center; min-height: 40px; }
}

/* Przyciski przy tytule — widoczne dopiero, gdy tytul sie zmienil. Nie rozpychaja naglowka,
   bo stoja w tym samym rzedzie flex co pole. */
.td-title-zapisz[b-0zau9n34jo] { flex: none; }
/* /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). */

/* Licznik pod wyszukiwarką — ta sama rola co „N w tym widoku" w skrzynce. */
.tasks-licznik[b-hei3780ofq] {
    margin: 0.35rem 0 0.5rem;
    font-size: 12px;
    color: var(--text-soft);
}

/* ── 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-soft);
    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);
}

/* Tytuł jest odnośnikiem (żeby dało się otworzyć zadanie w nowej karcie i dojść do niego
   klawiaturą), ale MA WYGLĄDAĆ jak zwykły tekst w wierszu — podkreślenie i kolor odnośnika
   zmieniłyby wygląd listy. Podświetlenie ostrości zostawiamy: bez niego droga klawiaturą
   istnieje, ale nie widać, gdzie się jest. */
.tasks-title[b-hei3780ofq] {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    display: block;
}

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

.tasks-title:focus-visible[b-hei3780ofq] {
    outline: 2px solid var(--global-palette1, #009244);
    outline-offset: 2px;
    border-radius: 3px;
}

.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;
}

/* Belka stronicowania listy zadań. Zakres i liczba całkowita muszą być widoczne — bez nich
   użytkownik nie odróżnia „to wszystko" od „to pierwsza strona z dwudziestu". */
.tasks-strony[b-hei3780ofq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding: 0.55rem 0.2rem;
    font-size: 12.5px;
    color: var(--text-soft);
}

.tasks-strony-btn[b-hei3780ofq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.tasks-strony-nr[b-hei3780ofq] {
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
    text-align: center;
}

.tasks-strony-info[b-hei3780ofq] {
    font-variant-numeric: tabular-nums;
}
/* /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-soft); 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 color-mix(in srgb, var(--global-palette1) 12%, transparent); }
.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-soft); 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); }

/* ⚠ `avatar-circle`, NIE `avatar` (20.09.2026, właściciel: „w sejfie to słabo wygląda").
   Znacznik nadawał klasę `avatar`, a takiej reguły NIE MA w całym projekcie — kształt, rozmiar,
   tło i wyśrodkowanie niesie `avatar-circle` z `app.css`. Kółka więc nie powstawały, zostawały
   same inicjały, a nasunięcie `-6px` z tej reguły kładło je JEDEN NA DRUGIM: na ekranie było
   „AIGPW" zamiast trzech twarzy. Selektor poniżej też musiał się zmienić, inaczej nasunięcie
   przestałoby działać razem z poprawką znacznika. */
.faces[b-f9vxsmtd1u] { display: flex; align-items: center; }
.faces .avatar-circle[b-f9vxsmtd1u] { margin-left: -6px; box-shadow: 0 0 0 2px var(--paper); }
.faces .avatar-circle: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-soft); 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-soft); 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-soft); }

.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-soft); 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-soft); 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-soft); 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(--line-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-soft); white-space: nowrap; }

/* ─────────────── Ekran blokady ───────────────
   ⚠ NIE `position: fixed` (30.08.2026). Zamek jest zwykłą kartą wewnątrz strony, więc boczne menu
   i górny pasek zostają na miejscu — z zamkniętego sejfu da się odejść klikiem, nie tylko strzałką
   „wstecz". Sejf jest zamknięty przy każdym wejściu, więc to jest widok domyślny tego ekranu. */
.lock-page-head[b-f9vxsmtd1u] { margin-bottom: 1.25rem; }
.lockscreen[b-f9vxsmtd1u] {
    background: var(--cream);
    background-image:
        radial-gradient(at 15% 10%, color-mix(in srgb, var(--global-palette1) 8%, transparent) 0, transparent 45%),
        radial-gradient(at 85% 90%, rgba(193, 209, 28, 0.07) 0, transparent 45%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    min-height: min(58vh, 520px);
    display: grid; place-items: center; padding: 2.5rem 1.5rem;
}
.lock-exit[b-f9vxsmtd1u] { margin-top: 1.1rem; font-size: 12px; display: flex; gap: 0.5rem; justify-content: center; align-items: center; }
.lock-exit a[b-f9vxsmtd1u] { color: var(--text-soft); }
.lock-exit a:hover[b-f9vxsmtd1u] { color: var(--p1); }
.lock-exit span[b-f9vxsmtd1u] { color: var(--text-faint); }
.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-soft); 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-soft); 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-soft); 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/DateRangeFilter.razor.rz.scp.css */
/* Zakres dat w pasku filtrów — ten sam język wizualny co .f-sort (editorial-utility). */
.date-range[b-wfc2lv4szq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.35rem 0.1rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    background: transparent;
    transition: all 0.12s;
}

.date-range:hover[b-wfc2lv4szq] { background: var(--cream-2); color: var(--text); }

/* Zakres ustawiony = widać to bez czytania dat (spójne z .f-chip.active). */
.date-range.has-value[b-wfc2lv4szq] { border-color: var(--p1); color: var(--text); }
.date-range.has-value .date-range-ico[b-wfc2lv4szq] { color: var(--p1); }

.date-range-ico[b-wfc2lv4szq] { flex: none; color: var(--text-faint); }

.date-range-label[b-wfc2lv4szq] {
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.date-range-input[b-wfc2lv4szq] {
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0.1rem;
    /* Bez tego pole daty rozpycha pasek do własnej szerokości natywnej. */
    min-width: 0;
    width: 8.4rem;
}

.date-range-input:focus[b-wfc2lv4szq] { outline: none; }

.date-range-sep[b-wfc2lv4szq] { color: var(--text-faint); font-size: 12.5px; }

.date-range-clear[b-wfc2lv4szq] {
    border: none;
    background: transparent;
    color: var(--danger);
    font-size: 15px;
    line-height: 1;
    padding: 0 0.2rem;
    cursor: pointer;
    font-family: inherit;
}

@media (max-width: 768px) {
    /* Na wąskim ekranie zakres bierze całą szerokość paska zamiast łamać się w pół daty. */
    .date-range[b-wfc2lv4szq] { width: 100%; }
    .date-range-input[b-wfc2lv4szq] { flex: 1 1 auto; width: auto; }
}
/* /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(--line-faint));
    flex: none;
}

/* min-width:0 + ellipsis: element flex domyślnie nie kurczy się poniżej treści, więc długa nazwa
   statusu wypychała licznik poza kolumnę. Licznik ma pierwszeństwo — jest teraz dłuższy („100 z 1 240"). */
.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;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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;
    flex: none;
    white-space: nowrap;
}

/* Stopka kolumny: doładowanie następnej porcji + ile jeszcze zostało. */
.kanban-col-more[b-ggpoluqmxj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0 0.1rem;
    flex: 0 0 auto;
}

.kanban-more-btn[b-ggpoluqmxj] {
    width: 100%;
    min-height: 34px;
    padding: 0 0.7rem;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    background: var(--paper);
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.kanban-more-btn:hover:not(:disabled)[b-ggpoluqmxj] {
    background: var(--cream-2);
    color: var(--text);
    border-color: var(--col-accent, var(--line-strong));
}

.kanban-more-btn:disabled[b-ggpoluqmxj] {
    opacity: 0.55;
    cursor: default;
}

.kanban-more-rest[b-ggpoluqmxj] {
    font-size: 11px;
    color: var(--text-soft);
}

.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-soft);
    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;
}

/* Przeniesienie karty na telefonie (09.09.2026, przegląd UX poz. 7) — powód przy znaczniku
   w KanbanBoard.razor. Pasek stoi POD treścią karty i jest oddzielony linią, żeby nie czytał się
   jak część zgłoszenia.
   ⚠ Widoczność załatwia GLOBALNA klasa `.mobile-only` z app.css — reguły zakresowej nie da się
   tu użyć, bo `.mobile-only` musi znaczyć to samo na wszystkich ekranach. */
.kanban-card-przenies[b-ggpoluqmxj] {
    border-top: 1px solid var(--line);
    padding: 0.4rem 0.5rem;
    background: var(--cream-2, #f8f3e8);
    flex: 0 0 auto;
}
.kanban-przenies-select[b-ggpoluqmxj] {
    width: 100%;
    min-height: 40px;          /* cel dotyku — palec, nie kursor */
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}
/* /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;
}

/* Na dotyku strzalki i numery stron maja 40 px. Zmierzone przyrzadem Q (21.09.2026):
   32x40 — wysokosc juz z reguly ogolnej, szerokosc nie. To wlasnie w te strone chybia palec,
   bo numery stoja w rzedzie tuz obok siebie. */
@media (pointer: coarse) {
    .pager-btn[b-mhwh0keb2i] { min-width: 40px; min-height: 40px; }
}
/* /Components/Shared/TagChips.razor.rz.scp.css */
/* ── Rząd chipów z tagami (TagChips) ──────────────────────────────────────────
   Zakresowy CSS, bo wszystkie te znaczniki rysuje SAM ten komponent — dlatego
   reguły docierają do lista zadań / karty na tablicy / karty na telefonie tak samo.
   (Wspólna klasa pisana w .razor.css RODZICA do dziecka by nie doszła.)         */

.tag-chips[b-zrmxythrkx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    min-width: 0;

    /* Sufit szerokości rzędu. Bez niego kolumna „Zadanie” w tabeli liczy sobie
       szerokość z całego rzędu chipów w JEDNEJ linii i wypycha pozostałe kolumny
       (układ tabeli jest automatyczny). Z sufitem chipy się zawijają, a kolumna
       nie rośnie ponad ~22rem. Węższe pudełka (karta na tablicy, telefon) i tak
       dostają mniej miejsca — tam sufit nic nie zmienia. */
    max-width: 22rem;
}

/* Kolor i kształt chipa są globalne (.tag w app.css) — tu tylko to, co pilnuje
   szerokości: jedna długa nazwa tagu nie może rozciągnąć wiersza. */
.tag-chips .tag[b-zrmxythrkx] {
    max-width: 11rem;
    min-width: 0;
}

.tag-chips-label[b-zrmxythrkx] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Licznik zwiniętej reszty. Celowo NIE wygląda jak tag — to nie jest tag,
   tylko informacja, że tagów jest więcej (pełna lista w podpowiedzi). */
.tag-chips-more[b-zrmxythrkx] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-soft);
    white-space: nowrap;
    cursor: default;
}
/* /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 rysuje wspólny komponent TagChips (styl w TagChips.razor.css) —
   ten sam co na liście zadań, żeby chip na tablicy i chip w tabeli wyglądały tak samo. */

.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-soft);
    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); }

/* ── Czas w dwóch polach (20.09.2026) ────────────────────────────────────────────────────────
   Te same wymiary i to samo zachowanie, co w rejestrze czasu (`.pc-time-pair` w PanelWpisuCzasu):
   doliczanie czasu z zadania ma wyglądać i działać tak samo, jak wpisywanie go w rejestrze —
   inaczej człowiek uczy się dwóch sposobów na tę samą rzecz. Liczby do prawej i w tabelarycznych
   cyfrach, żeby kolumna godzin się nie kołysała przy wpisywaniu. */
.ttb-time-pair[b-vm86m1h4um] { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; }
.ttb-unit[b-vm86m1h4um] { display: inline-flex; align-items: baseline; gap: 0.25rem; flex: 1; min-width: 0; }
.ttb-unit input[b-vm86m1h4um] { text-align: right; font-variant-numeric: tabular-nums; }
.ttb-unit-label[b-vm86m1h4um] { font-size: 11.5px; color: var(--text-soft); flex: none; }
/* /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 color-mix(in srgb, var(--global-palette1) 18%, transparent);
    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] {
    /* ⚠ Było #eaf5ee — jasnozielony wpisany hexem, więc motyw ciemny nie miał czym go podmienić.
       Zmierzone na /board w motywie ciemnym: temat zgłoszenia rgb(232,229,219) na tym tle to
       1,13 : 1, klient rgb(168,172,179) — 2,04 : 1. Karta nieprzeczytana, czyli dokładnie ta,
       którą trzeba przeczytać najpilniej, była nieczytelna. `--ok-bg` to ten sam ton w motywie
       jasnym (#e3f4eb) i ma swój odpowiednik w ciemnym. */
    background: var(--ok-bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--global-palette1) 28%, transparent);
}

.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-soft);
    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;
}

/* Nazwa klienta — JEDNA linia.
   ⚠ Do 03.09.2026 jedyna linia tekstu na karcie bez ograniczenia. Temat ma dwie linie, zajawka
   jedną, a nazwa rosła bez granicy: na stanowisku dwie karty w kolumnie ZAMKNIĘTE były trzy razy
   wyższe od reszty. Nie trzeba do tego śmieciowych danych — „Przedsiębiorstwo Wielobranżowe …
   Spółka z ograniczoną odpowiedzialnością Sp.k." wystarczy. Kolumna z kartą wysoką na pół ekranu
   przestaje nadawać się do przeglądania, a tablica służy wyłącznie do przeglądania. */
.bcard-cust[b-mlqiu8imxu] {
    font-size: 11.5px;
    color: var(--text-soft);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Podgląd ostatniej wiadomości — jedna linia, dyskretny szary. */
.bcard-preview[b-mlqiu8imxu] {
    font-size: 11px;
    color: var(--text-soft);
    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-soft);
    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-soft);
}

.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-soft);
    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; }
}

/* Na dotyku 38x38 to o dwa piksele za malo, a przelacznik stoi w rzedzie z innymi
   przyciskami paska. Zmierzone przyrzadem Q (21.09.2026). */
@media (pointer: coarse) {
    .vt-btn[b-g4jlwhoipj] { min-width: 40px; min-height: 40px; }
}
/* /Components/Shared/WyborFunkcji.razor.rz.scp.css */
/* Pytanie Tak/Nie o funkcję firmy. Dwie duże odpowiedzi obok siebie — wybiera się całą kartę,
   nie malutkie kółko. Kolory wyłącznie ze zmiennych palety (app.css), także w trybie ciemnym. */

.wybor-funkcji-pole[b-cmw5n8jom7] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.wybor-funkcji-pytanie[b-cmw5n8jom7] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.35rem;
    padding: 0;
}

.wybor-funkcji-wyjasnienie[b-cmw5n8jom7] {
    color: var(--text-soft);
    font-size: 0.9rem;
    margin: 0 0 1rem;
    max-width: 62ch;
}

.wybor-funkcji-opcje[b-cmw5n8jom7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.wybor-funkcji-opcja[b-cmw5n8jom7] {
    position: relative;
    display: block;
    cursor: pointer;
    min-width: 0;
}

/* Samo pole wyboru zostaje w dokumencie (klawiatura, czytnik ekranu), ale nie jest widoczne —
   stan pokazuje karta obok. */
.wybor-funkcji-opcja input[b-cmw5n8jom7] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.wybor-funkcji-karta[b-cmw5n8jom7] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    padding: 1rem 1.1rem 1rem 2.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Kółko odpowiedzi rysowane obok tytułu — pełne, gdy wybrane. */
.wybor-funkcji-karta[b-cmw5n8jom7]::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1.15rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--line-faint);
    background: var(--paper);
}

.wybor-funkcji-opcja:hover .wybor-funkcji-karta[b-cmw5n8jom7] {
    border-color: var(--p1);
}

.wybor-funkcji-opcja input:checked + .wybor-funkcji-karta[b-cmw5n8jom7] {
    border-color: var(--p1);
    box-shadow: inset 0 0 0 1px var(--p1);
    background: var(--ok-bg);
}

.wybor-funkcji-opcja input:checked + .wybor-funkcji-karta[b-cmw5n8jom7]::before {
    border-color: var(--p1);
    background: var(--p1);
    box-shadow: inset 0 0 0 3px var(--paper);
}

.wybor-funkcji-opcja input:focus-visible + .wybor-funkcji-karta[b-cmw5n8jom7] {
    outline: 2px solid var(--p1);
    outline-offset: 2px;
}

.wybor-funkcji-pole:disabled .wybor-funkcji-opcja[b-cmw5n8jom7] {
    cursor: not-allowed;
    opacity: 0.75;
}

.wybor-funkcji-tytul[b-cmw5n8jom7] {
    font-weight: 600;
    color: var(--text);
}

.wybor-funkcji-opis[b-cmw5n8jom7] {
    font-size: 0.875rem;
    color: var(--text-soft);
    line-height: 1.45;
}

.wybor-funkcji-akcje[b-cmw5n8jom7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

@media (max-width: 768px) {
    .wybor-funkcji-opcje[b-cmw5n8jom7] {
        grid-template-columns: minmax(0, 1fr);
    }

    .wybor-funkcji-akcje[b-cmw5n8jom7] {
        justify-content: stretch;
    }

    .wybor-funkcji-akcje .btn[b-cmw5n8jom7] {
        flex: 1 1 auto;
        justify-content: center;
    }
}