* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #1f2430; background: #f4f6f8; }
.card { max-width: 360px; margin: 12vh auto; background: #fff; padding: 24px; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.card h1 { margin: 0 0 4px; font-size: 1.3rem; }
input { width: 100%; padding: 10px 12px; border: 1px solid #d4d9e0; border-radius: 10px; font-size: 1rem; }
button { padding: 10px 14px; border: 0; border-radius: 10px; background: #2e7d5b; color: #fff; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button.ghost { background: #e9edf1; color: #2b3240; }
button.right { float: right; }
.muted { color: #7b8694; font-size: .9rem; }
.err { color: #c0392b; min-height: 1.2em; font-size: .9rem; }
.badge { font-size: .72rem; background: #fde8b5; color: #7a5b00; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }
header { background: #fff; padding: 12px 16px; border-bottom: 1px solid #e6eaee; }
.grid { display: grid; grid-template-columns: 420px 1fr; gap: 0; height: calc(100vh - 49px); }
.chat { display: flex; flex-direction: column; border-right: 1px solid #e6eaee; padding: 14px; gap: 10px; }
.log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.bubble { padding: 8px 12px; border-radius: 12px; max-width: 90%; font-size: .92rem; }
.bubble.me { align-self: flex-end; background: #2e7d5b; color: #fff; }
.bubble.bot { align-self: flex-start; background: #fff; border: 1px solid #e6eaee; }
.bubble.err { align-self: flex-start; background: #fdecea; color: #b03a2e; }
.composer { display: flex; gap: 8px; }
.actions { display: flex; gap: 8px; align-items: center; }
.preview { display: flex; flex-direction: column; }
.preview .bar { padding: 8px 12px; }
iframe { flex: 1; border: 0; width: 100%; background: #fff; }