:root { --bg: #efeee9; --accent: #18181b; }

/* RESET BRUTALISTE */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; border-radius: 0; }

html, body { background: var(--bg); overflow: hidden; height: 100%; position: fixed; width: 100%; font-family: sans-serif; }

.fixed-header { 
    position: fixed; top: 0; left: 0; width: 100%; 
    background: var(--bg); z-index: 2000; padding: 8px 12px; border-bottom: 2px solid var(--accent);
    display: flex; flex-direction: column; justify-content: center;
}
.fixed-header.collapsed #header-details { display: none !important; }
.fixed-header.collapsed { padding-bottom: 8px; }

.fixed-header .flex-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#status-badge { background: #fff; border: 1px solid var(--accent); padding: 4px; font-size: 8px; font-weight: 900; text-transform: uppercase; min-width: 150px; }
#status-badge div { display: flex; justify-content: space-between; border-bottom: 1px solid #eee; }

#viewport { 
    display: flex; 
    width: 500vw; 
    height: 100%; 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    will-change: transform;
}

#full-eink-content {
    height: 60vh; 
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
    line-height: 1.6;
}

.page { 
    width: 100vw; 
    height: 100%; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
    padding: 80px 16px 140px 16px !important; 
    position: relative;
    flex-shrink: 0;
}
.fixed-header.collapsed ~ #viewport .page { 
    padding-top: 52px !important; 
}

input, select, textarea { 
    width: 100%; background: #fff; border: 2px solid var(--accent); 
    padding: 8px 12px !important; font-size: 14px; margin-bottom: 8px; outline: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}

input[type="text"], input[type="email"], input[type="password"], textarea { background-image: none; }

#p1 { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#sel-group { margin-bottom: 8px !important; height: 42px; font-weight: 900; }
#p1 .flex.gap-2 { margin-bottom: 8px !important; }
#p1 .flex.gap-2 select { height: 42px; }

#chat-history { flex-grow: 1; overflow-x: hidden;overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 15px; }

