/* Claude.ai chrome — sidebar, topbar, chat, composer */

.cl-app {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--bg-app);
}

/* Sidebar */
.cl-sidebar {
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 6px;
  transition: width var(--dur) var(--ease);
}
.cl-sb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 8px;
}
.cl-brand { display: flex; align-items: center; gap: 8px; }
.cl-brand-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cl-icon-btn {
  background: transparent; border: 0; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background var(--dur-fast);
}
.cl-icon-btn:hover { background: var(--border-soft); color: var(--text-primary); }

.cl-sb-newchat {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 2px 2px;
  border-radius: var(--r-md);
  background: transparent; border: 0;
  color: var(--text-primary);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.cl-sb-newchat:hover { background: rgba(0,0,0,0.04); }

.cl-sb-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 2px 2px 6px;
  border-radius: var(--r-md);
  color: var(--text-tertiary);
  font-size: 13px;
  cursor: pointer;
}
.cl-sb-search:hover { background: rgba(0,0,0,0.04); }
.cl-sb-search kbd {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 4px; padding: 1px 5px;
  color: var(--text-tertiary);
}

.cl-sb-nav { display: flex; flex-direction: column; padding: 4px 2px; gap: 1px; margin-bottom: 8px;}
.cl-sb-link {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none;
}
.cl-sb-link:hover { background: rgba(0,0,0,0.04); color: var(--text-primary); }

.cl-sb-section { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0 2px; }
.cl-sb-heading {
  font-size: 11px; text-transform: uppercase;
  color: var(--text-tertiary); letter-spacing: 0.06em; font-weight: 500;
  padding: 8px 10px 4px;
}
.cl-sb-list { display: flex; flex-direction: column; gap: 1px; }
.cl-sb-item {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-sb-item:hover { background: rgba(0,0,0,0.04); color: var(--text-primary); }
.cl-sb-item.active { background: rgba(0,0,0,0.06); color: var(--text-primary); }

.cl-sb-foot { padding: 8px 4px 2px; border-top: 1px solid var(--border-soft); margin-top: 8px; }
.cl-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-md); cursor: pointer; }
.cl-user:hover { background: rgba(0,0,0,0.04); }
.cl-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5B7FB0 0%, #7B5BB0 100%);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.cl-user-name { font-size: 13px; font-weight: 500; }
.cl-user-plan { font-size: 11px; color: var(--text-tertiary); }

/* Main column */
.cl-main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-app);
}

.cl-topbar {
  display: flex; align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-soft);
  min-height: 52px;
  background: var(--bg-app);
}
.cl-tb-left, .cl-tb-right { flex: 1; display: flex; align-items: center; gap: 8px; }
.cl-tb-right { justify-content: flex-end; }
.cl-tb-title {
  font-size: 13px; color: var(--text-tertiary);
  white-space: nowrap; max-width: 40%;
  overflow: hidden; text-overflow: ellipsis;
}
.cl-tb-model {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 10px; border-radius: var(--r-md);
  color: var(--text-primary); font-size: 13px; font-weight: 500;
}
.cl-tb-model:hover { background: rgba(0,0,0,0.04); }

/* Chat area */
.cl-chat {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 32px 24px 16px;
}
.cl-chat-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px;
}

.cl-msg { display: flex; gap: 12px; }
.cl-msg-user { justify-content: flex-end; }
.cl-msg-user .cl-msg-bubble {
  background: var(--bg-chat-user);
  padding: 12px 16px;
  border-radius: var(--r-xl) var(--r-xl) 4px var(--r-xl);
  max-width: 78%;
  font-size: 15px; line-height: 1.55;
  color: var(--text-primary);
}
.cl-msg-assistant { gap: 14px; }
.cl-msg-avatar { padding-top: 2px; flex-shrink: 0; }
.cl-msg-body {
  flex: 1;
  font-size: 15px; line-height: 1.65;
  color: var(--text-primary);
  font-family: var(--font-serif);
}
.cl-msg-body p { margin: 0 0 14px; }
.cl-msg-body p:last-child { margin: 0; }

