:root {
  --bg: #111827;
  --surface: #1f2937;
  --primary: #3b82f6;
  --text: #f9fafb;
  --border: #374151;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background: var(--bg); color: var(--text); display: flex; flex-direction: column; height: 100vh; }

header { display: flex; align-items: center; padding: 0.75rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.logo { width: 32px; height: 32px; border-radius: 50%; }
.title { margin-left: 0.5rem; font-weight: 600; flex: 1; }
.header-controls button { margin-left: 0.5rem; padding: 0.25rem 0.5rem; background: var(--primary); border: none; border-radius: 4px; color: #fff; cursor: pointer; }

main { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; background: var(--bg); }

.bubble { max-width: 70%; padding: 0.75rem 1rem; border-radius: 1rem; line-height: 1.4; white-space: pre-wrap; }
.bubble.user { align-self: flex-end; background: var(--primary); color: #fff; }
.bubble.bot   { align-self: flex-start; background: var(--surface); }

.code-block { background: #0f172a; border: 1px solid var(--border); border-radius: 6px; margin-top: 0.5rem; position: relative; }
.code-block pre { padding: 0.75rem; overflow-x: auto; margin: 0; font-size: 0.875rem; }
.code-block button {
  position: absolute; top: 0.25rem; right: 0.5rem;
  background: var(--primary); color: #fff; border: none;
  border-radius: 3px; padding: 0.25rem 0.5rem; font-size: 0.75rem; cursor: pointer;
}

footer { display: flex; align-items: center; padding: 0.5rem; background: var(--surface); border-top: 1px solid var(--border); }
footer textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 1.5rem; padding: 0.75rem 1rem; background: var(--bg); color: var(--text); outline: none; }
footer button { margin-left: 0.5rem; width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 999; }
.modal-content { background: var(--surface); padding: 2rem; border-radius: 8px; width: 300px; display: flex; flex-direction: column; gap: 1rem; }
.modal-content input { padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.modal-content button { padding: 0.5rem; border: none; border-radius: 4px; background: var(--primary); color: #fff; cursor: pointer; }