@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&family=Fraunces:opsz,wght@9..144,600&display=swap');

/* ========== CLEAN VARIANT ========== */

/* Browser chrome */
#frame-opt5.clean .browser-dots span:nth-child(1) { background: #ff5f57; }
#frame-opt5.clean .browser-dots span:nth-child(2) { background: #febc2e; }
#frame-opt5.clean .browser-dots span:nth-child(3) { background: #28c840; }
#frame-opt5.clean .browser-chrome { background: #f5f0eb; border-bottom-color: #e8e0d8; }
#frame-opt5.clean .browser-url { color: #6b5b4f; }

/* App shell */
#frame-opt5.clean .cowork-app { background: #faf8f5; color: #1a1a1a; }
#frame-opt5.clean .cw-topbar { background: #f5f0eb; border-bottom-color: #e8e0d8; }
#frame-opt5.clean .cw-traffic-lights span { background: #d4c8bc; }
#frame-opt5.clean .cw-nav-arrows { color: #a89888; }
#frame-opt5.clean .cw-mode-tab { color: #6b5b4f; }
#frame-opt5.clean .cw-mode-tab.cw-active { color: #1a1a1a; border-bottom-color: #d4734a; }

/* Icon rail */
#frame-opt5.clean .cw-icon-rail { background: #faf8f5; border-right-color: #e8e0d8; }
#frame-opt5.clean .cw-rail-icon { color: #6b5b4f; }
#frame-opt5.clean .cw-avatar { background: #f5f0eb; border-color: #d4c8bc; color: #6b5b4f; }

/* Stack area */
#frame-opt5.clean .cw-stack-peek { background: #f5f0eb; border-color: #e8e0d8; }
#frame-opt5.clean .cw-stack-peek:hover { background: #ede5db; }
#frame-opt5.clean .cw-peek-label { color: #6b5b4f; }
#frame-opt5.clean .cw-task-header { color: #1a1a1a; border-bottom-color: #e8e0d8; }
#frame-opt5.clean .cw-dropdown-arrow { color: #a89888; }
#frame-opt5.clean .cw-session-counter { color: #a89888; }

/* Messages */
#frame-opt5.clean .cw-message.cw-user { background: #2d2d2d; color: #fff; }
#frame-opt5.clean .cw-message.cw-claude { color: #1a1a1a; }
#frame-opt5.clean .cw-collapsed-action { color: #a89888; }
#frame-opt5.clean code { background: #f0ebe5; color: #6b5b4f; }

/* Artifact card */
#frame-opt5.clean .cw-artifact-card { background: #fff; border-color: #e8e0d8; }
#frame-opt5.clean .cw-artifact-icon { color: #d4734a; }
#frame-opt5.clean .cw-artifact-btn { border-color: #e8e0d8; color: #6b5b4f; }

/* Input bar */
#frame-opt5.clean .cw-input-bar { background: #fff; border-color: #e8e0d8; }
#frame-opt5.clean .cw-attach-btn, #frame-opt5.clean .cw-mic-btn { border-color: #e8e0d8; color: #6b5b4f; }
#frame-opt5.clean .cw-model-select { border-color: #e8e0d8; color: #6b5b4f; }

/* Status dots */
#frame-opt5.clean .cw-status-running { background: #d4734a; border-color: #c0623b; }
#frame-opt5.clean .cw-status-idle { background: #e8e0d8; border-color: #d4c8bc; }
#frame-opt5.clean .cw-status-done { background: #a89888; border-color: #8a7e70; }

/* Minimap */
#frame-opt5.clean .cw-minimap { background: #fff; border-top-color: #e8e0d8; }
#frame-opt5.clean .cw-minimap-item { border-color: #e8e0d8; }
#frame-opt5.clean .cw-minimap-item:hover { border-color: #a89888; }
#frame-opt5.clean .cw-minimap-active { border-color: #d4734a; background: #faf5f0; }
#frame-opt5.clean .cw-minimap-label { color: #6b5b4f; }
#frame-opt5.clean .cw-minimap-line { background: #d4c8bc; }
#frame-opt5.clean .cw-minimap-add { border-color: #e8e0d8; color: #a89888; }

/* ========== POLISHED VARIANT ========== */

/* Browser chrome */
#frame-opt5.polished .browser-dots span:nth-child(1) { background: #ff5f57; }
#frame-opt5.polished .browser-dots span:nth-child(2) { background: #febc2e; }
#frame-opt5.polished .browser-dots span:nth-child(3) { background: #28c840; }
#frame-opt5.polished .browser-chrome { background: #f5f0eb; border-bottom-color: #e8e0d8; }
#frame-opt5.polished .browser-url { color: #6b5b4f; }

/* App shell */
#frame-opt5.polished .cowork-app { background: #faf8f5; color: #1a1a1a; font-family: 'Source Sans 3', system-ui, sans-serif; }
#frame-opt5.polished .cw-topbar { background: linear-gradient(180deg, #f7f2ec, #f5f0eb); border-bottom-color: #e8e0d8; }
#frame-opt5.polished .cw-traffic-lights span { background: #d4c8bc; }
#frame-opt5.polished .cw-nav-arrows { color: #a89888; }
#frame-opt5.polished .cw-mode-tab { color: #6b5b4f; transition: color 150ms ease-out; }
#frame-opt5.polished .cw-mode-tab.cw-active { color: #1a1a1a; border-bottom-color: #d4734a; font-family: 'Fraunces', serif; }

