/* ── Thread Panel — full-height overlay on the right ── */
  .thread-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: var(--thread-panel-width, 420px);
    background: var(--deep);
    border-left: 1px solid var(--border);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
    animation: panelSlideIn var(--transition);
  }
  /* Drag handle on the LEFT edge — mirror of .channel-sidebar-resize.
     Hidden until the panel is open so it doesn't catch hover when the
     panel is collapsed. Width clipped on small screens where there's
     no room to drag anyway. */
  .thread-panel-resize {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 5px;
    cursor: ew-resize;
    z-index: 11;
  }
  .thread-panel-resize::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    left: 2px; width: 1px;
    background: transparent;
    transition: background var(--transition);
  }
  .thread-panel-resize:hover::after,
  .thread-panel-resize.dragging::after { background: var(--accent); }
  body.resizing-thread-panel { cursor: ew-resize !important; user-select: none; }
  body.resizing-thread-panel * { cursor: ew-resize !important; }
  @media (max-width: 900px) {
    .thread-panel-resize { display: none; }
  }
  .app.thread-open .thread-panel { display: flex; }
  .app.thread-open.search-open .thread-panel { display: flex; }
  .thread-panel-header {
    height: 52px;
    display: flex; align-items: center;
    gap: var(--space-md);
    padding: 0 var(--space-lg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .thread-panel-header .tp-icon {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    color: var(--ink-muted); flex-shrink: 0;
  }
  .thread-panel-title {
    flex: 1; min-width: 0;
    font-size: var(--font-md); font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .thread-panel-sub {
    font-size: var(--font-2xs); color: var(--ink-muted);
  }
  .thread-panel-close, .thread-panel-action {
    background: none; border: none; color: var(--ink-muted);
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
  }
  .thread-panel-close:hover, .thread-panel-action:hover { background: var(--surface); color: var(--ink); }
  .thread-panel-body {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column;
  }
  .thread-panel-scroller {
    flex: 1; overflow-y: auto;
    padding: var(--space-md) var(--space-lg);
  }
  .thread-panel-composer {
    padding: 0 var(--space-lg) var(--space-lg);
    flex-shrink: 0;
    position: relative;
  }

  .thread-parent-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
  }
  .thread-parent-card .tpc-author {
    font-size: var(--font-xs); font-weight: 600; color: var(--ink-secondary);
    margin-bottom: 4px;
  }
  .thread-parent-card .tpc-text {
    font-size: var(--font-md); color: var(--ink); line-height: 1.5;
  }
  .thread-parent-card .tpc-jump {
    margin-top: 8px;
    font-size: var(--font-2xs); color: var(--accent); cursor: pointer;
  }
  .thread-parent-card .tpc-jump:hover { text-decoration: underline; }

  .thread-participants-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px 4px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--ink-secondary); font-size: var(--font-xs); font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background var(--transition);
  }
  .thread-participants-pill:hover { background: var(--elevated); color: var(--ink); }
  .tpp-avatars { display: inline-flex; }
  .tpp-avatars .tpp-av {
    width: var(--avatar-2xs); height: var(--avatar-2xs); border-radius: var(--radius-full);
    background-size: cover; background-position: center;
    border: 2px solid var(--deep);
    margin-left: -6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: white;
  }
  .tpp-avatars .tpp-av:first-child { margin-left: 0; }

  .thread-parent-jump {
    margin-top: 6px;
    font-size: var(--font-xs); color: var(--accent); cursor: pointer;
    display: inline-block;
  }
  .thread-parent-jump:hover { text-decoration: underline; }
  .thread-parent-divider {
    height: 1px; background: var(--border);
    margin: var(--space-md) 0;
  }

  /* Thread sidebar items (under each channel) */
  .channel-threads {
    margin: 2px 0 6px 22px;
    display: flex; flex-direction: column; gap: 1px;
  }
  .thread-item {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--ink-muted);
    font-size: var(--font-xs);
    transition: background var(--transition), color var(--transition);
    user-select: none;
    -webkit-user-select: none;
  }
  .thread-item:hover { background: var(--surface); color: var(--ink-secondary); }
  .thread-item.active { background: var(--elevated); color: var(--ink); }
  .thread-icon {
    width: 14px; height: 14px; display: flex; align-items: center; justify-content: center;
    color: var(--ink-ghost); flex-shrink: 0;
  }
  .thread-name {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .thread-sub {
    font-size: 10px; color: var(--ink-ghost); flex-shrink: 0;
  }
  .thread-unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
  }
  .channel-action {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; cursor: pointer;
    color: var(--ink-ghost);
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition), color var(--transition), background var(--transition);
  }
  .channel-item:hover .channel-action { opacity: 1; }
  .channel-action:hover { background: var(--elevated); color: var(--ink); }

  /* Thread participants view */
  .tpv-list { display: flex; flex-direction: column; padding: 8px 0; }
  .tpv-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 16px;
    cursor: pointer;
    transition: background var(--transition);
  }
  .tpv-item:hover { background: var(--surface); }
  .tpv-avatar {
    width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-xs); font-weight: 600; color: white;
    flex-shrink: 0; position: relative;
  }
  .tpv-avatar .tpv-presence {
    position: absolute; bottom: -1px; right: -1px;
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--deep);
  }
  .tpv-info { flex: 1; min-width: 0; }
  .tpv-name {
    font-size: var(--font-sm); font-weight: 500; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tpv-status { font-size: var(--font-2xs); color: var(--ink-muted); }

  /* Thread badge inside a regular channel message */
  .msg-thread-card {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: var(--font-xs); color: var(--ink-secondary);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
  }
  .msg-thread-card:hover { background: var(--elevated); color: var(--ink); }
  .msg-thread-card svg { color: var(--accent); flex-shrink: 0; }
  .msg-comments-pill {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 8px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--ink-secondary); font-size: var(--font-sm); font-weight: 500;
    font-family: inherit; cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
  }
  .msg-comments-pill:hover {
    background: var(--elevated); color: var(--ink);
    border-color: var(--border-mid);
  }
  .msg-comments-pill svg { color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
  .msg-comments-pill.has-unread { color: var(--ink); border-color: var(--border-mid); }
  .comments-unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
  }
  /* Slack-style thread preview under a message */
  .msg-thread-preview {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px; padding: 6px 10px 6px 8px;
    border-radius: 8px; cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    max-width: 480px;
    user-select: none;
    transition: background var(--transition), border-color var(--transition);
  }
  .msg-thread-preview:hover { background: var(--surface); border-color: var(--border); }
  .mtp-avatars { display: flex; flex-shrink: 0; }
  .mtp-av {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 600;
    border: 2px solid var(--bg-secondary, var(--bg));
    margin-right: -4px; flex-shrink: 0;
  }
  .mtp-avatars .mtp-av:last-child { margin-right: 0; }
  .mtp-count { font-size: var(--font-xs); color: var(--mention-fg); font-weight: 600; margin-left: 4px; flex-shrink: 0; line-height: 1; }
  .mtp-time-slot { position: relative; flex-shrink: 0; display: flex; align-items: center; }
  .mtp-time { font-size: 10px; color: var(--ink-muted); transition: opacity var(--transition); white-space: nowrap; line-height: 1; }
  .mtp-view-thread {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    font-size: var(--font-2xs); color: var(--ink-muted); line-height: 1;
    opacity: 0; transition: opacity var(--transition); white-space: nowrap;
  }
  .msg-thread-preview:hover .mtp-time { opacity: 0; }
  .msg-thread-preview:hover .mtp-view-thread { opacity: 1; }
  .mtp-chevron {
    margin-left: auto; color: var(--ink-muted); flex-shrink: 0;
    opacity: 0; transition: opacity var(--transition);
  }
  .msg-thread-preview:hover .mtp-chevron { opacity: 1; }
  .msg-thread-btn {
    background: none; border: none; color: var(--ink-muted);
    cursor: pointer; padding: 2px 4px; border-radius: 4px;
    display: inline-flex; align-items: center;
  }
  .msg-thread-btn:hover { background: var(--surface); color: var(--ink); }

  /* Search result thread badge */
  .src-thread-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px;
    padding: 1px 6px; border-radius: 10px;
    /* DS path: Surface/label/accent/default — translucent blue tint
       that reads as a badge over any chat background. */
    background: var(--surface-label-accent-default);
    color: var(--accent);
    margin-left: 6px;
  }

  /* Thread back button in chat header (when "Поиск в треде" is open) */
  .chat-header-thread-back {
    background: none; border: none; color: var(--ink-muted);
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; margin-right: 4px;
  }
  .chat-header-thread-back:hover { background: var(--surface); color: var(--ink); }

  .member-category { margin-bottom: var(--space-lg); }

  .member-category-title {
    font-size: var(--font-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    padding: 0 var(--space-sm);
    margin-bottom: var(--space-sm);
  }

  .member-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px var(--space-sm);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background var(--transition);
  }
  .member-item:hover { background: var(--surface); }

  .member-item .m-avatar {
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    position: relative;
  }

  .member-item .m-avatar .m-status {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    border: 2.5px solid var(--deep);
  }

  .m-status.online { background: var(--live); }
  .m-status.idle { background: var(--amber); }
  .m-status.dnd { background: var(--coral); }
  .m-status.offline { background: var(--ink-ghost); }

  /* Two-row member row: name on top, @handle muted below.
     .m-text wraps both so the avatar stays vertically centered against
     the stack. */
  .member-item .m-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .member-item .m-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }
  .member-item .m-name {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--ink-secondary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .member-item .m-handle {
    font-size: var(--font-2xs);
    line-height: 1.2;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .member-item:hover .m-name { color: var(--ink); }

  .member-item .m-role-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .voice-bar {
    border-top: 1px solid var(--border);
    background: var(--void);
    padding: var(--space-sm) var(--space-md);
    display: none;
    flex-direction: column;
    gap: var(--space-xs);
    flex-shrink: 0;
  }

  .voice-bar.connected { display: flex; }

  .voice-bar-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--live);
  }

  .voice-bar-status .pulse {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--live);
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .voice-bar-channel {
    font-size: var(--font-2xs);
    color: var(--ink-muted);
    padding-left: 20px;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .voice-bar-actions {
    display: flex;
    gap: var(--space-xs);
    padding-top: var(--space-xs);
  }

  .voice-ctrl {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--glass);
    color: var(--ink-secondary);
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .voice-ctrl:hover { background: var(--glass-hover); color: var(--ink); }
  .voice-ctrl.muted { background: var(--coral-soft); color: var(--coral); }
  .voice-ctrl.disconnect { background: var(--coral-soft); color: var(--coral); }
  .voice-ctrl.disconnect:hover { background: var(--coral); color: white; }

  /* Speak-call mode: the bar shows up while a Speak iframe is alive (even
     when minimized), with a different mix of buttons. mic/cam/screen are
     hidden because we have no postMessage bridge into the iframe to drive
     them — restore + disconnect are the only ones that work from outside. */
  #vcRestore { display: none; }
  .voice-bar.speak #vcMic,
  .voice-bar.speak #vcCam,
  .voice-bar.speak #vcScreen { display: none; }
  .voice-bar.speak #vcRestore { display: flex; }

  .tooltip {
    position: fixed;
    background: var(--color-black-100);
    border: 1px solid var(--border-mid);
    color: var(--ink);
    font-size: var(--font-md);
    font-weight: 600;
    padding: 8px 12px;
    border-radius: var(--radius-s);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition);
    z-index: 999;
    box-shadow: var(--shadow-s);
    white-space: nowrap;
  }
  .tooltip.visible { opacity: 1; }
  .tooltip.right::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px; height: 8px;
    background: var(--color-black-100);
    border-left: 1px solid var(--border-mid);
    border-bottom: 1px solid var(--border-mid);
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
    animation: fadeIn 160ms;
  }
  .modal-overlay.visible { display: flex; }

  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .modal {
    background: var(--raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(var(--blur));
    width: 680px;
    max-height: 80vh;
    display: flex;
    animation: slideUp 200ms ease;
    overflow: hidden;
    box-shadow: var(--shadow-l);
  }

  @keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .modal-nav {
    width: 200px;
    background: var(--void);
    padding: var(--space-lg) var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
  }

  .modal-nav-item {
    padding: 8px var(--space-md);
    border-radius: var(--radius-s);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .modal-nav-item:hover { background: var(--surface); color: var(--ink-secondary); }
  .modal-nav-item.active { background: var(--elevated); color: var(--ink); }
  .modal-nav-item.disabled {
    color: var(--ink-ghost);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
  }

  .modal-nav-divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-sm) var(--space-md);
  }

  .modal-nav-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-ghost);
    padding: var(--space-sm) var(--space-md) var(--space-xs);
  }

  .modal-nav-version {
    margin-top: auto;
    padding: var(--space-md) var(--space-md) var(--space-sm);
    font-size: var(--font-2xs);
    color: var(--ink-ghost);
    letter-spacing: 0.04em;
    user-select: none;
    text-align: center;
    opacity: 0.6;
  }

  .modal-content {
    flex: 1;
    padding: var(--space-2xl);
    overflow-y: auto;
  }

  .modal-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--space-xl);
    color: var(--ink);
  }

  .modal-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-mid);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .modal-close:hover { background: var(--surface); color: var(--ink); }

  .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border);
  }

  .settings-row .label {
    font-size: var(--font-sm);
    color: var(--ink-secondary);
  }

  /* Profile form */
  .pf-field { display: flex; flex-direction: column; gap: 6px; }
  .pf-field > label {
    font-size: var(--font-sm); color: var(--ink-secondary); font-weight: 500;
  }
  .pf-input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border-mid);
    color: var(--ink);
    padding: 10px var(--space-md);
    border-radius: var(--radius-m);
    font-family: inherit; font-size: var(--font-md);
    outline: none;
    transition: border-color var(--transition);
  }
  .pf-input:focus { border-color: var(--accent); }
  .pf-input:disabled { background: var(--deep); color: var(--ink-muted); cursor: not-allowed; }
  .pf-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
  .pf-counter {
    font-size: var(--font-2xs); color: var(--ink-ghost); text-align: right;
    margin-top: -2px;
  }
  .pf-username-hint {
    font-size: var(--font-2xs); min-height: 14px; line-height: 14px;
    color: var(--ink-muted);
  }
  .pf-username-hint.ok    { color: var(--live); }
  .pf-username-hint.bad   { color: var(--coral); }
  /* Required-asterisk + help-text under the label, used by the
     mandatory «Никнейм» field. */
  .pf-required { color: var(--coral); margin-left: 2px; }
  .pf-field-help { font-size: var(--font-2xs); color: var(--ink-muted); line-height: 1.4; }

  /* Generic settings sub-section (calendar feed, future blocks). Sits at
     the bottom of the profile form, separated from the save row above. */
  .pf-section {
    margin-top: var(--space-lg); padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
  }
  .pf-section-title {
    font-size: var(--font-sm); font-weight: 600; color: var(--ink); margin-bottom: var(--space-xs);
  }
  .pf-section-help {
    font-size: var(--font-xs); color: var(--ink-muted); margin: 0 0 var(--space-md);
    line-height: 1.4;
  }
  .pf-feed-row {
    display: flex; gap: var(--space-sm); align-items: center;
  }
  .pf-feed-row .pf-input { flex: 1; min-width: 0; font-family: monospace; font-size: var(--font-xs); }

  /* Public-profile share-link block in profile settings. Same shape as
     the calendar-feed row above (input + copy button), with the
     visibility toggle directly underneath. */
  .pf-public-link-row {
    display: flex; gap: var(--space-sm); align-items: center;
  }
  .pf-public-link-row .pf-input { flex: 1; min-width: 0; font-family: monospace; font-size: var(--font-xs); }
  .pf-toggle-row {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--font-xs); color: var(--ink-secondary); cursor: pointer;
  }
  .pf-toggle-row input { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); }


  .pf-btn {
    padding: 9px 18px; border-radius: var(--radius-m); border: none;
    font-family: inherit; font-size: var(--font-sm); font-weight: 600; cursor: pointer;
    transition: background var(--transition);
  }
  .pf-btn-cancel { background: var(--elevated); color: var(--ink-secondary); }
  .pf-btn-cancel:hover { background: var(--float); color: var(--ink); }
  .pf-btn-save { background: var(--accent); color: white; }
  .pf-btn-save:hover { background: var(--accent-hover); }
  .pf-btn-save:disabled { background: var(--glass); color: var(--ink-muted); cursor: not-allowed; }

  /* DS path: Surface/toggle/{accent,neutral}/{default,hovered,disabled}.
     Off (neutral) → translucent white-overlay. On (accent) → DS blue.
     Disabled fades to half-opacity tokens so the same selector covers
     all four states without per-feature rgba. */
  .toggle {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: var(--surface-toggle-neutral-default);
    cursor: pointer;
    position: relative;
    transition: background var(--transition);
    border: none;
  }
  .toggle:hover { background: var(--surface-toggle-neutral-hovered); }
  .toggle.on { background: var(--surface-toggle-accent-default); }
  .toggle.on:hover { background: var(--surface-toggle-accent-hovered); }
  .toggle:disabled,
  .toggle[aria-disabled="true"] {
    background: var(--surface-toggle-neutral-disabled);
    cursor: not-allowed;
  }
  .toggle.on:disabled,
  .toggle.on[aria-disabled="true"] {
    background: var(--surface-toggle-accent-disabled);
  }
  .toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: var(--surface-toggle-thumb);
    transition: transform var(--transition);
  }
  .toggle.on::after { transform: translateX(18px); }

  .context-menu {
    position: fixed;
    background: var(--raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-m);
    padding: var(--space-xs);
    min-width: 220px;
    z-index: 200;
    box-shadow: var(--shadow-m);
    backdrop-filter: blur(var(--blur));
    display: none;
    animation: fadeIn 100ms;
  }
  .context-menu.visible { display: block; }
  .ctx-item.has-submenu { padding-right: var(--space-md); }
  .ctx-item.has-submenu .ctx-chevron { margin-left: auto; opacity: 0.6; }
  .ctx-item-sub { font-size: var(--font-2xs); color: var(--ink-muted); margin-top: 2px; }
  .ctx-item.has-submenu:hover .ctx-item-sub { color: var(--ink); }

  /* Two-row context-menu item — title + subline (current state, like
     Discord's "Notification Settings: Only @mentions" or
     "Muted until 14:30"). Used by the unified notify picker. */
  .ctx-item-with-subline { align-items: flex-start; padding-top: 7px; padding-bottom: 7px; }
  .ctx-item-with-subline .ctx-item-label { display: flex; flex-direction: column; gap: 1px; }
  .ctx-item-subline { font-size: var(--font-2xs); color: var(--ink-muted); }
  .ctx-item-with-subline:hover .ctx-item-subline { color: var(--ink); }

  .ctx-reactions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: var(--space-xs);
    margin-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border);
  }
  .ctx-reaction-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: transform var(--transition), background var(--transition);
  }
  .ctx-reaction-btn:hover {
    background: var(--accent-soft);
    transform: scale(1.18);
  }
  .ctx-reaction-more {
    color: var(--ink-secondary);
    margin-left: auto;
  }
  .ctx-reaction-more:hover { color: var(--ink); }

  .ctx-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 7px var(--space-md);
    border-radius: var(--radius-s);
    font-size: var(--font-sm);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .ctx-item:hover { background: var(--accent); color: white; }
  .ctx-item.danger:hover { background: var(--coral); color: white; }
  .ctx-item .ctx-icon { width: 18px; display: flex; align-items: center; justify-content: center; }

  .ctx-divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-xs) var(--space-sm);
  }
  .ctx-separator { height: 1px; background: var(--border); margin: var(--space-xs) var(--space-sm); }
  .ctx-danger:hover { background: var(--coral) !important; color: white !important; }

  /* `.btn` family — canonical definition lives in components.css (DS
     "Button" component). Thread modals consume the same classes. */

  .ctx-item.disabled {
    color: var(--ink-ghost);
    cursor: default;
    pointer-events: none;
  }
  .ctx-item.has-submenu { padding-right: 28px; position: relative; }
  .ctx-item.has-submenu::after {
    content: '';
    position: absolute;
    right: 10px; top: 50%;
    width: 0; height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transform: translateY(-50%);
    opacity: 0.5;
  }
  .ctx-item.has-submenu:hover::after { opacity: 1; }
  .ctx-submenu {
    display: none;
    position: absolute;
    left: calc(100% + 2px);
    top: -5px;
    background: var(--raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-m);
    padding: var(--space-xs);
    min-width: 220px;
    box-shadow: var(--shadow-m);
    backdrop-filter: blur(var(--blur));
    z-index: 250;
    animation: fadeIn 100ms;
  }
  .ctx-item.has-submenu:hover > .ctx-submenu,
  .ctx-submenu:hover { display: block; }
  /* DS path: Surface/radio/{accent,neutral}/{default,hovered,disabled}.
     Unselected mark borders use the neutral surface; selected uses
     accent. Hover swaps both to on-accent white so the row reads as
     "active". The :disabled rule mirrors the DS disabled state. */
  .ctx-radio {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px var(--space-md);
    border-radius: var(--radius-s);
    color: var(--ink-secondary);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: background var(--transition);
  }
  .ctx-radio:hover { background: var(--surface-radio-accent-default); color: var(--on-accent); }
  .ctx-radio[aria-disabled="true"],
  .ctx-radio.disabled { opacity: 0.5; cursor: not-allowed; }
  .ctx-radio[aria-disabled="true"]:hover,
  .ctx-radio.disabled:hover { background: transparent; color: var(--ink-secondary); }
  .ctx-radio-mark {
    width: 16px; height: 16px; border-radius: var(--radius-full);
    border: 2px solid var(--surface-radio-neutral-default);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color var(--transition);
  }
  .ctx-radio.selected .ctx-radio-mark { border-color: var(--surface-radio-accent-default); }
  .ctx-radio.selected .ctx-radio-mark::after {
    content: ''; width: 8px; height: 8px;
    border-radius: var(--radius-full); background: var(--surface-radio-accent-default);
  }
  .ctx-radio:hover .ctx-radio-mark { border-color: var(--on-accent); }
  .ctx-radio:hover.selected .ctx-radio-mark::after { background: var(--on-accent); }
  .ctx-radio[aria-disabled="true"] .ctx-radio-mark,
  .ctx-radio.disabled .ctx-radio-mark { border-color: var(--surface-radio-neutral-disabled); }
  .ctx-radio[aria-disabled="true"].selected .ctx-radio-mark,
  .ctx-radio.disabled.selected .ctx-radio-mark { border-color: var(--surface-radio-accent-disabled); }
  .ctx-radio[aria-disabled="true"].selected .ctx-radio-mark::after,
  .ctx-radio.disabled.selected .ctx-radio-mark::after { background: var(--surface-radio-accent-disabled); }

  .welcome-hero {
    text-align: center;
    padding: 60px var(--space-xl) var(--space-xl);
  }

  .welcome-hero .welcome-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto var(--space-xl);
    border-radius: var(--radius-xl);
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
  }

  .welcome-hero h1 {
    font-size: var(--font-2xl);
    font-weight: 700;
    margin-bottom: var(--space-sm);
  }

  .welcome-hero p {
    font-size: var(--font-md);
    color: var(--ink-muted);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.5;
  }

  .msg-embed {
    margin-top: var(--space-sm);
    border-left: 3px solid var(--accent);
    background: var(--deep);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    padding: var(--space-md);
    max-width: 480px;
  }

  .msg-embed .embed-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--accent);
    margin-bottom: var(--space-xs);
  }

  .msg-embed .embed-desc {
    font-size: var(--font-sm);
    color: var(--ink-secondary);
    line-height: 1.4;
  }

  .new-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
  }

  .new-divider::before { content: ''; flex: 1; height: 1px; background: var(--coral); opacity: 0.5; }
  .new-divider::after { content: ''; flex: 1; height: 1px; background: var(--coral); opacity: 0.5; }
  .new-divider span { font-size: var(--font-2xs); font-weight: 600; color: var(--coral); white-space: nowrap; }

  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--float); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--glow); }

  /* ── Login Screen ── */
  .login-overlay {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: var(--space-xl);
    /* Бренд-визуал (Stripe-inspired): мягкие цветные glow'ы поверх void.
       Fallback — плоский void, если color-mix не поддержан. */
    background: var(--void);
    background:
      radial-gradient(70% 55% at 78% 20%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 60%),
      radial-gradient(55% 50% at 16% 86%, color-mix(in srgb, var(--live) 16%, transparent) 0%, transparent 58%),
      radial-gradient(48% 42% at 94% 92%, color-mix(in srgb, var(--coral) 12%, transparent) 0%, transparent 55%),
      var(--void);
  }
  .login-overlay.hidden { display: none; }
  .login-box {
    text-align: left;
    padding: var(--space-2xl) 40px;
    background: var(--raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-l);
    backdrop-filter: blur(var(--blur));
    max-width: 400px; width: 100%;
  }
  .login-logo { font-size: 32px; font-weight: 700; color: var(--accent); margin-bottom: var(--space-xs); letter-spacing: -0.5px; }
  .login-sub { font-size: var(--font-md); color: var(--ink-muted); margin-bottom: var(--space-xl); }

  /* Нижняя ссылка-переключатель login⇄signup (Stripe-стиль, вместо табов):
     отдельная строка под формой, по центру. */
  .auth-switch {
    margin-top: var(--space-xl);
    text-align: center;
    font-size: var(--font-sm);
    color: var(--ink-muted);
  }
  .auth-switch-link {
    color: var(--accent); cursor: pointer; text-decoration: none;
    font-weight: 600; margin-left: var(--space-xs);
  }
  .auth-switch-link:hover { text-decoration: underline; }

  /* Auth-панель — flex-column с РОВНЫМ ритмом (12px) между полями.
     Заменяет ad-hoc inline margin-bottom 8/10px (отсюда «кнопка
     прилипла»). Кнопка получает margin-top:24px отдельно. */
  .auth-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: left;
  }

  /* Единый input — заменяет 6× дублированных inline-блоков. */
  .auth-input {
    width: 100%;
    height: 44px;
    padding: 12px 14px;
    background: var(--deep);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-m);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--font-md);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .auth-input::placeholder { color: var(--ink-ghost); }
  /* Focus-ring — раньше был голый outline:none без замены (нет
     индикатора фокуса). a11y-обязательно. */
  .auth-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  /* Error-state — снимается на следующий input-event (JS). Текст
     ошибки снизу с зарезервированной высотой (без layout-прыжка). */
  .auth-input.is-error {
    border-color: var(--coral);
    box-shadow: 0 0 0 3px var(--coral-soft);
  }
  /* Autofill (менеджеры паролей / браузер) рисует свой светлый фон поверх
     --deep, из-за чего автозаполненные поля выглядели светлее остальных.
     WebKit/Blink игнорируют background на :-webkit-autofill, но РИСУЮТ
     box-shadow поверх — перекрашиваем inset-заливкой 1000px + фиксим цвет
     текста/каретки. Этого достаточно (transition-трюк не нужен). */
  .auth-input:-webkit-autofill,
  .auth-input:-webkit-autofill:hover,
  .auth-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--deep) inset;
    box-shadow: 0 0 0 1000px var(--deep) inset;
    /* «Белая обводка» от LastPass: он подсвечивает заполненное поле светлым
       фоном, который просвечивает сквозь полупрозрачную --border-mid
       (white-8%). Делаем рамку НЕПРОЗРАЧНОЙ (--raised ≈ white-8% над --deep,
       визуально та же) + background-clip:padding-box, чтобы подсветка не
       доходила до области рамки. outline:none — на случай focus/autofill
       outline. */
    border-color: var(--raised) !important;
    background-clip: padding-box;
    outline: none !important;
    /* Без анимации: иначе inset-заливка + border «наезжают» за 160ms при
       autofill на загрузке — это и читается как «что-то подгружается». */
    transition: none;
  }
  /* Сохраняем focus-ring поверх inset-заливки на автозаполненном поле. */
  .auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--deep) inset, 0 0 0 3px var(--accent-soft);
    box-shadow: 0 0 0 1000px var(--deep) inset, 0 0 0 3px var(--accent-soft);
    border-color: var(--accent) !important;
    background-clip: padding-box;
    outline: none !important;
    transition: none;
  }
  /* Поле + его подсказка как один «ряд» — gap панели (12px) применяется
     между этой группой и соседними полями, а подсказка липнет к своему
     инпуту через малый внутренний gap (4px). Раньше подсказка была
     отдельным flex-элементом с negative-margin'ом, из-за чего ритм
     ломался (никнейм→подсказка 4px, подсказка→пароль 12px = «провал»). */
  .auth-hint { font-size: var(--font-2xs); color: var(--ink-muted); min-height: 14px; padding-left: 2px; }

  /* Stripe-polish — лейбл над полем (вместо плейсхолдера): чище +
     доступнее. Поле+лейбл — один «ряд» (gap 4px), между рядами работает
     gap панели (12px). */
  .auth-field { display: flex; flex-direction: column; gap: var(--space-xs); }
  .auth-label { font-size: var(--font-xs); font-weight: 600; color: var(--ink-muted); }
  .auth-label-opt { font-weight: 400; color: var(--ink-ghost); }
  /* Строка лейбла пароля: «Пароль» слева, «Забыли пароль?» справа
     (Stripe-точно — вместо отдельной строки под кнопкой). */
  .auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
  .auth-forgot-link {
    color: var(--accent); cursor: pointer; text-decoration: none;
    font-size: var(--font-xs); white-space: nowrap;
  }
  .auth-forgot-link:hover { text-decoration: underline; }

  /* Согласие с правилами на signup — чекбокс + ссылки на Условия/Политику. */
  .auth-consent {
    display: flex; align-items: flex-start; gap: var(--space-sm);
    font-size: var(--font-xs); color: var(--ink-muted);
    line-height: 1.4; cursor: pointer;
  }
  .auth-consent-box {
    margin-top: 1px; width: 16px; height: 16px; flex-shrink: 0;
    accent-color: var(--accent); cursor: pointer;
  }
  .auth-consent a { color: var(--accent); text-decoration: none; }
  .auth-consent a:hover { text-decoration: underline; }

  /* Прогрессивное раскрытие входа — email-chip на шаге 2 («ваш@email · Изменить»). */
  .auth-email-chip {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); padding: 12px 14px;
    background: var(--deep); border: 1px solid var(--border-mid);
    border-radius: var(--radius-m); font-size: var(--font-md);
  }
  .auth-email-chip-val { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auth-email-chip .auth-back { flex-shrink: 0; }
  /* Подсветка чекбокса при пропущенном согласии. */
  .auth-consent.is-error { color: var(--coral); }
  .auth-consent.is-error .auth-consent-box { outline: 2px solid var(--coral); outline-offset: 1px; }

  /* Валидация/фидбек на signup — strength-метр, Caps Lock, пер-полевые
     ошибки. Все эти элементы инжектятся из auth.js под нужными полями. */
  .auth-strength { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
  .auth-strength[hidden] { display: none; }
  .auth-strength-bars { display: flex; gap: 4px; }
  .auth-strength-seg {
    flex: 1; height: 4px; border-radius: 2px;
    background: var(--border-mid);
    transition: background var(--transition);
  }
  .auth-strength[data-score="1"] .auth-strength-seg.on { background: var(--coral); }
  .auth-strength[data-score="2"] .auth-strength-seg.on { background: var(--amber); }
  .auth-strength[data-score="3"] .auth-strength-seg.on { background: var(--live); }
  .auth-strength[data-score="4"] .auth-strength-seg.on { background: var(--live); }
  .auth-strength-label { font-size: var(--font-2xs); color: var(--ink-muted); min-height: 14px; }

  .auth-caps {
    display: flex; align-items: center; gap: 4px;
    font-size: var(--font-2xs); color: var(--amber); margin-top: 2px;
  }
  .auth-caps[hidden] { display: none; }

  .auth-field-error { font-size: var(--font-2xs); color: var(--coral); min-height: 14px; }
  .auth-field-error:empty { min-height: 0; }
  /* Зелёный hint (никнейм свободен) — переиспользуем .auth-hint + модификатор. */
  .auth-hint.is-ok { color: var(--live); }
  .auth-hint.is-bad { color: var(--coral); }

  /* Обёртка инпута (позиционирующий контекст). Нужна, чтобы менеджеры
     паролей (LastPass) вставляли свою in-field иконку ВНУТРЬ обёртки, а
     не как лишний flex-child в .auth-field (иначе gap:4px добавлял +4px к
     высоте поля при автозаполнении — «карточка подрастает»). */
  .auth-input-wrap { position: relative; }

  /* Password show/hide — кнопка-глазик внутри поля справа. */
  .auth-pw-wrap { position: relative; }
  .auth-pw-wrap .auth-input { padding-right: 42px; }
  .auth-pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; padding: 0;
    color: var(--ink-muted); cursor: pointer;
    border-radius: var(--radius-s);
    transition: color var(--transition), background var(--transition);
  }
  .auth-pw-toggle:hover { color: var(--ink); background: var(--glass-hover); }
  .auth-pw-toggle svg { display: block; }
  .auth-error { color: var(--coral); font-size: var(--font-xs); min-height: 16px; }

  .login-btn {
    width: 100%; height: 44px; padding: 0; border: none; border-radius: var(--radius-m);
    background: var(--accent); color: white; font-family: inherit;
    font-size: var(--font-md); font-weight: 600; cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
    /* 24px от последнего поля — фикс «кнопка прилипла». */
    margin-top: var(--space-md);
  }
  .login-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
  .login-btn:active { transform: translateY(0); }
  .login-btn:disabled {
    background: var(--accent-soft); color: var(--ink-muted);
    cursor: not-allowed; transform: none;
  }
  .login-btn svg { flex-shrink: 0; }

  /* Back-ссылки в forgot/reset панелях (← Назад, Запросить новую). */
  .auth-back {
    color: var(--accent); cursor: pointer; text-decoration: none;
    font-size: var(--font-xs);
  }
  .auth-back:hover { text-decoration: underline; }

  /* Phase 3 — success/info-сообщение (зелёное) для forgot/reset/done
     экранов. min-height резервирует строку, чтобы не было layout-прыжка. */
  .auth-success {
    color: var(--live);
    font-size: var(--font-sm);
    line-height: 1.4;
    min-height: 16px;
  }
  /* Ряд back-ссылок под кнопкой (forgot/reset). Когда видна вторая
     ссылка («Запросить новую») — space-between, иначе одна справа. */
  .auth-back-row {
    margin-top: var(--space-lg);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-lg);
    font-size: var(--font-xs);
  }

  /* ── Friends View ── */
  .friends-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  .friends-header {
    height: 52px; display: flex; align-items: center; padding: 0 var(--space-lg);
    border-bottom: 1px solid var(--border); gap: var(--space-lg); flex-shrink: 0;
  }
  .friends-header h3 { font-size: var(--font-md); font-weight: 600; white-space: nowrap; }
  .friends-tabs { display: flex; gap: 2px; }
  .friends-tab {
    padding: 6px 14px; border-radius: var(--radius-s); font-size: var(--font-sm); font-weight: 500;
    color: var(--ink-muted); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    background: transparent; border: none; font-family: inherit;
  }
  .friends-tab:hover { background: var(--surface); color: var(--ink-secondary); }
  .friends-tab.active { background: var(--elevated); color: var(--ink); }
  .friends-tab-add { color: var(--live); }
  .friends-tab-add.active { background: var(--live); color: white; }
  .friends-tab .tab-badge {
    display: inline-block; background: var(--coral); color: white;
    font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 8px; margin-left: 4px;
  }
  .friends-content { flex: 1; overflow-y: auto; padding: var(--space-lg); }
  .friend-item {
    display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md);
    border-radius: var(--radius-m); transition: background var(--transition); cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
  .friend-item:last-child { border-bottom: none; }
  .friend-item:hover { background: var(--surface); }
  .friend-avatar {
    width: var(--avatar-lg); height: var(--avatar-lg); border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-md); font-weight: 700; color: white; flex-shrink: 0; position: relative;
  }
  .friend-avatar .presence {
    position: absolute; bottom: -1px; right: -1px;
    width: 12px; height: 12px; border-radius: var(--radius-full);
    border: 2.5px solid var(--surface);
  }
  .friend-info { flex: 1; min-width: 0; }
  .friend-name { font-size: var(--font-md); font-weight: 600; color: var(--ink); }
  .friend-status { font-size: var(--font-xs); color: var(--ink-muted); }
  .friend-actions { display: flex; gap: var(--space-xs); }
  .friend-action-btn {
    width: 36px; height: 36px; border-radius: var(--radius-pill);
    background: var(--glass); border: none; color: var(--ink-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .friend-action-btn:hover { background: var(--glass-hover); color: var(--ink); }
  .add-friend-form {
    background: var(--raised); border-radius: var(--radius-m); padding: var(--space-xl);
    border: 1px solid var(--border);
  }
  .add-friend-form h4 { font-size: var(--font-lg); font-weight: 700; margin-bottom: var(--space-xs); }
  .add-friend-form p { font-size: var(--font-sm); color: var(--ink-muted); margin-bottom: var(--space-lg); }
  .add-friend-input-row { display: flex; gap: var(--space-sm); }
  .add-friend-input {
    flex: 1; padding: 12px var(--space-lg); background: var(--deep);
    border: 1px solid var(--border-mid); border-radius: var(--radius-m);
    color: var(--ink); font-family: inherit; font-size: var(--font-md); outline: none;
    transition: border-color var(--transition);
  }
  .add-friend-input:focus { border-color: var(--accent); }
  .add-friend-input::placeholder { color: var(--ink-ghost); }
  .add-friend-submit {
    padding: 12px 24px; background: var(--accent); color: white;
    border: none; border-radius: var(--radius-m); font-family: inherit;
    font-size: var(--font-md); font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background var(--transition);
  }
  .add-friend-submit:hover { background: var(--accent-hover); }
  .add-friend-input-wrap { position: relative; }
  .add-friend-dropdown {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
    overflow: hidden; z-index: 10;
    max-height: 280px; overflow-y: auto;
  }
  .add-friend-row {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: 8px 12px; cursor: pointer;
    transition: background var(--transition);
  }
  .add-friend-row:hover, .add-friend-row.active { background: var(--surface); }
  .add-friend-avatar {
    width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: var(--font-xs); font-weight: 600;
    flex-shrink: 0;
  }
  .add-friend-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .add-friend-name {
    font-size: var(--font-md); color: var(--ink); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .add-friend-handle {
    font-size: var(--font-xs); color: var(--ink-muted); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .add-friend-badge {
    font-size: var(--font-2xs); color: var(--ink-muted); flex-shrink: 0;
  }
  .add-friend-empty {
    padding: 12px; font-size: var(--font-sm); color: var(--ink-muted);
    text-align: center;
  }

  /* Server audit log — list inside the «Журнал действий» modal. */
  .audit-list {
    display: flex; flex-direction: column;
  }
  .audit-row {
    display: flex; gap: var(--space-md);
    padding: 12px var(--space-xl);
    border-bottom: 1px solid var(--border);
  }
  .audit-row:last-child { border-bottom: none; }
  .audit-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    flex-shrink: 0; object-fit: cover;
  }
  .audit-avatar--initials,
  .audit-avatar--system {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: var(--font-sm); font-weight: 600;
  }
  .audit-avatar--system {
    background: var(--elevated); color: var(--ink-muted);
  }
  .audit-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .audit-line {
    font-size: var(--font-md); line-height: 1.35; color: var(--ink);
  }
  .audit-actor {
    font-weight: 600; color: var(--ink);
  }
  .audit-summary {
    color: var(--ink-secondary); margin-left: 6px;
  }
  .audit-meta {
    font-size: var(--font-xs); color: var(--ink-muted);
  }
  .audit-empty {
    padding: 32px var(--space-xl);
    text-align: center; color: var(--ink-muted);
    font-size: var(--font-sm);
  }