/* ---------- Design tokens ---------- */
:root {
  --bg-main: #131A26;
  --bg-sidebar: #0E141E;
  --bg-panel: #1B2333;
  --border: #263047;
  --text: #EDEAE0;
  --text-soft: #8B93A7;
  --gold: #C9962E;
  --gold-deep: #A87A1F;
  --user-bubble: #2A3348;
  --navy-deep: #16202E;
  --navy: #16202E;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* Global "hidden" utility — every element the JS ever toggles this
   class onto relies on this rule. !important so it always wins,
   regardless of any later, more specific display rule for that
   element (e.g. .guest-block { display: flex } defined further down). */
.hidden {
  display: none !important;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg-main);
  font-family: var(--font-body);
  color: var(--text);
}

.app {
  display: flex;
  height: 100vh; /* fallback for older browsers */
  height: 100dvh; /* accounts for mobile browser toolbars — prevents the input row being pushed off-screen */
}

/* ===================== Sidebar ===================== */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px calc(16px + env(safe-area-inset-bottom)) 12px;
  transition: width 0.18s ease, padding 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-right-color: transparent;
}

.sidebar-top {
  flex-shrink: 0;
  width: 216px;
}

.chat-history {
  width: 216px;
}

.sidebar-bottom {
  width: 216px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 18px 8px;
}

.brand-mark {
  color: var(--gold);
  font-size: 18px;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.new-chat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.new-chat-btn:hover {
  background: var(--bg-panel);
  border-color: var(--gold);
}

.new-chat-btn .plus {
  color: var(--gold);
  font-weight: 700;
}

.chat-history {
  flex: 1;
  overflow-y: auto;
  margin-top: 20px;
}

.history-search-wrap {
  position: relative;
  padding: 0 4px 10px 4px;
}

.history-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-soft);
  pointer-events: none;
}

.history-search-input {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px 8px 32px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
}

.history-search-input::placeholder {
  color: var(--text-soft);
}

.history-search-input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.history-empty {
  padding: 10px 8px;
  font-size: 12.5px;
  color: var(--text-soft);
}

.history-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  padding: 4px 8px 8px 8px;
}

.history-item {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.history-item:hover {
  background: var(--bg-panel);
  color: var(--text);
}

.history-item.active {
  background: var(--bg-panel);
  color: var(--text);
  border-left: 2px solid var(--gold);
}

.ai-disclosure-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: rgba(201, 150, 46, 0.1);
  border: 1px solid rgba(201, 150, 46, 0.35);
  border-radius: 999px;
  padding: 3px 9px;
  align-self: flex-start;
}

.project-switcher-wrap {
  position: relative;
  padding: 0 4px 12px 4px;
}

.project-switcher-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.project-switcher-btn:hover {
  border-color: var(--gold);
}

.project-switcher-caret {
  color: var(--text-soft);
  font-size: 11px;
}

.project-switcher-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 4px;
  right: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 40;
  max-height: 240px;
  overflow-y: auto;
}

.project-switcher-popup.hidden {
  display: none;
}

.project-popup-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.project-popup-item:hover {
  background: var(--bg-main);
}

.project-popup-item.active {
  color: var(--gold);
  font-weight: 700;
}

.project-popup-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.project-popup-row .project-popup-item {
  flex: 1;
}

.project-popup-delete {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 12px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
}

.project-popup-delete:hover {
  color: #E0765A;
  background: var(--bg-main);
}

.project-popup-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}

.new-project-item {
  color: var(--gold);
  font-weight: 600;
}

