/* =============================================
   RECRUITMENT BOT — Slate/Violet Career Theme
   Unique layout touches:
   - Header badge strip: Jobs • Interviews • Offers
   - Bot bubbles look like timeline cards (left accent + subtle notch)
   - Calm professional colors (HR/career feel)
   ============================================= */

/* Override CSS variables for recruitment */
.recruitment-page{
  --mint: #f8fafc;     /* slate-50 */
  --header1: #4f46e5;  /* indigo */
  --header2: #7c3aed;  /* violet */
  --user: #4f46e5;
}

/* Background gradient */
.recruitment-page::before{
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 55%, #f5f3ff 100%) !important;
}

/* Body background */
.recruitment-page{
  background: #f8fafc !important;
}

/* Header bar — professional indigo/violet */
.recruitment-page .topbar-inner{
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #5b21b6 100%) !important;
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(79,70,229,.20);
  position: relative;
  overflow: hidden;
}

/* Header badge strip (layout change) */
.recruitment-page .topbar-inner::after{
  position:absolute;
  left:18px;
  bottom:10px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.14);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* Brand subtitle dot */
.recruitment-page .dot{
  background: #c4b5fd; /* violet-300 */
  /* box-shadow: 0 0 0 4px rgba(196,181,253,.25); */
}

/* Bot avatar — gradient */
.recruitment-page .bot-avatar{
  background: radial-gradient(circle at 30% 25%, #c4b5fd 0%, #4f46e5 55%, #7c3aed 100%) !important;
  box-shadow: 0 6px 18px rgba(79,70,229,.18);
}
.recruitment-page .bot-avatar svg{
  fill: #eef2ff;
}

/* User bubble — indigo */
.recruitment-page .bubble.user{
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(79,70,229,.14);
}

/* Bot bubble — "timeline card" look */
.recruitment-page .bubble.bot{
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(79,70,229,.08) !important;
  border-left: 4px solid rgba(124,58,237,.55) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.06) !important;
  position: relative;
}

/* Small notch to enhance the "card" feel */
/* .recruitment-page .bubble.bot::before{
  content:"";
  position:absolute;
  left:-9px;
  top:16px;
  width:16px;
  height:16px;
  background: rgba(255,255,255,.94);
  border-left: 1px solid rgba(79,70,229,.08);
  border-bottom: 1px solid rgba(79,70,229,.08);
  transform: rotate(45deg);
} */

/* Template buttons — career chips */
.recruitment-page .tpl-btn{
  background: #ffffff !important;
  border-color: rgba(79,70,229,.14) !important;
  color: #4338ca !important;
  border-radius: 999px !important;
}
.recruitment-page .tpl-btn:hover{
  background: #eef2ff !important;
  border-color: rgba(124,58,237,.28) !important;
  box-shadow: 0 10px 18px rgba(124,58,237,.10) !important;
}
.recruitment-page .tpl-btn:active{
  background: #e0e7ff !important;
}
.recruitment-page .tpl-btn.clicked{
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%) !important;
  border-color: rgba(79,70,229,.32) !important;
}
.recruitment-page .tpl-btn .tpl-icon svg{
  fill: #4f46e5 !important;
}

/* Disabled buttons */
.recruitment-page .template-buttons.disabled .tpl-btn .tpl-icon svg{
  fill: #9ca3af !important;
}

/* Checkbox options */
.recruitment-page .checkbox-option{
  color: #4338ca !important;
  border-color: rgba(79,70,229,.14) !important;
  border-radius: 14px !important;
}
.recruitment-page .checkbox-option:hover{
  background: #eef2ff !important;
  border-color: rgba(124,58,237,.28) !important;
  box-shadow: 0 10px 18px rgba(124,58,237,.10) !important;
}
.recruitment-page .checkbox-option.checked{
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%) !important;
  border-color: rgba(79,70,229,.36) !important;
}
.recruitment-page .checkbox-option.checked .cb-toggle{
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

.recruitment-page .cb-submit-btn{
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  box-shadow: 0 6px 18px rgba(79,70,229,.18) !important;
}
.recruitment-page .cb-submit-btn:hover{
  box-shadow: 0 10px 26px rgba(79,70,229,.24) !important;
}

/* Composer */
.recruitment-page .composer{
  background: #f5f3ff !important;
}
.recruitment-page .composer-card:focus-within{
  border-color: rgba(124,58,237,.30) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,.10), 0 18px 40px rgba(0,0,0,.10) !important;
}

/* Send button */
.recruitment-page .send-icon-btn{
  background: #7c3aed !important;
  box-shadow: 0 12px 22px rgba(124,58,237,.18) !important;
}
.recruitment-page .send-icon-btn:hover{
  background: #5b21b6 !important;
}

/* Typing indicator dots */
.recruitment-page .typing-dot{
  background: #c4b5fd;
}

/* Composer note text */
.recruitment-page .composer-note{
  color: #6366f1;
  opacity: 0.65;
}