/* ═══════════════════════════════════════════
   AziluM Chat — compact single-line style
   Toutes les couleurs via variables CSS
   ═══════════════════════════════════════════ */

:root {
    --ac-bg:         #1a1a2e;
    --ac-bg-msg:     #16213e;
    --ac-text:       #e0e0e0;
    --ac-accent:     #7c3aed;
    --ac-accent-2:   #f97316;
    --ac-border:     rgba(255,255,255,.1);
    --ac-name:       #a78bfa;
    --ac-input-text: #ffffff;
    --ac-radius:     10px;
    --ac-font:       inherit;
}

/* ── Wrapper ──────────────────────────────── */
.azilum-chat-wrap {
    font-family:     var(--ac-font);
    background:      var(--ac-bg);
    border:          1px solid var(--ac-border);
    border-radius:   var(--ac-radius);
    overflow:        hidden;
    display:         flex;
    flex-direction:  column;
    margin-bottom:   24px;
}

/* ── Header ───────────────────────────────── */
.azilum-chat-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 14px;
    background:      rgba(0,0,0,.25);
    border-bottom:   1px solid var(--ac-border);
}
.azilum-chat-title {
    font-weight:     700;
    font-size:       .9rem;
    color:           var(--ac-text);
    letter-spacing:  .03em;
}
.azilum-chat-live {
    display:         flex;
    align-items:     center;
    gap:             5px;
    font-size:       .7rem;
    color:           rgba(255,255,255,.4);
    text-transform:  uppercase;
    letter-spacing:  .08em;
}
.azilum-chat-dot {
    width:           7px;
    height:          7px;
    border-radius:   50%;
    background:      #22c55e;
    animation:       ac-pulse 2s ease-in-out infinite;
}
@keyframes ac-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.45; transform:scale(.75); }
}

/* ── Messages list ────────────────────────── */
.azilum-chat-messages {
    overflow-y:      auto;
    padding:         6px 0;
    display:         flex;
    flex-direction:  column;
    scroll-behavior: smooth;
}
.azilum-chat-messages::-webkit-scrollbar { width:4px; }
.azilum-chat-messages::-webkit-scrollbar-track { background:transparent; }
.azilum-chat-messages::-webkit-scrollbar-thumb { background:var(--ac-border); border-radius:99px; }

/* ── Single message — COMPACT ONE-LINE ─────── */
.ac-msg {
    display:         flex;
    align-items:     center;
    gap:             0;
    padding:         3px 12px;
    min-height:      26px;
    animation:       ac-fadein .2s ease;
    position:        relative;
    line-height:     1.4;
}
.ac-msg:hover {
    background:      rgba(255,255,255,.04);
}
@keyframes ac-fadein {
    from { opacity:0; transform:translateX(-4px); }
    to   { opacity:1; transform:translateX(0); }
}

/* Avatar — petit et inline */
.ac-msg-avatar {
    flex-shrink:     0;
    margin-right:    7px;
}
.ac-msg-avatar img {
    width:           20px;
    height:          20px;
    border-radius:   50%;
    object-fit:      cover;
    display:         block;
    border:          1px solid var(--ac-border);
}

/* Nom */
.ac-msg-name {
    font-size:       .8rem;
    font-weight:     700;
    color:           var(--ac-name);
    white-space:     nowrap;
    margin-right:    5px;
    flex-shrink:     0;
}

/* Séparateur */
.ac-msg-sep {
    color:           rgba(255,255,255,.25);
    margin-right:    6px;
    font-size:       .75rem;
    flex-shrink:     0;
}

/* Texte du message */
.ac-msg-text {
    font-size:       .82rem;
    color:           var(--ac-text);
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
    flex:            1;
    min-width:       0;
}
/* Expand on hover */
.ac-msg:hover .ac-msg-text {
    white-space:     normal;
    overflow:        visible;
    text-overflow:   unset;
}

/* Heure — tout à droite */
.ac-msg-time {
    font-size:       .68rem;
    color:           rgba(255,255,255,.25);
    white-space:     nowrap;
    margin-left:     8px;
    flex-shrink:     0;
}

