/* ==========================================================================
   Agentic OS · Escritório: casca da página (trilho de módulos, Jarvis) em volta
   do escritório do Habblaud, que roda no iframe (/escritorio/).
   ========================================================================== */
html, body { height: 100%; }
body { margin: 0; background: var(--deep); overflow: hidden; }
[hidden] { display: none !important; }

.app { height: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); background: var(--deep); }

.rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 12px; border-right: 1px solid var(--border); background: oklch(13% .035 255 / .9); position: relative; z-index: 5; }
.rail__logo { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 14px; color: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); }
.rail button { position: relative; width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--muted-foreground); display: grid; place-items: center; cursor: pointer; padding: 0; }
.rail button svg { width: 19px; height: 19px; }
.rail button:hover { color: var(--foreground); background: oklch(26% .06 245 / .5); }
.rail button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.rail button[aria-current="page"] { color: var(--cyan); border-color: oklch(80% .13 205 / .45); background: oklch(80% .13 205 / .08); box-shadow: var(--glow-cyan-sm); }
.rail button[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.rail button[aria-pressed="true"] { color: var(--cyan); }
.rail [data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 52px; white-space: nowrap; padding: 5px 10px; border-radius: var(--radius-sm); background: var(--popover); border: 1px solid var(--border-strong); color: var(--foreground); font: 600 12px var(--font-sans); z-index: 80; }
.rail .spacer { flex: 1; }

/* Jarvis no pé do trilho: o orbe muda de estado (ouvindo, falando, precisa de você). */
.rail .jarvis-dot { width: 46px; height: 46px; margin-top: 6px; border-radius: 50%; border-color: var(--border); }
.rail .jarvis-dot canvas { width: 44px; height: 44px; }
.rail .jarvis-dot[data-state="speaking"] { border-color: oklch(65% .19 255 / .7); box-shadow: var(--glow-electric); }
.rail .jarvis-dot[data-state="attention"] { border-color: oklch(75% .16 55 / .7); box-shadow: 0 0 16px oklch(75% .16 55 / .45); }

.stage { position: relative; min-width: 0; min-height: 0; }
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--deep); }

/* Legenda do que o Jarvis está falando, saindo do orbe. */
.jarvis-say { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); z-index: 30; width: max-content; max-width: min(560px, calc(100% - 24px)); display: grid; gap: 3px; padding: 10px 14px; border-radius: var(--radius-lg); border: 1px solid oklch(65% .19 255 / .45); background: oklch(18% .05 252 / .9); backdrop-filter: blur(14px); box-shadow: var(--glow-electric), var(--shadow-panel); color: var(--foreground); font: 500 13px/1.45 var(--font-sans); pointer-events: none; animation: say-in .25s var(--ease-hud, ease-out); }
.jarvis-say .hud-label { color: var(--electric); font-size: 10px; }
@keyframes say-in { from { opacity: 0; transform: translate(-50%, -6px); } }

.office-fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; padding: 24px; color: var(--muted-foreground); font: 14px/1.6 var(--font-sans); }
.office-fallback b { color: var(--foreground); font: 600 18px var(--font-display); }
.office-fallback code { font-family: var(--font-mono); color: var(--cyan); }

@media (max-width: 640px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 56px; }
  .rail { grid-row: 2; flex-direction: row; justify-content: space-around; padding: 6px 4px; gap: 2px; border-right: 0; border-top: 1px solid var(--border); overflow-x: auto; }
  .rail__logo, .rail .spacer, .rail [data-tip="Content Creator"], .rail [data-tip="Second Brain"], .rail [data-tip="Cofre"], .rail [data-tip="Skills"] { display: none; }
  .rail button { width: 40px; height: 40px; flex: none; }
  .rail .jarvis-dot { width: 40px; height: 40px; margin: 0; }
  .rail .jarvis-dot canvas { width: 38px; height: 38px; }
  .rail button[aria-current="page"]::before { left: 10px; right: 10px; top: auto; bottom: -7px; width: auto; height: 2px; }
  .rail [data-tip]:hover::after { display: none; }
  .stage { grid-row: 1; }
  .jarvis-say { top: auto; bottom: 64px; }
}