:root {
  --bg-desk: #F6F5F0;
  --bg-card: #FFFFFF;
  --bg-subtle: #EEEDE6;
  --ink-primary: #14171F;
  --ink-secondary: #4E5564;
  --ink-muted: #7B8292;
  --border-hairline: #DEDCD3;
  --border-strong: #C5C2B6;
  --sms-green: #34C759;
  --sms-green-dark: #249A43;
  --sms-incoming-bg: #E9E9EB;
  --royal-blue: #1D4ED8;
  --royal-blue-soft: #EFF4FF;
  --amber-accent: #D97706;
  --danger: #DC2626;
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: var(--bg-desk);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* App Shell */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Header */
.studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-hairline);
  gap: 16px;
  flex-shrink: 0;
  z-index: 20;
}

.brand-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ink-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bubble-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.bubble-dot.green {
  background: var(--sms-green);
  transform: translate(-3px, -2px);
}

.bubble-dot.ink {
  background: #FFFFFF;
  transform: translate(3px, 3px);
}

.brand-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.brand-subtitle {
  font-size: 11.5px;
  color: var(--ink-secondary);
}

/* Center Undo/Redo Toolbar */
.history-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-desk);
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  border: none;
  background: transparent;
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--ink-primary);
}

.tool-btn:hover:not(:disabled) {
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.tool-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.revision-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-card);
  font-size: 12px;
  cursor: pointer;
}

.revision-pill:hover {
  border-color: var(--royal-blue);
}

.rev-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sms-green);
}

#rev-version-label {
  font-family: var(--font-mono);
  font-weight: 600;
}

.rev-meta {
  color: var(--ink-secondary);
}

/* Right Collaborator Presence Cluster */
.collab-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-presence-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.presence-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  background: var(--bg-desk);
  border: 1.5px solid var(--border-hairline);
  font-size: 12px;
  font-weight: 500;
  transition: transform 0.15s ease;
}

.presence-chip.active-typing {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
}

.avatar-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--royal-blue);
  flex-shrink: 0;
}

.ghost-chip {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-secondary);
  cursor: pointer;
}

.ghost-chip:hover,
.ghost-chip.active {
  border-style: solid;
  border-color: var(--sms-green-dark);
  color: var(--sms-green-dark);
  background: #ECFDF3;
}

.active-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
}

.active-profile-btn:hover {
  border-color: var(--border-strong);
}

.profile-info-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.profile-info-stack strong {
  font-size: 12.5px;
}

.profile-info-stack small {
  font-size: 10.5px;
  color: var(--ink-secondary);
}

/* 3-Column Studio Body */
.studio-body {
  display: grid;
  grid-template-columns: 290px 1fr 395px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left Rail */
.left-rail {
  background: var(--bg-card);
  border-right: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rail-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px;
  gap: 3px;
  background: var(--bg-desk);
  border-bottom: 1px solid var(--border-hairline);
}

.domain-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: #EFF4FF;
  color: var(--royal-blue);
  vertical-align: middle;
  margin-left: 4px;
}

.rail-tab {
  padding: 6px 8px;
  border-radius: 7px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
}

.rail-tab.active {
  background: var(--bg-card);
  color: var(--ink-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.rail-panel {
  display: none;
  flex-direction: column;
  padding: 14px;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
}

.rail-panel.active {
  display: flex;
}

.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-header-row h2 {
  font-size: 14px;
  font-weight: 600;
}

.rail-helper {
  font-size: 12px;
  color: var(--ink-secondary);
}

.campaign-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.campaign-filter-bar select {
  flex: 1;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-desk);
}

.survey-list,
.campaign-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.survey-nav-item {
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-desk);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.survey-nav-item:hover {
  border-color: var(--border-strong);
}

.survey-nav-item.active {
  background: var(--royal-blue-soft);
  border-color: var(--royal-blue);
}

.survey-nav-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}

.survey-nav-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-secondary);
}

.stage-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--bg-subtle);
  color: var(--ink-secondary);
}

.stage-badge.team_review {
  background: #FEF3C7;
  color: #92400E;
}

