:root {
  --bg: #030712;
  --panel-bg: rgba(9, 16, 26, 0.85);
  --panel-border: rgba(38, 70, 96, 0.6);
  --panel-border-glow: rgba(57, 216, 255, 0.25);
  --line: #18283a;
  --line2: #243e54;
  --text: #edf6ff;
  --muted: #82a0b8;
  --dim: #49637a;
  --blue: #1683ff;
  --cyan: #39d8ff;
  --cyan-glow: rgba(57, 216, 255, 0.4);
  --green: #4ee19b;
  --orange: #ff9838;
  --purple: #b36bff;
  --red: #ff5e6c;
  font-family: "Leelawadee UI", "Segoe UI", system-ui, sans-serif;
  color-scheme:dark;
}

.shell {
  min-height:0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: 
    radial-gradient(circle, rgba(137, 196, 255, 0.15) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(57, 216, 255, 0.08) 0 1px, transparent 1.5px);
  background-size: 71px 71px, 113px 113px;
  background-position: 12px 19px, 46px 61px;
  opacity: 0.6;
}

button, input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  transition: transform 0.08s ease, filter 0.08s ease;
}

/* -webkit-tap-highlight-color above is set to transparent app-wide (avoids
   the default blue/grey flash), which also silently removed the only
   built-in signal a touch actually landed. Reported live: a button whose
   tap had no visible effect was indistinguishable from a tap that missed
   entirely, made worse right when a real backend hang made the update
   button *actually* dead -- there was no way to tell which one was
   happening. Every button now dims and shrinks slightly the instant it's
   pressed, released immediately after, regardless of whether the action
   behind it succeeds. */
button:active {
  transform: scale(0.94);
  filter: brightness(0.8);
}