/* Icon rail */
#frame-opt5.polished .cw-icon-rail { background: #faf8f5; border-right-color: #e8e0d8; }
#frame-opt5.polished .cw-rail-icon { color: #6b5b4f; transition: color 150ms ease-out; }
#frame-opt5.polished .cw-avatar { background: #f5f0eb; border-color: #d4c8bc; color: #6b5b4f; box-shadow: 0 1px 3px rgba(107,91,79,0.08); }

/* Stack area */
#frame-opt5.polished .cw-stack-peek { background: #f5f0eb; border-color: #e8e0d8; transition: width 200ms ease-out, background 150ms ease-out; box-shadow: inset 0 0 12px rgba(107,91,79,0.04); }
#frame-opt5.polished .cw-stack-peek:hover { background: #ede5db; }
#frame-opt5.polished .cw-peek-label { color: #6b5b4f; }
#frame-opt5.polished .cw-task-header { color: #1a1a1a; border-bottom-color: #e8e0d8; font-family: 'Fraunces', serif; }
#frame-opt5.polished .cw-dropdown-arrow { color: #a89888; }
#frame-opt5.polished .cw-session-counter { color: #a89888; }

/* Messages */
#frame-opt5.polished .cw-message.cw-user { background: #f0ebe5; color: #1a1a1a; box-shadow: 0 1px 4px rgba(107,91,79,0.08); }
#frame-opt5.polished .cw-message.cw-claude { color: #1a1a1a; }
#frame-opt5.polished .cw-collapsed-action { color: #a89888; transition: color 150ms ease-out; }
#frame-opt5.polished code { background: #f0ebe5; color: #6b5b4f; }

/* Artifact card */
#frame-opt5.polished .cw-artifact-card { background: #fff; border-color: #e8e0d8; box-shadow: 0 2px 8px rgba(107,91,79,0.08); transition: box-shadow 150ms ease-out; }
#frame-opt5.polished .cw-artifact-card:hover { box-shadow: 0 4px 12px rgba(107,91,79,0.12); }
#frame-opt5.polished .cw-artifact-icon { color: #d4734a; }
#frame-opt5.polished .cw-artifact-btn { border-color: #e8e0d8; color: #6b5b4f; transition: background 150ms ease-out; }
#frame-opt5.polished .cw-artifact-btn:hover { background: #f5f0eb; }

/* Input bar */
#frame-opt5.polished .cw-input-bar { background: #fff; border-color: #e8e0d8; box-shadow: 0 -1px 4px rgba(107,91,79,0.04); }
#frame-opt5.polished .cw-attach-btn, #frame-opt5.polished .cw-mic-btn { border-color: #e8e0d8; color: #6b5b4f; transition: background 150ms ease-out; }
#frame-opt5.polished .cw-attach-btn:hover, #frame-opt5.polished .cw-mic-btn:hover { background: #f5f0eb; }
#frame-opt5.polished .cw-model-select { border-color: #e8e0d8; color: #6b5b4f; }

/* Status dots */
#frame-opt5.polished .cw-status-running { background: #d4734a; border-color: #c0623b; box-shadow: 0 0 0 2px rgba(212,115,74,0.15); }
#frame-opt5.polished .cw-status-idle { background: #e8e0d8; border-color: #d4c8bc; }
#frame-opt5.polished .cw-status-done { background: #a89888; border-color: #8a7e70; }

/* Minimap */
#frame-opt5.polished .cw-minimap { background: linear-gradient(0deg, #fff, #fdfbf9); border-top-color: #e8e0d8; }
#frame-opt5.polished .cw-minimap-item { border-color: #e8e0d8; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; }
#frame-opt5.polished .cw-minimap-item:hover { border-color: #a89888; box-shadow: 0 1px 4px rgba(107,91,79,0.08); }
#frame-opt5.polished .cw-minimap-active { border-color: #d4734a; background: #faf5f0; box-shadow: 0 1px 4px rgba(212,115,74,0.1); }
#frame-opt5.polished .cw-minimap-label { color: #6b5b4f; }
#frame-opt5.polished .cw-minimap-line { background: #d4c8bc; }
#frame-opt5.polished .cw-minimap-add { border-color: #e8e0d8; color: #a89888; transition: border-color 150ms ease-out; }
#frame-opt5.polished .cw-minimap-add:hover { border-color: #a89888; }

/* Polished: decorative accent on active peek strip */
#frame-opt5.polished .cw-stack-peek.cw-peek-left::after,
#frame-opt5.polished .cw-stack-peek.cw-peek-right::after {
  content: ''; position: absolute; top: 50%; width: 2px; height: 20px;
  background: #d4c8bc; border-radius: 1px; transform: translateY(-50%);
}
#frame-opt5.polished .cw-stack-peek { position: relative; }

/* Polished entrance animations */
@media (prefers-reduced-motion: no-preference) {
  #frame-opt5.polished .cw-stack-active {
    animation: opt5-fadeIn 300ms ease-out both;
  }
  #frame-opt5.polished .cw-minimap-item {
    animation: opt5-slideUp 250ms ease-out both;
  }
  #frame-opt5.polished .cw-minimap-item:nth-child(1) { animation-delay: 0ms; }
  #frame-opt5.polished .cw-minimap-item:nth-child(2) { animation-delay: 50ms; }
  #frame-opt5.polished .cw-minimap-item:nth-child(3) { animation-delay: 100ms; }
  #frame-opt5.polished .cw-minimap-item:nth-child(4) { animation-delay: 150ms; }

  @keyframes opt5-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes opt5-slideUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

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