:root {
    color-scheme: light;
    --header-height: 52px;
    --footer-height: 30px;
    --nav-width: 310px;
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #eef3f8;
    --text: #172033;
    --text-muted: #667085;
    --border: #d9dee7;
    --accent: #0d78d7;
    --accent-hover: #0868bd;
    --accent-soft: #dfeefe;
    --danger: #d14343;
    --danger-soft: #fde8e8;
    --success: #16875d;
    --success-soft: #e4f7ef;
    --warning: #a26700;
    --warning-soft: #fff3d8;
    --shadow: 0 1px 3px rgba(15, 23, 42, .08);
    --header-shadow: 0 1px 10px rgba(15, 23, 42, .07);
    --font: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #15181d;
    --surface: #1e2228;
    --surface-2: #242930;
    --surface-3: #2b323b;
    --text: #f2f5f9;
    --text-muted: #a9b3c1;
    --border: #343b45;
    --accent: #42a5f5;
    --accent-hover: #6ab7f8;
    --accent-soft: #263d52;
    --danger: #ff7777;
    --danger-soft: #4d2729;
    --success: #5dd6a5;
    --success-soft: #1d4036;
    --warning: #f8c35c;
    --warning-soft: #4c3b1f;
    --shadow: 0 1px 4px rgba(0, 0, 0, .3);
    --header-shadow: 0 1px 12px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: var(--font); background: var(--bg); color: var(--text); }
body { min-width: 320px; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.j2e-app-shell { height: 100vh; display: grid; grid-template-rows: var(--header-height) minmax(0, 1fr) var(--footer-height); overflow: hidden; }
.j2e-header { display: grid; grid-template-columns: var(--nav-width) minmax(0, 1fr) auto; align-items: center; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--header-shadow); z-index: 140; }
.j2e-header-brand-area { height: 100%; min-width: 0; display: flex; align-items: center; border-right: 1px solid var(--border); }
.j2e-brand { height: 100%; min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-right: 0; }
.j2e-mobile-menu-toggle {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin-left: 8px;
    padding: 9px 8px;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}
.j2e-mobile-menu-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.j2e-mobile-menu-toggle span {
    height: 2px;
    width: 100%;
    display: block;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform .2s ease, opacity .15s ease;
}
.j2e-mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.j2e-mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.j2e-mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.j2e-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(145deg, #1286e6, #035ba9); color: white; font-weight: 800; letter-spacing: -.08em; box-shadow: inset 0 1px rgba(255,255,255,.35), 0 4px 12px rgba(13,120,215,.22); }
.j2e-brand-mark.large { width: 54px; height: 54px; border-radius: 13px; font-size: 1.22rem; }
.j2e-brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.j2e-brand-copy strong { font-size: .9rem; }
.j2e-brand-copy span { color: var(--text-muted); font-size: .74rem; margin-top: 3px; }
.j2e-header-title { min-width: 0; padding: 0 16px; font-weight: 650; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j2e-header-actions { display: flex; align-items: center; gap: 7px; padding-right: 12px; }
.j2e-icon-button { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); display: grid; place-items: center; cursor: pointer; }
.j2e-icon-button:hover { background: var(--accent-soft); color: var(--accent); }
.j2e-user-chip { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 7px; color: var(--text); font-size: .8rem; }
.j2e-user-chip:hover { background: var(--surface-2); color: var(--text); }
.j2e-user-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j2e-logout-form { margin: 0; }

.j2e-workspace {
    min-height: 0;
    display: grid;
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    overflow: hidden;
    transition: grid-template-columns .24s ease;
}
.j2e-sidebar {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--surface);
    border-right: 1px solid var(--border);
    opacity: 1;
    transform: translateX(0);
    transition: transform .24s ease, opacity .18s ease, border-color .18s ease;
}
.j2e-nav-backdrop { display: none; }
html.j2e-nav-collapsed .j2e-header { grid-template-columns: 104px minmax(0, 1fr) auto; }
html.j2e-nav-collapsed .j2e-brand { padding-left: 8px; padding-right: 8px; }
html.j2e-nav-collapsed .j2e-brand-copy { display: none; }
html.j2e-nav-collapsed .j2e-workspace { grid-template-columns: 0 minmax(0, 1fr); }
html.j2e-nav-collapsed .j2e-sidebar {
    opacity: 0;
    transform: translateX(-24px);
    pointer-events: none;
    border-right-color: transparent;
}
html.j2e-nav-collapsed .sn-call-stage { left: 24px; }
.j2e-main { min-width: 0; min-height: 0; overflow: auto; background: var(--bg); }
.j2e-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; background: var(--surface); border-top: 1px solid var(--border); color: var(--text-muted); font-size: .7rem; }

.j2e-nav-shell { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.j2e-nav-topbar { min-height: 66px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.j2e-nav-topbar > div { display: flex; flex-direction: column; }
.j2e-nav-topbar strong { font-size: .9rem; margin-top: 3px; }
.j2e-nav-eyebrow, .sn-kicker { color: var(--accent); font-size: .65rem; font-weight: 800; letter-spacing: .11em; }
.j2e-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #23b26f; box-shadow: 0 0 0 4px rgba(35,178,111,.13); }
.j2e-nav-list { flex: 1; min-height: 0; overflow: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; }
.j2e-nav-item { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 9px; align-items: center; min-height: 52px; padding: 7px 9px; color: var(--text); border-radius: 6px; border: 1px solid transparent; }
.j2e-nav-item:hover { background: var(--surface-2); color: var(--text); }
.j2e-nav-item.active { background: var(--accent-soft); border-color: rgba(13,120,215,.28); color: var(--accent); }
.j2e-nav-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: 1.02rem; }
.j2e-nav-item.active .j2e-nav-icon { background: var(--surface); }
.j2e-nav-item > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.j2e-nav-item strong { font-size: .82rem; font-weight: 650; }
.j2e-nav-item small { margin-top: 2px; color: var(--text-muted); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j2e-nav-bottom { position: relative; margin: 7px 8px 8px; padding: 6px; min-height: 58px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; background: rgba(0,122,255,.58); box-shadow: 0 8px 22px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.34); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); }
html[data-theme="dark"] .j2e-nav-bottom { border-color: rgba(255,255,255,.16); background: rgba(0,86,181,.52); }
.j2e-nav-bottom a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 999px; color: rgba(255,255,255,.9); font-size: .92rem; }
.j2e-nav-bottom a small { font-size: .58rem; }
.j2e-nav-bottom a.active { background: rgba(239,246,255,.82); color: #125b98; box-shadow: inset 0 1px rgba(255,255,255,.8), 0 2px 10px rgba(15,23,42,.1); }

.j2e-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--accent), #6d5dfc); color: white; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.j2e-avatar.small { width: 28px; height: 28px; flex-basis: 28px; font-size: .62rem; }
.j2e-avatar.large { width: 72px; height: 72px; flex-basis: 72px; font-size: 1.2rem; }
.j2e-avatar.xlarge { width: 110px; height: 110px; flex-basis: 110px; font-size: 1.8rem; }

