/* Base — vars, layout, panels, fields, buttons, swatches, toast */
  :root {
    --yellow: #fcee0a;
    --cyan: #00f0ff;
    --magenta: #ff003c;
    --bg: #050507;
    --panel: #0b0b10;
    --panel-2: #15151c;
    --text: #e8e8ee;
    --dim: #7a7a88;
  }

  * { box-sizing: border-box; }

  /* ---------- Cyberpunk scrollbars ---------- */
  /* NOTE: do NOT set standard `scrollbar-color` / `scrollbar-width` on `*`.
     In Chromium they take precedence and silently disable every
     `::-webkit-scrollbar*` pseudo, killing the custom theme.
     Firefox-only fallback is scoped via @supports below. */
  /* WebKit / Blink (Chrome, Edge, Safari) — full custom theme:
     cyan pip thumb in a thin track with cyan-bordered triangle buttons
     on each end. Triangles painted via inline SVG background. */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track {
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.35);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--cyan);
    border-radius: 0;
    box-shadow: none;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--yellow); }
  ::-webkit-scrollbar-corner { background: var(--panel); }
  /* Force the arrow buttons visible on all platforms — Chromium hides them
     by default. */
  ::-webkit-scrollbar-button {
    background-color: rgba(0, 240, 255, 0.08);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    display: block;
    height: 8px;
    width: 8px;
  }
  ::-webkit-scrollbar-button:hover { background-color: rgba(0, 240, 255, 0.2); }
  ::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='5,0 10,10 0,10' fill='%2300f0ff'/></svg>");
  }
  ::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='0,0 10,0 5,10' fill='%2300f0ff'/></svg>");
  }
  ::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='0,5 10,0 10,10' fill='%2300f0ff'/></svg>");
  }
  ::-webkit-scrollbar-button:horizontal:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='0,0 10,5 0,10' fill='%2300f0ff'/></svg>");
  }
  /* Hide doubled-up "single-button" variants Chromium sometimes paints */
  ::-webkit-scrollbar-button:start:increment,
  ::-webkit-scrollbar-button:end:decrement { display: none; }

  /* Firefox fallback — it doesn't honor ::-webkit-scrollbar*, so give it
     at least the right colors via the standard properties. Scoped to
     Firefox so Chromium keeps the WebKit pseudo-element path. */
  @supports (-moz-appearance: none) {
    * {
      scrollbar-color: var(--cyan) rgba(0, 240, 255, 0.06);
      scrollbar-width: thin;
    }
  }

  body {
    margin: 0;
    min-height: 100vh;
    background:
      radial-gradient(ellipse at top, rgba(252, 238, 10, 0.05), transparent 60%),
      radial-gradient(ellipse at bottom, rgba(0, 240, 255, 0.05), transparent 60%),
      var(--bg);
    color: var(--text);
    font-family: 'Tektur', system-ui, sans-serif;
    overflow-x: hidden;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.015) 0px,
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px,
      transparent 3px
    );
    z-index: 1;
  }

  header {
    position: relative;
    z-index: 2;
    padding: 18px 32px;
    border-bottom: 1px solid rgba(252, 238, 10, 0.25);
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(180deg, rgba(252, 238, 10, 0.05), transparent);
  }
  header .logo {
    font-family: 'JetBrains Mono', monospace;
    color: var(--yellow);
    font-size: 22px;
    letter-spacing: 2px;
  }
  header .tag {
    font-family: 'JetBrains Mono', monospace;
    color: var(--cyan);
    font-size: 12px;
    letter-spacing: 1px;
    border-left: 1px solid var(--dim);
    padding-left: 18px;
  }
  header .tag .tag-meta {
    cursor: default;
  }
  header .tag .glitchable {
    display: inline-block;
    min-width: 18ch;
    white-space: pre;
  }
  /* CJK targets are short but each glyph is ~1em wide, so the 18ch reserve
     (sized for Latin) leaves a trailing gap before the version number. The
     scramble already pads to MAX_LEN, so width stays stable without it. */
  html[lang="ja"] header .tag .glitchable,
  html[lang="zh"] header .tag .glitchable {
    min-width: 0;
  }
  header .tag .glitchable.glitching {
    color: var(--yellow);
    text-shadow:
      2px 0 var(--cyan),
      -2px 0 #ff003c;
    animation: tagGlitchJitter 0.08s steps(2) infinite;
  }
  @keyframes tagGlitchJitter {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, -1px); }
  }
  header .status {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    color: var(--dim);
    font-size: 11px;
    letter-spacing: 1px;
  }
  header .status .dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--yellow);
    border-radius: 50%;
    margin-right: 8px;
    animation: blink 1.5s infinite;
  }
  @keyframes blink { 50% { opacity: 0.3; } }
  header .lang-select {
    background: var(--panel);
    color: var(--cyan);
    border: 1px solid var(--cyan);
    padding: 6px 26px 6px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    margin-left: 16px;
    appearance: none;
    -webkit-appearance: none;
    /* Custom chevron drawn with two diagonal gradients */
    background-image:
      linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
      linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
    background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    box-shadow:
      inset 0 0 0 1px rgba(0, 240, 255, 0.12),
      0 0 8px rgba(0, 240, 255, 0.2);
    text-shadow: 0 0 4px rgba(0, 240, 255, 0.45);
    /* Notched corners — top-left + bottom-right cut at 8px */
    clip-path: polygon(
      8px 0,
      100% 0,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      0 100%,
      0 8px
    );
    transition: color 0.15s, box-shadow 0.15s, text-shadow 0.15s;
  }
  header .lang-select:hover {
    color: var(--yellow);
    text-shadow: 0 0 6px rgba(252, 238, 10, 0.6);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--yellow) 50%),
      linear-gradient(135deg, var(--yellow) 50%, transparent 50%);
    box-shadow:
      inset 0 0 0 1px rgba(252, 238, 10, 0.18),
      0 0 14px rgba(0, 240, 255, 0.45);
  }
  header .lang-select:focus {
    box-shadow:
      inset 0 0 0 1px rgba(252, 238, 10, 0.25),
      0 0 16px rgba(252, 238, 10, 0.5);
  }
  header .lang-select option {
    background: var(--bg);
    color: var(--cyan);
    font-weight: 700;
    letter-spacing: 2px;
  }

  main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(360px, 460px) 1fr minmax(350px, 410px);
    gap: 18px;
    padding: 28px 32px;
    max-width: 1700px;
    margin: 0 auto;
    align-items: start;
  }

  @media (max-width: 1200px) {
    main { grid-template-columns: 1fr; }
  }

  /* Editor panel — styled via augmented-ui */
  .panel {
    padding: 22px;
    position: relative;
    --aug-border-all: 1px;
    --aug-border-bg: rgba(252, 238, 10, 0.45);
    --aug-inlay-all: 0px;
    --aug-inlay-bg: var(--panel);
    --aug-tl: 14px;
    --aug-tr: 14px;
    --aug-br: 14px;
    --aug-bl: 14px;
    background-color: var(--panel);
  }

  .panel h2 {
    margin: 0 0 18px 0;
    font-family: 'JetBrains Mono', monospace;
    color: var(--yellow);
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
  }

  .field { margin-bottom: 16px; }
  /* SLIM toggle row — label inline with the switch so it doesn't take a whole field height */
  .field.slim-field {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .field.slim-field > label { margin-bottom: 0; flex: 1; }
  .field label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    color: var(--cyan);
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 6px;
    text-transform: uppercase;
  }
  .field input[type="text"],
  .field textarea,
  .row input[type="text"] {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid rgba(0, 240, 255, 0.25);
    color: var(--text);
    padding: 10px 12px;
    font-family: 'Tektur', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .field input[type="text"]:focus,
  .field textarea:focus,
  .row input[type="text"]:focus {
    border-color: var(--yellow);
    box-shadow: 0 0 0 1px var(--yellow);
  }
  .field textarea { min-height: 90px; line-height: 1.45; }

  .row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
  .row .idx {
    font-family: 'JetBrains Mono', monospace;
    color: var(--yellow);
    width: 24px;
    text-align: right;
    font-size: 14px;
  }
  .row input { flex: 1; }

  .btn,
  label.btn {
    --btn-color: var(--yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--btn-color);
    height: 32px;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    border: none;
    margin: 0;
    vertical-align: middle;

    /* augmented-ui */
    --aug-border-all: 1px;
    --aug-border-bg: var(--btn-color);
    --aug-inlay-all: 0px;
    --aug-inlay-bg: transparent;
    --aug-tl: 8px;
    --aug-br: 8px;
  }
  .btn:hover {
    background: color-mix(in srgb, var(--btn-color) 22%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--btn-color) 45%, transparent);
  }
  .btn.cyan { --btn-color: var(--cyan); }
  .btn.ghost { --btn-color: var(--dim); }
  .btn.ghost:hover { box-shadow: none; }
  .btn.danger { --btn-color: var(--magenta); }
  .btn:disabled,
  .btn[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }
  .btn .mi {
    width: 16px;
    height: 16px;
    display: block;
  }
  .btn.icon { padding: 0 10px; font-size: 13px; --aug-tl: 4px; --aug-br: 4px; }

  .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
  .actions { margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
  .btn.export-btn {
    height: 48px;
    width: 100%;
    font-size: 15px;
    letter-spacing: 3px;
    --aug-tl: 12px;
    --aug-br: 12px;
  }
  .state-io {
    display: flex;
    gap: 10px;
    width: 100%;
  }
  .state-io .btn {
    flex: 1;
    justify-content: center;
  }

  .color-grid { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

  /* Drag-and-drop hover highlight — applied via the `.dnd-target` class on
     any drop receiver (contact avatars, message portraits, message body
     textareas). The stage uses its own `.bg-drop-target::after` pseudo (the
     stage element has clip-path, so a 2D outline on it would draw outside
     the clipped silhouette).
     `!important` on outline is required because `.msg-row textarea` sets
     `outline: none` at higher specificity (descendant selector) for normal
     focus styling. */
  .dnd-target {
    outline: 2px dashed var(--cyan) !important;
    outline-offset: 2px;
    box-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 45%, transparent);
  }
  .custom-color-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    background: transparent;
    --aug-border-all: 1px;
    --aug-border-bg: rgba(0, 240, 255, 0.45);
    --aug-inlay-all: 0px;
    --aug-inlay-bg: transparent;
    --aug-tl: 8px;
    --aug-br: 8px;
  }
  .custom-color-group .swatch-pick-btn { align-self: center; margin: 0; }
  .swatch {
    width: 28px; height: 28px;
    border: 1px solid var(--dim);
    cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
  }
  .swatch:hover { transform: scale(1.1); }
  .swatch.active { border-color: #fff; box-shadow: 0 0 8px currentColor; }
  .swatch-saved {
    border: none !important;
    --aug-border-all: 1px;
    --aug-border-bg: var(--dim);
    --aug-inlay-all: 0px;
    --aug-tl: 7px;
  }
  .swatch-saved.active {
    --aug-border-bg: #fff;
  }
  .swatch-pick-btn {
    position: relative;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    color: var(--cyan);
    cursor: pointer;
    display: inline-block;
    background: transparent;
    transition: background 0.15s;
    border: none;
    --aug-border-all: 1px;
    --aug-border-bg: var(--cyan);
    --aug-inlay-all: 0px;
    --aug-inlay-bg: transparent;
    --aug-br: 7px;
  }
  .swatch-pick-btn:hover {
    background: color-mix(in srgb, var(--cyan) 18%, transparent);
  }
  /* Center the icon via absolute positioning + auto margins. This is
     context-independent: works the same whether the parent is in a flex,
     grid, or stretched btn-row. */
  .swatch-pick-btn .pick-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    pointer-events: none;
  }
  .swatch-pick-btn input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: none;
    padding: 0;
  }
  .pick-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
  }
  .pick-arrow[hidden] { display: none; }

  .toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--panel);
    border: 1px solid var(--yellow);
    color: var(--yellow);
    padding: 10px 18px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 100;
    pointer-events: none;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* Faint copyright stamp — anchored at the very bottom of the viewport,
     z-index 0 so any panel, modal, toast, or popup sits on top of it. */
  .footer-stamp {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 6px;
    z-index: 0;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.15);
    pointer-events: none;
    user-select: none;
  }

  input[type="file"],
  .portrait-file,
  .avatar-file { display: none !important; }

  .file-label {
    cursor: pointer;
  }

  .divider {
    height: 1px;
    margin: 16px 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(0, 240, 255, 0.35) 20%,
      rgba(252, 238, 10, 0.35) 50%,
      rgba(0, 240, 255, 0.35) 80%,
      transparent
    );
  }

  /* ---------- Crop modal ---------- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    backdrop-filter: blur(2px);
  }
  .modal-overlay[hidden] { display: none; }
  .modal-content {
    background: var(--panel);
    padding: 24px;
    width: 90%;
    max-width: 540px;
    --aug-border-all: 1px;
    --aug-border-bg: rgba(252, 238, 10, 0.45);
    --aug-inlay-all: 0px;
    --aug-inlay-bg: var(--panel);
    --aug-tl: 14px;
    --aug-tr: 14px;
    --aug-br: 14px;
    --aug-bl: 14px;
  }
  .modal-content h2 {
    margin: 0 0 18px 0;
    font-family: 'JetBrains Mono', monospace;
    color: var(--yellow);
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
  }
  .crop-stage {
    position: relative;
    width: 100%;
    height: 360px;
    background: #000;
    border: 1px solid rgba(0, 240, 255, 0.25);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
  }
  .crop-stage img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
  }
  .crop-frame {
    position: absolute;
    border: 2px solid var(--cyan);
    box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.55),
      0 0 12px color-mix(in srgb, var(--cyan) 50%, transparent);
    cursor: move;
    box-sizing: border-box;
  }
  .crop-handle {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: var(--cyan);
    cursor: nwse-resize;
  }
  .crop-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
  }
  .crop-actions #cropMax { margin-right: auto; }