:root {
  --bg: #05070b;
  --bg-2: #080d13;
  --panel: rgba(9, 18, 27, 0.82);
  --panel-2: rgba(11, 27, 38, 0.66);
  --fg: #e9fbff;
  --fg-soft: #a9c3cc;
  --fg-muted: #66828c;
  --cyan: #43f4ff;
  --cyan-2: #00a8c8;
  --mint: #63ffd3;
  --amber: #ffd166;
  --error: #ff667d;
  --ok: #7dffb2;
  --border: rgba(95, 230, 255, 0.22);
  --border-strong: rgba(95, 230, 255, 0.48);
  --shadow: 0 20px 80px rgba(0, 194, 255, 0.12);
  --radius: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background-color: #02070b;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 168, 200, 0.16), transparent 34%),
    linear-gradient(135deg, #030507 0%, #07111a 48%, #030507 100%);
  color: var(--fg);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(67, 244, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 244, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
}

#app {
  min-height: var(--app-height, 100dvh);
  height: var(--app-height, 100dvh);
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hidden { display: none !important; }

/* ---------- login ---------- */

#login {
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 14px;
}
#login h1 {
  margin: 0;
  font-size: clamp(42px, 8vw, 82px);
  letter-spacing: 0.18em;
  font-weight: 700;
  text-shadow: 0 0 34px rgba(67, 244, 255, 0.42);
}
#login .muted { color: var(--fg-muted); margin: 0 0 12px; }
#login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  padding: 8px;
  border: 1px solid var(--border);
  background: rgba(6, 15, 22, 0.86);
  box-shadow: var(--shadow);
}
#login-form input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid rgba(95, 230, 255, 0.14);
  background: #02060a;
  color: var(--fg);
  /* 16px is the smallest size iOS Safari will honor without zooming the
     viewport on input focus. Smaller values cause the page to jump-zoom and
     leave the layout misaligned after the keyboard closes. */
  font-size: 16px;
}
#login-form button,
#composer button[type="submit"],
.approval-actions #approval-approve {
  border: 1px solid rgba(67, 244, 255, 0.6);
  background: linear-gradient(180deg, rgba(67, 244, 255, 0.95), rgba(0, 168, 200, 0.88));
  color: #021015;
  font-weight: 750;
  letter-spacing: 0.04em;
  cursor: pointer;
}
#login-form button { padding: 12px 18px; border-radius: 4px; }
.provider-login {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}
.provider-login button {
  flex: 1;
  min-height: 42px;
  border-radius: 4px;
  border: 1px solid rgba(95, 230, 255, 0.24);
  background: rgba(6, 15, 22, 0.72);
  color: var(--fg);
  cursor: pointer;
}
.error { color: var(--error); min-height: 1.2em; margin-top: 4px; }

/* ---------- shell ---------- */

