/* === Option 2: Split Panes — Visual Design === */

/* --- Google Fonts (Polished only) --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Source+Serif+4:wght@400;600&display=swap');

/* ============================
   CLEAN VARIANT
   Warm Cowork palette, system fonts, solid fills, no effects
   ============================ */

#frame-opt2.clean { background: #faf8f5; border-color: #e8e2da; }
#frame-opt2.clean .browser-chrome { background: #f0ebe5; border-bottom-color: #e0d9d0; }
#frame-opt2.clean .browser-dots span:nth-child(1) { background: #ff5f57; }
#frame-opt2.clean .browser-dots span:nth-child(2) { background: #febc2e; }
#frame-opt2.clean .browser-dots span:nth-child(3) { background: #28c840; }
#frame-opt2.clean .browser-url { background: #fff; border-color: #e0d9d0; color: #6b5b4f; }
#frame-opt2.clean .browser-controls { color: #6b5b4f; }
#frame-opt2.clean .browser-content { background: #faf8f5; }

#frame-opt2.clean .cw-topbar { background: #f5f0eb; border-bottom-color: #e0d9d0; }
#frame-opt2.clean .cw-traffic-lights span { background: #d4c8bc; }
#frame-opt2.clean .cw-traffic-lights span:nth-child(1) { background: #ff5f57; }
#frame-opt2.clean .cw-traffic-lights span:nth-child(2) { background: #febc2e; }
#frame-opt2.clean .cw-traffic-lights span:nth-child(3) { background: #28c840; }
#frame-opt2.clean .cw-nav-arrows { color: #6b5b4f; }
#frame-opt2.clean .cw-mode-tab { color: #6b5b4f; border-bottom-color: transparent; }
#frame-opt2.clean .cw-mode-tab.cw-active { color: #1a1a1a; font-weight: 600; border-bottom-color: #d4734a; }

#frame-opt2.clean .cw-layout-btn { background: #fff; border-color: #e0d9d0; color: #6b5b4f; }
#frame-opt2.clean .cw-layout-btn.cw-layout-active { background: #f5f0eb; border-color: #d4734a; color: #d4734a; }

#frame-opt2.clean .cw-icon-rail { background: #f5f0eb; border-right-color: #e0d9d0; }
#frame-opt2.clean .cw-rail-icon { color: #6b5b4f; }
#frame-opt2.clean .cw-avatar { background: #f5f0eb; border-color: #d4c8bc; color: #6b5b4f; }

#frame-opt2.clean .cw-pane { border-color: #e0d9d0; background: #fff; }
#frame-opt2.clean .cw-pane-active { border-color: #d4734a; }
#frame-opt2.clean .cw-pane-header { background: #fff; border-bottom-color: #e8e2da; color: #1a1a1a; }
#frame-opt2.clean .cw-pane-actions { color: #6b5b4f; }
#frame-opt2.clean .cw-pane-body { background: #faf8f5; }

#frame-opt2.clean .cw-status-running { background: #d4734a; border-color: #c0603a; }
#frame-opt2.clean .cw-status-idle { background: #e8e2da; border-color: #d4c8bc; }

#frame-opt2.clean .cw-message.cw-user { background: #2d2d2d; color: #fff; }
#frame-opt2.clean .cw-message.cw-claude { color: #1a1a1a; }
#frame-opt2.clean .cw-collapsed-action { color: #6b5b4f; }
#frame-opt2.clean .cw-inline-list { color: #1a1a1a; }

#frame-opt2.clean .cw-mini-input { border-color: #e0d9d0; background: #fff; }
#frame-opt2.clean .cw-model-badge { color: #6b5b4f; border-color: #e0d9d0; }

#frame-opt2.clean .cw-pane-preview { border-left-color: #e0d9d0; }
#frame-opt2.clean .cw-preview-chrome { border-bottom-color: #e8e2da; color: #6b5b4f; }
#frame-opt2.clean .cw-preview-title { color: #1a1a1a; }
#frame-opt2.clean .cw-preview-stats { color: #6b5b4f; }
#frame-opt2.clean .cw-preview-bar { background: #e8e2da; }

