/* =========================================================
   CastSense Coach — chat page
   ========================================================= */
.beta-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
}

.coach-main {
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: stretch;
}

/* Shared hide rule — used by both the gate screen and chat screen.
   Without this, toggling .is-hidden on an element with no matching
   rule leaves it fully visible (this caused the access code to stay
   on screen next to the chat panel after logging in). */
.is-hidden {
  display: none !important;
}

@media (max-width: 860px) {
  .coach-main {
    flex-direction: column;
  }

  .chat {
    max-width: 100%;
  }
}

/* ---- Gate screen ---- */
.gate {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem) 1.25rem;
}

.gate__card {
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.gate__card h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.gate__card > p {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: 1.55;
  margin-bottom: var(--space-6);
}

.gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}

.gate__form label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.gate__form input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-md);
  min-height: 48px;
  text-align: center;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.gate__form input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.gate__form button {
  margin-top: var(--space-2);
}

.gate__error {
  margin-top: var(--space-4);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 1.2em;
}

/* ---- Chat screen ---- */
.chat {
  flex: 1;
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
}

.chat__head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

.chat__welcome {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.chat__disclaimer {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
  font-size: var(--text-sm);
  line-height: 1.55;
  font-style: italic;
  color: var(--color-text);
}

.chat__log {
  flex: 1;
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 240px;
}

.chat__msg {
  max-width: 88%;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: 1.6;
  white-space: pre-wrap;
}

.chat__msg--user {
  align-self: flex-end;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.chat__msg--coach {
  align-self: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.chat__msg--coach.is-loading {
  color: var(--color-text-faint);
  font-style: italic;
}

.chat__msg--error {
  align-self: flex-start;
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
  color: var(--color-text);
}

/* Length-limit notice on a cut-short coach reply (contract 1.7.1).
   Block-level so it sits on its own line under the reply text. */
.chat__truncated {
  display: block;
  margin-top: 0.6em;
  padding-top: 0.5em;
  border-top: 1px solid color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
  color: var(--color-text-muted, var(--color-text));
  font-style: italic;
  font-size: 0.92em;
}

/* Composer layout: textarea always full-width across the top,
   action buttons on a second row underneath. The old single-flex-row
   was crushing the textarea to ~120px on desktop as more buttons
   (Upload, Compare spots) were added. This layout scales from mobile
   to wide desktop without media-query gymnastics. */
.chat__form {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  bottom: var(--space-4);
}

.chat__form textarea {
  order: 1;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: var(--font-body);
  resize: vertical;
  min-height: 64px;
}

.chat__form textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Action row: left cluster of photo/spot buttons, right-aligned send. */
.chat__form-actions {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.chat__form-actions .chat__photo-btn {
  flex: 0 0 auto;
}

.chat__form-actions #chat-send {
  margin-left: auto;
  flex: 0 0 auto;
}

.chat__form button {
  flex-shrink: 0;
}

.chat__form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chat__micro {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
}

@media (max-width: 560px) {
  .chat__msg { max-width: 100%; }
  .chat__form-actions {
    gap: var(--space-2);
  }
  .chat__form-actions .chat__photo-btn {
    flex: 1 1 0;
  }
  .chat__form-actions #chat-send {
    margin-left: 0;
    flex: 1 1 100%;
  }
}

/* ---- Secondary button (Tackle Box toggle, back button) ---- */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  min-height: 40px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: var(--color-primary);
}

.chat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ---- Photo button + preview ---- */
.chat__photo-btn {
  flex-shrink: 0;
  min-height: 48px;
  min-width: 48px;
  padding: 0 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease-standard), background-color 0.2s var(--ease-standard);
}

.chat__photo-btn:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.chat__photo-btn.is-active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  color: var(--color-primary);
}

.photo-preview-bar {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.photo-preview-bar img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.photo-preview-name {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-preview-clear {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}

.photo-preview-clear:hover {
  color: var(--color-warning);
  border-color: var(--color-warning);
}

/* ---- Spot picker (docs/spot-picker.md) ---- */
.spot-picker {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.spot-picker__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.spot-picker__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  white-space: nowrap;
}

.spot-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.spot-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.5rem 0.3rem 0.7rem;
  border-radius: var(--radius-full, 999px);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.spot-chip__remove {
  border: none;
  background: transparent;
  color: inherit;
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
}

.spot-chip__remove:hover {
  color: var(--color-warning);
}

.spot-picker__typeahead {
  position: relative;
  flex: 1;
  min-width: 180px;
}

.spot-picker__input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-body);
}

.spot-picker__input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.spot-picker__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.spot-picker__suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12));
  max-height: 220px;
  overflow-y: auto;
}