#chat header {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(2, 7, 11, 0.88);
  backdrop-filter: blur(16px);
}
#chat header .title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(67, 244, 255, 0.34), inset 0 0 16px rgba(67, 244, 255, 0.2);
}
#chat header strong {
  display: block;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.26em;
}
#chat header small {
  display: block;
  margin-top: 4px;
  color: var(--fg-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status {
  font-size: 11px;
  color: var(--fg-muted);
  padding: 4px 9px;
  border: 1px solid rgba(95, 230, 255, 0.16);
  border-radius: 999px;
  background: rgba(3, 10, 15, 0.9);
}
.status.ok { color: var(--ok); }
.status.err { color: var(--error); }

button.ghost {
  background: rgba(5, 14, 20, 0.68);
  color: var(--fg-soft);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
}
button.ghost:hover { color: var(--fg); border-color: var(--border-strong); }
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.workspace-picker {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--fg-muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.workspace-picker select {
  width: min(270px, 28vw);
  max-width: 270px;
  min-width: 150px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(5, 14, 20, 0.68);
  color: var(--fg-soft);
  padding: 0 9px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.workspace-picker select:focus {
  outline: 1px solid var(--border-strong);
}
.task-wrap,
.notification-wrap,
.menu-wrap {
  position: relative;
}
.warn-text { color: var(--amber); }
.tasks-toggle,
.notification-toggle,
.menu-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: rgba(5, 14, 20, 0.68);
  color: var(--fg-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.tasks-toggle:hover,
.notification-toggle:hover,
.menu-toggle:hover {
  color: var(--fg);
  border-color: var(--border-strong);
}
.menu-toggle > span,
.menu-toggle > span::before,
.menu-toggle > span::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}
.menu-toggle > span {
  position: relative;
}
.menu-toggle > span::before,
.menu-toggle > span::after {
  position: absolute;
  left: 0;
}
.menu-toggle > span::before { top: -6px; }
.menu-toggle > span::after { top: 6px; }
.tasks-toggle > span {
  width: 16px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 3px;
  position: relative;
}
.tasks-toggle > span::before,
.tasks-toggle > span::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  height: 2px;
  background: currentColor;
  opacity: 0.86;
}
.tasks-toggle > span::before { top: 4px; }
.tasks-toggle > span::after { top: 10px; }
.notification-toggle > span {
  width: 15px;
  height: 17px;
  border: 2px solid currentColor;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  border-bottom: 0;
  position: relative;
}
.notification-toggle > span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 20px;
  height: 2px;
  background: currentColor;
  transform: translateX(-50%);
}
.notification-toggle > span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}
.notification-toggle b {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--amber);
  color: #120b00;
  font-size: 11px;
  line-height: 18px;
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.35);
}
.tasks-toggle b {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mint);
  color: #00110b;
  font-size: 11px;
  line-height: 18px;
  box-shadow: 0 0 16px rgba(99, 255, 211, 0.3);
}
.tasks-panel,
.notifications-panel,
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(380px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 90px));
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(3, 10, 15, 0.98);
  box-shadow: var(--shadow);
  /* Above approval panel (z-index 70 on mobile) so a notifications tap
     while an approval is showing renders the panel on top, not behind. */
  z-index: 75;
}
.menu-panel {
  width: 220px;
  padding: 8px;
  display: grid;
  gap: 4px;
}
.menu-panel button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-soft);
  text-align: left;
  padding: 0 10px;
  font-size: 13px;
  cursor: pointer;
}
.menu-panel button:hover {
  background: rgba(67, 244, 255, 0.08);
  color: var(--fg);
}
.menu-panel .danger-text {
  color: var(--error);
}
.tasks-head,
.notifications-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.tasks-head strong,
.notifications-head strong {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tasks-list,
.notifications-list {
  max-height: 440px;
  overflow-y: auto;
  padding: 8px;
}
.task-item,
.notification-item {
  width: 100%;
  display: block;
  text-align: left;
  border: 1px solid rgba(95, 230, 255, 0.14);
  background: rgba(8, 20, 29, 0.74);
  color: var(--fg);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}
.task-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  cursor: default;
}
.task-done {
  min-height: 32px;
  border-radius: 5px;
  border: 1px solid rgba(125, 255, 178, 0.45);
  background: rgba(125, 255, 178, 0.1);
  color: var(--ok);
  cursor: pointer;
  padding: 0 10px;
}
.task-done:hover {
  border-color: rgba(125, 255, 178, 0.8);
  background: rgba(125, 255, 178, 0.16);
}
.task-item:hover,
.notification-item:hover {
  border-color: var(--border-strong);
  background: rgba(67, 244, 255, 0.08);
}
.task-item strong,
.notification-item strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}
.task-item p,
.notification-item p {
  margin: 0 0 6px;
  color: var(--fg-soft);
  font-size: 12px;
}
.task-item small,
.notification-item small {
  color: var(--fg-muted);
  font-size: 11px;
}

.console {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  padding: 18px;
}

.presence,
.conversation {
  min-height: 0;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(7, 18, 27, 0.74), rgba(3, 8, 12, 0.72));
  box-shadow: var(--shadow);
}

.presence {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 24px;
}
.presence::before,
.presence::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(67, 244, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}
.presence::after {
  inset: 18%;
  border-style: dashed;
  animation: rotate 34s linear infinite;
}

