/* Chat list surface — the first application of MinChat's shared token kit.
   The component anatomy and behavior live in appLayout.js / chatList.js;
   these rules give that shared anatomy the Settings workspace's quiet rhythm. */

/* "Live list" component palette. These local surface roles deliberately match
   the approved preview; light mode uses equivalent readable surfaces. */
.sidebar.navigation-hub {
    --list-bg: light-dark(#f6f8fc, #0c1118);
    --list-raised: light-dark(#e9eef7, #151d29);
    --list-selected: light-dark(#e6def5, #24213a);
    --list-text: light-dark(#202737, #edf1fa);
    --list-muted: light-dark(#536078, #a4b0c3);
    --list-accent: light-dark(#6445ad, #a995ff);
    --list-online: light-dark(#167653, #67d6aa);
}
.sidebar.navigation-hub {
    width: var(--sidebar-width, 320px);
    min-width: 280px;
    box-sizing: border-box;
    background: var(--color-bg-app);
    border-right: 1px solid var(--color-border-subtle);
}

.sidebar-account-row {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-4) var(--space-3) var(--space-3);
    background: var(--color-bg-app);
    border-bottom-color: var(--color-border-subtle);
    position: relative;
}
.halloween-entry { position: absolute; z-index: 4; top: 46px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 25px; line-height: 1; cursor: pointer; filter: drop-shadow(0 0 7px #ff9b36aa) drop-shadow(0 0 15px #ff7b2477); transition: transform .18s ease, filter .18s ease; }
.halloween-entry:hover { background: transparent; transform: rotate(-9deg) scale(1.14); filter: drop-shadow(0 0 9px #ffbd59) drop-shadow(0 0 19px #ff7b24aa); }
.app-container[data-sidebar-collapsed="true"] .halloween-entry { left: 116px; right: auto; top: 39px; }

.user-profile-btn {
    min-height: 52px;
    padding: 0 var(--space-2);
    gap: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
}

.user-profile-btn:hover,
.user-profile-btn[aria-expanded="true"] {
    border-color: transparent;
    background: var(--color-bg-hover);
    box-shadow: none;
}

.user-profile-btn.is-premium-account,
.user-profile-btn.is-premium-account:hover {
    border-color: transparent;
    background: var(--color-bg-surface);
}

.user-profile-btn.has-own-premium-effect {
    height: 56px;
    min-height: 56px;
    border-bottom-color: var(--color-border-subtle);
    box-shadow: none;
}

.user-profile-btn.has-own-premium-effect > .premium-identity-effect {
    inset: 4px;
    opacity: 0.35;
}

.user-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    color: var(--color-text-primary);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-bold);
}

.user-name-side {
    gap: var(--space-1);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-strong);
}

.user-premium-mark {
    color: var(--color-accent);
    text-shadow: none;
}

.user-status-side {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: var(--font-size-meta);
}

.sidebar-primary-nav {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 2px;
    margin-top: var(--space-3);
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--color-bg-page);
}

.sidebar-primary-link {
    min-height: 58px;
    gap: 5px;
    padding: 5px 4px;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    transition:
        background var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.sidebar-primary-link .ui-icon { color: currentColor; }

.sidebar-primary-link:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.sidebar-primary-link[aria-current="page"] {
    border-color: transparent;
    background: var(--color-bg-surface-raised);
    box-shadow: inset 0 -2px var(--color-accent);
    color: var(--color-text-primary);
}

.sidebar-chat-search {
    height: 38px;
    margin: 0 var(--space-3) var(--space-3);
    padding: 0 10px;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-input);
    color: var(--color-text-muted);
}

.sidebar-chat-search-icon {
    position: static;
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transform: none;
}

.sidebar-chat-search input {
    height: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-body-sm);
}

.sidebar-chat-search input::placeholder { color: var(--color-text-muted); }

.sidebar-chat-search:focus-within {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.sidebar-chat-search-close {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
}

.sidebar-chat-search-close:hover,
.sidebar-chat-search-close:focus-visible {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.sidebar-chats-block { background: var(--color-bg-app); }

.sidebar-chat-search,
.chats-list { box-sizing: border-box; }

.chats-list {
    padding: var(--space-1) var(--space-2) 72px;
    scrollbar-color: var(--color-border-strong) transparent;
}

.chat-item {
    min-height: 68px;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-2) var(--space-2);
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    transition:
        background var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

.chat-item:hover,
.chat-item:focus-within,
.chat-item:focus-visible {
    z-index: 4;
    border-color: transparent;
    border-bottom-color: var(--color-border-subtle);
    background: var(--color-bg-surface-raised);
    transform: none;
}

.chat-item:focus-visible {
    outline: 2px solid var(--color-border-strong);
    outline-offset: -2px;
}

.chat-item.active {
    border-color: transparent;
    border-bottom-color: var(--color-border-subtle);
    background: var(--color-bg-selected);
    box-shadow: inset 2px 0 var(--color-accent);
}

.chat-item.chat-item-online,
.chat-item.chat-item-online:hover {
    border-color: transparent;
    border-bottom-color: var(--color-border-subtle);
}

.chat-item-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-strong);
}

.chat-item-avatar img { border-radius: inherit; }

.chat-item-body { min-width: 0; }

.chat-item-toprow,
.chat-item-bottomrow { gap: var(--space-2); }

.chat-item-bottomrow { margin-top: var(--space-1); }

.chat-item .chat-name {
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-strong);
    line-height: var(--line-height-tight);
}

.chat-item .chat-preview {
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-body);
}

.chat-item .chat-time {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: var(--font-variant-data);
}

.chat-item .unread-badge,
.chat-item .unread-badge-live,
.chat-item .chat-status-token.is-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 0;
    border-radius: var(--radius-pill);
    /* Filled primary surface: --color-accent-action is the token that keeps a
       light label above 4.5:1 (hq#71). --color-accent reaches only 3.84:1 in
       the dark theme, which is why the unread counter used to fall short. */
    background: var(--color-accent-action);
    color: var(--color-text-inverse);
    font-family: var(--font-sans);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-bold);
}

.chat-item .unread-badge-live { animation: none; }

.chat-item .chat-status-token.is-unread .chat-status-token-count { color: inherit; }

.chat-effect-stack { gap: 5px; }

.chat-effect-token,
.chat-effect-token.is-premium {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    flex-basis: 24px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    box-shadow: none;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.chat-effect-token:hover,
.chat-effect-token:focus-visible {
    transform: none;
    border-color: var(--color-border);
    background: var(--color-bg-hover);
    box-shadow: none;
}

.chat-effect-token.is-premium {
    --effect-fg: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 24%, var(--color-border-subtle));
    background: color-mix(in srgb, var(--color-warning-container) 45%, var(--color-bg-surface));
}

.sidebar-add-chat-fab {
    right: var(--space-4);
    bottom: var(--space-4);
    width: 42px;
    height: 42px;
    border: 0;
    background: var(--color-accent-action);
    box-shadow: var(--shadow-sm);
}

.sidebar-add-chat-fab:hover {
    background: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.sidebar-add-chat-fab:focus-visible { box-shadow: var(--focus-ring); }

@media (max-width: 768px) {
    .sidebar-account-row { padding-top: var(--space-3); }
    .sidebar-primary-link { min-height: 60px; }
    .chat-item { min-height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-primary-link,
    .chat-item,
    .sidebar-add-chat-fab { transition: none; }
}

/* Scope daily rows to the sidebar so embedded chat previews keep their layout.
   Own every row dimension here, rather than layering it in roomy-type.css. */
.sidebar.navigation-hub,
.sidebar.navigation-hub .sidebar-account-row,
.sidebar.navigation-hub .sidebar-chats-block { background: var(--list-bg); }
.sidebar.navigation-hub .chats-list { padding: 4px 8px 72px; }
.sidebar.navigation-hub .chat-list-section { display: flex; flex-direction: column; gap: 3px; }
.sidebar.navigation-hub .chat-item {
    position: relative;
    min-height: 84px;
    gap: 12px;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--list-text);
    box-shadow: none;
}
.sidebar.navigation-hub .chat-item:hover,
.sidebar.navigation-hub .chat-item:focus-within { background: var(--list-raised); transform: none; }
.sidebar.navigation-hub .chat-item.active { background: var(--list-selected); box-shadow: none; }
.sidebar.navigation-hub .chat-item-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 19px;
    background: light-dark(#dde4f3, #263048);
    color: light-dark(#3b4a70, #d5ddf5);
    font-size: 18px;
    font-weight: 550;
    border: 0;
}
.sidebar.navigation-hub .chat-item-avatar.is-personal {
    background: light-dark(#e8dff7, #2f294b);
    color: light-dark(#6445ad, #c9baff);
}
.sidebar.navigation-hub .chat-item-avatar.is-group {
    background: light-dark(#d9eeeb, #243c40);
    color: light-dark(#24635a, #a7ded7);
}
.sidebar.navigation-hub .chat-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar.navigation-hub .chat-item-avatar .ui-icon { width: 24px; height: 24px; }
.sidebar.navigation-hub .chat-item .chat-name {
    font-size: .9375rem;
    font-weight: 550;
    line-height: 1.5;
    color: var(--list-text);
}
.sidebar.navigation-hub .chat-item-bottomrow { margin-top: 5px; }
.sidebar.navigation-hub .chat-item .chat-preview {
    font-size: .8125rem;
    font-weight: 450;
    line-height: 1.5;
    color: var(--list-muted);
}
.sidebar.navigation-hub .chat-item.has-unread .chat-preview { color: var(--list-text); font-weight: 500; }
.sidebar.navigation-hub .chat-item .chat-time {
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 450;
    line-height: 1.5;
    color: var(--list-muted);
}
.sidebar.navigation-hub .chat-title-row { gap: 6px; min-height: 0; }
.sidebar.navigation-hub .chat-effect-stack { gap: 2px; }
.sidebar.navigation-hub .chat-effect-token {
    width: 20px; min-width: 20px; max-width: 20px; height: 20px; flex-basis: 20px;
    border: 0; background: transparent; box-shadow: none;
}
/* Keep the existing accessible presence tooltip, anchored to the avatar. */
.sidebar.navigation-hub .chat-effect-token.is-online,
.sidebar.navigation-hub .chat-effect-token.is-offline {
    position: absolute;
    left: 53px;
    top: calc(50% + 15px);
    width: 12px; min-width: 12px; max-width: 12px; height: 12px;
    border: 3px solid var(--list-bg);
    border-radius: 50%;
    background: var(--list-muted);
}
.sidebar.navigation-hub .chat-effect-token.is-online { background: var(--list-online); }
.sidebar.navigation-hub .chat-item.active .chat-effect-token:is(.is-online, .is-offline) { border-color: var(--list-selected); }
.sidebar.navigation-hub .chat-item:hover:not(.active) .chat-effect-token:is(.is-online, .is-offline) { border-color: var(--list-raised); }
.sidebar.navigation-hub .chat-effect-token:is(.is-online, .is-offline) > * { visibility: hidden; }
.sidebar.navigation-hub .chat-status-token.is-unread {
    min-width: 21px; width: auto; height: 21px; padding: 0 6px;
    border-radius: 8px; background: var(--list-accent);
    color: light-dark(#fff, #1b142f); font-weight: 600;
}
.sidebar.navigation-hub .chat-status-token-count { color: inherit; font-size: 11px; }
.sidebar.navigation-hub .chat-status-token.is-delivery { color: var(--list-online); }

[data-density='compact'] .sidebar.navigation-hub .chat-item {
    min-height: var(--density-row-min-height);
    padding: var(--density-row-padding-y) var(--density-row-padding-x);
}
[data-density='compact'] .sidebar.navigation-hub .chat-item-avatar { width: 32px; height: 32px; flex-basis: 32px; border-radius: 12px; }
[data-density='compact'] .sidebar.navigation-hub .chat-effect-token:is(.is-online, .is-offline) { left: 33px; top: calc(50% + 5px); }
@media (max-width: 380px) {
    .sidebar.navigation-hub .chat-item { gap: 9px; padding-inline: 8px; }
    .sidebar.navigation-hub .chat-item-avatar { width: 44px; height: 44px; flex-basis: 44px; border-radius: 16px; }
    .sidebar.navigation-hub .chat-effect-token:is(.is-online, .is-offline) { left: 41px; top: calc(50% + 11px); }
}