/* ===== ACCOUNT & CHATBOT PAGE STYLES ===== */

/* ── Auth View ── */
.acct-main {
  min-height: 100vh;
  padding-top: 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

.acct-container {
  width: 100%;
  max-width: 640px;
  padding: 2rem;
}

/* ── Explainer Section ── */
.acct-explainer {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  color: #e2e8f0;
  backdrop-filter: blur(8px);
}
.acct-explainer h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .75rem;
}
.acct-explainer > p {
  font-size: .92rem;
  line-height: 1.65;
  color: #cbd5e1;
  margin-bottom: 1.25rem;
}
.acct-explainer h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
}
.acct-explainer-note {
  font-size: .85rem;
  color: #94a3b8;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* ── Tier Cards ── */
.tier-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: .5rem;
}
.tier-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1.1rem .9rem;
  text-align: center;
  transition: transform .2s, border-color .2s;
}
.tier-card:hover {
  transform: translateY(-2px);
}
.tier-badge {
  font-size: 1.6rem;
  margin-bottom: .35rem;
}
.tier-card h4 {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .6rem;
}
.tier-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font-size: .78rem;
  line-height: 1.7;
  color: #cbd5e1;
}
.tier-bronze { border-color: #cd7f32; }
.tier-bronze h4 { color: #cd7f32; }
.tier-silver { border-color: #c0c0c0; }
.tier-silver h4 { color: #c0c0c0; }
.tier-gold   { border-color: #ffd700; }
.tier-gold h4   { color: #ffd700; }

@media (max-width: 600px) {
  .tier-cards { grid-template-columns: 1fr; }
  .acct-container { max-width: 100%; }
}

/* ── Pending Approval Banner ── */
.acct-pending {
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.3);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  color: #fbbf24;
  margin-top: 1rem;
}
.acct-pending h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}
.acct-pending p {
  font-size: .88rem;
  color: #cbd5e1;
  margin: 0;
}

.acct-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  overflow: hidden;
}

/* Tabs */
.acct-tabs {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
}
.acct-tab {
  flex: 1;
  padding: 1rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.acct-tab.active {
  color: #6366f1;
}
.acct-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: #6366f1;
  border-radius: 3px 3px 0 0;
}
.acct-tab:hover { color: #6366f1; }

/* Forms */
.acct-form {
  padding: 2rem;
}
.acct-form h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: .25rem;
}
.acct-subtitle {
  color: #64748b;
  font-size: .9rem;
  margin-bottom: 1.5rem;
}
.acct-field {
  margin-bottom: 1.25rem;
}
.acct-field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: .4rem;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.acct-field input {
  width: 100%;
  padding: .75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  color: #1e293b;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.acct-field input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.acct-btn {
  width: 100%;
  padding: .85rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s;
  margin-top: .5rem;
}
.acct-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99,102,241,.35);
}
.acct-btn:active { transform: translateY(0); }

.acct-btn-sm {
  width: auto;
  padding: .5rem 1.25rem;
  font-size: .85rem;
  margin-top: 0;
}

.acct-divider {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 1rem 0 .5rem;
}

.acct-field-row {
  display: flex;
  gap: 1rem;
}
.acct-field-row .acct-field { flex: 1; }

@media (max-width: 480px) {
  .acct-field-row { flex-direction: column; gap: 0; }
}

.acct-btn-outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,.25);
  color: #e2e8f0;
}
.acct-btn-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: #6366f1;
  box-shadow: none;
}

.cb-user-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* Profile Panel */
.profile-panel {
  margin-top: 1rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  overflow: hidden;
  animation: escSlideIn .3s ease;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  flex-shrink: 0;
}
.profile-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.profile-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.profile-body .acct-field { margin-bottom: 1rem; }
.profile-readonly {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.acct-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: .75rem 1rem;
  border-radius: 8px;
  font-size: .85rem;
  margin-bottom: .75rem;
}

.acct-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
  padding: .75rem 1rem;
  border-radius: 8px;
  font-size: .85rem;
  margin-bottom: .75rem;
}

