/* HavocVox interface refresh - shared by web, desktop, tablet and phone. */
:root {
  --hvx-accent: var(--green, #62f27f);
  --hvx-accent-2: #39c6ff;
  --hvx-violet: #7657ff;
  --hvx-surface: color-mix(in srgb, var(--panel, #0b111b) 91%, white 9%);
  --hvx-surface-2: color-mix(in srgb, var(--panel, #0b111b) 84%, white 16%);
  --hvx-edge: color-mix(in srgb, var(--hvx-accent) 22%, var(--line, #243044));
  --hvx-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.titlebar {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--panel) 94%, var(--hvx-violet) 6%), color-mix(in srgb, var(--panel) 94%, var(--hvx-accent-2) 6%));
  border-bottom-color: color-mix(in srgb, var(--line) 72%, var(--hvx-accent-2) 28%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .2);
}

.global-search {
  border-color: color-mix(in srgb, var(--line) 72%, var(--hvx-accent-2) 28%);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.quick-voice-button {
  position: relative;
  border-color: color-mix(in srgb, var(--line) 72%, var(--hvx-accent-2) 28%);
  background: color-mix(in srgb, var(--panel) 86%, var(--hvx-accent-2) 14%);
}

.quick-voice-button:hover {
  color: white;
  border-color: var(--hvx-accent-2);
  box-shadow: 0 0 18px color-mix(in srgb, var(--hvx-accent-2) 32%, transparent);
}

.quick-voice-button.active {
  color: white;
  border-color: #ff4e70;
  background: linear-gradient(145deg, #c71d45, #74162d);
  box-shadow: 0 0 18px rgba(255, 55, 96, .34);
}

.quick-voice-button.active::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
}

.rail {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, var(--hvx-violet) 6%), var(--panel));
}

.rail-item {
  border-radius: 11px;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}

.rail-item:hover { transform: translateX(2px); }
.rail-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--hvx-violet) 25%, transparent), color-mix(in srgb, var(--hvx-accent-2) 8%, transparent));
  box-shadow: inset 3px 0 var(--hvx-accent);
}

.now-view {
  background:
    radial-gradient(circle at 85% -5%, color-mix(in srgb, var(--hvx-violet) 22%, transparent), transparent 34%),
    radial-gradient(circle at 0 70%, color-mix(in srgb, var(--hvx-accent-2) 9%, transparent), transparent 32%),
    var(--panel);
}

.now-header h1,
.hub-header h1 { letter-spacing: -.035em; }

.now-summary,
.now-section,
.hub-panel {
  border-color: var(--hvx-edge);
  background: linear-gradient(145deg, color-mix(in srgb, var(--hvx-surface) 96%, transparent), color-mix(in srgb, var(--hvx-surface-2) 82%, transparent));
  box-shadow: var(--hvx-shadow);
}

.now-summary { overflow: hidden; }
.now-summary div { position: relative; }
.now-summary div::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--hvx-accent), transparent);
  opacity: .55;
}

.now-person,
.now-live,
.now-card {
  border-color: color-mix(in srgb, var(--line) 78%, var(--hvx-accent-2) 22%);
  background: color-mix(in srgb, var(--hvx-surface-2) 76%, transparent);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.now-person:hover,
.now-live:hover,
.now-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hvx-accent-2) 65%, var(--hvx-accent));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.voice-view { background: radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--hvx-violet) 13%, transparent), transparent 42%); }
.voice-media-stage {
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 78%, black 22%);
  box-shadow: inset 0 0 0 1px var(--hvx-edge), var(--hvx-shadow);
}

.participant {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--line) 76%, var(--hvx-violet) 24%);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--hvx-surface-2), color-mix(in srgb, var(--panel) 92%, black 8%));
}

.participant.speaking,
.participant.is-speaking {
  border-color: var(--hvx-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hvx-accent) 35%, transparent), 0 0 28px color-mix(in srgb, var(--hvx-accent) 18%, transparent);
}

.voice-controls {
  margin: 14px;
  border: 1px solid var(--hvx-edge);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  box-shadow: var(--hvx-shadow);
  backdrop-filter: blur(18px);
}

.hub-live-view {
  background:
    radial-gradient(circle at 88% 0, color-mix(in srgb, var(--hvx-violet) 17%, transparent), transparent 30%),
    var(--panel);
}

.hub-live-toolbar {
  border: 1px solid var(--hvx-edge);
  border-radius: 16px;
  background: color-mix(in srgb, var(--hvx-surface) 90%, transparent);
  box-shadow: var(--hvx-shadow);
}

.live-feed.hub-live-grid,
.hub-category-live-grid { gap: 18px; }

.live-feed .hub-live-card {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--line) 76%, var(--hvx-accent-2) 24%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
}

.live-feed .hub-live-card:hover {
  transform: translateY(-4px);
  border-color: var(--hvx-accent-2);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .36), 0 0 22px color-mix(in srgb, var(--hvx-accent-2) 13%, transparent);
}

