/* ── a4l-chat-layout.css — Shell WA/TG : sidebar + main + panels ── */

/* ── App shell — occupe la zone entre l'header AtomicNav (48px) et la bottom-nav (58px) ── */
#app {
    position:fixed;
    top:48px;    /* sous #a4l-header d'AtomicNav */
    bottom:58px; /* au-dessus de #a4l-bottom-nav */
    left:0; right:0;
    display:flex; overflow:hidden;
}

/* ════════════════════════════════════════════════
   SIDEBAR gauche
   ════════════════════════════════════════════════ */
#sidebar {
    width:320px; min-width:320px; flex-shrink:0;
    display:flex; flex-direction:column;
    background:#111; border-right:1px solid rgba(255,255,255,.06);
    height:100%; overflow:hidden;
}

/* En-tête sidebar : mon avatar + nom + boutons */
#sidebar-head {
    display:flex; align-items:center; gap:8px;
    padding:10px 12px 10px 14px; background:#1a1a1a; flex-shrink:0;
    border-bottom:1px solid rgba(255,255,255,.07);
}
#my-av-btn {
    width:38px; height:38px; border-radius:50%; cursor:pointer; flex-shrink:0;
    background:rgba(0,255,204,.09); border:1.5px solid rgba(0,255,204,.2);
    display:flex; align-items:center; justify-content:center;
    font-size:1.15rem; overflow:hidden; transition:border-color .15s;
}
#my-av-btn:hover { border-color:rgba(0,255,204,.55); }
#my-av-btn img   { width:100%; height:100%; object-fit:cover; }
#my-name-display { flex:1; font-size:.84rem; font-weight:600; color:#e0e0e0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.sb-icon-btn {
    width:34px; height:34px; border-radius:50%; background:none; border:none;
    color:rgba(255,255,255,.38); cursor:pointer; font-size:1.05rem;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s; flex-shrink:0;
}
.sb-icon-btn:hover { background:rgba(255,255,255,.08); color:#e0e0e0; }

/* Recherche sidebar */
#sidebar-search { padding:8px 12px; flex-shrink:0; }
#search-inp {
    width:100%; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08); border-radius:18px;
    padding:7px 14px; color:#e0e0e0; font-size:.79rem;
    font-family:system-ui,sans-serif; outline:none;
}
#search-inp:focus { border-color:rgba(0,255,204,.28); }

/* Liste conversations sidebar */
#conv-list { flex:1; overflow-y:auto; }
#conv-list::-webkit-scrollbar  { width:4px; }
#conv-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }

/* Items conversation */
.conv-item { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer; transition:background .1s; }
.conv-item:hover  { background:rgba(255,255,255,.04); }
.conv-item.active { background:rgba(0,255,204,.07); }
.conv-av { width:46px; height:46px; border-radius:50%; flex-shrink:0; background:rgba(0,255,204,.08); border:1.5px solid rgba(0,255,204,.18); display:flex; align-items:center; justify-content:center; font-size:1.2rem; overflow:hidden; }
.conv-av img { width:100%; height:100%; object-fit:cover; }
.conv-body { flex:1; min-width:0; }
.conv-top  { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.conv-name { font-size:.87rem; font-weight:600; color:#e8e8e8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-time { font-size:.64rem; color:rgba(255,255,255,.28); flex-shrink:0; padding-left:6px; }
.conv-bot  { display:flex; align-items:center; justify-content:space-between; }
.conv-preview { font-size:.73rem; color:rgba(255,255,255,.38); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.conv-badge { background:#00b09b; color:#fff; font-size:.58rem; font-weight:700; border-radius:50%; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 4px; flex-shrink:0; }

/* ════════════════════════════════════════════════
   MAIN — zone de chat
   ════════════════════════════════════════════════ */
#main {
    flex:1; display:flex; flex-direction:column;
    background:#0d0d0d; overflow:hidden; min-width:0;
}

/* En-tête conversation (peer info) */
#chat-header {
    display:none; align-items:center; gap:10px;
    padding:8px 14px; background:#1a1a1a; flex-shrink:0;
    border-bottom:1px solid rgba(255,255,255,.06); min-height:52px;
}
#chat-header.visible { display:flex; }
#btn-back-mobile { display:none; } /* visible sur mobile seulement */
#chat-peer-av {
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    background:rgba(0,255,204,.08); border:1.5px solid rgba(0,255,204,.18);
    display:flex; align-items:center; justify-content:center; font-size:1rem; overflow:hidden;
}
#chat-peer-av img { width:100%; height:100%; object-fit:cover; }
#chat-peer-info { flex:1; min-width:0; }
#chat-peer-name { font-size:.88rem; font-weight:600; color:#e8e8e8; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#chat-peer-sub  { font-size:.64rem; color:rgba(255,255,255,.3); margin-top:1px; }

/* Aucune conversation sélectionnée */
#no-chat {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; color:rgba(255,255,255,.2); text-align:center; padding:30px;
    background:repeating-linear-gradient(45deg,rgba(255,255,255,.01) 0,rgba(255,255,255,.01) 1px,transparent 0,transparent 50%) 0 0/20px 20px;
}
#no-chat-icon  { font-size:3.5rem; opacity:.35; }
#no-chat-title { font-size:.95rem; font-weight:600; opacity:.45; }
#no-chat-sub   { font-size:.76rem; opacity:.28; }

