/* Flash message styling to match notifications page */
.flash-message {
  background: #bee3f8;
  color: #2b6cb0;
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 18px;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
/* styles.css - shared base styles for all pages */
body {
  font-family: 'Inter', Arial, sans-serif;
  background: #f8fafc;
  color: #222;
  margin: 0;
  padding: 0;
}
header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; /* allow absolutely-positioning the hamburger */
}
h2 {
  margin: 0;
  font-size: 2rem;
  color: #2d3748;
}
nav a {
  color: #2563eb;
  text-decoration: none;
  margin-right: 18px;
  font-weight: 500;
}
nav a:last-child {
  margin-right: 0;
}
nav .badge {
  background: #2563eb;
  color: #fff;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 1rem;
  margin-right: 18px;
}
footer {
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  margin: 32px 0 0 0;
}
.btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
}
.btn:hover {
  background: #1e40af;
}

/* Responsive / Mobile-friendly additions */
.main-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.main-nav a {
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
}
.logout-form { display: inline-block; margin-left: 6px; }
.logout-btn {
  background: transparent;
  border: none;
  color: #d00;
  cursor: pointer;
  padding: 6px 8px;
  font: inherit;
}
.logout-btn:active, .logout-btn:focus { outline: 2px solid rgba(0,0,0,0.08); }

/* Improve tap targets and scrolling for mobile */
/* Reduce vertical footprint for regular anchor buttons like the "View Sessions" link
   while keeping larger min-heights for form buttons where appropriate. */
button, .copy-btn, .toggle-btn, .save-button, .copy-button, .logout-btn {
  min-height: 40px;
  padding: 10px 12px;
}

.btn {
  /* make .btn a bit more compact vertically */
  margin-bottom: 4px; /* ensure small gap below instead of large stacks */
  margin-top: 6px;
  padding: 6px 14px;
  min-height: 0; /* override global min-height so link-style buttons don't force extra height */
}

/* Make tables and code blocks horizontally scrollable on small screens */
table, .settings-table, .notifications-table, .phonelog-list, .transcript-box, .json-box {
  max-width: 100%;
}
.table-wrap {
  overflow-x: auto;
}
code, pre {
  word-break: break-word;
}

/* Chat and message tweaks */
.chat-wrap { padding: 0 12px; }
.msg { max-width: 78%; }

/* Utility: stack header elements on small screens */
@media (max-width: 768px) {
  header { padding: 12px 16px; }
  header h2 { font-size: 1.25rem; }
  .main-nav { width: 100%; justify-content: flex-start; }
  .main-nav a { flex: 1 1 auto; text-align: left; }
  .logout-form { margin-left: 0; }

  /* Ensure tables scroll horizontally */
  .table-wrap { -webkit-overflow-scrolling: touch; }

  /* Increase spacing for list items / cards for easier tapping */
  .phonelog-item, .contact-item, #sessions-list li, .notifications-table td {
    padding: 14px;
  }

  /* Make chat messages more compact vertically and allow wrapping */
  .msg { max-width: 92%; font-size: 15px; }
  .from-ai { padding: 10px 12px; }
  .from-user { padding: 10px 12px; }
}

