/* Plasma shared visual contract. Run node scripts/sync-design.cjs after editing. */
:root {
  color-scheme: dark;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #0c0913;
  --bg2: #110c1c;
  --panel: #171020;
  --surface-rim: rgba(210, 177, 240, .13);
  --surface-light: rgba(255, 236, 255, .055);
  --panel2: #21172f;
  --text: #f0f1f7;
  --txt: var(--text);
  --muted: #adb3c8;
  --dim: #959db5;
  --line: #362442;
  --line2: #806491;
  --violet: #c0a1ff;
  --pink: #ff92d5;
  --cyan: #85d9dc;
  --green: #82dfb3;
  --red: #ff9cae;
  --amber: #efce91;
  --accent-fill: #9843c7;
  --accent-gradient: linear-gradient(125deg, #bb328d, #7844d7);
  --message-public: linear-gradient(125deg, #a52b79, #922b6c);
  --message-private: linear-gradient(125deg, #593aab, #6941b6);
  --accent-soft: #301a40;
  --private-fill: #382047;
  --glass-base: #191222;
  --glass-tint: rgba(25, 18, 34, .72);
  --glass-rim: rgba(242, 220, 255, .22);
  --glass-highlight: rgba(239, 217, 255, .13);
  --glass-selected: linear-gradient(145deg, rgba(213, 176, 255, .25), rgba(162, 93, 203, .19) 48%, rgba(106, 66, 150, .22));
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --glow: 0 12px 32px #00000020;
  --motion-fast: 140ms;
}

/* One shared language control for web, Mini App and extension. */
.plasma-language {
  display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 4px;
  border: 1px solid var(--glass-rim); border-radius: 20px;
  background: linear-gradient(130deg, #d77daf12, #9e7ac909), var(--bg);
  box-shadow: inset 0 1px #ffe5f70c;
}
.plasma-language > button {
  appearance: none; -webkit-appearance: none; min-width: 77px; min-height: 44px;
  margin: 0; padding: 9px 11px; border: 1px solid transparent; border-radius: 15px;
  background: transparent; color: var(--muted); font: 500 13px/1.2 var(--ui-font);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.plasma-language > button[aria-pressed="true"] {
  background: var(--glass-selected); color: #fff0fc; border-color: #f0c5e83d;
  box-shadow: inset 0 1px #fff0ff25, 0 3px 9px #0002;
}
.plasma-language > button:focus-visible { outline: 2px solid #e8b6f4; outline-offset: 2px; }
@media (hover: hover) { .plasma-language > button:hover { color: #fff0fc; background-color: #d8a1e214; } }
@media (prefers-reduced-motion: reduce) { .plasma-language > button { transition: none; } }