/* === Option 3: Session Drawer — 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-opt3.clean { background: #faf8f5; border-color: #e8e2da; }
#frame-opt3.clean .browser-chrome { background: #f0ebe5; border-bottom-color: #e0d9d0; }
#frame-opt3.clean .browser-dots span:nth-child(1) { background: #ff5f57; }
#frame-opt3.clean .browser-dots span:nth-child(2) { background: #febc2e; }
#frame-opt3.clean .browser-dots span:nth-child(3) { background: #28c840; }
#frame-opt3.clean .browser-url { background: #fff; border-color: #e0d9d0; color: #6b5b4f; }
#frame-opt3.clean .browser-controls { color: #6b5b4f; }
#frame-opt3.clean .browser-content { background: #faf8f5; }

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

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

#frame-opt3.clean .cw-session-drawer { background: #fff; border-right-color: #e0d9d0; }
#frame-opt3.clean .cw-drawer-header { border-bottom-color: #e8e2da; }
#frame-opt3.clean .cw-drawer-title { color: #1a1a1a; }
#frame-opt3.clean .cw-drawer-new { background: #faf8f5; border-color: #e0d9d0; color: #6b5b4f; }
#frame-opt3.clean .cw-drawer-session { border-bottom-color: #f0ebe5; }
#frame-opt3.clean .cw-drawer-session:hover { background: #faf8f5; }
#frame-opt3.clean .cw-drawer-active { border-left-color: #d4734a; background: #faf8f5; }
#frame-opt3.clean .cw-drawer-name { color: #1a1a1a; }
#frame-opt3.clean .cw-drawer-session-meta { color: #6b5b4f; }
#frame-opt3.clean .cw-mini-preview-line { background: #e0d9d0; }
#frame-opt3.clean .cw-drawer-divider { background: #e8e2da; }
#frame-opt3.clean .cw-drawer-footer { color: #6b5b4f; }

#frame-opt3.clean .cw-status-running { background: #d4734a; border-color: #c0603a; }
#frame-opt3.clean .cw-status-idle { background: #e8e2da; border-color: #d4c8bc; }
#frame-opt3.clean .cw-status-done { background: #28c840; border-color: #1ea532; }

#frame-opt3.clean .cw-task-header { color: #1a1a1a; border-bottom-color: #e8e2da; }
#frame-opt3.clean .cw-dropdown-arrow { color: #6b5b4f; }
#frame-opt3.clean .cw-message.cw-user { background: #2d2d2d; color: #fff; }
#frame-opt3.clean .cw-message.cw-claude { color: #1a1a1a; }
#frame-opt3.clean .cw-collapsed-action { color: #6b5b4f; }

#frame-opt3.clean .cw-artifact-card { background: #fff; border-color: #e0d9d0; }
#frame-opt3.clean .cw-artifact-icon { color: #d4734a; }
#frame-opt3.clean .cw-artifact-btn { background: #faf8f5; border-color: #e0d9d0; color: #1a1a1a; }

#frame-opt3.clean .cw-input-bar { background: #fff; border-color: #e0d9d0; }
#frame-opt3.clean .cw-attach-btn, #frame-opt3.clean .cw-mic-btn { border-color: #e0d9d0; color: #6b5b4f; }
#frame-opt3.clean .cw-model-select { color: #6b5b4f; border-color: #e0d9d0; }

#frame-opt3.clean .cw-sidebar { background: #fff; border-left-color: #e0d9d0; }
#frame-opt3.clean .cw-sidebar-title { color: #1a1a1a; }
#frame-opt3.clean .cw-dot { border-color: #d4c8bc; color: #6b5b4f; }
#frame-opt3.clean .cw-dot.cw-done { border-color: #d4734a; color: #d4734a; }
#frame-opt3.clean .cw-dot.cw-pending { background: #f0ebe5; }
#frame-opt3.clean .cw-dot-line { background: #e0d9d0; }
#frame-opt3.clean .cw-thumb { background: #f0ebe5; border-color: #e0d9d0; }

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

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

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

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

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

#frame-opt3.polished .cw-session-drawer { background: linear-gradient(180deg, #fff, #fdfcfa); border-right-color: #e0d9d0; box-shadow: 1px 0 4px rgba(107,91,79,0.05); }
#frame-opt3.polished .cw-drawer-header { border-bottom-color: #e8e2da; }
#frame-opt3.polished .cw-drawer-title { color: #1a1a1a; }
#frame-opt3.polished .cw-drawer-new { background: #fff; border-color: #e0d9d0; color: #6b5b4f; transition: all 150ms ease-out; }
#frame-opt3.polished .cw-drawer-new:hover { border-color: #d4734a; color: #d4734a; }
#frame-opt3.polished .cw-drawer-session { border-bottom-color: #f0ebe5; transition: background 150ms ease-out; }
#frame-opt3.polished .cw-drawer-session:hover { background: #faf8f5; }
#frame-opt3.polished .cw-drawer-active { border-left-color: #d4734a; background: #faf8f5; box-shadow: inset 0 0 0 0.5px rgba(212,115,74,0.08); }
#frame-opt3.polished .cw-drawer-name { color: #1a1a1a; font-weight: 500; }
#frame-opt3.polished .cw-drawer-session-meta { color: #6b5b4f; }
#frame-opt3.polished .cw-mini-preview-line { background: linear-gradient(90deg, #e0d9d0, #ede7df); }
#frame-opt3.polished .cw-drawer-divider { background: #e8e2da; }
#frame-opt3.polished .cw-drawer-footer { color: #6b5b4f; }

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

#frame-opt3.polished .cw-task-header { color: #1a1a1a; border-bottom-color: #e8e2da; }
#frame-opt3.polished .cw-dropdown-arrow { color: #6b5b4f; }
#frame-opt3.polished .cw-message.cw-user { background: #f0ebe5; color: #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
#frame-opt3.polished .cw-message.cw-claude { color: #1a1a1a; }
#frame-opt3.polished .cw-collapsed-action { color: #6b5b4f; transition: color 150ms ease-out; }
#frame-opt3.polished .cw-collapsed-action:hover { color: #d4734a; }

#frame-opt3.polished .cw-artifact-card { background: #fff; border-color: #e8e2da; box-shadow: 0 1px 3px rgba(107,91,79,0.06); transition: box-shadow 150ms ease-out; }
#frame-opt3.polished .cw-artifact-card:hover { box-shadow: 0 2px 8px rgba(107,91,79,0.10); }
#frame-opt3.polished .cw-artifact-icon { color: #d4734a; }
#frame-opt3.polished .cw-artifact-btn { background: #faf8f5; border-color: #e0d9d0; color: #1a1a1a; transition: all 150ms ease-out; }
#frame-opt3.polished .cw-artifact-btn:hover { border-color: #d4734a; color: #d4734a; }

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

#frame-opt3.polished .cw-sidebar { background: linear-gradient(180deg, #fff, #fdfcfa); border-left-color: #e0d9d0; }
#frame-opt3.polished .cw-sidebar-title { color: #1a1a1a; font-weight: 600; }
#frame-opt3.polished .cw-dot { border-color: #d4c8bc; color: #6b5b4f; }
#frame-opt3.polished .cw-dot.cw-done { border-color: #d4734a; color: #d4734a; }
#frame-opt3.polished .cw-dot.cw-pending { background: #f0ebe5; }
#frame-opt3.polished .cw-dot-line { background: #e0d9d0; }
#frame-opt3.polished .cw-thumb { background: #f0ebe5; border-color: #e0d9d0; box-shadow: 0 1px 2px rgba(107,91,79,0.06); }

/* Polished: active drawer accent */
#frame-opt3.polished .cw-drawer-active::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, #d4734a, rgba(212,115,74,0.4));
  border-radius: 0 2px 2px 0;
}
#frame-opt3.polished .cw-drawer-active { position: relative; border-left-color: transparent; }

/* Polished: entrance animations & running pulse */
@media (prefers-reduced-motion: no-preference) {
  @keyframes opt3-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-opt3.polished .cw-status-running { animation: opt3-pulse 2s ease-in-out infinite; }

  @keyframes opt3-drawer-enter {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
  }
  #frame-opt3.polished .cw-drawer-session { animation: opt3-drawer-enter 250ms ease-out both; }
  #frame-opt3.polished .cw-drawer-session:nth-child(2) { animation-delay: 50ms; }
  #frame-opt3.polished .cw-drawer-session:nth-child(3) { animation-delay: 100ms; }
  #frame-opt3.polished .cw-drawer-session:nth-child(4) { animation-delay: 150ms; }
  #frame-opt3.polished .cw-drawer-session:nth-child(5) { animation-delay: 200ms; }

  @keyframes opt3-chat-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  #frame-opt3.polished .cw-chat-area { animation: opt3-chat-enter 300ms ease-out both; }
}

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