/* Floating chatbot widget — shared between admin and candidate surfaces.
   Imported as its own file so the same styles ship to both contexts
   without duplicating the source. */

.panayam-chat-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: #DB0011;
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(219, 0, 17, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.panayam-chat-launcher:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(219, 0, 17, 0.5);
}
.panayam-chat-launcher-icon { font-size: 1.15rem; line-height: 1; }

/* No backdrop — the modal is now a draggable floating window, not a
   modal in the strict sense. Keeps the page underneath fully usable
   while the chat is open. */
.panayam-chat-modal {
  position: fixed;
  z-index: 9100;
  /* JS sets top + left explicitly once the user starts dragging.
     Defaults below place the panel in the bottom-right corner where
     the launcher lives, matching the previous layout. */
  bottom: 22px;
  right: 22px;
  background: transparent;
  padding: 0;
  pointer-events: none;          /* let clicks through outside the panel */
}
.panayam-chat-modal.hidden { display: none; }
/* When JS sets the user's dragged position, switch from
   bottom/right anchoring to top/left so the JS values apply cleanly. */
.panayam-chat-modal[data-dragged="1"] {
  bottom: auto;
  right: auto;
}

.panayam-chat-panel {
  position: relative;   /* anchor for .panayam-chat-history-drawer overlay */
  width: min(420px, calc(100vw - 24px));
  height: min(620px, 80vh);
  background: #1a1a1a;
  color: #e6e6e6;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  pointer-events: auto;          /* re-enable inside the panel */
}

