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

/* ===== OPTION 1 — CLEAN VARIANT ===== */

/* Browser chrome */
.clean#frame-opt1 .browser-dots span:nth-child(1) { background: #ff5f57; }
.clean#frame-opt1 .browser-dots span:nth-child(2) { background: #febc2e; }
.clean#frame-opt1 .browser-dots span:nth-child(3) { background: #28c840; }

/* App shell */
.clean#frame-opt1 .cowork-app { background: #faf8f5; color: #1a1a1a; }
.clean#frame-opt1 .cw-topbar { background: #f5f0eb; border-bottom-color: rgba(107,91,79,0.12); }
.clean#frame-opt1 .cw-traffic-lights span { background: #ccc; }
.clean#frame-opt1 .cw-nav-arrows { color: #6b5b4f; }
.clean#frame-opt1 .cw-mode-tab { color: #6b5b4f; }
.clean#frame-opt1 .cw-mode-tab.cw-active { color: #1a1a1a; border-bottom-color: #d4734a; }

/* Session tabs */
.clean#frame-opt1 .cw-session-tabs { background: #fff; border-bottom-color: rgba(107,91,79,0.10); }
.clean#frame-opt1 .cw-session-tab { color: #6b5b4f; }
.clean#frame-opt1 .cw-session-tab.cw-session-active { color: #1a1a1a; border-bottom-color: #d4734a; }
.clean#frame-opt1 .cw-session-close { color: #6b5b4f; }
.clean#frame-opt1 .cw-session-add { border-color: rgba(107,91,79,0.15); color: #6b5b4f; background: #fff; }
.clean#frame-opt1 .cw-status-running { background: #d4734a; border-color: #c0623d; }
.clean#frame-opt1 .cw-status-idle { background: #e8e0d8; border-color: #ccc3b8; }

/* Icon rail */
.clean#frame-opt1 .cw-icon-rail { background: #f5f0eb; border-right-color: rgba(107,91,79,0.10); }
.clean#frame-opt1 .cw-rail-icon { color: #6b5b4f; }
.clean#frame-opt1 .cw-avatar { background: #e8e0d8; border-color: rgba(107,91,79,0.15); color: #6b5b4f; }

/* Chat area */
.clean#frame-opt1 .cw-task-header { color: #1a1a1a; border-bottom-color: rgba(107,91,79,0.08); }
.clean#frame-opt1 .cw-dropdown-arrow { color: #6b5b4f; }
.clean#frame-opt1 .cw-message.cw-user { background: #2d2d2d; color: #fff; }
.clean#frame-opt1 .cw-message.cw-claude { color: #1a1a1a; }
.clean#frame-opt1 .cw-collapsed-action { color: #6b5b4f; }
.clean#frame-opt1 .cw-artifact-card { border-color: rgba(107,91,79,0.12); background: #fff; }
.clean#frame-opt1 .cw-artifact-icon { color: #d4734a; }
.clean#frame-opt1 .cw-artifact-btn { border-color: rgba(107,91,79,0.15); color: #6b5b4f; background: #fff; }

/* Input bar */
.clean#frame-opt1 .cw-input-bar { border-color: rgba(107,91,79,0.15); background: #fff; }
.clean#frame-opt1 .cw-attach-btn,
.clean#frame-opt1 .cw-mic-btn { border-color: rgba(107,91,79,0.10); color: #6b5b4f; }
.clean#frame-opt1 .cw-model-select { color: #6b5b4f; border-color: rgba(107,91,79,0.12); }

/* Sidebar */
.clean#frame-opt1 .cw-sidebar { border-left-color: rgba(107,91,79,0.10); }
.clean#frame-opt1 .cw-sidebar-title { color: #6b5b4f; }
.clean#frame-opt1 .cw-dot.cw-done { color: #d4734a; border-color: #d4734a; }
.clean#frame-opt1 .cw-progress-label { color: #6b5b4f; }
.clean#frame-opt1 .cw-context-file { color: #1a1a1a; }
.clean#frame-opt1 .cw-thumb { background: #e8e0d8; }

/* ===== OPTION 1 — POLISHED VARIANT ===== */

/* Browser chrome */
.polished#frame-opt1 .browser-dots span:nth-child(1) { background: #ff5f57; }
.polished#frame-opt1 .browser-dots span:nth-child(2) { background: #febc2e; }
.polished#frame-opt1 .browser-dots span:nth-child(3) { background: #28c840; }

/* Typography */
.polished#frame-opt1 .cowork-app { font-family: 'Source Sans 3', sans-serif; }

/* App shell */
.polished#frame-opt1 .cowork-app { background: #faf8f5; color: #1a1a1a; }
.polished#frame-opt1 .cw-topbar {
  background: linear-gradient(180deg, #f5f0eb 0%, #faf8f5 100%);
  border-bottom-color: rgba(107,91,79,0.10);
}
.polished#frame-opt1 .cw-traffic-lights span { background: #ccc; }
.polished#frame-opt1 .cw-nav-arrows { color: #6b5b4f; }
.polished#frame-opt1 .cw-mode-tab { color: #6b5b4f; transition: color 150ms ease-out; }
.polished#frame-opt1 .cw-mode-tab:hover { color: #1a1a1a; }
.polished#frame-opt1 .cw-mode-tab.cw-active { color: #1a1a1a; border-bottom-color: #d4734a; }