.cl-cursor {
  display: inline-block;
  width: 8px; height: 16px;
  background: var(--text-primary);
  vertical-align: middle;
  margin-left: 2px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Composer */
.cl-composer-wrap {
  padding: 8px 24px 18px;
  background: var(--bg-app);
}
.cl-composer {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2xl);
  padding: 6px 6px 6px 10px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.cl-composer:focus-within {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.cl-comp-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); cursor: pointer;
}
.cl-comp-icon:hover { background: var(--bg-sidebar); color: var(--text-primary); }
.cl-comp-input {
  flex: 1; border: 0; background: transparent;
  font-size: 14.5px; padding: 8px 4px;
  color: var(--text-primary);
  font-family: inherit;
}
.cl-comp-input::placeholder { color: var(--text-tertiary); }
.cl-comp-input:focus { outline: none; }
.cl-comp-model {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  padding: 5px 10px;
  font-size: 12px; color: var(--text-secondary); cursor: pointer;
}
.cl-comp-send {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--border-medium); color: var(--bg-card);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur);
}
.cl-comp-send.active { background: var(--text-primary); }
.cl-comp-foot {
  text-align: center;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Step navigator (proto chrome) */
.proto-stepnav {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(31, 30, 27, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-pill);
  padding: 6px;
  display: flex; align-items: center; gap: 4px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
}
.proto-stepnav-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur), color var(--dur);
}
.proto-stepnav-arrow:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: white; }
.proto-stepnav-arrow:disabled { opacity: 0.3; cursor: default; }
.proto-stepnav-dots { display: flex; gap: 2px; }
.proto-stepnav-dot {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 14px; border-radius: var(--r-pill);
  color: rgba(255,255,255,0.6);
  font-family: inherit;
  transition: all var(--dur);
}
.proto-stepnav-dot:hover { color: rgba(255,255,255,0.9); }
.proto-stepnav-dot.active {
  background: rgba(255,255,255,0.12);
  color: white;
}
.proto-stepnav-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  opacity: 0.7;
}
.proto-stepnav-lbl {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Mobile frame container — used when device toggle is "mobile" */
.proto-stage.is-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2A2925;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(201, 100, 66, 0.08), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(45, 122, 78, 0.06), transparent 50%);
}
.proto-mobile-frame {
  width: 390px;
  height: 760px;
  background: var(--bg-app);
  border-radius: 50px;
  border: 12px solid #0A0908;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  position: relative;
  flex-shrink: 0;
}
/* iOS-style notch */
.proto-mobile-notch {
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px;
  background: #0A0908;
  border-radius: 18px;
  z-index: 50;
}
/* iOS status bar */
.proto-mobile-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px 0;
  font-size: 14px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  color: var(--text-primary);
  z-index: 40;
  pointer-events: none;
}
.proto-mobile-status-icons {
  display: inline-flex; align-items: center; gap: 5px;
}
.proto-mobile-status-icons svg { width: 16px; height: 11px; flex-shrink: 0; }
.proto-mobile-status-icons svg:nth-child(3) { width: 24px; }

/* Inner scroll wrapper — sits between the frame chrome (notch, status
   bar, home pill — all position:absolute) and the content. Scrolls
   when content exceeds the frame's content height. */
.proto-mobile-frame-content {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.proto-mobile-frame .cl-app {
  height: auto;
  min-height: 100%;
  overflow: visible;
  flex-direction: column;
}
.proto-mobile-frame .cl-sidebar { display: none; }
.proto-mobile-frame .cl-main { width: 100%; min-height: 100%; min-width: 0; }
.proto-mobile-frame .cl-chat { flex: 1 0 auto; overflow: visible; }
.proto-mobile-frame .cl-topbar {
  padding: 50px 16px 8px;
  min-height: 80px;
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-app);
}
/* Email screen has its own min-height: 100vh — constrain to frame */
.proto-mobile-frame .email-app {
  min-height: 100%;
  height: auto;
  padding: 50px 16px 28px;
  overflow: visible;
}
.proto-mobile-frame .cl-tb-left { flex: 0; }
.proto-mobile-frame .cl-tb-title { font-size: 12px; max-width: 50%; }
.proto-mobile-frame .cl-tb-model { font-size: 12px; padding: 5px 8px; }
.proto-mobile-frame .cl-chat { padding: 16px 12px 8px; }
.proto-mobile-frame .cl-chat-inner { gap: 16px; }
.proto-mobile-frame .cl-msg-user .cl-msg-bubble,
.proto-mobile-frame .cl-msg-body { font-size: 13.5px; }
.proto-mobile-frame .cl-composer-wrap { padding: 6px 12px 28px; }
.proto-mobile-frame .cl-composer { padding: 4px 4px 4px 8px; }
.proto-mobile-frame .cl-comp-input { font-size: 13px; }
.proto-mobile-frame .cl-comp-model { display: none; }
.proto-mobile-frame .cl-comp-foot { display: none; }
/* Home indicator */
.proto-mobile-home {
  position: absolute;
  bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px;
  background: var(--text-primary);
  border-radius: 3px;
  opacity: 0.4;
  z-index: 50;
}
/* Mobile-specific offer card sizing */
.proto-mobile-frame .dyn-offer { padding: 16px; gap: 10px; }
.proto-mobile-frame .dyn-offer-title { font-size: 21px; }
.proto-mobile-frame .dyn-offer-price-new { font-size: 30px; }
.proto-mobile-frame .pw-invite { padding: 18px; gap: 14px; }
.proto-mobile-frame .pw-invite-title { font-size: 22px; }
.proto-mobile-frame .pw-paywall-title { font-size: 26px; }
.proto-mobile-frame .pw-paywall { padding-top: 0; }
.proto-mobile-frame .pw-stat { padding: 14px 16px; }
.proto-mobile-frame .pw-stat.highlight { padding: 22px 16px; }
.proto-mobile-frame .pw-stat-value { font-size: 26px; }
.proto-mobile-frame .pw-stat.highlight .pw-stat-value { font-size: 38px; }