.stage-badge.approved,
.stage-badge.exported_numinar {
  background: #DCFCE7;
  color: #166534;
}

/* Campaign Cards */
.campaign-card {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-desk);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campaign-card h3 {
  font-size: 13.5px;
  font-weight: 600;
}

.campaign-sub {
  font-size: 11.5px;
  color: var(--ink-secondary);
}

.progress-bar-track {
  height: 6px;
  border-radius: 99px;
  background: var(--border-hairline);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--sms-green);
}

.campaign-stats-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--ink-secondary);
}

/* MCP Hub Panel */
.status-tag.online {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #DCFCE7;
  color: #166534;
  font-weight: 600;
}

.mcp-command-box {
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--ink-primary);
  color: #F8FAFC;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.mcp-cmd-label {
  font-size: 10px;
  color: #94A3B8;
  margin-bottom: 3px;
}

.mcp-playground {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
}

.mcp-playground select,
.mcp-playground textarea {
  padding: 7px 8px;
  border-radius: 7px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-desk);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.mcp-output {
  padding: 8px;
  border-radius: 7px;
  background: #0F172A;
  color: #E2E8F0;
  font-family: var(--font-mono);
  font-size: 11px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}

/* Center Editor Canvas */
.editor-canvas {
  padding: 18px 22px 48px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.survey-top-card {
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.survey-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.title-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.survey-title-input {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  border: 1px solid transparent;
  padding: 2px 6px;
  margin-left: -6px;
  border-radius: 6px;
  background: transparent;
  width: 100%;
}

.survey-title-input:focus {
  outline: none;
  border-color: var(--royal-blue);
  background: var(--bg-desk);
}

.survey-meta-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--bg-desk);
  border: 1px solid var(--border-hairline);
  font-size: 12px;
  color: var(--ink-secondary);
}

.meta-pill select,
.meta-pill input {
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--ink-primary);
  outline: none;
}

.meta-pill input {
  width: 125px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.export-master-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 9px;
  border: none;
  background: var(--ink-primary);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.export-master-btn:hover {
  background: #252B39;
}

.survey-desc-input {
  width: 100%;
  border: 1px solid transparent;
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: 6px;
  color: var(--ink-secondary);
  font-size: 13px;
  background: transparent;
}

.survey-desc-input:focus {
  outline: none;
  border-color: var(--border-strong);
  background: var(--bg-desk);
}

/* AI Pollster Co-Pilot Bar */
.ai-studio-bar {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
  border: 1px solid #C7D7FE;
  border-radius: 12px;
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ai-bar-header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ai-badge {
  background: var(--royal-blue);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

.ai-bar-hint {
  font-size: 12px;
  color: var(--ink-secondary);
}

.ai-controls-row {
  display: flex;
  gap: 8px;
}

.ai-prompt-input {
  flex: 1;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: #FFFFFF;
}

.ai-prompt-input:focus {
  outline: none;
  border-color: var(--royal-blue);
}

.ai-select {
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: #FFFFFF;
  font-size: 12.5px;
}

.ai-btn {
  padding: 8px 13px;
  border-radius: 8px;
  border: none;
  background: var(--royal-blue);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}

.ai-btn:hover {
  background: #1E40AF;
}

.ai-btn.secondary {
  background: #E0E7FF;
  color: #1E3A8A;
}

.ai-btn.secondary:hover {
  background: #C7D2FE;
}

.ai-preset-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-secondary);
}

.spark-chip {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #C7D7FE;
  background: #FFFFFF;
  color: #1E3A8A;
  font-size: 11.5px;
  cursor: pointer;
}

.spark-chip:hover {
  background: #EFF4FF;
}

/* X Post Drop-In Studio Zone */
.x-post-drop-zone {
  background: #F8FAFC;
  border: 1px dashed #94A3B8;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.x-post-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.x-logo-pill {
  background: #0F172A;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 11.5px;
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
}

.x-post-input {
  flex: 1;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: #FFFFFF;
  font-size: 12.5px;
}

.x-post-input:focus {
  outline: none;
  border-color: #0F172A;
}

.x-action-btn {
  padding: 7px 11px;
  border-radius: 7px;
  border: 1px solid #0F172A;
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.x-action-btn:hover:not(:disabled) {
  background: #F1F5F9;
}

.x-action-btn.primary {
  background: #0F172A;
  color: #FFFFFF;
}

.x-action-btn.primary:hover:not(:disabled) {
  background: #1E293B;
}

.x-post-preview-card {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-left: 3.5px solid #0F172A;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.x-post-preview-card[hidden] {
  display: none;
}

.form-row input[type="email"],
.form-row input[type="password"] {
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  width: 100%;
}

/* Deck Toolbar */
.deck-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.deck-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.deck-sub {
  font-size: 12px;
  color: var(--ink-secondary);
}

/* Question Cards */
.questions-deck {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.question-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-hairline);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.question-card.active-card {
  border-color: var(--royal-blue);
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.07);
}

.question-card.dragging {
  opacity: 0.55;
  border-style: dashed;
}

.q-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.q-left-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drag-handle {
  cursor: grab;
  color: var(--ink-muted);
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 15px;
  user-select: none;
}

.drag-handle:hover {
  background: var(--bg-desk);
  color: var(--ink-primary);
}

.q-step-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--ink-primary);
  color: #FFFFFF;
}

