.rail-item { border-radius: var(--rail-radius); }
.sidebar-chats { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sidebar-mobile-nav { display: var(--mobile-display); gap: var(--space-2); margin-bottom: var(--space-4); }
.sidebar-mobile-nav button { display: flex; flex: 1; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); border: 0; border-radius: var(--radius-control); background: var(--settings-surface); color: var(--color-muted); font-size: var(--font-md); }
.sidebar-mobile-nav button[aria-current] { background: var(--color-selected); color: var(--color-lilac); }
/* Выбранный раздел — та же иконка, залитая; детали вырезаны цветом фона кнопки. */
.sidebar-mobile-nav button[aria-current] .ui-icon { --i-fill: 1; --i-detail: color-mix(in srgb, var(--color-panel), var(--color-lilac) 14%); }
.sidebar-profile-avatar { display: flex; border: 0; padding: 0; background: transparent; border-radius: 50%; }
.sidebar-profile-avatar img { border-radius: 50%; }
.history-sidebar { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
.history-tabs { display: grid; flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-1); margin-bottom: var(--space-4); border-radius: var(--radius-control); background: var(--settings-surface); }
.history-tab { display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 0; min-height: var(--space-10); padding: 0 var(--space-2); border: 0; border-radius: var(--rail-radius); background: transparent; color: var(--color-muted); font-size: var(--font-sm); font-weight: 600; transition: color var(--motion-fast), background var(--motion-fast); }
.history-tab .ui-icon { width: 18px; height: 18px; }
.history-tab:hover { color: var(--color-text); }
.history-tab[aria-selected='true'] { background: var(--color-selected); color: var(--color-lilac); }
.history-tab[aria-selected='true'] .ui-icon { --i-fill: 1; --i-detail: color-mix(in srgb, color-mix(in srgb, var(--color-panel), white 6%), var(--color-lilac) 14%); }
.history-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.history-voice-icon { display: grid; flex: none; place-items: center; width: var(--history-empty-image); height: var(--history-empty-image); border-radius: 50%; color: var(--color-lilac); background: var(--color-selected); }
.history-voice-icon .ui-icon { width: var(--space-8); height: var(--space-8); }
.history-sidebar-heading { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--color-muted); font-size: var(--font-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-3); }
.history-sidebar-heading .icon-button { width: var(--space-8); min-height: var(--space-8); padding: 0; border: 0; background: transparent; }
.history-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.history-list:empty { display: none; }
.history-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--history-row-height); margin-bottom: var(--space-1); padding: var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text); text-align: left; transition: background var(--motion-fast); }
.history-item:hover, .history-item:focus-visible { background: var(--settings-surface); }
.history-item[aria-current] { background: var(--color-selected); }
.history-item > img { flex: none; width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%; }
.history-item-body { display: grid; gap: var(--space-1); min-width: 0; }
.history-item strong { font-size: var(--font-md); font-weight: 600; overflow-wrap: anywhere; }
.history-item time, .history-preview { font-size: var(--font-xs); color: var(--settings-subtle); }
.history-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); flex: 1; min-height: 0; padding: var(--space-6); text-align: center; text-wrap: balance; color: var(--color-muted); }
.history-status img { width: var(--history-empty-image); height: var(--history-empty-image); object-fit: contain; opacity: .86; }
.history-status p { margin: 0; font-size: var(--font-base); font-weight: 600; }
.history-status > span:not(.status-spinner):not(.history-voice-icon) { color: var(--settings-subtle); font-size: var(--font-sm); line-height: 1.5; }
.history-status-loading p { font-size: var(--font-sm); font-weight: 400; }
.history-list:not(:empty) + .history-status, .history-messages:not(:empty) + .history-status { flex: none; flex-direction: row; flex-wrap: wrap; padding: var(--space-3); }
.history-list:not(:empty) + .history-status .status-spinner, .history-messages:not(:empty) + .history-status .status-spinner { width: var(--icon-size); height: var(--icon-size); }
.status-spinner { display: block; width: var(--space-6); height: var(--space-6); border: 2px solid var(--color-border-hover); border-top-color: var(--color-lilac); border-radius: 50%; animation: control-spin var(--motion-pulse) linear infinite; }
.history-pagination { display: flex; flex: none; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-3); color: var(--color-muted); font-size: var(--font-xs); }
.history-pagination .icon-button { width: var(--space-10); min-height: var(--space-10); border: 0; background: var(--settings-surface); }
.history-guest-note { flex: none; color: var(--settings-subtle); font-size: var(--font-xs); line-height: 1.5; margin: var(--space-4) var(--space-2) 0; }
.history-reader { grid-column: 3; grid-row: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--color-canvas); }
.history-reader-header { display: flex; flex: none; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.history-reader-header img { width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%; }
.history-reader-header > div { min-width: 0; flex: 1; }
.history-reader-header h2 { margin: 0; font-size: var(--history-reader-title); font-weight: 600; overflow-wrap: anywhere; }
.history-reader-header p { margin: var(--space-1) 0 0; font-size: var(--font-xs); color: var(--settings-subtle); }
.history-reader-header .icon-button { min-height: var(--space-10); width: var(--space-10); border: 0; background: transparent; }
.history-messages { min-height: 0; flex: 1; padding: var(--space-4); overflow-y: auto; overscroll-behavior: contain; }
.history-messages:empty { display: none; }
.history-message { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) 0; width: fit-content; max-width: calc(100% - var(--avatar-size) - var(--space-4)); }
.history-message-self { margin-left: auto; flex-direction: row-reverse; }
.history-message-self .history-message-meta { justify-content: flex-end; }
.history-message-avatar { flex: none; width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%; }
.history-message-body { min-width: 0; flex: 1; }
.history-message-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-1); font-size: var(--font-xs); color: var(--settings-subtle); }
.history-message-meta span { color: var(--color-muted); }
.history-message-body p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--font-base); line-height: var(--chat-message-line); }
.history-image { display: inline-block; max-width: 100%; }
.history-image img { display: block; width: min(var(--image-width), 100%); max-height: var(--image-viewport-height); object-fit: contain; border-radius: var(--radius-control); }
.history-image-restricted { color: var(--color-muted); padding: var(--space-4); border-radius: var(--radius-control); background: var(--settings-surface); }
.history-reader-footer { display: grid; flex: none; gap: var(--space-3); padding: var(--space-3) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); text-align: center; color: var(--settings-subtle); font-size: var(--font-xs); }
.history-reader-footer .history-pagination { padding: 0; }
@media (max-width: 760px) {
    .history-reader { grid-column: 1 / -1; }
    .history-reader-header { gap: var(--space-2); padding: var(--space-3); }
    .history-message { gap: var(--space-3); }
}