/* ============================================================
   Multi-workspace — switcher dropdown + create/edit modal.
   Uses the app's existing tokens so it matches the Warm Editorial
   Calm redesign (paper + iris/gold). Companion to js/workspaces.js.
   ============================================================ */

/* ---- the little logo chip (mirrors .sb-logo) ---- */
.ws-chip {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--brand, #5b5bd6);
  color: #fff; font-weight: 700; font-size: 12px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* ---- the switcher popover (openPopover adds .popover) ---- */
.popover.ws-switcher { padding: 6px; min-width: 244px; }
.ws-switch-head {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); padding: 6px 8px 4px;
}
.ws-switch-list { display: flex; flex-direction: column; gap: 1px; }
.ws-switch-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 8px; border: 0; background: transparent;
  border-radius: 9px; cursor: pointer; text-align: left;
  color: var(--text); font: inherit;
  transition: background 0.12s var(--ease-out, ease);
}
.ws-switch-item:hover { background: var(--bg-hover, rgba(120, 120, 160, 0.12)); }
.ws-switch-item.is-active { background: var(--bg-active, rgba(120, 120, 160, 0.10)); }
.ws-switch-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 500;
}
.ws-switch-check { flex: none; display: inline-flex; color: var(--brand, #5b5bd6); }
.ws-switch-edit {
  flex: none; display: inline-flex; color: var(--text-faint);
  opacity: 0; padding: 3px; border-radius: 6px;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.ws-switch-item:hover .ws-switch-edit { opacity: 1; }
.ws-switch-edit:hover { background: var(--bg-hover, rgba(120, 120, 160, 0.18)); color: var(--text); }

.ws-switch-new {
  display: flex; align-items: center; gap: 9px;
  width: 100%; margin-top: 5px; padding: 8px;
  border: 0; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px;
  background: transparent; cursor: pointer; text-align: left;
  color: var(--text-light); font: inherit; font-size: 13.5px; font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.ws-switch-new:hover { background: var(--bg-hover, rgba(120, 120, 160, 0.12)); color: var(--text); }
.ws-switch-new svg { flex: none; }

/* ---- create / edit workspace modal ---- */
.modal.ws-editor-modal { width: min(440px, calc(100vw - 24px)); }
.ws-editor-body { padding: 18px 20px 6px; display: flex; flex-direction: column; gap: 18px; }
.ws-field { display: flex; flex-direction: column; gap: 8px; }
.ws-field-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-light);
}
.ws-name-wrap { display: flex; gap: 8px; }
.ws-emoji-input {
  flex: none; width: 46px; text-align: center;
  padding: 9px 0; font-size: 18px;
  border: 1px solid var(--border); border-radius: var(--radius-ctl, 8px);
  background: var(--bg-input, var(--bg)); color: var(--text);
}
.ws-name-input {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-ctl, 8px);
  background: var(--bg-input, var(--bg)); color: var(--text);
}
.ws-name-input:focus, .ws-emoji-input:focus {
  outline: none; border-color: var(--brand, #5b5bd6);
  box-shadow: 0 0 0 3px var(--brand-ghost, rgba(91, 91, 214, 0.18));
}
.ws-name-input.ws-input-err { border-color: var(--danger, #ef4444); }

.ws-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform 0.1s var(--ease-out, ease);
}
.ws-swatch:hover { transform: scale(1.12); }
.ws-swatch.is-on {
  border-color: var(--bg, #fff);
  box-shadow: 0 0 0 2px var(--text), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.ws-del-copy { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-light); }
.ws-del-copy b { color: var(--text); font-weight: 600; }

.ws-editor-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px 18px;
}
.ws-save-btn {
  padding: 9px 16px; border: 0; border-radius: var(--radius-ctl, 8px);
  background: var(--brand, #5b5bd6); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: filter 0.12s;
}
.ws-save-btn:hover { filter: brightness(1.06); }
.ws-cancel-btn {
  padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius-ctl, 8px);
  background: transparent; color: var(--text-light);
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.ws-cancel-btn:hover { background: var(--bg-hover, rgba(120, 120, 160, 0.12)); color: var(--text); }
.ws-del-btn {
  padding: 9px 14px; border: 1px solid transparent; border-radius: var(--radius-ctl, 8px);
  background: transparent; color: var(--danger, #ef4444);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background 0.12s;
}
.ws-del-btn:hover { background: var(--danger-ghost, rgba(239, 68, 68, 0.12)); }
.ws-del-btn:disabled { opacity: 0.6; cursor: default; }