/* Cowork-Modus (#102 L5) — Spotlight-Overlay + Hinweis-Bubble + Status-Pille.
   Liegt UNTER dem Drawer (z 1090), damit Meridians Chat hell bleibt; dimmt die App-Flaeche
   per box-shadow-Spread und hebt das Ziel-Element hervor. pointer-events:none -> die App
   bleibt waehrenddessen voll bedienbar (Cowork = zuschauen, nicht blockieren). */

#coworkHole {
  position: fixed; z-index: 1080; pointer-events: none;
  top: 0; left: 0; width: 0; height: 0;
  border: 2px solid var(--gold, #C9A24B);
  border-radius: 12px;
  background: transparent;
  box-shadow: 0 0 0 9999px rgba(8, 12, 18, .55), 0 0 0 4px color-mix(in srgb, var(--gold, #C9A24B) 45%, transparent);
  opacity: 0;
  transition: top .28s cubic-bezier(.2,.7,.2,1), left .28s cubic-bezier(.2,.7,.2,1),
              width .28s cubic-bezier(.2,.7,.2,1), height .28s cubic-bezier(.2,.7,.2,1), opacity .2s;
}
#coworkHole.show { opacity: 1; animation: coworkPulse 1.8s ease-in-out infinite; }

@keyframes coworkPulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(8,12,18,.55), 0 0 0 3px color-mix(in srgb, var(--gold,#C9A24B) 35%, transparent); }
  50%      { box-shadow: 0 0 0 9999px rgba(8,12,18,.5),  0 0 0 7px color-mix(in srgb, var(--gold,#C9A24B) 22%, transparent); }
}

#coworkCap {
  position: fixed; z-index: 1082; display: none; pointer-events: none;
  padding: 9px 13px; border-radius: 11px;
  background: linear-gradient(180deg, var(--gold-soft, #D9B86E), var(--bronze, #9C7A33));
  color: var(--on-gold, #1a1206); font-family: var(--font-ui, sans-serif);
  font-size: 13px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); border: 1px solid var(--gold, #C9A24B);
  text-shadow: 0 1px 1px rgba(255,255,255,.18);
}
#coworkCap::before {
  content: "◉ Meridian"; display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; opacity: .8; margin-bottom: 2px;
}

#coworkPill {
  position: fixed; z-index: 1083; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface, #161F2A); color: var(--text, #F4F1EA);
  border: 1px solid var(--gold, #C9A24B); font-family: var(--font-ui, sans-serif);
  font-size: 12.5px; font-weight: 600;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.6);
}
#coworkPill .cowork-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold, #C9A24B); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold,#C9A24B) 60%, transparent);
  animation: coworkBlink 1.4s ease-in-out infinite;
}
@keyframes coworkBlink {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold,#C9A24B) 55%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold,#C9A24B) 0%, transparent); }
}
#coworkPill .cowork-pill-x {
  font-size: 11.5px; color: var(--mist, #AEB9C6); border-left: 1px solid var(--border-2, #313E4D); padding-left: 9px;
}
#coworkPill:hover .cowork-pill-x { color: var(--text, #F4F1EA); }

/* Solange ein Drawer offen ist, sitzt die Pille etwas hoeher, damit sie nicht am Rand klemmt. */
body.hx-drawer-open #coworkPill { left: calc(50% - min(var(--hx-drawer-w, 420px), 96vw) / 2); }
@media (max-width: 560px) { body.hx-drawer-open #coworkPill { left: 50%; } }