/* Shared containment rules preserve the existing colors, components and controls. */
body.layout :is(.main-content, .content, .page-stack, .panel-grid, .section-grid,
    .panel-card, .panel-body, .card, .table-card, .toolbar-field, .detail-grid) {
    min-width: 0;
}
body.layout :is(.panel-grid, .section-grid, .metrics-grid, .detail-grid,
    .admin-app-grid, .admin-app-detail-grid) > * {
    min-width: 0;
}
body.layout .table-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
body.layout .table-wrap:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}
body.layout .telecom-table {
    table-layout: auto;
}
body.layout .telecom-table :is(th, td) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
    line-height: 1.45;
}
body.layout .telecom-table :is(.record-strong, .record-muted) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Let short labels determine their minimum width; wrap customer-entered text. */
body.layout .telecom-table th {
    overflow-wrap: normal;
    word-break: normal;
}
body.layout .telecom-table :is(th, td):not([colspan]) {
    min-width: 6rem;
}
body.layout .telecom-table :is(.col-actions, .actions-cell) {
    width: 6rem;
    white-space: normal;
}
body.layout .telecom-table .btn {
    min-width: max-content;
    white-space: nowrap;
    overflow-wrap: normal;
    text-align: center;
}
body.layout .telecom-table :is(.badge, .status-pill) {
    box-sizing: border-box;
    width: max-content;
    min-width: min-content;
    max-width: 12rem;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.4;
    text-align: center;
    border-radius: 0.65rem;
}
body.layout .telecom-table .record-reference {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
body.layout .telecom-table .record-stack {
    min-width: 0;
}
body.layout .admin-installations-table .address-preview {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    text-overflow: clip;
}
body.layout .admin-installations-table td:has(.record-stack) {
    min-width: 8.5rem;
}
body.layout .admin-installations-table .badge {
    max-width: 10rem;
}
body.layout .admin-installations-table .schedule-cell {
    min-width: 8rem;
}
body.layout .telecom-table :is(select, input) {
    min-width: 0;
    max-width: 100%;
}
body.layout :is(.record-strong, .record-muted, .detail-value, .info-value,
    .admin-app-value, .admin-app-detail-value, .tracking-meta, .ticket-message,
    .chat-ui__message-text, .notif-item, .section-title-card, .panel-subtitle) {
    overflow-wrap: anywhere;
}
body.layout :is(.toolbar-row, .toolbar-actions, .admin-ticket-actions) {
    flex-wrap: wrap;
}
body.layout :is(.toolbar-field, .toolbar-field.grow) {
    min-width: 0;
    max-width: 100%;
}
body.layout :is(.toolbar-field, .admin-ticket-actions) :is(input, select) {
    min-width: 0;
    max-width: 100%;
}
body.layout :is(.admin-ticket-modal__dialog, .notifications-overlay__dialog,
    .admin-app-map-modal__dialog) {
    max-width: 100%;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
@media (max-width: 640px) {
    body.layout .toolbar-field {
        flex-basis: 100%;
        width: 100%;
    }
    body.layout :is(.grid-4, .metrics-grid, .quick-link-grid, .ticket-queue-overview__grid) {
        grid-template-columns: minmax(0, 1fr);
    }
    body.layout :is(.section-title-card, .panel-header) {
        flex-wrap: wrap;
    }
    body.layout .telecom-table :is(th, td) {
        font-size: 0.875rem;
    }
}

/* Long customer-entered strings must not determine a grid or flex item's width. */
body.layout .main-content {
    overflow-wrap: anywhere;
}
body.layout :is(.ticket-detail-layout, .ticket-detail-main, .ticket-detail-sidebar,
    .ticket-detail-card, .ticket-detail-hero__top, .ticket-detail-hero__meta,
    .ticket-detail-thread, .ticket-detail-message, .profile-hero-copy,
    .profile-hero-card, .workflow-header-main, .workflow-card,
    .workflow-layout, .admin-app-summary-item) {
    min-width: 0;
}
body.layout :is(.ticket-detail-hero__top, .ticket-detail-hero__meta,
    .profile-hero-card, .workflow-title-row) > * {
    min-width: 0;
}
body.layout .table-wrap .admin-technicians-table {
    min-width: 1000px;
}
body.layout .telecom-table .next-schedule {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 760px) {
    body.layout .admin-app-progress {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        overflow: visible;
    }
    body.layout .admin-app-progress-step {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        align-items: start;
        gap: 0.85rem;
    }
    body.layout .admin-app-progress-marker {
        display: block;
    }
    body.layout .admin-app-progress-line {
        display: none;
    }
}

/* Keep the map close button above the fixed navigation on short screens. */
body.layout .admin-app-map-modal {
    z-index: 1400;
}

/* Ticket lists have different columns by role. Keep controls compact and let
   the subject use the remaining width instead of stretching the Action cell. */
body.layout .telecom-table.ticket-list-table {
    table-layout: fixed;
    min-width: 64rem;
}
body.layout .telecom-table.ticket-list-table--admin {
    min-width: 86rem;
}
body.layout .ticket-list-table .ticket-col-reference { width: 11rem; }
body.layout .ticket-list-table .ticket-col-person { width: 16%; }
body.layout .ticket-list-table--admin .ticket-col-reference { width: 11rem; }
body.layout .ticket-list-table--admin .ticket-col-customer { width: 12%; }
body.layout .ticket-list-table--admin .ticket-col-assignee { width: 18%; }
body.layout .ticket-list-table .ticket-col-urgency { width: 7rem; }
body.layout .ticket-list-table .ticket-col-status { width: 11rem; }
body.layout .ticket-list-table--admin .ticket-col-status { width: 14%; }
body.layout .ticket-list-table--customer .ticket-col-status { width: 8.5rem; }
body.layout .ticket-list-table--customer .ticket-col-person { width: 14%; }
body.layout .ticket-list-table .ticket-col-submitted { width: 11rem; }
body.layout .ticket-list-table .ticket-col-action { width: 6rem; }
body.layout .ticket-list-table :is(th, td) {
    padding: 0.75rem 0.8rem;
    vertical-align: middle;
}
body.layout .ticket-list-table :is(th, td):last-child:not([colspan]) {
    text-align: center;
}
body.layout .ticket-list-table .badge {
    max-width: 100%;
}
body.layout .ticket-list-table--customer .customer-ticket-status-cell .badge {
    white-space: nowrap;
}
body.layout .customer-ticket-filter-toolbar .customer-ticket-status-field {
    flex: 0 0 14rem;
}
body.layout .customer-ticket-filter-toolbar .customer-ticket-search-field {
    min-width: min(100%, 24rem);
}

/* Mobile-only header controls. Existing desktop selectors above stay unchanged. */
body.layout .mobile-header-action { display: none; }

@media (max-width: 900px) {
    /* Reuse the 74px header and 1024px sidebar breakpoint. */
    body.layout:is(.is-auth, .is-guest) .navbar {
        height: 74px;
        min-height: 74px;
        padding: 0 0.75rem;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
    }
    body.layout:is(.is-auth, .is-guest) .navbar-left {
        min-width: 0;
        flex: 1 1 auto;
        gap: 0.5rem;
    }
    body.layout:is(.is-auth, .is-guest) .navbar-right {
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
        gap: 0.25rem;
    }
    body.layout .logo, body.layout .logo-copy { min-width: 0; }
    body.layout .logo { gap: 0.5rem; }
    body.layout .logo-copy small { overflow-wrap: anywhere; }
    body.layout .user-meta { max-width: 12rem; min-width: 0; }
    body.layout .user-meta strong {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.layout:is(.is-auth, .is-guest) .navbar .icon-btn {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        padding: 0;
        color: #fff7d9;
    }
    body.layout:is(.is-auth, .is-guest) .navbar .icon-btn:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }
    body.layout .mobile-header-action { display: inline-flex; }
    body.layout.is-guest .logo-mark { width: 40px; height: 40px; flex-shrink: 0; }
    body.layout.is-guest .guest-nav-wrap {
        display: none;
        position: absolute;
        top: 100%;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        margin: 0;
        padding: 0.75rem;
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--color-border);
        border-radius: 0 0 14px 14px;
        background: #001840;
        box-shadow: var(--shadow-md);
    }
    body.layout.is-guest .guest-nav-wrap.is-open { display: grid; gap: 0.75rem; }
    body.layout.is-guest .guest-nav {
        display: grid;
        width: 100%;
        order: 0;
        gap: 0.25rem;
        overflow: visible;
        white-space: normal;
    }
    body.layout.is-guest .guest-nav a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
    }
    body.layout.is-guest .guest-nav a:is(:hover, :focus-visible) {
        color: var(--color-accent);
        background: rgba(255, 255, 255, 0.08);
    }
    body.layout.is-guest .guest-actions {
        display: none;
    }
    body.layout.is-guest .main-content { padding-top: 90px; }
    body.layout .public-home [id] { scroll-margin-top: 90px; }
    body.layout .sidebar { max-width: calc(100vw - 3rem); overscroll-behavior: contain; }

    /* Preserve all table columns and contain scrolling inside their existing wrapper. */
    body.layout .table-wrap { scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    body.layout .table-wrap .btn { min-height: 44px; }
    body.layout :is(.form-group, .apply-field, .field, .chat-ui__panel, .chat-ui__context-card) { min-width: 0; }
    body.layout :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }
    body.layout :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) {
        min-height: 44px;
    }
    body.layout input[type="file"]:not(#chat_attachment):not([hidden]) { max-width: 100%; }
    body.layout :is(.toolbar-actions, .pagination, .pagination-links) { flex-wrap: wrap; }
    body.layout :is(.error, .alert, .notifications-page-message) { overflow-wrap: anywhere; }
    body.layout :is(.login-modal-dialog, .register-modal-dialog, .chat-ui__modal-dialog) {
        max-width: 100%;
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
    }

    /* Chat behavior and markup stay intact: only flex/grid sizing changes. */
    body.layout .chat-ui :is(.chat-ui__layout, .chat-ui__panel, .chat-ui__panel-grid,
        .chat-ui__thread-card, .chat-ui__context-card, .chat-ui__message-bubble,
        .chat-ui__system-banner, .chat-ui__message-meta) { min-width: 0; }
    body.layout .chat-ui :is(.chat-ui__panel-head, .chat-ui__conversation-top, .chat-ui__message-meta) { flex-wrap: wrap; }
    body.layout .chat-ui :is(.chat-ui__panel-head, .chat-ui__context-item, .chat-ui__message-attachment, .chat-ui__attachment-control) {
        overflow-wrap: anywhere;
    }
    body.layout .chat-ui .chat-ui__thread-card {
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }
    body.layout .chat-ui .chat-ui__messages {
        min-height: 5rem;
        overscroll-behavior-y: contain;
        overflow-wrap: anywhere;
    }
    body.layout .chat-ui .chat-ui__quick-replies {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-bottom: 0.35rem;
        scrollbar-width: thin;
    }
    body.layout .chat-ui .chat-ui__quick-reply {
        flex: 0 0 auto;
        max-width: 16rem;
        min-height: 44px;
        white-space: normal;
    }
    body.layout .chat-ui .chat-ui__composer { flex: 0 0 auto; }
    body.layout .chat-ui .chat-ui__composer textarea { max-height: 8rem; }
    body.layout .chat-ui :is(.chat-ui__button, .chat-ui__attachment-button, .chat-ui__sidebar-toggle) { min-height: 44px; }
    body.layout .chat-ui .chat-ui__attachment-control:focus-within { outline: 2px solid #93c5fd; outline-offset: 2px; }
    body.layout .chat-ui .chat-ui__message-bubble { max-width: 100%; }
    body.layout .chat-ui .chat-ui__context-item { min-width: 0; max-width: 100%; }
    body.layout .chat-ui .chat-ui__sidebar-toggle { display: flex; }
    body.layout .chat-ui .chat-ui__sidebar-shell:not([open]) .chat-ui__sidebar { display: none; }
}

@media (max-width: 700px) {
    body.layout .customer-ticket-filter-toolbar .customer-ticket-status-field {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 640px) {
    body.layout:is(.is-auth, .is-guest) .navbar { padding-inline: 0.5rem; gap: 0.25rem; }
    body.layout:is(.is-auth, .is-guest) .navbar-left { gap: 0.25rem; }
    body.layout:is(.is-auth, .is-guest) .navbar .logo-copy strong { font-size: 0.875rem; white-space: nowrap; }
    body.layout:is(.is-auth, .is-guest) .navbar .logo-copy small { display: none; }
    body.layout:is(.is-auth, .is-guest) .navbar-right { gap: 0; }
    body.layout .main-content { padding-inline: 0.75rem; }
    body.layout.is-guest .main-content { padding-inline: 0; }
    body.layout :is(.btn, .btn-link) { min-height: 44px; }
    body.layout .chat-ui .chat-ui__shell { padding: 0.65rem; }
    body.layout .chat-ui :is(.chat-ui__panel, .chat-ui__thread-card) { padding: 0.65rem; }
    body.layout .chat-ui .chat-ui__attachment-control { gap: 0.4rem; }
    body.layout .chat-ui .chat-ui__attachment-control [data-chat-attachment-name] { flex-basis: 100%; }
}

/* Mobile filter drawers and card tables. Base rules are inert on desktop. */
body.layout .mobile-filter-trigger,
body.layout .mobile-filter-overlay {
    display: none;
}
body.layout .mobile-table-only {
    display: none !important;
}

@media (max-width: 767px) {
    body.layout.mobile-filter-open {
        overflow: hidden;
    }
    body.layout .mobile-filter-trigger {
        display: flex;
        width: 100%;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.7rem 0.9rem;
        border: 1px solid var(--color-border);
        border-radius: 12px;
        background: linear-gradient(180deg, #ffffff, #f8fbff);
        color: var(--color-primary);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06);
    }
    body.layout .mobile-filter-trigger:focus-visible {
        outline: 2px solid var(--color-secondary);
        outline-offset: 2px;
    }
    body.layout .mobile-filter-trigger__label {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
    }
    body.layout .mobile-filter-trigger__label svg {
        width: 1.2rem;
        height: 1.2rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }
    body.layout .mobile-filter-trigger__count,
    body.layout .mobile-filter-trigger__hint {
        min-width: 0;
        color: var(--color-text-muted);
        font-size: 0.78rem;
        font-weight: 600;
        text-align: right;
    }
    body.layout .mobile-filter-trigger__count {
        padding: 0.25rem 0.5rem;
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.1);
        color: #1d4ed8;
    }
    body.layout .mobile-filter-overlay.is-open {
        position: fixed;
        z-index: 1800;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    body.layout .mobile-filter__backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(2, 12, 35, 0.62);
        cursor: default;
    }
    body.layout .mobile-filter__sheet {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        width: min(100%, 40rem);
        max-height: min(82dvh, 42rem);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 20px 20px 0 0;
        background: #ffffff;
        box-shadow: 0 -18px 48px rgba(2, 12, 35, 0.24);
        overflow: hidden;
    }
    body.layout .mobile-filter__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1rem 0.85rem;
        border-bottom: 1px solid var(--color-border);
    }
    body.layout .mobile-filter__eyebrow {
        display: block;
        margin-bottom: 0.15rem;
        color: var(--color-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    body.layout .mobile-filter__header h2 {
        margin: 0;
        color: var(--color-primary);
        font-size: 1.25rem;
    }
    body.layout .mobile-filter__close {
        display: inline-grid;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        place-items: center;
        padding: 0;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        background: #f8fafc;
        color: var(--color-primary);
        font: inherit;
        font-size: 1.65rem;
        line-height: 1;
        cursor: pointer;
    }
    body.layout .mobile-filter__close:focus-visible {
        outline: 2px solid var(--color-secondary);
        outline-offset: 2px;
    }
    body.layout .mobile-filter__body {
        padding: 1rem;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    body.layout .mobile-filter__body .toolbar-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 0.9rem;
        width: 100%;
    }
    body.layout .mobile-filter__body :is(.toolbar-field, .toolbar-field.grow) {
        width: 100%;
        min-width: 0;
    }
    body.layout .mobile-filter__body .toolbar-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
        gap: 0.65rem;
        padding-top: 0.2rem;
    }
    body.layout .mobile-filter__body .toolbar-actions :is(.btn, button, a) {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 639px) {
    body.layout .table-wrap.mobile-card-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] {
        display: block;
        width: 100%;
        min-width: 0 !important;
        table-layout: auto;
        background: transparent;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] colgroup,
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] thead {
        display: none;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] tbody {
        display: grid;
        gap: 0.85rem;
        width: 100%;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] tbody tr {
        display: grid;
        width: 100%;
        min-width: 0;
        padding: 0.2rem 0.85rem;
        border: 1px solid var(--color-border);
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 7px 20px rgba(15, 23, 42, 0.06);
        overflow: hidden;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] tbody td:not([colspan]) {
        display: grid;
        grid-template-columns: minmax(6.8rem, 0.78fr) minmax(0, 1.22fr);
        align-items: start;
        gap: 0.7rem;
        width: auto !important;
        min-width: 0 !important;
        max-width: none;
        padding: 0.62rem 0;
        border: 0;
        border-bottom: 1px solid rgba(203, 213, 225, 0.72);
        background: transparent;
        color: var(--color-primary);
        text-align: left !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] tbody td:not([colspan])::before {
        content: attr(data-mobile-label);
        color: var(--color-text-muted);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.45;
        text-transform: uppercase;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] tbody td:last-child:not([colspan]) {
        border-bottom: 0;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] tbody td.mobile-table-only {
        display: grid !important;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] :is(.record-stack, .record-strong, .record-muted, .badge, .status-pill) {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] .actions-cell .btn,
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] td:last-child:not([colspan]) .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] tbody tr.mobile-card-empty {
        display: block;
        padding: 0;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] tbody tr.mobile-card-empty td[colspan] {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
    }
    body.layout .telecom-table.mobile-card-ready[data-mobile-cards] tbody tr.mobile-card-empty td[colspan]::before {
        content: none;
    }
}