.state-row {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
.mode {
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(67, 244, 255, 0.5);
}
.mobile-health {
  position: relative;
  z-index: 3;
  border: 1px solid rgba(95, 230, 255, 0.22);
  background: rgba(4, 13, 19, 0.74);
  color: var(--fg-soft);
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.mobile-health:hover {
  border-color: var(--border-strong);
  color: var(--fg);
}
.account-panel {
  position: relative;
  z-index: 4;
  width: min(100%, 460px);
  justify-self: stretch;
  align-self: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(3, 10, 15, 0.95);
  box-shadow: var(--shadow);
  padding: 12px;
  color: var(--fg-soft);
}
.account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.account-head strong {
  color: var(--fg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}
.account-panel p {
  margin: 8px 0;
  font-size: 13px;
}
.account-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 10px;
  display: grid;
  gap: 7px;
}
.account-list li {
  border: 1px solid rgba(95, 230, 255, 0.12);
  border-radius: 6px;
  padding: 8px;
  background: rgba(8, 20, 29, 0.62);
}
.account-list strong,
.account-list small {
  display: block;
}
.account-list small {
  margin-top: 3px;
  color: var(--fg-muted);
  font-size: 11px;
}

.orb {
  position: relative;
  z-index: 1;
  width: min(52vw, 430px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}
.orb-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(67, 244, 255, 0.42);
  box-shadow: 0 0 32px rgba(67, 244, 255, 0.18), inset 0 0 28px rgba(67, 244, 255, 0.1);
}
.ring-a { animation: rotate 18s linear infinite; }
.ring-b {
  inset: 18%;
  border-style: dashed;
  border-color: rgba(99, 255, 211, 0.38);
  animation: rotate 12s linear infinite reverse;
}
.ring-c {
  inset: 30%;
  border-color: rgba(67, 244, 255, 0.2);
  animation: breathe 3.4s ease-in-out infinite;
}
.orb-core {
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(233, 251, 255, 0.95) 0 5%, rgba(67, 244, 255, 0.92) 18%, rgba(0, 168, 200, 0.36) 52%, rgba(0, 0, 0, 0.2) 72%);
  box-shadow:
    0 0 28px rgba(67, 244, 255, 0.85),
    0 0 92px rgba(0, 168, 200, 0.42),
    inset 0 0 28px rgba(255, 255, 255, 0.35);
}
.wave-bars {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wave-bars i {
  width: 4px;
  height: 16px;
  border-radius: 4px;
  background: #021015;
  opacity: 0.76;
  animation: wave 1.1s ease-in-out infinite;
}
.wave-bars i:nth-child(2) { animation-delay: 0.08s; }
.wave-bars i:nth-child(3) { animation-delay: 0.16s; }
.wave-bars i:nth-child(4) { animation-delay: 0.24s; }
.wave-bars i:nth-child(5) { animation-delay: 0.32s; }
.wave-bars i:nth-child(6) { animation-delay: 0.4s; }
.wave-bars i:nth-child(7) { animation-delay: 0.48s; }

.live-line {
  position: relative;
  z-index: 2;
  width: min(760px, 92%);
  min-height: 48px;
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid rgba(95, 230, 255, 0.12);
  color: var(--fg-soft);
  text-align: center;
  letter-spacing: 0.02em;
}
.level-meter {
  position: relative;
  z-index: 2;
  width: min(420px, 74%);
  height: 4px;
  margin-top: 14px;
  background: rgba(67, 244, 255, 0.1);
  overflow: hidden;
}
.level-meter span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-2), var(--cyan), var(--mint));
  box-shadow: 0 0 18px rgba(67, 244, 255, 0.6);
  transition: width 80ms linear;
}

.conversation {
  display: flex;
  flex-direction: column;
}
.rail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#message-count {
  color: var(--cyan);
}
.matter-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 14px 0;
  padding: 11px 12px;
  border: 1px solid rgba(95, 230, 255, 0.18);
  border-radius: 8px;
  background: rgba(4, 15, 21, 0.66);
}
.matter-context.empty {
  border-style: dashed;
  opacity: 0.82;
}
.matter-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--fg-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.matter-context strong {
  display: block;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.25;
}
.matter-context-meta {
  max-width: 46%;
  color: var(--fg-muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}
.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.approval {
  margin: 0 18px 12px;
  padding: 12px;
  border: 1px solid rgba(255, 209, 102, 0.5);
  background: rgba(24, 18, 7, 0.88);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  box-shadow: 0 14px 45px rgba(255, 209, 102, 0.1);
}
.approval strong {
  display: block;
  margin-bottom: 6px;
  color: var(--amber);
}
.approval pre {
  margin: 0;
  max-height: 120px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg-soft);
  font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.approval-actions {
  display: flex;
  gap: 8px;
}
.approval-actions button {
  padding: 9px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
}

.vision-panel {
  margin: 0 18px 12px;
  border: 1px solid var(--border);
  background: rgba(3, 10, 15, 0.94);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(180px, 1fr);
  gap: 12px;
  padding: 12px;
}
.vision-panel.active {
  border-color: rgba(99, 255, 211, 0.42);
}
.vision-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vision-head strong {
  display: block;
  color: var(--cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}
.vision-head span {
  display: block;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 12px;
}
#vision-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(95, 230, 255, 0.18);
  background: #02060a;
  object-fit: cover;
}
.vision-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
.vision-actions button {
  min-height: 42px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
}
#vision-look {
  border: 1px solid rgba(67, 244, 255, 0.6);
  background: rgba(67, 244, 255, 0.92);
  color: #021015;
}

