/* workspace_shared.css — Design system for FreeOrigins workspace UIs
   Used by both /console (Atlas) and /kai (Kai).
   Import via: <link rel="stylesheet" href="/public/workspace_shared.css"> */

/* Responsive base — everything in rem scales from this */
html { font-size: clamp(15px, 1vw + 12px, 18px); }

:root {
  --bg: #f7f7f5; --bg-secondary: #eeeeeb;
  --sidebar-bg: #f0eeeb; --sidebar-text: #1a1a1a; --sidebar-muted: #6b6b6b;
  --sidebar-active: #e5e3df; --sidebar-hover: #e8e6e3;
  --chat-bg: #ffffff; --text: #1a1a1a; --text-secondary: #6b6b6b; --text-muted: #999;
  --accent: #5b4cd6; --accent-soft: #eeedfd; --accent-hover: #4a3cb8;
  --border: #e5e5e2; --code-bg: #f5f5f0; --code-text: #1a1a1a;
  --danger: #e24b4a; --success: #1d9e75; --warning: #ef9f27; --info: #378add;

  /* Type scale — use these instead of hardcoded px */
  --text-2xs: 0.5625rem;  /* ~9px */
  --text-xs:  0.6875rem;  /* ~11px */
  --text-sm:  0.75rem;    /* ~12px */
  --text-base:0.8125rem;  /* ~13px */
  --text-md:  0.875rem;   /* ~14px */
  --text-lg:  1rem;       /* ~16px */
  --text-xl:  1.125rem;   /* ~18px */
  --text-2xl: 1.25rem;    /* ~20px */
  --text-3xl: 1.375rem;   /* ~22px */
  --text-4xl: 1.5rem;     /* ~24px */

  /* Touch target minimum (44px per Apple/Google guidelines) */
  --touch-min: 2.75rem;
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --radius: 10px; --radius-sm: 6px; --radius-lg: 14px;
}

/* Dark theme — toggled per-project via .dark-theme on body.
   Rule #13: all text/icons have sufficient contrast from bg. */
