/* ============================================================
 * OpenCode Agent UI Enhancements — FULL (Items 1–12)
 * SAFE: Only targets enhancement classes, never overrides React styles
 * ============================================================ */

/* ─── 1. CODE BLOCKS — Line numbers ──────────────────────── */
.code-block-wrapper {
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease;
}
.code-block-wrapper:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.code-apply-btn {
  padding: 3px 10px;
  background: rgba(129,201,149,0.1);
  border: 1px solid rgba(129,201,149,0.3);
  border-radius: 6px;
  color: var(--success);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: all 0.15s ease;
}
.code-apply-btn:hover {
  background: rgba(129,201,149,0.2);
  border-color: var(--success);
}

/* ─── 2. AGENT STATE ANIMATIONS ──────────────────────────── */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

@keyframes agentPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

@keyframes agentSpin {
  to { transform: rotate(360deg); }
}

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

@keyframes statusShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Status bar shimmer when active */
.status-bar.active {
  background: linear-gradient(90deg, var(--bg-secondary), var(--accent-dim), var(--bg-secondary));
  background-size: 200% 100%;
  animation: statusShimmer 2s ease infinite;
}

/* ─── 3. WELCOME SCREEN — Append-only enhancements ──────── */
@keyframes emptyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ─── 4. MESSAGE ENHANCEMENTS ───────────────────────────── */
.message {
  padding: 4px 0;
  border-radius: var(--radius);
  transition: background 0.15s ease;
}

/* Smooth message entrance */
@keyframes messageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.message {
  animation: messageIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── 5. SIDEBAR ────────────────────────────────────────── */
.session-item {
  transition: all 0.15s ease;
}

/* ─── 7. SLASH PALETTE ──────────────────────────────────── */
.slash-cmd:hover {
  background: var(--bg-hover) !important;
}

/* ─── 9. SKELETON LOADING ───────────────────────────────── */
@keyframes skelShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── 10. TOOL BLOCK TIMELINE ───────────────────────────── */
@keyframes toolPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.tool-call-block {
  transition: all 0.15s ease;
}

/* ─── 11. MOBILE ────────────────────────────────────────── */
@media (max-width: 768px) {
  .chat-input {
    font-size: 16px !important;
  }

  .welcome-templates {
    max-width: 100% !important;
  }
}

/* ─── 12. SCROLLBAR ─────────────────────────────────────── */
.chat-area::-webkit-scrollbar { width: 5px; }
.chat-area::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.2s;
}
.chat-area:hover::-webkit-scrollbar-thumb { opacity: 1; }

/* ─── MODEL BADGE PULSE ─────────────────────────────────── */
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.model-badge .dot {
  animation: dotPulse 2s ease-in-out infinite;
}

/* ─── SEND BUTTON ───────────────────────────────────────── */
.send-btn {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.send-btn:active:not(:disabled) {
  transform: scale(0.92);
}

/* ─── TOAST ─────────────────────────────────────────────── */
@keyframes toastIn {
  from { opacity: 0; transform: translate(20px) scale(0.95); }
  to { opacity: 1; transform: translate(0) scale(1); }
}

.toast {
  animation: toastIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── STAT CARDS (Admin) ────────────────────────────────── */
.stat-card {
  transition: all 0.2s ease;
}
.stat-card:hover {
  border-color: var(--border-light);
  transform: translateY(-1px);
}

.progress-bar .fill {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}