/* Aurora global theme */
:root {
  /* Shrink Aurora UI elements by roughly 5% by reducing the base font size */
  font-size:80.75%;
  color-scheme: dark;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: #0f172a;
  color: #e2e8f0;

  --bg-gradient: linear-gradient(180deg, rgba(124, 58, 237, 0.32), rgba(15, 23, 42, 0.9));
  --bg-main: rgba(15, 23, 42, 0.9);
  --bg-alt: rgba(15, 23, 42, 0.82);
  --surface: rgba(30, 41, 59, 0.94);
  --surface-solid: #1e293b;
  --surface-border: rgba(51, 65, 85, 0.75);
  --surface-border-strong: rgba(148, 163, 184, 0.65);
  --text-color: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #7c3aed;
  --accent-soft: rgba(124, 58, 237, 0.28);
  --accent-light: rgba(124, 58, 237, 0.18);
  --accent-strong: #7c3aed;
  --positive: #22c55e;
  --negative: #f97316;
  --shadow: 0 18px 42px rgba(15, 23, 42, 0.45);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: inherit;
  background: var(--bg-gradient);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
}

.temporarily-hidden-control {
  display: none !important;
}

/* App layout: sidebar + main chat panel */
.app {
  display: flex;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  background: transparent;
}

.app.embed-sidebar-hidden .sidebar,
.app.embed-sidebar-hidden #divider,
.app.embed-sidebar-hidden #thinSidebar,
.app.embed-sidebar-hidden #collapsedSidebarLogo,
.app.embed-sidebar-hidden #expandSidebarArrow,
.app.embed-sidebar-hidden #expandSidebarBtn {
  display: none !important;
}

.app.embed-sidebar-hidden .chat-panel {
  display: flex;
}

/* Sidebar */
.sidebar {
  position: relative;
  width: clamp(260px, 32vw, calc(100vw - 100px));
  max-width: calc(100vw - 100px);
  background: linear-gradient(185deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
  padding: 4.75rem 1.25rem 1.5rem 1.25rem;
  overflow-y: auto;
  border-right: 1px solid var(--surface-border);
  flex: none;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sidebar-link-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.sidebar-link-button:hover,
.sidebar-link-button:focus-visible {
  background: var(--accent-light);
  border-color: var(--accent-strong);
  outline: none;
}

.sidebar-link-button:active {
  transform: translateY(1px);
}

.sidebar-subtext {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Draggable divider */
.divider {
  width: 5px;
  cursor: col-resize;
  background: rgba(124, 58, 237, 0.18);
  backdrop-filter: blur(6px);
  border-right: 1px solid rgba(124, 58, 237, 0.32);
  border-left: 1px solid rgba(148, 163, 184, 0.35);
  flex: none;
}

/* Chat Panel in main area */
.chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: linear-gradient(170deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.94));
  color: var(--text-color);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  backdrop-filter: blur(8px);
}

.chat-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.chat-title-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.chat-favorite-btn {
  padding: 0;
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.chat-title {
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.2;
}

.chat-title-project {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The controls, tasks table, and other components end up in the sidebar. */
#controls {
  margin-bottom: 1rem;
}

/* Tasks table */
#tasks {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  margin-bottom: 2rem;
  display: table;
  color: var(--text-color);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  overflow: hidden;
}

#tasks th,
#tasks td {
  border: 1px solid rgba(116, 156, 194, 0.15);
  padding: 0.65rem 0.75rem;
}

#tasks th {
  background: rgba(124, 58, 237, 0.14);
  text-align: left;
}

.hidden {
  opacity: 0.6;
}

.drag-handle {
  cursor: move;
}

.arrow {
  margin: 0 2px;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(124, 58, 237, 0.45);
  cursor: pointer;
  color: var(--text-color);
  border-radius: 8px;
  padding: 0.25rem 0.45rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.eye {
  cursor: pointer;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(124, 58, 237, 0.45);
  color: var(--text-color);
  border-radius: 8px;
  padding: 0.25rem 0.45rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.arrow:hover,
.eye:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.priority-cell,
.status-cell,
.dependencies-cell,
.blocking-cell,
.title-cell,
.project-cell,
.sprint-cell {
  cursor: pointer;
}

/* Filter controls */
#projectFilter,
#sprintFilter {
  margin-left: 4px;
  background: rgba(15, 23, 42, 0.92);
  color: var(--text-color);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 0.35rem 0.6rem;
}

#projectFilter:focus,
#sprintFilter:focus {
  outline: 1px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35);
}

/* Modal styling */
.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: var(--surface);
  color: var(--text-color);
  padding: 1.25rem;
  position: relative;
  width: 90%;
  /* increased width so specific modals (Add project) are not cut off */
  max-width: 960px;
  margin: auto;
  border-radius: 18px;
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.modal-content--auth {
  width: min(92vw, 560px);
  max-width: 560px;
}

.modal-content--auth .modal-title-row {
  margin-bottom: 0.75rem;
}

.modal-content--auth .auth-benefits {
  margin-bottom: 1rem;
}

.modal-content--auth .auth-benefits p {
  margin: 0 0 0.4rem;
  font-weight: 600;
}

.modal-content--auth .auth-benefits ul {
  margin: 0;
  padding-left: 1.1rem;
}

.modal-content--auth .auth-benefits li + li {
  margin-top: 0.25rem;
}

.modal-content--auth .auth-email-label {
  font-size: 1.1rem;
  font-weight: 700;
}

.modal-content--iframe {
  display: flex;
  flex-direction: column;
  width: min(1100px, 96%);
  max-width: 1200px;
  height: min(90vh, 880px);
}

.modal-iframe {
  flex: 1;
  width: 100%;
  border: none;
  margin-top: 1rem;
  border-radius: 14px;
  background-color: rgba(15, 23, 42, 0.92);
}