.tag-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-desk);
  border: 1px solid var(--border-hairline);
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 11.5px;
}

.tag-input-wrap span {
  color: var(--ink-secondary);
  font-weight: 500;
}

.q-tag-input {
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: #047857;
  width: 195px;
  outline: none;
}

.q-collaborator-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  color: #FFFFFF;
}

.q-right-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.icon-btn {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-desk);
  font-size: 12px;
  cursor: pointer;
}

.icon-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.icon-btn.ai-mini {
  background: #EFF4FF;
  border-color: #BFDBFE;
  color: var(--royal-blue);
  font-weight: 600;
}

.icon-btn.danger:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: var(--danger);
}

/* Question Prompt Area */
.q-prompt-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.q-prompt-textarea {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-desk);
  font-size: 14.5px;
  font-weight: 500;
  resize: vertical;
  min-height: 58px;
}

.q-prompt-textarea:focus {
  outline: none;
  border-color: var(--royal-blue);
  background: #FFFFFF;
}

.q-char-counter {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}

/* Options List inside Question Card */
.q-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.q-option-row {
  display: grid;
  grid-template-columns: 30px 1fr 170px 28px;
  align-items: center;
  gap: 8px;
}

.opt-letter-pill {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #E8F8EE;
  border: 1px solid #A7F3D0;
  color: #065F46;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opt-label-input,
.opt-tagval-input {
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid var(--border-hairline);
  background: #FFFFFF;
  font-size: 13px;
}

.opt-tagval-input {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-secondary);
  background: var(--bg-desk);
}

.opt-label-input:focus,
.opt-tagval-input:focus {
  outline: none;
  border-color: var(--royal-blue);
  background: #FFFFFF;
}

.q-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px dashed var(--border-hairline);
}

/* Outro Card */
.outro-card {
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 12px 16px;
}

.outro-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: 5px;
}

.outro-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-desk);
}