.panayam-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  gap: 10px;
  /* Drag handle. Header is grabbable to move the chat anywhere on
     screen — JS in chatbot.js wires up mousedown/move/up. */
  cursor: move;
  user-select: none;
}
.panayam-chat-header:active { cursor: grabbing; }
/* Don't drag when starting from interactive elements inside the header. */
.panayam-chat-header .panayam-chat-close { cursor: pointer; }
.panayam-chat-header-text {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.panayam-chat-logo {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  border-radius: 6px;
}
.panayam-chat-title { font-weight: 600; font-size: 0.95rem; }
.panayam-chat-sub { font-size: 0.72rem; color: rgba(230, 230, 230, 0.55); margin-top: 2px; }
.panayam-chat-close {
  background: transparent;
  border: none;
  color: rgba(230, 230, 230, 0.7);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.panayam-chat-close:hover { color: #fff; }

.panayam-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panayam-chat-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: normal;
}
.panayam-chat-bubble p { margin: 0 0 8px; }
.panayam-chat-bubble p:last-child { margin-bottom: 0; }
.panayam-chat-bubble ul { margin: 4px 0 8px; padding-left: 20px; }
.panayam-chat-bubble code {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.85em;
}
.panayam-chat-user {
  align-self: flex-end;
  background: #DB0011;
  color: #fff;
}
.panayam-chat-user code { background: rgba(0, 0, 0, 0.25); }
.panayam-chat-assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.panayam-chat-thinking {
  opacity: 0.7;
  font-style: italic;
}

.panayam-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}
.panayam-chat-input {
  flex: 1;
  resize: none;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #e6e6e6;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
}
.panayam-chat-input:focus {
  outline: none;
  border-color: rgba(219, 0, 17, 0.6);
}
.panayam-chat-send {
  align-self: flex-end;
  background: #DB0011;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
}
.panayam-chat-send:disabled {
  opacity: 0.5;
  cursor: wait;
}

.panayam-chat-disclaimer {
  margin: 0;
  padding: 8px 14px 12px;
  font-size: 0.7rem;
  color: rgba(230, 230, 230, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  text-align: center;
}

@media (max-width: 600px) {
  .panayam-chat-modal { padding: 0; }
  .panayam-chat-panel { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
  .panayam-chat-launcher-label { display: none; }
  .panayam-chat-launcher { padding: 14px; }
}

/* Chatbot version tag shown under the title. Independent of the app
   version on the admin landing — see CHANGELOG "Chatbot lineage". */
.panayam-chat-version {
  font-size: 0.65rem;
  color: rgba(230, 230, 230, 0.4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* "Report a bug / problem" inline form. Replaces the normal message form
   when toggled so the chat area stays uncluttered. */
.panayam-chat-footer {
  display: flex;
  flex-wrap: wrap;          /* buttons row, disclaimer wraps below */
  align-items: center;
  gap: 6px;
  padding: 8px 14px 4px;
}
.panayam-chat-footer .panayam-chat-disclaimer {
  flex-basis: 100%;         /* disclaimer ALWAYS gets its own line */
  margin: 4px 0 8px;
  border-top: none;
  padding: 0;
  text-align: left;
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(230, 230, 230, 0.5);
}
.panayam-chat-report-toggle {
  background: transparent;
  color: rgba(230, 230, 230, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
}
.panayam-chat-report-toggle:hover {
  color: #fff;
  border-color: rgba(214, 43, 43, 0.5);
}
/* Clear-chat + new-chat actions — recruiter side only. Sit next to the
   bug-report toggle in the footer; same visual weight as the existing
   button so neither competes with the primary Send action above. */
.panayam-chat-history-actions {
  display: flex;
  gap: 6px;
}
.panayam-chat-history-btn {
  background: transparent;
  color: rgba(230, 230, 230, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.panayam-chat-history-btn:hover {
  color: #fff;
  border-color: rgba(214, 43, 43, 0.5);
}
/* History drawer — slides in from the top edge of the chat panel,
   listing past chats with click-to-load + per-row delete. */
.panayam-chat-history-drawer {
  position: absolute;
  top: 56px;   /* clears the header */
  left: 0; right: 0;
  bottom: 0;
  background: #161b22;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.panayam-chat-history-drawer.hidden { display: none; }
.panayam-chat-history-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.84rem; color: #e6edf3;
}
.panayam-chat-history-drawer-close {
  background: transparent; border: none;
  color: rgba(230, 230, 230, 0.55);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 6px;
}
.panayam-chat-history-drawer-close:hover { color: #fff; }
.panayam-chat-history-list { overflow-y: auto; flex: 1; }
.panayam-chat-history-empty {
  padding: 18px 16px; color: rgba(230, 230, 230, 0.5);
  font-size: 0.82rem; text-align: center;
}
.panayam-chat-history-item {
  display: flex; align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.panayam-chat-history-item:hover { background: rgba(255, 255, 255, 0.02); }
.panayam-chat-history-item-open {
  flex: 1; text-align: left; background: transparent; border: none;
  color: #e6edf3; padding: 10px 14px; cursor: pointer; font-family: inherit;
}
.panayam-chat-history-item-title {
  font-size: 0.86rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 320px;
}
.panayam-chat-history-item-meta {
  font-size: 0.7rem; color: rgba(230, 230, 230, 0.45); margin-top: 2px;
}
.panayam-chat-history-item-delete {
  background: transparent; border: none;
  color: rgba(230, 230, 230, 0.4);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 14px;
}
.panayam-chat-history-item-delete:hover { color: #ff7b72; }

/* Light-theme tweaks for the drawer (mirrors the override pattern in
   styles.css). */
:root[data-theme="light"] .panayam-chat-history-drawer {
  background: #ffffff;
  border-top-color: rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .panayam-chat-history-drawer-header { color: #1f2328; border-bottom-color: rgba(0, 0, 0, 0.06); }
:root[data-theme="light"] .panayam-chat-history-empty { color: #57606a; }
:root[data-theme="light"] .panayam-chat-history-item:hover { background: rgba(0, 0, 0, 0.03); }
:root[data-theme="light"] .panayam-chat-history-item-open { color: #1f2328; }
:root[data-theme="light"] .panayam-chat-history-item-meta { color: #57606a; }
.panayam-chat-report-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(214, 43, 43, 0.04);
}
.panayam-chat-report-form.hidden { display: none; }
.panayam-chat-report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffb3b8;
}
.panayam-chat-report-cancel {
  background: transparent;
  border: none;
  color: rgba(230, 230, 230, 0.6);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.panayam-chat-report-cancel:hover { color: #fff; }
.panayam-chat-report-desc {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  color: #e6edf3;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
}
.panayam-chat-report-file {
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.panayam-chat-report-file input[type="file"] {
  position: absolute;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.panayam-chat-report-file-label {
  display: inline-block;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 0.78rem;
  color: rgba(230, 230, 230, 0.85);
}
.panayam-chat-report-file:hover .panayam-chat-report-file-label {
  border-color: rgba(214, 43, 43, 0.6);
  color: #fff;
}
.panayam-chat-report-submit {
  align-self: flex-end;
  background: #d62b2b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.panayam-chat-report-submit:hover:not([disabled]) { background: #b62525; }
.panayam-chat-report-submit[disabled] { opacity: 0.5; cursor: not-allowed; }
.panayam-chat-form.hidden { display: none; }

/* Page-bottom credit — injected by chatbot-init.js / chatbot.js on every
   page so it can't drift between admin and candidate surfaces. Kept
   intentionally small + low-contrast so it doesn't compete with content. */
.panayam-credit {
  text-align: center;
  font-size: 0.72rem;
  color: rgba(230, 230, 230, 0.4);
  padding: 24px 16px 36px;
  margin-top: 24px;
  /* Leave room for the floating chat launcher in the bottom-right corner. */
  padding-right: 140px;
}
@media (max-width: 600px) {
  .panayam-credit { padding-right: 16px; padding-bottom: 80px; }
}

/* L1 triage: small trace bubble that surfaces which diagnostic tools
   the chatbot called. Sits just above the assistant's reply so the
   reasoning is transparent without crowding the message. */
.panayam-chat-bubble.panayam-chat-trace {
  background: rgba(88, 166, 255, 0.06);
  border: 1px solid rgba(88, 166, 255, 0.18);
  color: rgba(230, 230, 230, 0.78);
  font-size: 0.78rem;
  padding: 8px 12px;
  align-self: flex-start;
  max-width: 92%;
}
.panayam-chat-bubble.panayam-chat-trace .panayam-chat-trace-title {
  color: #58a6ff;
  font-weight: 600;
  margin-bottom: 2px;
}
.panayam-chat-bubble.panayam-chat-trace ul {
  margin: 0;
  padding-left: 18px;
}
.panayam-chat-bubble.panayam-chat-trace li {
  margin: 1px 0;
}

/* Auto-escalation acknowledgement when the chatbot files a Bug Report
   on the user's behalf. Visually distinct from regular replies so it
   reads as a system action, not a chatbot statement. */
.panayam-chat-bubble.panayam-chat-ticket {
  background: rgba(46, 160, 67, 0.08);
  border: 1px solid rgba(46, 160, 67, 0.30);
  color: #3fb950;
  font-size: 0.82rem;
  padding: 8px 12px;
  align-self: flex-start;
  max-width: 92%;
}