/* ── Chatbot View ── */
.cb-container {
  width: 100%;
  max-width: 800px;
  padding: 1.5rem;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.cb-user-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: .75rem 1.25rem;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.cb-user-info {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.cb-avatar {
  font-size: 1.5rem;
}
.cb-user-name {
  color: #e2e8f0;
  font-weight: 600;
  font-size: .95rem;
}

/* Chat Panel */
.cb-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
  overflow: hidden;
}

.cb-header {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
}
.cb-header h2 {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 .25rem;
}
.cb-subtitle {
  font-size: .82rem;
  opacity: .85;
  margin: 0;
}

/* Messages */
.cb-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  background: #f8fafc;
}

.cb-msg {
  display: flex;
  gap: .5rem;
  max-width: 85%;
  animation: cbFadeIn .3s ease;
}
@keyframes cbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cb-msg.bot { align-self: flex-start; }
.cb-msg.user { align-self: flex-end; flex-direction: row-reverse; }

.cb-msg-avatar {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.cb-msg.user .cb-msg-avatar { display: none; }

.cb-msg-bubble {
  padding: .85rem 1.1rem;
  border-radius: 16px;
  font-size: .9rem;
  line-height: 1.6;
}
.cb-msg.bot .cb-msg-bubble {
  background: #fff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 4px;
}
.cb-msg.user .cb-msg-bubble {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cb-msg-bubble p { margin: 0; }
.cb-msg-bubble strong { font-weight: 700; }

/* Typing indicator */
.cb-msg.bot.typing .cb-msg-bubble {
  padding: .6rem 1.2rem;
}
.cb-typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 20px;
}
.cb-typing-dots span {
  width: 8px;
  height: 8px;
  background: #94a3b8;
  border-radius: 50%;
  animation: cbTyping 1.2s infinite;
}
.cb-typing-dots span:nth-child(2) { animation-delay: .2s; }
.cb-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cbTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Input row */
.cb-input-row {
  display: flex;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  align-items: center;
}
.cb-input-row input[type="text"] {
  flex: 1;
  padding: .7rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-family: inherit;
  font-size: .9rem;
  color: #1e293b;
  transition: border-color .2s;
}
.cb-input-row input[type="text"]:focus {
  outline: none;
  border-color: #6366f1;
}

/* Upload button */
.cb-upload-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-upload-btn:hover {
  border-color: #6366f1;
  background: #eef2ff;
}

/* SEPA result card in chat */
.sepa-result-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  margin-top: .5rem;
  font-size: .85rem;
}
.sepa-result-card h4 {
  margin: 0 0 .75rem;
  font-size: .95rem;
  color: #1e293b;
}
.sepa-field-row {
  display: flex;
  justify-content: space-between;
  padding: .3rem 0;
  border-bottom: 1px solid #f1f5f9;
}
.sepa-field-row:last-child { border-bottom: none; }
.sepa-field-label {
  font-weight: 600;
  color: #6366f1;
  font-size: .78rem;
  text-transform: uppercase;
}
.sepa-field-value { color: #334155; }
.sepa-field-value.valid { color: #16a34a; }
.sepa-field-value.invalid { color: #dc2626; }
.sepa-field-value.missing { color: #94a3b8; font-style: italic; }
.sepa-confidence {
  display: inline-block;
  margin-top: .5rem;
  padding: .3rem .75rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
}
.sepa-confidence.high { background: #dcfce7; color: #166534; }
.sepa-confidence.medium { background: #fef3c7; color: #92400e; }
.sepa-confidence.low { background: #fee2e2; color: #991b1b; }
.sepa-status-line {
  margin-top: .5rem;
  font-size: .82rem;
  font-weight: 600;
}
.cb-send-btn {
  padding: .7rem 1.25rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  transition: transform .15s;
}
.cb-send-btn:hover { transform: translateY(-1px); }

.cb-voice-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-voice-btn:hover {
  border-color: #6366f1;
  background: #eef2ff;
}
.cb-voice-btn.recording {
  border-color: #ef4444;
  background: #fef2f2;
  animation: cbPulseRec 1.5s infinite;
}
@keyframes cbPulseRec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

/* Voice status bar */
.cb-voice-status {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  font-size: .85rem;
  color: #dc2626;
  font-weight: 600;
}
.cb-voice-pulse {
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
  animation: cbPulseRec 1.5s infinite;
}
.cb-voice-stop {
  margin-left: auto;
  background: #dc2626;
  color: #fff;
  border: none;
  padding: .35rem .85rem;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: .8rem;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 640px) {
  .acct-container { padding: 1rem; }
  .acct-form { padding: 1.5rem; }
  .cb-container { padding: .75rem; height: auto; min-height: calc(100vh - 80px); }
  .cb-msg { max-width: 92%; }
  .cb-header h2 { font-size: 1rem; }
  .cb-header { padding: 1rem; }
  .cb-subtitle { font-size: .75rem; }
  .esc-call-btn { flex-direction: column; text-align: center; }
  .esc-call-arrow { display: none; }

  /* User bar responsive */
  .cb-user-bar {
    flex-direction: column;
    gap: .5rem;
    padding: .6rem 1rem;
  }
  .cb-user-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .cb-user-actions .acct-btn-sm {
    font-size: .75rem;
    padding: .4rem .75rem;
  }

  /* Profile panel responsive */
  .profile-panel {
    margin-top: .75rem;
    border-radius: 12px;
  }
  .profile-body {
    padding: 1rem;
  }
  .profile-body .acct-field { margin-bottom: .85rem; }
  .profile-body .acct-field input {
    font-size: .85rem;
    padding: .6rem .75rem;
  }
  .profile-body .acct-field label {
    font-size: .72rem;
  }
  .profile-body .acct-btn {
    font-size: .9rem;
    padding: .75rem;
  }
  .profile-header {
    padding: .85rem 1rem;
  }
  .profile-header h3 {
    font-size: .95rem;
  }

  /* Input row responsive */
  .cb-input-row {
    padding: .5rem;
    gap: .35rem;
  }
  .cb-input-row input {
    font-size: .85rem;
    padding: .6rem .75rem;
  }
  .cb-send-btn {
    padding: .6rem .85rem;
    font-size: .78rem;
  }
  .cb-voice-btn {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  /* Escalation responsive */
  .esc-panel-body { padding: 1rem; }
  .esc-call-btn { padding: .85rem 1rem; gap: .75rem; }
  .esc-call-icon { font-size: 1.4rem; }

  /* Chat messages */
  .cb-messages { padding: .85rem; gap: .5rem; }
  .cb-msg-bubble { padding: .7rem .85rem; font-size: .85rem; }
  .cb-msg-avatar { font-size: 1.1rem; }
}

@media (max-width: 380px) {
  .cb-user-info { gap: .4rem; }
  .cb-user-name { font-size: .82rem; }
  .cb-avatar { font-size: 1.2rem; }
  .profile-body .acct-field-row { flex-direction: column; gap: 0; }
  .acct-form h2 { font-size: 1.2rem; }
  .acct-tabs .acct-tab { font-size: .82rem; padding: .75rem .5rem; }
}

/* ===== ESCALATION PANEL ===== */
.esc-panel {
  margin-top: 1rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  animation: escSlideIn .4s ease;
}
@keyframes escSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Severity color coding */
.esc-panel.esc-critical { border: 3px solid #ef4444; }
.esc-panel.esc-high     { border: 3px solid #f97316; }
.esc-panel.esc-moderate { border: 3px solid #eab308; }

.esc-panel-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: #1e293b;
  color: #e2e8f0;
}
.esc-panel.esc-critical .esc-panel-header { background: linear-gradient(135deg, #991b1b, #dc2626); }
.esc-panel.esc-high .esc-panel-header     { background: linear-gradient(135deg, #9a3412, #ea580c); }
.esc-panel.esc-moderate .esc-panel-header { background: linear-gradient(135deg, #854d0e, #ca8a04); }

.esc-severity { font-size: 1.5rem; }
.esc-panel-header h3 {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.esc-close {
  background: none;
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.esc-close:hover { background: rgba(255,255,255,.15); }

.esc-panel-body {
  padding: 1.25rem;
  background: #fff;
}
.esc-reason {
  color: #334155;
  font-size: .92rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}

/* Context box */
.esc-context {
  margin-bottom: 1rem;
}
.esc-context-q {
  background: #f1f5f9;
  padding: .75rem 1rem;
  border-radius: 8px;
  font-size: .85rem;
  color: #475569;
  border-left: 3px solid #6366f1;
}

/* Call button */
.esc-call-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  transition: transform .15s, box-shadow .2s;
  margin-bottom: 1rem;
}
.esc-call-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(22,163,74,.35);
}
.esc-call-icon { font-size: 1.8rem; }
.esc-call-btn strong {
  display: block;
  font-size: 1rem;
  margin-bottom: .15rem;
}
.esc-phone {
  font-size: .85rem;
  opacity: .9;
  font-weight: 500;
}
.esc-call-arrow {
  margin-left: auto;
  font-size: 1.4rem;
  font-weight: 700;
}

/* Critical pulse animation on call button */
.esc-critical .esc-call-btn {
  animation: escPulse 2s infinite;
}
@keyframes escPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50%      { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}

/* Alt actions */
.esc-alt-actions {
  text-align: center;
}
.esc-hours {
  font-size: .8rem;
  color: #94a3b8;
  margin: 0 0 .5rem;
}
.esc-continue-btn {
  background: none;
  border: none;
  color: #6366f1;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: .25rem;
}
.esc-continue-btn:hover { color: #4f46e5; }

/* ===== OMNICHANNEL ===== */
.omni-choose-label {
  font-size: .88rem;
  font-weight: 600;
  color: #475569;
  margin: 1rem 0 .75rem;
}
.omni-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1rem;
}
@media (max-width: 500px) { .omni-channels { grid-template-columns: 1fr; } }

.omni-channel-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: #1e293b;
  font-family: inherit;
  transition: all .2s;
}
.omni-channel-btn:hover {
  border-color: #6366f1;
  background: #eef2ff;
  transform: translateY(-1px);
}
.omni-icon { font-size: 1.5rem; flex-shrink: 0; }
.omni-channel-btn strong { display: block; font-size: .9rem; }
.omni-sub { display: block; font-size: .72rem; color: #64748b; margin-top: 1px; }

.omni-livechat:hover { border-color: #6366f1; }
.omni-whatsapp:hover { border-color: #22c55e; background: #f0fdf4; }
.omni-phone:hover { border-color: #3b82f6; background: #eff6ff; }
.omni-email:hover { border-color: #8b5cf6; background: #f5f3ff; }
.omni-callback:hover { border-color: #f59e0b; background: #fffbeb; }

/* Live agent chat */
.omni-agent-chat {
  border: 2px solid #6366f1;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  animation: escSlideIn .3s ease;
}
.omni-agent-header {
  padding: .6rem 1rem;
  background: #6366f1;
  color: #fff;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.omni-agent-status {
  margin-left: auto;
  font-size: .72rem;
  opacity: .8;
}
.omni-agent-messages {
  min-height: 150px;
  max-height: 250px;
  overflow-y: auto;
  padding: .75rem;
  background: #f8fafc;
  font-size: .85rem;
}
.omni-agent-msg {
  margin-bottom: .5rem;
  padding: .4rem .7rem;
  border-radius: 8px;
  max-width: 85%;
}
.omni-agent-msg.user { background: #eef2ff; color: #312e81; margin-left: auto; text-align: right; }
.omni-agent-msg.agent { background: #fff; border: 1px solid #e2e8f0; color: #334155; }
.omni-agent-msg.system { background: #fef3c7; color: #92400e; text-align: center; font-size: .78rem; font-style: italic; margin: .5rem auto; max-width: 100%; }

.omni-agent-input {
  display: flex;
  gap: .35rem;
  padding: .5rem;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
.omni-agent-input input {
  flex: 1;
  padding: .5rem .75rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-family: inherit;
  font-size: .85rem;
}
.omni-agent-input button {
  padding: .5rem 1rem;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: .8rem;
  cursor: pointer;
}

/* Callback form */
.omni-callback-form {
  padding: 1rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  margin-bottom: 1rem;
  animation: escSlideIn .3s ease;
}
.omni-callback-form select {
  width: 100%;
  padding: .6rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-family: inherit;
  font-size: .88rem;
  margin-bottom: .75rem;
}

/* Email sent */
.omni-email-sent {
  padding: 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  color: #16a34a;
  font-weight: 600;
  font-size: .88rem;
  text-align: center;
  margin-bottom: 1rem;
  animation: escSlideIn .3s ease;
}

/* ===== PREMIUM GATE ===== */
.premium-gate {
  margin-top: 1rem;
  animation: escSlideIn .4s ease;
}
.premium-card {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  border: 2px solid #6366f1;
  box-shadow: 0 8px 40px rgba(99,102,241,.25);
}
.premium-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #1e1b4b;
  font-weight: 800;
  font-size: .75rem;
  padding: .3rem .85rem;
  border-radius: 20px;
  margin-bottom: .75rem;
  letter-spacing: 1px;
}
.premium-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .5rem;
}
.premium-desc {
  color: #a5b4fc;
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.premium-features {
  text-align: left;
  margin-bottom: 1.5rem;
}
.premium-feat {
  padding: .4rem 0;
  font-size: .85rem;
  color: #e0e7ff;
  border-bottom: 1px solid rgba(99,102,241,.2);
}
.premium-feat:last-child { border-bottom: none; }
.premium-pricing {
  margin-bottom: 1.25rem;
}
.premium-price {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
}
.premium-price span {
  font-size: .9rem;
  font-weight: 500;
  color: #a5b4fc;
}
.premium-trial {
  font-size: .78rem;
  color: #818cf8;
  margin-top: .25rem;
}
.premium-upgrade-btn {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  color: #1e1b4b !important;
  font-weight: 800;
}
.premium-skip {
  background: none;
  border: none;
  color: #818cf8;
  font-family: inherit;
  font-size: .82rem;
  cursor: pointer;
  text-decoration: underline;
  margin-top: .75rem;
  display: block;
  width: 100%;
}
.premium-skip:hover { color: #c7d2fe; }

/* Message limit bar */
.msg-limit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem 1rem;
  background: #fef3c7;
  border-top: 1px solid #fde68a;
  font-size: .78rem;
  color: #92400e;
  font-weight: 600;
}
.msg-limit-bar a {
  color: #6366f1;
  font-weight: 700;
  text-decoration: underline;
}

/* ===== DOCUMENT COMPARISON VIEW ===== */
.doc-comparison {
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  margin-top: .5rem;
}
.doc-cmp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .85rem 1rem;
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border-bottom: 1px solid #e2e8f0;
}
.doc-cmp-header h4 { margin: 0; font-size: .95rem; color: #1e293b; }
.doc-cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 700px) { .doc-cmp-grid { grid-template-columns: 1fr; } }
.doc-cmp-original {
  border-right: 1px solid #e2e8f0;
  padding: .75rem;
}
@media (max-width: 700px) { .doc-cmp-original { border-right: none; border-bottom: 1px solid #e2e8f0; } }
.doc-cmp-original h5, .doc-cmp-extracted h5 {
  margin: 0 0 .5rem;
  font-size: .82rem;
  color: #6366f1;
  font-weight: 700;
}
.doc-cmp-img-wrap {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.doc-cmp-img {
  width: 100%;
  display: block;
}
.doc-cmp-extracted { padding: .75rem; }
.doc-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.doc-cmp-table th {
  text-align: left;
  padding: .35rem .4rem;
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
}
.doc-cmp-table td {
  padding: .3rem .4rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.doc-cmp-label { color: #475569; font-weight: 600; }
.doc-cmp-value { color: #1e293b; word-break: break-all; }
.doc-cmp-found .doc-cmp-value { color: #1e293b; }
.doc-cmp-missing .doc-cmp-value { color: #94a3b8; font-style: italic; }
.doc-cmp-summary {
  padding: .6rem 1rem;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  font-size: .82rem;
  text-align: center;
}
.doc-cmp-hint {
  padding: .4rem 1rem .6rem;
  font-size: .72rem;
  color: #94a3b8;
  text-align: center;
  margin: 0;
}