.modal-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-title-row h2 {
  flex: 1;
  margin: 0;
}

.modal-title-action {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}

.modal-title-action:hover,
.modal-title-action:focus {
  background: rgba(148, 163, 184, 0.15);
  color: var(--accent-light);
  outline: none;
}

#renameTabTimestamps {
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  display: none;
}

.modal-buttons {
  margin-top: 1rem;
  text-align: right;
}

.modal-buttons--left {
  text-align: left;
}

.modal-buttons--left button,
.modal-buttons--left a {
  margin-left: 0;
}

#settingsFooterLinks {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}

#settingsFooterLinks button,
#settingsFooterLinks a {
  margin-left: 0;
}

.modal-buttons button {
  background: rgba(30, 41, 59, 0.92);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  margin-left: 4px;
  cursor: pointer;
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.modal-buttons a {
  background: rgba(30, 41, 59, 0.92);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  margin-left: 4px;
  cursor: pointer;
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.modal-buttons button:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.modal-buttons a:hover,
.modal-buttons a:focus-visible {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.modal-buttons button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #f8fafc;
}

.modal-buttons button.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.modal-buttons button.danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #f8fafc;
}

.modal-buttons button.danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

.usage-limit-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(14, 165, 233, 0.12));
  color: var(--text-color);
  font-size: 0.95rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}

.usage-limit-banner__icon {
  font-size: 1.35rem;
}

.usage-limit-banner__tag,
.usage-limit-modal__cta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
}

.usage-limit-modal__content {
  max-width: 460px;
  padding: 1.75rem 1.85rem 1.5rem;
  background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 55%),
              rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.usage-limit-modal__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.usage-limit-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  font-size: 1.8rem;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25);
}

.usage-limit-modal__title {
  margin: 0;
  font-size: 1.45rem;
}

.usage-limit-modal__message {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.usage-limit-modal__summary {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.75);
  color: var(--text-color);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
}

.usage-limit-modal__cta {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: rgba(224, 242, 254, 0.9);
}

.usage-limit-modal__actions {
  margin-top: 0;
}

.modal__label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.modal__input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--surface-border);
  background: rgba(15, 23, 42, 0.95);
  color: var(--text-color);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Prevent modal input text from touching modal edge by adding right margin
   for inputs inside narrow modal contexts like Add Project. This keeps
   long text from sitting flush against the modal border. */
.modal-content .modal__input {
  margin-right: 50px;
  box-sizing: border-box;
}

.modal__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35);
}

.modal__help-text {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.password-requirements {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
}

.password-requirements__title {
  margin: 0;
  font-weight: 600;
  color: var(--accent);
}

.password-requirements__subtitle {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.password-requirements__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.password-requirements__check {
  position: relative;
  padding-left: 28px;
}

.password-requirements__check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  border-radius: 4px;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.password-requirements__check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 6px;
  height: 3px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.password-requirements__check.is-met::before {
  background: var(--accent);
  border-color: var(--accent);
}

.password-requirements__check.is-met::after {
  border-left-color: #fff;
  border-bottom-color: #fff;
  opacity: 1;
}

.password-requirements__item {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text-color);
}

.password-requirements__item + .password-requirements__item {
  margin-top: 6px;
}

.modal-error {
  min-height: 1.25rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #fca5a5;
}

.confirm-modal {
  max-width: 420px;
}

.confirm-modal-message {
  margin: 1rem 0;
  line-height: 1.5;
}

.col-item {
  margin: 4px 0;
}

.col-move {
  margin-right: 4px;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(124, 58, 237, 0.4);
  color: var(--text-color);
  border-radius: 10px;
}

/* Chat panel area */
#chatPanel {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

#chatMessages {
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  padding: clamp(0.75rem, 1.4vw, 1.25rem);
  flex: 1 1 auto;
  min-height: 0;
  color: var(--text-color);
  box-shadow: var(--shadow);
}

.chat-error-state {
  max-width: 520px;
  margin: 1.5rem auto;
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
  color: #fecaca;
  text-align: center;
  line-height: 1.6;
  box-shadow: 0 18px 32px rgba(248, 113, 113, 0.1);
}

.chat-error-state strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #fca5a5;
}

.chat-error-state p {
  margin: 0.4rem 0;
}

.chat-error-state a {
  color: #a5b4fc;
  text-decoration: underline;
}

.chat-error-state a:hover,
.chat-error-state a:focus {
  color: #c7d2fe;
}

.chat-error-action {
  margin-top: 0.75rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.6);
  color: var(--text-color);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.chat-error-action:hover,
.chat-error-action:focus {
  background: rgba(124, 58, 237, 0.35);
  border-color: rgba(124, 58, 237, 0.6);
  transform: translateY(-1px);
}

/* The waiting counter */
#waitingCounter {
  font-size: 0.9rem;
  color: var(--text-muted);
  height: 1.2em;
  margin-bottom: 0.5rem;
}

/* Chat message bubble grouping */
.chat-sequence {
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.96));
  border: none;
  border-radius: 18px;
  padding: clamp(0.85rem, 1.5vw, 1.25rem);
  margin-bottom: 1rem;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.delete-chat-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
}

.delete-chat-btn:hover {
  color: var(--accent);
}

.archive-action-btn {
  background: transparent;
  border: 1px solid var(--surface-border);
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.archive-action-btn:hover {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-color);
  border-color: var(--surface-border-strong);
}

.archive-delete-btn {
  border-color: rgba(249, 115, 22, 0.45);
  color: var(--negative);
}

.archive-delete-btn:hover {
  background: rgba(249, 115, 22, 0.18);
  color: #fff;
  border-color: var(--negative);
}

.pair-delete-btn {
  position: absolute;
  bottom: 4px; /* place at bottom to avoid overlap with bubble delete */
  right: 4px;
  padding: 4px;
}