.sidebar-bottom {
  flex-shrink: 0;
  padding: 10px 8px 2px 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.account-block {
  position: relative;
  padding: 2px 8px;
}

.account-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 6px 4px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.account-row:hover {
  background: var(--bg-panel);
}

.memory-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.memory-empty {
  font-size: 12.5px;
  color: var(--text-soft);
  padding: 4px 2px;
}

.memory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.memory-item-text {
  font-size: 13px;
  color: var(--text);
}

.memory-item-delete {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.memory-item-delete:hover {
  color: #E0765A;
  background: var(--bg-panel);
}

.memory-add-row {
  display: flex;
  gap: 6px;
}

.memory-add-row input {
  flex: 1;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
}

.memory-add-row input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.memory-add-btn {
  flex-shrink: 0;
  background: var(--gold);
  color: var(--navy-deep, #16202E);
  border: none;
  border-radius: 6px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.memory-add-btn:hover {
  background: var(--gold-deep);
}

.memory-clear-btn {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
  border-radius: 6px;
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
}

.memory-clear-btn:hover {
  border-color: #E0765A;
  color: #E0765A;
}

.settings-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}

.settings-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.settings-tab:hover {
  color: var(--text);
}

.settings-tab.active {
  background: var(--gold);
  color: var(--navy-deep, #16202E);
}

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-panel.hidden {
  display: none;
}

/* ---- Account dropdown popup ---- */
.account-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 4px;
  right: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-popup.hidden {
  display: none;
}

.account-popup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  padding: 9px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.account-popup-item:hover {
  background: var(--bg-main);
}

.account-popup-item.upgrade-item {
  color: var(--gold);
}

.account-popup-item.logout-item {
  color: var(--text-soft);
}

.popup-icon {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
}

.account-popup-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}

.user-avatar-wrap {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-img.hidden {
  display: none;
}

.user-avatar-initial {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}

.user-tag {
  font-size: 12px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-link {
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  flex-shrink: 0;
}

.logout-link:hover {
  color: var(--text);
}

/* ===================== Login gate ===================== */
.login-gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-main);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(201,150,46,0.09), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(201,150,46,0.07), transparent 45%);
  background-size: 180% 180%;
  animation: gradientDrift 14s ease-in-out infinite;
  padding: 20px;
}

@keyframes gradientDrift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

.login-gate.hidden {
  display: none;
}

.login-box {
  text-align: center;
  max-width: 320px;
  animation: loginFadeUp 0.6s ease both;
}

@keyframes loginFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.stamp-mark {
  color: var(--gold);
  font-size: 34px;
  margin-bottom: 14px;
  display: inline-block;
  animation: floatMark 3s ease-in-out infinite;
}

@keyframes floatMark {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.login-box h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 8px 0;
  color: var(--text);
}

.login-box p {
  color: var(--text-soft);
  font-size: 14px;
  margin: 0 0 22px 0;
}

.login-btn {
  background: var(--gold);
  color: var(--navy-deep, #16202E);
  border: none;
  border-radius: 8px;
  padding: 12px 26px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease, transform 0.1s ease;
}

.login-btn:hover {
  background: var(--gold-deep);
}

.login-btn:active {
  transform: scale(0.98);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-form input {
  width: 100%;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
}

.auth-form input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* Password field with eye-toggle button */
.password-field {
  position: relative;
}

.password-field input {
  padding-right: 42px;
}

.toggle-password {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  padding: 6px 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-password .eye-icon {
  width: 19px;
  height: 19px;
}

.toggle-password .eye-icon.hidden {
  display: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--text-soft);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #1F1F1F;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.google-btn:hover {
  background: #f3f3f3;
}

.google-btn:active {
  transform: scale(0.98);
}

.toggle-password:hover {
  color: var(--gold);
}

/* Shake feedback when login/signup fails */
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.auth-form.shake {
  animation: shake 0.4s ease;
}

.auth-toggle {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-soft);
}

.link-btn {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-left: 4px;
}

.link-btn:hover {
  color: var(--gold-deep);
}

.auth-error {
  margin-top: 14px;
  font-size: 13px;
  color: #E0765A;
}

.auth-error.hidden {
  display: none;
}

.app.hidden {
  display: none;
}

.settings-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--text-soft);
  padding: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 6px;
}

.settings-btn:hover {
  background: var(--bg-panel);
  color: var(--text);
}

.settings-btn .gear {
  color: var(--gold);
}


/* ===================== History item controls ===================== */
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.history-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item-menu {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 15px;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
}

.history-item:hover .history-item-menu {
  opacity: 1;
}

.history-item-menu:hover {
  background: var(--border);
  color: var(--text);
}

/* ===================== Settings modal ===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal .field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.modal select,
.modal textarea {
  width: 100%;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
}

.modal select:focus,
.modal textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}

.checkbox-row input {
  margin-top: 3px;
  accent-color: var(--gold);
}

.modal-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.settings-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-weight: 700;
}

.settings-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.settings-hint {
  font-size: 12px;
  color: var(--text-soft);
  margin: -8px 0 0 0;
}

.save-btn {
  width: 100%;
  background: var(--gold);
  color: var(--navy-deep, #16202E);
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.save-btn:hover {
  background: var(--gold-deep);
}

.disclaimer-text {
  flex-shrink: 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-soft);
  margin: -14px auto 10px auto;
  max-width: 720px;
  width: calc(100% - 40px);
}

@media (max-width: 720px) {
  .disclaimer-text {
    font-size: 11px;
    margin: -18px auto calc(10px + env(safe-area-inset-bottom)) auto;
    width: calc(100% - 24px);
  }
}

/* ===================== Onboarding wizard ===================== */
.onboarding-modal {
  max-width: 440px;
}

.onboarding-modal .modal-close {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.onboarding-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 14px 0 0;
  flex-shrink: 0;
}

.onboarding-dot {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.2s ease;
}

.onboarding-dot.active,
.onboarding-dot.done {
  background: var(--gold);
}

.onboarding-body {
  gap: 14px;
}

.onboarding-step.hidden {
  display: none;
}

.modal-body input[type="text"] {
  width: 100%;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}

.modal-body input[type="text"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.onboarding-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboarding-footer .save-btn {
  flex: 1;
}

.ob-back-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
  border-radius: 6px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}

.ob-back-btn:hover {
  color: var(--text);
  border-color: var(--text-soft);
}

.ob-back-btn.hidden {
  display: none;
}

/* ===================== Main area ===================== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

/* Empty state, centered */
.greeting-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.greeting-state.hidden {
  display: none;
}

.greeting-mark {
  color: var(--gold);
  font-size: 30px;
  margin-bottom: 14px;
}

.greeting-state h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  margin: 0 0 8px 0;
}