/* Responsive notifications and compact chat filters. Desktop presentation stays unchanged. */
body.layout .notifications-mobile-controls,
body.layout .notifications-mobile-page-filters {
    display: none;
}

@media (max-width: 1024px) {
    body.layout .notif-dropdown {
        position: fixed;
        top: 82px;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 94px);
    }
    body.layout #notifDropdownList {
        max-height: calc(100dvh - 190px);
    }
    body.layout .notifications-overlay {
        padding: 0.75rem;
    }
    body.layout .notifications-overlay__dialog {
        width: min(100%, 760px);
        max-height: calc(100dvh - 1.5rem);
        overflow: hidden;
    }
    body.layout .notifications-overlay__shell {
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        max-height: calc(100dvh - 1.5rem);
        overflow: hidden;
    }
    body.layout .notifications-overlay__filters,
    body.layout .notifications-compact-filters--desktop {
        display: none;
    }
    body.layout .notifications-mobile-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.45fr);
        gap: 0.7rem;
        align-items: end;
    }
    body.layout .notifications-mobile-controls label,
    body.layout .notifications-mobile-page-filters label {
        display: grid;
        min-width: 0;
        gap: 0.35rem;
        color: var(--color-text-muted);
        font-size: 0.76rem;
        font-weight: 700;
    }
    body.layout .notifications-mobile-controls :is(input, select),
    body.layout .notifications-mobile-page-filters :is(input, select) {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }
    body.layout .notifications-overlay__list {
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    body.layout .notifications-mobile-page-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.45fr) auto;
        gap: 0.7rem;
        align-items: end;
        padding: 1rem 0 0.35rem;
    }
    body.layout .notifications-mobile-page-actions {
        display: flex;
        gap: 0.5rem;
    }
    body.layout .notifications-mobile-page-actions .btn {
        min-height: 44px;
    }
}

