/* ============================================================================
   wivo.my — floating surfaces
   Menus, the selection bubble, modals, the command palette and toasts.

   These live apart from the shell because the share reader needs them and
   does not need the shell. Before this file existed it loaded neither, so a
   sealed document asked for its password through an unstyled full-width box.
   ========================================================================= */

/* ══ Floating surfaces ═══════════════════════════════════════════════════ */
.menu {
  position: fixed;
  z-index: 300;
  min-width: 212px;
  max-height: 70vh;
  overflow: auto;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
  padding: var(--space-1) 0;
  font-size: 13px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  color: var(--ink-1);
  white-space: nowrap;
}
.menu-item:hover, .menu-item.is-active { background: var(--color-accent-100); color: var(--color-accent-800); }
.menu-item .k { margin-left: auto; font-family: var(--font-semi); font-size: 10px; letter-spacing: .08em; color: var(--ink-4); }
.menu-item .ic { width: 16px; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.menu-item:hover .ic, .menu-item.is-active .ic { color: inherit; }
.menu-item[disabled] { opacity: .4; pointer-events: none; }
.menu-sep { height: 1px; background: var(--color-divider); margin: var(--space-1) 0; }
.menu-label {
  font-family: var(--font-semi); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 7px 12px 3px;
}

/* Bubble toolbar over a selection */
.bubble {
  position: fixed;
  z-index: 280;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  background: var(--color-neutral-900);
  border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.bubble.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bubble .ib { color: var(--color-bg); min-width: 27px; height: 25px; }
.bubble .ib:hover { background: rgba(255,255,255,.14); border-color: transparent; }
.bubble .ib.is-on { background: var(--color-accent); border-color: var(--color-accent); color: var(--ink-inverse); }
.bubble .divider-v { background: rgba(255,255,255,.2); margin: 0 3px; }
:root[data-theme="dark"] .bubble { background: var(--color-neutral-200); }
:root[data-theme="dark"] .bubble .ib { color: var(--color-text); }

/* ══ Modal ═══════════════════════════════════════════════════════════════ */
.backdrop {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: var(--space-6);
  background: color-mix(in srgb, #0c0e10 52%, transparent);
  backdrop-filter: blur(1.5px);
  animation: fade .14s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.modal {
  position: relative;
  width: min(480px, 100%);
  max-height: min(84vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-lg);
  animation: rise .16s ease;
}
.modal-wide { width: min(760px, 100%); }
.modal-head {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-2);
}
.modal-head h2 { font-size: 21px; margin: 0; }
.modal-body { padding: var(--space-2) var(--space-5) var(--space-4); overflow: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.modal-foot {
  display: flex; align-items: center; gap: var(--space-2);
  justify-content: flex-end;
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-divider);
}

/* ══ Command palette ═════════════════════════════════════════════════════ */
.palette-wrap { align-items: flex-start; padding-top: 12vh; }
.palette {
  width: min(600px, 100%);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  max-height: 64vh;
  animation: rise .14s ease;
}
.palette-input {
  width: 100%;
  border: 0; border-bottom: 1px solid var(--color-divider);
  background: transparent;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading);
  font-size: 20px;
  letter-spacing: .01em;
  color: var(--ink-1);
}
.palette-input::placeholder { color: var(--ink-4); }
.palette-input:focus { outline: none; }
.palette-list { overflow: auto; padding: var(--space-2) 0; }
.palette-row {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left;
  padding: 7px var(--space-5);
  font-size: 13.5px;
  color: var(--ink-1);
}
.palette-row .ic { width: 18px; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.palette-row .sub { color: var(--ink-4); font-size: 11.5px; }
.palette-row .k { margin-left: auto; font-family: var(--font-semi); font-size: 10px; letter-spacing: .08em; color: var(--ink-4); }
.palette-row.is-active { background: var(--color-accent-100); color: var(--color-accent-800); }
.palette-row.is-active .ic, .palette-row.is-active .k { color: inherit; }
.palette-foot {
  display: flex; gap: var(--space-4); align-items: center;
  padding: var(--space-2) var(--space-5);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-semi); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ══ Toasts ══════════════════════════════════════════════════════════════ */
.toasts {
  position: fixed;
  right: var(--space-6); bottom: calc(var(--statusbar-h) + var(--space-4));
  z-index: 500;
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  min-width: 232px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-neutral-900);
  color: var(--color-bg);
  border-left: 2px solid var(--color-accent);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  pointer-events: auto;
  animation: rise .16s ease;
}
.toast[data-kind="good"] { border-left-color: var(--status-good); }
.toast[data-kind="warn"] { border-left-color: var(--status-warning); }
.toast[data-kind="bad"] { border-left-color: var(--status-critical); }
.toast button { color: inherit; opacity: .6; margin-left: auto; }
.toast button:hover { opacity: 1; }
:root[data-theme="dark"] .toast { background: var(--color-neutral-200); color: var(--color-text); }