#frame-opt2.clean .cw-pane-divider { background: #f0ebe5; }
#frame-opt2.clean .cw-divider-grip { color: #d4c8bc; }
#frame-opt2.clean .cw-pane-divider:hover { background: #e0d9d0; }

/* ============================
   POLISHED VARIANT
   Builds on Clean — Google Fonts, subtle gradients, soft shadows,
   entrance animations, hover effects. Light base throughout.
   ============================ */

#frame-opt2.polished { background: #faf8f5; border-color: #e8e2da; }
#frame-opt2.polished .browser-chrome { background: linear-gradient(180deg, #f5f0eb, #ede7df); border-bottom-color: #e0d9d0; }
#frame-opt2.polished .browser-dots span:nth-child(1) { background: #ff5f57; }
#frame-opt2.polished .browser-dots span:nth-child(2) { background: #febc2e; }
#frame-opt2.polished .browser-dots span:nth-child(3) { background: #28c840; }
#frame-opt2.polished .browser-url { background: #fff; border-color: #e0d9d0; color: #6b5b4f; }
#frame-opt2.polished .browser-controls { color: #6b5b4f; }
#frame-opt2.polished .browser-content { background: #faf8f5; }

#frame-opt2.polished .cowork-app { font-family: 'DM Sans', system-ui, sans-serif; }
#frame-opt2.polished .cw-preview-title { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; }

#frame-opt2.polished .cw-topbar { background: linear-gradient(180deg, #f5f0eb, #ede7df); border-bottom-color: #e0d9d0; }
#frame-opt2.polished .cw-traffic-lights span:nth-child(1) { background: #ff5f57; }
#frame-opt2.polished .cw-traffic-lights span:nth-child(2) { background: #febc2e; }
#frame-opt2.polished .cw-traffic-lights span:nth-child(3) { background: #28c840; }
#frame-opt2.polished .cw-nav-arrows { color: #6b5b4f; }
#frame-opt2.polished .cw-mode-tab { color: #6b5b4f; border-bottom-color: transparent; transition: color 150ms ease-out; }
#frame-opt2.polished .cw-mode-tab.cw-active { color: #1a1a1a; font-weight: 600; border-bottom-color: #d4734a; }
#frame-opt2.polished .cw-mode-tab:hover { color: #1a1a1a; }

#frame-opt2.polished .cw-layout-btn { background: #fff; border-color: #e0d9d0; color: #6b5b4f; transition: all 150ms ease-out; }
#frame-opt2.polished .cw-layout-btn.cw-layout-active { background: linear-gradient(180deg, #fff, #f5f0eb); border-color: #d4734a; color: #d4734a; box-shadow: 0 1px 3px rgba(107,91,79,0.08); }
#frame-opt2.polished .cw-layout-btn:hover { border-color: #d4c8bc; box-shadow: 0 1px 3px rgba(107,91,79,0.06); }

#frame-opt2.polished .cw-icon-rail { background: linear-gradient(180deg, #f5f0eb, #ede7df); border-right-color: #e0d9d0; }
#frame-opt2.polished .cw-rail-icon { color: #6b5b4f; transition: color 150ms ease-out; }
#frame-opt2.polished .cw-rail-icon:hover { color: #d4734a; }
#frame-opt2.polished .cw-avatar { background: #f5f0eb; border-color: #d4c8bc; color: #6b5b4f; }

#frame-opt2.polished .cw-pane { border-color: #e8e2da; background: #fff; box-shadow: 0 1px 4px rgba(107,91,79,0.06); transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }
#frame-opt2.polished .cw-pane-active { border-color: #d4734a; box-shadow: 0 2px 8px rgba(212,115,74,0.10); }
#frame-opt2.polished .cw-pane-header { background: linear-gradient(180deg, #fff, #fdfcfa); border-bottom-color: #e8e2da; color: #1a1a1a; font-weight: 500; }
#frame-opt2.polished .cw-pane-actions { color: #6b5b4f; transition: color 150ms ease-out; }
#frame-opt2.polished .cw-pane-actions:hover { color: #d4734a; }
#frame-opt2.polished .cw-pane-body { background: #faf8f5; }