/* Zone messages */
#view-chat {
    flex:1; overflow-y:auto; padding:8px 8px 4px;
    display:none; flex-direction:column; background:#111;
}
#view-chat::-webkit-scrollbar       { width:4px; }
#view-chat::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }

/* Input bar — dans le flux (pas fixed) */
#input-bar {
    display:none; align-items:flex-end; gap:4px;
    padding:8px 8px; background:#0d0d0d;
    border-top:1px solid rgba(255,255,255,.06); flex-shrink:0;
}
#input-row {
    display:flex; align-items:flex-end; flex:1; gap:4px;
    background:#1a1a1a; border-radius:24px; padding:4px 4px 4px 10px;
    transition:border-color .2s, background .2s;
}
#chat-input {
    flex:1; background:none; border:none; outline:none;
    color:#e8e8e8; font-size:.85rem;
    resize:none; max-height:110px; font-family:system-ui,sans-serif;
    line-height:1.44; overflow-y:auto; padding:5px 2px;
}
#chat-input::placeholder { color:rgba(255,255,255,.28); }
.ib-btn {
    padding:7px; border-radius:50%; background:none; cursor:pointer;
    border:none; color:rgba(255,255,255,.38); font-size:1.1rem;
    flex-shrink:0; transition:color .15s; line-height:1;
}
.ib-btn:hover { color:rgba(255,255,255,.7); }

/* Bouton TTL éphémère */
#btn-ttl { position:relative; }
#btn-ttl .ttl-label {
    position:absolute; top:-22px; left:50%; transform:translateX(-50%);
    background:#2a1800; color:rgba(255,180,50,.95); font-size:.58rem; font-weight:700;
    border-radius:8px; padding:2px 7px; white-space:nowrap; display:none;
    border:1px solid rgba(255,180,50,.3);
}
#btn-ttl.active           { color:rgba(255,180,50,.85); }
#btn-ttl.active .ttl-label { display:block; }

/* Bouton envoyer — FAB rond vert */
#btn-send {
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,#00b09b,#005c4b);
    border:none; color:#fff; cursor:pointer; font-size:1.1rem;
    display:flex; align-items:center; justify-content:center;
    transition:box-shadow .2s, background .3s;
    box-shadow:0 2px 8px rgba(0,176,155,.25);
}
#btn-send:hover    { box-shadow:0 4px 14px rgba(0,176,155,.4); }
#btn-send:disabled { opacity:.3; cursor:default; box-shadow:none; }

/* ══ Éphémère — glow ambre ══ */
@keyframes ephem-pulse {
    0%,100% { box-shadow:0 2px 10px rgba(255,160,0,.3); }
    50%      { box-shadow:0 0 22px rgba(255,160,0,.7), 0 0 40px rgba(255,120,0,.25); }
}
#btn-send.ephemeral {
    background:linear-gradient(135deg,#d4860a,#6b3800) !important;
    animation:ephem-pulse 1.4s ease infinite;
}
#input-row.ephemeral {
    border:1px solid rgba(255,160,0,.35);
    background:#1c1400;
}