@media (max-width: 768px) {
    body.layout .notifications-overlay {
        align-items: flex-end;
        padding: 0;
    }
    body.layout .notifications-overlay__dialog {
        width: 100%;
        max-width: none;
        max-height: min(88dvh, 46rem);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 20px 20px 0 0;
    }
    body.layout .notifications-overlay__shell {
        max-height: min(88dvh, 46rem);
        gap: 0.75rem;
        padding: 0.9rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    }
    body.layout .notifications-overlay__close {
        top: 0.7rem;
        right: 0.75rem;
        width: 44px;
        height: 44px;
    }
    body.layout .notifications-overlay__head {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.6rem 0.75rem;
        padding-right: 3.45rem;
    }
    body.layout .notifications-overlay__head h2 {
        font-size: 1.3rem;
    }
    body.layout .notifications-overlay__head p {
        display: none;
    }
    body.layout .notifications-overlay__head form {
        margin-left: auto;
    }
    body.layout .notifications-overlay__head .btn {
        width: auto;
        min-height: 44px;
        padding: 0.55rem 0.75rem;
        font-size: 0.78rem;
    }
    body.layout .notifications-mobile-controls {
        grid-template-columns: minmax(0, 1fr) minmax(8.2rem, 0.48fr);
        gap: 0.55rem;
    }
    body.layout .notifications-mobile-controls label > span {
        font-size: 0.7rem;
    }
    body.layout .notifications-overlay__list {
        padding-right: 0.15rem;
    }
    body.layout .notifications-overlay__list .notifications-compact-item,
    body.layout .notifications-compact-list .notifications-compact-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 0.65rem;
        padding: 0.75rem;
        border-radius: 14px;
    }
    body.layout .notifications-overlay__list .notifications-page-title,
    body.layout .notifications-compact-list .notifications-page-title {
        font-size: 0.9rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    body.layout .notifications-overlay__list .notifications-page-message,
    body.layout .notifications-compact-list .notifications-page-message {
        font-size: 0.82rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
    body.layout .notifications-overlay__list .notifications-page-time,
    body.layout .notifications-compact-list .notifications-page-time {
        font-size: 0.75rem;
    }
    body.layout .notifications-compact-card {
        padding: 0.75rem;
    }
    body.layout .notifications-compact-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
    body.layout .notifications-compact-head h1 {
        font-size: 1.45rem;
    }
    body.layout .notifications-compact-head form,
    body.layout .notifications-compact-head .btn {
        width: 100%;
    }
    body.layout .notifications-mobile-page-filters {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-top: 0.8rem;
    }
    body.layout .notifications-mobile-page-filters .notifications-mobile-search {
        grid-column: 1 / -1;
    }
    body.layout .notifications-mobile-page-actions {
        justify-content: flex-end;
    }
    body.layout .notifications-mobile-page-actions .btn {
        min-width: 5.5rem;
        padding-inline: 0.7rem;
    }
    body.layout .notifications-compact-card > .panel-body {
        padding: 0.85rem 0 0;
    }

    body.layout .chat-ui .chat-ui__filters.is-compact,
    body.layout .chat-ui .chat-ui__filters.is-compact.has-scope {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 0.5rem;
    }
    body.layout .chat-ui .chat-ui__filters.is-compact > input {
        grid-column: 1 / -1;
        min-height: 44px;
    }
    body.layout .chat-ui .chat-ui__filters.is-compact.has-scope > select {
        grid-column: 1;
        min-width: 0;
        min-height: 44px;
    }
    body.layout .chat-ui .chat-ui__filters.is-compact .chat-ui__filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        gap: 0.45rem;
    }
    body.layout .chat-ui .chat-ui__filters.is-compact.has-scope .chat-ui__filter-actions {
        grid-column: 2;
    }
    body.layout .chat-ui .chat-ui__filters.is-compact .chat-ui__filter-actions .chat-ui__button {
        width: auto;
        min-width: 4.75rem;
        min-height: 44px;
        padding: 0.5rem 0.7rem;
    }
}

