#carla-widget, #carla-widget *{ box-sizing:border-box; margin:0; padding:0; }
  #carla-widget{
    --carla-primary:#1656d1;
    --carla-primary-dark:#0d3fa0;
    --carla-primary-light:#3b7bf0;
    --carla-bg-soft:#f3f6fc;
    --carla-text:#152238;
    --carla-text-soft:#5c6b85;
    --carla-border:#e2e8f5;
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:2147483000;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.5;
    text-align:left;
    direction:ltr;
  }
  #carla-widget button{
    font-family:inherit;
    text-transform:none;
    letter-spacing:normal;
    box-shadow:none;
    outline:none;
  }

  /* ---------- Burbuja flotante ---------- */
  #carla-fab{
    width:60px; height:60px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--carla-primary-light),var(--carla-primary-dark));
    box-shadow:0 8px 24px rgba(22,86,209,.40), 0 2px 6px rgba(0,0,0,.15);
    border:none;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:transform .2s ease, box-shadow .2s ease;
    position:relative;
    padding:0;
  }
  #carla-fab:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 12px 28px rgba(22,86,209,.52); }
  #carla-fab svg{ width:26px; height:26px; display:block; }
  #carla-fab .carla-dot{
    position:absolute; top:2px; right:2px;
    width:12px; height:12px;
    border-radius:50%;
    background:#22c55e;
    border:2px solid #fff;
  }
  #carla-widget.carla-open #carla-fab .carla-icon-chat{ display:none; }
  #carla-widget:not(.carla-open) #carla-fab .carla-icon-close{ display:none; }

  /* ---------- Ventana de chat ---------- */
  #carla-panel{
    position:absolute;
    bottom:76px; right:0;
    width:370px;
    max-width:calc(100vw - 32px);
    height:560px;
    max-height:calc(100vh - 140px);
    background:#fff;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(15,30,60,.25), 0 4px 16px rgba(15,30,60,.12);
    display:none;
    flex-direction:column;
    overflow:hidden;
    opacity:0;
    transform:translateY(12px) scale(.98);
    transition:opacity .18s ease, transform .18s ease;
  }
  #carla-widget.carla-open #carla-panel{ display:flex; opacity:1; transform:none; }

  #carla-header{
    background:linear-gradient(120deg,var(--carla-primary-dark),var(--carla-primary));
    color:#fff;
    padding:16px 18px;
    display:flex; align-items:center; gap:12px;
    flex-shrink:0;
  }
  #carla-header .carla-avatar{
    width:38px; height:38px;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  #carla-header .carla-avatar svg{ width:20px; height:20px; display:block; }
  #carla-header .carla-titles{ flex:1; min-width:0; }
  #carla-header .carla-title{ font-weight:600; font-size:15px; line-height:1.2; color:#fff; }
  #carla-header .carla-subtitle{
    font-size:12px; opacity:.88; margin-top:2px;
    display:flex; align-items:center; gap:5px; color:#fff;
  }
  #carla-header .carla-status-dot{
    width:7px; height:7px; border-radius:50%;
    background:#4ade80; display:inline-block; flex-shrink:0;
  }
  #carla-close{
    background:rgba(255,255,255,.14);
    border:none; color:#fff;
    width:30px; height:30px;
    border-radius:8px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease;
    flex-shrink:0; padding:0;
  }
  #carla-close:hover{ background:rgba(255,255,255,.26); }
  #carla-close svg{ width:15px; height:15px; display:block; }

  /* ---------- Mensajes ---------- */
  #carla-chat-box{
    flex:1;
    overflow-y:auto;
    padding:18px 16px;
    background:var(--carla-bg-soft);
    display:flex; flex-direction:column; gap:12px;
  }
  #carla-chat-box::-webkit-scrollbar{ width:6px; }
  #carla-chat-box::-webkit-scrollbar-thumb{ background:#c7d3ea; border-radius:10px; }

  #carla-widget .carla-msg{
    max-width:84%;
    padding:10px 13px;
    border-radius:14px;
    font-size:14px; line-height:1.5;
    word-wrap:break-word;
    overflow-wrap:anywhere;
    box-shadow:0 1px 2px rgba(15,30,60,.06);
    animation:carla-in .22s ease both;
  }
  @keyframes carla-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  #carla-widget .carla-lbl{
    font-size:10.5px; font-weight:700;
    letter-spacing:.03em; text-transform:uppercase;
    opacity:.55; margin-bottom:3px;
  }
  #carla-widget .carla-msg.assistant{
    align-self:flex-start;
    background:#fff; color:var(--carla-text);
    border:1px solid var(--carla-border);
    border-bottom-left-radius:4px;
  }
  #carla-widget .carla-msg.user{
    align-self:flex-end;
    background:linear-gradient(135deg,var(--carla-primary-light),var(--carla-primary));
    color:#fff;
    border-bottom-right-radius:4px;
  }
  #carla-widget .carla-msg.user .carla-lbl{ opacity:.78; }
  #carla-widget .carla-msg a{ color:inherit; text-decoration:underline; }
  #carla-widget .carla-msg.assistant a{ color:var(--carla-primary); }

  #carla-welcome{
    align-self:flex-start;
    max-width:88%;
    background:#fff;
    border:1px solid var(--carla-border);
    border-radius:14px; border-bottom-left-radius:4px;
    padding:12px 14px;
    font-size:13.5px; color:var(--carla-text-soft); line-height:1.55;
  }
  #carla-welcome strong{ color:var(--carla-text); }

  /* Indicador "escribiendo" */
  #carla-widget .carla-typing{ display:flex; gap:4px; align-items:center; padding:3px 0; }
  #carla-widget .carla-typing span{
    width:7px; height:7px; border-radius:50%;
    background:#a9bad6; display:block;
    animation:carla-bounce 1.2s infinite ease-in-out;
  }
  #carla-widget .carla-typing span:nth-child(2){ animation-delay:.18s; }
  #carla-widget .carla-typing span:nth-child(3){ animation-delay:.36s; }
  @keyframes carla-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

  /* ---------- Input ---------- */
  #carla-input-row{
    display:flex; align-items:flex-end; gap:8px;
    padding:12px; background:#fff;
    border-top:1px solid var(--carla-border);
    flex-shrink:0;
  }
  #carla-chat-input{
    flex:1;
    resize:none;
    border:1.5px solid var(--carla-border);
    border-radius:12px;
    padding:10px 13px;
    font-size:14px; font-family:inherit; line-height:1.45;
    color:var(--carla-text);
    background:#fff;
    outline:none;
    max-height:100px;
    min-height:42px;
    transition:border-color .15s ease;
    box-shadow:none;
  }
  #carla-chat-input:focus{ border-color:var(--carla-primary-light); }
  #carla-send-btn{
    background:linear-gradient(135deg,var(--carla-primary-light),var(--carla-primary-dark));
    border:none; color:#fff;
    width:42px; height:42px;
    border-radius:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; padding:0;
    transition:opacity .15s ease, transform .1s ease;
  }
  #carla-send-btn:hover:not(:disabled){ transform:translateY(-1px); }
  #carla-send-btn:disabled{ opacity:.5; cursor:default; transform:none; }
  #carla-send-btn svg{ width:18px; height:18px; display:block; }

  #carla-footer-note{
    text-align:center; font-size:10.5px;
    color:#9aa7bf; padding:0 0 10px;
    background:#fff; flex-shrink:0;
  }

  @media (max-width:480px){
    #carla-widget{ right:14px; bottom:14px; }
    #carla-panel{
      position:fixed;
      left:12px; right:12px; width:auto;
      max-width:none;
      bottom:88px;
      height:auto; top:12px;
      max-height:none;
    }
  }