@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }
body { margin: 0; background: #0f1115; color: #e6e8ec; }
.app { display: flex; min-height: 100vh; }

.sidebar { width: 220px; background: #14161c; padding: 20px; border-right: 1px solid #23262f; }
.sidebar h1 { font-size: 18px; color: #6ee7ff; margin-bottom: 24px; }
.nav-btn {
  display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 6px;
  background: transparent; border: none; color: #aab0bd; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.nav-btn:hover { background: #1c1f27; color: #fff; }
.nav-btn.active { background: #1c2530; color: #6ee7ff; }

.content { flex: 1; padding: 30px 40px 90px; }
.view.hidden { display: none; }
h2 { color: #fff; margin-top: 0; }
h3 { color: #9aa4b2; margin-top: 30px; }

table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #23262f; font-size: 14px; }
th { color: #6ee7ff; font-weight: 600; }

form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.field-form { flex-direction: column; align-items: flex-start; max-width: 560px; }
.field { display: flex; flex-direction: column; width: 100%; margin-bottom: 4px; }
.field label { font-size: 13px; color: #cbd2dc; margin-bottom: 4px; font-weight: 600; }
.field input, .field textarea { width: 100%; }
.hint { color: #7c8496; font-size: 12.5px; margin: 4px 0 8px 0; line-height: 1.5; }
.status-line { color: #6ee7ff; font-size: 13px; margin-top: 6px; }
.warn-box {
  background: #1c2530; border: 1px solid #2a3a4d; border-radius: 8px; padding: 12px 16px;
  color: #9aa4b2; font-size: 13px; max-width: 560px; margin: 12px 0;
}
input, textarea, select {
  background: #1a1d24; border: 1px solid #2a2e38; color: #fff;
  padding: 8px 10px; border-radius: 6px; font-size: 14px;
}
textarea { width: 100%; }

.btn-primary { background: #2563eb; color: #fff; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: 500; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: #1c2530; color: #6ee7ff; border: 1px solid #2a3a4d; padding: 9px 16px; border-radius: 6px; cursor: pointer; }

/* ── Omni Widget ─────────────────────────────────────────────── */
#omni-widget {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  /* The container spans the full panel width even when the panel is hidden,
     which would block clicks on page content below. pointer-events:none on the
     container passes all clicks through; we restore it on the actual elements. */
  pointer-events: none;
}

#omni-toggle {
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #6ee7ff 0%, #818cf8 100%);
  color: #0f1115; border: none; padding: 12px 22px; border-radius: 50px;
  font-weight: 700; font-size: 14px; cursor: pointer; letter-spacing: 0.3px;
  box-shadow: 0 4px 24px rgba(110,231,255,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
#omni-toggle:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(110,231,255,0.45); }

#omni-panel {
  pointer-events: auto;
  width: 420px; max-width: calc(100vw - 40px);
  background: rgba(15, 17, 21, 0.97);
  border: 1px solid rgba(110,231,255,0.12);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(110,231,255,0.06);
  backdrop-filter: blur(24px);
  overflow: hidden;
  display: flex; flex-direction: column;
  transform-origin: bottom right;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
}
#omni-panel.hidden {
  transform: scale(0.85) translateY(16px);
  opacity: 0; pointer-events: none;
}

/* Header */
#omni-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(110,231,255,0.06) 0%, rgba(129,140,248,0.06) 100%);
  border-bottom: 1px solid rgba(110,231,255,0.08);
}
.omni-title {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15px; color: #fff;
}
.omni-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22d3ee; box-shadow: 0 0 8px #22d3ee;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}
#omni-reset-btn {
  background: none; border: none; color: #4b5563; cursor: pointer;
  font-size: 12px; padding: 4px 8px; border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
#omni-reset-btn:hover { color: #9ca3af; background: rgba(255,255,255,0.05); }

/* Messages */
#omni-log {
  flex: 1; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 380px; min-height: 180px;
  scrollbar-width: thin; scrollbar-color: #23262f transparent;
}
#omni-log::-webkit-scrollbar { width: 4px; }
#omni-log::-webkit-scrollbar-thumb { background: #23262f; border-radius: 4px; }

.omni-msg {
  display: flex; flex-direction: column; max-width: 88%;
  animation: msg-in 0.22s ease;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.omni-msg.user  { align-self: flex-end;  align-items: flex-end; }
.omni-msg.omni  { align-self: flex-start; align-items: flex-start; }

.omni-msg .msg-label {
  font-size: 10.5px; font-weight: 600; color: #4b5563;
  margin-bottom: 4px; padding: 0 2px; letter-spacing: 0.5px; text-transform: uppercase;
}

.omni-msg .bubble {
  padding: 10px 14px; font-size: 13.5px; line-height: 1.65; word-break: break-word;
}
.omni-msg.user .bubble {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
}
.omni-msg.omni .bubble {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #d1d5db;
  border-radius: 18px 18px 18px 4px;
}

/* Markdown inside bubbles */
.bubble p  { margin: 0 0 6px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 5px 0; padding-left: 18px; }
.bubble li { margin: 2px 0; }
.bubble strong { color: #fff; font-weight: 600; }
.bubble em { color: #a5b4fc; font-style: italic; }
.bubble code {
  background: rgba(110,231,255,0.1); color: #6ee7ff;
  padding: 1px 6px; border-radius: 4px; font-size: 12.5px;
  font-family: 'Fira Code', 'Courier New', monospace;
}
.bubble h3, .bubble h4 { color: #e2e8f0; margin: 8px 0 4px; font-size: 13.5px; }

/* Thinking dots */
.omni-thinking .bubble {
  display: flex; gap: 5px; align-items: center; padding: 13px 16px;
  border-radius: 18px 18px 18px 4px;
}
.flash-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #6ee7ff;
  animation: dot-flash 1.3s infinite ease-in-out;
}
.flash-dot:nth-child(2) { animation-delay: 0.2s; }
.flash-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-flash {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.75); }
  40%  { opacity: 1;   transform: scale(1); }
}

/* Input row */
#omni-input-area {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex; gap: 8px; align-items: flex-end;
}
#omni-input {
  flex: 1; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09); color: #fff;
  border-radius: 14px; padding: 10px 14px;
  font-size: 13.5px; font-family: inherit;
  resize: none; min-height: 42px; max-height: 120px;
  outline: none; line-height: 1.5;
  transition: border-color 0.15s;
}
#omni-input:focus { border-color: rgba(110,231,255,0.35); }
#omni-input::placeholder { color: #374151; }

.omni-btn {
  width: 40px; height: 40px; border-radius: 12px; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0; transition: all 0.15s;
}
#omni-send {
  background: linear-gradient(135deg, #6ee7ff, #818cf8);
  color: #0f1115;
}
#omni-send:hover:not(:disabled) { transform: scale(1.08); box-shadow: 0 4px 20px rgba(110,231,255,0.35); }
#omni-send:disabled { opacity: 0.35; cursor: not-allowed; }

#omni-record {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09); color: #6b7280;
}
#omni-record:hover { background: rgba(255,255,255,0.11); color: #d1d5db; }
#omni-record.recording {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.45); color: #f87171;
  animation: rec-pulse 1.2s infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50% { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}