/* ============================================================
   SIDEBAR (black) — shared across every screen
   ============================================================ */
.cl-side {
  width: var(--side-w, 220px);
  flex: none;
  background: var(--side-bg);
  border-right: 1px solid #000;
  position: relative;
  --ink: #f3f3f3;
  --ink-2: #c9ccd1;
  --muted: #9aa0a6;
  --faint: #6b7178;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .14);
  --rail: rgba(255, 255, 255, .06);
  --panel: rgba(255, 255, 255, .08);
  --accent: var(--lime);
  --accent-2: #cdec00;
  --accent-soft: rgba(222, 255, 0, .16);
  --on-accent: #1c1206; /* accent is lime — readable text/icons on it are dark */
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-4);
}

/* desktop resize grip — sits on the sidebar's right edge, lime line on hover */
.cl-side-resize {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 20;
}
.cl-side-resize::after {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 2px;
  height: 100%;
  background: transparent;
  transition: background .12s;
}
.cl-side-resize:hover::after,
.cl-side-resize:active::after { background: var(--accent); }

/* presence: avatar + name + 1-click status dots */
.cl-presence-side {
  margin: var(--sp-1) 0 var(--sp-6);
  padding: 0 var(--sp-6) var(--sp-6);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 11px;
}
.cl-presence-side .cl-side-me-av {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  flex: none;
}
.cl-presence-side .me-status {
  font-size: var(--fs-4);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cl-presence-side .me-dots {
  display: flex;
  gap: var(--sp-4);
  margin-left: auto;
  flex: none;
}
.cl-presence-side .me-dot-form { margin: 0; display: inline-flex; }
.cl-presence-side .me-dot {
  width: 16px;
  height: 16px;
  border: 0;
  padding: 0;
  border-radius: 5px;
  cursor: pointer;
  background: #5b616b;
  transition: background .12s;
}
.cl-presence-side .me-dot:hover { background: var(--dot); }
.cl-presence-side .me-dot.on { background: var(--dot); }

/* On a live call: the active presence dot goes amber — a derived "on the phone"
   state you can't pick, it just shows while a call is live. */
.cl-presence-side .me-dots.is-on-call .me-dot.on,
.cl-presence-side .me-dots.is-on-call .me-dot.on:hover { background: var(--amber); }

/* main navigation */
.cl-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: 0 10px 14px;
  margin: 10px var(--sp-2) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.cl-navit {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 38px;
  padding: 0 var(--sp-5);
  border-radius: 9px;
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.cl-navit svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.cl-navit:hover { background: rgba(255, 255, 255, .06); }
.cl-navit.on { background: rgba(255, 255, 255, .10); color: var(--accent); box-shadow: none; }
.cl-navit.on svg { color: var(--accent); }

/* Nav row that carries an inline action (Tasks → "new task" plus) */
.cl-navit--has-add { padding: 0 var(--sp-3) 0 0; gap: 0; }
.cl-navit__hit {
  display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0;
  height: 100%; padding: 0 var(--sp-5); color: inherit; text-decoration: none;
}
.cl-navadd {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer;
}
.cl-navadd svg { width: 15px; height: 15px; }
.cl-navadd:hover { background: var(--accent); color: var(--on-accent); }
.cl-navadd:hover svg { color: var(--on-accent); }

/* scroll body */
.cl-side-scroll { flex: 1; overflow-y: auto; padding: 0 var(--sp-4); }
.cl-sec { margin: 0 0 18px; }
.cl-sec-h {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.cl-sub-h {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px var(--sp-4) 5px;
  font-size: var(--fs-2);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}
.cl-sub-h svg { width: 13px; height: 13px; }

/* favorites / open-task rail items */
.cl-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 7px;
  font-size: var(--fs-4);
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
}
.cl-item:hover { background: rgba(255, 255, 255, .06); }
.cl-item .av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--white);
  display: grid;
  place-items: center;
}
.cl-item .nm {
  flex: 1;
  min-width: 0;
  font-family: var(--read);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-item.is-on { color: var(--accent); font-weight: 600; }

/* ---- pages tree (keeps kb- hooks for DnD + e2e; restyled here) ---- */
.cl-side .kb-sidebar__nav { list-style: none; padding: 0; margin: 0; }
.cl-side .kb-sidebar__nav--sub { padding-top: var(--sp-1); }
.cl-side .kb-sidebar__item { list-style: none; margin: 0; }
.cl-side .kb-sidebar__item--dragging { opacity: .4; }

.cl-side .kb-sidebar__folder { list-style: none; margin-bottom: var(--sp-1); }
.cl-side .kb-sidebar__folder + .kb-sidebar__folder { margin-top: var(--sp-3); }
.cl-side .kb-sidebar__folder-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 7px;
  font-weight: 700;
  color: var(--ink);
  position: relative;
}
.cl-side .kb-sidebar__folder-header:hover { background: rgba(255, 255, 255, .045); }

/* Folder icon is both the drag handle (reorder folders) and the collapse
   toggle: open-folder when expanded, closed-folder when the page list is
   hidden. Drag to reorder, click to collapse. */
