/* ===== Shell ===== */
.ct-thread-shell{
    height:100%;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:12px;
}

/* ===== Header ===== */
.ct-header{
    position:sticky;
    top:0;
    z-index:10;
    background:#fff;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.ct-header-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.ct-header-avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:700;
    font-size:12px;
    flex:0 0 auto;
    overflow:hidden;
}
.ct-header-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.ct-header-title{ min-width:0; }
.ct-thread-name{
    font-weight:700;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:40vw;
}
.ct-thread-subtitle{
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:40vw;
}

.ct-header-right{
    display:flex;
    align-items:center;
    gap:8px;
}

.ct-header-action{
    width:34px;
    height:34px;
    border-radius:999px;
    display:grid;
    place-items:center;
    padding:0;
}
.ct-header-action i{ font-size:14px; }

/* ===== Thread Body ===== */
.ct-thread{
    position:relative;
    flex:1 1 auto;
    overflow-y:auto;
    overflow-x:hidden;
    padding:12px;
    background:#fff;
}

.ct-load-older-trigger{ display:none !important; }

/* ===== Date separator ===== */
.ct-date-sep{display:flex;justify-content:center;margin:12px 0;}
.ct-date-pill{
    font-size:12px;
    background:#f1f3f5;
    color:#6c757d;
    padding:4px 10px;
    border-radius:999px;
}

/* ===== Rows ===== */
.ct-row{
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin:16px 0;
}
.ct-has-reactions{ margin-bottom:44px; }
.ct-me{justify-content:flex-end;}
.ct-them{justify-content:flex-start;}

/* ===== Avatar ===== */
.ct-avatar-wrap{flex:0 0 auto;}
.ct-avatar{
    width:34px;height:34px;border-radius:50%;
    display:grid;place-items:center;
    font-size:12px;font-weight:700;
    color:#fff;overflow:hidden;
    box-shadow:0 0 0 1px rgba(0,0,0,.06);
    user-select:none;
}
.ct-avatar img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== Bubble wrap ===== */
.ct-bubble-wrap{
    position:relative;
    display:flex;
    align-items:flex-end;
    gap:8px;
    max-width:78%;
}
.ct-them .ct-bubble-wrap{flex-direction:row-reverse;}

/* ===== Hover Actions ===== */
.ct-bubble-actions{
    position:absolute;
    top:8px;
    display:none;
    gap:6px;
    z-index:3;
    pointer-events:none;
}
.ct-me   .ct-bubble-actions{ left:-160px; }
.ct-them .ct-bubble-actions{ right:-160px; }
.ct-me .ct-bubble-actions{ flex-direction:row-reverse; }

.ct-row:hover .ct-bubble-actions{ display:flex; pointer-events:auto; }
.ct-row:not(:hover) .ct-bubble-actions{ display:none !important; }

.ct-action{
    width:32px;height:32px;
    border-radius:999px;
    display:grid;
    place-items:center;
    padding:0;
}
.ct-action i{font-size:14px;}

/* ===== Bubble ===== */
.ct-bubble{
    position:relative;
    padding:10px 12px;
    border-radius:18px;
    font-size:14px;
    line-height:1.25;
    /* white-space:pre-wrap;*/
     word-wrap:break-word;
 }

.ct-summary-toggle{
    position:absolute;
    top:6px;
    right:8px;
    background:transparent;
    border:0;
    font-size:11px;
    color:#6c757d;
    padding:0;
}

.ct-summary-toggle:hover{
    color:#495057;
}
 .ct-them .ct-bubble{ background:#f1f3f5; color:#111; border-bottom-left-radius:6px; }
 .ct-me .ct-bubble{ background:#0d6efd; color:#fff; border-bottom-right-radius:6px; }
 
 /* ===== Reactions ===== */
.ct-reactions{
    position:absolute;
    bottom:-28px;
    display:inline-flex;
    gap:6px;
    padding:3px 6px;
    background:#fff;
    border-radius:999px;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
    width:max-content;
    max-width:calc(100% - 16px);
}
.ct-them .ct-reactions{left:10px;}
.ct-me   .ct-reactions{right:10px;}

.ct-react{
    padding:6px;
    border-radius:999px;
    background:transparent;
    border:0;
    font-size:12px;
    display:inline-flex;
    gap:4px;
    align-items:center;
}
.ct-react:hover{background:rgba(13,110,253,.08);}
.ct-react-me{background:rgba(13,110,253,.12);}
.ct-emoji{font-size:13px;}
.ct-count{color:#495057;}

/* ===== Cues Toggle ===== */
.ct-cues-toggle{
    display:flex;
    margin-top:6px;
}

.ct-cues-button{
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    font-size:12px;
}

.ct-cues-count{
    font-weight:600;
}

/* ===== Typing indicator ===== */
.ct-typing{
    position:sticky;
    bottom:0;
    z-index:5;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    margin-top:6px;
    background:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,.92));
    border-top:1px solid rgba(0,0,0,.06);
    border-radius:10px;
    color:#6c757d;
    font-size:12px;
}

.ct-dots{ display:inline-flex; align-items:center; gap:4px; }
.ct-dots span{
    width:6px;height:6px;border-radius:50%;
    background:rgba(108,117,125,.85);
    display:inline-block;
    animation: ct-bounce 1.1s infinite ease-in-out;
}
.ct-dots span:nth-child(2){ animation-delay:.15s; }
.ct-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes ct-bounce{
     0%, 80%, 100%{ transform: translateY(0); opacity:.55; }
     40%{ transform: translateY(-4px); opacity:1; }
 }

/* ✅ Sticky wrapper always visible at bottom of scroll viewport */
.ct-scroll-down-wrap{
    position:sticky;
    bottom:12px;
    z-index:20;
    display:flex;
    justify-content:flex-end;
    pointer-events:none; /* so it doesn't block scrolling/clicks */
    margin-top:8px;
}

.ct-scroll-down{
    display:none;
    width:40px;
    height:40px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    align-items:center;
    justify-content:center;
    pointer-events:auto; /* clickable */
}
.ct-scroll-down i{ font-size:14px; color:#495057; }
.ct-scroll-down.ct-show{ display:flex; }

.ct-empty{padding:24px 0;}