/* ==================== BODY & MAIN LAYOUT ==================== */
body.hermes-companion-theme {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at 50% 20%, #0a1728 0%, #030712 70%);
  /* targetSdk 36 makes edge-to-edge mandatory -- content draws under the
     system status/nav bars by OS policy, not by anything this app opted
     into. Without this the OS clock/battery cluster overlaps the app's own
     header instead of sitting above it. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ==================== 1. HEADER BAR ==================== */
.app-header {
  height: 64px;
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  align-items: center;
  padding: 0 20px;
  background: rgba(5, 11, 20, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  z-index: 10;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(22, 131, 255, 0.3), rgba(57, 216, 255, 0.1));
  border: 1px solid var(--cyan);
  box-shadow: 0 0 15px rgba(57, 216, 255, 0.25);
  display: grid;
  place-items: center;
}

.logo-h {
  color: var(--cyan);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.brand-titles {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text);
  line-height: 1.1;
}

.brand-sub {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.header-widgets {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.widget-time-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-main {
  font-size: 28px;
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 1px;
  line-height: 1;
}

.time-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.widget-weather-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.weather-temp-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.weather-icon-inline {
  font-size: 22px;
}

.weather-temp-main {
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
}

.weather-details-mini {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

.weather-hum {
  font-size: 10px;
  color: var(--dim);
}

.widget-tasks-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 170px;
}

.tasks-title {
  font-size: 10px;
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.tasks-list-mini {
  list-style: none;
  font-size: 11px;
  color: var(--text);
  line-height: 1.3;
}

.tasks-list-mini li {
  display: flex;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-time {
  color: var(--muted);
  font-weight: 600;
}

.tasks-more {
  font-size: 10px;
  color: var(--dim);
  font-style: italic;
}

.header-status-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(12, 22, 34, 0.8);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.status-pill.green {
  color: var(--green);
  border-color: rgba(78, 225, 155, 0.3);
}

.status-pill.blue {
  color: var(--cyan);
  border-color: rgba(57, 216, 255, 0.3);
}

.dot-online, .dot-api {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(14, 26, 40, 0.8);
  border: 1px solid var(--line2);
  color: var(--muted);
  font-size: 14px;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.header-btn:hover {
  background: rgba(22, 131, 255, 0.2);
  color: #fff;
  border-color: var(--blue);
}

.header-btn.exit {
  background: rgba(255, 94, 108, 0.1);
  border-color: rgba(255, 94, 108, 0.3);
  color: var(--red);
}

.header-btn.exit:hover {
  background: rgba(255, 94, 108, 0.3);
  color: #fff;
}

/* ==================== 2. COMPANION SHELL (3 COLUMNS) ==================== */
.companion-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px 1fr 310px;
  gap: 14px;
  padding: 14px 16px 8px;
}

/* ==================== LEFT SIDEBAR ==================== */
.sidebar-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.avatar-card {
  padding: 16px;
  border-radius: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.avatar-card:before {
  content: "";
  position: absolute;
  top: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(57, 216, 255, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.ai-avatar {
  position: relative;
  width: 90px;
  height: 80px;
  margin-bottom: 10px;
  filter: drop-shadow(0 10px 20px rgba(22, 131, 255, 0.25));
}

.ai-face {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  width: 74px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #284866;
  border-radius: 22px;
  background: linear-gradient(145deg, #0e1e30, #050d18);
  box-shadow: inset 0 0 16px rgba(57, 216, 255, 0.15), 0 0 0 3px #050d18;
}

.ai-ear {
  position: absolute;
  top: 28px;
  width: 8px;
  height: 24px;
  border: 1px solid #284866;
  background: #091522;
  z-index: 2;
}

.ai-ear.left { left: 1px; border-radius: 5px 0 0 5px; }
.ai-ear.right { right: 1px; border-radius: 0 5px 5px 0; }

.ai-antenna {
  position: absolute;
  left: 44px;
  top: -8px;
  width: 2px;
  height: 17px;
  background: #284866;
}

.ai-antenna i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.ai-eyes {
  display: flex;
  gap: 16px;
  z-index: 2;
}

.ai-eyes span {
  width: 14px;
  height: 18px;
  border-radius: 8px;
  background: linear-gradient(#a9f5ff, var(--cyan));
  box-shadow: 0 0 12px rgba(57, 216, 255, 0.8);
  animation: robotBlink 3.5s ease-in-out infinite;
}

.ai-eyes span:nth-child(2) { animation-delay: 0.05s; }

.ai-mouth {
  width: 18px;
  height: 5px;
  margin-top: 8px;
  border: 1.5px solid rgba(57, 216, 255, 0.7);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  z-index: 2;
}

@keyframes robotBlink {
  0%, 94%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.08); }
}

.greeting-box h2 {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.greeting-box p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.audio-waveform-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 18px;
  margin-top: 10px;
}

.audio-waveform-mini span {
  width: 3px;
  height: 12px;
  border-radius: 3px;
  background: var(--cyan);
  opacity: 0.6;
  animation: wavePulse 1.2s ease-in-out infinite alternate;
}

.audio-waveform-mini span:nth-child(2) { animation-delay: 0.2s; height: 16px; }
.audio-waveform-mini span:nth-child(3) { animation-delay: 0.4s; height: 8px; }
.audio-waveform-mini span:nth-child(4) { animation-delay: 0.1s; height: 18px; }
.audio-waveform-mini span:nth-child(5) { animation-delay: 0.3s; height: 10px; }

@keyframes wavePulse {
  0% { transform: scaleY(0.4); opacity: 0.3; }
  100% { transform: scaleY(1.2); opacity: 0.9; }
}

/* Voice Talk Action Button */
.voice-talk-action {
  width: 100%;
}

/* === Voice orb =========================================================
   --voice-level is written by voice_orb.js from a real analyser, so every
   scale and glow below tracks the actual voice rather than a timed loop.

   It must be registered: an untyped custom property is substituted as a token,
   so a transform depending on it does not re-interpolate when it changes and
   the ring freezes at whatever value it first computed. Typing it as <number>
   makes the browser animate it properly. */
@property --voice-level {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.voice-orb-btn {
  --orb-hue: var(--cyan);
  --voice-level: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(22, 131, 255, 0.22), rgba(57, 216, 255, 0.06));
  border: 1px solid rgba(57, 216, 255, 0.45);
  box-shadow: 0 4px 20px rgba(22, 131, 255, 0.18);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
  text-align: left;
}

.voice-orb-btn:hover {
  background: linear-gradient(135deg, rgba(22, 131, 255, 0.36), rgba(57, 216, 255, 0.16));
  box-shadow: 0 0 26px rgba(57, 216, 255, 0.35);
}

.voice-orb-btn:active { transform: scale(0.985); }

.voice-orb-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.voice-orb {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.voice-orb-core {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #041018;
  background: radial-gradient(circle at 35% 30%, #eafcff 0%, var(--orb-hue) 55%, #0e7fb8 100%);
  /* The core swells with the voice; the multiplier is small so speech reads as
     breathing rather than pulsing. */
  transform: scale(calc(1 + var(--voice-level) * 0.14));
  box-shadow:
    0 0 calc(10px + var(--voice-level) * 26px) var(--orb-hue),
    inset 0 -3px 8px rgba(0, 0, 0, 0.25);
  /* Deliberately not transitioned. A transition on a property whose value comes
     from a custom property never re-interpolates when only that property
     changes, so the ring freezes at its first computed value. The analyser
     already updates this every frame and smooths in JS, so there is nothing for
     a transition to add. Only the state colour, which does not depend on the
     level, is animated. */
  transition: background 0.3s ease;
}

.voice-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--orb-hue);
  opacity: calc(0.25 + var(--voice-level) * 0.6);
  transform: scale(calc(1 + var(--voice-level) * 0.22));
}

/* Two rings offset in time read as a travelling pulse rather than a blink. */
.voice-orb-wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--orb-hue);
  opacity: 0;
  pointer-events: none;
}

.voice-orb-wave.delayed { animation-delay: 0.9s; }

.voice-orb-label strong {
  display: block;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}

.voice-orb-label small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

/* --- states ----------------------------------------------------------- */
.voice-orb-btn[data-state="idle"] { --orb-hue: var(--cyan); }

.voice-orb-btn[data-state="idle"] .voice-orb-core {
  animation: orb-breathe 3.4s ease-in-out infinite;
}

.voice-orb-btn[data-state="listening"] { --orb-hue: #4ee19b; }

.voice-orb-btn[data-state="listening"] .voice-orb-wave {
  animation: orb-ripple 1.8s ease-out infinite;
}

.voice-orb-btn[data-state="thinking"] { --orb-hue: #b36bff; }

/* Nothing is audible while waiting for a reply, so this one state is timed. */
.voice-orb-btn[data-state="thinking"] .voice-orb-ring {
  border-color: transparent;
  border-top-color: var(--orb-hue);
  border-right-color: var(--orb-hue);
  opacity: 1;
  animation: orb-spin 0.9s linear infinite;
}

.voice-orb-btn[data-state="speaking"] { --orb-hue: #39d8ff; }

.voice-orb-btn[data-state="speaking"] .voice-orb-wave {
  animation: orb-ripple 1.2s ease-out infinite;
}

.voice-orb-btn[data-state="offline"] {
  --orb-hue: #64748b;
  border-color: rgba(100, 116, 139, 0.4);
  box-shadow: none;
}

.voice-orb-btn[data-state="offline"] .voice-orb-core {
  background: radial-gradient(circle at 35% 30%, #94a3b8 0%, #475569 70%);
  box-shadow: none;
}

@keyframes orb-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes orb-ripple {
  0% { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}

@keyframes orb-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .voice-orb-core,
  .voice-orb-ring,
  .voice-orb-wave { animation: none !important; }
}

.mic-btn-text strong {
  display: block;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}

.mic-btn-text small {
  font-size: 10px;
  color: var(--cyan);
}

/* Prompt Suggestions Cards */
.prompt-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.prompt-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  transition: all 0.2s ease;
  text-align: left;
}

.prompt-card:hover {
  background: rgba(18, 34, 52, 0.9);
  border-color: var(--blue);
  transform: translateX(2px);
}

.prompt-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}

.prompt-icon.blue { background: rgba(22, 131, 255, 0.15); }
.prompt-icon.purple { background: rgba(179, 107, 255, 0.15); }
.prompt-icon.orange { background: rgba(255, 152, 56, 0.15); }
.prompt-icon.green { background: rgba(78, 225, 155, 0.15); }

.prompt-text {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}

/* Quick Tools Grid */
.quick-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 6px;
}

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 10px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  transition: all 0.2s ease;
}

.tool-btn:hover {
  background: rgba(22, 131, 255, 0.15);
  border-color: var(--blue);
}

.tool-icon {
  font-size: 16px;
}

.tool-label {
  font-size: 10px;
  color: var(--muted);
}

/* ==================== 3. CENTER WORKSPACE WINDOW ==================== */
.workspace-center {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.window-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--panel-border-glow);
  overflow: hidden;
}

.window-header {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: rgba(12, 22, 34, 0.95);
  border-bottom: 1px solid var(--line);
}

.window-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.win-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(24, 40, 58, 0.6);
  border: 1px solid var(--line2);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: all 0.15s ease;
}

.win-btn:hover {
  background: rgba(57, 216, 255, 0.2);
  color: #fff;
  border-color: var(--cyan);
}

.win-btn.close:hover {
  background: rgba(255, 94, 108, 0.3);
  border-color: var(--red);
  color: #fff;
}

.window-title-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(6, 12, 20, 0.7);
  border: 1px solid var(--line);
  font-size: 11px;
}

.badge-label {
  color: var(--muted);
}

.window-title-badge strong {
  color: var(--text);
  font-weight: 700;
}

.yt-red-icon {
  color: #ff0000;
  font-size: 10px;
  margin-left: 2px;
}

.window-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.window-body {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #02050b;
  overflow: hidden;
}

.window-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.window-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 20px;
  gap: 20px;
  background: radial-gradient(circle at center 30%, #0c1d2e 0%, #02050b 85%);
  text-align: center;
  overflow-y: auto;
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

/* AI Avatar Dodge / Hide Animation when an App is active */
.window-placeholder.hidden, .window-placeholder.app-active {
  opacity: 0;
  transform: scale(0.9) translateY(-30px);
  pointer-events: none;
}

/* Center AI Hero */
.center-ai-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.ai-avatar.large {
  width: 110px;
  height: 98px;
  filter: drop-shadow(0 0 25px rgba(57, 216, 255, 0.4));
}

.ai-avatar.large .ai-face {
  width: 90px;
  height: 78px;
  border-radius: 26px;
}

.ai-avatar.large .ai-eyes span {
  width: 18px;
  height: 24px;
}

.center-ai-greeting strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}

.center-ai-greeting p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* App Launcher Section & Grid */
.app-launcher-section {
  width: 100%;
  max-width: 720px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.launcher-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.launcher-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 1px;
  text-align: left;
}

.launcher-manage-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(22, 131, 255, 0.12);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.launcher-manage-btn:hover {
  background: rgba(22, 131, 255, 0.25);
  border-color: var(--cyan);
}

.launcher-manage-btn.has-update {
  position: relative;
}

.launcher-manage-btn.has-update::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.app-grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.app-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 18px 0;
}

.app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(14, 26, 40, 0.6);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.app-card:hover {
  background: rgba(22, 131, 255, 0.2);
  border-color: var(--cyan);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px var(--cyan-glow);
}

.app-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* App Icon Brand Colors */
.app-icon-wrapper.red { background: linear-gradient(135deg, #ff0000, #c40000); }
.app-icon-wrapper.red-m { background: linear-gradient(135deg, #ea4335, #c5221f); }
.app-icon-wrapper.green { background: linear-gradient(135deg, #0f9d58, #0b8043); }
.app-icon-wrapper.line-green { background: linear-gradient(135deg, #00b900, #009900); }
.app-icon-wrapper.blue { background: linear-gradient(135deg, #1877f2, #0d65d9); }
.app-icon-wrapper.teal { background: linear-gradient(135deg, #10a37f, #0d8a6a); }
.app-icon-wrapper.dark { background: linear-gradient(135deg, #2d3748, #1a202c); }
.app-icon-wrapper.cyan { background: linear-gradient(135deg, #1683ff, #39d8ff); }
.app-icon-wrapper.sky { background: linear-gradient(135deg, #229ed9, #1782b6); }
.app-icon-wrapper.blue-mm { background: linear-gradient(135deg, #0058cc, #003f99); }
.app-icon-wrapper.dark-notion { background: linear-gradient(135deg, #1c1d22, #000000); }
.app-icon-wrapper.spotify-green { background: linear-gradient(135deg, #1ed760, #17b350); }
.app-icon-wrapper.claude { background: linear-gradient(135deg, #d97757, #b85c3f); }

.app-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

.app-icon-wrapper.add-app {
  background: transparent;
  border: 2px dashed var(--panel-border);
  color: var(--muted);
  box-shadow: none;
}

.app-card-add:hover .app-icon-wrapper.add-app {
  border-color: var(--cyan);
  color: var(--cyan);
}

.ws-orb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cyan) 0%, var(--blue) 100%);
  box-shadow: 0 0 30px var(--cyan-glow);
  display: grid;
  place-items: center;
  animation: orbPulse 2.5s ease-in-out infinite;
}

@keyframes orbPulse {
  0%, 100% { transform: scale(0.95); box-shadow: 0 0 20px var(--cyan-glow); }
  50% { transform: scale(1.05); box-shadow: 0 0 40px var(--cyan); }
}

.window-placeholder strong {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.window-placeholder p {
  font-size: 12px;
  color: var(--muted);
}

.window-footer {
  height: 32px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8, 14, 22, 0.9);
  border-top: 1px solid var(--line);
  font-size: 11px;
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ws-active-bar {
  height: 40px;
  gap: 8px;
}

.ws-active-bar .footer-status {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.vision-control {
  min-height: 28px;
  padding: 2px 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 1px solid #34465a;
  border-radius: 8px;
  background: rgba(8, 16, 25, .96);
  color: #aebdca;
  font-size: 9px;
  letter-spacing: .02em;
}

.vision-control[hidden],
.vision-action[hidden] {
  display: none;
}

.vision-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}

.vision-control[data-state="consent"] {
  border-color: #fbbf24;
  color: #fde68a;
}

.vision-control[data-state="consent"] .vision-dot { background: #fbbf24; }

.vision-control[data-state="on"] {
  border-color: #fb7185;
  color: #fecdd3;
}

.vision-control[data-state="on"] .vision-dot {
  background: #fb3b58;
  box-shadow: 0 0 0 3px rgba(251, 59, 88, .18);
  animation: visionPulse 1.2s ease-in-out infinite;
}

.vision-control[data-state="paused"] {
  border-color: #38bdf8;
  color: #bae6fd;
}

.vision-control[data-state="paused"] .vision-dot { background: #38bdf8; }

.vision-action {
  min-width: 58px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid #486078;
  border-radius: 6px;
  background: #152536;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.vision-action.allow { border-color: #22c55e; background: #14532d; }
.vision-action.deny { border-color: #ef4444; background: #4c1d1d; }
.vision-action.pause { border-color: #38bdf8; background: #0c4a6e; }

@keyframes visionPulse {
  50% { opacity: .48; transform: scale(.78); }
}

.signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}

.signal-bars i {
  width: 2px;
  background: var(--cyan);
  border-radius: 1px;
}

.signal-bars i:nth-child(1) { height: 4px; }
.signal-bars i:nth-child(2) { height: 7px; }
.signal-bars i:nth-child(3) { height: 10px; }

.footer-title {
  color: var(--text);
  font-weight: 600;
}

.footer-meta {
  color: var(--muted);
}

.ws-link {
  color: var(--cyan);
  text-decoration: none;
}

/* ==================== 4. RIGHT SIDEBAR ==================== */
.sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.card-panel {
  border-radius: 14px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.panel-header h3 {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* Conversation Panel */
.conversation-panel {
  flex: 1.2;
  min-height: 0;
}

.chat-transcript-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.chat-bubble {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chat-bubble.user {
  background: rgba(22, 131, 255, 0.12);
  border: 1px solid rgba(22, 131, 255, 0.25);
  align-self: flex-end;
  width: 90%;
}

.chat-bubble.assistant {
  background: rgba(14, 26, 40, 0.7);
  border: 1px solid var(--line2);
  align-self: flex-start;
  width: 90%;
}

.chat-sender {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--cyan);
}

.chat-avatar-mini {
  font-size: 11px;
}

.chat-text {
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hermes-chat-form {
  display: flex;
  gap: 7px;
  margin-top: 9px;
}

.hermes-chat-form textarea {
  min-width: 0;
  flex: 1;
  resize: none;
  border: 1px solid var(--line2);
  border-radius: 9px;
  padding: 8px 9px;
  color: var(--text);
  background: rgba(6, 12, 20, 0.85);
  font: inherit;
}

.hermes-chat-form textarea:focus {
  outline: 1px solid var(--cyan);
  border-color: var(--cyan);
}

.hermes-chat-form button {
  align-self: stretch;
  border: 0;
  border-radius: 9px;
  padding: 0 12px;
  background: var(--cyan);
  color: #03101a;
  font-weight: 800;
  cursor: pointer;
}

.hermes-chat-form button:disabled,
.hermes-chat-form textarea:disabled {
  cursor: wait;
  opacity: 0.55;
}

.hermes-chat-status {
  min-height: 16px;
  margin: 4px 2px 0;
  color: var(--muted);
  font-size: 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Status Panel */
.status-panel {
  flex: 0.8;
}

.status-visualizer-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(6, 12, 20, 0.6);
  border: 1px solid var(--line);
}

.visualizer-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 24px;
}

.visualizer-wave .bar {
  width: 3px;
  height: 100%;
  background: var(--cyan);
  border-radius: 2px;
  animation: liveWave 1.2s infinite ease-in-out alternate;
}

.visualizer-wave .bar:nth-child(1) { animation-delay: 0.1s; }
.visualizer-wave .bar:nth-child(2) { animation-delay: 0.3s; }
.visualizer-wave .bar:nth-child(3) { animation-delay: 0.2s; }
.visualizer-wave .bar:nth-child(4) { animation-delay: 0.4s; }
.visualizer-wave .bar:nth-child(5) { animation-delay: 0.15s; }

@keyframes liveWave {
  0% { transform: scaleY(0.2); }
  100% { transform: scaleY(1); }
}

.status-text-live strong {
  display: block;
  font-size: 12px;
  color: var(--cyan);
}

.status-text-live small {
  font-size: 10px;
  color: var(--muted);
}

/* Memory Panel */
.memory-panel {
  flex: 0.9;
}

.memory-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.memory-list li {
  font-size: 11px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(14, 26, 40, 0.4);
}

.memory-bullet {
  color: var(--cyan);
  font-weight: bold;
}

/* ==================== 5. BOTTOM NAVIGATION DOCK ==================== */
.app-dock {
  height: 68px;
  margin: 0 16px 12px;
  border-radius: 20px;
  background: rgba(9, 16, 26, 0.92);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(22, 131, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 16px;
  z-index: 10;
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
  transition: all 0.2s ease;
  padding: 6px 12px;
  border-radius: 12px;
}

.dock-item:hover, .dock-item.active {
  color: #ffffff;
  background: rgba(22, 131, 255, 0.15);
}

.dock-icon {
  font-size: 20px;
}

.dock-item.center-orb {
  padding: 0;
  margin: 0 6px;
}

.dock-center-orb-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #0f2438, #050e18);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 20px var(--cyan-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.orb-eye {
  width: 8px;
  height: 11px;
  border-radius: 4px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* ==================== OVERLAYS & DIALOGS ==================== */
.overlay-panel {
  position: fixed;
  right: 16px;
  bottom: 90px;
  z-index: 20;
  width: 320px;
  overflow: hidden;
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: rgba(8, 15, 24, 0.97);
  box-shadow: 0 20px 55px #000;
}

.overlay-panel[hidden], .dialog-backdrop[hidden], .quota-banner[hidden] {
  display: none;
}

.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 1px;
}

.overlay-close, .quota-close {
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 4px;
  background: #142131;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 10px;
}

.touch {
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid var(--line2);
  border-radius: 6px;
  background: #0e1925;
  font-size: 18px;
}

.touch span {
  font-size: 9px;
  color: var(--muted);
}

.touch.primary, .search-box button {
  border-color: #3ca1ff;
  background: linear-gradient(135deg, var(--blue), #0756ac);
}

.quick-row, .kind-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 0 10px 8px;
}

.quick, .kind {
  height: 35px;
  border: 1px solid var(--line2);
  border-radius: 5px;
  background: #0c1722;
  font-size: 10px;
}

.selected, .kind.active {
  border-color: var(--blue);
  color: var(--cyan);
}

.search-box {
  display: grid;
  grid-template-columns: 1fr 65px;
  gap: 5px;
  padding: 0 10px 8px;
}

.search-box input {
  height: 38px;
  padding: 0 9px;
  border: 1px solid var(--line2);
  border-radius: 5px;
  background: #050a10;
  outline: none;
  font-size: 11px;
}

.search-box button {
  border: 0;
  border-radius: 5px;
  font-size: 10px;
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(7px);
}

.dialog {
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 27px;
  text-align: center;
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: #0c1621;
}

.dialog input {
  width: 100%;
  height: 38px;
  margin: 6px 0;
  padding: 0 10px;
  border: 1px solid var(--line2);
  border-radius: 5px;
  background: #050a10;
  outline: none;
  font-size: 12px;
  text-align: left;
  color: var(--text);
}

.dialog-icon {
  font-size: 36px;
  color: var(--red);
}

.dialog h2 {
  margin: 8px 0;
  font-size: 18px;
}

.dialog p {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 20px;
}

.dialog div {
  display: flex;
  gap: 10px;
}

.dialog button {
  flex: 1;
  height: 40px;
  border-radius: 6px;
  font-size: 12px;
}

.dialog-cancel {
  border: 1px solid var(--line2);
  background: #142131;
}

.dialog-wide {
  width: 480px;
}

.update-checked-at {
  display: block;
  margin-top: 4px;
  color: var(--text3, #7a8aa0);
  font-size: 12px;
  min-height: 14px;
}

/* OTA download progress bar (0.37.1). Shown while download_update streams the
   APK; the bar + percent replace the old single toast that looked like the
   button had frozen on a slow link. */
.update-progress {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.update-progress-track {
  height: 8px;
  background: rgba(6, 12, 20, 0.85);
  border: 1px solid var(--line2);
  border-radius: 999px;
  overflow: hidden;
}
.update-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  border-radius: 999px;
  /* Smooth the bar so 150 throttled events over a 15 MB APK animate as one
     continuous fill rather than discrete 100 KB steps. */
  transition: width 0.2s ease-out;
}
.update-progress-text {
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

#serverCommandText {
  display: block;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(14, 26, 40, 0.8);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: 13px;
  color: var(--cyan);
  max-height: 30vh;
  overflow-y: auto;
}

#serverCommandResult {
  display: block;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(14, 26, 40, 0.6);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: 12px;
  color: var(--text3, #7a8aa0);
  max-height: 30vh;
  overflow-y: auto;
}

.voice-mode-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  text-align: left;
}

.voice-mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(14, 26, 40, 0.6);
  border: 1px solid var(--panel-border);
  cursor: pointer;
}

.voice-mode-option:has(input:checked) {
  border-color: var(--cyan);
  background: rgba(22, 131, 255, 0.12);
}

.voice-mode-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.voice-mode-option small {
  color: var(--text3, #7a8aa0);
  font-size: 11px;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 52vh;
  overflow-y: auto;
  margin-bottom: 16px;
  text-align: left;
}

.app-catalog-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(14, 26, 40, 0.6);
  border: 1px solid var(--panel-border);
}

.app-catalog-row .app-icon-wrapper {
  width: 34px;
  height: 34px;
  font-size: 16px;
  border-radius: 9px;
  flex-shrink: 0;
}

.app-catalog-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.app-catalog-toggle {
  flex-shrink: 0;
  width: auto;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(22, 131, 255, 0.15);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.app-catalog-toggle.is-on {
  background: rgba(255, 77, 79, 0.15);
  border-color: var(--red);
  color: var(--red);
}

/* Scoped under .dialog on purpose. `.dialog div` is (0,1,1) and beats a bare
   `.usage-report` at (0,1,0), so a plain class here loses the cascade and the
   inherited display:flex lays these cards out side by side with each address
   wrapped one character per line. Same specificity trap as the [hidden] rule
   near the top of this file. */
.dialog .usage-report {
  display: block;
  max-height: 52vh;
  overflow-y: auto;
  margin-bottom: 16px;
  text-align: left;
}

.dialog .usage-account {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(14, 26, 40, 0.6);
  border: 1px solid var(--panel-border);
}

.dialog .usage-account-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.usage-account-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}

.usage-cost {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  white-space: nowrap;
}

/* Estimates must not read as measurements. */
.usage-cost.is-estimate {
  color: var(--muted);
  font-weight: 600;
}

.dialog .usage-kind {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 0;
}

.dialog .usage-total {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.dialog .usage-empty {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 18px 0;
}

.dialog-exit {
  background: var(--red);
  color: #fff;
}

.toast {
  position: fixed;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(14, 26, 40, 0.95);
  border: 1px solid var(--cyan);
  color: #fff;
  font-size: 12px;
  box-shadow: 0 0 15px rgba(57, 216, 255, 0.3);
  z-index: 50;
  display: none;
}

/* ==================== DESKTOP APP RUNTIME ==================== */
.sidebar-section-title {
  padding: 15px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(17, 37, 55, 0.82), rgba(5, 13, 22, 0.92));
}

.sidebar-section-title strong {
  display: block;
  color: var(--cyan);
  font-size: 14px;
  letter-spacing: .04em;
}

.sidebar-section-title span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.window-placeholder.hidden,
.window-placeholder.app-active {
  opacity: 0;
  transform: scale(.82) translate(-8%, -24px);
  pointer-events: none;
}

.active-app-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  background: radial-gradient(circle at center, rgba(16, 62, 88, .48), #02050b 72%);
  animation: appStageIn .35s ease both;
}

.active-app-stage[hidden] { display: none; }

.window-shell.minimized .window-body,
.window-shell.minimized .window-footer {
  display: none;
}

.window-shell.minimized {
  width: 100%;
  height: 42px;
  min-height: 42px;
}

@keyframes appStageIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

.active-app-icon {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cyan);
  border-radius: 22px;
  background: rgba(15, 35, 52, .92);
  box-shadow: 0 0 34px rgba(57, 216, 255, .34);
  font-size: 38px;
}

.active-app-stage h2 { font-size: 24px; }
.active-app-stage p { color: var(--muted); font-size: 13px; }

.active-app-home {
  min-width: 150px;
  height: 42px;
  margin-top: 8px;
  border: 1px solid var(--cyan);
  border-radius: 12px;
  background: rgba(22, 131, 255, .2);
  color: #fff;
  font-weight: 700;
}

.app-launcher-section { max-width: 940px; }
.app-grid-container { grid-template-columns: repeat(8, minmax(58px, 1fr)); gap: 7px; }
.app-card { min-width: 0; min-height: 78px; padding: 8px 4px; gap: 6px; }
.app-card .app-icon-wrapper { width: 38px; height: 38px; font-size: 18px; border-radius: 10px; }
.app-card .app-name { max-width: 100%; font-size: 9px; line-height: 1.15; overflow-wrap: anywhere; }
.app-icon-wrapper.chrome { background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); }
.app-icon-wrapper.maps { background: linear-gradient(135deg, #34a853, #4285f4); }
.app-icon-wrapper.calendar { background: linear-gradient(135deg, #4285f4, #185abc); }
.app-icon-wrapper.notes { background: linear-gradient(135deg, #fbbc04, #f29900); }

.dock-center-orb-avatar {
  color: #fff;
  font-weight: 900;
  font-size: 20px;
}

/* ==================== RESPONSIVE RULES ==================== */
@media (max-width: 1100px) {
  .companion-shell {
    grid-template-columns: 240px 1fr 260px;
  }
  .header-widgets {
    gap: 12px;
  }
  .widget-tasks-card {
    display: none;
  }
  /* header-status-controls needs ~325px on its own; .app-header's third
     column stays a fixed 320px until the 850px breakpoint switches it to
     auto, so anything between 850-1100px was already at the edge. Same fix
     as the 640px breakpoint's, just starting earlier. */
  .status-pill {
    display: none;
  }
  /* .app-grid-container's own default (repeat(8, minmax(58px, 1fr)), no
     media query, set unconditionally for the desktop window) needs at least
     8*58 + 7*7 =~ 513px no matter how narrow the viewport is -- a real,
     independent overflow source from the one .shell's min-width caused.
     Reported live from a Galaxy Z Fold 6's unfolded main screen (roughly
     780-950 CSS px, portrait and landscape): narrower phones never hit this
     because they fall through to the 640px breakpoint's repeat(4, 1fr)
     below, and real desktop is wide enough that 513px was never a problem --
     this range was the gap. minmax(0, 1fr) removes the hard per-column
     floor so the grid can actually shrink to fit instead of forcing the
     whole page wider than the screen. */
  .app-grid-container {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 850px) {
  .companion-shell {
    grid-template-columns: 220px 1fr;
  }
  .sidebar-right {
    display: none;
  }
  .app-header {
    grid-template-columns: 200px 1fr auto;
  }
}

@media (max-width: 640px) {
  .companion-shell {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  /* Stacked into one column the workspace collapses to its natural height --
     about 154px on a 780px-tall phone, which leaves an embedded app with a
     letterbox slit to render into. The native Android WebView is positioned
     from this element's rect, so its size is this rule's size. */
  .workspace-center {
    min-height: 72vh;
  }
  .app-header {
    grid-template-columns: auto 1fr auto;
    padding: 0 10px;
  }
  .widget-weather-card {
    display: none;
  }
  /* header-status-controls' two badges plus its four 32px icon buttons need
     ~325px on their own -- more than a 360px-wide phone has left once the
     brand logo and clock take their share. Measured live: the exit button
     sat off-screen and unreachable until these were dropped. */
  .status-pill {
    display: none;
  }
  .app-grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* All the breakpoints above key off width, because that was the axis every
   overflow reported so far actually broke on. A folding phone's cover
   screen in landscape is a case none of them cover: comfortably wide
   (~950 CSS px, past even the 850px breakpoint, so .sidebar-right stays put)
   but very short top-to-bottom (~380-400 CSS px) -- three full-height
   columns of desktop-style panels don't fit that little vertical room
   regardless of how much horizontal room there is. Reported live: workspace
   squeezed thin, avatar clipped, right sidebar content cut off with no way
   to reach it. Keyed on height alone, independent of and layered on top of
   the width rules above. */
@media (max-height: 500px) {
  .sidebar-right {
    display: none;
  }
  .companion-shell {
    grid-template-columns: 220px 1fr;
  }
}