/* === Typography === */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
               Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
}
code, pre, .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
}

/* Clickable links inside bubbles + bullets */
.bubble a{ color: var(--brand, #3aa3ff); text-decoration: underline; word-break: break-word; }
.bubble ul{ margin:.25rem 0 .25rem 1.1rem; padding:0; }
.bubble li{ margin:.18rem 0; }

/* === Composer text visibility hard-fix === */
#userInput,
.compose-row textarea {
  color: #eaf2ff !important;         /* bright text */
  background: #0e1733 !important;    /* keep dark bg */
  caret-color: #00ffd1 !important;   /* visible caret */
  border-color: #273058 !important;
}

/* placeholders */
#userInput::placeholder { color: #9fb4d6 !important; opacity: 1; }
#userInput::-webkit-input-placeholder { color: #9fb4d6 !important; }
#userInput::-moz-placeholder { color: #9fb4d6 !important; }
#userInput:-ms-input-placeholder { color: #9fb4d6 !important; }
#userInput::-ms-input-placeholder { color: #9fb4d6 !important; }

/* light theme safety */
body.light #userInput,
body.light .compose-row textarea {
  color: #0b1b2f !important;
  background: #ffffff !important;
  border-color: #c8d6ef !important;
  caret-color: #007a72 !important;
}

/* === Soria Thinking Indicator v2 (rich feedback while user types) === */
.soria-thinking-indicator {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  margin: 0 auto 10px auto;
  max-width: 600px;
  background: linear-gradient(135deg, rgba(20, 30, 55, 0.95), rgba(15, 22, 42, 0.98));
  border-radius: 16px;
  border: 1px solid rgba(58, 163, 255, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(58, 163, 255, 0.08);
  animation: fadeInIndicator 0.25s ease;
  backdrop-filter: blur(8px);
}

.soria-thinking-indicator.ready {
  border-color: rgba(74, 222, 128, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(74, 222, 128, 0.15);
}

.soria-thinking-indicator.recalling {
  border-color: rgba(167, 139, 250, 0.4);
  animation: fadeInIndicator 0.25s ease, shimmer 2s infinite;
}

@keyframes fadeInIndicator {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shimmer {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(167, 139, 250, 0.15); }
  50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(167, 139, 250, 0.25); }
}

/* Main row */
.thinking-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.thinking-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(58, 163, 255, 0.15);
  border-radius: 8px;
  color: #3aa3ff;
  animation: iconPulse 1.5s infinite ease-in-out;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.soria-thinking-indicator.ready .thinking-icon {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  animation: none;
}

.thinking-content {
  flex: 1;
  min-width: 0;
}

.thinking-text {
  color: #e2e8f0;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.thinking-detail {
  color: #94a3b8;
  font-size: 0.78rem;
  margin-top: 2px;
}

.thinking-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.emotion-badge, .memory-badge {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.emotion-badge {
  color: #fff;
}

.memory-badge {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.3);
}

/* Progress bar */
.thinking-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.thinking-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3aa3ff, #00ffd1);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.soria-thinking-indicator.ready .thinking-progress-bar {
  background: linear-gradient(90deg, #4ade80, #22d3ee);
}

/* Keywords row */
.keywords-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.keyword-tag {
  padding: 2px 8px;
  background: rgba(58, 163, 255, 0.1);
  border: 1px solid rgba(58, 163, 255, 0.2);
  border-radius: 6px;
  font-size: 0.7rem;
  color: #7dd3fc;
}

/* Mood hint */
.mood-hint {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
  font-style: italic;
  text-align: right;
  margin-top: 2px;
}

/* Light theme */
body.light .soria-thinking-indicator {
  background: linear-gradient(135deg, rgba(248, 250, 255, 0.98), rgba(240, 245, 255, 0.99));
  border-color: rgba(58, 163, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 30px rgba(58, 163, 255, 0.05);
}
body.light .thinking-text { color: #1e293b; }
body.light .thinking-detail { color: #64748b; }
body.light .thinking-icon { background: rgba(58, 163, 255, 0.1); }
body.light .keyword-tag {
  background: rgba(58, 163, 255, 0.08);
  color: #0284c7;
  border-color: rgba(58, 163, 255, 0.15);
}
body.light .memory-badge {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}
body.light .mood-hint { color: #94a3b8; }