.download-chat-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 1.1rem;
  text-shadow: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.download-chat-btn:hover {
  color: var(--accent);
}

.pair-download-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 4px;
}

.table-download-btn {
  margin-left: 4px;
}

.bubble-delete-btn {
  position: absolute;
  top: 4px; /* align inside bubble */
  right: 4px;
  line-height: 1; /* consistent vertical alignment */
  font-size: 1rem;
}

.model-delete-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.model-delete-btn:hover {
  color: var(--accent);
}

.bubble-copy-btn {
  position: absolute;
  top: 4px;
  right: 36px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.chat-user .bubble-copy-btn,
.chat-user .bubble-edit-btn,
.chat-user .bubble-delete-btn {
  top: -3px;
}

.bubble-edit-btn {
  position: absolute;
  top: 4px;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.bubble-copy-btn:hover {
  color: var(--accent-strong);
}

.code-copy-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.9rem;
}

.code-copy-btn:hover {
  color: var(--accent-strong);
}

/* Avatars replaced with name ovals */
.name-oval {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-right: 6px;
  color: #fff;
}

.name-oval-user {
  background: rgba(118, 190, 255, 0.7);
}

.name-oval-ai {
  background: rgba(255, 195, 112, 0.82);
}

/* Bubble headers, containing name oval + timestamp */
.bubble-header {
  display: flex;
  align-items: center;
  gap: 8px; /* increased for better spacing */
  margin-bottom: 6px; /* increased for a bit more breathing room */
  font-size: 0.9rem;
  position: relative;
}

/* Extra space to place buttons above timestamp */
.chat-user .bubble-header {
  padding-top: 16px;
}

/* Date header separating chat days */
.chat-date-header {
  text-align: center;
  margin: 8px 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* User bubble: displayed on the right side */
.chat-user {
  background: linear-gradient(160deg, rgba(124, 58, 237, 0.42), rgba(79, 70, 229, 0.5));
  padding: 12px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  align-self: flex-end;
  text-align: right;
  max-width: min(70%, 720px);
  color: var(--text-color);
  position: relative;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: monospace;
  border: 1px solid rgba(124, 58, 237, 0.5);
  box-shadow: 0 16px 34px rgba(124, 58, 237, 0.35);
}

/* AI bubble: displayed on the left side */
.chat-bot {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  padding: 12px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  display: block;
  max-width: min(70%, 760px);
  color: var(--text-color);
  position: relative;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: monospace;
  border: 1px solid var(--surface-border);
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.55);
}

.reasoning-section {
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 6px 0 12px;
  background: rgba(15, 23, 42, 0.55);
}

.reasoning-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  cursor: pointer;
  user-select: none;
}

.reasoning-section-body {
  color: var(--text-color);
}

.reasoning-section-header::after {
  content: "▾";
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.reasoning-section.collapsed .reasoning-section-header {
  margin-bottom: 0;
}

.reasoning-section.collapsed .reasoning-section-header::after {
  transform: rotate(-90deg);
}

.reasoning-section.collapsed .reasoning-section-body {
  display: none;
}

.chat-bot.has-model-info {
  padding-bottom: 12px;
}

.chat-model-info {
  position: absolute;
  top: 4px;
  right: 64px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: rgba(15, 23, 42, 0.92);
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  cursor: help;
  user-select: none;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  z-index: 5;
}

.chat-model-info-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
}

.chat-model-info:hover,
.chat-model-info:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  border-color: var(--accent-strong);
}

.chat-model-info:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-model-info::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  max-width: none;
  background: rgba(15, 23, 42, 0.95);
  color: var(--text-color);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--surface-border);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.45);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

.chat-model-info:hover::after,
.chat-model-info:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure images fit within chat bubbles and cap width */
.chat-user img,
.chat-bot img {
  max-width: min(100%, 400px);
  height: auto;
}

/* Match font sizes between chat bubbles and input box */
.chat-user,
.chat-bot {
  font-size: 0.95rem;
  position: relative;
}

/* Thumbnail for user uploaded images */
.user-image-thumb {
  max-width: 120px;
  max-height: 120px;
  margin: 4px 0;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
}

/* Individual user message within a chat bubble */
.user-subbubble {
  max-width: 100%;
  min-height: 2.2rem; /* extra height for header buttons */
}

.chat-user pre,
.chat-bot pre {
  background: rgba(15, 23, 42, 0.85);
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-x: auto;
  position: relative;
  border: 1px solid rgba(124, 58, 237, 0.35);
}

/* Thumbnail images in the secure uploader table */
.table-thumb {
  max-width: 52px;
  max-height: 52px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  cursor: pointer;
}

.is-disabled-link {
  color: var(--muted-text, #9ca3af);
  cursor: not-allowed;
  text-decoration: none;
  opacity: 0.8;
}

.modal-content.image-preview-modal {
  max-width: min(90vw, 720px);
}

#imagePreviewModalImg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1rem;
  border-radius: 16px;
  background-color: rgba(15, 23, 42, 0.65);
  object-fit: contain;
}

/* Additional details styling */
.chat-system,
.chat-instructions {
  background: rgba(30, 41, 59, 0.92);
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  white-space: pre-wrap;
  border: 1px solid var(--surface-border);
}

/* Modern chat input container */
.chat-input-container {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  margin-top: 0.75rem;
  width: 100%;
  flex: 0 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.chat-input-container textarea {
  border: none;
  background: transparent;
  color: var(--text-color);
  padding: 12px 16px;
  flex: 1;
  outline: none;
  font-size: 0.95rem;
  resize: none;
  min-height: 40px;
  overflow-y: auto;
  font-family: monospace; /* Added to match chat bubbles */
}

.chat-input-container textarea::placeholder {
  color: var(--text-muted);
}

.send-btn {
  background: linear-gradient(120deg, var(--accent), var(--accent-strong));
  color: #fff;
  border: none;
  outline: none;
  padding: 0 20px;
  cursor: pointer;
  border-radius: 0 18px 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.45);
}