.bubble {
  max-width: 92%;
  padding: 10px 12px;
  border: 1px solid rgba(95, 230, 255, 0.12);
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.bubble.user {
  align-self: flex-end;
  background: rgba(16, 43, 56, 0.82);
  border-color: rgba(67, 244, 255, 0.22);
}
.bubble.assistant {
  align-self: flex-start;
  background: rgba(7, 21, 30, 0.9);
}
.bubble.tool {
  align-self: center;
  background: rgba(10, 18, 24, 0.72);
  color: var(--fg-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.bubble.audio-action {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
}
.bubble.audio-action button {
  border: 1px solid var(--border-strong);
  background: rgba(67, 244, 255, 0.14);
  color: var(--cyan);
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
}
.bubble.audio-action button:disabled {
  opacity: 0.7;
  cursor: default;
}
.bubble.thinking {
  align-self: flex-start;
  background: transparent;
  color: var(--fg-muted);
  border-color: transparent;
  font-style: italic;
}
.bubble.error {
  align-self: center;
  background: transparent;
  color: var(--error);
  border-color: rgba(255, 102, 125, 0.28);
  font-size: 13px;
}

#composer {
  display: flex;
  gap: 10px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  background: rgba(2, 7, 11, 0.9);
}
#input {
  flex: 1;
  min-width: 0;
  padding: 13px 14px;
  border-radius: 5px;
  border: 1px solid rgba(95, 230, 255, 0.18);
  background: #02060a;
  color: var(--fg);
  font-size: 15px;
  outline: none;
}
#input:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(67, 244, 255, 0.08);
}
#composer button[type="submit"] {
  padding: 0 18px;
  border-radius: 5px;
}
.action-wrap {
  position: relative;
  flex: 0 0 auto;
}
.mic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(4, 13, 19, 0.9);
  cursor: pointer;
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.jarvis-stop {
  min-width: 58px;
  height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 102, 125, 0.38);
  background: rgba(42, 7, 13, 0.86);
  color: #ff8ea0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.jarvis-stop:hover {
  border-color: rgba(255, 102, 125, 0.68);
  box-shadow: 0 0 18px rgba(255, 102, 125, 0.16);
}
.action-plus {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(4, 13, 19, 0.9);
  cursor: pointer;
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.action-plus:hover,
.mic:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 18px rgba(67, 244, 255, 0.14);
}
.action-plus span {
  width: 18px;
  height: 18px;
  position: relative;
  display: block;
}
.action-plus span::before,
.action-plus span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(67, 244, 255, 0.72);
  transform: translate(-50%, -50%);
}
.action-plus span::before {
  width: 18px;
  height: 2px;
}
.action-plus span::after {
  width: 2px;
  height: 18px;
}
.action-plus.open span::after {
  opacity: 0;
}
.action-plus.uploading span {
  animation: breathe 0.9s ease-in-out infinite;
}
.action-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  min-width: 230px;
  padding: 7px;
  border: 1px solid var(--border);
  background: rgba(3, 10, 15, 0.96);
  box-shadow: var(--shadow);
  /* Sits above the approval panel (z-index 70 in mobile media query) and
     the notifications panel (z-index 75) so a tap to open it on mobile
     never gets buried under those overlays. */
  z-index: 80;
}
.action-menu-heading {
  display: block;
  padding: 7px 8px 5px;
  color: var(--fg-muted);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Screen vision is hidden on iOS Safari and most mobile browsers because
   getDisplayMedia is not exposed. syncCaptureCapabilities sets
   data-screen-vision="unavailable" on body; we surface that as a labeled
   hint instead of just a disabled-looking button so Josh/Jesse know why
   the option won't react to taps. */
body[data-screen-vision="unavailable"] #screen-vision::after {
  content: "phone N/A";
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.action-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--fg-soft);
  cursor: pointer;
  text-align: left;
}
.action-menu button:hover {
  border-color: rgba(95, 230, 255, 0.2);
  background: rgba(67, 244, 255, 0.08);
  color: var(--fg);
}
.menu-doc {
  width: 16px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 3px;
  position: relative;
  opacity: 0.8;
}
.menu-doc::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 5px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor;
}
.action-menu button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}
.action-menu button:disabled:hover {
  border-color: transparent;
  background: transparent;
  color: var(--fg-soft);
}
.menu-eye,
.menu-camera,
.menu-screen {
  width: 21px;
  height: 13px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
}
.menu-eye::before,
.menu-camera::before,
.menu-screen::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  transform: translate(-50%, -50%);
}
.menu-camera {
  height: 16px;
  border-radius: 4px;
}
.menu-camera::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 3px;
  width: 6px;
  height: 8px;
  border: 2px solid var(--cyan);
  border-left: 0;
  border-radius: 0 4px 4px 0;
}
.menu-screen {
  height: 15px;
  border-radius: 3px;
}
.menu-screen::before {
  width: 7px;
  height: 2px;
  top: calc(100% + 4px);
}
.menu-screen::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 2px;
  background: var(--cyan);
  transform: translateX(-50%);
}
.mic span {
  width: 14px;
  height: 22px;
  border: 2px solid var(--cyan);
  border-radius: 10px;
  position: relative;
}
.mic span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 18px;
  height: 10px;
  border-bottom: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  border-radius: 0 0 12px 12px;
  transform: translateX(-50%);
}
.mic.recording,
.orb.recording .orb-core {
  animation: pulse 1s infinite;
}

