/*!
 * ChatJox 0.0.7 — widget module styles.
 *
 * The panes are overlays inside the existing panel, so the 0.0.6 chat layout,
 * mobile full screen behaviour and iOS safe area handling are untouched.
 */

#chatjox-root .chatjox-panes{
    position:absolute;
    inset:0;
    top:var(--chatjox-pane-top,64px);
    display:none;
    z-index:6;
    border-radius:0 0 var(--chatjox-radius) var(--chatjox-radius);
    overflow:hidden;
}
#chatjox-root .chatjox-panes.is-active{display:block}
#chatjox-root .chatjox-pane[hidden]{display:none!important}
#chatjox-root .chatjox-pane{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    background:var(--chatjox-surface);
    color:var(--chatjox-text);
    font-family:var(--chatjox-font-family);
    animation:chatjox-pane-in .18s ease;
}
@keyframes chatjox-pane-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

#chatjox-root .chatjox-pane-scroll{
    flex:1;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:16px 15px;
}
#chatjox-root .chatjox-pane-head{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 12px;
    border-bottom:1px solid var(--chatjox-border);
    background:var(--chatjox-surface);
}
#chatjox-root .chatjox-pane-back{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border:0;
    background:transparent;
    color:var(--chatjox-muted);
    font:inherit;
    font-size:12.5px;
    cursor:pointer;
    padding:6px 4px;
    border-radius:9px;
}
#chatjox-root .chatjox-pane-back:hover{color:var(--chatjox-primary)}
#chatjox-root .chatjox-pane-back svg{width:16px;height:16px}
#chatjox-root .chatjox-pane-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    padding:11px 14px;
    border-top:1px solid var(--chatjox-border);
    background:var(--chatjox-body-bg);
    font-size:var(--chatjox-status-font-size);
    color:var(--chatjox-muted);
    padding-bottom:calc(11px + env(safe-area-inset-bottom,0px));
}
#chatjox-root .chatjox-pane-cta{
    border:0;
    border-radius:calc(var(--chatjox-input-radius) - 2px);
    background:var(--chatjox-send-bg);
    color:var(--chatjox-send-icon);
    font:inherit;
    font-weight:700;
    font-size:12.5px;
    padding:9px 16px;
    cursor:pointer;
    transition:transform .14s ease,filter .14s ease;
}
#chatjox-root .chatjox-pane-cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
#chatjox-root .chatjox-pane-cta.is-ghost{
    background:transparent;
    color:var(--chatjox-primary);
    border:1px solid var(--chatjox-border);
}

/* ----------------------------------------------------------------- rating */

#chatjox-root .chatjox-rating-box{
    text-align:center;
    padding:6px 4px 2px;
}
#chatjox-root .chatjox-rating-badge{
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    margin:0 auto 13px;
    border-radius:50%;
    color:#f59e0b;
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb,#f59e0b 20%,transparent), transparent 70%),
        color-mix(in srgb,#f59e0b 12%,var(--chatjox-surface));
    box-shadow:0 6px 18px color-mix(in srgb,#f59e0b 22%,transparent);
}
#chatjox-root .chatjox-rating-badge svg{width:27px;height:27px}
#chatjox-root .chatjox-rating-box h3{
    margin:0 0 7px;
    font-size:calc(var(--chatjox-title-font-size) + 1px);
    font-weight:800;
    line-height:1.75;
    color:var(--chatjox-text);
}
#chatjox-root .chatjox-rating-box p{
    margin:0 0 18px;
    color:var(--chatjox-muted);
    font-size:var(--chatjox-status-font-size);
    line-height:2;
}

#chatjox-root .chatjox-rating-stars{
    display:flex;
    justify-content:center;
    gap:6px;
    direction:ltr;
    margin-bottom:9px;
}
#chatjox-root .chatjox-rating-star{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    padding:0;
    border:0;
    border-radius:14px;
    background:transparent;
    color:color-mix(in srgb,var(--chatjox-muted) 45%,transparent);
    cursor:pointer;
    transition:transform .16s cubic-bezier(.34,1.4,.64,1),color .16s ease,background .16s ease;
    -webkit-tap-highlight-color:transparent;
}
#chatjox-root .chatjox-rating-star svg{width:30px;height:30px;pointer-events:none}
#chatjox-root .chatjox-rating-star:hover{background:color-mix(in srgb,#f59e0b 10%,transparent)}
#chatjox-root .chatjox-rating-star:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px color-mix(in srgb,#f59e0b 38%,transparent);
}
/* Hovering a star previews the whole run up to it, like a real rating control. */
#chatjox-root .chatjox-rating-stars:hover .chatjox-rating-star{color:#f59e0b}
#chatjox-root .chatjox-rating-stars .chatjox-rating-star:hover ~ .chatjox-rating-star{
    color:color-mix(in srgb,var(--chatjox-muted) 45%,transparent);
}
#chatjox-root .chatjox-rating-star.is-on{color:#f59e0b}
#chatjox-root .chatjox-rating-star.is-on svg path{fill:#f59e0b;stroke:#f59e0b}
#chatjox-root .chatjox-rating-star.is-on{transform:scale(1.06)}
#chatjox-root .chatjox-rating-star:active{transform:scale(.93)}
#chatjox-root .chatjox-rating-star:disabled{cursor:default;transform:none}
#chatjox-root .chatjox-rating-star:disabled:hover{background:transparent}

