:root {
    color-scheme: light;
    --ink: #17283c;
    --muted: #52647a;
    --canvas: #f3f6fa;
    --surface: #fff;
    --line: #dbe3ed;
    --subtle-line: #e8edf4;
    --blue: #214fc6;
    --blue-dark: #173da5;
    --blue-wash: #edf3ff;
    --navy: #152c50;
    --danger: #a3293a;
    --radius: 12px;
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
    background: var(--canvas);
    font-size: 100%;
    line-height: 1.5;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 0; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
a { color: var(--blue); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: #d9e6ff; color: var(--navy); }
h1, h2, h3, p, dl { margin: 0; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }
input::placeholder, textarea::placeholder { color: #62748b; opacity: 1; }

.icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -.17em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon-sprite { position: absolute; }
.boot-state { padding: 2rem; color: var(--muted); text-align: center; }

.skip-link {
    position: absolute;
    z-index: 3;
    top: .75rem;
    left: .75rem;
    padding: .65rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.app-shell { min-height: 100dvh; display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); }
.sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    padding: 1.35rem 1rem 1rem;
    border-right: 1px solid var(--line);
    background: var(--surface);
}
.brand, .login-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .68rem;
    color: inherit;
    text-decoration: none;
}
.brand { margin: 0 .4rem 1.1rem; }
.brand-mark {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border-radius: 9px;
    background: var(--blue);
    color: #fff;
    font-size: 1.35rem;
}
.brand-mark .icon { width: 1.3rem; height: 1.3rem; }
.brand-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 1.06rem; font-weight: 750; }
.brand-copy small, .brand-copy > span { margin-top: .18rem; color: var(--muted); font-size: .74rem; }
.sidebar-section-label { padding: 0 .7rem; color: var(--muted); font-weight: 650; font-size: .75rem; }
.sidebar-nav { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.nav-link {
    display: flex;
    width: 100%;
    min-height: 2.65rem;
    gap: .64rem;
    align-items: center;
    text-align: left;
    padding: .58rem .72rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 640;
}
.nav-link:hover { background: var(--canvas); color: var(--ink); }
.nav-link.is-active, .nav-link[aria-current="page"] { background: var(--blue-wash); color: var(--blue-dark); border-color: #e2eaff; }
.sidebar-bottom { margin-top: auto; min-width: 0; padding-top: .8rem; border-top: 1px solid var(--subtle-line); }
.account { display: flex; min-width: 0; align-items: center; gap: .52rem; }
.account-copy { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.account-copy > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account-copy strong { font-size: .81rem; }
.account-copy small, .account-copy span { color: var(--muted); font-size: .75rem; }
.avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    color: var(--blue-dark);
    background: #e7efff;
    font-size: .76rem;
    font-weight: 750;
}
.icon-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 1rem;
}
.icon-button:hover { border-color: var(--line); background: var(--canvas); color: var(--ink); }

.workspace, .main-content { min-width: 0; }
.topbar {
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 2.1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    font-size: .82rem;
}
.breadcrumb, .topbar-end { display: flex; align-items: center; gap: .55rem; min-width: 0; color: var(--muted); }
.breadcrumb strong, .breadcrumb [aria-current] { color: var(--ink); font-weight: 650; }
.topbar-end > :not(.demo-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-company .icon { margin-right: .25rem; }
.demo-badge {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .2rem .58rem;
    border: 1px solid #e8d7a0;
    border-radius: 6px;
    background: #fff8e5;
    color: #725009;
    font-size: .75rem;
    font-weight: 650;
    white-space: nowrap;
}
.main-content { width: 100%; max-width: 96rem; margin-inline: auto; padding: 1.9rem 2.1rem 2rem; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.32rem; }
.page-heading > div { min-width: 0; }
.page-heading h1 { font-size: 2rem; font-weight: 750; }
.page-heading p { margin-top: .35rem; color: var(--muted); font-size: .92rem; }

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    min-height: 2.65rem;
    padding: .5rem .92rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: .875rem;
    font-weight: 650;
    text-decoration: none;
}
.button:hover { border-color: #c3d1e1; background: #f6f8fc; }
.button-primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.button-primary:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
.button:active { filter: brightness(.94); }
.page-heading .button { flex: 0 0 auto; }

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 1.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.metric { min-width: 0; padding: .95rem 1rem .9rem; }
.metric + .metric { border-left: 1px solid var(--subtle-line); }
.metric-top { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .84rem; font-weight: 650; }
.metric-icon {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    border-radius: 6px;
    background: #eaf1ff;
    color: #2753bf;
}
.tone-amber .metric-icon { background: #fff4df; color: #845008; }
.tone-violet .metric-icon { background: #f1edff; color: #6543aa; }
.tone-green .metric-icon { background: #e8f5ed; color: #24704d; }
.metric-number { display: block; margin-top: .35rem; font-size: 1.8rem; line-height: 1.22; font-weight: 750; font-variant-numeric: tabular-nums; }
.metric-note { display: block; margin-top: .2rem; color: var(--muted); font-size: .76rem; }

.data-panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.15rem .85rem; }
.panel-heading h2 { font-size: 1.04rem; font-weight: 730; }
.panel-heading p { margin-top: .22rem; color: var(--muted); font-size: .8rem; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: 0 1.15rem .9rem; }
.search-field, .filter-field { display: flex; align-items: center; position: relative; color: var(--muted); }
.search-field { width: min(100%, 22rem); }
.search-field > .icon, .filter-field > .icon { position: absolute; left: .7rem; pointer-events: none; }
.search-field input, .filter-field select, .field :is(input, select, textarea), .reply-form :is(select, textarea) {
    min-width: 0;
    width: 100%;
    min-height: 2.55rem;
    padding: .52rem .66rem;
    border: 1px solid #8192a9;
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: .875rem;
}
.search-field input { padding-left: 2.1rem; }
.filter-field select { min-width: 8rem; appearance: none; padding-right: 1.95rem; }
.filter-field > .icon { right: .65rem; left: auto; width: .95rem; }
.toolbar-filters { display: flex; gap: .5rem; }
.table-scroll { overflow: auto; overscroll-behavior-x: contain; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .85rem; }
.data-table thead { background: #f6f8fc; }
.data-table th, .data-table td { padding: .68rem .62rem; border-top: 1px solid var(--subtle-line); vertical-align: middle; }
.data-table th { color: var(--muted); font-size: .77rem; font-weight: 700; white-space: nowrap; }
.data-table :is(th, td):first-child { padding-left: 1.15rem; }
.data-table :is(th, td):last-child { padding-right: 1.15rem; }
.data-table tbody tr:hover { background: #f8faff; }
.ticket-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    text-align: left;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.ticket-link:hover { color: var(--blue); text-decoration: underline; text-underline-offset: .17em; }
.ticket-id { color: var(--muted); white-space: nowrap; font-size: .79rem; font-variant-numeric: tabular-nums; font-weight: 650; }
.cell-title, .cell-subtitle { display: block; overflow-wrap: anywhere; }
.cell-title { font-weight: 650; }
.cell-subtitle { margin-top: .1rem; color: var(--muted); font-size: .75rem; }
.table-time { white-space: nowrap; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.row-arrow { color: var(--muted); }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.8rem; padding: .5rem 1.15rem; border-top: 1px solid var(--subtle-line); color: var(--muted); font-size: .8rem; }

.badge { display: inline-flex; align-items: center; gap: .36rem; color: var(--muted); font-size: .74rem; font-weight: 680; white-space: nowrap; }
.status-badge { padding: .17rem .52rem; border-radius: 6px; background: #edf1f5; color: #3f5166; }
.status-badge::before, .priority-badge::before { content: ""; flex: 0 0 auto; width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; }
.status-badge[data-status="new"] { color: #204aaf; background: #eaf1ff; }
.status-badge[data-status="in_progress"] { color: #6243a1; background: #f0ebfb; }
.status-badge[data-status="waiting"] { color: #75500a; background: #fff3d9; }
.status-badge[data-status="resolved"] { color: #206745; background: #e5f4eb; }
.status-badge[data-status="unresolved"] { color: #982b3b; background: #fce9ed; }
.priority-badge[data-priority="high"] { color: #875006; }
.priority-badge[data-priority="urgent"] { color: #a3293a; }

.view-state { padding: 2rem 1.15rem; color: var(--muted); text-align: center; }
.view-state h2, .view-state h3, .view-state strong { color: var(--ink); }
.view-state .button { margin-top: .75rem; }
.view-state .icon { color: var(--blue); }
.state-icon { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; margin: 0 auto .65rem; border-radius: 9px; background: var(--blue-wash); }
.view-state p { margin-top: .22rem; font-size: .88rem; }
.sr-only, .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.login-screen { min-height: 100dvh; display: grid; grid-template-areas: "aside main"; grid-template-columns: minmax(21rem, .87fr) minmax(0, 1.13fr); background: var(--surface); }
.login-aside {
    grid-area: aside;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2.25rem clamp(1.75rem, 4vw, 4.5rem);
    background: var(--navy);
    color: #f8fbff;
}
.login-brand .brand-mark { background: #3967e1; }
.login-brand .brand-copy small, .login-brand .brand-copy > span { color: #c4d5ee; }
.login-mobile-brand { display: none; }
.login-story { margin-top: clamp(2.75rem, 11vh, 7rem); }
.login-story h1, .login-story h2 { max-width: 18ch; font-size: 2.6rem; font-weight: 720; }
.login-story p { max-width: 40ch; margin-top: .9rem; color: #c4d5ee; font-size: .98rem; }
.login-graphic { width: min(100%, 33rem); height: auto; margin-top: 1.4rem; color: #9bbcf7; }
.login-main { grid-area: main; display: grid; place-items: center; padding: 2rem 1.4rem; }
.login-content { width: min(100%, 25rem); }
.login-content h1 { font-size: 2rem; }
.login-heading p { margin: .5rem 0 1.3rem; color: var(--muted); }
.login-content form { display: grid; gap: .95rem; }
.login-content form .button { margin-top: .16rem; width: 100%; }
.login-content .demo-badge { margin-bottom: .6rem; }
.demo-accounts {
    margin-top: 1.05rem;
    padding: .78rem .9rem;
    border: 1px solid #d8e4fc;
    border-radius: 8px;
    background: #f1f6ff;
    color: #2e486c;
    font-size: .82rem;
}
.demo-accounts h2 { font-size: .92rem; }
.demo-accounts p { margin-top: .24rem; }
.demo-account-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .7rem; }
.demo-account-actions .button { align-items: flex-start; flex-direction: column; gap: .08rem; padding: .45rem .58rem; }
.demo-account-actions small { color: var(--muted); font-weight: 500; }

.dialog {
    width: min(39rem, calc(100% - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 20px 55px #132a4a29;
}
.dialog::backdrop { background: #0e213c82; }
.dialog.ticket-detail { width: min(47rem, calc(100% - 2rem)); }
.dialog-shell { min-width: 0; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; padding: 1.1rem 1.25rem .8rem; border-bottom: 1px solid var(--subtle-line); }
.dialog-header h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.dialog-header p { margin-top: .25rem; color: var(--muted); font-size: .84rem; }
.dialog-header .icon-button { margin: -.27rem -.35rem 0 0; }
.ticket-detail .dialog-header { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.dialog-body { display: grid; gap: .85rem; padding: 1rem 1.25rem; }
.dialog-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .55rem; padding: .85rem 1.25rem; border-top: 1px solid var(--subtle-line); }
.field-grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; align-content: start; gap: .32rem; min-width: 0; color: var(--ink); font-size: .86rem; font-weight: 650; }
.field :is(input, select, textarea), .field small { font-weight: 400; }
.field small, .field-help { color: var(--muted); font-size: .78rem; }
.field textarea { resize: vertical; min-height: 6rem; }
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
.form-error { border-radius: 7px; background: #fcecf0; color: var(--danger); padding: .53rem .7rem; font-size: .82rem; overflow-wrap: anywhere; }
.form-error:empty { display: none; }
.form-success { padding: .53rem .7rem; border-radius: 7px; background: #e5f4eb; color: #206745; font-size: .82rem; }
.settings-panel { max-width: 49rem; }
.settings-form { padding: 1.2rem; }
.settings-section {
    display: grid;
    min-inline-size: 0;
    gap: .85rem;
    margin: 0 0 1.15rem;
    padding: 0 0 1.15rem;
    border: 0;
    border-bottom: 1px solid var(--subtle-line);
}
.settings-section legend { margin-bottom: .3rem; padding: 0; color: var(--ink); font-size: 1.03rem; font-weight: 730; }
.settings-section-intro { color: var(--muted); font-size: .85rem; }
.settings-toggle {
    display: flex;
    min-height: 2.75rem;
    align-items: flex-start;
    gap: .65rem;
    padding: .6rem .7rem;
    border: 1px solid var(--subtle-line);
    border-radius: 8px;
    background: #f6f8fc;
    cursor: pointer;
}
.settings-toggle input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: .12rem 0 0; accent-color: var(--blue); }
.settings-toggle span { display: grid; min-width: 0; gap: .15rem; font-size: .86rem; }
.settings-toggle small { color: var(--muted); font-size: .78rem; }
.settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.settings-actions + .settings-section-intro { margin-top: .42rem; }
.settings-feedback { margin-bottom: .65rem; }
.screen-grid { display: grid; align-items: start; gap: 1rem; }
.screen-panel .panel-heading { border-bottom: 1px solid var(--subtle-line); }
.screen-body { min-width: 0; padding: 1rem 1.15rem; }
.screen-body > .view-state { padding: .8rem .25rem; }
.screen-session { display: grid; gap: .8rem; }
.screen-help, .screen-session-meta { color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.screen-session-header, .screen-live-header, .screen-session-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
}
.screen-session-header h3, .screen-live-header h4 { margin: 0; font-size: .99rem; }
.screen-status, .screen-feedback { padding: .55rem .7rem; border: 1px solid #d8e3f9; border-radius: 8px; background: var(--blue-wash); color: #2a456c; font-size: .84rem; }
.screen-feedback.form-error { border-color: #efc9d2; background: #fcecf0; color: var(--danger); }
.screen-feedback.form-success { border-color: #c4dfcf; background: #e5f4eb; color: #206745; }
.screen-status:empty { display: none; }
.screen-live { display: grid; gap: .55rem; }
.screen-video {
    display: block;
    width: 100%;
    max-height: 70dvh;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: #142339;
    object-fit: contain;
}
.screen-video:fullscreen { width: 100%; height: 100%; max-height: none; border-radius: 0; }
.screen-control { display: grid; gap: .65rem; margin-top: .35rem; padding-top: .9rem; border-top: 1px solid var(--subtle-line); }
.screen-control-header, .screen-control-actions, .screen-control-portal, .screen-control-code {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.screen-control-header { justify-content: space-between; }
.screen-control-header h4 { font-size: .98rem; }
.screen-control-status { color: #204aaf; font-size: .82rem; font-weight: 650; }
.screen-control-help { color: var(--muted); font-size: .84rem; }
.screen-control-setup { display: grid; gap: .6rem; }
.screen-control-portal, .screen-control-code { min-width: 0; }
.screen-control-portal code, .screen-control-code output { min-width: 0; overflow-wrap: anywhere; font-size: .82rem; }
.screen-control-surface { min-width: 0; border-radius: 8px; }
.screen-control-surface.is-controlling { outline: 2px solid var(--blue); outline-offset: 2px; cursor: crosshair; }
.screen-control-error { margin: 0; }
.screen-session-list { list-style: none; margin: 0; padding: 0; }
.screen-session-row { padding: .7rem 0; border-bottom: 1px solid var(--subtle-line); }
.screen-session-row:first-child { padding-top: 0; }
.screen-session-row:last-child { padding-bottom: 0; border-bottom: 0; }
.screen-session-row > div { flex: 1 1 11rem; min-width: 0; overflow-wrap: anywhere; }
.screen-row-content { display: grid; gap: .16rem; }
.screen-row-title { font-size: .9rem; }
.screen-row-meta, .screen-row-status { color: var(--muted); font-size: .79rem; }
.topbar-end > .screen-indicator {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .35rem;
    padding: .14rem;
    border: 1px solid #d8e3f9;
    border-radius: 8px;
    background: var(--blue-wash);
    overflow: visible;
}
.topbar:has(.screen-indicator:not([hidden])) { position: sticky; top: 0; z-index: 2; }
.screen-indicator-label { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.3rem; padding: .35rem .55rem; border: 0; border-radius: 6px; background: transparent; color: #204aaf; font-weight: 650; }
.screen-indicator-label:hover { background: #e1ebff; }
.screen-stop-button { border-color: #e5b5c0; color: #a3293a; }
.screen-stop-button:hover { border-color: #d99ca9; background: #fcecf0; color: #842030; }
.screen-indicator .screen-stop-button { min-height: 2.3rem; padding: .25rem .55rem; }
.screen-indicator .screen-control-global { min-height: 2.3rem; padding: .25rem .55rem; border-color: #e5b5c0; color: var(--danger); }
.screen-indicator .screen-control-global:hover { border-color: #d99ca9; background: #fcecf0; }
.file-field input[type="file"] { padding: .25rem .5rem .25rem .25rem; }
.file-field input::file-selector-button {
    min-height: 2rem;
    margin-right: .5rem;
    padding: .25rem .65rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--canvas);
    color: var(--ink);
    cursor: pointer;
}
.file-clear { min-height: 2.25rem; }

.ticket-detail { overflow-wrap: anywhere; }
.detail-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: .7rem; }
.detail-meta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .55rem 1rem; padding-bottom: .7rem; color: var(--muted); font-size: .82rem; }
.detail-meta > div { min-width: 0; }
.detail-meta dt { color: var(--muted); font-size: .76rem; }
.detail-meta dd { margin: .18rem 0 0; color: var(--ink); font-weight: 650; }
.ticket-detail h3 { font-size: .98rem; }
.detail-description { padding: .8rem .92rem; border: 1px solid var(--subtle-line); border-radius: 8px; background: #f6f8fc; }
.detail-description p, .event-body { margin-top: .3rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; }
.attachment-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.attachment { margin: 0; max-width: 100%; }
.attachment-link {
    display: grid;
    width: min(12rem, 100%);
    gap: .25rem;
    padding: .3rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    text-align: center;
}
.attachment-thumb { display: block; width: 100%; height: auto; max-height: 10rem; object-fit: contain; border-radius: 5px; background: var(--canvas); }
.attachment-label { padding: .25rem .35rem; font-size: .82rem; font-weight: 650; }
.whatsapp-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .2rem .75rem;
    margin-top: .8rem;
    padding: .22rem .65rem;
    border: 1px solid #bfdbcc;
    border-radius: 8px;
    background: #eef7f1;
    color: #235338;
}
.whatsapp-copy { font-size: .79rem; }
.whatsapp-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.65rem; color: #175d37; font-size: .86rem; font-weight: 700; }
.whatsapp-link:hover { color: #103c27; }
.screen-ticket-shortcut { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .45rem .65rem; margin-top: .7rem; padding: .5rem .65rem; border: 1px solid #d8e3f9; border-radius: 8px; background: #f2f6ff; }
.screen-ticket-copy { color: #2a456c; font-size: .84rem; }
.detail-history { margin-top: 1.15rem; }
.timeline { list-style: none; margin: .65rem 0 0; padding: 0 0 0 .6rem; }
.timeline-event { position: relative; padding: .1rem 0 .95rem 1rem; border-left: 1px solid #d4dfef; }
.timeline-event::before { content: ""; position: absolute; left: -.29rem; top: .39rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--blue); }
.event-header { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; font-size: .83rem; }
.event-header time, .event-status { color: var(--muted); font-size: .77rem; }
.event-status { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .22rem; }
.reply-form { display: grid; gap: .72rem; padding-top: .9rem; border-top: 1px solid var(--subtle-line); }
.reply-actions { display: flex; justify-content: flex-end; }

@media (min-width: 73rem) {
    .screen-grid:has(#screen-sessions-panel:not([hidden])) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

@media (max-width: 70rem) {
    .topbar { padding-inline: 1.5rem; }
    .main-content { padding-inline: 1.5rem; }
    .metric { padding-inline: .75rem; }
}

@media (max-width: 58rem) {
    .app-shell { grid-template-columns: 12rem minmax(0, 1fr); }
    .sidebar { padding-inline: .65rem; }
    .data-table { min-width: 41rem; }
    .topbar, .main-content { padding-inline: 1rem; }
}

@media (max-width: 48rem) {
    .app-shell { display: block; }
    .sidebar { position: static; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .6rem; padding: .6rem .8rem; border-right: 0; border-bottom: 1px solid var(--line); }
    .brand { margin: 0; }
    .sidebar-section-label, .topbar { display: none; }
    .topbar:has(.screen-indicator:not([hidden])) { display: flex; min-height: 2.8rem; padding: .3rem .8rem; }
    .topbar .breadcrumb, .topbar-end > :not(.screen-indicator) { display: none; }
    .topbar-end, .screen-indicator { width: 100%; }
    .screen-indicator { flex-wrap: wrap; justify-content: space-between; }
    .sidebar-nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
    .nav-link { width: auto; min-height: 2.55rem; }
    .sidebar-bottom { grid-row: 1; grid-column: 2; margin: 0; padding: 0; border: 0; }
    .account { justify-content: end; }
    .account-copy { max-width: 8rem; }
    .main-content { padding: 1.15rem .8rem 1.35rem; }
    .page-heading h1 { font-size: 1.65rem; }
    .page-heading p { font-size: .85rem; }
    .login-screen { display: flex; flex-direction: column; }
    .login-aside { display: none; }
    .login-mobile-brand { display: flex; margin-bottom: 1.4rem; }
    .login-main { padding: 2rem 1.25rem; }
    .search-field input, .filter-field select, .field :is(input, select, textarea) { font-size: 1rem; }
}

@media (max-width: 37rem) {
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric:nth-child(3) { border-left: 0; }
    .metric:nth-child(n+3) { border-top: 1px solid var(--subtle-line); }
    .metric-top { gap: .45rem; }
    .metric-icon { width: 1.68rem; height: 1.68rem; }
    .metric-number { font-size: 1.55rem; }
    .metric-note { display: none; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .search-field { width: 100%; }
    .toolbar-filters > * { flex: 1; min-width: 0; }
    .filter-field select { min-width: 0; }
    .panel-heading, .toolbar, .table-footer { padding-inline: .8rem; }
    #tickets-view .data-table { min-width: 0; table-layout: fixed; }
    #tickets-view .data-table :is(th, td):nth-child(1) { width: 4.2rem; padding-left: .8rem; }
    #tickets-view .data-table :is(th, td):nth-child(4) { width: 6.5rem; padding-right: .65rem; }
    #tickets-view .data-table :is(th, td):is(:nth-child(3), :nth-child(n+5)) { display: none; }
    .ticket-link { display: block; width: 100%; min-height: 2.65rem; }
    .field-grid { grid-template-columns: 1fr; }
    .dialog, .dialog.ticket-detail { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
    .dialog-header, .dialog-body, .dialog-footer { padding-inline: .9rem; }
    .whatsapp-notice { align-items: flex-start; flex-direction: column; gap: 0; padding-bottom: .55rem; }
    .whatsapp-link { order: -1; }
    .settings-form { padding: .9rem; }
    .settings-actions .button { flex: 1 1 auto; }
    .screen-body { padding-inline: .8rem; }
}

@media (max-width: 25rem) {
    .page-heading { flex-wrap: wrap; align-items: flex-start; }
    .account-copy { display: none; }
}