.spot-picker__suggestion {
  padding: 0.5rem 0.9rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.spot-picker__suggestion:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}

.spot-picker__row--free-text {
  gap: var(--space-3);
}

.spot-picker__free-input {
  flex: 1;
  min-width: 160px;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-body);
}

.spot-picker__free-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

@media (max-width: 560px) {
  .spot-picker__row { flex-direction: column; align-items: stretch; }
  .spot-picker__row--free-text { flex-direction: column; }
}

.chat__msg--coach img.chat__photo-thumb,
.chat__msg--user img.chat__photo-thumb {
  max-width: 220px;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: var(--space-2);
}

.chat__mode-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.chat__gear-save {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.chat__gear-save:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.chat__gear-save:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ---- Feedback widget (👍 / 👎 / 📝, per coach reply) ---- */
/* Restyled for prominence: solid filled buttons instead of transparent
   chips, a caption above them, and a divider above the whole widget so
   the feedback affordance visually detaches from the coach reply. */
.chat__feedback {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chat__feedback-prompt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.chat__feedback-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.chat__feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 60ms ease;
}

.chat__feedback-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
  border-color: var(--color-primary);
}

.chat__feedback-btn:active {
  transform: translateY(1px);
}

.chat__feedback-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.chat__feedback-btn.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary, #fff);
}

/* Emoji icon inside the button: a touch larger than the label so it
   reads clearly on both desktop and mobile. */
.chat__feedback-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.chat__feedback-label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.chat__feedback-status {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

.chat__feedback-status--error {
  color: var(--color-warning);
  font-weight: 600;
}

/* On very narrow screens, hide the text labels so three buttons fit on
   one row without wrapping every button onto its own line. The emoji
   plus the button's title attribute still communicate meaning; the
   "Was this helpful?" prompt above the row supplies the context. */
@media (max-width: 480px) {
  .chat__feedback-btn {
    padding: 0.45rem 0.7rem;
  }
  .chat__feedback-label {
    display: none;
  }
  .chat__feedback-icon {
    font-size: 1.25rem;
  }
}

/* ---- Tackle Box screen ---- */
.tacklebox {
  flex: 1;
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
}

.tacklebox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.tacklebox__head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

.tacklebox__sub {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.tacklebox__add-form {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
}

.tacklebox__add-form input {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  min-height: 46px;
}

.tacklebox__add-form input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.tacklebox__list {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tacklebox__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.tacklebox__item-name {
  font-weight: 600;
  color: var(--color-text);
}

.tacklebox__item-date {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.tacklebox__item-remove {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}

.tacklebox__item-remove:hover {
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.tacklebox__empty {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

.tacklebox__empty.is-hidden { display: none; }

/* Sign out — injected by coach.js when a session is active. A remembered
   session needs a visible way out; shared phones at a boat ramp are a real case. */
.chat__signout {
  margin-top: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.chat__signout:hover,
.chat__signout:focus-visible {
  color: var(--color-text);
}

/* ---- Spot picker modal (Option 2, popup) ---------------------------------
   The spot picker itself is unchanged; it's just wrapped in a modal so it
   only takes screen space when the angler wants to compare spots. The
   trigger button (.chat__spot-btn) lives in the chat form row next to Take
   Photo / Upload and shows a count badge when the picker has state. */
.chat__spot-btn {
  position: relative;
}

.chat__spot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.4rem;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-contrast, var(--color-bg));
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.chat__spot-badge.is-hidden { display: none; }

/* Highlight the button when the picker has any state so the angler can see
   at a glance that a follow-up will run through the multi-spot path. */
.chat__spot-btn.is-active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  color: var(--color-primary);
}

/* Modal shell -------------------------------------------------------------- */
.spot-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.spot-modal.is-hidden { display: none; }

.spot-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.spot-modal__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(90vh, 720px);
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.spot-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.spot-modal__title {
  margin: 0;
  font-size: var(--text-lg, 1.125rem);
  color: var(--color-text);
}

.spot-modal__close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-standard), background-color 0.2s var(--ease-standard);
}

.spot-modal__close:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.spot-modal__sub {
  margin: 0;
  color: var(--color-text-subtle, var(--color-text));
  opacity: 0.85;
  font-size: var(--text-sm);
}

.spot-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Inside the modal, drop the picker's own top border/padding since the
   modal panel already provides framing. */
.spot-modal .spot-picker {
  border: none;
  padding: 0;
  margin: 0;
}

/* Mobile: fill more of the viewport, tighter padding. */
@media (max-width: 640px) {
  .spot-modal { padding: 0; align-items: flex-end; }
  .spot-modal__panel {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
    padding: var(--space-5);
  }
}

/* =========================================================
   THREADS SIDEBAR
   Server-persisted per-tester chat history. Backed by
   api/threads.py. Placed as a sibling of #chat-screen inside
   .coach-main so it becomes a proper flex column at
   desktop widths and stacks (drawer-style) on mobile.
   ========================================================= */
.threads-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: calc(100vh - 70px);
  overflow-y: auto;
}

.threads-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.threads-sidebar__title {
  font-size: var(--text-md);
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.threads-sidebar__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  display: none; /* only shown as a drawer on mobile */
}

.threads-sidebar__close:hover {
  background: var(--color-surface-elevated, var(--color-surface));
  color: var(--color-text);
}

.threads-sidebar__new {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
}

.threads-sidebar__new:hover {
  border-style: solid;
  border-color: var(--color-primary, var(--color-border));
}

.threads-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.thread-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text);
  font-size: var(--text-sm);
  border: 1px solid transparent;
}