.msg-row { display: flex; width: 100%; }
.msg-row.me { justify-content: flex-end; }
.msg-row.others { justify-content: flex-start; }
.msg-bubble { max-width: 85%; padding: 6px 10px; font-size: 13px; border: 1.5px solid var(--accent); display: flex; align-items: center; gap: 8px; }
.msg-row.me .msg-bubble { background: var(--bubble-me-bg, var(--accent)); color: var(--bubble-me-text, #fff); border-radius: 12px 0 12px 0 !important; }
.msg-row.others .msg-bubble { background: var(--bubble-other-bg, #fff); color: var(--bubble-other-text, var(--accent)); border-radius: 0 12px 0 12px !important; }

.msg-author-tag { font-size: 7px; font-weight: 900; text-transform: uppercase; padding: 2px 4px; border-radius: 2px !important; }
.msg-row.me .msg-author-tag { background: #fff; color: var(--accent); }
.msg-row.others .msg-author-tag { background: var(--accent); color: #fff; }

/* MODIFICATION ICI : ZONE FIXÉE EN BAS */
.send-container { 
    position: fixed;
    bottom: 65px; /* Juste au dessus de la tab-bar */
    left: 0;
    width: 100%;
    background: var(--bg); 
    display: flex; 
    gap: 8px; 
    padding: 10px 15px; 
    border-top: 2px solid var(--accent);
    z-index: 1500;
}

.btn-send { background: var(--accent); color: white; width: 42px; height: 42px; border: none; font-size: 18px; flex-shrink: 0; }
#msg-input { flex-grow: 1; height: 42px; margin-bottom: 0; resize: none; }

.acc-item { border-bottom: 1px solid rgba(0,0,0,0.1); }
.acc-trigger { display: none; }
.acc-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
.acc-title-zone { display: flex; align-items: center; flex-grow: 1; }
.acc-label-text { font-weight: 900; text-transform: uppercase; font-size: 0.8rem; cursor: pointer; }
.acc-toggle-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: flex-end; cursor: pointer; font-size: 1.2rem; font-weight: 900; }
.acc-toggle-icon::after { content: '+'; }
.acc-trigger:checked ~ .acc-header .acc-toggle-icon::after { content: '−'; }
.acc-content { display: none; padding-bottom: 15px; }
.acc-trigger:checked ~ .acc-content { display: block; }

.btn-plus-3d {
    width: 26px; height: 26px; 
    background: #fff !important; color: #000 !important;
    border: 2px solid #000 !important; 
    font-weight: 900; font-size: 16px;
    box-shadow: 2px 2px 0px #000;
    margin-left: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 50;
    position: relative;
}
.btn-plus-3d:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0px #000; }

#eink-sim {
    height: 90px;
    background: white;
    border: 4px solid #000;
    padding: 8px;
    margin-bottom: 0;
    font-family: monospace;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    font-size: 11px;
    position: relative;
    z-index: 1;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.btn-black { background: var(--accent); color: white; font-weight: 900; text-transform: uppercase; border: none; cursor: pointer; }

.tab-bar { height: 65px; background: white; border-top: 2px solid var(--accent); display: flex; justify-content: space-around; align-items: center; position: fixed; bottom: 0; width: 100%; z-index: 2000; padding-bottom: 10px; }
.tab-item { opacity: 0.3; display: flex; flex-direction: column; align-items: center; font-size: 9px; font-weight: 900; }
.tab-item.active { opacity: 1; }

#auth-screen { position: fixed; inset: 0; background: var(--bg); z-index: 9999; padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.hidden { display: none !important; }
#auth-screen input { margin-bottom: 20px !important; }

@keyframes flash-item { 0%, 50% { background: #000; color: #fff; } 100% { background: transparent; color: inherit; } }
.new-item-flash { animation: flash-item 2s ease-out; }

.btn-edit { background: none; border: none; cursor: pointer; font-size: 14px; padding: 0 8px; opacity: 0.7; }
.btn-edit:hover { opacity: 1; }

/* msg-row/msg-bubble rules consolidated above */

#prep-content { display: flex; flex-direction: column; padding: 10px; background: #fff; min-height: 50px; }
#eink-sim { display: block !important; }

/* Quand eink-sim est dans un accordéon, forcer la hauteur et le scroll */
#acc-eink .acc-content #eink-sim,
.acc-content #eink-sim { 
    height: 90px !important; 
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Page Prep : contrainte de hauteur pour scroll vertical correct */
#p4 { overflow: hidden !important; display: flex; flex-direction: column; }
#p4 > div { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#prep-content { 
    flex: 1; 
    min-height: 0;
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch;
    word-break: break-word; 
    overflow-wrap: break-word;
    white-space: normal;
    padding-bottom: 140px !important;
    margin-bottom: 0;
}
#p4 { padding-bottom: 0 !important; }
#eink-sim input[type="checkbox"], #prep-content input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }

.hidden { display: none !important; }
/* ═══════════════════════════════════════════════════════════
   SYSTÈME DE SKINS — 3 thèmes
   Skin 0 (défaut) : brutaliste noir/blanc/beige  → déjà défini via :root
   Skin 1 : "Ardoise" — bleu nuit, gris froid, accents cyan
   Skin 2 : "Personnalisé" — couleurs choisies par l'utilisateur
   Appliqué via body.skin-1 ou body.skin-2
═══════════════════════════════════════════════════════════ */

/* ── SKIN 1 : Ardoise (bleu nuit lisible) ─────────────────── */
body.skin-1 { --bg:#1a1f2e; --accent:#60a5fa; }
body.skin-1, body.skin-1 * { color:#e8eaf0; }
body.skin-1 .fixed-header { background:#1a1f2e; border-bottom:2px solid #60a5fa; }
body.skin-1 .page { background:#1a1f2e; }
body.skin-1 h2, body.skin-1 .acc-label-text, body.skin-1 .acc-toggle-icon { color:#e8eaf0; }
body.skin-1 .msg-row.me .msg-bubble { background:#2563eb; color:#fff; border-color:#2563eb; }
body.skin-1 .msg-row.others .msg-bubble { background:#293148; color:#e8eaf0; border-color:#374166; }
body.skin-1 .msg-author-tag { background:#374166 !important; color:#60a5fa !important; }
body.skin-1 .msg-row.me .msg-author-tag { background:#1d4ed8 !important; color:#fff !important; }
body.skin-1 .acc-item { border-bottom:1px solid rgba(255,255,255,0.07); }
body.skin-1 .tab-bar { background:#293148; border-top:2px solid #60a5fa; }
body.skin-1 .tab-item { color:#94a3b8; opacity:1; }
body.skin-1 .tab-item.active { color:#60a5fa; opacity:1; }
body.skin-1 .btn-send { background:#2563eb; color:#fff; }
body.skin-1 .send-container { background:#1a1f2e; border-top:2px solid #374166; }
body.skin-1 #msg-input { background:#293148; color:#e8eaf0; border-color:#374166; }
body.skin-1 #eink-sim { background:#293148; border-color:#60a5fa; color:#e8eaf0; }
body.skin-1 input, body.skin-1 select, body.skin-1 textarea { background:#293148; color:#e8eaf0; border-color:#374166; }
body.skin-1 .btn-black, body.skin-1 .btn-send { background:#2563eb !important; color:#fff !important; }
body.skin-1 .btn-plus-3d { background:#293148 !important; color:#60a5fa !important; border-color:#60a5fa !important; box-shadow:2px 2px 0 #60a5fa; }
body.skin-1 .acc-toggle-icon { color:#60a5fa; }
body.skin-1 #order-date-alert { background:#dc2626; }
body.skin-1 .fixed-header, body.skin-1 #status-mini, body.skin-1 #user-badge { color:#e8eaf0; }

/* ── SKIN 2 : Personnalisé ────────────────────────────────── */
body.skin-2 { 
    --bg:var(--custom-bg, #efeee9); 
    --accent:var(--custom-accent, #18181b); 
}
body.skin-2 .fixed-header { background:var(--custom-bg, #efeee9); border-bottom:2px solid var(--custom-accent, #18181b); }
body.skin-2 .page { background:var(--custom-bg, #efeee9); }
body.skin-2 input, body.skin-2 select, body.skin-2 textarea { 
    background:var(--custom-field, #fff); 
    color:var(--custom-text, #18181b); 
    border-color:var(--custom-accent, #18181b); 
}
body.skin-2 .btn-send, body.skin-2 .btn-black { 
    background:var(--custom-btn-bg, #18181b); 
    color:var(--custom-btn-text, #fff); 
}
body.skin-2 .send-container { background:var(--custom-bg, #efeee9); border-top:2px solid var(--custom-accent, #18181b); }
body.skin-2 .tab-bar { background:var(--custom-field, #fff); border-top:2px solid var(--custom-accent, #18181b); }
body.skin-2 .msg-row.me .msg-bubble { background:var(--custom-btn-bg, #18181b); color:var(--custom-btn-text, #fff); border-color:var(--custom-accent, #18181b); }
body.skin-2 .msg-row.others .msg-bubble { background:var(--custom-field, #fff); color:var(--custom-text, #18181b); border-color:var(--custom-accent, #18181b); }
body.skin-2 #eink-sim { background:var(--custom-field, #fff); border-color:var(--custom-accent, #18181b); color:var(--custom-text, #18181b); }
body.skin-2 .acc-label-text { color:var(--custom-text, #18181b); }
body.skin-2 .btn-plus-3d { background:var(--custom-field, #fff) !important; color:var(--custom-text, #18181b) !important; border-color:var(--custom-accent, #18181b) !important; }

/* ── SÉLECTEUR DE SKIN (fixé en bas de page Params) ─────── */
#skin-selector {
    position:sticky; bottom:0; background:var(--bg);
    border-top:2px solid var(--accent); padding:10px;
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    z-index:100; margin-top:auto;
}
#skin-selector .skin-btn {
    flex:1; min-width:80px; padding:8px 4px;
    border:2px solid var(--accent); font-size:9px; font-weight:900;
    text-transform:uppercase; cursor:pointer; text-align:center;
    background:var(--bg); color:var(--accent);
}
#skin-selector .skin-btn.active { background:var(--accent); color:var(--bg); }
#skin-color-pickers { width:100%; display:none; margin-top:6px; }
#skin-color-pickers.visible { display:block !important; }
#skin-color-pickers label { font-size:8px; font-weight:900; text-transform:uppercase; }
#skin-color-pickers input[type=color] { width:40px; height:30px; border:2px solid var(--accent); padding:0; cursor:pointer; background:none; }

/* ── TUILES POSTITS (rangée horizontale dans le chat) ─────── */
#postit-tabs-wrap {
    flex-shrink: 0;
    background: var(--bg);
    border-bottom: 2px solid var(--accent);
    padding: 6px 8px 4px 8px;
}
#postit-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
#postit-tabs::-webkit-scrollbar { display: none; }

/* ── Entête : tuiles postits ─────────────────────────────────*/
#header-postit-tabs {
    display: none;
    gap: 5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: stretch;
    flex: 1;
}
#header-postit-tabs::-webkit-scrollbar { display: none; }
#header-postit-tabs > div {
    flex-shrink: 0;
    width: 68px;
    min-height: 44px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 4px 3px 12px 3px;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    user-select: none;
}

/* ── Variables dynamiques header & tuiles ──────────────────── */
:root {
    --header-h: 80px;
    --tile-radius: 0px;
    --border-w: 2px;
    --font-size: 14px;
    --font-family: sans-serif;
    --bubble-me-bg:     #18181b;
    --bubble-me-text:   #ffffff;
    --bubble-other-bg:  #ffffff;
    --bubble-other-text:#18181b;
}

/* Appliquer la hauteur header aux pages */
#p0, #p1, #p2, #p3 {
    padding-top: var(--header-h) !important;
}
#p3 { padding-top: var(--header-h) !important; }

/* Arrondi tuiles dynamique */
body { font-family: var(--font-family); font-size: var(--font-size); }
/* Tuiles groupes et pintalk : forme dynamique — border-radius appliqué par JS via style inline */
#groups-grid [id^="tile-"] {
    overflow: hidden;
    transition: border-radius 0.15s, width 0.15s, height 0.15s;
}
#header-postit-tabs > div {
    overflow: hidden;
}
/* Cercle : forcer carré */
#groups-grid.tiles-circle [id^="tile-"] {
    width: 88px !important;
    min-height: 88px !important;
    height: 88px !important;
    padding: 4px !important;
}
#acc-eink .acc-content #eink-sim,
.acc-content #eink-sim {
    height: 90px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
}

/* ── Image de fond ─────────────────────────────────────────── */
body.has-bg-image { background-attachment: fixed; background-size: cover; background-position: center; }
body.has-bg-image .page, body.has-bg-image .fixed-header { background: transparent; }
body.has-bg-image .fixed-header { background: rgba(255,255,255,0.85); backdrop-filter: blur(4px); }

/* ── Forme des boutons dynamique ─────────────────────────────*/
:root {
    --btn-radius: 0px;
}
button, .btn-send, .btn-black, .btn-plus-3d, .skin-btn {
    border-radius: var(--btn-radius, 0px) !important;
}

/* ── Page Groupes : zones de swipe latérales ────────────────── */
#p2 {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
#groups-list-container {
    /* Marges latérales = zones de swipe (doigt peut swiper sans toucher les tuiles) */
    padding-left: 10px;
    padding-right: 10px;
}
#groups-grid {
    /* Pas de padding horizontal ici, géré par le container */
    touch-action: pan-y pinch-zoom;
}
/* Les tuiles elles-mêmes bloquent le swipe horizontal → touch-action:none */
/* Mais la zone hors tuile (marges) laisse passer le swipe */
#groups-grid [id^="tile-"] {
    touch-action: none;
}
/* Indicateurs visuels subtils que les bords sont des zones de swipe */
#p2::before, #p2::after {
    content: '';
    position: fixed;
    top: var(--header-h, 80px);
    bottom: 65px;
    width: 10px;
    z-index: 10;
    pointer-events: none;
}
#p2::before { left: 0; background: linear-gradient(to right, rgba(0,0,0,0.04), transparent); }
#p2::after  { right: 0; background: linear-gradient(to left, rgba(0,0,0,0.04), transparent); }