:root{--bg:#f8fafc;--panel:#ffffff;--muted:#64748b;--text:#1e293b;--brand:#f59e0b;--brand-2:#f97316;--accent:#3b82f6;--ok:#10b981;--warn:#f59e0b;--card:#ffffff;--border:#e2e8f0;--sun:#fbbf24;--sky:#60a5fa}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(135deg,#fef3c7 0%,#dbeafe 50%,#fce7f3 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;min-height:100vh}

.hero{padding:32px 16px;border-bottom:1px solid rgba(0,0,0,.06);background:linear-gradient(135deg,rgba(251,191,36,.15) 0%,rgba(96,165,250,.12) 50%,rgba(249,115,22,.1) 100%);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.brand{max-width:980px;margin:0 auto;display:flex;gap:12px;align-items:center}
.logo{display:inline-flex;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#ffffff;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(245,158,11,.35);transform:rotate(-5deg)}
.titles h1{font-size:22px;margin:0 0 4px 0;font-weight:700;color:#1e293b;letter-spacing:-0.3px}
.titles .subtitle{margin:0;color:var(--muted);font-size:13px;font-weight:500}

.container{max-width:980px;margin:24px auto 40px;padding:0 16px}
.controls{display:flex;gap:16px;align-items:center;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.control{display:flex;flex-direction:column;gap:6px}
.label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.controls select{appearance:none;padding:10px 14px;border-radius:12px;border:2px solid var(--border);background:var(--card);color:var(--text);min-width:180px;outline:none;font-weight:500;transition:all .15s ease;cursor:pointer}
.controls select:hover{border-color:var(--brand);background:#fffbf0}
.controls select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.spacer{flex:1}
.status{font-size:12px;padding:8px 14px;border-radius:999px;border:2px solid;font-weight:600;letter-spacing:0.3px}
.status.idle{background:rgba(16,185,129,.12);color:#059669;border-color:rgba(16,185,129,.3)}
.status.busy{background:rgba(245,158,11,.15);color:#d97706;border-color:rgba(245,158,11,.3)}

.ask{margin-top:20px}
.input-row{display:flex;gap:12px}
.input-row input{flex:1;padding:16px 18px;border:2px solid var(--border);border-radius:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--text);outline:none;font-size:15px;font-weight:500;transition:all .15s ease;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.input-row input:focus{border-color:var(--brand);background:#ffffff;box-shadow:0 0 0 4px rgba(245,158,11,.12),0 4px 12px rgba(0,0,0,.08)}
.input-row input::placeholder{color:#94a3b8;font-weight:400}
.btn-primary{display:inline-flex;gap:8px;align-items:center;padding:14px 20px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#ffffff;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 4px 16px rgba(245,158,11,.35),0 2px 4px rgba(0,0,0,.1);transition:all .15s ease;letter-spacing:0.2px}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(245,158,11,.4),0 4px 8px rgba(0,0,0,.12)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.btn-icon{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.hint{margin:10px 4px 0;color:var(--muted);font-size:13px;font-weight:500}

.btn-secondary{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;border:2px solid var(--border);background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--text);cursor:pointer;transition:all .15s ease;box-shadow:0 2px 6px rgba(0,0,0,.06);font-size:20px}
.btn-secondary:hover{transform:translateY(-2px);border-color:var(--accent);background:#ffffff;box-shadow:0 4px 12px rgba(59,130,246,.2)}
.btn-secondary:disabled{opacity:.5;cursor:not-allowed;transform:none}

.answers{margin-top:24px}
.empty{display:flex;gap:14px;align-items:center;justify-content:center;padding:32px;border:2px dashed rgba(245,158,11,.3);border-radius:16px;color:var(--muted);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.empty-illustration{font-size:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}
.empty-text{font-size:15px;font-weight:500;color:#475569}

.answer{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.card{border:2px solid rgba(0,0,0,.06);border-radius:16px;padding:18px 20px;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);white-space:pre-wrap;line-height:1.7;box-shadow:0 4px 16px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06);transition:all .2s ease}
.card:hover{box-shadow:0 6px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);transform:translateY(-1px)}
.card h3{margin:0 0 10px 0;font-size:16px;font-weight:700;color:#1e293b;letter-spacing:-0.2px}
.card .meta{color:var(--muted);font-size:12px;margin-bottom:8px;font-weight:500}

/* Skeleton */
.skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);border:2px solid rgba(245,158,11,.3);color:#1e293b;padding:12px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.15),0 2px 8px rgba(245,158,11,.2);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;font-weight:600;font-size:14px}
.toast.show{opacity:1;transform:translate(-50%,-6px)}

.modal{position:fixed;bottom:24px;right:24px;display:none;z-index:50;max-width:min(420px,calc(100vw - 48px))}
.modal.show{display:block;animation:slideUp .3s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-backdrop{display:none}
.modal-dialog{width:100%;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);border:2px solid rgba(245,158,11,.2);border-radius:18px;padding:22px;color:var(--text);box-shadow:0 12px 40px rgba(0,0,0,.15),0 4px 16px rgba(245,158,11,.2),0 0 0 1px rgba(0,0,0,.04)}
.modal-dialog h3{margin:0 0 10px 0;font-size:17px;font-weight:700;color:#1e293b;letter-spacing:-0.3px}
.muted{color:var(--muted);font-size:14px;margin:0 0 14px 0;line-height:1.5;font-weight:500}
.stars{display:flex;gap:10px;margin-bottom:16px}
.star{font-size:28px;line-height:1;border:2px solid var(--border);border-radius:12px;background:#f8fafc;color:#cbd5e1;padding:10px 14px;cursor:pointer;transition:all .15s ease;min-width:50px;text-align:center;font-weight:normal}
.star:hover{transform:translateY(-3px) scale(1.05);border-color:var(--brand);background:#fffbf0;color:var(--brand);box-shadow:0 4px 12px rgba(245,158,11,.25)}
.star.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#ffffff;border-color:transparent;box-shadow:0 6px 20px rgba(245,158,11,.4);transform:scale(1.05)}
.feedback{width:100%;padding:14px;border-radius:12px;border:2px solid var(--border);background:#f8fafc;color:var(--text);font-size:14px;font-family:inherit;outline:none;resize:vertical;line-height:1.6;transition:all .15s ease}
.feedback:focus{border-color:var(--brand);background:#ffffff;box-shadow:0 0 0 4px rgba(245,158,11,.1)}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:16px}
.modal-actions .btn-secondary{width:auto;height:auto;padding:10px 18px;font-size:14px;font-weight:600;color:var(--text)}
.modal-actions .btn-primary{width:auto;height:auto;padding:10px 20px;font-size:14px}

/* Markdown content styles */
.markdown-content {
  line-height: 1.7;
}
.markdown-content code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}
.markdown-content pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 12px 0;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.markdown-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: 0.9em;
  line-height: 1.6;
}
.markdown-content pre::before {
  content: attr(class);
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}
.markdown-content pre:not([class*="language-"])::before {
  display: none;
}
.markdown-content ul, .markdown-content ol {
  margin: 12px 0;
  padding-left: 24px;
}
.markdown-content li {
  margin: 6px 0;
}
.markdown-content a {
  color: #3b82f6;
  text-decoration: underline;
  transition: color .15s ease;
  word-break: break-word;
}
.markdown-content a:hover {
  color: #2563eb;
  text-decoration: underline;
}
.markdown-content a:visited {
  color: #7c3aed;
}
.markdown-content a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.8em;
  opacity: 0.7;
}
.markdown-content h1, .markdown-content h2, .markdown-content h3 {
  margin: 16px 0 8px 0;
  font-weight: 700;
}
.markdown-content blockquote {
  border-left: 4px solid var(--brand);
  padding-left: 16px;
  margin: 12px 0;
  color: var(--muted);
  font-style: italic;
  background: rgba(245, 158, 11, .05);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
}
.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.markdown-content table th,
.markdown-content table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
}
.markdown-content table th {
  background: linear-gradient(135deg, rgba(245, 158, 11, .1), rgba(249, 115, 22, .05));
  font-weight: 700;
  color: var(--text);
}
.markdown-content table tr:nth-child(even) {
  background: rgba(0, 0, 0, .02);
}
.markdown-content table tr:hover {
  background: rgba(245, 158, 11, .05);
}
.markdown-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.markdown-content input[type="checkbox"] {
  margin-right: 8px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--brand);
}
.markdown-content ul.contains-task-list,
.markdown-content ol.contains-task-list {
  list-style: none;
  padding-left: 0;
}
.markdown-content ul.contains-task-list li,
.markdown-content ol.contains-task-list li {
  display: flex;
  align-items: flex-start;
  margin: 8px 0;
}
.markdown-content ul.contains-task-list li input[type="checkbox"],
.markdown-content ol.contains-task-list li input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.markdown-content hr {
  border: none;
  border-top: 2px solid var(--border);
  margin: 24px 0;
  border-radius: 2px;
}
.markdown-content strong {
  font-weight: 700;
  color: var(--text);
}
.markdown-content em {
  font-style: italic;
  color: var(--muted);
}
.markdown-content del {
  text-decoration: line-through;
  color: var(--muted);
}

/* History Panel */
.history-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(16px);
  border-left: 2px solid rgba(0, 0, 0, .08);
  box-shadow: -4px 0 24px rgba(0, 0, 0, .1);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s ease;
}
.history-panel[style*="display: block"] {
  transform: translateX(0);
}
.history-header {
  padding: 20px;
  border-bottom: 2px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.history-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.btn-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all .15s ease;
}
.btn-close:hover {
  background: #f1f5f9;
  color: var(--text);
}
.history-controls {
  padding: 16px;
  border-bottom: 2px solid var(--border);
}
.search-input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: all .15s ease;
  margin-bottom: 12px;
}
.search-input:focus {
  border-color: var(--brand);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .1);
}
.history-filters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.filter-select {
  padding: 8px 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: all .15s ease;
}
.filter-select:hover {
  border-color: var(--brand);
  background: #ffffff;
}
.filter-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .1);
}
.history-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-export, .btn-clear {
  padding: 8px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.btn-export:hover {
  border-color: var(--accent);
  background: #ffffff;
  color: var(--accent);
}
.btn-clear {
  border-color: rgba(239, 68, 68, .3);
  color: #dc2626;
}
.btn-clear:hover {
  border-color: #dc2626;
  background: #fef2f2;
}
.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.history-item {
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all .15s ease;
  position: relative;
}
.history-item:hover {
  border-color: var(--brand);
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.history-item-question {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  font-size: 14px;
  flex: 1;
  line-height: 1.4;
}
.btn-delete-item {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all .15s ease;
  flex-shrink: 0;
}
.btn-delete-item:hover {
  background: rgba(239, 68, 68, .1);
  color: #dc2626;
}
.history-item-answer {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.history-item-rating {
  font-size: 14px;
  color: var(--brand);
  margin-bottom: 4px;
  letter-spacing: 2px;
}
.history-item-feedback {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 6px;
  padding: 6px;
  background: rgba(245, 158, 11, .05);
  border-radius: 6px;
  border-left: 2px solid var(--brand);
}
.history-item-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-history-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #ffffff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245, 158, 11, .35);
  transition: all .15s ease;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-history-toggle:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 6px 24px rgba(245, 158, 11, .4);
}

/* Statistics Panel */
.stats-section {
  margin: 20px 0;
  padding: 20px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.stat-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, rgba(245, 158, 11, .1), rgba(255, 255, 255, .9));
  border: 2px solid rgba(245, 158, 11, .2);
  border-radius: 12px;
  transition: all .15s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, .2);
  border-color: var(--brand);
}
.stat-icon {
  font-size: 32px;
  line-height: 1;
}
.stat-content {
  flex: 1;
}
.stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.btn-stats-toggle {
  padding: 8px 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  transition: all .15s ease;
  font-weight: 600;
}
.btn-stats-toggle:hover {
  border-color: var(--brand);
  background: #fffbf0;
  transform: translateY(-2px);
}

/* Recommendations */
.recommendations-container {
  margin-top: 20px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .1), rgba(255, 255, 255, .95));
  border: 2px solid rgba(59, 130, 246, .2);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.recommendations-header {
  margin-bottom: 12px;
}
.recommendations-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rec-btn {
  padding: 12px 16px;
  border: 2px solid rgba(59, 130, 246, .3);
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
  color: var(--text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
  font-weight: 500;
  line-height: 1.4;
}
.rec-btn:hover {
  border-color: var(--accent);
  background: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, .2);
}

/* Quality Badge */
.quality-badge {
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .15), rgba(16, 185, 129, .05));
  border: 1px solid rgba(16, 185, 129, .3);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  letter-spacing: 0.3px;
}

/* Responsive */
@media (max-width:720px){
  .controls{flex-wrap:wrap;gap:12px}
  .controls select{min-width:unset;width:100%}
  .spacer{display:none}
  .modal{bottom:16px;right:16px;left:16px;max-width:unset}
  .history-panel {
    width: 100%;
  }
  .btn-history-toggle {
    bottom: 16px;
    right: 16px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .recommendations-list {
    gap: 6px;
  }
  .rec-btn {
    font-size: 13px;
    padding: 10px 14px;
  }
}