:root{
    --hccb-black:#0a0a0a;
    --hccb-orange:#ff6600;
    --hccb-red:#ff3b30;
    --hccb-cream:#f5f1e8;
    --hccb-border:rgba(255,255,255,.08);
    --hccb-shadow:0 16px 40px rgba(0,0,0,.38);
}
#hccb-chatbot-root{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:999999;
    font-family:Arial, Helvetica, sans-serif;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    pointer-events:none;
}
#hccb-chatbot-root > *{
    pointer-events:auto;
}
.hccb-teaser{
    border:none;
    cursor:pointer;
    background:transparent;
    padding:0;
    margin:0;
}
.hccb-wheel-teaser{
    width:68px;
    height:68px;
    border-radius:50%;
    position:relative;
    max-width:none;
    box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.hccb-wheel-outer{
    position:relative;
    width:68px;
    height:68px;
    display:block;
    border-radius:50%;
    transition:transform .28s ease;
}
.hccb-wheel-teaser:hover .hccb-wheel-outer{
    transform:rotate(18deg);
}
.hccb-wheel-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
      radial-gradient(circle, rgba(0,0,0,0) 38%, rgba(255,102,0,.92) 39%, rgba(255,102,0,.92) 44%, rgba(0,0,0,0) 45%),
      radial-gradient(circle at 35% 30%, #2a2a2a 0%, #131313 58%, #050505 100%);
    border:2px solid rgba(255,102,0,.65);
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,.03),
      inset 0 0 18px rgba(0,0,0,.5);
}
.hccb-wheel-spoke{
    position:absolute;
    left:50%;
    top:50%;
    width:3px;
    height:44px;
    margin-left:-1.5px;
    margin-top:-22px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(120,120,120,.12));
    transform-origin:center center;
}
.hccb-wheel-spoke-1{ transform:rotate(0deg); }
.hccb-wheel-spoke-2{ transform:rotate(45deg); }
.hccb-wheel-spoke-3{ transform:rotate(90deg); }
.hccb-wheel-spoke-4{ transform:rotate(135deg); }
.hccb-wheel-center{
    position:absolute;
    left:50%;
    top:50%;
    width:28px;
    height:28px;
    margin-left:-14px;
    margin-top:-14px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#ff8a2a,#ff6600);
    color:#111;
    font-size:10px;
    font-weight:900;
    letter-spacing:.06em;
    box-shadow:0 0 0 3px #151515, 0 4px 10px rgba(0,0,0,.35);
}
.hccb-panel{
    display:none;
    width:370px;
    height:560px;
    border-radius:20px;
    overflow:hidden;
    background:
      linear-gradient(180deg, rgba(255,102,0,.10), transparent 16%),
      linear-gradient(180deg, #0d0d0d, #060606);
    color:var(--hccb-cream);
    box-shadow:0 24px 64px rgba(0,0,0,.48);
    border:1px solid rgba(255,102,0,.28);
    flex-direction:column;
}
.hccb-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    background:
      linear-gradient(90deg, rgba(255,102,0,.18), rgba(255,102,0,.02)),
      repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, rgba(255,255,255,0) 10px 20px);
    border-bottom:1px solid var(--hccb-border);
}
.hccb-title{ font-weight:800; letter-spacing:.02em; font-size:16px; }
.hccb-subtitle{ margin-top:2px; color:#d2c8ba; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.hccb-close{
    background:transparent;
    color:var(--hccb-cream);
    border:none;
    font-size:28px;
    line-height:1;
    cursor:pointer;
}
.hccb-messages{
    flex:1;
    overflow:auto;
    padding:16px 16px 10px;
    display:flex;
    flex-direction:column;
    gap:12px;
    background:
      radial-gradient(circle at top right, rgba(255,102,0,.08), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.hccb-message{
    max-width:84%;
    padding:12px 14px;
    border-radius:16px;
    line-height:1.45;
    font-size:14px;
    word-wrap:break-word;
}
.hccb-message a{ color:inherit; text-decoration:underline; }
.hccb-bot{ align-self:flex-start; background:#171717; border:1px solid rgba(255,255,255,.06); }
.hccb-user{ align-self:flex-end; background:linear-gradient(180deg,#ff7a1a,#ff6600); color:#111; font-weight:600; }
.hccb-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.hccb-action-btn{
    display:inline-flex; align-items:center; gap:6px; padding:9px 12px; border-radius:999px; text-decoration:none;
    font-size:13px; font-weight:700; border:1px solid rgba(255,102,0,.35); background:linear-gradient(180deg,#ff7a1a,#ff6600); color:#111 !important;
}
.hccb-feedback{ display:flex; gap:8px; margin-top:10px; align-items:center; flex-wrap:wrap; }
.hccb-feedback-label{ font-size:12px; color:#c9c0b5; }
.hccb-feedback-btn{
    border:none; border-radius:999px; background:#1b1b1b; color:var(--hccb-cream);
    border:1px solid rgba(255,255,255,.08); padding:7px 10px; font-size:12px; cursor:pointer;
}
.hccb-feedback-btn:hover{ border-color:rgba(255,102,0,.45); }
.hccb-feedback-btn.is-voted{ background:#2a2119; border-color:rgba(255,102,0,.7); }
.hccb-suggestions{ display:flex; gap:8px; flex-wrap:wrap; padding:0 14px 10px; }
.hccb-suggestion{
    border:none; border-radius:999px; background:#1b1b1b; color:var(--hccb-cream);
    border:1px solid rgba(255,255,255,.08); padding:8px 10px; font-size:12px; cursor:pointer;
}
.hccb-suggestion:hover{ border-color:rgba(255,102,0,.45); }
.hccb-typing{ display:flex; gap:6px; align-items:center; padding:0 16px 10px; }
.hccb-typing span{
    width:8px; height:8px; border-radius:50%; background:#ff9d52; display:inline-block; animation:hccbBlink 1.2s infinite ease-in-out;
}
.hccb-typing span:nth-child(2){animation-delay:.15s}
.hccb-typing span:nth-child(3){animation-delay:.3s}
@keyframes hccbBlink{
    0%,80%,100%{opacity:.25;transform:translateY(0)}
    40%{opacity:1;transform:translateY(-2px)}
}
.hccb-form{
    display:flex; gap:10px; padding:14px; border-top:1px solid var(--hccb-border); background:#0d0d0d;
}
.hccb-form input{
    flex:1; min-width:0; border-radius:12px; border:1px solid rgba(255,255,255,.09); background:#1a1a1a; color:var(--hccb-cream); padding:12px 14px; outline:none;
}
.hccb-form input:focus{ border-color:rgba(255,102,0,.7); box-shadow:0 0 0 3px rgba(255,102,0,.14); }
.hccb-form button{ border:none; border-radius:12px; background:var(--hccb-orange); color:#111; font-weight:700; padding:0 16px; cursor:pointer; }
.hccb-shortcode-note{ padding:12px; border:1px dashed #ccc; }

@media (max-width:640px){
    #hccb-chatbot-root{
        right:12px;
        bottom:12px;
    }
    .hccb-wheel-teaser,
    .hccb-wheel-outer{
        width:62px;
        height:62px;
    }
    .hccb-panel{
        width:min(92vw,370px);
        height:68vh;
    }
}


/* V7.1 send button visibility fix */
.hccb-form{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
}
.hccb-form input{
    flex:1 1 auto !important;
    min-width:0 !important;
}
.hccb-form button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    min-width:96px !important;
    height:44px !important;
    padding:0 16px !important;
    white-space:nowrap !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
    background:#ff6600 !important;
    color:#111 !important;
    border:none !important;
    border-radius:12px !important;
    font-weight:700 !important;
    line-height:1 !important;
}
@media (max-width:640px){
    .hccb-form{
        gap:8px !important;
    }
    .hccb-form button{
        min-width:82px !important;
        font-size:14px !important;
        padding:0 12px !important;
    }
}