.library-categories {
  display: flex;
  gap: 9px;
  margin: -8px 0 18px;
  padding-bottom: 4px;
  overflow-x: auto;
}

.library-categories button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--hvx-surface);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.library-categories button:hover,
.library-categories button.active {
  color: white;
  border-color: color-mix(in srgb, var(--hvx-accent) 74%, var(--hvx-accent-2));
  background: linear-gradient(135deg, color-mix(in srgb, var(--hvx-accent) 24%, var(--panel)), color-mix(in srgb, var(--hvx-violet) 26%, var(--panel)));
}

.plugin-marketplace { background: transparent; box-shadow: none; border: 0; padding: 0; }
.plugin-result-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.plugin-market-card {
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  min-height: 286px;
  padding: 22px;
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--line) 70%, var(--hvx-accent-2) 30%);
  background:
    radial-gradient(circle at 90% 5%, color-mix(in srgb, var(--hvx-violet) 22%, transparent), transparent 42%),
    linear-gradient(150deg, var(--hvx-surface-2), color-mix(in srgb, var(--panel) 90%, black 10%));
  box-shadow: 0 12px 36px rgba(0, 0, 0, .25);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.plugin-market-card:hover {
  transform: translateY(-5px);
  border-color: var(--hvx-accent-2);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .34), 0 0 26px color-mix(in srgb, var(--hvx-accent-2) 12%, transparent);
}

.plugin-market-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--hvx-accent) 45%, var(--hvx-accent-2));
  background: linear-gradient(145deg, color-mix(in srgb, var(--hvx-accent) 18%, var(--panel)), color-mix(in srgb, var(--hvx-violet) 23%, var(--panel)));
}

.plugin-market-icon > img { width: 62px; height: 62px; }
.plugin-market-copy h2 { font-size: 23px; letter-spacing: -.02em; }
.plugin-market-card > button { justify-self: stretch; width: 100%; min-height: 42px; }

@media (max-width: 1260px) {
  .plugin-result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .quick-voice-button { display: inline-grid; }
  .plugin-header-actions { min-width: 0; width: 100%; justify-content: stretch; }
  .plugin-header-actions .search-input { width: 100%; }
  .plugin-result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plugin-market-card { min-height: 250px; }
}