.sn-page { width: 100%; min-height: 100%; padding: 14px 16px 26px; }
.sn-page h1, .sn-dashboard-heading h1 { margin: 4px 0 0; font-size: 1.58rem; font-weight: 680; }
.sn-page-heading, .sn-dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 2px 1px; }
.sn-page-heading p, .sn-dashboard-heading p { margin: 6px 0 0; color: var(--text-muted); font-size: .84rem; }
.sn-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; box-shadow: var(--shadow); overflow: hidden; }
.sn-panel-header { min-height: 44px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .82rem; font-weight: 650; }
.sn-panel-header a { font-size: .72rem; font-weight: 600; }
.sn-loading-card, .sn-empty { display: flex; align-items: center; justify-content: center; color: var(--text-muted); text-align: center; padding: 24px; }
.sn-loading-card { min-height: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; }
.sn-empty.large { min-height: 190px; }

.sn-dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.sn-stat-card { min-height: 104px; padding: 14px 16px; display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; box-shadow: var(--shadow); }
.sn-stat-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--accent); font-size: 1.15rem; }
.sn-stat-card > div { display: flex; flex-direction: column; }
.sn-stat-card strong { font-size: 1.58rem; line-height: 1; }
.sn-stat-card span:last-child { margin-top: 5px; color: var(--text-muted); font-size: .72rem; }
.sn-dashboard-grid, .sn-two-column { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
.sn-quick-actions { margin-top: 12px; }
.sn-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding: 12px; }
.sn-action-grid button { min-height: 102px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; text-align: left; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); cursor: pointer; }
.sn-action-grid button:hover { border-color: var(--accent); background: var(--accent-soft); }
.sn-action-grid button > span { color: var(--accent); font-size: 1.25rem; }
.sn-action-grid strong { font-size: .82rem; }
.sn-action-grid small { color: var(--text-muted); font-size: .68rem; }

.sn-list { display: grid; }
.sn-list-row { min-height: 58px; width: 100%; padding: 9px 12px; display: flex; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--border); background: var(--surface); text-align: left; }
.sn-list-row:last-child { border-bottom: 0; }
.sn-list-row.clickable { cursor: pointer; }
.sn-list-row.clickable:hover { background: var(--surface-2); }
.sn-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sn-list-main strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-list-main small { margin-top: 3px; color: var(--text-muted); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-list-meta { color: var(--text-muted); font-size: .67rem; white-space: nowrap; }
.sn-ticket-icon, .sn-call-type, .sn-request-mode { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--accent); font-weight: 700; }

.sn-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 2px 8px; border-radius: 999px; font-size: .65rem; font-weight: 700; white-space: nowrap; }
.sn-badge.neutral { background: var(--surface-3); color: var(--text-muted); }
.sn-badge.info { background: var(--accent-soft); color: var(--accent); }
.sn-badge.success { background: var(--success-soft); color: var(--success); }
.sn-badge.warning { background: var(--warning-soft); color: var(--warning); }
.sn-badge.danger { background: var(--danger-soft); color: var(--danger); }

.sn-primary-button, .sn-secondary-button, .sn-link-button, .sn-accept-button, .sn-reject-button { min-height: 36px; padding: 0 14px; border-radius: 5px; border: 1px solid transparent; font-size: .76rem; font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sn-primary-button { background: var(--accent); border-color: var(--accent); color: #fff; }
.sn-primary-button:hover { background: var(--accent-hover); color: #fff; }
.sn-primary-button:disabled { opacity: .55; cursor: default; }
.sn-primary-button.anchor { text-decoration: none; }
.sn-secondary-button { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.sn-secondary-button:hover { border-color: var(--accent); color: var(--accent); }
.sn-link-button { min-height: 30px; padding: 0 9px; background: transparent; border-color: var(--border); color: var(--accent); }
.sn-accept-button { background: var(--success); color: white; min-width: 120px; }
.sn-reject-button { background: var(--danger); color: white; min-width: 120px; }

.sn-form-panel { min-height: 100%; }
.sn-form-body { padding: 14px; display: grid; gap: 12px; }
.sn-form-body label, .sn-form-grid label, .j2e-login-form label { display: flex; flex-direction: column; gap: 5px; color: var(--text-muted); font-size: .7rem; font-weight: 600; }
.sn-form-body input, .sn-form-body select, .sn-form-body textarea, .sn-form-grid input, .sn-form-grid select, .sn-form-grid textarea, .j2e-login-form input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); outline: none; }
.sn-form-body textarea, .sn-form-grid textarea { resize: vertical; }
.sn-form-body input:focus, .sn-form-body select:focus, .sn-form-grid input:focus, .sn-form-grid select:focus, .sn-form-grid textarea:focus, .j2e-login-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(13,120,215,.13); }
.sn-form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 14px; }
.sn-form-grid .wide { grid-column: 1 / -1; }
.sn-form-actions { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-end; }
.sn-alert { padding: 8px 10px; border-radius: 4px; font-size: .72rem; }
.sn-alert.danger { background: var(--danger-soft); color: var(--danger); }
.sn-alert.success { background: var(--success-soft); color: var(--success); }
.sn-alert.info { background: var(--accent-soft); color: var(--accent); }

.sn-support-cards { padding: 10px; display: grid; gap: 9px; max-height: 560px; overflow: auto; }
.sn-support-card { padding: 12px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); }
.sn-support-card-top { display: flex; align-items: center; gap: 9px; }
.sn-support-card-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sn-support-card-top strong { font-size: .8rem; }
.sn-support-card-top small { color: var(--text-muted); font-size: .68rem; }
.sn-support-card h3 { margin: 12px 0 6px; font-size: .9rem; }
.sn-support-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; color: var(--text-muted); font-size: .68rem; }
.sn-support-meta span:not(:last-child)::after { content: "·"; margin-left: 8px; }
.support-row { min-height: 64px; }