body[data-mode="listening"] .ring-a,
body[data-mode="speaking"] .ring-a { animation-duration: 8s; }
body[data-mode="thinking"] .ring-b { animation-duration: 7s; }
body[data-mode="approval"] .orb-ring { border-color: rgba(255, 209, 102, 0.52); }
body[data-mode="error"] .orb-ring { border-color: rgba(255, 102, 125, 0.5); }

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes breathe {
  0%, 100% { transform: scale(0.96); opacity: 0.55; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes wave {
  0%, 100% { height: 14px; }
  50% { height: 44px; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 28px rgba(67, 244, 255, 0.85), 0 0 92px rgba(0, 168, 200, 0.42); }
  50% { box-shadow: 0 0 44px rgba(99, 255, 211, 0.95), 0 0 126px rgba(0, 168, 200, 0.62); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 920px) {
  .console {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(420px, 1fr) minmax(220px, 34vh);
  }
  .orb {
    width: min(74vw, 390px);
  }
}

@media (max-width: 540px) {
  html, body {
    width: 100%;
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    position: fixed;
    inset: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: #02070b;
  }
  body {
    -webkit-tap-highlight-color: transparent;
  }
  #app {
    min-height: var(--app-height, 100dvh);
    height: var(--app-height, 100dvh);
    background: #02070b;
  }
  #chat {
    height: var(--app-height, 100dvh);
    min-height: 0;
    overflow: hidden;
  }
  #chat header {
    position: relative;
    z-index: 120;
    height: calc(54px + env(safe-area-inset-top));
    min-height: 54px;
    padding: max(8px, env(safe-area-inset-top)) 14px 8px;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
  }
  #chat header strong {
    font-size: 15px;
    letter-spacing: 0.16em;
  }
  #chat header .title {
    min-width: 0;
    gap: 8px;
    flex: 1 1 auto;
  }
  .brand-mark {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
  }
  .header-actions {
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .workspace-picker { display: none; }
  .status {
    display: none;
  }
  .tasks-toggle,
  .notification-toggle,
  .menu-toggle {
    width: 38px;
    height: 38px;
  }
  #chat header small,
  .signal {
    display: none;
  }
  .console {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    gap: 8px;
  }
  .presence {
    order: 1;
    flex: 0 0 252px;
    min-height: 252px;
    padding: 10px;
    overflow: hidden;
    grid-template-rows: auto minmax(118px, 1fr) auto auto;
  }
  .conversation {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
  }
  .state-row {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .mobile-health {
    position: relative;
    right: auto;
    top: auto;
    z-index: 4;
    align-self: auto;
    justify-self: end;
    width: auto;
    min-height: 30px;
    padding: 6px 9px;
    max-width: min(58%, 190px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: -2px;
  }
  .presence > .mobile-health {
    display: none;
  }
  .orb {
    width: min(46vw, 158px);
    align-self: center;
  }
  .presence::before { inset: 16%; }
  .presence::after { inset: 24%; }
  .wave-bars {
    height: 32px;
    gap: 4px;
  }
  .wave-bars i {
    width: 3px;
  }
  .live-line {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
    margin: 0;
    position: relative;
    z-index: 4;
    overflow: visible;
    line-height: 1.25;
  }
  .level-meter {
    width: 66%;
    margin-top: 6px;
  }
  .rail-heading {
    padding: 9px 10px;
    font-size: 10px;
  }
  .messages {
    padding: 10px;
    gap: 8px;
  }
  .bubble {
    max-width: 96%;
    padding: 9px 10px;
    font-size: 13px;
  }
  .approval {
    margin-inline: 10px;
    grid-template-columns: 1fr;
    position: fixed;
    z-index: 70;
    left: max(0px, env(safe-area-inset-left));
    right: max(0px, env(safe-area-inset-right));
    bottom: calc(74px + env(safe-area-inset-bottom));
    max-height: min(42dvh, 320px);
    overflow: auto;
  }
  .vision-panel {
    margin-inline: 10px;
    grid-template-columns: 1fr;
    max-height: min(44dvh, 340px);
    overflow: auto;
  }
  #vision-video {
    max-height: 24dvh;
  }
  .approval-actions {
    justify-content: flex-end;
  }
  #composer {
    position: relative;
    z-index: 80;
    display: grid;
    grid-template-columns: 44px 44px 50px minmax(0, 1fr) 68px;
    gap: 6px;
    padding: 8px max(8px, env(safe-area-inset-right)) max(8px, calc(env(safe-area-inset-bottom) * 0.35)) max(8px, env(safe-area-inset-left));
    align-items: center;
  }
  body[data-keyboard="open"] #composer {
    padding-bottom: 8px;
  }
  #input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 10px 11px;
    font-size: 16px;
  }
  #composer button[type="submit"] {
    width: 68px;
    height: 44px;
    padding: 0 10px;
    font-size: 13px;
  }
  .mic,
  .action-plus {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .jarvis-stop {
    min-width: 0;
    width: 50px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .action-menu {
    right: auto;
    left: 0;
    bottom: 56px;
    width: min(82vw, 280px);
  }
  .tasks-panel,
  .notifications-panel {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    top: auto;
    bottom: calc(74px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(58dvh, 520px);
    border-radius: 8px 8px 0 0;
  }
  .tasks-list,
  .notifications-list {
    max-height: 46dvh;
  }
  .menu-panel {
    position: fixed;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    top: auto;
    bottom: calc(66px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(70dvh, 560px);
    overflow: auto;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    display: grid;
    gap: 8px;
    z-index: 240;
    background: rgba(3, 10, 15, 0.99);
    box-shadow: 0 -18px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(67, 244, 255, 0.14);
  }
  .menu-panel .workspace-picker {
    display: grid;
    gap: 6px;
    width: 100%;
    color: var(--fg-muted);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 4px 8px;
  }
  .menu-panel .workspace-picker select {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 42px;
    font-size: 14px;
  }
  .menu-panel .task-wrap,
  .menu-panel .notification-wrap {
    width: 100%;
  }
  .menu-panel .tasks-toggle,
  .menu-panel .notification-toggle,
  .menu-panel .mobile-health,
  .menu-panel > button {
    width: 100%;
    min-height: 44px;
    border-radius: 7px;
    justify-content: flex-start;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    text-align: left;
  }
  .menu-panel .tasks-toggle::after {
    content: "My tasks";
    color: var(--fg-soft);
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .menu-panel .notification-toggle::after {
    content: "Notifications";
    color: var(--fg-soft);
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .menu-panel .mobile-health {
    max-width: none;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  .menu-panel .tasks-panel,
  .menu-panel .notifications-panel {
    position: static;
    width: 100%;
    max-height: 42dvh;
    margin-top: 6px;
    border-radius: 8px;
    box-shadow: none;
  }
  .menu-panel .tasks-list,
  .menu-panel .notifications-list {
    max-height: 31dvh;
  }
}

@media (max-width: 390px) {
  .orb {
    width: min(48vw, 150px);
  }
  #composer {
    grid-template-columns: 42px 42px 46px minmax(0, 1fr) 62px;
  }
  .mic,
  .action-plus {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  #composer button[type="submit"] {
    width: 62px;
    padding-inline: 8px;
  }
  .jarvis-stop {
    width: 46px;
    height: 42px;
    font-size: 9px;
  }
}

/* ============================================================================
   Mobile V2 polish (additive, kept at end so it overrides earlier rules
   without mutating them). Premium-app feel: chat-first body, slim header
   with combined-unread badge, single right-slide drawer with backdrop,
   tighter safe-area handling so there's no bottom gap, clearer mode
   feedback for listening/thinking/speaking. Desktop layout untouched.
   ============================================================================ */

/* Drawer backdrop — invisible by default; visible when body[data-menu="open"].
   Lives outside the media query so the same fade works on tablet too. */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 10, 0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease-out, background 180ms ease-out;
  z-index: 199;
}
body[data-menu="open"] .drawer-backdrop {
  background: rgba(2, 6, 10, 0.62);
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(2px);
}

/* Combined unread badge on the menu hamburger (tasks + notifications). */
.menu-unread {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cyan);
  color: #001318;
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(67, 244, 255, 0.45);
}
.menu-unread.hidden { display: none; }

/* Section headings inside the mobile drawer for the items
   setupMobileNavigation reparents into #menu-panel. */
.menu-section-heading {
  display: block;
  margin: 6px 4px 2px;
  color: var(--fg-muted);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.menu-section-heading:first-child { margin-top: 2px; }

@media (max-width: 540px) {
  /* ------- Slim header. -----------------------------------------------
     setupMobileNavigation moves the tasks/notifications/workspace wraps
     into #menu-panel, so we hide them in the header even before JS runs
     (avoids a flash of three buttons + a select on first paint). */
  #chat header .header-actions > .task-wrap,
  #chat header .header-actions > .notification-wrap,
  #chat header .header-actions > .workspace-picker {
    display: none;
  }
  /* Header gets a glassy bottom edge and a one-line "title + status dot
     + menu" layout. Status dot replaces the pill so the header stays
     readable at 360px wide. */
  #chat header {
    background: linear-gradient(180deg, rgba(3, 9, 14, 0.94), rgba(3, 9, 14, 0.78));
    border-bottom: 1px solid rgba(95, 230, 255, 0.16);
  }
  #chat header .title strong {
    font-size: 14px;
    letter-spacing: 0.18em;
  }
  #chat header .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fg-muted);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  #chat header .status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fg-muted);
    box-shadow: 0 0 10px currentColor;
  }
  #chat header .status.ok { color: var(--ok); }
  #chat header .status.ok::before { background: var(--ok); }
  #chat header .status.err { color: var(--error); }
  #chat header .status.err::before { background: var(--error); }

  /* ------- Chat-first body. ------------------------------------------
     Drop the presence card from 252px to 168px so messages dominate.
     Hide the decorative concentric rings around the presence card on
     small screens (they look like noise at this size). Smaller orb so
     it never gets clipped by the live-line or composer. */
  .console {
    padding: 6px 8px 0;
    gap: 6px;
  }
  .presence {
    flex: 0 0 auto;
    min-height: 0;
    padding: 8px 10px 6px;
    grid-template-rows: auto auto auto auto;
    gap: 6px;
    border-radius: 12px;
  }
  .presence::before,
  .presence::after { display: none; }
  .orb {
    width: 92px;
    height: 92px;
    margin: 2px auto 0;
  }
  .orb .ring-a { animation-duration: 14s; }
  .orb .ring-b { animation-duration: 9s; }
  .live-line {
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
    min-height: 0;
    padding: 4px 8px;
    color: var(--fg-soft);
  }
  .level-meter {
    width: 50%;
    margin: 4px auto 2px;
    opacity: 0.7;
  }
  .conversation {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 12px;
  }
  .rail-heading { display: none; }
  .matter-context {
    align-items: flex-start;
    margin: 8px 10px 0;
    padding: 9px 10px;
    border-radius: 10px;
  }
  .matter-eyebrow {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .matter-context strong {
    font-size: 13px;
  }
  .matter-context-meta {
    max-width: 48%;
    font-size: 10px;
  }
  .messages {
    padding: 10px 10px 14px;
  }

  /* ------- Mode-state visual feedback. -------------------------------
     Cleaner listening/thinking/speaking states that don't depend on the
     orb pseudo-rings (which we hide on small screens). The state row
     mode label gets a colored dot prefix that tracks body[data-mode]. */
  .state-row {
    justify-content: center;
    gap: 8px;
    font-size: 10px;
  }
  .state-row .signal { display: none; }
  .mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .mode::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fg-muted);
    box-shadow: 0 0 8px currentColor;
    transition: background 160ms ease-out;
  }
  body[data-mode="listening"] .mode { color: var(--cyan); }
  body[data-mode="listening"] .mode::before {
    background: var(--cyan);
    animation: pulse 1.1s ease-in-out infinite;
  }
  body[data-mode="thinking"] .mode { color: var(--amber); }
  body[data-mode="thinking"] .mode::before {
    background: var(--amber);
    animation: pulse 0.9s ease-in-out infinite;
  }
  body[data-mode="speaking"] .mode { color: var(--mint); }
  body[data-mode="speaking"] .mode::before {
    background: var(--mint);
    animation: pulse 0.7s ease-in-out infinite;
  }
  body[data-mode="approval"] .mode { color: var(--amber); }
  body[data-mode="approval"] .mode::before {
    background: var(--amber);
    animation: breathe 1.4s ease-in-out infinite;
  }
  body[data-mode="error"] .mode { color: var(--error); }
  body[data-mode="error"] .mode::before { background: var(--error); }

  /* ------- Composer polish. ------------------------------------------
     Full safe-area-inset on the bottom (V1 used 0.35 multiplier which
     left a partial gap on devices with home indicators). Slightly more
     gutter and tighter visual weight. */
  #composer {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(3, 9, 14, 0) 0%, rgba(3, 9, 14, 0.78) 30%, rgba(3, 9, 14, 0.92) 100%);
    border-top: 1px solid rgba(95, 230, 255, 0.12);
  }
  body[data-keyboard="open"] #composer {
    /* Keyboard is up — no need for safe-area floor. */
    padding-bottom: 8px;
  }
  #input {
    border-radius: 10px;
    background: rgba(4, 13, 19, 0.88);
    border: 1px solid rgba(95, 230, 255, 0.18);
  }
  #input:focus { border-color: var(--border-strong); }

  /* ------- Drawer (right-slide) and z-index hierarchy. ---------------
     The menu-panel becomes a real slide-from-right drawer with its own
     internal scroll. body[data-menu="open"] toggles visibility instead
     of relying on the .hidden class JS already manages, so the slide
     animation can play. */
  .menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(86vw, 360px);
    max-height: none;
    height: var(--app-height, 100dvh);
    border-radius: 14px 0 0 14px;
    border-left: 1px solid var(--border);
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    padding:
      max(14px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, rgba(3, 10, 15, 0.99), rgba(2, 6, 10, 0.99));
    box-shadow: -28px 0 80px rgba(0, 0, 0, 0.55), -2px 0 22px rgba(67, 244, 255, 0.08);
    z-index: 200;
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 180ms ease-out;
    opacity: 1;
    /* Override the .hidden { display: none !important; } from earlier so the
       slide animation can run instead of the panel popping in/out. */
    display: grid;
    gap: 6px;
    grid-auto-rows: min-content;
    align-content: start;
  }
  .menu-panel.hidden { display: grid; }
  body[data-menu="open"] .menu-panel { transform: translateX(0); }
  body:not([data-menu="open"]) .menu-panel {
    pointer-events: none;
  }

  /* Drawer-internal panels (tasks/notifications) lose their absolute
     positioning and become flow-layout sections. */
  .menu-panel .tasks-panel,
  .menu-panel .notifications-panel {
    position: static;
    inset: auto;
    width: 100%;
    max-height: none;
    margin-top: 4px;
    border-radius: 9px;
    box-shadow: none;
    border: 1px solid rgba(95, 230, 255, 0.14);
  }
  .menu-panel .tasks-list,
  .menu-panel .notifications-list {
    max-height: 38dvh;
  }

  /* Z-index ladder, top to bottom:
     drawer        200
     drawer-bd     199
     header        120
     approval      100
     vision-panel   90
     action-menu    80
     composer       80
     The pre-V2 stacks were partly correct; this tightens them. */
  #chat header { z-index: 120; }
  .approval { z-index: 100; }
  .vision-panel {
    position: relative;
    z-index: 90;
  }
  .action-menu { z-index: 80; }
  #composer { z-index: 80; }
}

@media (max-width: 390px) {
  .orb { width: 86px; height: 86px; }
  .menu-panel { width: 92vw; }
}