/* ===== MOOSE DESIGN STUDIOS — one shell, five rooms (Brett 8/4) =====
   Shared by /design /figurines /brand /intake /signatures. Switching a
   tab changes the TOOL, never the look. Palette matches the approved
   techy pass: panels #1b2127, wells #12171c, lines #2c343d / #323b45. */

.studio-app {
  background:
    radial-gradient(ellipse at 20% -10%, rgba(232, 114, 44, 0.14), transparent 55%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    #171d21;
  background-size: auto, 28px 28px, 28px 28px, auto;
  color: #eef2f4;
  min-height: calc(100vh - 60px);
  padding: 18px 0 48px;
}
.studio-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.studio-topbar h1 { margin: 0; font-size: clamp(22px, 4vw, 34px); letter-spacing: 0.5px; }
.studio-topbar h1 em { font-style: normal; color: var(--accent, #e8722c); }
.studio-topbar p { margin: 2px 0 0; color: #d3dbdf; font-size: 14px; }
.studio-topbar .btn { white-space: nowrap; }

/* narrower rooms (figurines, intake, signatures) center their tool while
   the topbar spans the full studio width */
.studio-room { max-width: 900px; margin: 0 auto; }

/* ---- dark skin for the standard site components inside a studio room */
.studio-dark .card { background: #1b2127; border: 1px solid #2c343d; box-shadow: none; color: #e8edf1; }
.studio-dark .card h1, .studio-dark .card h2, .studio-dark .card h3 { color: #fff; }
.studio-dark label.field { color: #e8edf1; }
.studio-dark label.field small { color: #9aa5ad; }
.studio-dark input[type="text"], .studio-dark input[type="email"], .studio-dark input[type="tel"],
.studio-dark input[type="number"], .studio-dark select, .studio-dark textarea {
  background: #12171c; border: 1.5px solid #323b45; color: #e8edf1;
}
.studio-dark input::placeholder, .studio-dark textarea::placeholder { color: #7d8892; }
.studio-dark .form-note { color: #9aa5ad; }
.studio-dark .form-note a, .studio-dark p a { color: var(--accent, #e8722c); }
.studio-dark .check { color: #e8edf1; }
.studio-dark .chip { background: #232b33; border-color: #323b45; color: #dfe6ea; }
.studio-dark .upload-zone { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.22); }
.studio-dark .upload-zone.drag { border-color: var(--accent, #e8722c); background: rgba(232, 114, 44, 0.08); }
.studio-dark .price-range, .studio-dark .live-price { color: #fff; }
.studio-dark .error-msg { color: #ff9d8a; }
.studio-dark .success-box { background: #16251c; border-color: #2f6b45; color: #e8f1ea; }
.studio-dark .success-box a { color: var(--accent, #e8722c); }
.studio-dark .btn.ghost { color: #e8edf1; border-color: rgba(255, 255, 255, 0.35); }
.studio-dark .mini-steps .mstep { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.studio-dark .progress-outer { background: #12171c; }
.studio-dark h2.section-title { color: #fff; }

/* ---- the shared studio shell: Moose chat on the left, the room's tool
   (the "stage") on the right — every room, same bones (Brett 8/4:
   "each of the tabs to be this format… the big chat box the same on
   every one, pretend they're talking to the moose") ---- */
.studio-shell { display: grid; grid-template-columns: minmax(380px, 480px) 1fr; gap: 20px; align-items: stretch; }
.studio-left { display: flex; flex-direction: column; }
.studio-left > .card:first-child { flex: 1; display: flex; flex-direction: column;
  background: #1b2127; border: 1px solid #2c343d; border-radius: 14px;
  box-shadow: none; color: #e8edf1; padding: 0; overflow: hidden; }
.studio-stage { min-height: 420px; }
@media (max-width: 960px) {
  .studio-shell { grid-template-columns: 1fr; }
  .studio-stage { min-height: 0; }
}
.studio-app .chat-log { flex: 1; height: auto; min-height: 380px; max-height: none;
  background: #12171c; border-radius: 14px 14px 0 0; }
.studio-app .bubble.assistant { background: #232b33; border-color: #323b45; color: #e8edf1; }
.studio-app .chat-input-row { background: #1b2127; border-top: 1px solid #2c343d; border-radius: 0 0 14px 14px; }
.studio-app .chat-input-row input { background: #12171c; border: 1px solid #323b45; color: #e8edf1; }
.studio-app .chat-input-row input::placeholder { color: #7d8892; }
.studio-app .chat-attach { background: #232b33; border: 1px solid #323b45; }
.studio-app .chat-attach:hover { background: #2b343e; }
.studio-app .chat-attach span { color: var(--accent, #e8722c); }
/* per-room "say it like this" line under the guide chat */
.guide-hint { font-size: 13.5px; color: #9aa5ad; margin: 10px 2px 0; }
.guide-hint em { color: #c9d2d7; }
/* 📎 attach popup in the guide chat */
.guide-attach-menu { position: absolute; bottom: calc(100% + 6px); left: 10px; z-index: 30;
  background: #232b33; border: 1px solid #323b45; border-radius: 12px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.guide-attach-menu button { background: none; border: 0; color: #e8edf1; font-size: 14px;
  text-align: left; padding: 9px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.guide-attach-menu button:hover { background: #2b343e; }
#guide-attach { cursor: pointer; }
/* file hovering over a chat panel */
.studio-app .card.drag-over { outline: 2px dashed var(--accent, #e8722c); outline-offset: -6px; }

/* the empty stage: idea cards shared by rooms (design page has its own
   inline copy — identical values) */
.studio-app #stage-empty { border: 1px solid #2c343d; background: rgba(255,255,255,.02);
  border-radius: 16px; padding: 26px 22px; text-align: center; }
.studio-app #stage-empty .stage-hint { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.studio-app #stage-empty > p { color: #dde4e8; }
.studio-app .stage-insp { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 16px; text-align: left; }
.studio-app .stage-say { margin-top: 16px; font-size: 13.5px; color: #c9d2d7; }