.sn-table-wrap { width: 100%; overflow: auto; }
.sn-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.sn-table th { padding: 9px 10px; background: var(--surface-2); color: var(--text-muted); border-bottom: 1px solid var(--border); text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sn-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sn-table tr:last-child td { border-bottom: 0; }
.sn-table tbody tr:hover { background: var(--surface-2); }
.sn-table-title { font-weight: 650; margin-bottom: 2px; }
.sn-table td small { display: block; max-width: 360px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sn-chat-page { height: 100%; padding: 10px 12px 14px; overflow: hidden; }
.sn-chat-shell { height: 100%; min-height: 0; display: grid; grid-template-columns: 320px minmax(0,1fr); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; box-shadow: var(--shadow); overflow: hidden; }
.sn-chat-sidebar { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr); border-right: 1px solid var(--border); }
.sn-chat-sidebar-head { min-height: 66px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); }
.sn-chat-sidebar-head h2 { margin: 2px 0 0; font-size: 1rem; }
.sn-chat-search { margin: 9px; min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.sn-chat-search span { color: var(--text-muted); }
.sn-chat-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .75rem; }
.sn-conversation-list { min-height: 0; overflow: auto; }
.sn-conversation-row { width: 100%; min-height: 66px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-top: 1px solid var(--border); background: var(--surface); text-align: left; cursor: pointer; }
.sn-conversation-row:hover { background: var(--surface-2); }
.sn-conversation-row.active { background: var(--accent-soft); }
.sn-conversation-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sn-conversation-title { display: flex; justify-content: space-between; gap: 7px; align-items: center; }
.sn-conversation-title strong { min-width: 0; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-conversation-title time { color: var(--text-muted); font-size: .62rem; }
.sn-conversation-copy small { margin-top: 3px; color: var(--text-muted); font-size: .67rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-chat-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.sn-chat-welcome { grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; background: radial-gradient(circle at 50% 30%, var(--accent-soft), transparent 42%); }
.sn-chat-welcome-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 1.8rem; }
.sn-chat-welcome h2 { margin: 14px 0 6px; font-size: 1.15rem; }
.sn-chat-welcome p { max-width: 420px; margin: 0 0 16px; color: var(--text-muted); font-size: .78rem; }
.sn-chat-header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.sn-chat-person { min-width: 0; display: flex; align-items: center; gap: 9px; }
.sn-chat-person > div { min-width: 0; display: flex; flex-direction: column; }
.sn-chat-person strong { font-size: .82rem; }
.sn-chat-person small { color: var(--text-muted); font-size: .66rem; }
.sn-chat-actions { display: flex; gap: 6px; }
.sn-call-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-2); color: var(--accent); cursor: pointer; }
.sn-call-button:hover { background: var(--accent-soft); }
.sn-call-button:disabled { opacity: .4; cursor: default; }
.sn-message-area { min-height: 0; overflow: auto; padding: 16px 18px; background-color: var(--bg); background-image: radial-gradient(rgba(100,116,139,.10) 1px, transparent 1px); background-size: 24px 24px; }
.sn-message-day { width: max-content; max-width: 90%; margin: 0 auto 14px; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-size: .62rem; }
.sn-message-row { display: flex; margin: 5px 0; }
.sn-message-row.mine { justify-content: flex-end; }
.sn-message-row.theirs { justify-content: flex-start; }
.sn-message-bubble { max-width: min(680px, 74%); padding: 8px 10px 6px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 10px 10px 10px 3px; background: var(--surface); box-shadow: 0 1px 2px rgba(15,23,42,.05); font-size: .78rem; white-space: pre-wrap; word-break: break-word; }
.sn-message-row.mine .sn-message-bubble { border-color: rgba(13,120,215,.28); background: var(--accent-soft); border-radius: 10px 10px 3px 10px; }
.sn-message-bubble.system { background: var(--surface-2); color: var(--text-muted); }
.sn-message-sender { color: var(--accent); font-size: .64rem; font-weight: 700; }
.sn-message-bubble time { align-self: flex-end; margin-left: 16px; color: var(--text-muted); font-size: .58rem; }
.sn-chat-composer { min-height: 62px; display: grid; grid-template-columns: 36px minmax(0,1fr) 38px; gap: 8px; align-items: center; padding: 9px 11px; border-top: 1px solid var(--border); background: var(--surface); }
.sn-chat-composer textarea { min-height: 40px; max-height: 120px; padding: 10px 12px; resize: none; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); color: var(--text); outline: none; font-size: .78rem; }
.sn-chat-composer textarea:focus { border-color: var(--accent); }
.sn-composer-tool, .sn-send-button { width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.sn-composer-tool { background: var(--surface-2); color: var(--text-muted); font-size: 1.2rem; }
.sn-send-button { background: var(--accent); color: white; }
.sn-send-button:disabled { opacity: .4; }

.sn-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(9,14,23,.58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sn-incoming-call-card { width: min(390px, 100%); padding: 26px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: var(--surface); box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.sn-pulse-avatar { margin-bottom: 16px; padding: 8px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(13,120,215,.25); animation: j2ePulse 1.8s infinite; }
@keyframes j2ePulse { 70% { box-shadow: 0 0 0 22px rgba(13,120,215,0); } 100% { box-shadow: 0 0 0 0 rgba(13,120,215,0); } }
.sn-incoming-call-card h2 { margin: 8px 0 4px; font-size: 1.15rem; }
.sn-incoming-call-card p { margin: 0 0 20px; color: var(--text-muted); font-size: .78rem; }
.sn-incoming-actions { display: flex; gap: 12px; }
.sn-call-stage { position: fixed; inset: 72px 24px 50px calc(var(--nav-width) + 24px); z-index: 900; display: grid; grid-template-rows: 52px minmax(0,1fr) 72px; background: #0d1117; border: 1px solid #343b45; border-radius: 10px; overflow: hidden; box-shadow: 0 28px 90px rgba(0,0,0,.5); color: white; }
.sn-call-stage-head { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: #161b22; border-bottom: 1px solid #30363d; }
.sn-call-stage-head > div { display: flex; flex-direction: column; }
.sn-call-stage-head strong { font-size: .82rem; }
.sn-call-stage-head small { margin-top: 2px; color: #9aa5b1; font-size: .65rem; }
.sn-video-canvas { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, #202938, #0b0f15 64%); }
.sn-video-canvas > #remoteVideo { width: 100%; height: 100%; object-fit: contain; background: #070a0e; }
.sn-video-canvas > #localVideo { position: absolute; right: 18px; bottom: 18px; width: min(260px, 26%); aspect-ratio: 16/10; object-fit: cover; background: #151a22; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.sn-video-canvas.audio-only > #remoteVideo, .sn-video-canvas.audio-only > #localVideo { opacity: 0; pointer-events: none; }
.sn-audio-avatar { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.sn-audio-avatar strong { font-size: 1rem; }
.sn-audio-avatar small { color: #9aa5b1; }
.sn-call-controls { display: flex; align-items: center; justify-content: center; gap: 10px; background: #161b22; border-top: 1px solid #30363d; }
.sn-call-controls button { width: 44px; height: 44px; border: 1px solid #3c4654; border-radius: 50%; background: #252c36; color: white; cursor: pointer; }
.sn-call-controls button:hover, .sn-call-controls button.active { background: #2f7fc4; }
.sn-call-controls button.off { background: #672d31; }
.sn-call-controls button.hangup { width: 56px; border-radius: 999px; background: #d14343; border-color: #d14343; transform: rotate(135deg); }

.sn-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.sn-settings-body { min-height: 110px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sn-settings-body.vertical { align-items: stretch; justify-content: flex-start; flex-direction: column; }
.sn-settings-body > div:first-child { display: flex; flex-direction: column; }
.sn-settings-body strong { font-size: .8rem; }
.sn-settings-body small { margin-top: 4px; color: var(--text-muted); font-size: .7rem; }
.sn-device-preview { width: 100%; aspect-ratio: 16/8; border-radius: 6px; overflow: hidden; background: #0d1117; border: 1px solid var(--border); }
.sn-device-preview video { width: 100%; height: 100%; object-fit: cover; }
.sn-button-row { display: flex; gap: 8px; }
.sn-code-block { margin: 0; padding: 10px; overflow: auto; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); color: var(--text); font-size: .68rem; }
.sn-platform-row { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; }
.sn-platform-row > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.sn-platform-row > div { display: flex; flex-direction: column; }

.j2e-account-page { min-height: 100vh; padding: 26px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 38%), var(--bg); }
.j2e-account-brand { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.j2e-account-brand > div:last-child { display: flex; flex-direction: column; }
.j2e-account-brand strong { font-size: 1rem; }
.j2e-account-brand span { color: var(--text-muted); font-size: .75rem; }
.j2e-account-card { width: min(470px, 100%); padding: 26px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 18px 55px rgba(15,23,42,.12); }
.j2e-account-footer { margin-top: 14px; color: var(--text-muted); font-size: .68rem; }
.j2e-login-head h1 { margin: 5px 0; font-size: 1.45rem; }
.j2e-login-head p { margin: 0 0 18px; color: var(--text-muted); font-size: .76rem; }
.j2e-login-form { display: grid; gap: 12px; }
.j2e-login-form label > span:first-child { color: var(--text); }
.j2e-login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .7rem; }
.j2e-checkbox { flex-direction: row !important; align-items: center; color: var(--text-muted) !important; }
.j2e-checkbox input { width: 15px !important; min-height: 15px !important; }
.j2e-login-submit { width: 100%; min-height: 42px; }
.j2e-demo-accounts { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.j2e-demo-title { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; color: var(--text-muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
.j2e-demo-title span { height: 1px; background: var(--border); }
.j2e-demo-grid { display: grid; gap: 6px; margin-top: 10px; }
.j2e-demo-grid > * { min-height: 44px; padding: 7px 9px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); color: var(--text); }
.j2e-demo-grid strong { font-size: .7rem; }
.j2e-demo-grid small { margin-top: 2px; color: var(--text-muted); font-size: .64rem; }
.j2e-login-register { margin-top: 14px; text-align: center; color: var(--text-muted); font-size: .7rem; }
.sn-validation, .validation-message { color: var(--danger); font-size: .68rem; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; padding: 10px 16px; background: #fff3cd; color: #5d4a00; box-shadow: 0 -1px 6px rgba(0,0,0,.16); font-size: .78rem; }
#blazor-error-ui .dismiss { position: absolute; right: 10px; cursor: pointer; }

@media (max-width: 1100px) {
    :root { --nav-width: 250px; }
    .sn-dashboard-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sn-action-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sn-chat-shell { grid-template-columns: 270px minmax(0,1fr); }
    .sn-settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .j2e-app-shell {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
        grid-template-rows: var(--header-height) auto var(--footer-height);
    }
    .j2e-header {
        position: sticky;
        top: 0;
        grid-template-columns: minmax(0,1fr) auto;
    }
    .j2e-header-brand-area { border-right: 0; }
    .j2e-brand { flex: 0 1 auto; padding: 0 10px 0 8px; border-right: 0; }
    .j2e-header-title { display: none; }
    .j2e-user-chip span:last-child { display: none; }

    .j2e-workspace {
        display: block;
        overflow: visible;
    }
    .j2e-sidebar {
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        width: min(86vw, 310px);
        z-index: 130;
        overflow: hidden;
        border-right: 1px solid var(--border);
        background: var(--surface);
        box-shadow: 18px 0 42px rgba(15, 23, 42, .18);
        opacity: 1;
        transform: translateX(-102%);
        pointer-events: none;
        transition: transform .24s ease;
    }
    html.j2e-nav-mobile-open .j2e-sidebar {
        transform: translateX(0);
        pointer-events: auto;
    }
    .j2e-nav-shell { height: 100%; }
    .j2e-nav-topbar { display: flex; }
    .j2e-nav-list { display: flex; }
    .j2e-nav-bottom { display: grid; }

    .j2e-nav-backdrop {
        position: fixed;
        inset: var(--header-height) 0 0 0;
        z-index: 125;
        display: block;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, .42);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease, visibility .2s ease;
    }
    html.j2e-nav-mobile-open .j2e-nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.j2e-nav-scroll-lock { overflow: hidden; }

    .j2e-main {
        min-height: calc(100vh - var(--header-height) - var(--footer-height));
        min-height: calc(100dvh - var(--header-height) - var(--footer-height));
        padding-bottom: 0;
        overflow: visible;
    }
    .j2e-footer { font-size: .6rem; }
    .sn-dashboard-grid, .sn-two-column { grid-template-columns: 1fr; }
    .sn-chat-page {
        height: calc(100vh - var(--header-height) - var(--footer-height));
        height: calc(100dvh - var(--header-height) - var(--footer-height));
        padding: 8px;
    }
    .sn-chat-shell { grid-template-columns: 110px minmax(0,1fr); }
    .sn-chat-sidebar-head { padding: 8px; }
    .sn-chat-sidebar-head h2, .sn-chat-sidebar-head .sn-kicker, .sn-chat-sidebar-head .sn-badge, .sn-chat-search { display: none; }
    .sn-conversation-row { justify-content: center; padding: 7px; }
    .sn-conversation-copy { display: none; }
    .sn-call-stage { inset: 62px 10px 40px 10px !important; }
    .sn-form-grid { grid-template-columns: 1fr; }
    .sn-form-grid .wide { grid-column: auto; }
}

@media (max-width: 560px) {
    .sn-page { padding: 10px 9px 20px; }
    .sn-page-heading, .sn-dashboard-heading { align-items: flex-start; flex-direction: column; }
    .sn-dashboard-stats { grid-template-columns: 1fr 1fr; }
    .sn-stat-card { min-height: 86px; padding: 10px; }
    .sn-stat-card strong { font-size: 1.25rem; }
    .sn-action-grid { grid-template-columns: 1fr 1fr; }
    .sn-message-bubble { max-width: 88%; }
    .sn-chat-shell { grid-template-columns: 78px minmax(0,1fr); }
    .sn-chat-header { padding: 6px 8px; }
    .sn-chat-person small { display: none; }
    .sn-chat-actions .sn-call-button:last-child { display: none; }
    .sn-video-canvas > #localVideo { width: 34%; right: 8px; bottom: 8px; }
    .j2e-account-card { padding: 20px; }
}

/* Call error / compatibility feedback */
.sn-call-inline-error {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: .72rem;
}
.sn-call-inline-error button {
    width: 26px;
    height: 26px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.sn-call-notice {
    display: block;
    max-width: min(680px, 65vw);
    margin-top: 2px;
    color: #f8c35c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sn-chat-top { min-width: 0; background: var(--surface); }

/* =========================================================
   Settings / account integration
   ========================================================= */
.sn-settings-card-wide { grid-column: 1 / -1; }
.sn-settings-account-actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px; }
.sn-primary-button.anchor,
.sn-secondary-button.anchor,
.sn-accept-button.anchor,
.sn-reject-button.anchor { text-decoration: none; }
.sn-alert.warning { background: var(--warning-soft); color: var(--warning); }
.danger-text { color: var(--danger) !important; }

.sn-account-settings-page { min-height: 100%; }
.sn-account-settings-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; align-items: start; }
.sn-account-settings-nav { overflow: hidden; }
.sn-account-settings-content { min-width: 0; padding: 0; }
.sn-account-nav { display: grid; padding: 7px; gap: 4px; }
.sn-account-nav-link { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; align-items: center; min-height: 54px; padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; color: var(--text); }
.sn-account-nav-link:hover { background: var(--surface-2); color: var(--text); }
.sn-account-nav-link.active { background: var(--accent-soft); border-color: rgba(13,120,215,.28); color: var(--accent); }
.sn-account-nav-link > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: .9rem; }
.sn-account-nav-link.active > span { background: var(--surface); }
.sn-account-nav-link > div { min-width: 0; display: flex; flex-direction: column; }
.sn-account-nav-link strong { font-size: .75rem; }
.sn-account-nav-link small { margin-top: 2px; color: var(--text-muted); font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sn-account-section { padding: 18px; display: grid; gap: 16px; }
.sn-account-section-head { border-bottom: 1px solid var(--border); padding-bottom: 13px; }
.sn-account-section-head h2 { margin: 4px 0 5px; font-size: 1.25rem; }
.sn-account-section-head p { margin: 0; color: var(--text-muted); font-size: .76rem; max-width: 780px; }
.sn-account-subsection { padding-top: 14px; border-top: 1px solid var(--border); }
.sn-account-subsection h3 { margin: 0 0 4px; font-size: .92rem; }
.sn-account-subsection p { margin: 0 0 12px; color: var(--text-muted); font-size: .72rem; }
.sn-account-status { margin: 0; }

.sn-account-form { width: min(680px, 100%); display: grid; gap: 13px; }
.sn-account-form.compact { width: min(480px, 100%); }
.sn-account-field { display: flex; flex-direction: column; gap: 5px; color: var(--text-muted); font-size: .7rem; font-weight: 650; }
.sn-account-field > span:first-child { color: var(--text); }
.sn-account-field input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); outline: none; }
.sn-account-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(13,120,215,.13); }
.sn-account-field input:disabled { background: var(--surface-2); color: var(--text-muted); }
.sn-account-field small { color: var(--text-muted); font-weight: 400; }
.sn-account-input-with-state { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
.sn-account-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.sn-account-form-actions.spread { justify-content: space-between; }
.sn-account-button-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sn-account-button-grid form { margin: 0; }
.sn-account-list { display: grid; gap: 8px; }
.sn-account-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.sn-account-list-row > div { display: flex; flex-direction: column; }
.sn-account-list-row strong { font-size: .78rem; }
.sn-account-list-row small { margin-top: 2px; color: var(--text-muted); font-size: .66rem; }

.sn-account-danger-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.sn-account-info-box { padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.sn-account-info-box.danger { border-color: rgba(209,67,67,.35); background: var(--danger-soft); }
.sn-account-info-box strong { font-size: .82rem; }
.sn-account-info-box p { color: var(--text-muted); font-size: .7rem; }

.sn-2fa-status-card { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.sn-2fa-status-card.enabled { border-color: rgba(22,135,93,.35); }
.sn-2fa-status-card > div { display: flex; flex-direction: column; }
.sn-2fa-status-card strong { font-size: .82rem; }
.sn-2fa-status-card small { margin-top: 4px; color: var(--text-muted); font-size: .68rem; }
.sn-2fa-setup-grid { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 18px; align-items: start; }
.sn-qr-card { padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.sn-qr-card img { width: 230px; max-width: 100%; height: auto; image-rendering: pixelated; }
.sn-qr-card small { text-align: center; color: #667085; font-size: .62rem; }
.sn-2fa-steps { display: grid; gap: 10px; }
.sn-2fa-step { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: start; }
.sn-2fa-step > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .7rem; font-weight: 800; }
.sn-2fa-step > div { display: flex; flex-direction: column; }
.sn-2fa-step strong { font-size: .78rem; }
.sn-2fa-step small { margin-top: 3px; color: var(--text-muted); font-size: .68rem; }
.sn-shared-key { margin-top: 7px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); color: var(--text); font-size: .72rem; word-break: break-all; }
.sn-recovery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; width: min(560px,100%); }
.sn-recovery-code { padding: 9px 11px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); color: var(--text); text-align: center; font-size: .78rem; }

@media (max-width: 980px) {
    .sn-account-settings-layout { grid-template-columns: 1fr; }
    .sn-account-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .sn-2fa-setup-grid { grid-template-columns: 1fr; }
    .sn-qr-card { width: min(300px,100%); }
}

@media (max-width: 620px) {
    .sn-account-section { padding: 14px; }
    .sn-account-nav { grid-template-columns: 1fr; }
    .sn-account-danger-grid { grid-template-columns: 1fr; }
    .sn-recovery-grid { grid-template-columns: 1fr; }
    .sn-settings-account-actions { flex-direction: column !important; align-items: stretch; }
    .sn-settings-account-actions a { width: 100%; }
}


/* =========================================================
   Address book / direct chat / ticket status (Patch 07)
   ========================================================= */
.j2e-user-chip { text-decoration: none; cursor: pointer; }

.sn-addressbook-summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .7rem;
}
.sn-addressbook-summary strong { color: var(--text); }

.sn-presence-inline {
    margin-left: auto;
    color: var(--text-muted);
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sn-presence-inline.online { color: var(--success); }

.sn-addressbook-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.sn-addressbook-search { width: min(460px, 100%); margin: 0; }
.sn-addressbook-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.sn-filter-button {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 650;
    cursor: pointer;
}
.sn-filter-button:hover { background: var(--surface-2); color: var(--text); }
.sn-filter-button.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: rgba(13,120,215,.35);
}

.sn-addressbook-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    padding: 12px;
}
.sn-contact-card {
    min-width: 0;
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}
.sn-contact-card-head {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sn-contact-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sn-contact-main strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .8rem;
}
.sn-contact-main small {
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-muted);
    font-size: .65rem;
}
.sn-contact-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: .66rem;
}
.sn-presence-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 0 3px var(--surface-2);
}
.sn-presence-dot.online { background: var(--success); }
.sn-addressbook-error { margin: 0 12px 12px; }

.sn-chat-sidebar-tools { display: flex; align-items: center; gap: 6px; }
.sn-mini-action {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
}
.sn-mini-action:hover { background: var(--accent-soft); color: var(--accent); }
.sn-call-button.danger { color: var(--danger); }
.sn-call-button.danger:hover { background: var(--danger-soft); border-color: rgba(209,67,67,.35); }

.sn-status-select {
    min-width: 132px;
    min-height: 32px;
    padding: 4px 28px 4px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font-size: .68rem;
    font-weight: 650;
    outline: none;
}
.sn-status-select:focus { border-color: var(--accent); }
.sn-status-select.warning { color: var(--warning); }
.sn-status-select.info { color: var(--accent); }
.sn-status-select.success { color: var(--success); }

.sn-page-alert { margin-bottom: 12px; }

@media (max-width: 1180px) {
    .sn-addressbook-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .sn-addressbook-toolbar { align-items: stretch; flex-direction: column; }
    .sn-addressbook-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Presence / notifications / attachments (Patch 08)
   ========================================================= */
.sn-chat-avatar-presence {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sn-presence-dot.compact {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--surface);
    box-shadow: none;
}
.sn-conversation-row.active .sn-presence-dot.compact { border-color: var(--accent-soft); }
.sn-chat-presence-text { color: var(--text-muted); font-weight: 600; }
.sn-chat-presence-text.online { color: var(--success); }

.sn-toast-stack {
    position: fixed;
    right: 18px;
    bottom: 44px;
    z-index: 3000;
    width: min(380px, calc(100vw - 28px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}
.sn-message-toast {
    pointer-events: auto;
    position: relative;
    min-height: 88px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 12px 10px 12px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    cursor: pointer;
    animation: sn-toast-in .2s ease-out;
}
.sn-message-toast:hover { border-color: rgba(13,120,215,.45); background: var(--surface-2); }
.sn-message-toast-icon { position: relative; }
.sn-toast-presence {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--success);
}
.sn-message-toast-copy { min-width: 0; display: flex; flex-direction: column; }
.sn-message-toast-label { color: var(--accent); font-size: .57rem; font-weight: 800; letter-spacing: .12em; }
.sn-message-toast-copy strong { margin-top: 2px; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-message-toast-copy small { margin-top: 4px; color: var(--text-muted); font-size: .68rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sn-message-toast-close {
    align-self: start;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.sn-message-toast-close:hover { background: var(--surface-3); color: var(--text); }
@keyframes sn-toast-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.sn-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.sn-chat-composer label.sn-composer-tool {
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
}
.sn-chat-composer label.sn-composer-tool.busy {
    cursor: wait;
    opacity: .65;
}
.sn-attachment-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid rgba(209,67,67,.24);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: .68rem;
}
.sn-attachment-error button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
}
.sn-message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.sn-message-attachments { display: grid; gap: 8px; min-width: min(340px, 60vw); max-width: 440px; }
.sn-attachment-image-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}
.sn-attachment-image-card > a { display: block; background: var(--surface-2); }
.sn-attachment-image-card img {
    display: block;
    width: 100%;
    max-width: 420px;
    max-height: 320px;
    object-fit: contain;
    background: #0e1116;
}
.sn-attachment-caption {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
}
.sn-attachment-caption > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; font-weight: 650; }
.sn-attachment-caption small { color: var(--text-muted); font-size: .6rem; }
.sn-attachment-caption a,
.sn-attachment-download {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--accent);
    text-decoration: none;
    background: var(--surface);
}
.sn-attachment-caption a:hover,
.sn-attachment-download:hover { background: var(--accent-soft); }
.sn-attachment-download { cursor: pointer; font: inherit; }
.sn-attachment-file-card {
    min-width: 280px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px 9px 9px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}
.sn-attachment-open {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text);
    text-decoration: none;
}
.sn-attachment-file-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--accent-soft);
}
.sn-attachment-file-copy { min-width: 0; display: flex; flex-direction: column; }
.sn-attachment-file-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .69rem; }
.sn-attachment-file-copy small { margin-top: 2px; color: var(--text-muted); font-size: .6rem; }

@media (max-width: 620px) {
    .sn-toast-stack { right: 10px; bottom: 54px; width: calc(100vw - 20px); }
    .sn-message-attachments { min-width: min(260px, 72vw); }
    .sn-attachment-file-card { min-width: 230px; }
}


/* =========================================================
   Java2Enterprise Support Center branding / logo integration
   ========================================================= */
.j2e-brand-link {
    color: inherit;
    text-decoration: none;
}

.j2e-brand-link:hover {
    color: inherit;
    text-decoration: none;
}

.j2e-header-logo {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 5px rgba(0, 184, 255, .30));
}

.j2e-account-brand-logo {
    width: min(410px, 92vw);
    justify-content: center;
    margin-bottom: 16px;
}

.j2e-login-logo {
    display: block;
    width: min(390px, 100%);
    height: auto;
    max-height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(0, 119, 255, .18));
}

.sn-dashboard-welcome {
    min-width: 0;
}

.sn-home-product-logo {
    display: block;
    width: min(360px, 64vw);
    max-height: 92px;
    height: auto;
    object-fit: contain;
    object-position: left center;
    margin: -8px 0 4px -6px;
    filter: drop-shadow(0 7px 16px rgba(0, 119, 255, .14));
}

@media (max-width: 820px) {
    .j2e-header-logo {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .j2e-login-logo {
        width: min(340px, 88vw);
    }

    .sn-home-product-logo {
        width: min(310px, 82vw);
        max-height: 78px;
    }
}

@media (max-width: 560px) {
    .j2e-brand-copy span {
        display: none;
    }

    .j2e-login-logo {
        width: min(300px, 86vw);
        max-height: 105px;
    }

    .sn-home-product-logo {
        width: min(280px, 84vw);
    }
}

/* =========================================================
   Registration approval / German registration (Patch 09)
   ========================================================= */
.j2e-account-card:has(.j2e-register-shell) {
    width: min(760px, 100%);
}
.j2e-register-shell { display: grid; gap: 16px; }
.j2e-register-head { margin-bottom: 0; }
.j2e-register-head h1 { font-size: 1.75rem; }
.j2e-register-head p { max-width: 620px; line-height: 1.55; }
.j2e-register-info {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: 11px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(13,120,215,.22);
    border-radius: 7px;
    background: var(--accent-soft);
}
.j2e-register-info.compact { margin: 4px 0; text-align: left; }
.j2e-register-info-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    font-weight: 800;
}
.j2e-register-info > div { min-width: 0; display: flex; flex-direction: column; }
.j2e-register-info strong { font-size: .78rem; color: var(--text); }
.j2e-register-info small { margin-top: 3px; color: var(--text-muted); font-size: .68rem; line-height: 1.45; }
.j2e-register-form { gap: 14px; }
.j2e-register-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}
.j2e-register-grid label { min-width: 0; display: flex; flex-direction: column; gap: 5px; color: var(--text-muted); font-size: .7rem; font-weight: 600; }
.j2e-register-grid label > span:first-child { color: var(--text); }
.j2e-register-grid .wide { grid-column: 1 / -1; }
.j2e-register-validation { margin: 0; }
.j2e-password-hint {
    margin-top: -4px;
    padding: 9px 10px;
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .66rem;
}
.j2e-registration-result { display: grid; justify-items: center; gap: 12px; text-align: center; }
.j2e-registration-result h1 { margin: 0; font-size: 1.55rem; }
.j2e-registration-result > p { margin: 0; color: var(--text-muted); font-size: .75rem; line-height: 1.55; }
.j2e-registration-result-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--success-soft);
    color: var(--success);
    font-size: 1.5rem;
    font-weight: 800;
}
.j2e-registration-result-button { width: 100%; margin-top: 4px; }
.sn-addressbook-hint {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .67rem;
    line-height: 1.45;
}
.j2e-registration-admin-list { display: grid; gap: 10px; padding: 12px; }
.j2e-registration-admin-card {
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}
.j2e-registration-admin-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .76rem;
    font-weight: 800;
}
.j2e-registration-admin-main { min-width: 0; display: grid; gap: 11px; }
.j2e-registration-admin-title { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.j2e-registration-admin-title > div { min-width: 0; display: flex; flex-direction: column; }
.j2e-registration-admin-title strong { font-size: .82rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.j2e-registration-admin-title small { margin-top: 2px; color: var(--text-muted); font-size: .66rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.j2e-registration-admin-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.j2e-registration-admin-meta > div { min-width: 0; display: flex; flex-direction: column; padding: 8px 9px; border-radius: 5px; background: var(--surface-2); }
.j2e-registration-admin-meta span { color: var(--text-muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .03em; }
.j2e-registration-admin-meta strong { margin-top: 3px; font-size: .68rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.j2e-registration-admin-actions { display: flex; align-items: center; }

@media (max-width: 760px) {
    .j2e-account-page { justify-content: flex-start; padding: 18px 10px; }
    .j2e-account-card:has(.j2e-register-shell) { width: 100%; }
    .j2e-register-grid { grid-template-columns: 1fr; }
    .j2e-register-grid .wide { grid-column: auto; }
    .j2e-registration-admin-card { grid-template-columns: 42px minmax(0,1fr); }
    .j2e-registration-admin-actions { grid-column: 1 / -1; }
    .j2e-registration-admin-actions .sn-primary-button { width: 100%; }
    .j2e-registration-admin-meta { grid-template-columns: 1fr; }
}

/* =========================================================
   Secure attachment viewer / responsive preview (Patch 10)
   ========================================================= */
.sn-attachment-preview-button,
.sn-attachment-open {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}
.sn-attachment-preview-button.image {
    display: block;
    width: 100%;
    padding: 0;
    background: var(--surface-2);
    text-align: left;
}
.sn-attachment-preview-button.image:hover img { opacity: .94; }
.sn-attachment-open {
    width: 100%;
    padding: 0;
    background: transparent;
    text-align: left;
}
.sn-attachment-open:hover .sn-attachment-file-copy strong { color: var(--accent); }

.sn-file-viewer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(7, 12, 20, .74);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.sn-file-viewer-dialog {
    width: min(1120px, 94vw);
    height: min(820px, 90vh);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
}
.sn-file-viewer-head {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.sn-file-viewer-title {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 10px;
    align-items: center;
}
.sn-file-viewer-title > div { min-width: 0; display: flex; flex-direction: column; }
.sn-file-viewer-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
}
.sn-file-viewer-title small { margin-top: 2px; color: var(--text-muted); font-size: .65rem; }
.sn-file-viewer-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .68rem;
    font-weight: 800;
}
.sn-file-viewer-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.sn-file-viewer-close:hover { background: var(--danger-soft); color: var(--danger); }
.sn-file-viewer-body {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #11161e;
}
.sn-file-viewer-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
.sn-file-viewer-image-wrap {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: auto;
    padding: 20px;
}
.sn-file-viewer-image-wrap img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.sn-file-viewer-media {
    display: block;
    width: min(100%, 980px);
    max-height: 100%;
    background: #000;
}
.sn-file-viewer-audio {
    width: min(520px, calc(100% - 32px));
    display: grid;
    justify-items: center;
    gap: 15px;
    padding: 28px;
    border-radius: 12px;
    background: var(--surface);
    text-align: center;
}
.sn-file-viewer-audio-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.6rem;
}
.sn-file-viewer-audio strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-file-viewer-audio audio { width: 100%; }
.sn-file-viewer-unsupported {
    width: min(520px, calc(100% - 32px));
    padding: 30px 26px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    text-align: center;
}
.sn-file-viewer-unsupported > span { display: block; margin-bottom: 12px; font-size: 2.2rem; }
.sn-file-viewer-unsupported h3 { margin: 0 0 8px; font-size: 1rem; }
.sn-file-viewer-unsupported p { margin: 0; color: var(--text-muted); font-size: .72rem; line-height: 1.55; }
.sn-file-viewer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.sn-file-viewer-actions .anchor { min-width: 145px; justify-content: center; }

@media (max-width: 720px) {
    .sn-file-viewer-backdrop {
        place-items: stretch;
        padding: 0;
        background: var(--bg);
    }
    .sn-file-viewer-dialog {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .sn-file-viewer-head { padding: 9px 10px; }
    .sn-file-viewer-title { grid-template-columns: 36px minmax(0,1fr); gap: 8px; }
    .sn-file-viewer-icon { width: 34px; height: 34px; border-radius: 7px; font-size: .6rem; }
    .sn-file-viewer-close { width: 36px; height: 36px; flex-basis: 36px; }
    .sn-file-viewer-image-wrap { padding: 10px; }
    .sn-file-viewer-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 9px 10px max(9px, env(safe-area-inset-bottom));
    }
    .sn-file-viewer-actions .anchor { width: 100%; min-width: 0; min-height: 42px; }
}

/* =========================================================
   Password reset by e-mail code / German account flow
   ========================================================= */
.j2e-account-card:has(.j2e-password-reset-shell) { width: min(520px, 100%); }
.j2e-password-reset-shell { display: grid; gap: 15px; }
.j2e-reset-head { text-align: center; }
.j2e-reset-head h1 { margin-top: 4px; font-size: 1.65rem; }
.j2e-reset-head p { margin-left: auto; margin-right: auto; max-width: 430px; line-height: 1.55; }
.j2e-reset-step-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto -2px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(13,120,215,.22);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.55rem;
    font-weight: 800;
}
.j2e-reset-step-icon.code { font-size: 1.25rem; letter-spacing: -.05em; }
.j2e-reset-step-icon.success { background: var(--success-soft); border-color: rgba(25,169,116,.22); color: var(--success); }
.j2e-reset-form { gap: 14px; }
.j2e-reset-security-note {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-2);
}
.j2e-reset-security-note > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--success-soft);
    color: var(--success);
    font-size: .74rem;
    font-weight: 800;
}
.j2e-reset-security-note.warning > span { background: var(--accent-soft); color: var(--accent); }
.j2e-reset-security-note > div { min-width: 0; display: flex; flex-direction: column; }
.j2e-reset-security-note strong { font-size: .73rem; }
.j2e-reset-security-note small { margin-top: 2px; color: var(--text-muted); font-size: .64rem; line-height: 1.45; }
.j2e-security-code-input {
    min-height: 58px !important;
    text-align: center;
    font-size: 1.55rem !important;
    font-weight: 800;
    letter-spacing: .36em;
    font-variant-numeric: tabular-nums;
}
.j2e-reset-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
    font-size: .7rem;
}
.j2e-reset-links a { color: var(--accent); text-decoration: none; }
.j2e-reset-links a:hover { text-decoration: underline; }
.j2e-reset-complete { justify-items: center; text-align: center; }