/* Right Stage: iPhone SMS Preview & Team Notes */
.right-stage {
  background: var(--bg-card);
  border-left: 1px solid var(--border-hairline);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.stage-Mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stage-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.handset-actions {
  display: flex;
  gap: 4px;
  background: var(--bg-desk);
  padding: 3px;
  border-radius: 8px;
}

.mini-pill-btn {
  padding: 3px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
}

.mini-pill-btn.active {
  background: var(--bg-card);
  color: var(--ink-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Authentic iOS Handset Frame matching the user's screenshot */
.iphone-frame {
  width: 342px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 10px solid #1C1E24;
  border-radius: 40px;
  box-shadow: 0 14px 32px rgba(20, 23, 31, 0.14);
  display: flex;
  flex-direction: column;
  height: 555px;
  overflow: hidden;
  position: relative;
}

.ios-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 18px 4px;
  font-size: 12px;
  font-weight: 700;
  color: #000000;
  background: #F9F9FB;
}

.ios-left-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ios-back-app {
  font-size: 10px;
  font-weight: 500;
  color: #000000;
}

.ios-right-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

.ios-battery {
  background: #1C1E24;
  color: #FFFFFF;
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 4px;
}

.ios-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px 8px;
  background: #F9F9FB;
  border-bottom: 1px solid #E5E5EA;
}

.ios-back-chevron {
  border: none;
  background: transparent;
  color: #007AFF;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.ios-contact-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ios-contact-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #9EA3B0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ios-contact-phone {
  font-size: 11px;
  font-weight: 500;
  color: #1C1C1E;
}

.ios-nav-spacer {
  width: 20px;
}

/* iOS Message Thread */
.ios-thread {
  flex: 1;
  background: #FFFFFF;
  padding: 10px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ios-timestamp {
  text-align: center;
  font-size: 10.5px;
  color: #8E8E93;
  line-height: 1.3;
  margin-bottom: 4px;
}

.ios-bubbles-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sms-bubble {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
  cursor: pointer;
}

.sms-bubble.incoming {
  align-self: flex-start;
  background: var(--sms-incoming-bg);
  color: #000000;
  border-bottom-left-radius: 5px;
}

.sms-bubble.incoming.highlighted {
  outline: 2px solid var(--royal-blue);
}

.sms-bubble.outgoing {
  align-self: flex-end;
  background: var(--sms-green);
  color: #FFFFFF;
  border-bottom-right-radius: 5px;
  font-weight: 500;
  padding: 7px 13px;
}

/* Quick Reply Tap Chips inside Handset */
.ios-quick-replies {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: #F9F9FB;
  border-top: 1px solid #ECECEF;
  overflow-x: auto;
}

.quick-letter-btn {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #34C759;
  background: #F0FDF4;
  color: #15803D;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.quick-letter-btn:hover {
  background: var(--sms-green);
  color: #FFFFFF;
}

.ios-input-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 8px;
  background: #FFFFFF;
}

.ios-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #E5E5EA;
  color: #636366;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.ios-input-pill {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid #D1D1D6;
  border-radius: 999px;
  padding: 3px 4px 3px 11px;
}

.ios-input-pill input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  background: transparent;
}

.ios-send-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--sms-green);
  color: #FFFFFF;
  font-weight: 700;
  cursor: pointer;
}

.ios-home-bar {
  width: 110px;
  height: 4px;
  border-radius: 99px;
  background: #1C1C1E;
  margin: 2px auto 6px;
}

/* Collaborative Team Notes, Question Notes & Discussion Room */
.q-note-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.q-note-bar span {
  font-weight: 600;
  color: #92400E;
  white-space: nowrap;
}

.q-note-input {
  flex: 1;
  border: none;
  background: transparent;
  color: #78350F;
  font-size: 12px;
  outline: none;
}

.q-comments-drawer {
  background: var(--bg-desk);
  border: 1px solid var(--border-hairline);
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.q-comments-drawer[hidden] {
  display: none;
}

.collab-notes-panel {
  background: var(--bg-desk);
  border: 1px solid var(--border-hairline);
  border-radius: 11px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collab-dock-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--bg-subtle);
  padding: 3px;
  border-radius: 8px;
}

.dock-tab {
  border: none;
  background: transparent;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.dock-tab.active {
  background: var(--bg-card);
  color: var(--ink-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.dock-subpanel {
  display: none;
  flex-direction: column;
  gap: 7px;
}

.dock-subpanel.active {
  display: flex;
}

.comment-filter-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 6px;
}

.comment-filter-row select {
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-card);
  font-size: 11.5px;
}

.count-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--bg-desk);
  border: 1px solid var(--border-hairline);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 175px;
  overflow-y: auto;
}

.comment-item {
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comment-item.kind-note {
  background: #FFFBEB;
  border-color: #FDE68A;
}

.comment-item.resolved {
  opacity: 0.6;
}

.comment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.comment-author {
  font-weight: 600;
  font-size: 11.5px;
}

.comment-actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-secondary);
}