.greeting-sub {
  color: var(--text-soft);
  font-size: 14px;
  margin: 0;
}

.greeting-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  margin: 0 0 8px 0;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 0;
}

.typing-indicator .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-soft);
  animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Message thread */
.chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 32px;
  padding-bottom: 16px;
  /* keeps the messages in the same 680px centered column,
     while the scrollbar itself sits at the far right edge */
  padding-left: max(20px, calc((100% - 680px) / 2));
  padding-right: max(20px, calc((100% - 680px) / 2));
  overscroll-behavior: contain;
}

/* Thin scrollbar: Chrome, Edge, Safari */
.chat-log::-webkit-scrollbar {
  width: 6px;
}
.chat-log::-webkit-scrollbar-track {
  background: transparent;
}
.chat-log::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 3px;
}
.chat-log::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Thin scrollbar: Firefox only (Chrome ignores the webkit styles above if these apply) */
@supports not selector(::-webkit-scrollbar) {
  .chat-log {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  }
}

.chat-log.hidden {
  display: none;
}

.message {
  display: flex;
  gap: 10px;
}

.message.user {
  justify-content: flex-end;
}

.message.assistant {
  justify-content: flex-start;
}

.avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

.message.assistant .avatar {
  background: transparent;
  border: 1.5px dashed var(--gold);
  color: var(--gold);
  font-size: 13px;
}

.message.user .avatar {
  background: var(--gold);
  color: var(--navy-deep, #16202E);
  order: 2;
}

.message-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 78%;
}

.message.assistant .message-body {
  max-width: calc(100% - 38px);
}