/* LLM config page styles */
.llm-list { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 12px; }
.llm-card { background: #fff; border: 1px solid #e6edf3; border-radius: 10px; padding: 14px; box-shadow: 0 2px 6px rgba(15,23,42,0.03); }
.llm-card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.llm-card-header h4 { margin: 0; font-size: 1.1rem; color: #0f172a; }
.llm-card-actions { display:flex; gap:8px; }
.btn.small { padding: 6px 10px; font-size: 0.9rem; background:#eef2ff; color:#1e3a8a; border-radius:6px; }
.btn.small:hover { background:#e0e7ff; }
.llm-preview { margin-top:8px; padding:10px; background:#f8fafc; border-radius:8px; border:1px solid #eef2f6; }
.preview-text { color:#243b53; line-height:1.4; max-height:120px; overflow:auto; white-space:pre-wrap; }
.llm-edit { margin-top:10px; }
.llm-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace; font-size:0.95rem; }
.json-box { background:#0f172a; color:#e6eef8; padding:12px; border-radius:8px; overflow:auto; max-height:380px; }

/* Small utility for inline cancel buttons */
.btn[type="button"][data-action="cancel"] { background:#f3f4f6; color:#374151; border-radius:6px; margin-left:8px; }
.btn[type="button"][data-action="cancel"]:hover { background:#e5e7eb; }

@media (min-width: 900px) {
  .llm-list { grid-template-columns: 1fr 1fr; }
}

/* Keep the config page content centered and not full-width */
.content-wrap, main, .llm-list { margin-left: auto; margin-right: auto; max-width: 1180px; }

/* Hidden copy-source but selectable for execCommand('copy') */
.copy-source { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Modal styles for LLM prompt editor */
.llm-modal { position: fixed; inset: 0; display: flex; align-items: stretch; justify-content: center; z-index: 1200; }
.llm-modal-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,0.6); }
.llm-modal-panel { position: relative; background: #fff; border-radius: 6px; padding: 18px; width: 100%; max-width: 1200px; height: 100vh; overflow: auto; box-shadow: 0 10px 30px rgba(2,6,23,0.35); margin: 0 12px; }
.llm-modal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.llm-modal-body { margin-top:8px; }
.llm-modal-panel .form-control { width: 100%; box-sizing: border-box; }

/* Ensure textarea in modal is large and monospace for readability */
#modal-prompt { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace; font-size: 0.95rem; min-height: calc(100vh - 240px); height: calc(100vh - 240px); }
.llm-modal-body { display:flex; flex-direction:column; }

/* Hamburger and mobile nav styles */
.nav-toggle {
  display: inline-block;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  /* default positioned to the right edge of the header */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* Only show toggle on small screens */
@media (max-width: 768px) {
  /* Show the nav always on small screens and stack links for visibility */
  .nav-toggle { display: inline-block; right: 12px; }
  .main-nav { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
  .main-nav a { display: block; padding: 10px 12px; border-radius: 6px; width: 100%; }
}

/* Hamburger slide-in menu styles */
.hamburger-menu {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 320px;
  background: #ffffff;
  z-index: 1200;
  transform: translateX(100%); /* fully off-screen */
  transition: transform 280ms ease;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hamburger-header { display:flex; align-items:center; justify-content:space-between; }
.hamburger-header #nav-close {
  /* Reset nav-toggle absolute positioning for the close button inside the slide-in panel */
  position: static;
  right: auto;
  top: auto;
  transform: none;
  font-size: 1.2rem;
  padding: 6px 10px;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
}
.hamburger-links { list-style:none; padding:0; margin: 8px 0 0 0; display:flex; flex-direction:column; gap:8px; }
.hamburger-links a { display:block; padding:8px 10px; border-radius:8px; color:#111827; text-decoration:none; }
.hamburger-links a:hover { background:#f3f4f6; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; visibility: hidden; transition: opacity 200ms ease; z-index: 1100; }

/* Open state */
body.nav-open .hamburger-menu { transform: translateX(0); box-shadow: -8px 0 24px rgba(2,6,23,0.12); }
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

/* Ensure the nav toggle is visible on larger screens too (desktop helper) */
/* display controlled in the dedicated .nav-toggle block above; keep positioning there */

/* Style logout form in hamburger */
.logout-form-inline { margin: 0; }
.logout-form-inline .logout-btn { background: transparent; color: #dc2626; padding: 8px 10px; border-radius:6px; }

/* Table -> Card conversion for small screens */
@media (max-width: 768px) {
  .table-wrap table { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tbody { display: block; }
  .table-wrap tr { display: block; margin-bottom: 12px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; background: #fff; }
  .table-wrap td { display: flex; justify-content: space-between; padding: 6px 4px; border: none; }
  .table-wrap td::before { content: attr(data-label); color: #6b7280; font-weight: 600; margin-right: 8px; }
  .table-wrap td[data-label="Message"] { align-items: flex-start; }
  .table-wrap td .checkbox-container { justify-content: flex-end; }
}

/* Knowledge Base Styles */
.kb-id {
  color: #6b7280;
  font-size: 0.9rem;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
}

.kb-info-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.kb-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kb-info-header h3 {
  margin: 0;
  color: #111827;
  font-size: 1.25rem;
}

.kb-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kb-status {
  background: #10b981;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.refresh-btn {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.refresh-btn:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.kb-meta {
  color: #6b7280;
  font-size: 0.95rem;
}

.kb-section {
  margin: 30px 0;
}

.kb-section h4 {
  color: #374151;
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.kb-sources-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.kb-source-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  transition: box-shadow 0.2s;
}

.kb-source-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.source-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.source-type-badge {
  background: #3b82f6;
  color: white;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
}

.delete-form {
  margin: 0;
}

.delete-btn {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.delete-btn:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

.source-content h5 {
  margin: 0 0 8px 0;
  color: #111827;
  font-size: 1rem;
}

.source-filename {
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 6px;
  font-family: monospace;
}

.source-url a {
  color: #3b82f6;
  text-decoration: none;
  font-size: 0.9rem;
}

.source-url a:hover {
  text-decoration: underline;
}

.source-preview {
  background: #f9fafb;
  padding: 12px;
  border-radius: 8px;
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 8px;
  border-left: 3px solid #e5e7eb;
}

.empty-state {
  text-align: center;
  color: #6b7280;
  padding: 40px;
  background: #f9fafb;
  border-radius: 8px;
  font-style: italic;
}

.add-sources-card {
  background: #fff;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  padding: 24px;
}

.add-sources-card h4 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #374151;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-group textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 12px;
  font-size: 0.95rem;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.text-entry {
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #f9fafb;
}

.title-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.95rem;
  margin-bottom: 8px;
  background: white;
}

.content-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 12px;
  font-size: 0.95rem;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  background: white;
}

.title-input:focus,
.content-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input[type="file"] {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px;
  background: #f9fafb;
}

.file-help {
  color: #6b7280;
  font-size: 0.85rem;
  margin-top: 4px;
}

.add-field-btn {
  background: transparent;
  color: #3b82f6;
  border: 1px solid #3b82f6;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s;
}

.add-field-btn:hover {
  background: #3b82f6;
  color: white;
}

.submit-btn {
  background: #10b981;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-btn:hover {
  background: #059669;
}

.file-preview {
  margin-top: 12px;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f3f4f6;
  border-radius: 6px;
  margin-bottom: 6px;
}

.file-name {
  color: #374151;
  font-weight: 500;
}

.file-size {
  color: #6b7280;
  font-size: 0.85rem;
}

.file-error {
  color: #ef4444;
  font-size: 0.85rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .kb-sources-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}

@media (min-width: 1200px) {
  .kb-sources-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}