.cl-side .kb-sidebar__folder-toggle {
  flex: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: grab;
  color: inherit;
  display: inline-flex;
  line-height: 0;
}
.cl-side .kb-sidebar__folder-toggle:active { cursor: grabbing; }
.cl-side .kb-sidebar__folder-icon { color: var(--muted); flex: none; display: inline-flex; }
.cl-side .kb-sidebar__folder .icon-closed { display: none; }
.cl-side .kb-sidebar__folder.is-collapsed .icon-open { display: none; }
.cl-side .kb-sidebar__folder.is-collapsed .icon-closed { display: inline-flex; }
.cl-side .kb-sidebar__folder.is-collapsed .kb-sidebar__folder-pages { display: none; }
.cl-side .kb-sidebar__folder-count {
  flex: none;
  font-size: var(--fs-2);
  font-weight: 400;
  color: var(--faint);
}
.cl-side .kb-sidebar__folder-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-side .kb-sidebar__folder-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-1) 3px;
  color: var(--faint);
  border-radius: 3px;
  opacity: 0;
  transition: opacity .1s;
  display: flex;
  align-items: center;
}
.cl-side .kb-sidebar__folder-header:hover .kb-sidebar__folder-delete { opacity: 1; }
.cl-side .kb-sidebar__folder-delete:hover { color: var(--red); background: rgba(252, 62, 34, .12); }
.cl-side .kb-sidebar__folder--over .kb-sidebar__folder-header {
  background: var(--accent-soft);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* page items — indented tree children with a guide line */
.cl-side .kb-sidebar__folder-pages {
  list-style: none;
  padding: 0;
  margin: var(--sp-1) 0 var(--sp-2) var(--sp-6);
  padding-left: 13px;
  position: relative;
}
.cl-side .kb-sidebar__folder-pages::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  background: var(--line-2);
}
.cl-side .kb-sidebar__link,
.cl-side .kb-sidebar__page-name {
  display: block;
  padding: 5px var(--sp-4);
  border-radius: 7px;
  text-decoration: none;
  font-family: var(--read);
  font-size: var(--fs-4);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-side .kb-sidebar__link:hover { background: rgba(255, 255, 255, .045); color: var(--ink-2); }
.cl-side .kb-sidebar__link--active {
  color: var(--accent);
  font-weight: 600;
  background: transparent;
}
.cl-side .kb-sidebar__link--active:hover { background: rgba(255, 255, 255, .045); color: var(--accent); }
.cl-side .kb-sidebar__link--editing { padding: 0; }
/* Active page: lime segment over the tree guide line (matches the handoff).
   Lives on the <li>, not the link — the link clips its ::before via
   overflow:hidden (used for text ellipsis). */
.cl-side .kb-sidebar__folder-pages .kb-sidebar__item { position: relative; }
.cl-side .kb-sidebar__folder-pages .kb-sidebar__item:has(.kb-sidebar__link--active)::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  background: var(--accent);
}
.cl-side .kb-sidebar__page-name[contenteditable]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  cursor: text;
  overflow: visible;
  text-overflow: clip;
}

/* drop marker reused by the page-tree DnD */
.cl-side .kb-drop-marker { height: 0; overflow: visible; pointer-events: none; position: relative; margin: 0; }
.cl-side .kb-drop-marker::before {
  content: '';
  display: block;
  position: absolute;
  inset-inline: 0;
  top: -3px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* failed-jobs alert */
.cl-side .kb-sidebar__alert {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 var(--sp-5) 10px;
  padding: var(--sp-4) 10px;
  font-size: var(--fs-3);
  font-weight: 600;
  text-decoration: none;
  color: #ffb4a8;
  background: rgba(252, 62, 34, .14);
  border: 1px solid rgba(252, 62, 34, .3);
  border-radius: 8px;
}
.cl-side .kb-sidebar__alert:hover { background: rgba(252, 62, 34, .22); }
.cl-side .kb-sidebar__alert svg { flex-shrink: 0; }

/* account menu: avatar in the presence row opens profile / log out.
   The menu pops over the dark sidebar, so it uses explicit light values
   rather than the sidebar's inverted vars. */
.cl-me { position: relative; flex: none; line-height: 0; }
.cl-me__av {
  padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; border-radius: 50%;
}
.cl-me__av:hover { box-shadow: 0 0 0 2px var(--accent); }
.cl-me__menu {
  position: absolute; z-index: 50; top: calc(100% + 8px); left: 0; min-width: 168px;
  padding: 5px; border: 1px solid #e2e4e7; border-radius: 11px;
  background: var(--white); box-shadow: 0 22px 48px -20px rgba(0, 0, 0, .55);
}
.cl-me__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: var(--sp-4) 10px; border-radius: 7px; border: 0; background: none; cursor: pointer;
  font-size: var(--fs-4); font-weight: 600; color: #1d2127;
  text-align: left; text-decoration: none;
}
.cl-me__menu form { margin: 0; display: block; }
.cl-me__item svg { color: var(--muted); flex: none; }
.cl-me__item:hover { background: var(--rail); }
.cl-me__item--danger { color: #d92d20; }
.cl-me__item--danger svg { color: #d92d20; }