/* ====== Basic Page ====== */
:root{
  --cb-bg:#ffffff;
  --cb-text:#1f2937;
  --cb-muted:#6b7280;
  --cb-primary:#2563eb;
  --cb-surface:#f8fafc;
  --cb-border:#e5e7eb;
  --cb-user:#e0f2fe;
  --cb-bot:#eef2ff;
  --shadow: 0 10px 25px rgba(0,0,0,0.08);
  --radius: 16px;
  --radius-lg: 20px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--cb-text);
  background:linear-gradient(180deg,#f9fafb,#f3f4f6);
  min-height:100vh;
}
.page{max-width:920px;margin:0 auto;padding:48px 20px}
.hero h1{font-size:clamp(28px,3.2vw,40px);margin:0 0 8px}
.hero p{color:var(--cb-muted);margin:0 0 24px}
.content{background:var(--cb-bg);border:1px solid var(--cb-border);padding:24px;border-radius:var(--radius);box-shadow:var(--shadow)}

/* ====== Chatbot Widget ====== */
.cb-root{position:fixed;inset:auto 20px 20px auto;z-index:9999}
.cb-launcher{
  border:0;background:#111827; color:#fff;
  width:64px;height:64px;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.cb-icon{width:40px;height:40px;pointer-events:none}

.cb-window{
  position:fixed;right:20px;bottom:100px;width:min(380px,90vw);height:520px;
  background:var(--cb-bg);border:1px solid var(--cb-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);display:none;flex-direction:column;overflow:hidden;
}
.cb-window.open{display:flex}
.cb-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--cb-border);background:var(--cb-surface)
}
.cb-brand{display:flex;align-items:center;gap:10px}
.cb-brand-icon{width:28px;height:28px}
.cb-titles strong{display:block;font-size:14px}
.cb-titles span{display:block;color:var(--cb-muted);font-size:12px}
.cb-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;padding:6px 8px;color:#6b7280}

.cb-messages{padding:16px;flex:1;overflow:auto;background:linear-gradient(180deg,#fafafa,#fff)}
.cb-row{display:flex;margin-bottom:12px;gap:10px;align-items:flex-end}
.cb-row.bot{justify-content:flex-start}
.cb-row.user{justify-content:flex-end}

.cb-bubble{
  max-width:78%;
  padding:10px 12px;border-radius:14px;line-height:1.4;
  border:1px solid var(--cb-border); background:var(--cb-bot);
}
.cb-row.user .cb-bubble{background:var(--cb-user)}
.cb-time{display:block;color:var(--cb-muted);font-size:11px;margin-top:4px}

.cb-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--cb-border);background:var(--cb-bg)}
.cb-input input{
  flex:1;padding:12px 14px;border-radius:12px;border:1px solid var(--cb-border);
  outline:none;font-size:14px;background:#fff;
}
.cb-send{padding:12px 14px;border-radius:12px;border:0;background:var(--cb-primary);color:white;cursor:pointer}
.cb-send:active{transform:translateY(1px)}
a.cb-link{color:var(--cb-primary);text-decoration:none}
a.cb-link:hover{text-decoration:underline}