.bubble {
  padding: 11px 15px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.message.assistant .bubble {
  background: transparent;
  color: var(--text);
  padding-left: 0;
}

.message.assistant .bubble p {
  margin: 0 0 12px 0;
}

.message.assistant .bubble p:last-child {
  margin-bottom: 0;
}

.message.assistant .bubble ol,
.message.assistant .bubble ul {
  margin: 0 0 12px 0;
  padding-left: 22px;
}

.message.assistant .bubble li {
  margin-bottom: 4px;
}

.message.assistant .bubble strong {
  color: var(--text);
  font-weight: 700;
}

.message.assistant .bubble h2,
.message.assistant .bubble h3,
.message.assistant .bubble h4 {
  font-family: var(--font-display);
  color: var(--text);
  margin: 18px 0 8px 0;
  line-height: 1.3;
}

.message.assistant .bubble h2:first-child,
.message.assistant .bubble h3:first-child,
.message.assistant .bubble h4:first-child {
  margin-top: 0;
}

.message.assistant .bubble h2 { font-size: 19px; }
.message.assistant .bubble h3 { font-size: 16.5px; }
.message.assistant .bubble h4 { font-size: 14.5px; }

.message.assistant .bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px 0;
  font-size: 13px;
  overflow-x: auto;
  display: block;
}

.message.assistant .bubble th,
.message.assistant .bubble td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.message.assistant .bubble th {
  background: var(--bg-panel);
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap;
}

.message.assistant .bubble tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

.message.assistant .bubble blockquote {
  margin: 0 0 12px 0;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--gold);
  color: var(--text-soft);
}

.message.assistant .bubble blockquote p {
  margin: 0 0 6px 0;
}

.message.assistant .bubble blockquote p:last-child {
  margin-bottom: 0;
}

.message.user .bubble {
  background: var(--user-bubble);
  color: var(--text);
}

.message.status .bubble {
  color: var(--text-soft);
  font-style: italic;
  padding-left: 0;
}

.message.status.error .bubble {
  color: #E0765A;
}

.message-image {
  max-width: 220px;
  border-radius: 10px;
  display: block;
}

.private-mode-banner {
  max-width: 720px;
  width: calc(100% - 40px);
  margin: 8px auto 0 auto;
  background: rgba(107, 91, 140, 0.12);
  border: 1px solid rgba(107, 91, 140, 0.4);
  color: #B9A9D9;
  font-size: 12.5px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
}

.private-mode-banner.hidden { display: none; }

body.private-mode-active .chat-input-row { border-color: #6B5B8C; }
body.private-mode-active .tools-btn.has-active { background: #6B5B8C; border-color: #6B5B8C; }

/* Sources row under a web-search-backed reply */
.sources-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.sources-label {
  font-size: 11px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.source-chip {
  font-size: 12px;
  color: var(--gold);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-chip:hover {
  border-color: var(--gold);
}

.suggestions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.suggestion-chip {
  font-size: 13px;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}

.suggestion-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Copy / action row under assistant messages */
.message-actions {
  display: flex;
  gap: 4px;
}

.action-btn {
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-btn:hover {
  background: var(--bg-panel);
  color: var(--text);
}

/* Input bar */
.chat-input-row {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 720px;
  width: calc(100% - 40px);
  margin: 0 auto 24px auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px 10px 10px;
  position: relative; /* anchors the tools popup */
}

.chat-input-row:focus-within {
  border-color: var(--gold);
}

/* ---- "+" tools button + labeled popup menu ---- */
.tools-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  margin-bottom: 2px;
}

.tools-btn:hover,
.tools-btn[aria-expanded="true"] {
  border-color: var(--gold);
  color: var(--gold);
}

.tools-btn.has-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep, #16202E);
}

.tools-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tools-popup.hidden {
  display: none;
}

.tools-popup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.tools-popup-item:hover {
  background: var(--bg-main);
}

.tools-popup-item .popup-icon {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
}

.tools-popup-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.tools-popup-item-hint {
  font-size: 11px;
  color: var(--text-soft);
}

.tools-popup-check {
  flex-shrink: 0;
  width: 14px;
  color: var(--gold);
  font-weight: 700;
  opacity: 0;
}

.tools-popup-item.active {
  background: var(--bg-main);
}

.tools-popup-item.active .tools-popup-check {
  opacity: 1;
}

.tools-popup-item.locked {
  opacity: 0.55;
}

.tools-popup-item.locked::after {
  content: "PRO";
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
}

.tools-popup-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}

/* Length stepper shown under "Sequence mode" once it's active */
.sequence-length-row {
  display: flex;
  gap: 4px;
  padding: 2px 10px 8px 10px;
}

.sequence-length-btn {
  flex: 1;
  background: var(--bg-main);
  border: 1px solid var(--border);
  color: var(--text-soft);
  border-radius: 6px;
  padding: 7px 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.sequence-length-btn:hover {
  border-color: var(--gold);
  color: var(--text);
}

.sequence-length-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep, #16202E);
}

.campaign-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
}

.campaign-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campaign-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  font-weight: 700;
}

