.hb-mcp *{box-sizing:border-box;margin:0;padding:0}
  .hb-mcp{
    --cl-orange:#E08A6B;       /* star / typing dots / caret */
    --cl-cream:#262624;        /* canvas */
    --cl-panel:#30302E;        /* input / raised surfaces */
    --cl-ink:#ECEAE3;
    --cl-muted:#A8A59C;
    --cl-line:#3C3B38;
    --cl-user:#3A3937;         /* user bubble */
    --cl-ok:#5BBE8C;
    --cl-fill:#4733FF;         /* send button (visible on dark) */
    --cl-fill-d:#5C4BFF;
    --cl-on-fill:#FFFFFF;
    --cl-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

    font-family:var(--cl-sans);
    color:var(--cl-ink);
    width:100%;
    max-width:800px;
    margin:0 auto;
    background:var(--cl-cream);
    border:1px solid var(--cl-line);
    border-radius:22px;
    box-shadow:0 24px 60px -28px rgba(0,0,0,.6);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:640px;
  }

  /* Header */
  .hb-mcp__head{display:flex;align-items:center;gap:11px;padding:14px 16px;background:var(--cl-cream);border-bottom:1px solid var(--cl-line)}
  .hb-star{flex:0 0 auto;width:26px;height:26px;color:var(--cl-orange)}
  .hb-mcp__titles{display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .hb-mcp__title{font-family:var(--cl-sans);font-weight:600;font-size:15px;letter-spacing:0;color:var(--cl-ink)}
  .hb-conn{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--cl-muted);margin-top:1px}
  .hb-conn b{color:var(--cl-ink);font-weight:600}
  .hb-conn .dot{width:7px;height:7px;border-radius:50%;background:var(--cl-ok);box-shadow:0 0 0 0 rgba(91,190,140,.5);animation:hb-pulse 2.4s infinite}
  @keyframes hb-pulse{0%{box-shadow:0 0 0 0 rgba(91,190,140,.45)}70%{box-shadow:0 0 0 6px rgba(91,190,140,0)}100%{box-shadow:0 0 0 0 rgba(91,190,140,0)}}
  .hb-mcp__actions{margin-left:auto;display:flex;gap:8px}
  .hb-mcp__replay{border:0;background:#5253F9;color:#fff;cursor:pointer;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;transition:.2s}
  .hb-mcp__replay:hover{background:#6A6BFF}
  .hb-mcp__replay svg{width:16px;height:16px}

  /* Conversation */
  .hb-mcp__convo{flex:1;overflow-y:auto;background:var(--cl-cream);padding:18px 16px 10px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}
  .hb-mcp__convo::-webkit-scrollbar{width:8px}
  .hb-mcp__convo::-webkit-scrollbar-thumb{background:#45443f;border-radius:8px}

  .hb-row--user{display:flex;justify-content:flex-end}
  .hb-bubble--user{background:var(--cl-user);color:var(--cl-ink);padding:11px 14px;border-radius:16px;border-bottom-right-radius:5px;font-size:14px;line-height:1.5;max-width:82%;word-wrap:break-word;animation:hb-pop .28s ease both}
  @keyframes hb-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  .hb-row--mcp{display:flex;gap:10px;align-items:flex-start}
  .hb-mini{flex:0 0 auto;width:26px;height:26px;color:var(--cl-orange);margin-top:1px}
  .hb-answer{font-size:14px;line-height:1.6;max-width:92%;color:var(--cl-ink)}
  .hb-answer .seg{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
  .hb-answer .seg.show{opacity:1;transform:none}
  .hb-answer .seg + .seg{margin-top:9px}
  .hb-answer strong{font-weight:700}
  .hb-answer ul,.hb-answer ol{margin:2px 0 0 2px;padding-left:20px}
  .hb-answer li{margin:4px 0}
  .hb-answer .lead{color:var(--cl-ink)}
  .hb-answer .muted{color:var(--cl-muted)}

  /* typing dots */
  .hb-typing{display:flex;gap:4px;padding:5px 0}
  .hb-typing span{width:7px;height:7px;border-radius:50%;background:var(--cl-orange);opacity:.55;animation:hb-bounce 1.2s infinite}
  .hb-typing span:nth-child(2){animation-delay:.18s}
  .hb-typing span:nth-child(3){animation-delay:.36s}
  @keyframes hb-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

  /* Composer */
  .hb-mcp__composer{display:flex;align-items:center;gap:10px;padding:12px 14px 14px;background:var(--cl-cream)}
  .hb-mcp__field{flex:1;min-height:46px;border:1px solid var(--cl-line);border-radius:16px;background:var(--cl-panel);display:flex;align-items:center;padding:0 16px;font-size:14px;color:var(--cl-ink);overflow:hidden}
  .hb-mcp__field .ph{color:#8C897F}
  .hb-caret{display:inline-block;width:1.5px;height:17px;background:var(--cl-orange);margin-left:1px;animation:hb-blink 1s steps(1) infinite;vertical-align:middle}
  @keyframes hb-blink{50%{opacity:0}}
  .hb-send{width:40px;height:40px;border-radius:50%;border:0;flex:0 0 auto;cursor:default;background:var(--cl-fill);color:var(--cl-on-fill);display:grid;place-items:center;transition:transform .12s ease, opacity .2s ease, background .2s ease;opacity:.55}
  .hb-send.armed{opacity:1}
  .hb-send.armed:hover{background:var(--cl-fill-d)}
  .hb-send.fire{transform:scale(.85)}
  .hb-send svg{width:17px;height:17px}

  @media (prefers-reduced-motion: reduce){
    .hb-conn .dot{animation:none}
    .hb-bubble--user{animation:none}
  }