.stop-btn {
  background: linear-gradient(120deg, #ff6b6b, #e0435b);
}

.stop-btn:hover {
  box-shadow: 0 12px 24px rgba(255, 107, 107, 0.35);
}

/* Scroll to bottom button: now always visible inline */
#scrollDownBtn {
  background: rgba(30, 41, 59, 0.92);
  color: var(--text-color);
  border: 1px solid var(--surface-border);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-block;
  z-index: 10;
  margin-left: 0.5rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

#scrollDownBtn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Collapsible menus in index */
#toolbarCollapsible {
  margin-bottom: 1rem;
  background: var(--surface);
  padding: 0.85rem;
  border-radius: 16px;
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow);
}

/* New sticky toolbar for chat tabs */
#chatTabs {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* When sidebar is collapsed, shift the chat tabs bar to clear the logo */
.app.sidebar-collapsed #chatTabs {
  margin-left: 50px;
}

/* When the sidebar is collapsed, push the chat content down so it doesn't
   overlap the floating Alfe logo button in the top-left corner. */
.app.sidebar-collapsed .chat-panel {
  padding-top: calc(clamp(1.25rem, 2.5vw, 2rem) + 2.75rem);
}

/* Collapsed sidebar layout */
.app.sidebar-collapsed .sidebar {
  width: 50px !important;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.app.sidebar-collapsed .tree-menu,
.app.sidebar-collapsed [id^="sidebarView"] {
  display: none !important;
}

.app.sidebar-collapsed .icon-menu {
  display: none;
}

/* Icon displayed before chat tab names */
#tabsContainer .tab-icon,
#verticalTabsContainer .tab-icon {
  margin-right: 4px;
  width: 1.2rem;
  text-align: center;
  font-size: 0.9rem;
}

/* Circle icon for exclamation */
.exclamation-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #f00;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
}

/* Buttons container in the top-right corner */
.top-right-buttons {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  z-index: 1000;
}

.top-right-buttons .top-btn {
  background: rgba(30, 41, 59, 0.92);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#settingsBtn,
#signupBtn {
  font-size: 1.15rem;
}

.github-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  font-weight: 700;
}

.github-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.top-right-buttons .github-button {
  padding-right: 0.9rem;
  padding-left: 0.9rem;
}
.top-right-buttons .top-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.top-right-buttons .store-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 9px;
  overflow: hidden;
  line-height: 0;
  border: 1px solid transparent;
  transition: transform 0.2s ease;
  height: clamp(40px, 6vw, 52px);
}

#googlePlayBadge {
  height: clamp(44px, 6vw, 56px);
}

#appStoreBadge {
  height: clamp(34px, 4.5vw, 40px);
}

.top-right-buttons .store-badge img {
  display: block;
  height: 100%;
  width: auto;
}

.top-right-buttons .store-badge.disabled {
  opacity: 0.65;
  pointer-events: none;
}

.top-right-buttons .store-badge.disabled::after {
  content: 'Soon';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(236, 72, 153, 0.15);
  white-space: nowrap;
}

.top-right-buttons .store-badge:hover,
.top-right-buttons .store-badge:focus-visible {
  transform: translateY(-1px);
}

.top-right-buttons .store-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .top-right-buttons {
    gap: 0.45rem;
  }

  .top-right-buttons .store-badge img {
    height: 100%;
  }
}

.subscribe-teaser {
  color: var(--accent);
  align-self: center;
  font-size: 0.82rem;
  font-weight: 500;
}

/* Toggle icon in top-left corner */
.nav-toggle-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  width: 42px;
  height: 42px;
  cursor: pointer;
  z-index: 1000;
}

/* Sidebar collapse/expand icon */
.sidebar-toggle-icon {
  position: absolute;
  top: 8px;
  left: 8px;
  cursor: pointer;
  z-index: 1000;
}

.sidebar-logo {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  display: block;
  padding: 2px;
  border-radius: 12px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
    linear-gradient(140deg, #8b5cf6, #22d3ee, #38bdf8) border-box;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  object-fit: contain;
}

.sidebar-logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.55);
}

.collapsed-sidebar-logo {
  position: absolute;
  top: 8px;
  left: 8px;
  display: none;
  cursor: pointer;
  z-index: 1000;
}

.sidebar-brand-text {
  position: absolute;
  top: 16px;
  left: 60px;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  z-index: 1000;
}

.app.sidebar-collapsed #sidebarBrandText {
  display: none;
}

.close-sidebar-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  z-index: 1000;
}

.app.sidebar-collapsed .close-sidebar-icon {
  display: none;
}

/* Hide large toggle icon when sidebar is collapsed */
.app.sidebar-collapsed #sidebarToggleIcon {
  display: none;
}

/* Display session ID next to the sidebar icon */
#sessionIdText.session-id {
  display: none;
  position: absolute;
  top: 16px;
  left: 152px;
  font-size: 0.8rem;
  color: var(--text-muted);
  z-index: 1000;
  user-select: text;
}

/* Button to hide the sidebar */
#hideSidebarBtn.hide-sidebar-btn {
  position: absolute;
  top: 45px;
  right: 8px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  cursor: pointer;
  z-index: 1000;
  display: none !important;
}

/* Hide the expand sidebar button for now */
#expandSidebarBtn {
  display: none !important;
}


/* Token count indicator in bottom-right corner of subbubble */
.token-indicator {
  position: absolute;
  right: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 10px;
}

/* Token counter shown below the chat input */
.token-counter {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 6px;
  text-align: right;
}