.campaign-value {
  font-size: 14px;
  color: var(--text);
}

.campaign-body-text {
  font-size: 14px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.5;
}

.campaign-subject-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campaign-subject-list li {
  font-size: 14px;
  color: var(--text);
}

.campaign-copy-btn {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
  border-radius: 6px;
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.campaign-copy-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.campaign-refine-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.campaign-refine-btn {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-soft);
  border-radius: 6px;
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.campaign-refine-btn:hover:not(:disabled) {
  border-color: var(--gold);
  border-style: solid;
  color: var(--gold);
}

.campaign-refine-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.campaign-refine-error {
  font-size: 12.5px;
  color: #E0765A;
}

.campaign-refine-error.hidden {
  display: none;
}

.campaign-warnings {
  background: rgba(224, 118, 90, 0.08);
  border: 1px solid rgba(224, 118, 90, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
}

.campaign-warnings-label {
  font-size: 12px;
  font-weight: 700;
  color: #E0765A;
  margin-bottom: 6px;
}

.campaign-warnings ul {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.campaign-warnings li {
  font-size: 12.5px;
  color: var(--text-soft);
}

.campaign-warnings-ok {
  font-size: 12.5px;
  color: #7DB88A;
  font-weight: 600;
}

.campaign-lp-divider {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-weight: 700;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 2px;
}

/* ===================== SEO intro section ===================== */
.seo-intro {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 80px 20px;
  color: var(--text);
}

.seo-banner {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 0 28px 0;
}

.seo-intro h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 14px 0;
  color: var(--text);
}

.seo-intro h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  margin: 32px 0 10px 0;
  color: var(--text);
}

.seo-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}

.seo-intro p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

.seo-intro a {
  color: var(--gold);
  text-decoration: underline;
}

.seo-feature-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seo-feature-list li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

.seo-feature-list strong {
  color: var(--text);
}

/* ===================== Static pages (About / FAQ) ===================== */
.static-page-body {
  background: var(--bg-main);
  margin: 0;
  min-height: 100vh;
}

.static-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 0 20px;
}

.static-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}

.static-nav-links {
  display: flex;
  gap: 18px;
}

.static-nav-links a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
}

.static-nav-links a:hover,
.static-nav-links a.static-nav-active {
  color: var(--gold);
}

.seo-cta-btn {
  display: inline-block;
  margin-top: 32px;
  background: var(--gold);
  color: var(--navy-deep, #16202E);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 8px;
}

.seo-cta-btn:hover {
  background: var(--gold-deep);
}

.faq-item {
  margin-bottom: 26px;
}

.faq-item h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 8px 0;
  color: var(--text);
}

.faq-item p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
}

/* Sidebar footer About/FAQ links */
.footer-links-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px 8px 8px;
}

.footer-link {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 11.5px;
}

.footer-link:hover {
  color: var(--gold);
}

.footer-link-dot {
  color: var(--border);
  font-size: 11px;
}

/* ===================== Sequence card ===================== */
.sequence-card {
  max-width: 520px;
}

.sequence-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
}

.sequence-email {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.sequence-email + .sequence-email {
  margin-top: -2px;
}

.sequence-email-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text);
  list-style: none;
  background: var(--bg-main);
  transition: background 0.15s ease;
}

.sequence-email-summary::-webkit-details-marker {
  display: none;
}

.sequence-email-summary::before {
  content: "▸";
  color: var(--text-soft);
  font-size: 11px;
  margin-right: 2px;
  transition: transform 0.15s ease;
}