/* Upload progress + emoji panel — dans le flux */
#upload-progress {
    display:none; align-items:center; gap:10px;
    background:rgba(10,8,4,.97); padding:6px 14px;
    font-size:.71rem; color:rgba(255,255,255,.42);
    border-top:1px solid rgba(255,255,255,.06); flex-shrink:0;
}
#upload-progress.show { display:flex; }
.prog-bar  { flex:1; height:3px; background:rgba(255,255,255,.1); border-radius:2px; }
.prog-fill { height:100%; background:#00b09b; border-radius:2px; transition:width .2s; width:0; }

#emoji-panel {
    display:none; flex-direction:column; max-height:260px;
    background:rgba(10,8,4,.98); border-top:1px solid rgba(255,255,255,.08);
    flex-shrink:0;
}
#emoji-panel.open { display:flex; }

/* ════════════════════════════════════════════════
   OVERLAY mobile sidebar
   ════════════════════════════════════════════════ */
#sidebar-overlay {
    display:none; position:fixed; inset:0; z-index:498;
    background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
}
#sidebar-overlay.show { display:block; }

/* ════════════════════════════════════════════════
   PANELS glissants (Profil / Paramètres)
   ════════════════════════════════════════════════ */
.slide-panel {
    position:fixed; top:0; bottom:58px; left:0; z-index:600;
    width:min(400px, 100vw); background:#111;
    display:flex; flex-direction:column; overflow:hidden;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    border-right:1px solid rgba(255,255,255,.07);
}
.slide-panel.open { transform:translateX(0); }

.slide-panel-head {
    display:flex; align-items:center; gap:10px; padding:11px 14px;
    background:#1a1a1a; border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0;
}
.slide-panel-title { font-size:.92rem; font-weight:700; color:#e0e0e0; flex:1; }
.slide-panel-body  { flex:1; overflow-y:auto; padding:16px; }
.slide-panel-body::-webkit-scrollbar       { width:4px; }
.slide-panel-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }

/* Avatar profil (grand) */
.profile-av-lg {
    width:80px; height:80px; border-radius:50%; margin:0 auto 16px;
    background:rgba(0,255,204,.1); border:2px solid rgba(0,255,204,.25);
    display:flex; align-items:center; justify-content:center; font-size:2.4rem;
    overflow:hidden; cursor:pointer; position:relative;
}
.profile-av-lg img { width:100%; height:100%; object-fit:cover; }
.av-edit-overlay {
    position:absolute; inset:0; background:rgba(0,0,0,.55); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:.72rem; color:#fff;
    opacity:0; transition:opacity .15s; font-weight:600; letter-spacing:.3px;
}
.profile-av-lg:hover .av-edit-overlay { opacity:1; }

/* Champs de formulaire profil */
.profile-field { margin-bottom:14px; }
.profile-field label { display:block; font-size:.67rem; color:rgba(255,255,255,.38); text-transform:uppercase; letter-spacing:.9px; margin-bottom:5px; }
.profile-field input,
.profile-field textarea {
    width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:10px; color:#e0e0e0; padding:9px 12px; font-size:.84rem;
    font-family:system-ui,sans-serif; outline:none; resize:none;
    transition:border-color .15s;
}
.profile-field input:focus,
.profile-field textarea:focus { border-color:rgba(0,255,204,.38); }

/* Clé affichée (copiable) */
.key-display {
    background:rgba(0,0,0,.35); border-radius:8px; padding:8px 11px;
    font-size:.64rem; font-family:monospace; color:rgba(255,255,255,.28);
    word-break:break-all; cursor:pointer;
    border:1px solid rgba(255,255,255,.06); transition:all .15s;
}
.key-display:hover { color:rgba(0,255,204,.55); border-color:rgba(0,255,204,.22); }

