/* samar-twin custom CSS */

:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Replace Tailwind's h-screen on body with dynamic viewport height so
   iOS Safari's collapsing URL bar doesn't push our layout past the
   bottom of the visible area. 100vh kept as fallback for older browsers. */
html, body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
}

.soft-shadow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(26, 26, 26, 0.04);
}

/* ---------- App shell (two-column, full-height) ---------- */

.app-shell {
  display: flex;
  /* 100dvh accounts for mobile Safari's collapsing URL bar so the input
     row doesn't slip behind it. 100vh kept as a fallback for old browsers. */
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  position: relative;
}

.sidebar {
  width: 270px;
  flex-shrink: 0;
  background: #F4F2EC;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.new-conv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  color: rgba(26, 26, 26, 0.6);
  transition: background 0.15s, color 0.15s;
}
.new-conv-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #C84B31;
}

.online-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(26, 26, 26, 0.55);
  margin-top: 1px;
}
.online-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2EA86E;
  box-shadow: 0 0 0 2px rgba(46, 168, 110, 0.18);
}

.sidebar-section-label {
  padding: 14px 16px 6px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(26, 26, 26, 0.45);
}

.conv-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.conv-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: rgba(26, 26, 26, 0.4);
}

.conv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(26, 26, 26, 0.8);
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
}
.conv-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.conv-item.active {
  background: #FFFFFF;
  color: #1A1A1A;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.conv-item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-item-delete {
  opacity: 0;
  color: rgba(26, 26, 26, 0.4);
  padding: 2px;
  border-radius: 4px;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.conv-item:hover .conv-item-delete {
  opacity: 1;
}
.conv-item-delete:hover {
  color: #C84B31;
  background: rgba(200, 75, 49, 0.08);
}

.sidebar-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding: 10px 12px;
}

.sidebar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(26, 26, 26, 0.6);
  transition: background 0.12s, color 0.12s;
}
.sidebar-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #C84B31;
}

/* ---------- Main chat ---------- */

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: #FAFAF7;
}

.chat-topbar {
  height: 56px;
  flex-shrink: 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  background: #FAFAF7;
  /* Belt-and-suspenders: stays pinned even if the parent ever becomes a
     scroll container (e.g., from an iOS rendering quirk). */
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-link {
  color: rgba(26, 26, 26, 0.55);
  transition: color 0.15s;
}
.topbar-link:hover {
  color: #C84B31;
}

.how-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.65);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.how-btn:hover {
  color: #C84B31;
  border-color: rgba(200, 75, 49, 0.35);
  background: rgba(200, 75, 49, 0.04);
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
  animation: modal-fade 0.15s ease-out;
}
.modal-backdrop.hidden { display: none; }

@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(26, 26, 26, 0.18);
  max-width: 440px;
  width: 100%;
  overflow: hidden;
  animation: modal-pop 0.18s ease-out;
}

@keyframes modal-pop {
  from { transform: scale(0.97); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 10px;
}

.modal-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.modal-close {
  color: rgba(26, 26, 26, 0.5);
  padding: 6px;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
}
.modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1A1A1A;
}

.modal-body {
  padding: 4px 20px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(26, 26, 26, 0.78);
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 28px 0 8px;
  scroll-behavior: smooth;
  /* iOS scroll behavior: explicit pan-y so Safari recognizes vertical
     touches as scroll gestures on this element rather than letting
     them propagate up to the (overflow-hidden) body and do nothing.
     overscroll-behavior: contain stops the bounce from rubber-banding
     the whole page. -webkit-overflow-scrolling is a legacy hint that
     still helps on some Safari versions. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.chat-log-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Empty state */
.empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.empty-state.hidden { display: none; }

.empty-avatar {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: #EFE9E2;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.empty-avatar span {
  font-size: 32px;
  font-weight: 500;
  color: #C84B31;
}
.empty-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #EFE9E2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-avatar span {
  font-size: 11px;
  font-weight: 600;
  color: #C84B31;
}
.sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.empty-name {
  margin-top: 16px;
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  color: #1A1A1A;
}
.empty-name em {
  font-style: italic;
  font-weight: 500;
}

.empty-desc {
  margin-top: 8px;
  max-width: 420px;
  font-size: 14px;
  color: rgba(26, 26, 26, 0.65);
  line-height: 1.5;
}