.sequence-email[open] .sequence-email-summary::before {
  transform: rotate(90deg);
}

.sequence-email-summary:hover {
  background: var(--bg-panel);
}

.sequence-step-badge {
  flex-shrink: 0;
  background: rgba(201, 150, 46, 0.12);
  color: var(--gold);
  border: 1px solid rgba(201, 150, 46, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
}

.sequence-delay {
  color: var(--text-soft);
  font-size: 12px;
}

.sequence-email-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--border);
}

.input-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.attachment-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
}

.attachment-preview.hidden {
  display: none;
}

.attachment-preview img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}

.attachment-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12.5px;
  color: var(--text-soft);
}

.attachment-remove {
  background: transparent;
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}

.attachment-remove:hover {
  color: #E0765A;
}

#userInput {
  flex: 1;
  resize: none;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  max-height: 40vh;
  overflow-y: auto;
  padding: 6px 0;
}

#userInput:focus {
  outline: none;
}

#userInput::placeholder {
  color: var(--text-soft);
}

#sendBtn {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: #16202E;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

#sendBtn:hover { background: var(--gold-deep); }

#sendBtn:disabled {
  background: var(--border);
  color: var(--text-soft);
  cursor: not-allowed;
}

#sendBtn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Send button doubles as a stop button while a reply is in flight —
   still clickable (setLoading only disables the textarea, not this
   button), with a spinning ring drawn around it. */
#sendBtn.loading {
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
}

#sendBtn.loading::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--gold);
  animation: sendSpin 0.8s linear infinite;
}

@keyframes sendSpin {
  to { transform: rotate(360deg); }
}

.mic-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.mic-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.mic-btn.hidden {
  display: none;
}

.mic-icon {
  width: 16px;
  height: 16px;
}

.mic-btn.recording {
  border-color: #E0765A;
  color: #E0765A;
  animation: micPulse 1.2s infinite ease-in-out;
}

@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 118, 90, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(224, 118, 90, 0); }
}

/* ===================== Sidebar toggle buttons ===================== */
.sidebar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-soft);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.sidebar-close-btn {
  margin-right: 2px;
}

.sidebar-open-btn {
  position: fixed;
  top: 16px;
  left: 12px;
  width: 40px;
  height: 40px;
  background: var(--bg-panel);
  z-index: 35;
}

.sidebar-backdrop {
  display: none;
}

/* ===================== Mobile ===================== */
@media (max-width: 720px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 78vw;
    max-width: 280px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 30;
    padding-left: 12px;
    padding-right: 12px;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar.collapsed {
    width: 78vw;
    max-width: 280px;
    padding-left: 12px;
    padding-right: 12px;
    border-right-color: var(--border);
  }

  .sidebar-reopen-btn {
    display: none;
  }

  .tools-popup {
    min-width: 210px;
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 25;
  }

  .sidebar-backdrop.hidden {
    display: none;
  }

  .sidebar-open-btn {
    top: calc(14px + env(safe-area-inset-top));
    left: 14px;
  }

  .main {
    padding-top: 58px;
  }

  .greeting-state h1 { font-size: 22px; }
  .greeting-sub { font-size: 13px; padding: 0 12px; }

  .chat-log { padding-top: 20px; padding-bottom: 12px; padding-left: 14px; padding-right: 14px; }
  .bubble { max-width: 88%; font-size: 14.5px; }

  .chat-input-row {
    width: calc(100% - 24px);
    padding: 8px 8px 8px 14px;
    margin-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .history-item { padding: 10px; }
  .history-item-menu {
    opacity: 1;
    font-size: 18px;
    padding: 6px 10px;
  }
  .new-chat-btn { padding: 11px 12px; }
  .settings-btn { padding: 10px; }

  #sendBtn { width: 38px; height: 38px; }

  .modal { max-width: 100%; margin: 0 8px; }
}

/* ===================== Guest mode additions ===================== */

.guest-block {
  padding: 2px 8px 4px 8px;
  position: relative; /* anchors #guestPopup */
}

.signup-prompt-btn {
  width: 100%;
  background: var(--gold);
  color: var(--navy-deep, #16202E);
  border: none;
  border-radius: 6px;
  padding: 9px 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.signup-prompt-btn:hover {
  background: var(--gold-deep);
}

/* Login gate is now a modal instead of a full-screen takeover */
.login-modal {
  max-width: 380px;
  background: var(--bg-main);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(201,150,46,0.09), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(201,150,46,0.07), transparent 45%);
  padding: 32px 24px 24px 24px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.auth-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.login-modal .login-box {
  animation: loginFadeUp 0.4s ease both;
}

.auth-legal-note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-soft);
  text-align: center;
}

.auth-legal-note a {
  color: var(--gold);
  text-decoration: underline;
}

.upgrade-btn {
  width: 100%;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  margin-bottom: 8px;
}

.upgrade-btn:hover {
  background: rgba(201, 150, 46, 0.1);
}

.upgrade-desc {
  color: var(--text-soft);
  font-size: 13.5px;
  margin-bottom: 18px;
}

.upgrade-modal {
  max-width: 640px;
}

.plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 560px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
}

