/* Contacts — collapsible sidebar */
  /* ---------- Collapsible sidebar (Contacts) ---------- */
  .side-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 345px;
    height: 100vh;
    background: var(--panel);
    border-right: 1px solid rgba(252, 238, 10, 0.35);
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 50;
    display: flex;
    flex-direction: column;
  }
  .side-panel.open {
    transform: translateX(0);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  }
  .side-panel.peer-open {
    visibility: hidden;
  }
  .side-toggle {
    position: absolute;
    left: 100%;
    top: 90px;
    width: 32px;
    height: 170px;
    background: var(--panel);
    color: var(--yellow);
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 0;
    font-family: 'JetBrains Mono', monospace;
    --aug-border-all: 1px;
    --aug-border-bg: rgba(252, 238, 10, 0.45);
    --aug-inlay-all: 0px;
    --aug-inlay-bg: var(--panel);
    --aug-tr: 10px;
    --aug-br: 10px;
    transition: color 0.15s, box-shadow 0.15s;
  }
  .side-toggle .label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
  }
  /* CJK reads top-to-bottom natively in vertical-rl, so the 180° flip
     used for Latin would render the labels upside down. */
  html[lang="ja"] .side-toggle .label,
  html[lang="zh"] .side-toggle .label {
    transform: none;
  }
  .side-toggle .arrow {
    font-size: 16px;
    line-height: 1;
  }
  .side-toggle:hover {
    color: var(--cyan);
    box-shadow: 8px 0 18px rgba(252, 238, 10, 0.2);
  }
  .side-inner {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
  }
  .side-toggle-2 {
    top: 280px !important;
  }
  /* THEMES toggle — 3rd in the column, below snapshots (top:280, h:170,
     bottom@450). 130px tall since "THEMES" fits comfortably in less room. */
  .side-toggle-themes {
    top: 470px !important;
    height: 130px;
  }
  .side-toggle-donate {
    top: auto !important;
    bottom: 24px;
    height: 130px;
  }
  /* ---------- Themes list (inside #sideThemes) ---------- */
  #sideThemes .side-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .themes-coming {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--dim);
    text-transform: uppercase;
    margin-top: 16px;
  }
  .theme-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .theme-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--panel-2);
    border-left: 2px solid var(--dim);
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .theme-item:hover {
    border-left-color: var(--cyan);
    color: var(--cyan);
    background: color-mix(in srgb, var(--cyan) 8%, var(--panel-2));
  }
  .theme-item.active {
    border-left-color: var(--yellow);
    color: var(--yellow);
  }
  .theme-item .theme-pip {
    width: 10px;
    height: 10px;
    background: var(--accent, var(--yellow));
    border: 1px solid var(--cyan);
    flex-shrink: 0;
  }
  /* Heavy-glitch overlay applied to the stage while a theme item is hovered.
     Combines the existing #glitch-slices SVG filter (boosted in JS via
     scale=80 on feDisplacementMap) with a fast steps() shake so the preview
     reads as "channel switching" rather than just "filter on". */
  .stage.theme-previewing .dialog,
  .stage.theme-previewing .stage-channel {
    filter: url(#glitch-slices) !important;
  }
  .stage.theme-previewing {
    animation: themePreviewShake 0.07s steps(2) infinite;
  }
  @keyframes themePreviewShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(2px, -2px); }
    75% { transform: translate(-1px, -1px); }
  }
  .donate-message {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin-bottom: 22px;
  }
  .donate-message p {
    margin: 0 0 12px 0;
  }
  .donate-message p:last-child {
    margin-bottom: 0;
    color: var(--cyan);
  }
  .donate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    text-decoration: none;
    background: var(--yellow);
    color: var(--bg);
    padding: 14px 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;  
    text-transform: uppercase;
    cursor: pointer;
    --aug-border-all: 1px;
    --aug-border-bg: var(--yellow);
    --aug-inlay-all: 0px;
    --aug-tl: 10px;
    --aug-br: 10px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
  }
  .donate-btn:hover {
    background: var(--cyan);
    --aug-border-bg: var(--cyan);
    box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 50%, transparent);
  }
  #sideDonate .side-inner {
    display: flex;
    flex-direction: column;
  }
  .donate-qr-wrap {
    margin-top: auto;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .donate-qr-caption {
    font-family: 'JetBrains Mono', monospace;
    color: var(--dim);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
  }
  .donate-qr {
    padding: 10px;
    background: #0a0800;
    --aug-border-all: 1px;
    --aug-border-bg: var(--yellow);
    --aug-inlay-all: 0px;
    --aug-tl: 8px;
    --aug-br: 8px;
    box-shadow: 0 0 14px color-mix(in srgb, var(--yellow) 30%, transparent);
    line-height: 0;
  }
  .donate-qr img,
  .donate-qr svg {
    display: block;
    width: 150px;
    height: 150px;
  }
  .side-inner h2 {
    margin: 0 0 18px 0;
    font-family: 'JetBrains Mono', monospace;
    color: var(--yellow);
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
  }
  .contact-form { margin-bottom: 18px; }
  .contact-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
  }
  .contact-form-row #addContact { margin-left: auto; }
  .contact-avatar-preview {
    width: 36px;
    height: 36px;
    background: var(--panel-2);
    border: 1px dashed rgba(0, 240, 255, 0.35);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
  }
  .contact-form-row input[type="text"] {
    flex: 1;
    background: var(--panel-2);
    border: 1px solid rgba(0, 240, 255, 0.25);
    color: var(--text);
    padding: 8px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    outline: none;
    height: 36px;
    box-sizing: border-box;
  }
  .contact-form-row input[type="text"]:focus { border-color: var(--yellow); }

  .contact-list-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .contact-list:empty + .contact-list-footer {
    display: none;
  }
  .contact-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .contact-list:empty::before {
    content: var(--empty-contacts, 'NO CONTACTS');
    color: var(--dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 6px 0;
  }
  .contact {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel-2);
    padding: 6px 10px;
    border-left: 2px solid var(--cyan);
    cursor: pointer;
    transition: border-left-color 0.15s, background 0.15s, transform 0.08s;
  }
  .contact:hover {
    border-left-color: var(--yellow);
    background: color-mix(in srgb, var(--yellow) 8%, var(--panel-2));
  }
  .contact:active { transform: scale(0.98); }
  .contact .contact-avatar {
    width: 32px;
    height: 32px;
    background-size: cover;
    background-position: center;
    background-color: var(--panel);
    border: 1px solid var(--cyan);
    flex-shrink: 0;
  }
  .contact .contact-name {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    font-size: 12px;
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .contact .contact-name-input {
    flex: 1;
    background: var(--panel);
    border: 1px solid rgba(0, 240, 255, 0.45);
    color: var(--text);
    padding: 4px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    outline: none;
    height: 28px;
    box-sizing: border-box;
    display: none;
    min-width: 0;
  }
  .contact .contact-name-input:focus { border-color: var(--yellow); }
  .contact.editing .contact-name { display: none; }
  .contact.editing .contact-name-input { display: block; }
  .contact.editing { cursor: default; }
  .contact.editing .contact-avatar { cursor: pointer; border-color: var(--yellow); }
  /* Drag-and-drop hover style is shared from `.dnd-target` in base.css. */
  /* Swap the edit/save glyph based on .editing state */
  .contact [data-edit] .icon-save { display: none; }
  .contact.editing [data-edit] .icon-edit { display: none; }
  .contact.editing [data-edit] .icon-save { display: inline; }