/* Citation card shown below AI reply */
.chat-citations {
  background: var(--surface);
  padding: 0.75rem 1rem;
  border-radius: 14px;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  border: 1px solid var(--surface-border);
}
.chat-citations ul {
  list-style: decimal inside;
  margin: 0;
  padding-left: 1em;
}
.chat-citations a {
  color: var(--accent);
}

/* Additional styling for the new Chat Tabs sidebar panel */
#sidebarViewChatTabs {
  margin-top: 1rem;
}

#sidebarViewCodeTasks {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.code-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.code-project-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 12rem;
}

.code-project-selector {
  flex: 1 1 auto;
  min-width: 8rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--background);
  color: var(--text-color);
}

.code-project-selector:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25);
}

.code-project-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  background: var(--background);
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.code-project-add-btn:hover,
.code-project-add-btn:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.code-project-add-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25);
}

.code-tasks-actions {
  display: flex;
  gap: 0.5rem;
}

.code-tasks-action-btn {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: var(--background);
  color: var(--text-color);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.code-tasks-action-btn:hover,
.code-tasks-action-btn:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.code-tasks-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25);
}

.code-tasks-title {
  font-size: 1.1rem;
  margin: 0;
}

.code-task-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 0.75rem;
}

.code-task-label {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.code-task-input-row {
  display: flex;
  gap: 0.5rem;
}

.code-task-iteration-select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--background);
  color: var(--text-color);
  width: 3rem;
  min-width: 3rem;
}

.code-task-iteration-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25);
}

.code-task-iteration-select option:disabled {
  color: var(--text-muted);
}

.code-task-input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--background);
  color: var(--text-color);
}

.code-task-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25);
}

.code-task-submit {
  padding: 0.55rem;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.code-task-submit svg {
  width: 20px;
  height: 20px;
}

.code-task-submit:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
}

.code-tasks-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#codeTasksContainer .code-task-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: 0.45rem 0.6rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#codeTasksContainer .code-task-row.drag-over {
  border-style: dashed;
  border-color: var(--accent-light);
}

#codeTasksContainer .code-task-row.dragging {
  opacity: 0.55;
}

#codeTasksContainer .drag-handle {
  cursor: move;
  color: var(--text-muted);
}

.code-task-button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: none;
  background: none;
  color: var(--text-color);
  text-align: left;
  font-size: 0.95rem;
  padding: 0.35rem 0.25rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.code-task-button:hover,
.code-task-button:focus-visible {
  background: rgba(124, 58, 237, 0.15);
  color: var(--accent-light);
  outline: none;
}

.code-task-icon {
  font-size: 1rem;
}

.code-task-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-task-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
  font-size: 1rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.code-task-delete-btn:hover,
.code-task-delete-btn:focus-visible {
  color: var(--accent-light);
  background: rgba(124, 58, 237, 0.12);
  outline: none;
}

.code-task-empty {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 0.5rem;
  text-align: center;
  border: 1px dashed var(--surface-border);
  border-radius: 10px;
}

#verticalTabsContainer button {
  display: inline-flex;
  background-color: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  align-items: center;
  text-align: left;
  border-radius: 12px;
  gap: 0.4rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#verticalTabsContainer button:hover {
  background-color: var(--accent-light);
  border-color: var(--accent);
  transform: translateX(2px);
}


/* Creation date text for sidebar chat tabs */
#verticalTabsContainer .tab-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}
#tabsContainer .tab-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}
#archivedTabsContainer .tab-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

#archivedTabsContainer .archived-empty-state {
  padding: 0.5rem 0;
}

/* Date header separating chat tabs by day */
#verticalTabsContainer .tab-date-header {
  margin: 4px 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Project header separating chat tabs by project */
#verticalTabsContainer .tab-project-header {
  margin: 6px 0 2px;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
}
#verticalTabsContainer .favorites-header {
  color: var(--text-muted);
  gap: 0.4rem;
  flex-direction: column;
  align-items: flex-start;
}
#verticalTabsContainer .favorites-header-title-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
#verticalTabsContainer .favorites-header-archived-row {
  display: flex;
}
#verticalTabsContainer .favorites-header:focus-visible {
  outline: 2px solid var(--surface-border-strong);
  outline-offset: 2px;
}
#verticalTabsContainer .archived-header {
  color: var(--text-muted);
  gap: 0.25rem;
}
#verticalTabsContainer .archived-header:focus-visible {
  outline: 2px solid var(--surface-border-strong);
  outline-offset: 2px;
}
#verticalTabsContainer .archived-group .archived-empty {
  padding: 4px 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}
#archivedTabsContainer .tab-project-header {
  margin: 6px 0 2px;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
}
#verticalTabsContainer .tab-project-header .drag-handle {
  cursor: move;
  margin-right: 4px;
}
#verticalTabsContainer .tab-project-header.drag-over {
  border: 1px dashed var(--accent-light);
}
#verticalTabsContainer .project-collapse-arrow {
  margin-right: 4px;
}
#archivedTabsContainer .project-collapse-arrow {
  margin-right: 4px;
}
#verticalTabsContainer .child-collapse-arrow,
#archivedTabsContainer .child-collapse-arrow {
  margin-right: 2px;
  cursor: pointer;
}

#verticalTabsContainer .project-gear-btn {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  margin-left: 4px;
  transition: color 0.3s;
  width: 24px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#verticalTabsContainer .project-add-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  margin-left: 4px;
  transition: color 0.3s;
  width: 24px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#verticalTabsContainer .project-search-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  margin-left: 4px;
  transition: color 0.3s;
  width: 24px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#verticalTabsContainer .project-gear-btn:hover {
  color: var(--accent-light);
}
#verticalTabsContainer .project-add-btn:hover {
  color: var(--accent-light);
}
#verticalTabsContainer .project-search-btn:hover {
  color: var(--accent-light);
}

