/* JARVIS 6.6 — оформление «Black Metal»: щит, чёрно-серебристый металл, голографическая карта. Подключается после style.css. */
:root { --accent: #00e5ff; --surface: #101a28; --steel-h: #d7e1e8; --steel-d: #444e58; --steel-m: #7a8793; --outer: #020407; --inner: #090c10;
  --metal-rim: linear-gradient(135deg, var(--steel-h), var(--steel-d) 26%, var(--steel-m) 50%, var(--steel-d) 74%, var(--steel-h));
  --notch: repeating-linear-gradient(180deg, transparent 0 12px, var(--outer) 12px 14px); }
:root[data-theme="dark"] { --accent: #00e5ff; --surface: #101a28; --muted: #a1b9c9; }
:root[data-theme="light"] { --accent: #0089a5; --surface: #ffffff; --muted: #506674; }
:root[data-theme="pink"] { --accent: #be308c; --surface: #fff8fc; --muted: #795266; }
:root[data-theme="green"] { --accent: #00ff64; --surface: #081c0c; --muted: #9ccdaa; }
:root[data-theme="red"] { --accent: #ff3c1e; --surface: #230806; --muted: #dca69b; }

body { background: var(--bg); }
#holo-map { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; }

/* металлическая панель с чёрными прочерками по краям */
.card, .composer, .pair-card, .msg.assistant, .msg-row, .owner-banner, .sheet, .modal-card, .msg-pinned {
  border: 5px solid transparent !important;
  background:
    linear-gradient(color-mix(in srgb, var(--surface) 70%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)) padding-box,
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--notch) border-box,
    var(--metal-rim) border-box !important;
  box-shadow: 0 0 0 2px var(--outer), inset 0 0 0 1px var(--inner), 0 6px 20px rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  position: relative;
}
.card::after, .composer::after, .sheet::after, .pair-card::after, .owner-banner::after {
  content: ""; position: absolute; left: 12%; top: -4px; width: 22%; height: 2px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent); pointer-events: none; }

/* шапка: хромированный J.A.R.V.I.S. */
.topbar .logo { font-weight: 900; letter-spacing: .1em;
  background: linear-gradient(180deg, #fff 0%, #f1f5f8 38%, #8d99a5 50%, #dfe7ee 62%, #6b7682 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 #000); }
:root[data-theme="light"] .topbar .logo, :root[data-theme="pink"] .topbar .logo {
  background: linear-gradient(180deg, #39434d, #6d7883 55%, #2b333b); -webkit-background-clip: text; background-clip: text; }

/* голограмма: щит поверх кольца */
.hud { position: relative; }
.hud .shield { position: absolute; left: 50%; top: 6px; width: min(20.4vh, 36vw, 180px); transform: translateX(-50%);
  translate: 0 calc((min(34vh, 60vw, 300px) - min(20.4vh, 36vw, 180px) * 1.08) / 2);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.7)); pointer-events: none; transition: width .3s, translate .3s; }
body.chatting .hud .shield { width: min(9.6vh, 18vw, 90px); translate: 0 calc((min(16vh, 30vw, 150px) - min(9.6vh, 18vw, 90px) * 1.08) / 2); }

/* главная кнопка: металл, срезанные углы, подсветка */
button.primary { border: 0 !important; color: #fff !important; font-weight: 700;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 32%, #04121a), color-mix(in srgb, var(--accent) 12%, #000)) !important;
  box-shadow: inset 0 0 0 2px var(--steel-m), inset 0 0 0 3px var(--accent), inset 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent) !important; }
.mic { border-color: var(--accent) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }

/* всплывающие окна и меню */
.modal { background: rgba(0,0,0,.55) !important; }
.sheet .item, .drawer .item { border: 1px solid color-mix(in srgb, var(--steel-m) 35%, transparent); background: color-mix(in srgb, var(--bg) 55%, transparent); }
.drawer { border-left: 5px solid transparent !important; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--notch) border-box, var(--metal-rim) border-box !important; }