/* 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. Thumb uses --fp-border so it
 * flips to warm taupe in light mode without a separate override. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fp-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--fp-border-loud); }

/* 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; }

/* =============================================================================
 * EMAIL MODULE v2 — scoped helpers for the redesigned inbox (.email-v2 root).
 * Tokens come from tokens.css (--fp-*); these are just animations + density
 * vars + a couple of utilities the email components reference by class.
 * Class names are em-* so they can't collide with anything global.
 * ============================================================================= */
@keyframes em-fade-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes em-slide-up    { from { transform: translateY(8px);  opacity: 0; } to { transform: translateY(0);  opacity: 1; } }
@keyframes em-slide-right { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0);  opacity: 1; } }
.em-fade-in    { animation: em-fade-in    180ms var(--fp-ease-out) both; }
.em-slide-up   { animation: em-slide-up   220ms var(--fp-ease-out) both; }
.em-slide-right{ animation: em-slide-right 240ms var(--fp-ease-out) both; }

.em-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Density vars + a DEFINITE height so the module fits exactly under the 52px
 * NavTopBar. Without this, height:100% against the overflow:auto .app-view
 * doesn't resolve, the module grows past the viewport, and .app-view shows a
 * stray vertical scrollbar. A fixed calc means only the thread list scrolls. */
.email-v2 {
  height: calc(100vh - var(--fp-topbar-h, 52px));
  min-height: 0; overflow: hidden;
  --em-row-pad-y: 12px; --em-row-pad-x: 14px; --em-avatar: 32px; --em-list-fs: 13px;
}
.email-v2[data-density="compact"]     { --em-row-pad-y: 8px;  --em-row-pad-x: 12px; --em-avatar: 28px; --em-list-fs: 12px; }
.email-v2[data-density="comfortable"] { --em-row-pad-y: 16px; --em-row-pad-x: 16px; --em-avatar: 36px; --em-list-fs: 13px; }

/* HTML-email iframe — fills its bubble, no border (the bubble provides it). */
.em-html-frame { width: 100%; border: 0; display: block; background: #fff; border-radius: 8px; }

/* 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.
 * Matches the Design System v2 warm-paper palette so it stays in sync
 * with the canonical body.light-mode block in tokens.css. */
.app-shell.light {
  --fp-bg-0: #EEEAE2;
  --fp-bg-1: #F8F4ED;
  --fp-bg-2: #F2EEE5;
  --fp-bg-3: #E3DED1;
  --fp-bg-4: #D2CCBB;
  --fp-bg-modal: #FBF8F1;
  --fp-border: #D8D2C2;
  --fp-border-soft: #E6E1D2;
  --fp-border-loud: #A39B85;
  --fp-fg-1: #1B1B14;
  --fp-fg-2: #4A4839;
  --fp-fg-3: #6E6A57;
  --fp-fg-4: #9B967F;
  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;
  pointer-events: none; /* decorative sweep — must not swallow clicks on live controls underneath */
  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); } }