.project-toolbar-tooltip {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 4px 6px;
  display: none;
  z-index: 10000;
  box-shadow: var(--shadow);
}
.tab-options-trigger {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab-options-trigger:hover,
.tab-options-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent-light);
  outline: none;
}

.tab-archive-trigger {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab-archive-trigger svg {
  width: 14px;
  height: 14px;
  display: block;
}

.tab-archive-trigger:hover,
.tab-archive-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent-light);
  outline: none;
}

.tab-options-menu {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 4px 0;
  box-shadow: var(--shadow);
  z-index: 12000;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.tab-options-menu.visible {
  opacity: 1;
  transform: translateY(0);
}

.tab-options-menu .tab-options-item {
  background: none;
  border: none;
  color: var(--text-color);
  padding: 8px 14px;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
}

.tab-options-menu .tab-options-item:hover,
.tab-options-menu .tab-options-item:focus-visible {
  background: var(--accent-light);
  color: #fff;
  outline: none;
}
.project-toolbar-tooltip .project-search-btn {
  margin-left: 0;
}

#projectGroupsContainer button {
  display: inline-flex;
  background-color: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  padding: 0.55rem 0.75rem;
  cursor: move;
  align-items: center;
  text-align: left;
  border-radius: 12px;
  font-weight: 600;
  margin: 6px 0 2px;
  gap: 0.35rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
#projectGroupsContainer button.drag-over {
  border-color: var(--accent);
  background: var(--accent-light);
}
#verticalTabsContainer .project-indented {
  margin-left: 10px;
}
#archivedTabsContainer .project-indented {
  margin-left: 10px;
}
#verticalTabsContainer .subtask-indented {
  margin-left: 20px;
}
#archivedTabsContainer .subtask-indented {
  margin-left: 20px;
}

#verticalTabsContainer .sidebar-tab-row.drag-over {
  border: 1px dashed var(--accent-light);
}
#verticalTabsContainer .sidebar-tab-row.sub-drop-bar {
  border-bottom: 2px solid var(--accent-light);
}
#verticalTabsContainer .top-drop-bar {
  border-top: 2px solid var(--accent-light);
  height: 0;
  margin-bottom: 2px;
}
#archivedTabsContainer .sidebar-tab-row.sub-drop-bar {
  border-bottom: 2px solid var(--accent-light);
}
#archivedTabsContainer .top-drop-bar {
  border-top: 2px solid var(--accent-light);
  height: 0;
  margin-bottom: 2px;
}

#verticalTabsContainer .sidebar-tab-row .drag-handle {
  cursor: move;
}

#verticalTabsContainer button.active {
  background-color: var(--accent-light);
  border-color: rgba(124, 58, 237, 0.55);
  color: #fff;
}

.favorite-toggle {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.2s ease;
}
.favorite-toggle.chat-favorite-btn {
  font-size: 2.4rem;
}
.favorite-toggle[aria-pressed="true"] {
  color: #c084fc;
}
.favorite-toggle:hover,
.favorite-toggle:focus-visible {
  color: #d946ef;
  outline: none;
}

.favorites-group {
  display: flex;
  flex-direction: column;
}

.favorites-empty,
.empty-group-placeholder {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 6px 12px;
}

/* Highlight chat tab title while waiting for AI response */
.tab-processing {
  color: transparent !important;
  background-image: linear-gradient(90deg, #7c3aed, #a855f7, #7c3aed);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: tab-wave 2s linear infinite;
}

@keyframes tab-wave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

#verticalTabsContainer .task-id,
#archivedTabsContainer .task-id {
  margin-left: auto;
  color: var(--accent-light);
  font-size: 0.8rem;
  padding-left: 4px;
  cursor: pointer;
}

/* Secure uploader file table */
#secureFilesList {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

#secureFilesList th,
#secureFilesList td {
  border: 1px solid rgba(51, 65, 85, 0.6);
  padding: 0.6rem 0.75rem;
}

#secureFilesList th {
  background: var(--accent-light);
  text-align: left;
}

/* Hide the UUID/hash column */
#secureFilesList th[data-col="uuid"],
#secureFilesList td.uuid-col {
  display: none;
}

/* Links in the secure uploader table */
#secureFilesList a {
  color: var(--accent);
}
#secureFilesList a:visited {
  color: var(--accent);
}

/* Hide file name column in image table */
#secureFilesList th[data-col="name"],
#secureFilesList td.name-col {
  display: none;
}


/* Pipeline queue table */
#queueTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

#queueTable th,
#queueTable td {
  border: none;
  padding: 0.55rem 0.75rem;
}

#queueTable th:nth-child(1),
#queueTable td:nth-child(1) {
  display: none;
}

#queueTable tbody tr:nth-child(odd) {
  background-color: rgba(30, 41, 59, 0.92);
}

#queueTable tbody tr:nth-child(even) {
  background-color: rgba(17, 24, 39, 0.92);
}

#queueTable th {
  background: var(--accent-light);
  text-align: left;
}



/* New gear icon for the Markdown area */
#markdownGearIcon {
  position: relative;
  z-index: 9999;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  margin-left: 4px;
}

/* Gear icon inside search/reasoning tooltips */
.tooltip-gear {
  position: absolute;
  top: 2px;
  right: 2px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}
.tooltip-gear.active {
  color: var(--accent);
}

/* Star icon style used in AI Favorites modal */
.favorite-star {
  cursor: pointer;
  font-size: 1.2rem;
  user-select: none;
}
.starred { color: gold; }
.unstarred { color: #777; }

/* Basic style for chat subroutine cards */
.subroutine-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  padding: 0.75rem;
  width: 180px;
  height: 96px;
  color: var(--text-color);
  position: relative;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.subroutine-card .edit-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.8rem;
  cursor: pointer;
}

