.dark-element {
  display: none;
}

html[data-theme="mydark"] .dark-element {
  display: block;
}

html[data-theme="mydark"] .light-element {
  display: none;
}

html[data-theme="mydark"] .mystical-ball {
  position: absolute; 
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  /* Glowing effect */
  background: radial-gradient(circle at center, 
    rgba(255,255,255,0.8) 0%, 
    rgba(0,255,255,0.5) 40%, 
    rgba(0,255,255,0.2) 70%, 
    transparent 80%);
  box-shadow: 
    0 0 10px rgba(0,255,255,0.7), 
    0 0 20px rgba(0,255,255,0.5),
    0 0 30px rgba(0,255,255,0.3);
  transition: background 0.3s, box-shadow 0.3s;
}

html[data-theme="mydark"] .mystical-ball.clicked {
  background: radial-gradient(circle at center, 
    rgba(255,255,255,0.8) 0%, 
    rgba(255,0,255,0.5) 40%, 
    rgba(255,0,255,0.2) 70%, 
    transparent 80%);
  box-shadow: 
    0 0 10px rgba(255,0,255,0.7), 
    0 0 20px rgba(255,0,255,0.5),
    0 0 30px rgba(255,0,255,0.3);
}

:root{
  --wiz-accent:        #6854ff;
  --wiz-accent-dark:   #4a3db8;
  --wiz-bg:            #ffffff;
  --wiz-bg-dark:       #1c1c1e;
  --wiz-text:          #333333;
  --wiz-text-dark:     #e4e4e4;
}
html[data-theme="mydark"]{
  --wiz-bg:   var(--wiz-bg-dark);
  --wiz-text: var(--wiz-text-dark);
}

/* ── mystical orb ───────── */
.mystical-ball{
  position:absolute;
  width:50px;height:50px;
  border-radius:50%;
  cursor:pointer;
  background:radial-gradient(circle at center,
              rgba(255,255,255,.8) 0%,
              rgba(0,255,255,.5)   40%,
              rgba(0,255,255,.2)   70%,
              transparent          80%);
  box-shadow:0 0 10px rgba(0,255,255,.7),
             0 0 20px rgba(0,255,255,.5),
             0 0 30px rgba(0,255,255,.3);
  transition:background .3s,box-shadow .3s;
}
.mystical-ball.clicked{
  background:radial-gradient(circle at center,
              rgba(255,255,255,.8) 0%,
              rgba(255,0,255,.5)   40%,
              rgba(255,0,255,.2)   70%,
              transparent          80%);
  box-shadow:0 0 10px rgba(255,0,255,.7),
             0 0 20px rgba(255,0,255,.5),
             0 0 30px rgba(255,0,255,.3);
}
html[data-theme="mydark"] .mystical-ball{
  filter:saturate(1.4) brightness(1.2);
}

/* ── chat window ───────── */
.chat-window{
  position:absolute;
  width:280px;min-height:160px;
  border-radius:12px;
  background:var(--wiz-bg);
  color:var(--wiz-text);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  font-family:system-ui,sans-serif;
  overflow:hidden;
  display:none;               /* toggled from JS */
  pointer-events:auto;
  animation:popIn .22s ease-out forwards;
}
@keyframes popIn{
  from{transform:scale(.9);opacity:0}
  to  {transform:scale(1);opacity:1}
}

/* header */
.chat-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;
  background:linear-gradient(135deg,var(--wiz-accent),var(--wiz-accent-dark));
  color:#fff;font-weight:600;font-size:14px;
}
.chat-header button{
  background:none;border:none;color:inherit;
  font-size:18px;cursor:pointer;line-height:1;
}

/* scrollable body */
.chat-body{
  padding:12px;
  max-height:120px;
  overflow-y:auto;
  font-size:14px;
}
.chat-message{margin-bottom:6px}
.chat-message.user{font-weight:600}
.chat-message.bot {opacity:.8}

/* input row */
.chat-input{
  display:flex;
  border-top:1px solid rgba(0,0,0,.06);
}
.chat-input input{
  flex:1;
  border:none;
  padding:10px 12px;
  font-size:14px;
  background:transparent;
  color:var(--wiz-text);
  outline:none;
}
.chat-input button{
  border:none;
  padding:0 16px;
  cursor:pointer;
  background:var(--wiz-accent);
  color:#fff;
  font-weight:600;
  transition:background .18s;
}
.chat-input button:hover{
  background:var(--wiz-accent-dark);
}