/* Common card style */
.cl-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 16px;
}

/* Offer banner — used across multiple flows */
.offer-banner {
  background: var(--claude-coral-tint);
  border: 1px solid var(--claude-coral-soft);
  border-radius: var(--r-lg);
  padding: 18px;
}

/* Section header */
.proto-screen-meta {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(31,30,27,0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: white;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  z-index: 99;
  pointer-events: none;
  opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────────
   Visible Desktop / Mobile preview pill — sits in the top-right of the
   stage on desktop. Hides itself on real phone viewports.
   ───────────────────────────────────────────────────────────────────── */
.proto-device-toggle {
  position: fixed;
  top: 12px; right: 16px;
  display: inline-flex;
  background: rgba(31,30,27,0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  padding: 3px;
  z-index: 99;
  gap: 0;
}
.proto-device-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.proto-device-toggle-btn:hover { color: rgba(255,255,255,0.9); }
.proto-device-toggle-btn.is-active {
  background: rgba(255,255,255,0.15);
  color: white;
}

/* ─────────────────────────────────────────────────────────────────────
   Native mobile mode — used when the prototype is being viewed on an
   actual phone. MobileFrame strips its chrome and the children render
   in normal page flow so the browser handles scroll (avoids the
   iOS-Safari 100vh / address-bar trap that clips the bottom of the
   page when height is fixed).
   ───────────────────────────────────────────────────────────────────── */
.proto-mobile-native {
  width: 100%;
  min-height: 100dvh;
  background: var(--bg-app);
  position: relative;
}
.proto-mobile-native .cl-app {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
  flex-direction: column;
}
.proto-mobile-native .cl-main { width: 100%; min-height: 100dvh; }
.proto-mobile-native .cl-chat {
  flex: 1 0 auto;
  overflow: visible;
  padding: 16px 12px 96px; /* bottom padding clears floating StepNav */
}
.proto-mobile-native .cl-sidebar { display: none; }
.proto-mobile-native .cl-topbar {
  padding: max(env(safe-area-inset-top, 12px), 12px) 16px 8px;
  min-height: 56px;
  position: sticky; top: 0; z-index: 5;
}
.proto-mobile-native .cl-tb-left { flex: 0; }
.proto-mobile-native .cl-tb-title { font-size: 12px; max-width: 50%; }
.proto-mobile-native .cl-tb-model { font-size: 12px; padding: 5px 8px; }
.proto-mobile-native .cl-chat-inner { gap: 16px; }
.proto-mobile-native .cl-msg-user .cl-msg-bubble,
.proto-mobile-native .cl-msg-body { font-size: 13.5px; }
.proto-mobile-native .cl-composer-wrap {
  padding: 6px 12px max(env(safe-area-inset-bottom, 16px), 16px);
}
.proto-mobile-native .cl-composer { padding: 4px 4px 4px 8px; }
.proto-mobile-native .cl-comp-input { font-size: 13px; }
.proto-mobile-native .cl-comp-model { display: none; }
.proto-mobile-native .cl-comp-foot { display: none; }
.proto-mobile-native .dyn-offer { padding: 16px; gap: 10px; }
.proto-mobile-native .dyn-offer-title { font-size: 21px; }
.proto-mobile-native .dyn-offer-price-new { font-size: 30px; }
.proto-mobile-native .pw-invite { padding: 18px; gap: 14px; }
.proto-mobile-native .pw-invite-title { font-size: 22px; }
.proto-mobile-native .pw-paywall-title { font-size: 26px; }
.proto-mobile-native .pw-paywall { padding-top: 0; }
.proto-mobile-native .pw-stat { padding: 14px 16px; }
.proto-mobile-native .pw-stat.highlight { padding: 22px 16px; }
.proto-mobile-native .pw-stat-value { font-size: 26px; }
.proto-mobile-native .pw-stat.highlight .pw-stat-value { font-size: 38px; }

/* ─────────────────────────────────────────────────────────────────────
   Phone viewport — collapses prototype shell controls and switches the
   stage from a fixed 100vh container to a natural-flow container so
   the document scrolls (avoids iOS Safari's URL-bar-clipping trap).
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  html, body { height: auto; overflow-y: auto; }
  .proto-screen-meta { display: none; }
  .proto-device-toggle { display: none; }
  .twk-panel { display: none !important; }
  .proto-stage,
  .proto-stage.is-mobile {
    background: var(--bg-app);
    padding: 0;
    height: auto;
    min-height: 100dvh;
  }
  .proto-stage.is-mobile {
    align-items: stretch;
    justify-content: stretch;
  }
  .proto-stepnav {
    bottom: max(env(safe-area-inset-bottom, 12px), 12px);
  }
  /* When desktop-only layouts (admin engine, email) are forced onto
     a phone, allow horizontal scroll within the screen so it can be
     panned rather than wrapping into a broken layout. */
  .proto-stage:not(.is-mobile) > * {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}