:root{
  --bg:#f7fafc; --text:#0f172a;
  --wrap: min(1100px, 96vw);
  --gap: clamp(10px, 2vw, 22px);
  --font: clamp(15px, 1.2vw + 11px, 18px);
  --input-h: clamp(46px, 5.5svh, 58px);
  --rb-btn: clamp(52px, 10vw, 64px);
  --rb-gap: clamp(14px, 3.2vw, 24px);
  --rb-pad-v: clamp(8px, 1.2vw, 12px);
  --rb-pad-h: clamp(16px, 2vw, 22px);
}

*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  background:var(--bg); color:var(--text); font-size:var(--font);
  display:flex; flex-direction:column;
}

.header{ width: var(--wrap); margin: 18px auto 0; padding-inline: clamp(6px, 1.2vw, 10px); display:flex; align-items:center; gap:10px }
.logo{ height: clamp(20px, 2.8vw, 28px) }
.brand{ font-weight:800 }

.container{ flex:1; width: var(--wrap); margin: 10px auto 0; padding: clamp(8px, 1.2vw, 12px); overflow-y:auto; }

.hero{ display:grid; place-items:center; margin: clamp(8px, 2vh, 16px) 0 clamp(10px, 3vh, 22px) }
.avatar{ width: clamp(72px, 10vw, 108px); aspect-ratio:1/1; border-radius:999px; background:#e6f6f8; display:grid; place-items:center; box-shadow: 0 8px 22px rgba(0,0,0,.06) inset, 0 4px 10px rgba(0,0,0,.05) }
.avatar img{ width:66%; height:66%; object-fit:contain }

.chat{ display:flex; flex-direction:column; gap: var(--gap); padding-bottom: 12px; }
.bubble{
  max-width: min(680px, 86%);
  padding: clamp(10px, 1.4vw, 14px) clamp(12px, 1.8vw, 18px);
  border-radius:14px; background:#f1f5f9; border:1px solid #e5e7eb;
  word-break: break-word; overflow-wrap:anywhere;
}
.bubble.me{ margin-left:auto; background:#e8fbff; border-color:#c0eef4 }

.footer{
  width:100%; background:#f7fafc; border-top:1px solid #e5e7eb;
  padding: clamp(10px, 2vh, 14px) 0;
}
.footer-inner{
  width:var(--wrap); margin:0 auto;
  display:flex; flex-direction:column; gap: clamp(12px, 2vh, 16px); align-items:center;
}

.quick-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.quick-btn{
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.quick-btn:hover{
  background: #f3f4f6;
  border-color: #9ca3af;
}

.composer{ display:flex; align-items:center; gap:12px; width:100%; max-width:var(--wrap); }
.field{
  flex:1; background:#fff; border:2px solid #7cc4d1; height: var(--input-h);
  border-radius:999px; padding:0 16px; display:flex; align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.field input{ flex:1; border:0; outline:0; font-size:inherit; background:transparent }
.send{
  width: clamp(38px, 6.5svh, 46px); height: clamp(38px, 6.5svh, 46px);
  border-radius:999px; border:0; background:#a0dbe6;
  display:grid; place-items:center; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.send:hover{ transform: translateY(-2px); background:#91d3e0 }
.send svg{ width:52%; height:52% }

.rotbar{
  background: rgba(255,255,255,.92);
  border:1px solid #e6ebf0; border-radius:16px;
  padding: var(--rb-pad-v) var(--rb-pad-h);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
}
.rot-inner{ display:flex; align-items:center; gap: var(--rb-gap); justify-content:center; }
.rb-btn{
  width: var(--rb-btn); height: var(--rb-btn);
  border-radius:999px; border:0; background:#e5e7eb;
  display:grid; place-items:center; cursor:pointer;
  box-shadow: inset 0 0 0 3px #d1d5db;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.rb-btn:hover{ transform: translateY(-2px); box-shadow: inset 0 0 0 3px #cbd5e1, 0 8px 18px rgba(0,0,0,.10) }
.rb-btn:focus-visible{ outline:3px solid #93c5fd; outline-offset:2px }
.rb-btn img{ width:62%; height:62%; object-fit:contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.rb-btn.accent{ background:#cfe8ea; box-shadow: inset 0 0 0 6px #9fc9cc }