#frame-opt2.polished .cw-status-running { background: #d4734a; border-color: #c0603a; box-shadow: 0 0 0 2px rgba(212,115,74,0.15); }
#frame-opt2.polished .cw-status-idle { background: #e8e2da; border-color: #d4c8bc; }

#frame-opt2.polished .cw-message.cw-user { background: #f0ebe5; color: #1a1a1a; box-shadow: 0 1px 3px rgba(107,91,79,0.08); }
#frame-opt2.polished .cw-message.cw-claude { color: #1a1a1a; }
#frame-opt2.polished .cw-collapsed-action { color: #6b5b4f; transition: color 150ms ease-out; }
#frame-opt2.polished .cw-collapsed-action:hover { color: #d4734a; }
#frame-opt2.polished .cw-inline-list { color: #1a1a1a; }

#frame-opt2.polished .cw-mini-input { border-color: #e0d9d0; background: #fff; box-shadow: 0 1px 3px rgba(107,91,79,0.06); transition: box-shadow 150ms ease-out; }
#frame-opt2.polished .cw-model-badge { color: #6b5b4f; border-color: #e0d9d0; }

#frame-opt2.polished .cw-pane-preview { border-left-color: #e0d9d0; }
#frame-opt2.polished .cw-preview-chrome { border-bottom-color: #e8e2da; color: #6b5b4f; background: linear-gradient(180deg, #fdfcfa, #faf8f5); }
#frame-opt2.polished .cw-preview-title { color: #1a1a1a; }
#frame-opt2.polished .cw-preview-stats { color: #6b5b4f; }
#frame-opt2.polished .cw-preview-bar { background: linear-gradient(90deg, #e8e2da, #d4c8bc); }

#frame-opt2.polished .cw-pane-divider { background: #f0ebe5; transition: background 150ms ease-out; }
#frame-opt2.polished .cw-divider-grip { color: #d4c8bc; }
#frame-opt2.polished .cw-pane-divider:hover { background: #d4c8bc; }

/* Polished: active pane accent line */
#frame-opt2.polished .cw-pane-active .cw-pane-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: linear-gradient(90deg, #d4734a, rgba(212,115,74,0.3));
  border-radius: 1px;
}
#frame-opt2.polished .cw-pane-header { position: relative; }

/* Polished: running status pulse */
@media (prefers-reduced-motion: no-preference) {
  @keyframes opt2-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(212,115,74,0.15); }
    50% { box-shadow: 0 0 0 4px rgba(212,115,74,0.08); }
  }
  #frame-opt2.polished .cw-status-running { animation: opt2-pulse 2s ease-in-out infinite; }

  @keyframes opt2-pane-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  #frame-opt2.polished .cw-pane { animation: opt2-pane-enter 300ms ease-out both; }
  #frame-opt2.polished .cw-pane:nth-child(1) { animation-delay: 0ms; }
  #frame-opt2.polished .cw-pane:nth-child(3) { animation-delay: 100ms; }
}

/* --- Self-reveal: hide badge, color sub-tabs --- */
#frame-opt2-tabs .sub-tab-badge { display: none; }
#frame-opt2-tabs .sub-tab-btn[data-variant="clean"] { color: #64B5F6; }
#frame-opt2-tabs .sub-tab-btn[data-variant="clean"]:hover { color: #1E88E5; }
#frame-opt2-tabs .sub-tab-btn[data-variant="clean"].active { color: #1565C0; border-bottom-color: #1565C0; }
#frame-opt2-tabs .sub-tab-btn[data-variant="polished"] { color: #81C784; }
#frame-opt2-tabs .sub-tab-btn[data-variant="polished"]:hover { color: #43A047; }
#frame-opt2-tabs .sub-tab-btn[data-variant="polished"].active { color: #2E7D32; border-bottom-color: #2E7D32; }