.link-btn {
  border: none;
  background: transparent;
  color: var(--royal-blue);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.comment-replies {
  padding-left: 10px;
  border-left: 2px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 3px;
}

.comment-form {
  display: flex;
  gap: 6px;
}

.comment-form input {
  flex: 1;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-card);
  font-size: 12px;
}

/* Discussion Room Modal */
.modal-card.extra-wide {
  max-width: 920px;
}

.discussion-room-layout {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 16px;
  min-height: 440px;
  max-height: 68vh;
}

.discussion-threads-sidebar {
  border-right: 1px solid var(--border-hairline);
  padding-right: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.discussion-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.new-discussion-form {
  background: var(--bg-desk);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.new-discussion-form[hidden] {
  display: none;
}

.new-discussion-form input,
.new-discussion-form select,
.new-discussion-form textarea {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-card);
  font-size: 12px;
  width: 100%;
}

.modal-threads-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.thread-nav-card {
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-desk);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.thread-nav-card.active {
  background: var(--royal-blue-soft);
  border-color: var(--royal-blue);
}

.discussion-thread-Stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.active-thread-header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.active-thread-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.disc-msg-card {
  background: var(--bg-desk);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.discussion-reply-form {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-hairline);
}

.discussion-reply-form input {
  flex: 1;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
}

/* Shared Buttons */
.primary-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--royal-blue);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}

.primary-btn:hover {
  background: #1E40AF;
}

.secondary-btn {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--ink-primary);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}

.secondary-btn:hover {
  background: var(--bg-desk);
}

.mini-action-btn {
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.mini-action-btn:hover {
  background: var(--bg-desk);
}

.full-width {
  width: 100%;
}

/* Modals */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 31, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-card {
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid var(--border-hairline);
  width: 100%;
  max-width: 580px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.modal-card.wide {
  max-width: 780px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-header h2 {
  font-family: var(--font-serif);
  font-size: 20px;
}

.modal-sub {
  font-size: 12.5px;
  color: var(--ink-secondary);
}

.close-btn {
  border: none;
  background: var(--bg-desk);
  width: 28px;
  height: 28px;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 700;
}

/* Export Grid */
.export-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.export-option-card {
  border: 1px solid var(--border-hairline);
  background: var(--bg-desk);
  border-radius: 11px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.export-option-card.featured {
  border-color: var(--royal-blue);
  background: #F8FAFF;
}

.export-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.export-format-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--ink-primary);
  color: #FFFFFF;
}

.export-format-badge.docx {
  background: #1D4ED8;
}

.export-format-badge.csv {
  background: #047857;
}

.numinar-ready-pill {
  font-size: 10.5px;
  font-weight: 600;
  color: #065F46;
  background: #D1FAE5;
  padding: 2px 7px;
  border-radius: 99px;
}

.export-option-card h3 {
  font-size: 14px;
}

.export-option-card p {
  font-size: 12px;
  color: var(--ink-secondary);
  flex: 1;
}

.btn-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.export-preview-box {
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  overflow: hidden;
}

.preview-header-bar {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px;
  background: var(--bg-subtle);
  font-size: 11.5px;
  font-weight: 600;
}

.compliance-ok {
  color: #047857;
}

#export-live-preview-pre {
  padding: 12px;
  background: #14171F;
  color: #E2E8F0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  max-height: 190px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Profile Modal */
.profile-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.profile-choice-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border-hairline);
  background: var(--bg-desk);
  cursor: pointer;
}

.profile-choice-card.selected {
  border-color: var(--royal-blue);
  background: var(--royal-blue-soft);
}

.modal-divider {
  border: none;
  border-top: 1px solid var(--border-hairline);
}

.create-profile-form h3 {
  font-size: 13.5px;
  margin-bottom: 8px;
}

.form-row {
  display: flex;
  gap: 8px;
}

.form-row input[type="text"] {
  flex: 1;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-hairline);
}

/* Revisions Timeline */
.revisions-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.revision-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-desk);
}

.revision-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
}

.toast {
  background: var(--ink-primary);
  color: #FFFFFF;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

@media (max-width: 1180px) {
  .studio-body {
    grid-template-columns: 240px 1fr 355px;
  }
}