/* === Multi-Session Layout — Wireframe Content CSS === */

/* Cowork App Shell */
.cowork-app { font-size: 12px; line-height: 1.4; }

/* Top Bar */
.cw-topbar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #ccc;
  gap: 12px;
  background: #eee;
}
.cw-traffic-lights { display: flex; gap: 5px; }
.cw-traffic-lights span { width: 10px; height: 10px; border-radius: 50%; background: #ccc; }
.cw-nav-arrows { font-size: 14px; color: #999; letter-spacing: 4px; }
.cw-mode-tabs { display: flex; gap: 0; margin: 0 auto; }
.cw-mode-tab {
  padding: 4px 16px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.cw-mode-tab.cw-active { color: #000; font-weight: 600; border-bottom-color: #000; }
.cw-topbar-spacer { width: 60px; }

/* Layout Toolbar (Option 2) */
.cw-layout-toolbar { display: flex; gap: 4px; }
.cw-layout-btn {
  width: 28px; height: 28px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cw-layout-btn.cw-layout-active { border-color: #000; color: #000; background: #eee; }

/* Session Tab Bar (Option 1) */
.cw-session-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid #ccc;
  background: #fff;
  padding: 0 8px;
}
.cw-session-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 11px;
  color: #666;
  max-width: 200px;
}
.cw-session-tab.cw-session-active { color: #000; border-bottom-color: #000; font-weight: 600; }
.cw-session-icon { font-size: 6px; }
.cw-session-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-session-close { color: #999; font-size: 14px; margin-left: auto; cursor: pointer; }
.cw-session-close:hover { color: #000; }
.cw-session-add {
  width: 28px; height: 28px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  margin-left: 4px;
}
.cw-session-add:hover { background: #eee; }

/* Status Dots */
.cw-session-status, .cw-pane-status, .cw-drawer-status,
.cw-card-status, .cw-peek-status, .cw-minimap-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.cw-status-running { background: #999; border: 1px solid #666; }
.cw-status-idle { background: #eee; border: 1px solid #ccc; }
.cw-status-done { background: #ccc; border: 1px solid #999; }

/* Main Layout */
.cw-main-layout { display: flex; min-height: 380px; }

/* Icon Rail */
.cw-icon-rail {
  width: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 12px;
  border-right: 1px solid #ccc;
  background: #fff;
  flex-shrink: 0;
}
.cw-rail-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #666; cursor: pointer;
}
.cw-rail-icon:hover { color: #000; }
.cw-rail-icon-active { color: #000; font-weight: 600; }
.cw-rail-spacer { flex: 1; }
.cw-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #eee;
  border: 1px solid #ccc;
  font-size: 8px; font-weight: 600;
}

/* Chat Area */
.cw-chat-area { flex: 1; display: flex; flex-direction: column; padding: 12px; overflow: hidden; }
.cw-chat-with-drawer { padding-left: 12px; }
.cw-task-header {
  font-size: 13px; font-weight: 600; color: #000;
  padding-bottom: 12px; border-bottom: 1px solid #eee; margin-bottom: 12px;
  display: flex; align-items: center; gap: 4px;
}
.cw-dropdown-arrow { font-size: 10px; color: #999; }
.cw-session-counter { margin-left: auto; font-size: 11px; color: #999; font-weight: 400; }

/* Messages */
.cw-message { margin-bottom: 10px; font-size: 11px; }
.cw-message.cw-user {
  background: #333; color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  margin-left: auto;
  max-width: 70%;
  text-align: right;
}
.cw-message.cw-claude { color: #333; }
.cw-message.cw-claude p { margin: 4px 0; }
.cw-collapsed-action {
  font-size: 10px; color: #999;
  padding: 4px 0; cursor: pointer;
}
.cw-collapsed-action:hover { color: #666; }
.cw-inline-list { margin: 4px 0; padding-left: 16px; }
.cw-inline-list li { margin: 2px 0; font-size: 11px; }

/* Artifact Card */
.cw-artifact-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  margin: 8px 0;
}
.cw-artifact-icon { font-size: 16px; color: #999; }
.cw-artifact-btn {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 10px;
  cursor: pointer;
  border-radius: 4px;
}

/* Input Bar */
.cw-input-bar {
  display: flex; align-items: center; gap: 6px;
  margin-top: auto;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
}
.cw-attach-btn, .cw-mic-btn {
  width: 28px; height: 28px;
  border: 1px solid #eee; background: #fff;
  border-radius: 50%; cursor: pointer;
  font-size: 14px; color: #666;
  display: flex; align-items: center; justify-content: center;
}
.cw-input {
  flex: 1; border: none; outline: none;
  font-size: 11px; background: transparent;
  font-family: inherit;
}
.cw-model-select {
  font-size: 10px; color: #666;
  padding: 2px 8px;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

/* Mini Input (for panes) */
.cw-mini-input {
  display: flex; align-items: center; gap: 4px;
  margin-top: 8px; padding: 6px 8px;
  border: 1px solid #ccc; border-radius: 6px;
}
.cw-mini-input .cw-input { font-size: 10px; }
.cw-model-badge {
  font-size: 9px; color: #999;
  padding: 1px 6px;
  border: 1px solid #eee;
  border-radius: 3px;
  white-space: nowrap;
}

/* Sidebar */
.cw-sidebar {
  width: 160px; border-left: 1px solid #ccc;
  padding: 12px; display: flex; flex-direction: column;
  gap: 16px; flex-shrink: 0; background: #fff;
}
.cw-sidebar-narrow { width: 130px; }
.cw-sidebar-section { }
.cw-sidebar-title { font-size: 11px; font-weight: 600; color: #333; margin-bottom: 8px; }
.cw-progress-dots { display: flex; align-items: center; gap: 4px; }
.cw-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid #ccc; display: flex;
  align-items: center; justify-content: center;
  font-size: 10px; color: #999;
}
.cw-dot.cw-done { border-color: #666; color: #666; }
.cw-dot.cw-pending { background: #eee; }
.cw-dot-line { width: 12px; height: 1px; background: #ccc; }
.cw-progress-label { font-size: 10px; color: #999; margin-top: 4px; }
.cw-context-file { font-size: 10px; color: #666; padding: 4px 0; }
.cw-context-thumbs { display: flex; gap: 4px; }
.cw-thumb {
  width: 32px; height: 24px;
  background: #eee; border: 1px solid #ccc;
  border-radius: 3px;
}

/* Session Panel Switching (Option 1) */
.cw-session-panel { display: none; }
.cw-session-panel.cw-session-visible { display: flex; }

/* === OPTION 2: Split Panes === */
.cw-split-container { display: flex; min-height: 380px; }
.cw-icon-rail-split { border-right: 1px solid #ccc; }
.cw-pane-grid { flex: 1; display: flex; overflow: hidden; }
.cw-pane {
  flex: 1; display: flex; flex-direction: column;
  border: 1px solid #eee; overflow: hidden;
}
.cw-pane-active { border-color: #333; }
.cw-pane-header {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
  background: #fff;
  font-size: 11px; font-weight: 600;
}
.cw-pane-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-pane-actions { color: #999; cursor: pointer; font-size: 14px; }
.cw-pane-body { flex: 1; display: flex; flex-direction: column; padding: 8px; overflow: hidden; }
.cw-pane-split-view { flex-direction: row; gap: 1px; }
.cw-pane-chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cw-pane-preview {
  width: 45%; border-left: 1px solid #ccc;
  display: flex; flex-direction: column;
}
.cw-preview-chrome {
  padding: 4px 8px; border-bottom: 1px solid #eee;
  font-size: 10px; color: #666;
}
.cw-preview-body { flex: 1; padding: 8px; }
.cw-preview-placeholder { }
.cw-preview-title { font-size: 11px; font-weight: 600; margin-bottom: 8px; }
.cw-preview-stats { display: flex; gap: 12px; margin-bottom: 8px; font-size: 10px; color: #666; }
.cw-preview-bar { height: 6px; background: #eee; border-radius: 3px; margin-bottom: 4px; }
.cw-bar-short { width: 60%; }

/* Pane Divider */
.cw-pane-divider {
  width: 6px; background: #eee;
  display: flex; align-items: center; justify-content: center;
  cursor: col-resize; flex-shrink: 0;
}
.cw-divider-grip { font-size: 8px; color: #ccc; writing-mode: vertical-lr; }
.cw-pane-divider:hover { background: #ccc; }

/* === OPTION 3: Session Drawer === */
.cw-session-drawer {
  width: 180px; border-right: 1px solid #ccc;
  background: #fff; display: flex;
  flex-direction: column; overflow-y: auto;
  flex-shrink: 0;
}
.cw-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid #eee;
}
.cw-drawer-title { font-size: 12px; font-weight: 600; }
.cw-drawer-new {
  font-size: 10px; padding: 3px 8px;
  border: 1px solid #ccc; background: #fff;
  cursor: pointer; border-radius: 4px;
}
.cw-drawer-session {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.cw-drawer-session:hover { background: #eee; }
.cw-drawer-active { border-left: 3px solid #333; background: #eee; }
.cw-drawer-session-top { display: flex; align-items: center; gap: 6px; }
.cw-drawer-name { font-size: 11px; font-weight: 600; color: #333; }
.cw-drawer-session-meta { font-size: 9px; color: #999; margin-top: 3px; padding-left: 14px; }
.cw-drawer-preview-mini { margin-top: 6px; padding-left: 14px; }
.cw-mini-preview-line { height: 3px; background: #ccc; margin-bottom: 2px; border-radius: 1px; }
.cw-line-short { width: 50%; }
.cw-drawer-divider { height: 1px; background: #eee; }
.cw-drawer-footer { padding: 8px 12px; font-size: 9px; color: #999; }

/* === OPTION 4: Card Overview === */
.cw-card-overview { flex: 1; padding: 16px; overflow-y: visible; }
.cw-overview-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cw-overview-title { margin: 0; font-size: 16px; color: #000; }
.cw-overview-filters { display: flex; gap: 4px; }
.cw-filter-btn {
  padding: 4px 10px; border: 1px solid #ccc;
  background: #fff; font-size: 10px; cursor: pointer;
  border-radius: 4px; color: #666;
}
.cw-filter-btn.cw-filter-active { background: #333; color: #fff; border-color: #333; }

.cw-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cw-session-card {
  border: 1px solid #ccc; border-radius: 8px;
  background: #fff; overflow: hidden;
  cursor: pointer;
}
.cw-session-card:hover { border-color: #333; }
.cw-card-completed { opacity: 0.7; }
.cw-card-header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid #eee;
}
.cw-card-title { flex: 1; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-card-time { font-size: 9px; color: #999; }
.cw-card-preview {
  padding: 10px;
  min-height: 60px;
  background: #eee;
}
.cw-card-preview-content { }
.cw-card-preview-title { font-size: 10px; font-weight: 600; margin-bottom: 6px; }
.cw-card-preview-stats { display: flex; gap: 8px; }
.cw-stat-block {
  font-size: 12px; font-weight: 600; color: #333;
  padding: 2px 6px; background: #fff; border-radius: 3px;
}
.cw-card-chat-preview { padding: 8px 10px; min-height: 60px; }
.cw-card-msg { font-size: 10px; margin-bottom: 4px; color: #666; }
.cw-card-msg-user { color: #333; font-weight: 600; }
.cw-card-msg-claude { color: #666; }
.cw-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-top: 1px solid #eee;
}
.cw-card-meta { font-size: 9px; color: #999; }
.cw-card-open {
  font-size: 10px; padding: 3px 8px;
  border: 1px solid #ccc; background: #fff;
  cursor: pointer; border-radius: 4px;
}
.cw-card-open:hover { background: #eee; }

/* New session card */
.cw-card-new {
  border-style: dashed; display: flex;
  align-items: center; justify-content: center;
  min-height: 130px;
}
.cw-card-new:hover { background: #eee; }
.cw-card-new-content { text-align: center; }
.cw-card-new-icon { font-size: 24px; color: #ccc; display: block; }
.cw-card-new-label { font-size: 11px; color: #999; }

/* Allow card overview to show all cards */
#frame-opt4 .browser-content { overflow: visible; min-height: auto; }

/* === OPTION 5: Stacked Layers === */
.cw-stack-area {
  flex: 1; display: flex;
  position: relative; overflow: hidden;
}
.cw-stack-active {
  flex: 1; display: flex; flex-direction: column;
  padding: 12px; margin: 0 24px;
  overflow: hidden;
}
.cw-stack-peek {
  width: 24px;
  background: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid #ccc;
  flex-shrink: 0;
}
.cw-stack-peek:hover { background: #ccc; width: 32px; }
.cw-peek-label {
  writing-mode: vertical-lr;
  font-size: 9px; color: #666;
  text-orientation: mixed;
}

/* Minimap Strip */
.cw-minimap {
  display: flex; align-items: center;
  gap: 8px; padding: 6px 12px;
  border-top: 1px solid #ccc;
  background: #fff;
  margin-left: 36px;
}
.cw-minimap-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
}
.cw-minimap-item:hover { border-color: #999; }
.cw-minimap-active { border-color: #333; background: #eee; }
.cw-minimap-thumb { width: 32px; height: 20px; }
.cw-minimap-line {
  height: 2px; background: #ccc;
  margin-bottom: 2px; border-radius: 1px;
}
.cw-minimap-label { font-size: 9px; color: #666; white-space: nowrap; }
.cw-minimap-add {
  width: 24px; height: 24px;
  border: 1px solid #ccc; background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; color: #999;
  border-radius: 4px;
}

/* Summary Table */
.summary-table {
  width: 100%; border-collapse: collapse;
  margin-bottom: 24px; font-size: 13px;
}
.summary-table th, .summary-table td {
  padding: 10px 12px;
  border: 1px solid #eee;
  text-align: left;
}
.summary-table th { background: #f5f5f5; font-weight: 600; }
.summary-table td:last-child { white-space: nowrap; }

.recommendation {
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fafafa;
}
.recommendation h3 { margin: 0 0 8px; font-size: 15px; }
.recommendation p { margin: 0; font-size: 13px; color: #333; line-height: 1.6; }

code {
  background: #eee;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}