.thread-item:hover {
  background: var(--color-surface-elevated, rgba(127,127,127,0.08));
}

.thread-item.is-active {
  background: var(--color-surface-elevated, rgba(127,127,127,0.12));
  border-color: var(--color-border);
}

.thread-item__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-item__delete,
.thread-item__rename {
  background: transparent;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.thread-item:hover .thread-item__delete,
.thread-item.is-active .thread-item__delete,
.thread-item:hover .thread-item__rename,
.thread-item.is-active .thread-item__rename {
  opacity: 1;
}

.thread-item__delete:hover {
  color: var(--color-warning, #c94040);
  background: rgba(201, 64, 64, 0.08);
}

.thread-item__rename:hover {
  color: var(--color-text);
  background: var(--color-surface-elevated, rgba(127,127,127,0.12));
}

/* Inline-rename input: sits in the same slot as .thread-item__title
   during an edit. Full width of the flex slot, neutral border, keeps
   the row's height stable so the sidebar doesn't jump. */
.thread-item__title-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface, transparent);
  border: 1px solid var(--color-border, rgba(127,127,127,0.35));
  border-radius: var(--radius-md);
  padding: 0.1rem 0.4rem;
  outline: none;
}

.thread-item__title-input:focus {
  border-color: var(--color-accent, #4a90e2);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
}

/* While editing, keep the rename/delete affordances visible so the
   row doesn't visually collapse the moment focus lands on the input. */
.thread-item.is-editing .thread-item__rename,
.thread-item.is-editing .thread-item__delete {
  opacity: 1;
}

/* Saving state: dim the input to signal the round-trip. */
.thread-item.is-saving .thread-item__title-input {
  opacity: 0.6;
  cursor: progress;
}

.threads-sidebar__empty,
.threads-sidebar__error {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.threads-sidebar__error {
  color: var(--color-warning, #c94040);
}

.chat__head-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Mobile: sidebar becomes a full-width drawer above the chat. */
@media (max-width: 860px) {
  .threads-sidebar {
    width: 100%;
    min-height: 0;
    max-height: 60vh;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .threads-sidebar__close {
    display: inline-flex;
  }
}

/* =========================================================
   LOGBOOKS SECTION (sidebar)
   User-named containers a chat can be tagged into. Sits above
   the flat chat list; selecting one filters the list below.
   ========================================================= */

.logbooks-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem 0 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border, rgba(127,127,127,0.35));
}

.logbooks-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.15rem 0.2rem 0.25rem 0.2rem;
}

.logbooks-section__title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0;
}

.logbooks-section__new {
  background: transparent;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  padding: 0 0.4rem;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--radius-md);
}

.logbooks-section__new:hover {
  color: var(--color-text);
  background: var(--color-surface-elevated, rgba(127,127,127,0.12));
}

.logbooks-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Individual logbook row -- same visual language as .thread-item but
   slightly smaller so the section reads as a filter/nav, not a list of
   documents. Hover/active states mirror thread-item exactly so the
   sidebar feels like one control. */
.logbook-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text);
  font-size: 0.85rem;
  border: 1px solid transparent;
}

.logbook-item:hover {
  background: var(--color-surface-elevated, rgba(127,127,127,0.08));
}

.logbook-item.is-active {
  background: var(--color-surface-elevated, rgba(127,127,127,0.14));
  border-color: var(--color-border);
  font-weight: 600;
}

.logbook-item__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.logbook-item__count {
  color: var(--color-text-faint);
  font-size: 0.75rem;
  padding: 0 0.15rem;
}