@media (max-width: 560px) {
    .j2e-account-card:has(.j2e-password-reset-shell) { width: 100%; }
    .j2e-reset-head h1 { font-size: 1.45rem; }
    .j2e-reset-links { flex-direction: column; }
    .j2e-security-code-input { font-size: 1.35rem !important; letter-spacing: .28em; }
}

/* =========================================================
   Profilbilder + Web-Sprachnachrichten (2026-10)
   ========================================================= */
.j2e-avatar {
    position: relative;
    overflow: hidden;
}
.j2e-avatar > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}
.j2e-svg-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
}
.sn-composer-tool .j2e-svg-icon,
.sn-send-button .j2e-svg-icon {
    width: 19px;
    height: 19px;
}
.sn-chat-composer {
    grid-template-columns: 36px 36px minmax(0, 1fr) 38px;
}
.sn-chat-composer.voice-active {
    grid-template-columns: 36px minmax(0, 1fr);
}
.sn-chat-composer.voice-active .sn-voice-recording-bar {
    grid-column: 2 / -1;
}
.sn-composer-tool:disabled {
    opacity: .45;
    cursor: default;
}
.sn-voice-tool {
    border: 0;
}
.sn-voice-tool:hover:not(:disabled),
.sn-chat-composer label.sn-composer-tool:hover {
    background: var(--accent-soft);
    color: var(--accent);
}
.sn-tool-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    animation: j2eVoiceSpin .8s linear infinite;
}
@keyframes j2eVoiceSpin { to { transform: rotate(360deg); } }