/* Réactions inline */
.ac-msg-reactions {
    display:         flex;
    align-items:     center;
    gap:             3px;
    margin-left:     6px;
    flex-shrink:     0;
}
.ac-reaction-btn {
    background:      rgba(255,255,255,.06);
    border:          1px solid var(--ac-border);
    border-radius:   99px;
    padding:         0px 6px;
    font-size:       .7rem;
    cursor:          pointer;
    color:           var(--ac-text);
    transition:      background .15s, border-color .15s;
    line-height:     1.6;
    white-space:     nowrap;
}
.ac-reaction-btn:hover,
.ac-reaction-btn.ac-reacted {
    background:      rgba(124,58,237,.25);
    border-color:    var(--ac-accent);
}
.ac-reaction-pick {
    display:         none;
    position:        absolute;
    bottom:          calc(100% + 4px);
    right:           8px;
    background:      var(--ac-bg-msg);
    border:          1px solid var(--ac-border);
    border-radius:   8px;
    padding:         5px 8px;
    gap:             4px;
    z-index:         999;
    box-shadow:      0 4px 16px rgba(0,0,0,.4);
}
.ac-reaction-pick.open { display:flex; }
.ac-reaction-pick button {
    background:      none;
    border:          none;
    font-size:       1rem;
    cursor:          pointer;
    padding:         2px 3px;
    border-radius:   4px;
    transition:      transform .1s;
}
.ac-reaction-pick button:hover { transform:scale(1.3); }

/* Admin delete */
.ac-msg-actions {
    opacity:         0;
    transition:      opacity .15s;
    margin-left:     4px;
    flex-shrink:     0;
}
.ac-msg:hover .ac-msg-actions { opacity:1; }
.ac-delete-btn {
    background:      none;
    border:          none;
    color:           #ef4444;
    cursor:          pointer;
    font-size:       .7rem;
    padding:         1px 4px;
    border-radius:   3px;
    line-height:     1;
}
.ac-delete-btn:hover { background:rgba(239,68,68,.15); }

/* ── Footer / input ───────────────────────── */
.azilum-chat-footer {
    padding:         7px 12px;
    background:      rgba(0,0,0,.2);
    border-top:      1px solid var(--ac-border);
}
.ac-login-msg {
    text-align:      center;
    font-size:       .8rem;
    color:           rgba(255,255,255,.4);
    padding:         4px 0;
}
.ac-login-msg a { color:var(--ac-accent); }

.ac-input-row {
    display:         flex;
    gap:             7px;
    align-items:     center;
}
.ac-input-wrap {
    flex:            1;
    position:        relative;
}
.ac-input-wrap input[type="text"] {
    width:           100%;
    background:      rgba(255,255,255,.06);
    border:          1px solid var(--ac-border);
    border-radius:   99px;
    color:           var(--ac-input-text);
    font-size:       .82rem;
    padding:         5px 60px 5px 14px;
    outline:         none;
    transition:      border-color .2s;
    box-sizing:      border-box;
    font-family:     var(--ac-font);
}
.ac-input-wrap input[type="text"]:focus {
    border-color:    var(--ac-accent);
}
.ac-input-wrap input::placeholder { color:rgba(255,255,255,.3); }

.ac-chars {
    position:        absolute;
    right:           10px;
    top:             50%;
    transform:       translateY(-50%);
    font-size:       .65rem;
    color:           rgba(255,255,255,.3);
    pointer-events:  none;
}
.ac-chars.warn { color:#f59e0b; }
.ac-chars.over { color:#ef4444; }

.ac-send-btn {
    background:      var(--ac-accent);
    color:           #fff;
    border:          none;
    border-radius:   99px;
    padding:         5px 14px;
    font-weight:     700;
    font-size:       .8rem;
    cursor:          pointer;
    transition:      background .2s, transform .1s;
    white-space:     nowrap;
    flex-shrink:     0;
    height:          30px;
}
.ac-send-btn:hover   { background:var(--ac-accent-2); }
.ac-send-btn:active  { transform:scale(.95); }
.ac-send-btn:disabled { opacity:.35; cursor:default; }

/* ── Empty state ──────────────────────────── */
.ac-empty {
    text-align:      center;
    color:           rgba(255,255,255,.3);
    font-size:       .8rem;
    padding:         20px 0;
}