.logbook-item__rename,
.logbook-item__delete {
  background: transparent;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.logbook-item:hover .logbook-item__rename,
.logbook-item:hover .logbook-item__delete,
.logbook-item.is-active .logbook-item__rename,
.logbook-item.is-active .logbook-item__delete {
  opacity: 1;
}

.logbook-item__rename:hover {
  color: var(--color-text);
  background: var(--color-surface-elevated, rgba(127,127,127,0.12));
}

.logbook-item__delete:hover {
  color: var(--color-warning, #c94040);
  background: rgba(201, 64, 64, 0.08);
}

/* Inline rename input for a logbook, same slot as .logbook-item__name. */
.logbook-item__name-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface, transparent);
  border: 1px solid var(--color-border, rgba(127,127,127,0.35));
  border-radius: var(--radius-md);
  padding: 0.05rem 0.35rem;
  outline: none;
}

.logbook-item__name-input:focus {
  border-color: var(--color-accent, #4a90e2);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
}

/* Pseudo-rows ("All chats", "Unfiled") -- same shell, no rename/delete. */
.logbook-item--pseudo {
  color: var(--color-text-faint);
}

.logbook-item--pseudo.is-active {
  color: var(--color-text);
}

.logbooks-section__error {
  font-size: var(--text-sm);
  color: var(--color-warning, #c94040);
  margin: 0;
}

/* =========================================================
   LOGBOOK TAG CHIPS on each chat row
   ========================================================= */

.thread-item__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  max-width: 55%;
  justify-content: flex-end;
}

.thread-chip {
  display: inline-flex;
  align-items: center;
  height: 1.1rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1;
  background: var(--color-surface-elevated, rgba(127,127,127,0.14));
  color: var(--color-text);
  border: 1px solid var(--color-border, rgba(127,127,127,0.35));
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.thread-chip--add {
  background: transparent;
  color: var(--color-text-faint);
  border-style: dashed;
  cursor: pointer;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.thread-item:hover .thread-chip--add,
.thread-item.is-active .thread-chip--add,
.thread-item.has-tags .thread-chip--add {
  opacity: 1;
}

.thread-chip--add:hover {
  color: var(--color-text);
  background: var(--color-surface-elevated, rgba(127,127,127,0.14));
  border-color: var(--color-accent, #4a90e2);
}

/* =========================================================
   TAG PICKER POPUP
   Floating panel anchored to the clicked + chip. Notion/Linear
   pattern: search-free (small tester lists), checkbox rows,
   "New logbook" inline creator at the top.
   ========================================================= */

.tag-picker {
  position: fixed;
  z-index: 200;
  min-width: 12rem;
  max-width: 16rem;
  max-height: 22rem;
  overflow-y: auto;
  background: var(--color-surface, #fff);
  color: var(--color-text);
  border: 1px solid var(--color-border, rgba(127,127,127,0.35));
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tag-picker__create {
  display: flex;
  gap: 0.25rem;
  padding-bottom: 0.35rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border, rgba(127,127,127,0.35));
}

.tag-picker__create-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface, transparent);
  border: 1px solid var(--color-border, rgba(127,127,127,0.35));
  border-radius: var(--radius-md);
  padding: 0.2rem 0.4rem;
  outline: none;
  font-size: 0.8rem;
}

.tag-picker__create-input:focus {
  border-color: var(--color-accent, #4a90e2);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
}

.tag-picker__create-btn {
  background: var(--color-accent, #4a90e2);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.15rem 0.55rem;
  cursor: pointer;
  font-size: 0.8rem;
}

.tag-picker__create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tag-picker__row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.35rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.82rem;
}

.tag-picker__row:hover {
  background: var(--color-surface-elevated, rgba(127,127,127,0.10));
}

.tag-picker__row input[type="checkbox"] {
  cursor: pointer;
}

.tag-picker__empty {
  color: var(--color-text-faint);
  font-size: 0.8rem;
  padding: 0.4rem;
  text-align: center;
}

.tag-picker__error {
  color: var(--color-warning, #c94040);
  font-size: 0.75rem;
  padding: 0.2rem 0.35rem 0 0.35rem;
}

/* Candidate places offered when a spot is unfound or ambiguous */
.candidate-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.candidate-btn {
  min-height: 44px; padding: 8px 14px; border-radius: 22px; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font: inherit; text-align: left; line-height: 1.25; max-width: 100%;
}
.candidate-btn:hover:not(:disabled), .candidate-btn:focus-visible { background: rgba(127, 127, 127, 0.15); }
.candidate-btn:disabled { opacity: 0.55; cursor: default; }