.sn-voice-recording-bar {
    min-width: 0;
    min-height: 42px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 34px 38px;
    gap: 9px;
    align-items: center;
    padding: 5px 6px 5px 11px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface-2);
}
.sn-voice-recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 0 rgba(209,67,67,.3);
    animation: j2eVoicePulse 1.3s infinite;
}
.sn-voice-recording-dot.uploading {
    background: var(--accent);
    animation: j2eVoicePulseBlue 1.3s infinite;
}
@keyframes j2eVoicePulse {
    70% { box-shadow: 0 0 0 8px rgba(209,67,67,0); }
    100% { box-shadow: 0 0 0 0 rgba(209,67,67,0); }
}
@keyframes j2eVoicePulseBlue {
    70% { box-shadow: 0 0 0 8px rgba(13,120,215,0); }
    100% { box-shadow: 0 0 0 0 rgba(13,120,215,0); }
}
.sn-voice-recording-copy {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.sn-voice-recording-copy strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .7rem;
}
.sn-voice-recording-copy span {
    color: var(--text-muted);
    font-size: .66rem;
    font-variant-numeric: tabular-nums;
}
.sn-voice-cancel,
.sn-voice-stop {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
}
.sn-voice-cancel {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
}
.sn-voice-stop {
    width: 36px;
    height: 36px;
    border: 0;
    background: var(--accent);
    color: #fff;
}
.sn-voice-cancel:hover { color: var(--danger); background: var(--danger-soft); }
.sn-voice-stop:hover { filter: brightness(.96); }
.sn-voice-cancel .j2e-svg-icon { width: 16px; height: 16px; }
.sn-voice-stop .j2e-svg-icon { width: 14px; height: 14px; }