body.dark-theme {
  --bg: #1a1a1a; --bg-secondary: #242424;
  --sidebar-bg: #141414; --sidebar-text: #e0e0e0; --sidebar-muted: #999;
  --sidebar-active: #2a2a2a; --sidebar-hover: #222;
  --chat-bg: #1e1e1e; --text: #e0e0e0; --text-secondary: #aaa; --text-muted: #777;
  --accent: #7b6ef6; --accent-soft: #2a2540; --accent-hover: #9589ff;
  --border: #333; --code-bg: #141414; --code-text: #e0e0e0;
  --danger: #f06060; --success: #3dc98e; --warning: #f0b040; --info: #5a9eff;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); font-size:var(--text-lg); background:var(--bg); color:var(--text); height:100vh; overflow:hidden; display:flex; }


@media (max-width:768px) { .ws-sidebar{width:220px;min-width:220px;} .ws-panel.open{width:280px;} }

.ws-sidebar { width:260px; min-width:260px; background:var(--sidebar-bg); color:var(--sidebar-text); display:flex; flex-direction:column; }
.ws-sidebar-brand { padding:18px 16px 14px; border-bottom:1px solid var(--border); }
.ws-sidebar-brand h1 { font-size:var(--text-lg); font-weight:700; }
.ws-sidebar-brand .sub { font-size:var(--text-xs); color:var(--sidebar-muted); margin-top:2px; }
.ws-section-label { font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:0.8px; color:var(--sidebar-muted); padding:12px 16px 6px; }
.ws-nav-list { flex:1; overflow-y:auto; padding:4px 0; }
.ws-nav-item { display:flex; align-items:center; gap:10px; padding:8px 16px; font-size:var(--text-base); cursor:pointer; color:var(--sidebar-muted); transition:all 0.1s; border:none; background:none; width:100%; text-align:left; font-family:var(--font); }
.ws-nav-item:hover { background:var(--sidebar-hover); color:var(--sidebar-text); }
.ws-nav-item.active { background:var(--sidebar-active); color:var(--sidebar-text); }
.ws-nav-item .icon { font-size:var(--text-md); width:20px; text-align:center; }
.ws-nav-item .badge { margin-left:auto; font-size:var(--text-xs); padding:1px 6px; border-radius:10px; background:var(--accent); color:white; }
.ws-new-btn { display:flex; align-items:center; gap:6px; padding:8px 16px; cursor:pointer; font-size:var(--text-sm); color:var(--accent); background:none; border:none; font-family:var(--font); width:100%; text-align:left; }
.ws-new-btn:hover { background:var(--sidebar-hover); }

.ws-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.ws-header { padding:12px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; background:var(--chat-bg); min-height:48px; }
.ws-header-title { font-size:var(--text-md); font-weight:600; }
.ws-header-sub { font-size:var(--text-base); color:var(--text-secondary); }
.ws-header-actions { margin-left:auto; display:flex; gap:6px; }

.ws-btn { padding:6px 12px; font-size:var(--text-sm); font-family:var(--font); font-weight:500; border:1px solid var(--border); border-radius:var(--radius-sm); background:white; color:var(--text); cursor:pointer; transition:all 0.12s; display:inline-flex; align-items:center; gap:5px; }
.ws-btn:hover { background:var(--bg); }
.ws-btn.primary { background:var(--accent); color:white; border-color:var(--accent); }
.ws-btn.primary:hover { background:var(--accent-hover); }

.ws-chat { flex:1; overflow-y:auto; padding:20px; background:var(--bg); }
.ws-welcome { text-align:center; padding:60px 40px; max-width:520px; margin:40px auto 0; }
.ws-welcome h2 { font-size:var(--text-3xl); font-weight:700; margin-bottom:8px; }
.ws-welcome p { font-size:var(--text-md); color:var(--text-secondary); line-height:1.6; }

.ws-msg { max-width:780px; margin:0 auto 20px; padding:0 16px; }
.ws-msg-role { font-size:var(--text-xs); font-weight:600; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
.ws-msg.user .ws-msg-role { color:var(--accent); }
.ws-msg.assistant .ws-msg-role { color:var(--success); }
.ws-msg-body { font-size:var(--text-md); line-height:1.75; }
.ws-msg-body p { margin:0 0 12px; }
.ws-msg-body h1 { font-size:var(--text-2xl); font-weight:700; margin:20px 0 8px; }
.ws-msg-body h2 { font-size:var(--text-lg); font-weight:600; margin:16px 0 6px; }
.ws-msg-body h3 { font-size:var(--text-md); font-weight:600; margin:12px 0 4px; }
.ws-msg-body ul,.ws-msg-body ol { margin:0 0 12px; padding-left:24px; }
.ws-msg-body li { margin:4px 0; }
.ws-msg-body table { width:100%; border-collapse:collapse; margin:12px 0; font-size:var(--text-base); }
.ws-msg-body th,.ws-msg-body td { padding:6px 10px; border:1px solid var(--border); text-align:left; }
.ws-msg-body th { background:var(--bg-secondary); font-weight:600; }
.ws-msg-body blockquote { border-left:3px solid var(--accent); padding:4px 0 4px 14px; margin:12px 0; color:var(--text-secondary); }
.ws-msg-body code { font-family:var(--mono); font-size:var(--text-sm); background:var(--bg-secondary); padding:2px 5px; border-radius:4px; }
.ws-msg-body img { max-width:100%; border-radius:8px; margin:8px 0; }
.ws-msg-body hr { border:none; border-top:1px solid var(--border); margin:16px 0; }
.ws-stream-cursor::after { content:'▊'; animation:blink 0.6s infinite; color:var(--accent); margin-left:2px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.ws-code { background:var(--code-bg); color:var(--code-text); border-radius:var(--radius); margin:12px 0; overflow:hidden; position:relative; }
.ws-code-header { display:flex; align-items:center; padding:7px 14px; background:#eeeee8; font-size:var(--text-xs); font-family:var(--mono); color:#6b6b6b; }
.ws-code-header .file { flex:1; }
.ws-code-header .tag { background:var(--success); color:#fff; padding:1px 7px; border-radius:4px; font-size:var(--text-xs); font-weight:600; font-family:var(--font); margin-left:6px; }
.ws-code pre { padding:14px; overflow-x:auto; font-family:var(--mono); font-size:var(--text-sm); line-height:1.6; margin:0; }
.ws-code-actions { position:absolute; top:4px; right:8px; display:flex; gap:2px; }
.ws-code-btn { width:26px; height:26px; border-radius:var(--radius-sm); border:none; background:transparent; color:#6b6b6b; cursor:pointer; font-size:var(--text-base); display:flex; align-items:center; justify-content:center; }
.ws-code-btn:hover { background:rgba(0,0,0,0.06); }

.ws-menu { position:absolute; top:32px; right:8px; background:var(--chat-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 4px 16px rgba(0,0,0,0.1); min-width:180px; z-index:100; overflow:hidden; display:none; }
.ws-menu.open { display:block; }
.ws-menu-item { display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:var(--text-base); color:var(--text); cursor:pointer; border:none; background:none; width:100%; text-align:left; font-family:var(--font); }
.ws-menu-item:hover { background:var(--bg); }
.ws-menu-item svg { width:15px; height:15px; color:var(--text-muted); flex-shrink:0; }

.ws-fullscreen { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000; display:flex; flex-direction:column; animation:wsFadeIn 0.15s ease; }
@keyframes wsFadeIn { from{opacity:0} to{opacity:1} }
.ws-fullscreen-header { display:flex; align-items:center; gap:12px; padding:10px 20px; background:var(--code-bg); color:var(--code-text); }
.ws-fullscreen-header .title { flex:1; font-family:var(--mono); font-size:var(--text-base); }
.ws-fullscreen-close { width:32px; height:32px; border-radius:var(--radius-sm); border:none; background:rgba(0,0,0,0.06); color:white; font-size:var(--text-xl); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ws-fullscreen-close:hover { background:rgba(255,255,255,0.2); }
.ws-fullscreen-body { flex:1; overflow:auto; }
.ws-fullscreen-body pre { padding:20px; margin:0; font-family:var(--mono); font-size:var(--text-base); color:var(--code-text); background:var(--code-bg); line-height:1.6; min-height:100%; }
.ws-fullscreen-body iframe { width:100%; height:100%; border:none; background:white; }

.ws-preview { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); margin:12px 0; }
.ws-preview-bar { display:flex; align-items:center; gap:8px; padding:5px 12px; background:var(--bg-secondary); border-bottom:1px solid var(--border); font-size:var(--text-sm); }
.ws-preview-bar .title { flex:1; font-family:var(--mono); }
.ws-preview iframe { width:100%; border:none; background:white; min-height:300px; }

.ws-input { padding:14px 20px 18px; background:var(--chat-bg); border-top:1px solid var(--border); }
.ws-input-images { display:flex; gap:8px; flex-wrap:wrap; max-width:780px; margin:0 auto 8px; }
.ws-input-img { position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.ws-input-img img { display:block; max-height:80px; max-width:140px; object-fit:cover; }
.ws-input-img .remove { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,0.6); color:white; border:none; font-size:var(--text-xs); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ws-input-row { max-width:780px; margin:0 auto; display:flex; gap:8px; align-items:flex-end; }
.ws-input-row textarea { flex:1; font-family:var(--font); font-size:var(--text-md); padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius); resize:none; min-height:44px; max-height:200px; outline:none; transition:border-color 0.15s; line-height:1.5; }
.ws-input-row textarea:focus { border-color:var(--accent); }
.ws-send-btn { width:44px; height:44px; border-radius:var(--radius); border:none; background:var(--accent); color:white; font-size:var(--text-xl); cursor:pointer; transition:all 0.12s; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ws-send-btn:hover { background:var(--accent-hover); }
.ws-send-btn:disabled { opacity:0.3; cursor:default; }
.ws-input-toolbar { display:flex; gap:2px; padding:4px 0 0; max-width:780px; margin:0 auto; }
.ws-tool-btn { padding:4px 8px; border:none; background:none; color:var(--text-muted); cursor:pointer; font-size:var(--text-md); border-radius:var(--radius-sm); }
.ws-tool-btn:hover { background:var(--bg); color:var(--text); }

.ws-panel { width:0; overflow:hidden; background:var(--chat-bg); border-left:1px solid var(--border); transition:width 0.2s ease; display:flex; flex-direction:column; }
.ws-panel.open { width:340px; }
.ws-panel-header { padding:12px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; font-size:var(--text-base); font-weight:600; }
.ws-panel-header .close { margin-left:auto; cursor:pointer; font-size:var(--text-lg); color:var(--text-muted); background:none; border:none; }
.ws-panel-body { flex:1; overflow-y:auto; padding:10px; }

.ws-card { padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; cursor:pointer; transition:all 0.12s; }
.ws-card:hover { border-color:var(--accent); background:var(--accent-soft); }
.ws-card .title { font-size:var(--text-base); font-weight:600; }
.ws-card .meta { font-size:var(--text-xs); color:var(--text-muted); margin-top:2px; }
.ws-badge { display:inline-block; font-size:var(--text-xs); padding:1px 7px; border-radius:4px; font-weight:600; }
.ws-badge-draft { background:#fef3c7; color:#92400e; }
.ws-badge-deployed { background:#dcfce7; color:#166534; }
.ws-badge-pending { background:#fef3c7; color:#92400e; }
.ws-badge-passed { background:#dcfce7; color:#166534; }
.ws-badge-failed { background:#fee2e2; color:#991b1b; }

.ws-loading { display:flex; align-items:center; gap:8px; padding:12px 16px; max-width:780px; margin:0 auto; font-size:var(--text-base); color:var(--text-muted); }
.ws-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; animation:wsPulse 1.2s infinite; }
.ws-dot:nth-child(2) { animation-delay:0.2s; }
.ws-dot:nth-child(3) { animation-delay:0.4s; }
@keyframes wsPulse { 0%,80%,100%{transform:scale(0.6);opacity:0.4} 40%{transform:scale(1);opacity:1} }

.ws-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--chat-bg); padding:8px 20px; border-radius:var(--radius); font-size:var(--text-base); z-index:2000; animation:wsToastIn 0.2s ease, wsToastOut 0.2s ease 1.8s forwards; pointer-events:none; }
@keyframes wsToastIn { from{opacity:0;transform:translateX(-50%) translateY(8px)} }
@keyframes wsToastOut { to{opacity:0;transform:translateX(-50%) translateY(-8px)} }

@media (max-width:768px) { .ws-sidebar{width:220px;min-width:220px;} .ws-panel.open{width:280px;} }