* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: #f6f7fb; color: #0f172a; }
.app { max-width: 1200px; margin: 0 auto; padding: 24px; }
.header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.brand { font-size: 22px; font-weight: 700; }
.sub { font-size: 12px; color: #64748b; }
.main { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 16px; }
.chat { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; display: flex; flex-direction: column; height: 70vh; }
.messages { padding: 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.msg { padding: 12px 14px; border-radius: 12px; max-width: 85%; }
.msg.user { background: #2563eb; color: #fff; align-self: flex-end; }
.msg.assistant { background: #f1f5f9; color: #0f172a; align-self: flex-start; }
.composer { display: flex; gap: 10px; padding: 12px; border-top: 1px solid #e2e8f0; }
.composer textarea { flex: 1; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; resize: none; }
.composer button { background: #0ea5e9; border: none; color: #fff; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; height: 70vh; overflow-y: auto; }
.panel-title { font-weight: 700; margin-bottom: 10px; }
.cards { display: grid; gap: 12px; }
.card { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.card img { width: 100%; height: 140px; object-fit: cover; }
.card-body { padding: 10px; }
.card-title { font-weight: 700; margin-bottom: 6px; }
.card-meta { font-size: 12px; color: #64748b; }
.price { font-weight: 700; margin-top: 8px; }
.link { font-size: 12px; color: #2563eb; text-decoration: none; }
@media (max-width: 980px) {
  .main { grid-template-columns: 1fr; }
  .panel { height: auto; }
}

.cmp-title { font-weight: 700; margin-bottom: 6px; }
.cmp-list { margin: 0; padding-left: 18px; }
.cmp-list li { margin: 4px 0; font-size: 13px; color: #0f172a; }
