/* Chat Bubbles — kabdalis2 design system. Static SMS-style Q&A thread. */
.b-bubbles{
    max-width:560px;
    margin-inline:auto;
}
.b-bubbles__title{
    margin:0 0 14px;
    font-size:1.05rem; font-weight:600;
    text-align:center;
    color:var(--ink,#25211b);
}
.b-bubbles__list{
    list-style:none;
    margin:0; padding:0;
}
.b-bubbles__row{
    display:flex; align-items:flex-end; gap:10px;
}
.b-bubbles__row + .b-bubbles__row{ margin-top:10px; }
/* Consecutive same-speaker rows sit tighter, like a real thread */
.b-bubbles__row--host + .b-bubbles__row--host,
.b-bubbles__row--guest + .b-bubbles__row--guest{ margin-top:4px; }
.b-bubbles__row--guest{ justify-content:flex-end; }
.b-bubbles__avatar{
    flex:0 0 34px;
    width:34px; height:34px;
    border-radius:50%;
    background:var(--surface2,#f5f1ea);
    border:1px solid var(--line,#e4ded2);
    display:flex; align-items:center; justify-content:center;
    font-size:1.05rem; line-height:1;
}
.b-bubbles__bubble{
    position:relative;
    max-width:72%;
    padding:9px 14px;
    border-radius:18px;
    font-size:.95rem; line-height:1.45;
}
.b-bubbles__row--host .b-bubbles__bubble{
    background:var(--surface2,#f5f1ea);
    color:var(--ink,#25211b);
    border:1px solid var(--line,#e4ded2);
    border-bottom-left-radius:6px;
}
.b-bubbles__row--guest .b-bubbles__bubble{
    background:var(--pine,#2e5d49);
    color:#fff;
    border-bottom-right-radius:6px;
}
/* Small tail matching each bubble's background */
.b-bubbles__bubble::after{
    content:"";
    position:absolute; bottom:0;
    width:0; height:0;
    border-style:solid;
}
.b-bubbles__row--host .b-bubbles__bubble::after{
    left:-7px;
    border-width:0 8px 8px 0;
    border-color:transparent var(--surface2,#f5f1ea) transparent transparent;
}
.b-bubbles__row--guest .b-bubbles__bubble::after{
    right:-7px;
    border-width:0 0 8px 8px;
    border-color:transparent transparent transparent var(--pine,#2e5d49);
}
/* Editor affordances */
.b-bubbles--editor .b-bubbles__row{ position:relative; }
.b-bubbles--editor .b-bubbles__ctrl{ display:flex; align-items:center; gap:2px; }
.b-bubbles--editor .b-bubbles__swap{ font-family:var(--font-mono,monospace); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; padding:0 6px; height:24px; }
.b-bubbles--editor .b-bubbles__rm{ min-width:24px; height:24px; padding:0; }
.b-bubbles--editor .b-bubbles__add{ margin-top:12px; }