.plan-card {
  position: relative;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
}

.plan-card-pro {
  border-color: var(--gold);
}

.plan-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--gold);
  color: var(--navy-deep, #16202E);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
}

.plan-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.plan-tagline {
  color: var(--text-soft);
  font-size: 12.5px;
  margin-top: 2px;
  margin-bottom: 14px;
}

.plan-features {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.plan-features li {
  font-size: 13px;
  color: var(--text);
  padding-left: 18px;
  position: relative;
}

.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

.plan-btn {
  width: 100%;
  border-radius: 6px;
  padding: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}

.plan-btn-current {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
  cursor: default;
}

.currency-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.currency-btn {
  width: 100%;
  background: var(--bg-main);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease;
}

.currency-btn:hover {
  border-color: var(--gold);
}

.currency-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --------------------------------------------------------------
   Support / "Buy me a coffee" button — sidebar row + footer link.
   Uses the gold accent so it reads as a nice-to-have next to New
   chat, not a system action.
   -------------------------------------------------------------- */
.support-sidebar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--gold);
  color: var(--gold);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.15s ease;
}

.support-sidebar-btn:hover {
  background: rgba(160, 120, 32, 0.1);
}

.support-footer-link {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 11.5px;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-left: 4px;
}

.support-amount-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 16px 0;
}

.support-currency-select {
  background: var(--bg-main);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 12px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}

.support-amount-input {
  flex: 1;
  background: var(--bg-main);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
}

.support-amount-input:focus,
.support-currency-select:focus {
  outline: none;
  border-color: var(--gold);
}