#mosaicPanel .mosaic-edit-btn {
  margin-left: 6px;
  font-size: 0.8rem;
}

/* View tabs above chat panel */
.view-tab {
  background: var(--surface);
  color: var(--text-color);
  border: 1px solid var(--surface-border);
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.view-tab.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

/* Printify Pipeline stage list */
#stageList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1rem;
}

#stageList li {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  color: var(--text-color);
}

#stageList li.current {
  background: var(--accent-light);
  color: var(--accent);
}

#stageList li.completed {
  background: rgba(61, 213, 152, 0.25);
  color: #167a56;
}

#stageList li.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.settings-status {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #8ea1b3;
  min-height: 1em;
}

.settings-status--summary {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.settings-status.is-success {
  color: #59d695;
}

.settings-status.is-error {
  color: #f08a8a;
}

/* Inline loading spinner used in status indicators */
.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  animation: loading-spin 0.75s linear infinite;
}

.loading-more {
  text-align: center;
  padding: 4px;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

#navSpinner {
  text-align: center;
  margin-bottom: 1rem;
}

#navSpinner .loading-spinner {
  margin-left: 0;
  width: 24px;
  height: 24px;
  border-width: 3px;
}

/* Full page loader overlay */
.page-loader {
  display: none;
  position: fixed;
  z-index: 10002;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.page-loader.show {
  display: flex;
}

.nav-placeholder {
  width: 100%;
  height: 1.2rem;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.18), rgba(168, 85, 247, 0.32), rgba(124, 58, 237, 0.18));
  background-size: 220% 100%;
  border-radius: 999px;
  margin: 4px 0;
  animation: nav-skeleton-loading 1.4s ease infinite;
}

@keyframes nav-skeleton-loading {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* Sidebar tree navigation */
.tree-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tree-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.tree-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 1.5rem;
  font-size: 1.1rem;
  line-height: 1;
  white-space: nowrap;
}

.tree-button-icon .icon-image {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.tree-button-label {
  flex: 1;
}

.tree-button:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}

.tree-button.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: #fff;
}

/* Icon menu for collapsed sidebar */
.icon-menu {
  display: none;
  padding: 0;
  margin-top: 1rem;
}

.icon-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  padding: 0.6rem 0;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  font-size: 1.2rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.icon-btn .icon-image {
  width: 1.35rem;
  height: 1.35rem;
  display: inline-block;
}

.icon-btn.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: #fff;
}

.icon-btn:hover {
  transform: translateY(-1px);
  background: var(--accent-light);
  border-color: var(--accent);
}

/* Thin sidebar shown when main sidebar is collapsed */
.thin-sidebar {
  position: absolute;
  top: 120px;
  left: 8px;
  width: 42px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 8px 0;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1001;
  backdrop-filter: blur(8px);
}
.app.sidebar-collapsed #expandSidebarArrow {
  display: block;
}
#expandSidebarArrow {
  position: absolute;
  top: 18px;
  left: 64px;
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
  display: none;
  z-index: 1000;
  padding: 4px 6px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.35);
}
.app.sidebar-collapsed .thin-sidebar {
  display: flex;
}
.thin-sidebar .thin-icon {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  font-size: 1.2rem;
  margin: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
}

.thin-sidebar .thin-icon img {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
}

.thin-sidebar .thin-icon:hover {
  color: var(--accent);
}

.thin-sidebar .thin-icon.active {
  background: var(--accent-light);
  color: #fff;
  box-shadow: 0 0 0 1px var(--accent);
}

/* Footer at the bottom of the sidebar */
.sidebar-footer {
  margin-top: auto;
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-muted);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.app.sidebar-collapsed .sidebar-footer {
  display: none;
}

.sidebar-footer .footer-button {
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  color: var(--text-color);
  background: rgba(15, 23, 42, 0.65);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-footer .footer-button:hover,
.sidebar-footer .footer-button:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.22);
}

/* Simple toast notification */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(124, 58, 237, 0.92);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10001;
}

.toast.show {
  display: block;
  opacity: 1;
}

/* Disabled buttons appear greyed out and inactive */
button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* New Tab dialog type buttons */
#newTabTypeButtons {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}
#newTabTypeButtons .start-type-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--bg-main);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.3s, color 0.3s;
}
#newTabTypeButtons .start-type-btn .icon {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
#newTabTypeButtons .start-type-btn.selected {
  background: var(--accent);
  border-color: var(--accent-light);
  color: #fff;
}

/* Ensure the New Tab modal follows the light theme */
#newTabModal .modal-content,
#newTabModal label,
#newTabModal input,
#newTabModal textarea,
#newTabModal button {
  color: var(--text-color);
}
#newTabModal input,
#newTabModal textarea {
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
}

/* Temporarily hide the chat image generation button */
#chatGenImageBtn {
  display: none !important;
}

/* Queued chat bubbles */
.chat-queue-container {
  position: absolute;
  bottom: 60px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  z-index: 1000;
}

.chat-queue-bubble {
  background: var(--surface);
  color: var(--text-color);
  border-radius: 14px;
  padding: 0.5rem 0.75rem;
  max-width: 250px;
  font-size: 0.9rem;
  opacity: 0.9;
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow);
}

/* Cookie consent banner */
#cookieBanner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.25rem;
  width: min(480px, calc(100% - 2.5rem));
  background: var(--bg-alt);
  color: var(--text-color);
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  display: none;
  z-index: 1100;
  text-align: center;
  box-shadow: var(--shadow);
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#cookieBanner button {
  margin-left: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#cookieBanner button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.45);
}

/* Banner shown when a feature requires Pro plan */
.pro-banner {
  margin-top: 0.75rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}


