/* ============================================================
   Quinable Help Center – support.css
   All styles for the support chat interface
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #09090B; color: #FAFAFA;
  height: 100vh; height: 100dvh;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}

::selection { background: #10B981; color: #09090B; }

/* ==================== LOGIN ==================== */
.login-screen {
  position: fixed; inset: 0; background: #09090B;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px; overflow: hidden;
}
.login-screen::before {
  content: ''; position: absolute; top: -200px; right: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.login-screen::after {
  content: ''; position: absolute; bottom: -150px; left: -150px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,0.06) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.login-screen.hidden { display: none; }

.login-card {
  background: #18181B; border: 1px solid #27272A; border-radius: 20px;
  padding: 44px 40px; width: 100%; max-width: 420px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  text-align: center; position: relative; z-index: 2;
}
.login-logo {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #10B981, #06B6D4);
  border-radius: 14px; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 24px;
  font-size: 22px; color: #09090B; font-weight: 800;
  box-shadow: 0 8px 24px rgba(16,185,129,.2);
}
.login-title {
  font-size: 22px; font-weight: 700; color: #FAFAFA;
  margin-bottom: 6px; letter-spacing: -0.5px;
}
.login-subtitle { font-size: 13px; color: #71717A; margin-bottom: 28px; line-height: 1.6; }

.login-field {
  width: 100%; padding: 13px 18px; font-size: 14px; font-family: inherit;
  background: #111114; border: 1px solid #27272A; border-radius: 10px;
  color: #FAFAFA; outline: none; transition: all .2s; margin-bottom: 12px;
}
.login-field:focus { border-color: #10B981; background: #0D0D10; }
.login-field::placeholder { color: #52525B; }

.login-btn {
  width: 100%; padding: 13px; font-size: 14px; font-weight: 600;
  font-family: inherit; background: #10B981; border: none; border-radius: 10px;
  color: #09090B; cursor: pointer; transition: all .2s; margin-top: 4px;
  box-shadow: 0 0 20px rgba(16,185,129,.15);
}
.login-btn:hover { box-shadow: 0 0 30px rgba(16,185,129,.25); transform: translateY(-1px); }
.login-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.login-error {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
  border-radius: 10px; color: #EF4444; font-size: 12px; display: none;
}
.login-error.show { display: block; }
.login-error a { color: #10B981; font-weight: 600; }

.login-divider { margin: 24px 0; border: none; border-top: 1px solid #27272A; }

.login-guest-btn {
  width: 100%; padding: 12px; font-size: 13px; font-weight: 500;
  font-family: inherit; background: transparent; border: 1px solid #27272A;
  border-radius: 10px; color: #A1A1AA; cursor: pointer; transition: all .15s;
}
.login-guest-btn:hover { border-color: #10B981; color: #10B981; }

/* ==================== 2FA PANELS ==================== */
.tfa-panel { display: none; margin-top: 24px; }
.tfa-panel.active { display: block; }

.tfa-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-size: 24px;
}
.tfa-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; color: #FAFAFA; letter-spacing: -0.3px; }
.tfa-sub { font-size: 13px; color: #71717A; margin-bottom: 20px; line-height: 1.5; }

.tfa-code {
  width: 100%; padding: 16px; font-size: 26px;
  font-family: 'Sora', monospace; text-align: center;
  letter-spacing: .35em; background: #111114;
  border: 1px solid #27272A; border-radius: 10px;
  color: #10B981; outline: none; font-weight: 600;
}
.tfa-code:focus { border-color: #10B981; }

.tfa-err {
  margin-top: 10px; padding: 8px 12px;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
  border-radius: 8px; color: #EF4444; font-size: 12px; display: none;
}
.tfa-err.show { display: block; }
.tfa-att { font-size: 12px; color: #F59E0B; margin-top: 8px; display: none; }
.tfa-att.show { display: block; }

.tfa-btn {
  width: 100%; padding: 13px; font-size: 14px; font-weight: 600;
  font-family: inherit; background: #10B981; border: none; border-radius: 10px;
  color: #09090B; cursor: pointer; margin-top: 14px;
  box-shadow: 0 0 20px rgba(16,185,129,.15);
}
.tfa-btn:disabled { opacity: .5; cursor: not-allowed; }

.tfa-cancel {
  display: block; width: 100%; margin-top: 10px; padding: 8px;
  font-size: 12px; color: #52525B; background: none; border: none;
  cursor: pointer; font-family: inherit;
}
.tfa-cancel:hover { color: #EF4444; }

.tfa-secret {
  display: inline-block; padding: 6px 12px; border-radius: 8px;
  background: #111114; border: 1px solid #27272A;
  font-family: monospace; font-size: 12px; color: #A1A1AA;
  user-select: all; margin: 8px 0;
}
.tfa-qr {
  width: 180px; height: 180px; border-radius: 12px;
  background: #fff; padding: 8px; margin: 0 auto 12px;
}
.tfa-lock {
  font-size: 28px; font-weight: 800; color: #EF4444;
  margin: 16px 0; font-family: monospace;
}

/* ==================== APP LAYOUT ==================== */
.app-container {
  display: none; height: 100vh; height: 100dvh;
  flex-direction: column; background: #09090B;
}
.app-container.active { display: flex; }

.top-bar {
  height: 60px; min-height: 60px; background: #111114;
  border-bottom: 1px solid #27272A; display: flex;
  align-items: center; justify-content: space-between;
  padding: 0 20px; z-index: 10;
}
.top-bar-left { display: flex; align-items: center; gap: 14px; }
.top-bar-logo {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #10B981, #06B6D4);
  border-radius: 9px; display: flex; align-items: center;
  justify-content: center; font-size: 15px; color: #09090B; font-weight: 800;
}
.top-bar-title { font-size: 15px; font-weight: 700; color: #FAFAFA; letter-spacing: -0.3px; }
.top-bar-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 10px; font-weight: 600;
}
.badge-v { background: rgba(16,185,129,.1); color: #10B981; border: 1px solid rgba(16,185,129,.2); }
.badge-u { background: rgba(245,158,11,.1); color: #F59E0B; border: 1px solid rgba(245,158,11,.2); }
.badge-p { background: rgba(59,130,246,.1); color: #3B82F6; border: 1px solid rgba(59,130,246,.2); }

.top-bar-right { display: flex; align-items: center; gap: 8px; }
.top-bar-btn {
  padding: 7px 14px; font-size: 12px; font-weight: 500; font-family: inherit;
  background: transparent; border: 1px solid #27272A; border-radius: 8px;
  color: #A1A1AA; cursor: pointer; transition: all .15s;
}
.top-bar-btn:hover { background: #18181B; border-color: #3F3F46; color: #FAFAFA; }
.top-bar-btn.danger { color: #71717A; }
.top-bar-btn.danger:hover {
  background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.2); color: #EF4444;
}

/* ==================== CHAT ==================== */
.chat-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; background: #09090B; }

.chat-messages { flex: 1; overflow-y: auto; padding: 24px 16px 16px; scroll-behavior: smooth; }
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: #27272A; border-radius: 3px; }

.msg-wrapper { max-width: 720px; margin: 0 auto; width: 100%; }

.msg { margin-bottom: 16px; display: flex; gap: 10px; animation: msgIn .25s ease-out; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.msg.user { justify-content: flex-end; }
.msg.user .msg-content {
  background: rgba(16,185,129,.12); color: #FAFAFA;
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 16px 16px 4px 16px; max-width: 75%;
}
.msg.assistant .msg-avatar {
  width: 30px; height: 30px; min-width: 30px;
  background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(6,182,212,.08));
  border: 1px solid rgba(16,185,129,.2); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #10B981; font-weight: 800; margin-top: 2px;
}
.msg.assistant .msg-content {
  background: #18181B; color: #FAFAFA; border: 1px solid #27272A;
  border-radius: 16px 16px 16px 4px; max-width: 75%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.msg-content { padding: 12px 18px; font-size: 14px; line-height: 1.65; word-wrap: break-word; }
.msg-content p { margin-bottom: 8px; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content strong { font-weight: 600; color: #FAFAFA; }
.msg-content a { color: #10B981; text-decoration: underline; }
.msg.user .msg-content a { color: #6EE7B7; }

.msg-time { font-size: 10px; color: #52525B; margin-top: 4px; padding: 0 4px; }
.msg.user .msg-time { text-align: right; }

/* KB Article feedback inline */
.msg-kb-feedback {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #27272A; font-size: 11px; color: #52525B;
}
.msg-kb-feedback button {
  padding: 3px 10px; font-size: 11px; font-family: inherit;
  background: transparent; border: 1px solid #27272A;
  border-radius: 6px; color: #71717A; cursor: pointer; transition: all .15s;
}
.msg-kb-feedback button:hover { border-color: #10B981; color: #10B981; }
.msg-kb-feedback button.voted { border-color: #10B981; color: #10B981; background: rgba(16,185,129,.06); cursor: default; }

.msg-system { text-align: center; margin: 20px 0; animation: msgIn .25s ease-out; }
.msg-system-content {
  display: inline-block; padding: 5px 14px; background: #18181B;
  border: 1px solid #27272A; border-radius: 20px; font-size: 11px; color: #52525B;
}

.typing-indicator { display: flex; gap: 10px; margin-bottom: 16px; animation: msgIn .25s ease-out; }
.typing-indicator .msg-avatar {
  width: 30px; height: 30px; min-width: 30px;
  background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(6,182,212,.08));
  border: 1px solid rgba(16,185,129,.2); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #10B981; font-weight: 800;
}
.typing-dots {
  display: flex; align-items: center; gap: 5px;
  padding: 14px 20px; background: #18181B; border: 1px solid #27272A;
  border-radius: 16px 16px 16px 4px; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.typing-dots span {
  width: 6px; height: 6px; background: #3F3F46;
  border-radius: 50%; animation: bounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.ticket-notice {
  max-width: 720px; margin: 16px auto; padding: 14px 18px;
  background: rgba(16,185,129,.05); border: 1px solid rgba(16,185,129,.15);
  border-radius: 12px; display: flex; align-items: flex-start;
  gap: 12px; font-size: 13px; color: #A1A1AA; animation: msgIn .25s ease-out;
}
.ticket-notice strong { font-weight: 700; color: #10B981; }

/* ==================== INPUT ==================== */
.input-area { background: #111114; border-top: 1px solid #27272A; padding: 16px 20px; }
.input-row { max-width: 720px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; }
.input-field-wrap {
  flex: 1; background: #18181B; border: 1px solid #27272A;
  border-radius: 12px; transition: border-color .2s; display: flex; align-items: flex-end;
}
.input-field-wrap:focus-within { border-color: #10B981; }

#chatInput {
  flex: 1; border: none; background: transparent; padding: 13px 18px;
  font-size: 14px; font-family: inherit; color: #FAFAFA; outline: none;
  resize: none; min-height: 46px; max-height: 140px; line-height: 1.5;
}
#chatInput::placeholder { color: #52525B; }

.send-btn {
  width: 46px; height: 46px; min-width: 46px; background: #10B981;
  border: none; border-radius: 10px; color: #09090B; cursor: pointer;
  transition: all .2s; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px rgba(16,185,129,.15);
}
.send-btn:hover { box-shadow: 0 0 24px rgba(16,185,129,.25); transform: translateY(-1px); }
.send-btn:disabled { opacity: .3; cursor: not-allowed; transform: none; box-shadow: none; }
.send-btn svg { width: 20px; height: 20px; }
.input-hint { max-width: 720px; margin: 8px auto 0; font-size: 10px; color: #3F3F46; text-align: center; }

/* ==================== WELCOME ==================== */
.welcome-screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.welcome-inner { text-align: center; max-width: 480px; }
.welcome-icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(6,182,212,.06));
  border: 1px solid rgba(16,185,129,.15); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.welcome-icon svg {
  width: 28px; height: 28px; stroke: #10B981; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.welcome-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #FAFAFA; letter-spacing: -0.3px; }
.welcome-text { font-size: 13px; color: #71717A; line-height: 1.65; margin-bottom: 28px; }
.welcome-suggestions { display: flex; flex-direction: column; gap: 6px; }
.welcome-suggestion {
  padding: 11px 18px; background: #18181B; border: 1px solid #27272A;
  border-radius: 10px; font-size: 13px; color: #A1A1AA; cursor: pointer;
  transition: all .15s; text-align: left; font-family: inherit;
}
.welcome-suggestion:hover { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.04); color: #10B981; }

/* ==================== GUEST MODAL ==================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none;
  align-items: center; justify-content: center;
  z-index: 10000; padding: 20px; backdrop-filter: blur(8px);
}
.modal-overlay.show { display: flex; }
.modal-card {
  background: #18181B; border: 1px solid #27272A; border-radius: 18px;
  padding: 32px; width: 100%; max-width: 480px; box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; color: #FAFAFA; letter-spacing: -0.3px; }
.modal-subtitle { font-size: 12px; color: #71717A; margin-bottom: 24px; }
.modal-field { margin-bottom: 14px; }
.modal-label { display: block; font-size: 12px; font-weight: 600; color: #A1A1AA; margin-bottom: 6px; }
.modal-input, .modal-select, .modal-textarea {
  width: 100%; padding: 11px 14px; font-size: 13px; font-family: inherit;
  background: #111114; border: 1px solid #27272A; border-radius: 8px;
  color: #FAFAFA; outline: none; transition: border-color .2s;
}
.modal-input:focus, .modal-select:focus, .modal-textarea:focus { border-color: #10B981; }
.modal-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.modal-select option { background: #18181B; color: #FAFAFA; }
.modal-textarea { resize: vertical; min-height: 80px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-btn-primary {
  flex: 1; padding: 12px; font-size: 13px; font-weight: 600; font-family: inherit;
  background: #10B981; border: none; border-radius: 10px;
  color: #09090B; cursor: pointer; box-shadow: 0 0 16px rgba(16,185,129,.15);
}
.modal-btn-secondary {
  padding: 12px 20px; font-size: 13px; font-weight: 500; font-family: inherit;
  background: transparent; border: 1px solid #27272A; border-radius: 10px;
  color: #A1A1AA; cursor: pointer;
}
.modal-btn-secondary:hover { border-color: #3F3F46; color: #FAFAFA; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 640px) {
  .top-bar { padding: 0 12px; height: 54px; }
  .top-bar-title { font-size: 14px; }
  .top-bar-btn span.btn-label { display: none; }
  .chat-messages { padding: 16px 10px; }
  .msg-content { max-width: 88% !important; font-size: 13px; }
  .input-area { padding: 10px 12px; }
  .login-card { padding: 32px 24px; border-radius: 16px; }
}