/* Chat bubbles */
.bubble-user {
  background: #EFEDE8;
  color: #1A1A1A;
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  max-width: 78%;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bubble-twin {
  background: #FFFFFF;
  color: #1A1A1A;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 14px;
  max-width: 78%;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.bubble-row.user { justify-content: flex-end; }
.bubble-row.twin { justify-content: flex-start; }

.twin-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #EFE9E2;
  color: #C84B31;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.twin-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Typing indicator */
.typing-dots { display: inline-flex; gap: 4px; }
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.4);
  animation: bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Input bar */
.chat-input-bar {
  flex-shrink: 0;
  padding: 12px 0 20px;
  background: #FAFAF7;
}

.chat-input-form {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-input {
  flex: 1;
  padding: 14px 18px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-input:focus {
  border-color: rgba(200, 75, 49, 0.5);
  box-shadow: 0 0 0 3px rgba(200, 75, 49, 0.08);
}

.chat-send {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #C84B31;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s;
}
.chat-send:hover { background: #B23E27; }
.chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Admin reused styles ---------- */

.tab-btn.active {
  border-bottom-color: #C84B31;
  color: #C84B31;
}
.tab-btn { color: rgba(26, 26, 26, 0.6); }
.tab-btn:hover { color: #1A1A1A; }

.correction-form {
  background: #FFF6F1;
  border: 1px solid rgba(200, 75, 49, 0.2);
  border-radius: 10px;
  padding: 10px;
  margin-top: 8px;
}

/* Menu button (hamburger): hidden on desktop, shown on mobile. */
.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: rgba(26, 26, 26, 0.65);
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.menu-btn:hover, .menu-btn:active {
  background: rgba(0, 0, 0, 0.05);
  color: #C84B31;
}

/* Mobile-only close button inside the sidebar header. */
.sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: rgba(26, 26, 26, 0.5);
  transition: background 0.12s, color 0.12s;
}
.sidebar-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1A1A1A;
}

/* Backdrop behind the slide-in sidebar on mobile. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.32);
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Mobile (≤768px): sidebar becomes a slide-in overlay,
     chat takes full width, fonts/padding tighten. --------- */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84vw;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 30;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    height: 100dvh;
  }
  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
  }

  .chat-main {
    width: 100%;
    /* Sidebar is overlay, so chat is full width regardless of sidebar state. */
  }

  .menu-btn {
    display: inline-flex;
  }

  .sidebar-close {
    display: inline-flex;
  }

  /* Topbar tightens. The mode-chip column is allowed to shrink so the
     right-side buttons don't get pushed out. */
  .chat-topbar {
    padding: 0 12px;
    gap: 8px;
  }
  .chat-topbar > div:first-child {
    flex: 1;
    min-width: 0;
  }
  .chat-topbar > div:last-child {
    gap: 14px !important;
    flex-shrink: 0;
  }

  .how-btn {
    padding: 6px 9px;
    font-size: 11px;
  }
  .how-btn span {
    display: none; /* icon-only on mobile to save space */
  }

  /* The "Have a private key? Enter here →" link doesn't need to wrap. */
  #open-key-modal {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Chat log + input bar get tighter horizontal padding. */
  .chat-log {
    padding: 16px 0 8px;
  }
  .chat-log-inner {
    padding: 0 12px;
    gap: 10px;
  }
  .chat-input-bar {
    padding: 10px 0 14px;
    /* Respect iOS safe area at bottom (home indicator zone). */
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .chat-input-form {
    padding: 0 12px;
    gap: 6px;
  }
  .chat-input {
    padding: 12px 16px;
    font-size: 16px; /* 16px prevents iOS zoom-on-focus. */
  }
  .chat-send {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
  }

  /* Bubbles get a bit more room since the sidebar is gone. */
  .bubble-user, .bubble-twin {
    max-width: 86%;
    font-size: 14.5px;
  }

  /* Empty state: smaller avatar + headline so it fits above the fold. */
  .empty-avatar {
    width: 88px;
    height: 88px;
  }
  .empty-avatar span {
    font-size: 26px;
  }
  .empty-name {
    font-size: 26px;
  }
  .empty-desc {
    font-size: 13.5px;
    max-width: 320px;
  }

  /* Modals respect the safe area / small viewport. */
  .modal-backdrop {
    padding: 12px;
    align-items: flex-end;
  }
  .modal-card {
    border-radius: 16px 16px 12px 12px;
    max-height: 85dvh;
    overflow-y: auto;
  }
}

/* Admin avatar preview */
.avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: #EFE9E2;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-preview span {
  font-size: 22px;
  font-weight: 500;
  color: #C84B31;
}
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}