:root{
  --brand-ink:#0A2A43;
  --brand-blue:#157AFF;
  --accent:#25B0FF;
  --brand-sky:#EAF3FF;
  --card:#ffffff;
  --muted:#6b7280;
  --ok:#16a34a;
  --radius-xl:18px;
  --shadow-1:0 8px 24px rgba(10,42,67,.08);
  --shadow-2:0 12px 36px rgba(10,42,67,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:
  radial-gradient(1200px 600px at 15% -10%, #F5FAFF 0, #F7FBFF 40%, transparent 60%),
  radial-gradient(1200px 600px at 95% 0%, #F0F8FF 0, #F7FBFF 40%, transparent 60%),
  var(--brand-sky);
  color:var(--brand-ink);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
}

/* Header */
.header{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 1px 0 rgba(10,42,67,.06)}
.header-inner{display:flex;align-items:center;gap:14px;max-width:1200px;margin:0 auto;padding:14px 20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--brand-ink);text-decoration:none}
.logo svg{width:34px;height:34px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #e6eefb;padding:10px 12px;border-radius:999px;background:#fff}
.pill svg{width:16px;height:16px;color:var(--brand-blue)}
.cta{background:linear-gradient(135deg,var(--brand-blue),var(--accent));color:#fff;border:none;padding:10px 16px;border-radius:999px;font-weight:700;box-shadow:0 6px 18px rgba(21,122,255,.25)}
.searchbar{flex:1;display:flex;align-items:center;gap:10px;margin:0 16px}
.searchbar input{flex:1;border:1px solid #e5f0ff;background:#fbfdff;border-radius:999px;padding:12px 16px 12px 42px;outline:0;box-shadow:inset 0 1px 0 #fff}
.searchbar .icon{position:relative}
.searchbar .icon svg{position:absolute;left:14px;top:10px;width:20px;height:20px;color:#7aa6e6}

/* Layout */
.wrap{max-width:none;margin:22px 0;display:grid;grid-template-columns:1fr;gap:22px;padding:0}
@media (max-width:1024px){.wrap{grid-template-columns:1fr}}

/* Banner section */
.banner{background:linear-gradient(140deg,#f6fbff 0,#edf6ff 60%,#eaf3ff 100%);border:1px solid #e6eefb;border-radius:0;box-shadow:var(--shadow-1);margin-bottom:16px;padding:16px 40px}
.banner-content{display:flex;align-items:center;gap:24px;flex-wrap:wrap;max-width:1400px;margin:0 auto}
.banner-left{flex:1;min-width:300px}
.banner .badge{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e6eefb;border-radius:999px;padding:6px 10px;font-weight:600;color:#1f3a5b;margin-bottom:12px;font-size:13px}
.banner h1{margin:0 0 8px;font-size:22px;line-height:1.3;color:var(--brand-ink)}
.banner p{margin:0;color:var(--muted);font-size:14px;line-height:1.4}
.banner-right{flex:1;min-width:400px}
.brands{overflow:hidden;position:relative;height:70px}
.brands-container{display:flex;animation:scroll 20s linear infinite;width:fit-content;height:100%}
.brands-container:hover{animation-play-state:paused}
.brand{background:#fff;border:1px solid #e6eefb;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:12px;height:70px;box-shadow:var(--shadow-1);min-width:150px;margin-right:8px}
.brand img{max-width:100%;max-height:45px;filter:grayscale(10%)}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Responsive banner */
@media (max-width:1000px) {
  .banner{padding:12px 20px}
  .banner-content{gap:16px;flex-direction:column;text-align:center}
  .banner-left{min-width:auto}
  .banner-right{min-width:auto}
  .banner h1{font-size:20px;margin-bottom:6px}
  .banner .badge{margin-bottom:8px;font-size:12px;padding:5px 8px}
  .banner p{font-size:13px}
  .brands{height:60px}
  .brand{height:60px;min-width:130px;padding:8px}
  .brand img{max-height:40px}
}

/* Chat surface */
.surface{background:#fff;border:1px solid #e6eefb;border-radius:0;box-shadow:var(--shadow-2);display:flex;flex-direction:column;min-height:560px;max-width:none;margin:0 40px}
.bar{padding:14px 16px;border-bottom:1px solid #eef4ff;display:flex;align-items:center;gap:10px}
.bar .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px #e9f9ef}
.bar .title{font-weight:800}
.suggest{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px dashed #cfe0fb;color:#275a95;background:#f6fbff;padding:6px 10px;border-radius:999px;font-size:12px}
.messages{padding:18px;overflow:auto;flex:1}
.msg{display:flex;gap:12px;margin:10px 0;align-items:flex-start}
.msg.user{flex-direction:row-reverse;justify-content:flex-end}
.msg.assistant{justify-content:flex-start}
.msg .bubble{max-width:min(720px, 88%);padding:12px 14px;border-radius:14px;border:1px solid #eef4ff;background:#fbfdff}
.msg.user .bubble{background:linear-gradient(180deg,#f3f9ff,#eef6ff);border-color:#d8e8ff;margin-right:0;margin-left:auto}
.msg.assistant .bubble{background:#fff;margin-left:0;margin-right:auto}
.msg.assistant .bubble a{color:var(--brand-blue);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color 0.2s}
.msg.assistant .bubble a:hover{border-bottom-color:var(--brand-blue)}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;flex-shrink:0}
.avatar.user{background:var(--brand-blue)}
.avatar.assistant{background:#0aa1ff}
.results{display:grid;grid-template-columns:repeat(auto-fill, minmax(250px,1fr));gap:14px;margin-top:8px}
.card{background:#fff;border:1px solid #e6eefb;border-radius:14px;box-shadow:var(--shadow-1);overflow:hidden;display:flex;flex-direction:column}
.card .pic{height:130px;background:#f5f9ff;display:grid;place-items:center}
.card .pic img{max-height:90px}
.card .body{padding:12px 12px 6px}
.price{font-weight:800;color:var(--brand-ink)}
.meta{font-size:12px;color:var(--muted)}
.card .actions{display:flex;gap:8px;padding:10px 12px 14px}
.btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #e6eefb;border-radius:12px;padding:8px 10px;background:#fff}
.btn.primary{background:linear-gradient(135deg,var(--brand-blue),var(--accent));border:none;color:#fff}

/* Input */
.input{border-top:1px solid #eef4ff;padding:10px;display:flex;gap:8px;align-items:center;background:#fcfeff;border-bottom-left-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl)}
.input .field{flex:1;border:1px solid #e6eefb;border-radius:12px;padding:12px;background:#fff;outline:0;font-size:14px}
.input .field:focus{border-color:var(--brand-blue)}
.send{border:none;background:linear-gradient(135deg,var(--brand-blue),var(--accent));color:#fff;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;transition:transform 0.2s}
.send:hover{transform:translateY(-1px)}
.send:disabled{opacity:0.6;cursor:not-allowed;transform:none}

/* Newsletter */
.newsletter{max-width:none;margin:26px 0 40px;border:1px solid #e6eefb;border-radius:0;padding:20px 40px;background:linear-gradient(180deg,#f3f9ff,#edf6ff);display:flex;align-items:center;gap:14px}
.newsletter-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;width:100%}
.newsletter-left{display:flex;align-items:center;gap:14px;flex:1}
.newsletter-right{flex-shrink:0}
.newsletter h3{margin:0;font-size:18px;color:var(--brand-ink)}
.newsletter input{flex:1;border:1px solid #d9e8ff;border-radius:999px;padding:10px 14px;outline:0;background:#fff;min-width:200px}
.newsletter button{border:none;border-radius:999px;padding:10px 16px;background:linear-gradient(135deg,var(--brand-blue),var(--accent));color:#fff;font-weight:800;white-space:nowrap}
.policies{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--muted);align-items:center}
.policies span{cursor:pointer;transition:color 0.2s}
.policies span:hover{color:var(--brand-ink)}

/* Responsive newsletter */
@media (max-width:768px) {
  .newsletter{padding:16px 20px}
  .newsletter-content{flex-direction:column;gap:20px;text-align:center}
  .newsletter-left{flex-direction:column;gap:12px;width:100%}
  .newsletter input{min-width:auto;width:100%}
  .policies{justify-content:center;gap:12px}
}

/* Loading state */
.loading{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid var(--brand-blue);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Responsive design */
@media (max-width:768px) {
  .surface{margin:0 20px}
  .header-inner{flex-direction:column;gap:16px}
  .searchbar{margin:0}
  .top-actions{justify-content:center}
  .banner{padding:12px 20px}
  .banner-content{flex-direction:column;text-align:center}
} 

/* Product Card Styles */
.product-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
    background: #fafafa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: inherit;
}

.product-card h3 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.product-card p {
    margin: 0 0 12px 0;
    color: #666;
    line-height: 1.4;
}

.product-card .product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.product-card .price {
    font-weight: bold;
    color: #2c5aa0;
    font-size: 16px;
}

.product-card .view-product-btn {
    background: #2c5aa0;
    color: white !important;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.product-card .view-product-btn:hover {
    background: #1e4a8a;
    color: white !important;
    text-decoration: none;
}

/* Ensure product cards render properly in chat bubbles */
.msg.assistant .bubble .product-card {
    margin: 8px 0;
    max-width: 100%;
}

.msg.assistant .bubble .product-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
}

.msg.assistant .bubble .product-card p {
    font-size: 14px;
    margin-bottom: 10px;
}

.msg.assistant .bubble .product-card .product-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.msg.assistant .bubble .product-card .view-product-btn {
    align-self: flex-start;
    font-size: 13px;
    padding: 6px 12px;
}