/* Lignes de paramètres */
.setting-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:13px 0; border-bottom:1px solid rgba(255,255,255,.05); gap:10px;
}
.setting-row:last-child { border-bottom:none; }
.setting-label { font-size:.84rem; color:#e0e0e0; }
.setting-desc  { font-size:.69rem; color:rgba(255,255,255,.3); margin-top:2px; }
.setting-ctl   { flex-shrink:0; }
.setting-ctl select {
    background:#1a1a1a; border:1px solid rgba(255,255,255,.1); border-radius:8px;
    color:#00ffcc; padding:4px 8px; font-size:.78rem; outline:none; cursor:pointer;
}
.setting-ctl button {
    background:none; border:none; color:rgba(0,255,204,.7); cursor:pointer; font-size:.78rem;
}

/* ── Swatches de thème ── */
.theme-swatches {
    display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:4px 0 6px; width:100%;
}
.theme-swatch {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:7px 4px; border-radius:9px; cursor:pointer;
    border:1.5px solid transparent; background:rgba(255,255,255,.02);
    transition:border-color .15s,background .15s; user-select:none;
}
.theme-swatch:hover { background:rgba(255,255,255,.06); }
.theme-swatch.selected { border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.08); }
.theme-swatch-dot { width:20px; height:20px; border-radius:50%; flex-shrink:0; border:1.5px solid rgba(255,255,255,.12); }
.theme-swatch-lbl { font-size:.58rem; color:rgba(255,255,255,.48); text-align:center; line-height:1.3; }

/* ── Toggle switch ── */
.st-toggle { display:flex; align-items:center; cursor:pointer; user-select:none; }
.st-toggle-input { display:none; }
.st-toggle-track {
    width:36px; height:20px; border-radius:10px; flex-shrink:0;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12);
    position:relative; transition:background .2s,border-color .2s;
}
.st-toggle-track::after {
    content:''; position:absolute; left:2px; top:2px;
    width:14px; height:14px; border-radius:50%;
    background:rgba(255,255,255,.35); transition:left .2s,background .2s;
}
.st-toggle-input:checked + .st-toggle-track { background:rgba(0,176,155,.35); border-color:rgba(0,176,155,.55); }
.st-toggle-input:checked + .st-toggle-track::after { left:18px; background:#00b09b; }

/* ── Taille de texte ── */
[data-font="sm"] .msg-bubble { font-size:.75rem !important; }
[data-font="lg"] .msg-bubble { font-size:.96rem !important; }

/* ── Mode compact ── */
[data-compact="1"] .msg-bubble { padding:4px 9px 3px !important; }
[data-compact="1"] .msg-row { margin-bottom:1px !important; }
[data-compact="1"] .msg-row.group-start { margin-top:6px !important; }
[data-compact="1"] .conv-item { padding:7px 14px !important; }

/* Bouton save générique */
.btn-panel-save {
    width:100%; padding:11px; border-radius:12px; cursor:pointer;
    font-size:.88rem; font-weight:700; margin-top:16px;
    background:linear-gradient(135deg,rgba(0,176,155,.25),rgba(0,92,75,.25));
    border:1.5px solid rgba(0,176,155,.45); color:#00ffcc;
    transition:background .15s;
}
.btn-panel-save:hover { background:linear-gradient(135deg,rgba(0,176,155,.4),rgba(0,92,75,.4)); }

/* Bandeau info chiffrement */
.nostr-enc-info {
    font-size:.69rem; color:rgba(255,255,255,.22);
    border:1px solid rgba(0,255,204,.1); border-radius:8px;
    padding:9px 12px; background:rgba(0,255,204,.02); margin-bottom:16px;
    line-height:1.55;
}

/* ════════════════════════════════════════════════
   RESPONSIVE — mobile ≤ 767 px
   ════════════════════════════════════════════════ */
@media (max-width:767px) {
    #sidebar {
        position:fixed; top:0; bottom:58px; left:0; z-index:499;
        width:min(320px, 88vw);
        transform:translateX(-100%);
        transition:transform .25s cubic-bezier(.4,0,.2,1);
    }
    #sidebar.open { transform:translateX(0); }
    #main { width:100%; }
    #btn-back-mobile { display:flex !important; }
    #chat-header { background:#111; }
    .slide-panel { width:100%; border-right:none; }
}