#chatjox-root .chatjox-rating-hint{
    min-height:18px;
    margin-bottom:14px;
    font-size:var(--chatjox-status-font-size);
    font-weight:700;
    color:var(--chatjox-muted);
    transition:color .16s ease;
}
#chatjox-root .chatjox-rating-hint.is-picked{color:#b45309}

#chatjox-root .chatjox-rating-field{display:block;margin:0 0 12px}
#chatjox-root .chatjox-rating-comment{
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--chatjox-border);
    border-radius:var(--chatjox-input-radius);
    background:var(--chatjox-input-bg);
    color:var(--chatjox-input-text);
    font:inherit;
    font-size:var(--chatjox-message-font-size);
    line-height:2;
    padding:12px 14px;
    resize:none;
    outline:0;
    text-align:right;
    transition:border-color .16s ease,box-shadow .16s ease;
}
#chatjox-root .chatjox-rating-comment::placeholder{color:var(--chatjox-placeholder)}
#chatjox-root .chatjox-rating-comment:focus{
    border-color:var(--chatjox-primary);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--chatjox-primary) 16%,transparent);
}
#chatjox-root .chatjox-rating-comment:disabled{opacity:.7}

#chatjox-root .chatjox-rating-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    border:0;
    border-radius:var(--chatjox-input-radius);
    background:var(--chatjox-send-bg);
    color:var(--chatjox-send-icon);
    font:inherit;
    font-weight:800;
    font-size:var(--chatjox-message-font-size);
    padding:13px;
    cursor:pointer;
    box-shadow:0 6px 16px color-mix(in srgb,var(--chatjox-send-bg) 26%,transparent);
    transition:transform .16s ease,filter .16s ease,opacity .16s ease,box-shadow .16s ease;
}
#chatjox-root .chatjox-rating-submit svg{width:17px;height:17px}
#chatjox-root .chatjox-rating-submit:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06)}
#chatjox-root .chatjox-rating-submit:active:not(:disabled){transform:translateY(0)}
#chatjox-root .chatjox-rating-submit:disabled{
    opacity:.45;
    cursor:not-allowed;
    box-shadow:none;
}

#chatjox-root .chatjox-rating-done{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:13px;
    padding:13px 14px;
    border-radius:var(--chatjox-input-radius);
    background:color-mix(in srgb,var(--chatjox-online) 13%,transparent);
    border:1px solid color-mix(in srgb,var(--chatjox-online) 34%,transparent);
    color:var(--chatjox-text);
    font-size:var(--chatjox-status-font-size);
    font-weight:700;
    line-height:1.9;
    animation:chatjox-rating-pop .26s cubic-bezier(.34,1.4,.64,1);
}
#chatjox-root .chatjox-rating-done svg{
    flex:none;
    width:19px;
    height:19px;
    color:var(--chatjox-online);
}
#chatjox-root .chatjox-rating-done[hidden]{display:none!important}
@keyframes chatjox-rating-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* -------------------------------------------- multi avatar + channel icons */

#chatjox-root .chatjox-avatar.has-stack{position:relative}
#chatjox-root .chatjox-avatar.has-stack .chatjox-avatar-extra{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
    opacity:0;
    animation:chatjox-avatar-cycle 12s linear infinite;
}
#chatjox-root .chatjox-avatar.has-stack .chatjox-avatar-extra:nth-of-type(2){animation-delay:4s}
#chatjox-root .chatjox-avatar.has-stack .chatjox-avatar-extra:nth-of-type(3){animation-delay:8s}
@keyframes chatjox-avatar-cycle{
    0%,26%{opacity:0}
    30%,58%{opacity:1}
    62%,100%{opacity:0}
}
#chatjox-root .chatjox-action-icon-img{
    width:60%;
    height:60%;
    max-width:28px;
    max-height:28px;
    object-fit:contain;
    display:block;
}

/* ------------------------------------------------------- honeypot + mobile */

#chatjox-root .chatjox-hp{
    position:absolute!important;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
}

@media (max-width:600px){
    #chatjox-root .chatjox-panes{border-radius:0}
    #chatjox-root .chatjox-pane-scroll{padding:14px 13px}
    #chatjox-root .chatjox-rating-star{width:44px;height:44px}
    #chatjox-root .chatjox-rating-star svg{width:28px;height:28px}
}

@media (prefers-reduced-motion:reduce){
    #chatjox-root .chatjox-pane,
    #chatjox-root .chatjox-rating-done{animation:none}
    #chatjox-root .chatjox-rating-star,
    #chatjox-root .chatjox-rating-submit{transition:none}
    #chatjox-root .chatjox-avatar.has-stack .chatjox-avatar-extra{animation:none;opacity:0}
}