|
* { box-sizing: border-box; }
|
|
html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; background: #0b0f14; color: #e6edf3; }
|
|
.app { max-width: 800px; margin: 0 auto; height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 16px; }
|
|
header { font-weight: 700; letter-spacing: 0.4px; }
|
|
.chat { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
|
|
.bubble { padding: 10px 12px; border-radius: 12px; max-width: 80%; white-space: pre-wrap; line-height: 1.35; }
|
|
.bubble.user { align-self: flex-end; background: #1f6feb; color: #fff; border-bottom-right-radius: 4px; }
|
|
.bubble.ai { align-self: flex-start; background: #161b22; border: 1px solid #30363d; border-bottom-left-radius: 4px; }
|
|
.inputbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
|
|
.inputbar input { padding: 10px 12px; background: #0d1117; color: #e6edf3; border: 1px solid #30363d; border-radius: 8px; }
|
|
.inputbar button { padding: 10px 14px; border: 1px solid #30363d; border-radius: 8px; background: #21262d; color: #e6edf3; cursor: pointer; }
|
|
.inputbar button:hover { background: #30363d; }
|
|
|