.sn-voice-message-card {
    min-width: min(390px, 62vw);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    gap: 9px;
    align-items: center;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}
.sn-message-row.mine .sn-voice-message-card {
    background: rgba(255,255,255,.58);
}
html[data-theme="dark"] .sn-message-row.mine .sn-voice-message-card {
    background: rgba(255,255,255,.035);
}
.sn-voice-message-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}
.sn-voice-message-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.sn-voice-message-copy strong {
    font-size: .69rem;
}
.sn-voice-message-copy small {
    color: var(--text-muted);
    font-size: .58rem;
}
.sn-voice-message-copy audio {
    width: 100%;
    min-width: 220px;
    height: 32px;
}
.sn-voice-message-download {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--accent);
}
.sn-voice-message-download:hover { background: var(--accent-soft); }
.sn-voice-message-download .j2e-svg-icon { width: 15px; height: 15px; }

.sn-profile-image-panel {
    width: min(820px, 100%);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}
.sn-profile-image-preview {
    position: relative;
    width: max-content;
}
.sn-profile-image-preview .j2e-avatar.xlarge {
    border: 3px solid var(--surface);
    box-shadow: 0 6px 20px rgba(15,23,42,.12);
}
.sn-profile-image-camera {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 3px solid var(--surface-2);
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
}
.sn-profile-image-camera .j2e-svg-icon { width: 15px; height: 15px; }
.sn-profile-image-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
}
.sn-profile-image-copy > strong { font-size: .88rem; }
.sn-profile-image-copy > p,
.sn-profile-image-copy > small {
    margin: 0;
    color: var(--text-muted);
    font-size: .7rem;
}
.sn-profile-image-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.sn-profile-file-picker {
    position: relative;
    overflow: hidden;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: .7rem;
    font-weight: 650;
}
.sn-profile-file-picker:hover { background: var(--accent-soft); color: var(--accent); }
.sn-profile-file-picker input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.sn-profile-image-delete { margin: 0; }

@media (max-width: 620px) {
    .sn-chat-composer {
        grid-template-columns: 34px 34px minmax(0, 1fr) 36px;
        gap: 6px;
        padding-inline: 8px;
    }
    .sn-chat-composer.voice-active {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .sn-voice-message-card {
        min-width: min(270px, 74vw);
        grid-template-columns: 34px minmax(0, 1fr) 28px;
    }
    .sn-voice-message-copy audio { min-width: 0; }
    .sn-voice-recording-copy strong { display: none; }
    .sn-profile-image-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .sn-profile-image-actions { justify-content: center; }
}

/* J2E modern SVG controls */
.j2e-svg-icon { width: 1.15em; height: 1.15em; display:inline-block; vertical-align:-.14em; flex-shrink:0; }
.j2e-nav-icon .j2e-svg-icon { width:20px; height:20px; }
.j2e-nav-bottom .j2e-svg-icon { width:17px; height:17px; }
.sn-chat-actions .j2e-svg-icon { width:18px; height:18px; }
.j2e-nav-item,.sn-call-button { transition:background-color .18s ease,transform .18s ease,border-color .18s ease; }
.sn-call-button:hover:not(:disabled){ transform:translateY(-1px); }