/* Session tabs */
.polished#frame-opt1 .cw-session-tabs {
  background: #fff;
  border-bottom-color: rgba(107,91,79,0.08);
  box-shadow: 0 1px 3px rgba(107,91,79,0.04);
}
.polished#frame-opt1 .cw-session-tab { color: #6b5b4f; transition: color 150ms ease-out, border-color 150ms ease-out; }
.polished#frame-opt1 .cw-session-tab:hover { color: #1a1a1a; }
.polished#frame-opt1 .cw-session-tab.cw-session-active { color: #1a1a1a; border-bottom-color: #d4734a; }
.polished#frame-opt1 .cw-session-close { color: #6b5b4f; transition: color 150ms ease-out; }
.polished#frame-opt1 .cw-session-add {
  border-color: rgba(107,91,79,0.12); color: #6b5b4f; background: #fff;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.polished#frame-opt1 .cw-session-add:hover { background: #f5f0eb; color: #1a1a1a; }
.polished#frame-opt1 .cw-status-running { background: #d4734a; border-color: #c0623d; }
.polished#frame-opt1 .cw-status-idle { background: #e8e0d8; border-color: #ccc3b8; }

/* Icon rail */
.polished#frame-opt1 .cw-icon-rail { background: #f5f0eb; border-right-color: rgba(107,91,79,0.08); }
.polished#frame-opt1 .cw-rail-icon { color: #6b5b4f; transition: color 150ms ease-out; }
.polished#frame-opt1 .cw-rail-icon:hover { color: #d4734a; }
.polished#frame-opt1 .cw-avatar { background: #e8e0d8; border-color: rgba(107,91,79,0.12); color: #6b5b4f; }

/* Chat area */
.polished#frame-opt1 .cw-task-header { color: #1a1a1a; border-bottom-color: rgba(107,91,79,0.06); font-weight: 600; }
.polished#frame-opt1 .cw-dropdown-arrow { color: #6b5b4f; }
.polished#frame-opt1 .cw-message.cw-user { background: #f0ebe5; color: #1a1a1a; box-shadow: 0 1px 4px rgba(107,91,79,0.08); }
.polished#frame-opt1 .cw-message.cw-claude { color: #1a1a1a; }
.polished#frame-opt1 .cw-collapsed-action { color: #6b5b4f; transition: color 150ms ease-out; }
.polished#frame-opt1 .cw-collapsed-action:hover { color: #d4734a; }
.polished#frame-opt1 .cw-artifact-card {
  border-color: rgba(107,91,79,0.10); background: #fff;
  box-shadow: 0 2px 8px rgba(107,91,79,0.08);
  transition: box-shadow 150ms ease-out;
}
.polished#frame-opt1 .cw-artifact-card:hover { box-shadow: 0 4px 12px rgba(107,91,79,0.12); }
.polished#frame-opt1 .cw-artifact-icon { color: #d4734a; }
.polished#frame-opt1 .cw-artifact-btn {
  border-color: rgba(107,91,79,0.12); color: #6b5b4f; background: #fff;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.polished#frame-opt1 .cw-artifact-btn:hover { background: #f5f0eb; color: #1a1a1a; }

/* Input bar */
.polished#frame-opt1 .cw-input-bar {
  border-color: rgba(107,91,79,0.12); background: #fff;
  box-shadow: 0 -1px 6px rgba(107,91,79,0.05);
}
.polished#frame-opt1 .cw-attach-btn,
.polished#frame-opt1 .cw-mic-btn {
  border-color: rgba(107,91,79,0.08); color: #6b5b4f;
  transition: color 150ms ease-out, background 150ms ease-out;
}
.polished#frame-opt1 .cw-attach-btn:hover,
.polished#frame-opt1 .cw-mic-btn:hover { color: #d4734a; background: #faf8f5; }
.polished#frame-opt1 .cw-model-select { color: #6b5b4f; border-color: rgba(107,91,79,0.10); }

/* Sidebar */
.polished#frame-opt1 .cw-sidebar { border-left-color: rgba(107,91,79,0.08); }
.polished#frame-opt1 .cw-sidebar-title { color: #6b5b4f; font-weight: 600; }
.polished#frame-opt1 .cw-dot.cw-done { color: #d4734a; border-color: #d4734a; }
.polished#frame-opt1 .cw-progress-label { color: #6b5b4f; }
.polished#frame-opt1 .cw-context-file { color: #1a1a1a; }
.polished#frame-opt1 .cw-thumb { background: #e8e0d8; box-shadow: 0 1px 3px rgba(107,91,79,0.08); }

/* Polished decorative accent — warm bar under active session tab */
.polished#frame-opt1 .cw-session-tab.cw-session-active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 12px; right: 12px;
  height: 2px;
  background: linear-gradient(90deg, #d4734a, #d4a574);
  border-radius: 1px;
}

/* Polished decorative accent — subtle glow on artifact card left edge */
.polished#frame-opt1 .cw-artifact-card::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, #d4734a, #d4a574);
  border-radius: 2px;
}

/* Entrance animations — Polished only */
@media (prefers-reduced-motion: no-preference) {
  .polished#frame-opt1 .cw-message {
    animation: opt1FadeIn 200ms ease-out both;
  }
  .polished#frame-opt1 .cw-message:nth-child(1) { animation-delay: 0ms; }
  .polished#frame-opt1 .cw-message:nth-child(2) { animation-delay: 50ms; }
  .polished#frame-opt1 .cw-message:nth-child(3) { animation-delay: 100ms; }

  .polished#frame-opt1 .cw-sidebar-section {
    animation: opt1FadeIn 200ms ease-out both;
  }
  .polished#frame-opt1 .cw-sidebar-section:nth-child(1) { animation-delay: 80ms; }
  .polished#frame-opt1 .cw-sidebar-section:nth-child(2) { animation-delay: 130ms; }
  .polished#frame-opt1 .cw-sidebar-section:nth-child(3) { animation-delay: 180ms; }

  @keyframes opt1FadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

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