/* @gobbonet-split css/12-organisation.css
   Moved verbatim from style.css lines 2465-2991.
   thread search, folders, popover, branching
   Load order is a contract -- see REFACTOR-PLAN.md before reordering.
   @end-split-header */
/* ========================================================
   THREAD SEARCH BAR
======================================================== */
.thread-search-wrap {
  display: flex;
  align-items: center;
  background: var(--black);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
  margin-bottom: 4px;
}
.thread-search-wrap:focus-within {
  border-color: var(--cyan-dim);
  box-shadow: 0 0 6px rgba(0, 243, 255, 0.15);
}
.thread-search-icon {
  padding: 0 7px 0 10px;
  font-size: 13px;
  color: var(--cyan-dim);
  pointer-events: none;
  flex-shrink: 0;
  line-height: 1;
}
.thread-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--cyan-bright);
  font-family: var(--font);
  font-size: 12px;
  padding: 7px 4px;
  min-width: 0;
  letter-spacing: 0.5px;
}
.thread-search-input::placeholder { color: rgba(0, 243, 255, 0.25); }
.thread-search-clear {
  background: none;
  border: none;
  color: var(--cyan-dim);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 9px;
  line-height: 1;
  font-family: var(--font);
  transition: color var(--transition);
  flex-shrink: 0;
}
.thread-search-clear:hover { color: var(--red-neon); }

@media (max-width: 700px) {
  .thread-search-input { font-size: 16px; } /* prevent iOS zoom */
}

/* ========================================================
   FOLDER SYSTEM
======================================================== */

/* Folder section wrapper */
.folder-section {
  margin-bottom: 2px;
}

/* Folder header row */
.folder-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan-mid);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background var(--transition);
  user-select: none;
}
.folder-hdr:hover { background: rgba(0,243,255,0.05); }
.folder-chevron  { font-size: 10px; color: var(--cyan-dim); flex-shrink: 0; width: 10px; }
.folder-icon     { flex-shrink: 0; font-size: 13px; }
.folder-name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-count {
  font-size: 10px;
  color: var(--cyan-dim);
  background: rgba(0,243,255,0.08);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.folder-hdr-btns {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--transition);
  flex-shrink: 0;
}
.folder-hdr:hover .folder-hdr-btns { opacity: 1; }
.folder-btn {
  background: none;
  border: none;
  color: var(--cyan-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: var(--font);
  transition: all 0.15s;
  line-height: 1;
}
.folder-btn:hover { color: var(--cyan-bright); background: rgba(0,243,255,0.12); }
.folder-btn.folder-del:hover { color: var(--red-neon); background: rgba(255,0,60,0.1); }

/* Threads inside a folder — slight indent */
.folder-threads {
  padding-left: 10px;
}
.folder-empty {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--cyan-dim);
  font-style: italic;
  letter-spacing: 0.5px;
}

/* Pinned section header */
.pinned-hdr {
  color: var(--magenta);
  font-size: 11px;
  letter-spacing: 2px;
  cursor: default !important;
  background: rgba(217,0,255,0.04) !important;
  border-radius: var(--radius);
  margin-bottom: 2px;
}

/* Unfiled label */
.unfiled-label {
  padding: 6px 10px 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* New folder button */
.new-folder-btn {
  display: block;
  width: calc(100% - 8px);
  margin: 6px 4px 4px;
  padding: 6px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--cyan-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}
.new-folder-btn:hover {
  border-color: var(--cyan-dim);
  color: var(--cyan-bright);
  background: rgba(0,243,255,0.04);
}

/* Inline new-folder input wrap */
.new-folder-input-wrap {
  padding: 4px 4px 2px;
}

/* ========================================================
   FLOATING POPOVER (folder picker + tag editor)
======================================================== */
.sidebar-popover {
  position: fixed;
  z-index: 300;
  background: var(--elevated);
  border: 1px solid var(--cyan-dim);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,243,255,0.08);
  min-width: 180px;
  max-width: 260px;
  overflow: hidden;
  animation: fadeIn 0.12s ease-out;
}

/* Folder picker list */
.pop-list { display: flex; flex-direction: column; }
.pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--cyan-mid);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  width: 100%;
}
.pop-item:last-child { border-bottom: none; }
.pop-item:hover { background: rgba(0,243,255,0.08); color: var(--white); }
.pop-item.pop-item-active {
  color: var(--cyan-bright);
  background: rgba(0,243,255,0.06);
  font-weight: 700;
}
.pop-hint {
  padding: 8px 14px;
  font-size: 11px;
  color: var(--cyan-dim);
  font-style: italic;
  border-top: 1px solid var(--border);
}

/* Tag editor */
.pop-tag-editor { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pop-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--magenta);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.pop-tags-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.pop-empty { font-size: 11px; color: var(--cyan-dim); font-style: italic; }

/* Tags inside popover */
.pop-tag {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s, transform 0.1s;
}
.pop-tag:hover { opacity: 0.7; transform: scale(0.95); }
.tag-x { font-size: 11px; opacity: 0.7; margin-left: 2px; }
.pop-tag-sug {
  cursor: pointer;
  opacity: 0.65;
  border-style: dashed;
  transition: opacity 0.15s, transform 0.1s;
}
.pop-tag-sug:hover { opacity: 1; transform: scale(1.05); }