.support-presets {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.support-preset-btn {
  flex: 1;
  background: var(--bg-main);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.support-preset-btn:hover,
.support-preset-btn.active {
  border-color: var(--gold);
  color: var(--gold);
}

.support-submit-btn {
  width: 100%;
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.support-submit-btn:hover {
  background: var(--gold-deep);
}

.support-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===================== Homepage SEO content + footer links ===================== */
.home-about {
  max-width: 560px;
  margin: 28px auto 0 auto;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

.home-about h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 8px 0;
  color: var(--text);
}

.home-about p {
  margin: 0 0 10px 0;
}

.home-about ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-about strong {
  color: var(--text);
}

.home-about a {
  color: var(--gold);
  text-decoration: underline;
}

.home-footer-links {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 0 0 12px 0;
}

.home-footer-links a {
  color: var(--text-soft);
  font-size: 12px;
  text-decoration: none;
}

/* ============================================================
   Beeto — Claude-style Settings modal (vertical sidebar nav)
   Paste this whole block at the END of your existing style.css.

   Your original .settings-tabs / .settings-tab rules stay exactly
   as they are (in case anything else in the app ever reuses them).
   These new rules only kick in when the "settings-tabs-claude" /
   "settings-modal-claude" / "settings-body-claude" modifier classes
   are ALSO present — which only the Settings modal will have, once
   you update index.html. Combined-class selectors here guarantee
   these win over the originals regardless of file order.
   ============================================================ */

/* Widen just the Settings modal for a sidebar + content layout */
.modal.settings-modal-claude {
  max-width: 760px;
  width: 100%;
}

/* Turn modal-body into a two-column row, only for Settings */
.modal-body.settings-body-claude {
  display: flex;
  flex-direction: row;
  padding: 0;
  gap: 0;
  overflow: hidden;
  min-height: 420px;
}

/* ---- Left sidebar nav — overrides the original horizontal pill
   bar look entirely when this modifier class is present ---- */
.settings-tabs.settings-tabs-claude {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 200px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 12px;
  box-sizing: border-box;
}

.settings-tabs-claude .settings-tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
}

.settings-tabs-claude .settings-tab:hover {
  background: var(--bg-main);
  color: var(--text);
}

/* Active item — rounded gold-tinted highlight pill, like Claude's
   "Preferences" row in your screenshot */
.settings-tabs-claude .settings-tab.active {
  background: rgba(201, 150, 46, 0.18);
  color: var(--text);
  font-weight: 700;
}

.settings-tab-icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
  opacity: 0.85;
  flex-shrink: 0;
}

/* ---- Right-hand content column ---- */
.settings-panels-claude {
  flex: 1;
  min-width: 0;
  padding: 20px 24px;
  overflow-y: auto;
  max-height: 60vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Panels inside this new wrapper already carry .settings-panel /
   .hidden from your existing CSS — nothing more needed there. */

/* On phones: sidebar becomes a horizontal scrolling strip along the
   top instead of eating half the screen width */
@media (max-width: 640px) {
  .modal-body.settings-body-claude {
    flex-direction: column;
  }
  .settings-tabs.settings-tabs-claude {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
  }
  .settings-tabs-claude .settings-tab {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
  }
  .settings-panels-claude {
    max-height: 50vh;
  }
}

/* ============================================================
   Integrations panel — connect/disconnect rows + Brevo API-key
   input, styled like the pill buttons in your screenshot.
   ============================================================ */
.integrations-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.integration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
}

.integration-label {
  font-size: 14px;
  color: var(--text);
}

.integration-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: var(--gold);
  color: var(--navy-deep, #16202E);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-body);
}

.integration-btn:hover {
  background: var(--gold-deep);
}

.integration-disconnect {
  background: rgba(224, 118, 90, 0.85);
  color: var(--text);
}

.integration-disconnect:hover {
  background: #E0765A;
}

.integration-key-input {
  flex: 1;
  min-width: 160px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  box-sizing: border-box;
}

.integration-key-input::placeholder {
  color: var(--text-soft);
}

.integration-key-input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.home-footer-links a:hover {
  color: var(--gold);
  text-decoration: underline;
}

.icon-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  vertical-align: middle;
}

.icon-spin {
  animation: iconSpin 0.9s linear infinite;
}

@keyframes iconSpin {
  to { transform: rotate(360deg); }
}

/* status text while Beeto works */
.status-indicator { padding: 8px 0; }
.status-shimmer {
  font-size: 14.5px;
  background: linear-gradient(90deg, var(--text-soft) 0%, var(--text) 50%, var(--text-soft) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: statusShimmer 1.8s linear infinite;
}
@keyframes statusShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .status-shimmer { animation: none; color: var(--text-soft); background: none; }
}

/* icon action buttons + timestamps */
.message-actions { align-items: center; }
.action-btn.icon-only { width: 28px; height: 28px; padding: 0; justify-content: center; }
.action-btn.icon-only .icon-svg { width: 16px; height: 16px; }
.action-btn.active { color: var(--gold); }
.msg-time { font-size: 11.5px; color: var(--text-soft); margin-left: 6px; white-space: nowrap; }
.msg-time.user-time { align-self: flex-end; margin: 2px 4px 0 0; }

/* blinking cursor at the end of a streaming reply */
.bubble.streaming > :last-child::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 15px;
  margin-left: 3px;
  background: var(--gold);
  vertical-align: -2px;
  border-radius: 1px;
  animation: caretBlink 1s steps(2, start) infinite;
}
@keyframes caretBlink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .bubble.streaming > :last-child::after { animation: none; }
}