:root {
  --hx-plus-bg: rgba(9, 20, 28, .94);
  --hx-plus-card: rgba(255, 255, 255, .08);
  --hx-plus-line: rgba(255, 255, 255, .16);
  --hx-plus-gold: #ffd36a;
  --hx-plus-blue: #6ad8ff;
  --hx-plus-green: #73f2a7;
  --hx-plus-red: #ff7878;
}

.hx-plus-button {
  position: fixed;
  right: 22px;
  bottom: 166px;
  z-index: 9999;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 18px;
  padding: 12px 15px;
  color: #111;
  background: linear-gradient(135deg, #ffd36a, #73f2a7);
  font: 800 13px/1.1 Verdana, sans-serif;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  cursor: pointer;
}

.hx-plus-panel {
  position: fixed;
  right: 22px;
  bottom: 216px;
  width: min(420px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 80px));
  z-index: 9999;
  color: #fff;
  background: radial-gradient(circle at top left, rgba(106,216,255,.22), transparent 32%), var(--hx-plus-bg);
  border: 1px solid var(--hx-plus-line);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.48);
  overflow: hidden;
  font-family: Verdana, sans-serif;
  display: none;
}

.hx-plus-panel.is-open { display: block; }

.hx-plus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hx-plus-line);
}

.hx-plus-title { font-weight: 900; font-size: 17px; }
.hx-plus-sub { color: rgba(255,255,255,.68); font-size: 11px; margin-top: 4px; }
.hx-plus-close { border: 0; background: rgba(255,255,255,.12); color: #fff; border-radius: 12px; padding: 8px 10px; cursor: pointer; }

.hx-plus-tabs { display: flex; gap: 7px; padding: 12px; overflow-x: auto; }
.hx-plus-tab { flex: 0 0 auto; border: 1px solid var(--hx-plus-line); border-radius: 999px; background: rgba(255,255,255,.07); color: #fff; padding: 8px 10px; font-weight: 800; font-size: 11px; cursor: pointer; }
.hx-plus-tab.is-active { background: #fff; color: #111; }

.hx-plus-body { padding: 0 14px 16px; overflow-y: auto; max-height: 520px; }
.hx-plus-section { display: none; }
.hx-plus-section.is-active { display: grid; gap: 10px; }

.hx-plus-card {
  border: 1px solid var(--hx-plus-line);
  background: var(--hx-plus-card);
  border-radius: 18px;
  padding: 13px;
}

.hx-plus-card h3 { margin: 0 0 6px; font-size: 14px; }
.hx-plus-card p { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.45; }
.hx-plus-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.hx-plus-pill { border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; padding: 5px 8px; font-size: 10px; font-weight: 800; }
.hx-plus-pill.gold { background: rgba(255,211,106,.18); color: var(--hx-plus-gold); }
.hx-plus-pill.green { background: rgba(115,242,167,.16); color: var(--hx-plus-green); }
.hx-plus-pill.blue { background: rgba(106,216,255,.16); color: var(--hx-plus-blue); }

.hx-plus-action {
  margin-top: 10px;
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 10px;
  color: #10202b;
  background: linear-gradient(135deg, #6ad8ff, #73f2a7);
  font-weight: 900;
  cursor: pointer;
}

.hx-plus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hx-plus-mini { text-align: center; }
.hx-plus-mini strong { display: block; font-size: 18px; color: var(--hx-plus-gold); }

.hx-plus-toast {
  position: fixed;
  left: 50%;
  top: 88px;
  transform: translateX(-50%) translateY(-16px);
  opacity: 0;
  z-index: 10000;
  border-radius: 18px;
  padding: 12px 16px;
  background: rgba(10, 18, 24, .94);
  border: 1px solid var(--hx-plus-line);
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.38);
  transition: .25s ease;
  font: 800 13px Verdana, sans-serif;
  pointer-events: none;
}
.hx-plus-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.hx-plus-toast.is-bad { border-color: rgba(255,120,120,.48); color: #ffd0d0; }

@media (max-width: 600px) {
  .hx-plus-button { right: 12px; bottom: 132px; }
  .hx-plus-panel { right: 10px; bottom: 180px; }
  .hx-plus-grid { grid-template-columns: 1fr; }
}

/* Vibboza toolbar placement 20260628: place Vibboza+ between Photo and Mood Tools. */
.hx-plus-button {
  left: calc(278px + env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  bottom: calc(11px + env(safe-area-inset-bottom, 0px)) !important;
  width: 45px !important;
  height: 45px !important;
  min-width: 45px !important;
  min-height: 45px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-indent: -999px !important;
  color: transparent !important;
  background: linear-gradient(180deg, #ffe070 0%, #ffb931 55%, #d98612 100%) !important;
  border: 2px solid rgba(65, 38, 7, .78) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(92,48,0,.26), 0 3px 0 rgba(0,0,0,.34), 0 8px 18px rgba(0,0,0,.24) !important;
}

.hx-plus-button::before {
  content: "H+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-indent: 0;
  color: #352009;
  font: 950 15px/1 Verdana, sans-serif;
  letter-spacing: -.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.42);
}

.hx-plus-button::after {
  content: "Vibboza+";
  position: absolute;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%) translateY(5px);
  opacity: 0;
  pointer-events: none;
  padding: 5px 8px;
  border-radius: 8px;
  color: #fff;
  background: rgba(15, 20, 25, .94);
  border: 1px solid rgba(255,255,255,.18);
  text-indent: 0;
  white-space: nowrap;
  font: 800 11px/1 Verdana, sans-serif;
  transition: opacity .15s ease, transform .15s ease;
}

.hx-plus-button:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hx-plus-button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) saturate(1.05) !important;
}

.hx-plus-panel {
  left: 214px !important;
  right: auto !important;
  bottom: 66px !important;
}

@media (max-width: 760px) {
  .hx-plus-button {
    left: calc(214px + env(safe-area-inset-left, 0px)) !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hx-plus-panel {
    left: 10px !important;
    right: 10px !important;
    bottom: 64px !important;
    width: auto !important;
  }
}