/* Project search input and button */
#projectSearchInput {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  padding: 0.4rem 0.6rem;
  border-radius: 12px;
}
#projectSearchBtn {
  background: linear-gradient(120deg, var(--accent), var(--accent-strong));
  color: #fff;
  border: none;
  padding: 0.45rem 0.75rem;
  margin-left: 4px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#projectSearchBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.45);
}

/* Reasoning toggle button and image upload button */
.chat-toggle-btn,
#reasoningToggleBtn,
#chatImageBtn {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  padding: 0.45rem 0.75rem;
  border-radius: 12px;
  cursor: pointer;
  margin-right: 0.5rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.chat-toggle-btn:hover,
#reasoningToggleBtn:hover,
#chatImageBtn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.chat-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
}

.chat-toggle-btn.icon-stack-btn {
  padding: 0.45rem;
}

.chat-toggle-btn .icon-stack {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
}

.chat-toggle-btn .icon-stack .icon {
  line-height: 1;
}

.chat-toggle-btn .icon-stack .icon-globe {
  position: absolute;
  font-size: 1.5rem;
  color: var(--accent);
  opacity: 0.45;
}

.chat-toggle-btn .icon-stack .icon-search {
  position: relative;
  font-size: 1.1rem;
  color: currentColor;
}

.chat-toggle-btn.active .icon-stack .icon-globe {
  color: rgba(255, 255, 255, 0.75);
  opacity: 1;
}

.chat-toggle-btn.active {
  background: linear-gradient(120deg, var(--accent), var(--accent-strong));
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.35);
}


.reasoning-tooltip {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  padding: 0.75rem;
  display: none;
  z-index: 10000;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.reasoning-tooltip .tooltip-section-header {
  font-weight: bold;
  color: var(--accent);
  margin-top: 0.5rem;
  margin-bottom: 0.35rem;
}
.reasoning-tooltip button {
  display: block;
  margin: 2px 0;
  padding: 0.35rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.reasoning-tooltip button:hover {
  background: var(--accent-light);
  color: var(--accent);
}
.reasoning-tooltip button.active {
  background: var(--accent-light);
  color: var(--accent);
}

.reasoning-tooltip .model-label {
  display: inline-block;
  font-size: 0.7em;
  padding: 1px 4px;
  margin-right: 4px;
  border-radius: 4px;
  background: var(--accent-light);
  color: var(--accent);
  text-transform: uppercase;
}
.reasoning-tooltip .model-provider {
  color: #999;
  margin-right: 4px;
}
.reasoning-tooltip .model-row-header {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.reasoning-tooltip .model-row-provider { color: var(--text-muted); }
.reasoning-tooltip .model-row-name { color: var(--text-color); font-weight: 500; }
.reasoning-tooltip .model-label.ultimate {
  background: #8e44ad;
}

.reasoning-tooltip .model-card {
  width: 220px;
  margin: 4px 0;
}

.reasoning-tooltip .model-note {
  font-size: 0.75em;
  color: var(--text-muted);
  margin-left: 1.4em;
  margin-top: 2px;
}

.reasoning-tooltip button .model-note {
  display: block;
  margin: 2px 0 0;
  margin-left: 0;
}

/* Tooltip listing manually favorited models */
.favorites-tooltip {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  padding: 0.75rem;
  display: none;
  z-index: 10000;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.favorites-tooltip button {
  display: block;
  margin: 2px 0;
  padding: 0.35rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
.favorites-tooltip button:hover {
  background: var(--accent-light);
  color: var(--accent);
}


/* Minimal markdown highlighting */
.md-h1,.md-h2,.md-h3,.md-h4,.md-h5,.md-h6{
  display:block;
  font-weight:bold;
}
.md-h1{font-size:1.4rem;}
.md-h2{font-size:1.3rem;}
.md-h3{font-size:1.2rem;}
.md-h4{font-size:1.1rem;}
.md-h5{font-size:1rem;}
.md-h6{font-size:0.95rem;}

.md-italic{font-style:italic;}
.md-inline-code{
  font-family:monospace;
  background:rgba(15, 23, 42, 0.88);
  color:#e2e8f0;
  padding:4px 6px;
  border-radius:10px;
  border:1px solid rgba(148, 163, 184, 0.35);
}

/* Links generated from applyMarkdownSyntax */
.md-link {
  color: var(--accent);
}



/* Table action buttons styled like Aurora buttons */
.table-action-btn, .table-open-btn, .table-download-btn {
  background: rgba(30, 41, 59, 0.92);
  border: 1px solid var(--surface-border);
  color: var(--text-color);
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.table-open-btn:hover, .table-download-btn:hover, .table-action-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.table-download-btn { margin-left: 6px; }
/* Ensure action buttons stay on one line */
.table-action-cell {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.table-action-cell .table-open-btn, .table-action-cell .table-download-btn, .table-action-cell .table-action-btn {
  white-space: nowrap;
}


/* Archived toggle above Favorites */
.favorites-archived-toggle{ background: transparent; color: #d7d7d7; border: 1px solid rgba(255,255,255,0.04); padding: 4px 8px; border-radius:6px; cursor:pointer; font-size:0.85rem; }


/* Active archived toggle — purple highlight */
.favorites-archived-toggle.active,
.favorites-archived-toggle[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(124,58,237,0.18);
}


/* Ensure table action buttons (Open/Download) are visible in light theme */
body[data-theme="light"] .table-action-btn,
body[data-theme="light"] .table-open-btn,
body[data-theme="light"] .table-download-btn {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important; /* tailwind gray-200 */
  color: #0f172a !important; /* gray-900 */
}
body[data-theme="light"] .table-open-btn:hover,
body[data-theme="light"] .table-download-btn:hover,
body[data-theme="light"] .table-action-btn:hover {
  background: #eef2ff !important; /* subtle light accent */
  border-color: #c7b3ff !important;
  transform: translateY(-1px);
}