@media (max-width: 640px) {
  .titlebar .quick-voice-button { width: 38px; min-width: 38px; }
  .plugin-result-list { grid-template-columns: 1fr; }
  .plugin-market-card { min-height: 0; }
  .library-categories { margin-top: 0; }
  .voice-controls { margin: 8px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-item,
  .now-person,
  .now-live,
  .now-card,
  .plugin-market-card,
  .hub-live-card { transition: none !important; }
}

/* 0.5.1 structural redesign */
.app-shell{background:radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--hvx-violet) 12%,transparent),transparent 26%),linear-gradient(145deg,#050810,color-mix(in srgb,var(--panel) 94%,#101a33 6%))}
.workspace{gap:12px;padding:12px;background:transparent}.workspace.focus-view,.workspace.hub-focus-view,.workspace.ai-focus-view{grid-template-columns:260px minmax(0,1fr)}
.app-sidebar{margin:0;padding:14px 12px;border:1px solid color-mix(in srgb,var(--line) 70%,var(--hvx-violet) 30%);border-radius:22px;background:radial-gradient(circle at 20% 0,color-mix(in srgb,var(--hvx-violet) 14%,transparent),transparent 34%),color-mix(in srgb,var(--panel) 90%,transparent);box-shadow:var(--hvx-shadow)}
.app-sidebar .rail-item{min-height:52px;border-radius:14px;font-weight:800}.app-sidebar .rail-item.active{background:linear-gradient(105deg,color-mix(in srgb,var(--hvx-violet) 34%,transparent),color-mix(in srgb,var(--hvx-accent-2) 12%,transparent));box-shadow:inset 3px 0 var(--hvx-accent),0 8px 22px rgba(0,0,0,.2)}
.channels-panel,.main-panel,.info-panel{border:1px solid color-mix(in srgb,var(--line) 82%,var(--hvx-accent-2) 18%);border-radius:22px;background:color-mix(in srgb,var(--panel) 91%,transparent);box-shadow:var(--hvx-shadow);overflow:hidden}.main-panel.alt-view{border-radius:22px}.room-header{min-height:92px;background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 92%,var(--hvx-violet) 8%),color-mix(in srgb,var(--panel) 94%,var(--hvx-accent-2) 6%))}
.now-view{padding:clamp(20px,3vw,44px);background:radial-gradient(circle at 92% 4%,color-mix(in srgb,var(--hvx-violet) 30%,transparent),transparent 28%),radial-gradient(circle at 2% 50%,color-mix(in srgb,var(--hvx-accent-2) 12%,transparent),transparent 30%),#080d16}
.now-header{min-height:300px;align-items:end;padding:clamp(26px,4vw,56px);border:1px solid color-mix(in srgb,var(--hvx-violet) 44%,var(--line));border-radius:28px;background:linear-gradient(90deg,rgba(5,9,18,.96) 0%,rgba(5,9,18,.7) 58%,rgba(5,9,18,.18)),radial-gradient(circle at 86% 32%,var(--hvx-violet),transparent 32%),linear-gradient(135deg,#101c38,#361c67);box-shadow:0 30px 80px rgba(0,0,0,.38);overflow:hidden}.now-header>div:first-child{max-width:700px;position:relative;z-index:1}.now-header h1{margin:12px 0;max-width:720px;font-size:clamp(42px,5.6vw,76px);line-height:.96;letter-spacing:-.055em}.now-header p{max-width:600px;color:#c3ccdc;font-size:16px}.now-header .now-actions{position:relative;z-index:1}
.home-command-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}.home-command-grid button{min-width:0;min-height:112px;display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:14px;padding:18px;border:1px solid var(--hvx-edge);border-radius:18px;color:#fff;text-align:left;background:linear-gradient(145deg,var(--hvx-surface-2),color-mix(in srgb,var(--panel) 94%,black 6%));cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.22);transition:transform .18s ease,border-color .18s ease}.home-command-grid button:hover{transform:translateY(-4px);border-color:var(--hvx-accent-2)}.home-command-grid svg{grid-row:1/3;width:34px;height:34px;color:var(--hvx-accent-2);stroke:currentColor!important;fill:none!important}.home-command-grid strong,.home-command-grid small{grid-column:2}.home-command-grid strong{align-self:end;font-size:17px}.home-command-grid small{align-self:start;color:var(--muted);font-size:12px}.home-command-grid button:nth-child(2) svg{color:#ff4e78}.home-command-grid button:nth-child(3) svg{color:var(--hvx-accent)}.home-command-grid button:nth-child(4) svg{color:#a77bff}
.now-dashboard{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px}.now-summary{border-radius:20px}.now-section{border-radius:20px;padding:22px}.now-section:nth-of-type(2),.now-section:nth-of-type(5){grid-column:1/-1}
.plugins-view{padding:clamp(22px,3vw,42px);background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--hvx-violet) 20%,transparent),transparent 28%),#080d16}.plugins-view>.hub-header{min-height:150px;align-items:end;padding:26px 30px;border:1px solid var(--hvx-edge);border-radius:22px;background:linear-gradient(120deg,color-mix(in srgb,var(--hvx-violet) 23%,var(--panel)),color-mix(in srgb,var(--hvx-accent-2) 8%,var(--panel))}.plugins-view>.hub-header h1{font-size:clamp(34px,4vw,52px)}.library-categories{margin:18px 0}.plugin-market-card{min-height:320px}.plugin-market-card:nth-child(3n+1){background:radial-gradient(circle at 90% 4%,rgba(71,199,255,.2),transparent 40%),linear-gradient(150deg,var(--hvx-surface-2),#09111c)}.plugin-market-card:nth-child(3n+2){background:radial-gradient(circle at 90% 4%,rgba(126,80,255,.23),transparent 40%),linear-gradient(150deg,var(--hvx-surface-2),#100d1c)}.plugin-market-card:nth-child(3n){background:radial-gradient(circle at 90% 4%,rgba(83,244,132,.16),transparent 40%),linear-gradient(150deg,var(--hvx-surface-2),#09150f)}
.hub-live-view{padding:clamp(22px,3vw,42px);background:#080d16}.hub-live-header{min-height:150px;padding:28px 32px;border:1px solid var(--hvx-edge);border-radius:22px;background:linear-gradient(110deg,#101b32,#221448 68%,#42162e)}.hub-live-header h1{font-size:clamp(36px,4vw,56px)}.hub-live-toolbar{margin-top:18px;padding:20px}
.voice-view{padding:16px;background:#080d16}.voice-media-stage{min-height:55%;border-radius:24px}.voice-scroll{border-radius:20px}.voice-controls{min-height:104px;justify-content:center;gap:clamp(10px,2vw,28px)}.control-button{min-width:78px;border-radius:14px}
@media(max-width:1100px){.workspace.focus-view,.workspace.hub-focus-view,.workspace.ai-focus-view{grid-template-columns:220px minmax(0,1fr)}.home-command-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.now-dashboard{grid-template-columns:1fr}.now-section{grid-column:auto!important}}
@media(max-width:760px){.workspace{gap:0;padding:0}.app-sidebar,.channels-panel,.main-panel,.info-panel{border-radius:0}.now-view,.plugins-view,.hub-live-view{padding:14px}.now-header{min-height:280px;padding:24px;border-radius:20px;align-items:start;flex-direction:column}.now-header h1{font-size:clamp(38px,12vw,58px)}.home-command-grid{grid-template-columns:1fr 1fr;gap:10px}.home-command-grid button{min-height:96px;padding:14px}.plugins-view>.hub-header,.hub-live-header{border-radius:18px}}
@media(max-width:480px){.home-command-grid{grid-template-columns:1fr}.home-command-grid button{min-height:84px}.now-header{min-height:320px}}