/* App-level styles for Flyplab × Railway reskin
 * Sourced from claude.ai/design handoff (flyplab-reskin/project/app.css), with
 * .app-shell adapted for production viewport sizing (was 1440x900 design canvas).
 */
@import url('tokens.css');

* { box-sizing: border-box; }
html, body, #root { margin: 0; padding: 0; }
html, body { min-height: 100%; }

body {
  background: var(--fp-bg-0);
  color: var(--fp-fg-1);
  font-family: var(--fp-font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv11';
  overscroll-behavior: none;
}

/* Compact scrollbars — Railway style */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #232936; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #313847; }

/* Dotted grid utility for canvas-style backgrounds */
.fp-dot-grid {
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
}

/* Reset button defaults */
button { font-family: inherit; }

/* Mono numbers everywhere we tag them */
.fp-mono-num { font-family: var(--fp-font-mono); font-feature-settings: 'tnum'; }

/* Selection */
::selection { background: rgba(43, 180, 93, 0.3); color: #fff; }

/* App shell — production fills the viewport (design canvas was fixed 1440x900) */
.app-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--fp-bg-0);
  color: var(--fp-fg-1);
  font-family: var(--fp-font-sans);
  font-size: 13px;
  position: relative;
}

/* Light theme variant (for screens migrated to .app-shell.light) */
.app-shell.light {
  --fp-bg-0: #FAFBFC;
  --fp-bg-1: #FFFFFF;
  --fp-bg-2: #F4F6F9;
  --fp-bg-3: #ECEFF4;
  --fp-bg-4: #DEE3EC;
  --fp-bg-modal: #FFFFFF;
  --fp-border: #E3E7EE;
  --fp-border-soft: #EDF0F5;
  --fp-border-loud: #C8D0DD;
  --fp-fg-1: #0B0D12;
  --fp-fg-2: #3F4756;
  --fp-fg-3: #6B7385;
  --fp-fg-4: #9CA3B0;
  background: var(--fp-bg-0);
  color: var(--fp-fg-1);
}

/* Animations */
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43,180,93,0.5), 0 0 16px rgba(43,180,93,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(43,180,93,0), 0 0 16px rgba(43,180,93,0.4); }
}
.fp-pulse { animation: pulse-green 2s ease-in-out infinite; }

@keyframes shimmer-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.fp-shimmer {
  position: relative; overflow: hidden;
}
.fp-shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(43,180,93,0.15), transparent);
  animation: shimmer-bar 2.5s ease-in-out infinite;
}

/* Hairline divider */
.fp-hr { height: 1px; background: var(--fp-border); border: 0; }

/* ---------------------------------------------------------------------------
 * NAV V2 — flat sidebar + push-style topbar drawers (2026-05-05)
 * Overrides the base .app-shell to lock the viewport so the top bar stays
 * fixed at the top of the app-main column and only the .app-view body
 * scrolls. Drawers are flex-sibling children that push .app-main left.
 * ------------------------------------------------------------------------- */
.app-shell.v2 {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
.app-shell.v2 .app-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: flex-basis 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.app-shell.v2 .app-main > .app-view {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

/* Marquee rows for AgentDrawer suggestion chips */
@keyframes fp-marquee     { 0% { transform: translateX(0); }    100% { transform: translateX(-50%); } }
@keyframes fp-marquee-rev { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }