/* SaleAnimal Workspace — Claude Desktop Style Layout */
/* Left sidebar (chats/folders) | Main (editor top, SA chat bottom) */

@font-face{font-family:'Helvetica Now Display';src:url('HelveticaNowDisplay-Regular/HelveticaNowDisplay-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Helvetica Now Display';src:url('HelveticaNowDisplay-Bold/HelveticaNowDisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root {
  --ws-bg: #F8F9FA;
  --ws-surface: #ffffff;
  --ws-surface-hover: #f0f0f0;
  --ws-border: rgba(0,0,0,0.08);
  --ws-text: #000000;
  --ws-text-secondary: #666666;
  --ws-text-muted: #999999;
  --ws-accent: #000000;
  --ws-font: 'Helvetica Now Display', -apple-system, sans-serif;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; font-family:var(--ws-font) !important; }

body { background:var(--ws-bg); color:var(--ws-text); display:flex; height:100vh; overflow:hidden; }

/* ── MAIN NAV SIDEBAR (always visible) ── */
#ws-nav-sidebar {
  width:200px; background:var(--ws-surface); border-right:1px solid var(--ws-border);
  display:flex; flex-direction:column; flex-shrink:0; overflow-y:auto;
}
.ws-logo { padding:14px 10px; cursor:pointer; text-align:center; }
.ws-logo img { width:117px; height:auto; margin-top:16px; }
.ws-nav { flex:1; padding:0 4px 8px; display:flex; flex-direction:column; align-items:center; }
/* Aspect ratio matches button.png (2000:963 ≈ 2.08:1) so the pill doesn't warp */
/* margin-top:16px = 16px space above every button in the left menu */
.ws-nav-btn {
  display:flex; align-items:center; justify-content:center; width:117px; height:56px; padding:0 21px;
  margin-top:16px;
  border:none; background:url('button.png') center/100% 100% no-repeat;
  color:#000; cursor:pointer; font-size:10px; font-weight:600;
  text-decoration:none; transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .25s ease;
  font-family:'Playfair Display',serif; letter-spacing:.01em; text-align:center;
  line-height:1; white-space:nowrap; overflow:hidden; will-change:transform,filter;
}
@media (hover:hover){
  .ws-nav-btn:hover { transform:translateY(-5px) scale(1.06); filter:brightness(1.08); }
}
.ws-nav-btn:active { transform:translateY(-1px) scale(1.02); filter:brightness(.98); transition:transform .1s,filter .1s; }
.ws-nav-btn.active { color:#000; font-weight:700; }
.ws-nav-btn-sm { width:98px !important; height:47px !important; font-size:9px !important; padding:0 16px !important; }

/* ── WORKSPACE SIDEBAR (chats/folders, inside workspace) ── */
#ws-sidebar {
  width:240px; background:var(--ws-surface); border-right:1px solid var(--ws-border);
  display:flex; flex-direction:column; flex-shrink:0; overflow:hidden;
}

#ws-new-chat-btn {
  margin:12px 12px 8px; padding:10px; background:#000; color:#fff; border:none;
  border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; text-align:center;
  transition:background .15s;
}
#ws-new-chat-btn:hover { background:#222; }

.ws-sidebar-section-title {
  padding:8px 14px 4px; font-size:11px; font-weight:700; color:var(--ws-text-muted);
  text-transform:uppercase; letter-spacing:.5px;
}
.ws-sidebar-list { overflow-y:auto; max-height:none; }

/* Chat items */
.ws-chat-item {
  display:flex; align-items:center; padding:8px 14px; cursor:pointer; font-size:13px;
  color:var(--ws-text-secondary); transition:background .1s; gap:6px;
  border-radius:6px; margin:1px 8px;
}
.ws-chat-item:hover { background:var(--ws-surface-hover); color:var(--ws-text); }
.ws-chat-item.active { background:rgba(0,0,0,0.06); color:var(--ws-text); font-weight:600; }
.ws-chat-item .ws-del { display:none; margin-left:auto; background:none; border:none; color:#e53935; font-size:14px; cursor:pointer; flex-shrink:0; }
.ws-chat-item:hover .ws-del { display:block; }

/* Tree items (pages/folders) */
.ws-tree-item {
  display:flex; align-items:center; padding:6px 14px; cursor:pointer; font-size:12px;
  color:var(--ws-text-secondary); transition:background .1s; gap:6px; border-radius:6px; margin:1px 8px;
}
.ws-tree-item:hover { background:var(--ws-surface-hover); color:var(--ws-text); }
.ws-tree-item.active { background:rgba(0,0,0,0.06); color:var(--ws-text); font-weight:600; }
.ws-tree-item .ws-del { display:none; margin-left:auto; background:none; border:none; color:#e53935; font-size:13px; cursor:pointer; }
.ws-tree-item:hover .ws-del { display:block; }
.ws-tree-folder-row { display:flex; align-items:center; padding:6px 14px; }
.ws-tree-folder-row .ws-tree-folder-name { font-weight:600; color:var(--ws-text-secondary); font-size:11px; text-transform:uppercase; letter-spacing:.4px; flex:1; }
.ws-tree-folder-row .ws-del { display:none; background:none; border:none; color:#e53935; font-size:12px; cursor:pointer; }
.ws-tree-folder-row:hover .ws-del { display:block; }
.ws-tree-add { color:var(--ws-text-muted); font-size:11px; }

/* Trash */
.ws-trash-item { padding:5px 14px; font-size:11px; color:var(--ws-text-muted); display:flex; align-items:center; gap:4px; }
.ws-trash-item .ws-restore { background:none; border:none; font-size:10px; color:#1976d2; cursor:pointer; margin-left:auto; }

/* Bottom nav links */
.ws-sidebar-nav-links { padding:8px 14px; border-top:1px solid var(--ws-border); display:flex; flex-wrap:wrap; gap:4px 10px; }
.ws-sidebar-nav-links a { font-size:11px; color:var(--ws-text-muted); text-decoration:none; }
.ws-sidebar-nav-links a:hover { color:var(--ws-text); }

/* ── MAIN AREA ── */
#ws-main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* Editor area (top, takes remaining space) */
#ws-editor-area { flex:1; display:flex; flex-direction:column; overflow:hidden; }
#ws-topbar { padding:8px 20px; border-bottom:1px solid var(--ws-border); background:var(--ws-surface); flex-shrink:0; display:flex; align-items:center; }
#ws-editor-container { flex:1; overflow-y:auto; padding:32px 48px; max-width:900px; width:100%; margin:0 auto; }
#ws-page-title {
  font-size:32px; font-weight:700; color:var(--ws-text); border:none; outline:none;
  margin-bottom:16px; line-height:1.2; width:100%; min-height:40px;
}
#ws-page-title:empty:before { content:attr(placeholder); color:#000; animation:wsBlink 1.5s ease-in-out infinite; }
#ws-editor { min-height:200px; font-size:15px; line-height:1.7; color:var(--ws-text); outline:none; }
@keyframes wsBlink { 0%,100%{opacity:1} 50%{opacity:0.3} }
#ws-editor:empty:before { content:'Press "/" for tools or "$" for SpiritAnimal'; color:#000; font-size:16px; animation:wsBlink 1.5s ease-in-out infinite; cursor:text; }
#ws-editor p { margin-bottom:8px; }
#ws-editor h1 { font-size:28px; font-weight:700; margin:20px 0 10px; }
#ws-editor h2 { font-size:22px; font-weight:700; margin:18px 0 8px; }
#ws-editor h3 { font-size:18px; font-weight:600; margin:14px 0 6px; }
#ws-editor table { width:100%; border-collapse:collapse; margin:10px 0; }
#ws-editor th, #ws-editor td { border:1px solid var(--ws-border); padding:6px 10px; text-align:left; font-size:13px; }
#ws-editor th { background:var(--ws-bg); font-weight:700; }
#ws-editor blockquote { border-left:3px solid #000; padding-left:14px; color:var(--ws-text-secondary); margin:10px 0; }

/* Save status */
#ws-save-status { font-size:11px; color:var(--ws-text-muted); }

@keyframes wsRainbow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ws-sa-rainbow-text { font-size:14px; font-weight:700; background:linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#0088ff,#8800ff,#ff00ff,#ff0000); background-size:300% 300%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:wsRainbow 2s linear infinite; }

/* Page drop overlay */
#ws-page-drop-overlay {
  display:none; position:absolute; inset:0; z-index:50;
  background:rgba(255,255,255,0.92); align-items:center; justify-content:center;
  flex-direction:column; gap:12px; border:3px dashed transparent;
  border-image:linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#0088ff,#8800ff,#ff00ff) 1;
  pointer-events:none;
}
#ws-page-drop-overlay.active { display:flex; }

/* ── SLASH MENU ── */
#ws-slash-menu {
  position:fixed; background:var(--ws-surface); border:1px solid var(--ws-border);
  border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,0.12); padding:4px 0;
  min-width:220px; z-index:1000; display:none;
}
.ws-slash-item { padding:8px 14px; cursor:pointer; font-size:13px; color:var(--ws-text); transition:background .1s; }
.ws-slash-item:hover { background:var(--ws-surface-hover); }
.ws-slash-group { padding:6px 14px; font-size:10px; color:var(--ws-text-muted); text-transform:uppercase; letter-spacing:.5px; font-weight:600; }

/* AI prompt inline */
.ws-ai-prompt { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--ws-surface); border:1px solid var(--ws-border); border-radius:8px; margin:4px 0; }
.ws-ai-prompt input { flex:1; background:transparent; border:none; outline:none; color:var(--ws-text); font-size:14px; }

/* SA conversation zone (rainbow left border) */
.ws-sa-zone {
  position:relative; margin:12px 0; padding:12px 16px; border-radius:8px;
  border-left:4px solid transparent;
  border-image:linear-gradient(180deg,#ff0000,#ff8800,#ffff00,#00ff00,#0088ff,#8800ff,#ff00ff) 1;
  background:#fff;
}

/* SA marker (unicorn header inside zone) */
.ws-sa-marker { font-size:24px; margin-bottom:8px; user-select:none; cursor:default; }

/* SA input line (where user types on the page) */
.ws-sa-input-line { color:var(--ws-text); min-height:1.4em; }
.ws-sa-input-line:empty:before { content:'Type your message to SpiritAnimal and press Enter...'; color:var(--ws-text-muted); font-size:14px; }

/* SA thinking indicator */
.ws-sa-thinking-line { color:var(--ws-text-muted); font-size:14px; animation:wsBlink 1s ease-in-out infinite; user-select:none; }

/* SA response block (lives on the page) */
#ws-editor .ws-sa-response { background:var(--ws-bg); border-left:2px solid #000; padding:6px 10px; margin:4px 0; border-radius:0 6px 6px 0; line-height:1.3 !important; font-size:13px !important; position:relative; }
#ws-editor .ws-sa-response table { width:100%; border-collapse:collapse; margin:4px 0; font-size:9px !important; page-break-inside:avoid; }
@media print { .ws-sa-response table, .ws-sa-response div { page-break-inside:avoid; } }
#ws-editor .ws-sa-response table.ws-cma-subject-tbl { width:50% !important; }
#ws-editor .ws-sa-response table.ws-cma-subject-tbl th,
#ws-editor .ws-sa-response table.ws-cma-subject-tbl td { padding:1px 4px !important; font-size:8px !important; white-space:nowrap; }
#ws-editor .ws-sa-response th, #ws-editor .ws-sa-response td { border:1px solid var(--ws-border); padding:2px 5px !important; text-align:left; font-size:9px !important; }
#ws-editor .ws-sa-response th { background:#fff; font-weight:700; font-size:8px !important; }
#ws-editor .ws-sa-response h1 { font-size:13px !important; margin:5px 0 2px !important; }
#ws-editor .ws-sa-response h2 { font-size:10px !important; margin:4px 0 2px !important; }
#ws-editor .ws-sa-response h3 { font-size:9px !important; margin:3px 0 1px !important; }
#ws-editor .ws-sa-response p { margin:2px 0 !important; font-size:10px !important; }
#ws-editor .ws-sa-response b, #ws-editor .ws-sa-response strong { font-size:inherit; }
#ws-editor .ws-sa-response hr { margin:4px 0 !important; }
.ws-sa-response-del { display:block; margin-top:10px; background:none; border:none; color:#e53935; font-size:11px; cursor:pointer; }
.ws-sa-response-del:hover { text-decoration:underline; }

/* File chips on the page */
.ws-sa-file-chips { margin:4px 0; user-select:none; }

/* ── MOBILE ── */
@media (max-width:768px) {
  body { overflow-x:hidden; width:100vw; }
  #ws-nav-sidebar { display:none; }
  #ws-sidebar { display:none; }
  #ws-main { width:100vw; max-width:100vw; overflow-x:hidden; }
  #ws-editor-area { width:100%; max-width:100%; overflow-x:hidden; }
  #ws-editor-container { padding:12px 8px; max-width:100%; box-sizing:border-box; }
  #ws-page-title { font-size:20px; }
  #ws-editor { font-size:14px; max-width:100%; overflow-x:hidden; }
  #ws-sa-chat { max-height:50vh; }
  /* SA responses: prevent overflow */
  #ws-editor .ws-sa-response { max-width:100% !important; overflow-x:auto !important; box-sizing:border-box !important; }
  #ws-editor .ws-sa-response table { display:block !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  /* Inputs: prevent zoom on iOS */
  input,textarea { font-size:16px !important; }
  /* Slash menu: full width */
  #ws-slash-menu { min-width:auto; left:8px !important; right:8px !important; max-width:calc(100vw - 16px); }
}