/* Add row */
.pop-add-row {
  display: flex;
  gap: 6px;
}
.pop-tag-input {
  flex: 1;
  background: var(--black);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--cyan-bright);
  font-family: var(--font);
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  transition: border-color 0.15s;
}
.pop-tag-input:focus { border-color: var(--cyan-dim); }
.pop-tag-input::placeholder { color: rgba(0,243,255,0.25); }
.pop-add-btn {
  background: rgba(0,243,255,0.08);
  border: 1px solid var(--cyan-dim);
  border-radius: 4px;
  color: var(--cyan-bright);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 10px;
  transition: all 0.15s;
  line-height: 1;
}
.pop-add-btn:hover { background: var(--cyan-bright); color: var(--black); }

/* Mobile: touch-friendly popovers */
@media (max-width: 700px) {
  .sidebar-popover { min-width: 220px; }
  .pop-item { padding: 12px 16px; font-size: 14px; }
  .pop-tag-input { font-size: 16px; } /* prevent iOS zoom */
}

/* ========================================================
   BRANCHING CONVERSATIONS
   Branch origin bar, fork-point indicators, sibling nav,
   and sidebar badges for branched/forked threads.
======================================================== */

/* ── Branch origin bar (shown at top of a forked thread) ── */
.branch-origin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: rgba(217, 0, 255, 0.07);
  border: 1px solid rgba(217, 0, 255, 0.25);
  border-left: 3px solid var(--magenta);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--magenta);
  flex-shrink: 0;
  align-self: stretch;
  flex-wrap: wrap;
  gap: 8px;
  animation: fadeIn 0.2s ease-out;
}

.branch-origin-icon {
  font-size: 15px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(217,0,255,0.5));
}

.branch-origin-label {
  flex: 1;
  min-width: 0;
  color: rgba(217, 0, 255, 0.8);
  letter-spacing: 0.3px;
}

.branch-origin-link {
  background: none;
  border: none;
  color: var(--cyan-bright);
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  padding: 0 2px;
  text-decoration: underline dotted;
  transition: color 0.15s, text-shadow 0.15s;
}
.branch-origin-link:hover {
  color: var(--white);
  text-shadow: var(--glow-text-c);
}

/* ── Sibling navigation (prev/next branch) ── */
.branch-sibling-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.branch-nav-btn {
  background: rgba(217, 0, 255, 0.12);
  border: 1px solid var(--magenta-dim);
  border-radius: 4px;
  color: var(--magenta);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 3px 10px;
  line-height: 1;
  transition: all var(--transition);
}
.branch-nav-btn:hover:not(:disabled) {
  background: var(--magenta);
  color: var(--white);
  box-shadow: var(--glow-magenta);
}
.branch-nav-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

.branch-nav-label {
  font-size: 11px;
  color: var(--magenta);
  letter-spacing: 0.5px;
  white-space: nowrap;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(217,0,255,0.4);
}

/* ── Fork-point indicator (shown in parent thread after forked message) ── */
.branch-fork-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 14px 6px 20px;
  font-size: 11px;
  color: var(--magenta-dim);
  border-left: 2px solid rgba(217, 0, 255, 0.25);
  margin-left: 8px;
  position: relative;
  align-self: flex-start;
  width: calc(100% - 8px);
}
.branch-fork-line::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 1px;
  background: rgba(217, 0, 255, 0.35);
}

.branch-fork-line-icon {
  color: var(--magenta);
  font-size: 13px;
  opacity: 0.7;
  flex-shrink: 0;
}

.branch-fork-label {
  color: rgba(217, 0, 255, 0.55);
  font-size: 11px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.branch-fork-btn {
  background: rgba(217, 0, 255, 0.08);
  border: 1px solid rgba(217, 0, 255, 0.25);
  border-radius: 10px;
  color: var(--magenta);
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  padding: 3px 11px;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  letter-spacing: 0.3px;
}
.branch-fork-btn:hover {
  background: var(--magenta);
  color: var(--white);
  box-shadow: var(--glow-magenta);
  border-color: var(--magenta);
}

/* ── Branch action button on messages ── */
.msg-action-btn.btn-branch {
  border-color: rgba(217, 0, 255, 0.5);
  color: var(--magenta);
}
.msg-action-btn.btn-branch:hover {
  background: var(--magenta);
  color: var(--white);
  box-shadow: var(--glow-magenta);
  border-color: var(--magenta);
}

/* ── Sidebar badges for branched/forked threads ── */
.thread-branch-badge {
  font-size: 10px;
  color: var(--magenta);
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.75;
  filter: drop-shadow(0 0 3px rgba(217,0,255,0.5));
}

/* Detached-generation indicator: this thread has a reply cooking on the
   server. Pulses so it reads as "live" even when the thread is off-screen
   or the page was reloaded mid-generation. */
.thread-gen-badge {
  font-size: 8px;
  color: var(--green-neon, #7fd97f);
  flex-shrink: 0;
  line-height: 1;
  animation: gen-badge-pulse 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(0, 255, 115, 0.55));
}
@keyframes gen-badge-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.thread-fork-count {
  font-size: 9px;
  color: var(--magenta);
  background: rgba(217, 0, 255, 0.12);
  border: 1px solid rgba(217, 0, 255, 0.3);
  border-radius: 8px;
  padding: 0px 5px;
  flex-shrink: 0;
  line-height: 1.6;
  letter-spacing: 0px;
  font-weight: 700;
}

/* Mobile adjustments */
@media (max-width: 700px) {
  .branch-origin-bar {
    padding: 7px 10px;
    font-size: 11px;
    gap: 6px;
  }
  .branch-nav-btn { padding: 4px 10px; font-size: 11px; }
  .branch-fork-line { padding: 5px 10px 5px 16px; gap: 6px; }
  .branch-fork-btn { font-size: 10px; padding: 3px 9px; max-width: 140px; }
  .msg-action-btn.btn-branch { font-size: 11px; }
}