@media (max-width: 420px) {
    body.layout .notifications-mobile-controls {
        grid-template-columns: minmax(0, 1fr) minmax(7.6rem, 0.48fr);
    }
    body.layout .notifications-overlay__head form {
        width: 100%;
        margin-left: 0;
    }
    body.layout .notifications-overlay__head .btn {
        width: 100%;
    }
}
/* Ticket queues: compact status navigation, tablet overflow, and mobile cards. */
body.layout .telecom-table.ticket-list-table,
body.layout .telecom-table.ticket-list-table--admin {
    min-width: 0;
}
@media (max-width: 1100px) and (min-width: 640px) {
    body.layout .ticket-filter-toolbar--admin,
    body.layout .ticket-filter-toolbar--technician {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.layout .ticket-filter-toolbar .ticket-filter-search {
        grid-column: 1 / -1;
    }
    body.layout .ticket-filter-toolbar .toolbar-actions {
        justify-content: flex-start;
    }
    body.layout .telecom-table.ticket-list-table--admin {
        min-width: 68rem;
    }
    body.layout .telecom-table.ticket-list-table--technician {
        min-width: 58rem;
    }
}
@media (max-width: 900px) {
    body.layout .ticket-queue-overview__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    body.layout .mobile-filter__body .ticket-filter-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }
    body.layout .ticket-queue-overview {
        padding: 0.85rem;
    }
    body.layout .ticket-queue-metric {
        min-height: 62px;
        padding: 0.65rem 0.75rem;
    }
}
@media (max-width: 520px) {
    body.layout .ticket-queue-overview__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.layout .ticket-queue-metric__label {
        font-size: 0.7rem;
        letter-spacing: 0.05em;
    }
    body.layout .ticket-queue-metric__value {
        min-width: 2rem;
        font-size: 1.05rem;
    }
}
@media (max-width: 639px) {
    body.layout .telecom-table.ticket-list-table {
        min-width: 0;
    }
    body.layout .telecom-table.ticket-list-table :is(.col-actions, .actions-cell) {
        position: static;
        width: auto;
        min-width: 0;
        border-left: 0;
        background: transparent;
        box-shadow: none;
    }
    body.layout .ticket-list-table .ticket-submitted-cell > span,
    body.layout .ticket-list-table .ticket-submitted-cell > small {
        display: block;
    }
}