/* ─── Chat page layout ────────────────────────────────────────── */
.chat-page{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.chat-header{display:flex;align-items:center;gap:16px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.chat-header-info{flex:1;min-width:0}
.chat-header-info h3{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-header-meta{font-size:12px;color:var(--text-secondary);margin-top:2px}
.chat-progress{display:flex;align-items:center;gap:8px;min-width:160px}
.chat-progress-bar{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.chat-progress-bar-fill{height:100%;background:var(--primary);border-radius:2px;transition:width 0.4s ease}
.chat-progress span{font-size:12px;font-weight:600;color:var(--primary);white-space:nowrap}
.chat-body{display:flex;flex:1;overflow:hidden}
.chat-messages-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ─── Message bubbles ─────────────────────────────────────────── */
.msg-row{display:flex;gap:10px;max-width:100%}
.msg-row.user{flex-direction:row-reverse}
.msg-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;margin-top:2px}
.msg-avatar.agent{background:var(--primary);color:#fff}
.msg-avatar.user{background:var(--secondary);color:#fff}
.msg-bubble{max-width:75%;padding:12px 16px;border-radius:var(--radius-bubble);line-height:1.5;font-size:14px;white-space:pre-wrap;word-break:break-word}
.msg-row.agent .msg-bubble{background:var(--agent-bubble);color:var(--text-primary);border-bottom-left-radius:4px}
.msg-row.user  .msg-bubble{background:var(--user-bubble);color:#fff;border-bottom-right-radius:4px}
.msg-time{font-size:11px;color:var(--text-secondary);margin-top:4px;padding:0 4px}
.msg-row.user .msg-time{text-align:right}

/* ─── Extraction & conflict blocks inside messages ────────────── */
.extraction-block{background:#ECFDF5;border-left:3px solid var(--secondary);border-radius:4px;padding:8px 12px;margin:8px 0;font-size:13px}
.extraction-block .block-label{font-size:11px;font-weight:700;color:var(--secondary);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:4px}
.conflict-block{background:#FEF3C7;border-left:3px solid var(--warning);border-radius:4px;padding:8px 12px;margin:8px 0;font-size:13px}
.conflict-block .block-label{font-size:11px;font-weight:700;color:var(--warning);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:4px}
.block-item{display:flex;align-items:flex-start;gap:6px;margin:2px 0}
.block-item::before{content:"•";flex-shrink:0;margin-top:1px}

/* ─── Typing indicator ────────────────────────────────────────── */
.typing-indicator{display:flex;align-items:center;gap:4px;padding:12px 16px;background:var(--agent-bubble);border-radius:var(--radius-bubble);border-bottom-left-radius:4px;width:fit-content}
.typing-dot{width:6px;height:6px;background:var(--text-secondary);border-radius:50%;animation:bounce 1.2s infinite}
.typing-dot:nth-child(2){animation-delay:0.2s}
.typing-dot:nth-child(3){animation-delay:0.4s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* ─── Input bar ───────────────────────────────────────────────── */
.chat-input-area{border-top:1px solid var(--border);background:var(--surface);padding:12px 16px;flex-shrink:0}
.chat-quick-actions{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.quick-btn{padding:4px 12px;border-radius:999px;font-size:12px;font-weight:500;background:var(--bg);color:var(--text-secondary);border:1px solid var(--border);cursor:pointer;transition:var(--transition)}
.quick-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.chat-input-row{display:flex;gap:8px;align-items:flex-end}
.chat-textarea{flex:1;resize:none;border:1px solid var(--border);border-radius:var(--radius-btn);padding:10px 14px;font-size:14px;line-height:1.4;min-height:42px;max-height:120px;overflow-y:auto;transition:var(--transition)}
.chat-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.chat-send-btn{padding:10px 16px;background:var(--primary);color:#fff;border-radius:var(--radius-btn);font-size:14px;font-weight:500;flex-shrink:0;transition:var(--transition)}
.chat-send-btn:hover{background:var(--primary-dark)}
.chat-send-btn:disabled{opacity:0.5;cursor:not-allowed}

/* ─── Side panel ──────────────────────────────────────────────── */
.chat-side-panel{width:280px;border-left:1px solid var(--border);background:var(--surface);overflow-y:auto;flex-shrink:0;transition:var(--transition)}
.side-panel-section{padding:16px;border-bottom:1px solid var(--border)}
.side-panel-section h4{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:10px}
.record-counts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.record-count-item{background:var(--bg);border-radius:6px;padding:8px;text-align:center}
.record-count-item .count{font-size:20px;font-weight:700;color:var(--primary)}
.record-count-item .label{font-size:11px;color:var(--text-secondary);margin-top:2px}
.stage-checklist{list-style:none}
.stage-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px}
.stage-item .stage-icon{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.stage-item.done .stage-icon{background:var(--secondary);border-color:var(--secondary);color:#fff}
.stage-item.active .stage-icon{border-color:var(--primary);background:rgba(37,99,235,0.1)}
.stage-item.active{color:var(--primary);font-weight:600}
.question-item{font-size:12px;padding:6px 0;border-bottom:1px solid var(--border);color:var(--text-secondary)}
.question-item:last-child{border-bottom:none}

/* ─── Side panel toggle for mobile ───────────────────────────── */
.side-panel-toggle{display:none;position:absolute;top:60px;right:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-btn);padding:6px 10px;font-size:12px;cursor:pointer;box-shadow:var(--shadow-card)}
@media(max-width:768px){
  .chat-side-panel{display:none;position:fixed;top:0;right:0;height:100vh;z-index:150;box-shadow:var(--shadow-modal)}
  .chat-side-panel.open{display:block}
  .side-panel-toggle{display:block}
  .msg-bubble{max-width:90%}
}

/* ─── Print styles for report viewer ─────────────────────────── */
@media print{
  #sidebar,.chat-input-area,.chat-header,.quick-btn,.btn{display:none!important}
  body{background:#fff}
}

/* ================================================================
   SME Interview – Modern Centered Chatbox UI
   All rules scoped with sme- prefix to avoid breaking admin chat
   ================================================================ */

/* ─── Wrapper: full viewport centering with gradient bg ─────── */
.sme-interview-wrapper{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;
  padding:24px;
  background:linear-gradient(135deg,#f0f4ff 0%,#e8ecf4 50%,#f0f4ff 100%);
  overflow:hidden;
}

/* ─── Chat container card ───────────────────────────────────── */
.sme-chat-container{
  width:100%;max-width:768px;
  height:85vh;height:85dvh;max-height:900px;
  display:flex;flex-direction:column;
  background:var(--surface);
  border-radius:16px;
  box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 10px 25px -5px rgba(0,0,0,0.08);
  overflow:hidden;
}

/* ─── Header ────────────────────────────────────────────────── */
.sme-chat-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;
  background:var(--primary);color:#fff;flex-shrink:0;
}
.sme-header-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.sme-header-icon{
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;
}
.sme-header-title{margin:0;font-size:15px;font-weight:600;color:#fff;line-height:1.3}
.sme-header-subtitle{font-size:12px;color:rgba(255,255,255,0.8);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sme-header-progress{display:flex;align-items:center;gap:8px;min-width:160px;flex-shrink:0}
.sme-progress-label{font-size:11px;color:rgba(255,255,255,0.8);white-space:nowrap;text-transform:capitalize}
.sme-progress-track{flex:1;height:4px;background:rgba(255,255,255,0.25);border-radius:2px;overflow:hidden;min-width:50px}
.sme-progress-fill{height:100%;background:#fff;border-radius:2px;transition:width 0.4s ease}
.sme-progress-pct{font-size:12px;color:#fff;font-weight:600;min-width:32px;text-align:right}

/* ─── Messages body ─────────────────────────────────────────── */
.sme-chat-body{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.sme-chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.sme-chat-messages::-webkit-scrollbar{width:5px}
.sme-chat-messages::-webkit-scrollbar-track{background:transparent}
.sme-chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.sme-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}

/* ─── Message rows ──────────────────────────────────────────── */
.sme-msg-row{display:flex;gap:10px;max-width:100%;animation:sme-msg-in 0.25s ease-out}
.sme-msg-row.user{flex-direction:row-reverse}
@keyframes sme-msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.sme-msg-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;margin-top:2px;
}
.sme-msg-avatar.agent{background:var(--primary);color:#fff}
.sme-msg-avatar.user{background:var(--secondary);color:#fff}

.sme-msg-bubble{
  max-width:80%;padding:12px 16px;border-radius:16px;
  line-height:1.6;font-size:14px;white-space:pre-wrap;word-break:break-word;
}
.sme-msg-row.agent .sme-msg-bubble{
  background:var(--surface);color:var(--text-primary);
  border-bottom-left-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.sme-msg-row.user .sme-msg-bubble{
  background:var(--user-bubble);color:#fff;border-bottom-right-radius:4px;
}

/* ─── Typing indicator ──────────────────────────────────────── */
.sme-typing-indicator{
  display:flex;align-items:center;gap:5px;padding:14px 18px;
  background:var(--surface);border-radius:16px;border-bottom-left-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);width:fit-content;
}
.sme-typing-dot{width:7px;height:7px;background:var(--text-secondary);border-radius:50%;animation:sme-bounce 1.2s infinite}
.sme-typing-dot:nth-child(2){animation-delay:0.2s}
.sme-typing-dot:nth-child(3){animation-delay:0.4s}
@keyframes sme-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* ─── Input area ────────────────────────────────────────────── */
.sme-chat-input-area{padding:16px 20px;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}
.sme-chat-input-row{display:flex;gap:10px;align-items:flex-end}
.sme-chat-textarea{
  flex:1;resize:none;
  border:1.5px solid var(--border);border-radius:12px;
  padding:10px 16px;font-size:14px;font-family:var(--font);line-height:1.5;
  min-height:44px;max-height:120px;overflow-y:auto;
  background:var(--bg);
  transition:border-color 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;
}
.sme-chat-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1);background:var(--surface)}
.sme-chat-send-btn{
  width:44px;height:44px;border-radius:12px;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:none;cursor:pointer;
  transition:background 0.2s ease,transform 0.1s ease;
}
.sme-chat-send-btn:hover{background:var(--primary-dark);transform:scale(1.05)}
.sme-chat-send-btn:active{transform:scale(0.95)}
.sme-chat-send-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.sme-chat-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.sme-input-hint{font-size:11px;color:var(--text-secondary)}
.sme-input-hint kbd{
  display:inline-block;padding:1px 5px;font-size:10px;font-family:var(--font);
  background:var(--bg);border:1px solid var(--border);border-radius:3px;
  color:var(--text-secondary);line-height:1.4;
}
.sme-finish-btn{
  background:none;border:none;color:var(--text-secondary);
  font-size:13px;font-family:var(--font);cursor:pointer;
  padding:4px 12px;border-radius:6px;white-space:nowrap;
  transition:color 0.2s ease,background 0.2s ease;
}
.sme-finish-btn:hover{color:var(--error);background:rgba(220,38,38,0.06)}

/* ─── Help banner ──────────────────────────────────────────── */
.sme-help-banner{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 16px;margin:0;
  background:#EFF6FF;border-bottom:1px solid #BFDBFE;
  font-size:13px;color:#1e40af;line-height:1.5;flex-shrink:0;
}
.sme-help-icon{flex-shrink:0;margin-top:1px;color:#3b82f6}
.sme-help-content{flex:1;min-width:0}
.sme-help-content strong{display:block;margin-bottom:4px;font-size:13px;color:#1e3a8a}
.sme-help-content p{margin:0;font-size:12px;color:#1e40af;line-height:1.5}
.sme-help-content kbd{
  display:inline-block;padding:0 4px;font-size:11px;font-family:var(--font);
  background:#fff;border:1px solid #93c5fd;border-radius:3px;
  color:#1e40af;line-height:1.4;
}
.sme-help-content em{font-style:normal;font-weight:600}
.sme-help-dismiss{
  background:none;border:none;color:#93c5fd;font-size:18px;
  cursor:pointer;padding:0 4px;line-height:1;flex-shrink:0;
  transition:color 0.2s ease;
}
.sme-help-dismiss:hover{color:#1e40af}

/* ─── Interview done bar ───────────────────────────────────── */
.sme-interview-done-bar{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 20px;
  background:#ECFDF5;border-top:1px solid #A7F3D0;
  color:#065f46;
}
.sme-interview-done-bar svg{flex-shrink:0;margin-top:2px;color:#10b981}
.sme-interview-done-bar strong{display:block;font-size:14px;color:#065f46;margin-bottom:2px}
.sme-interview-done-bar p{margin:0;font-size:13px;color:#047857;line-height:1.5}

/* ─── Stage selector pills ─────────────────────────────────── */
.sme-stage-selector{
  display:flex;gap:8px;
  padding:10px 20px;
  background:var(--surface);border-bottom:1px solid var(--border);
  overflow-x:auto;flex-shrink:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.sme-stage-selector::-webkit-scrollbar{display:none}

.sme-stage-pill-group{display:flex;align-items:center;gap:4px;flex-shrink:0;position:relative}

.sme-stage-pill{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:500;font-family:var(--font);
  background:var(--bg);color:var(--text-secondary);
  border:1.5px solid var(--border);
  cursor:pointer;white-space:nowrap;
  transition:all 0.2s ease;
}
.sme-stage-pill:hover{
  background:rgba(37,99,235,0.06);border-color:var(--primary);color:var(--primary);
}
.sme-stage-pill.active{
  background:var(--primary);color:#fff;border-color:var(--primary);
  box-shadow:0 1px 3px rgba(37,99,235,0.3);
}
.sme-stage-pill:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}

.sme-sop-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:#10b981;color:#fff;font-size:9px;line-height:1;flex-shrink:0;
}

/* ─── SOP upload button ────────────────────────────────────── */
.sme-sop-upload-btn{
  width:28px;height:28px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:all 0.2s ease;color:var(--text-secondary);
}
.sme-sop-upload-btn:hover{
  background:rgba(37,99,235,0.08);border-color:var(--primary);color:var(--primary);
}
.sme-sop-upload-btn:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}
.sme-sop-upload-btn svg{width:14px;height:14px}

/* Upload in-progress pulse */
.sme-sop-upload-btn.uploading{
  border-color:var(--primary);color:var(--primary);
  animation:sme-pulse 1.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sme-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0.3)}
  50%{box-shadow:0 0 0 6px rgba(37,99,235,0)}
}

/* System message for upload confirmation */
.sme-msg-row.system{justify-content:center}
.sme-msg-row.system .sme-msg-bubble{
  max-width:90%;background:#EFF6FF;color:#1e40af;
  border-radius:8px;font-size:13px;text-align:center;
  border:1px solid #BFDBFE;padding:8px 16px;
}

/* ─── Thank you state ───────────────────────────────────────── */
.sme-thank-you{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 32px;text-align:center;
}
.sme-thank-you-icon{
  width:64px;height:64px;border-radius:50%;
  background:#D1FAE5;color:var(--secondary);font-size:28px;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.sme-thank-you h2{font-size:22px;font-weight:700;margin-bottom:8px}
.sme-thank-you p{color:var(--text-secondary);max-width:360px;line-height:1.6}

/* ─── Error state card ──────────────────────────────────────── */
.sme-error-card{max-width:480px;text-align:center;padding:48px 32px}
.sme-error-card h2{font-size:20px;font-weight:700;margin-bottom:12px}
.sme-error-card p{color:var(--text-secondary);line-height:1.6}
.sme-error-card p+p{font-size:13px;margin-top:16px}

/* ─── Responsive: Tablet ────────────────────────────────────── */
@media(max-width:840px){
  .sme-interview-wrapper{padding:16px}
  .sme-chat-container{max-width:100%;height:88vh;height:88dvh}
  .sme-header-progress{min-width:120px}
  .sme-stage-selector{padding:8px 16px;gap:6px}
  .sme-stage-pill{padding:5px 12px;font-size:12px}
  .sme-sop-upload-btn{width:26px;height:26px}
}

/* ─── Responsive: Mobile ────────────────────────────────────── */
@media(max-width:640px){
  .sme-interview-wrapper{padding:0;background:var(--surface);align-items:stretch}
  .sme-chat-container{max-width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0;box-shadow:none}
  .sme-chat-header{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 16px}
  .sme-header-progress{width:100%;min-width:unset}
  .sme-chat-messages{padding:16px}
  .sme-msg-bubble{max-width:88%}
  .sme-chat-input-area{padding:12px 16px}
  .sme-chat-textarea{padding:10px 14px}
  .sme-input-hint{display:none}
  .sme-chat-footer{justify-content:center}
  .sme-help-banner{padding:10px 12px;font-size:12px}
  .sme-help-content strong{font-size:12px}
  .sme-help-content p{font-size:11px}
  .sme-stage-selector{padding:8px 12px;gap:5px}
  .sme-stage-pill{padding:4px 10px;font-size:11px}
  .sme-sop-upload-btn{width:24px;height:24px}
  .sme-sop-upload-btn svg{width:12px;height:12px}
  .sme-sop-check{width:14px;height:14px;font-size:8px}
}

/* ─── Responsive: Small mobile ──────────────────────────────── */
@media(max-width:380px){
  .sme-header-left{gap:8px}
  .sme-header-icon{width:30px;height:30px;border-radius:8px}
  .sme-header-title{font-size:14px}
  .sme-msg-bubble{max-width:92%;font-size:13px}
}