/* admin.css - Admin panel, notifications, toast, stock editor, menu editor, inline edit, drag-drop */

/* ==========================================
   NOTIFICATIONS ADMIN SYSTEM
   ========================================== */

.admin-flash-notification {
    animation: admin-flash-red 1s ease-in-out 3;
}

.badge-animate {
    animation: badge-bounce 0.5s ease-in-out 3;
}

/* Toast notification interne admin */
.admin-toast {
    position: fixed;
    top: 100px;
    right: 20px;
    background: linear-gradient(135deg, var(--accent-modern), #ff6b6b);
    color: #fff;
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(255, 71, 87, 0.4);
    z-index: 10001;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    max-width: 350px;
    border-left: 4px solid #fff;
    cursor: pointer;
}

.admin-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.admin-toast-icon {
    font-size: 24px;
    margin-bottom: 10px;
}

.admin-toast-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
}

.admin-toast-body {
    font-size: 14px;
    opacity: 0.9;
}

.admin-toast-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    border-radius: 50%;
}

.admin-toast-close:hover {
    opacity: 1;
    background: rgba(255,255,255,0.2);
}

.admin-toast.show:hover {
    transform: translateX(0) scale(1.02);
}

/* Pulse dot pour statut connexion */
.pulse-dot {
    animation: pulse-dot 2s infinite;
}

/* Notification push permission button states */
#btnEnableNotifications.enabled {
    background: rgba(46, 204, 113, 0.2) !important;
    border-color: var(--success) !important;
    color: var(--success) !important;
}

#btnEnableNotifications.enabled i {
    color: var(--success);
}

/* Style pour nouvelle commande dans la liste */
.order-card.new-order {
    border: 2px solid var(--accent-modern);
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
    animation: new-order-pulse 2s ease-in-out infinite;
}

/* Drag & drop styles pour admin */
.sec[draggable="true"] {
    cursor: move;
}
.sec[draggable="true"]:active {
    cursor: grabbing;
}
.sec.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}
.sec.drag-over {
    border-top: 3px solid var(--accent-modern) !important;
}
.item.item-dragging {
    opacity: 0.4;
    transform: scale(0.96);
}
.item.item-drag-over {
    border-top: 3px solid var(--accent-modern) !important;
}

/* Admin Access */
.admin-access{
    display:none;
}

/* === Admin Panel avec nouvelle organisation === */
.admin-panel{
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(15,17,51,.98);
    z-index:10000;
    overflow-y:auto;
    padding:20px;
}

.admin-panel.active{display:block !important;}

.admin-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:40px;
    padding-bottom:30px;
    border-bottom:2px solid var(--accent-modern);
    flex-wrap:wrap;
    gap:20px;
}

.admin-content{max-width:1400px;margin:0 auto;}

.admin-section{
    background:var(--bg);
    border-radius:24px;
    padding:30px;
    margin-bottom:30px;
    border:1px solid var(--l);
}

.admin-section h3{
    color:var(--accent-modern);
    margin-bottom:25px;
    font-size:22px;
    display:flex;
    align-items:center;
    gap:15px;
}

.admin-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:25px;
}

.admin-input,.admin-select{
    width:100%;
    padding:15px;
    border-radius:12px;
    border:1px solid var(--l);
    background:rgba(0,0,0,.2);
    color:#fff;
    margin-bottom:15px;
    font-size:15px;
}

/* === Admin Tabs simplifiés et regroupés === */
.admin-tabs{
    display:flex;
    gap:8px;
    margin-bottom:20px;
    flex-wrap:wrap;
    border-bottom:1px solid var(--l);
    padding-bottom:10px;
}

.admin-tab{
    background:rgba(255,255,255,.05);
    border:1px solid var(--l);
    color:#fff;
    padding:8px 16px;
    border-radius:8px;
    cursor:pointer;
    transition:all .3s;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    white-space:nowrap;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:6px;
    font-family:var(--handwriting);
}

.admin-tab:hover{background:rgba(255,255,255,.1);}
.admin-tab.active{background:var(--accent-modern);border-color:var(--accent-modern);}

.admin-tab-content{display:none;}
.admin-tab-content.active{display:block !important;}

/* === Styles pour la gestion des commandes === */
.order-card{
    background:rgba(255,255,255,.03);
    border:1px solid var(--l);
    border-radius:16px;
    padding:20px;
    transition:all .3s;
}
.order-card:hover{border-color:rgba(255,255,255,.2);}
.order-card.pending{border-left:4px solid var(--warning);}
.order-card.preparing{border-left:4px solid #3498db;}
.order-card.ready{border-left:4px solid var(--success);}
.order-card.completed{border-left:4px solid #95a5a6;opacity:.7;}

.order-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:15px;
    flex-wrap:wrap;
    gap:10px;
}

.order-id{
    font-weight:700;
    font-size:16px;
    color:#fff;
}

.order-time{
    font-size:12px;
    color:var(--m);
}

.order-status-badge{
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:6px;
}

.order-status-badge.pending{background:rgba(243,156,18,.15);color:var(--warning);}
.order-status-badge.preparing{background:rgba(52,152,219,.15);color:#3498db;}
.order-status-badge.ready{background:rgba(46,204,113,.15);color:var(--success);}
.order-status-badge.completed{background:rgba(149,165,166,.15);color:#95a5a6;}

.order-details{
    background:rgba(0,0,0,.2);
    border-radius:12px;
    padding:15px;
    margin-bottom:15px;
}

.order-info-row{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.order-info-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--m);
}

.order-info-item i{
    color:var(--accent-modern);
    width:16px;
}

.order-items{
    margin-top:15px;
    padding-top:15px;
    border-top:1px dashed var(--l);
}

.order-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:8px 0;
    font-size:13px;
}

.order-item-name{color:#fff;}
.order-item-options{color:var(--m);font-size:11px;margin-top:2px;}
.order-item-comment{color:var(--warning);font-size:11px;margin-top:2px;}
.order-item-price{font-weight:700;color:#fff;}

.order-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:15px;
    margin-top:15px;
    border-top:2px solid var(--l);
    font-size:18px;
    font-weight:900;
    color:#fff;
}

.order-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.order-btn{
    padding:10px 18px;
    border:none;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:all .2s;
    display:flex;
    align-items:center;
    gap:8px;
}

.order-btn:hover{transform:translateY(-2px);}

.order-btn-prepare{background:rgba(52,152,219,.2);color:#3498db;border:1px solid #3498db;}
.order-btn-prepare:hover{background:rgba(52,152,219,.3);}

.order-btn-ready{background:rgba(46,204,113,.2);color:var(--success);border:1px solid var(--success);}
.order-btn-ready:hover{background:rgba(46,204,113,.3);}

.order-btn-complete{background:rgba(149,165,166,.2);color:#95a5a6;border:1px solid #95a5a6;}
.order-btn-complete:hover{background:rgba(149,165,166,.3);}

.order-btn-pending{background:rgba(243,156,18,.2);color:var(--warning);border:1px solid var(--warning);}
.order-btn-pending:hover{background:rgba(243,156,18,.3);}

.order-btn-delete{background:transparent;color:var(--accent-modern);border:1px solid var(--accent-modern);}
.order-btn-delete:hover{background:rgba(255,71,87,.1);}

.order-filter-btn.active{box-shadow:0 0 0 2px currentColor;}

/* === Éditeur de menu en cartes === */
.menu-editor-card{
    background:rgba(255,255,255,.03);
    border:1px solid var(--l);
    border-radius:20px;
    padding:25px;
    margin-bottom:25px;
    transition:all .3s;
}

.menu-editor-card:hover{border-color:rgba(255,255,255,.2);}

.menu-editor-header{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:1px solid var(--l);
}

.menu-editor-header input{
    font-family:inherit;
    font-size:20px;
    font-weight:700;
    background:transparent;
    border:none;
    color:#fff;
    border-bottom:2px solid transparent;
    transition:all .3s;
    padding:5px;
    flex:1;
}

.menu-editor-header input:focus{
    outline:none;
    border-color:var(--accent-modern);
    background:rgba(0,0,0,.2);
}

.menu-items-list{display:flex;flex-direction:column;gap:15px;}

.menu-item-row{
    display:grid;
    grid-template-columns:2fr 1fr auto auto;
    gap:12px;
    align-items:center;
    padding:15px;
    background:rgba(0,0,0,.2);
    border-radius:12px;
}

.menu-item-row input{
    background:rgba(255,255,255,.05);
    border:1px solid var(--l);
    color:#fff;
    padding:12px;
    border-radius:8px;
    font-size:14px;
}

.menu-item-row input:focus{outline:none;border-color:var(--accent-modern);}
.menu-item-row input[name="price"]{text-align:right;}

.menu-item-row button{
    width:40px;
    height:40px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    transition:all .3s;
    font-size:16px;
}

.menu-item-row .toggle-btn{background:var(--success);color:#fff;}
.menu-item-row .toggle-btn.off{background:var(--warning);}
.menu-item-row .delete-btn{background:#ff5a5a;color:#fff;}
.menu-item-row .delete-btn:hover{background:#ff3333;transform:scale(1.1);}

.add-item-btn{
    width:100%;
    padding:15px;
    background:rgba(255,255,255,.05);
    border:2px dashed var(--l);
    color:var(--m);
    border-radius:12px;
    cursor:pointer;
    transition:all .3s;
    font-weight:600;
    margin-top:15px;
}

.add-item-btn:hover{
    border-color:var(--accent-modern);
    color:var(--accent-modern);
    background:rgba(255,71,87,.1);
}

/* Category Management */
.category-card{
    background:rgba(255,255,255,.03);
    border:1px solid var(--l);
    border-radius:16px;
    padding:20px;
    display:flex;
    align-items:center;
    gap:15px;
    cursor:pointer;
    transition:all .3s;
}

.category-card:hover{
    border-color:var(--accent-modern);
    transform:translateX(5px);
}

.category-card.active{
    background:rgba(255,71,87,.1);
    border-color:var(--accent-modern);
}

.category-card .cat-icon{font-size:32px;}
.category-card .cat-info{flex:1;}
.category-card .cat-name{font-weight:700;font-size:16px;}
.category-card .cat-count{font-size:13px;color:var(--m);}

/* Stock Management */
.stock-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:15px;
}

.stock-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:15px;
    background:rgba(0,0,0,.2);
    border-radius:12px;
    border:1px solid var(--l);
    transition:all .3s;
    cursor:pointer;
}

.stock-item:hover{border-color:rgba(255,255,255,.3);}
.stock-item.out-of-stock{opacity:.5;border-color:var(--warning);}

.stock-toggle{
    width:24px;
    height:24px;
    border-radius:6px;
    border:2px solid var(--l);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .3s;
}

.stock-item:not(.out-of-stock) .stock-toggle{
    background:var(--success);
    border-color:var(--success);
}

.stock-item:not(.out-of-stock) .stock-toggle::after{
    content:'#';
    color:#fff;
    font-weight:900;
}

.stock-item.out-of-stock .stock-toggle{
    background:var(--warning);
    border-color:var(--warning);
}

.stock-item.out-of-stock .stock-toggle::after{
    content:'X';
    color:#000;
    font-weight:900;
}

.stock-info{flex:1;}
.stock-name{font-weight:600;font-size:14px;}
.stock-cat{font-size:12px;color:var(--m);}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
    margin-bottom:40px;
}

.stat-card{
    background:rgba(255,255,255,.03);
    padding:30px;
    border-radius:20px;
    border:1px solid var(--l);
    text-align:center;
    transition:all .3s;
}

.stat-card:hover{
    transform:translateY(-5px);
    border-color:var(--accent-modern);
}

.stat-card h4{
    color:var(--m);
    font-size:14px;
    margin-bottom:15px;
    text-transform:uppercase;
    letter-spacing:2px;
}

.stat-card .value{
    font-size:42px;
    font-weight:900;
    color:var(--accent-modern);
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:2px;
}

/* Admin Search */
.admin-search{
    margin-bottom:25px;
    position:relative;
}

.admin-search input{
    width:100%;
    padding:15px 25px 15px 55px;
    border-radius:12px;
    border:2px solid var(--l);
    background:rgba(0,0,0,.3);
    color:#fff;
    font-size:16px;
}

.admin-search i{
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    color:var(--m);
    font-size:20px;
}

/* Admin URL Config */
.url-config-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
}

.url-config-item{
    background:rgba(255,255,255,.05);
    padding:25px;
    border-radius:16px;
    border:1px solid var(--l);
}

.url-config-item label{
    display:block;
    margin-bottom:10px;
    color:var(--accent-modern);
    font-weight:700;
    text-transform:uppercase;
    font-size:14px;
}

.url-config-item input{
    width:100%;
    padding:15px;
    border-radius:10px;
    border:1px solid var(--l);
    background:rgba(0,0,0,.3);
    color:#fff;
    margin-bottom:15px;
}

/* === Admin Text Editor inline === */
.text-editor{
    background:rgba(255,255,255,.05);
    padding:25px;
    border-radius:16px;
    margin-bottom:20px;
    border:1px solid var(--l);
}

.text-editor label{
    display:block;
    margin-bottom:10px;
    color:var(--accent-modern);
    font-weight:700;
    font-size:14px;
}

.text-editor input,.text-editor textarea{
    width:100%;
    padding:15px;
    border-radius:10px;
    border:1px solid var(--l);
    background:rgba(0,0,0,.3);
    color:#fff;
    margin-bottom:15px;
    font-family:inherit;
}

.text-editor textarea{
    min-height:100px;
    resize:vertical;
}

/* === Inline editing sur le site === */
body:not(.admin-mode) .editable{
    cursor:default;
}

body.admin-mode .editable{
    position:relative;
    cursor:text;
    transition:all .3s;
    border-radius:5px;
    padding:5px;
    margin:-5px;
}

body.admin-mode .editable:hover{
    background:rgba(255,71,87,.1);
    outline:2px dashed var(--accent-modern);
}

.editing{
    background:rgba(0,0,0,.5) !important;
    outline:2px solid var(--accent-modern) !important;
    padding:8px !important;
    border-radius:8px !important;
}

/* Admin Front Mode */
body.admin-mode .admin-item-tools {
    display:flex !important;
}

body.admin-mode .editable-item-name,
body.admin-mode .editable-item-desc {
    cursor:text !important;
    border-bottom:1px dashed rgba(255,255,255,.3) !important;
}

body.admin-mode .editable-item-name:hover,
body.admin-mode .editable-item-desc:hover {
    background:rgba(255,71,87,.1) !important;
    outline:1px dashed var(--accent-modern) !important;
}

/* Item hors stock indéfiniment - visible uniquement admin */
.item.out-indefinite {
    opacity:0.7;
    background:rgba(255,71,87,.05) !important;
    border:1px dashed #ff4757 !important;
}

/* Images éditables en mode admin */
body.admin-mode img.admin-editable-img {
    position: relative;
    cursor: pointer !important;
    transition: all 0.3s;
}

body.admin-mode img.admin-editable-img:hover {
    outline: 3px dashed var(--accent-modern) !important;
    outline-offset: 3px;
    filter: brightness(1.1);
}

body.admin-mode img.admin-editable-img::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    background: rgba(0,0,0,0.7);
    padding: 10px;
    border-radius: 50%;
    pointer-events: none;
}

/* Backgrounds éditables en mode admin */
body.admin-mode .admin-editable-bg {
    position: relative;
    cursor: pointer !important;
}

body.admin-mode .admin-editable-bg:hover::before {
    content: 'Cliquez pour changer l\'image';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
}

body.admin-mode .admin-editable-bg:hover {
    outline: 3px dashed var(--accent-modern) !important;
    outline-offset: -3px;
}

/* Textes éditables en mode admin */
body.admin-mode .admin-editable-text {
    cursor: text !important;
    position: relative;
    transition: all 0.2s;
}

body.admin-mode .admin-editable-text:hover {
    background: rgba(255,71,87,.1) !important;
    outline: 2px dashed var(--accent-modern) !important;
    outline-offset: 2px;
    border-radius: 4px;
}

body.admin-mode .admin-editable-text.editing {
    background: rgba(0,0,0,.8) !important;
    outline: 2px solid var(--accent-modern) !important;
    padding: 8px !important;
    border-radius: 8px !important;
    color: #fff !important;
}

/* Horaires éditables en mode admin */
body.admin-mode .editable-hours {
    cursor: pointer !important;
    position: relative;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s;
}

body.admin-mode .editable-hours:hover {
    background: rgba(255,71,87,.1) !important;
    outline: 2px dashed var(--accent-modern) !important;
    outline-offset: 2px;
}

body.admin-mode .editable-hours:hover::before {
    content: 'Cliquez pour modifier les horaires';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-modern);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 100;
}

/* Tous les textes éditables en mode admin */
body.admin-mode h1, body.admin-mode h2, body.admin-mode h3,
body.admin-mode p, body.admin-mode span:not(.price):not(.fab-label),
body.admin-mode div:not(.item):not(.sec):not(.admin-item-tools) {
    cursor: default;
}

body.admin-mode .editable, body.admin-mode [contenteditable="true"] {
    cursor: text !important;
}

/* Badge Admin Front */
#adminFrontBadge {
    animation:slideInLeft 0.3s ease;
}

#adminFrontBadge:hover {
    transform:scale(1.05);
    box-shadow:0 6px 30px rgba(46,204,113,.6);
}

/* Heatmap visualization */
.heatmap-container{
    background:rgba(0,0,0,.2);
    border-radius:16px;
    padding:30px;
    margin-top:20px;
}

.heatmap-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;
    margin-top:20px;
}

.heatmap-cell{
    aspect-ratio:1;
    border-radius:8px;
    background:rgba(255,255,255,.05);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    transition:all .3s;
}

.heatmap-cell:hover{transform:scale(1.1);}
.heatmap-cell.low{background:rgba(46,204,113,.2);}
.heatmap-cell.medium{background:rgba(255,193,7,.3);}
.heatmap-cell.high{background:rgba(255,71,87,.4);}

/* === Image Position Editor (admin) === */
.img-position-overlay {
    position:absolute;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.6);display:none;flex-direction:column;
    align-items:center;justify-content:center;gap:10px;z-index:20;
    cursor:move;border-radius:inherit;
}
body.admin-mode .img-position-wrap:hover .img-position-overlay { display:flex; }
.img-position-overlay input[type="range"] {
    width:120px;accent-color:var(--accent-modern);
}
.img-position-overlay button {
    padding:6px 14px;border:none;border-radius:8px;font-size:12px;
    font-weight:700;cursor:pointer;color:#fff;
}
.img-position-overlay .btn-save { background:var(--success); }
.img-position-overlay .btn-reset { background:var(--warning);color:#000; }
.img-position-wrap { position:relative;overflow:hidden; }

/* === Floating Images === */
.floating-img {
    position:absolute;z-index:5;cursor:default;pointer-events:none;
    transition:transform .1s;
}
body.admin-mode .floating-img {
    cursor:move;pointer-events:auto;border:2px dashed transparent;
}
body.admin-mode .floating-img:hover { border-color:var(--accent-modern); }
.floating-img img { width:100%;height:auto;display:block; }
.floating-controls {
    position:absolute;top:-36px;right:0;display:none;gap:4px;
}
body.admin-mode .floating-img:hover .floating-controls { display:flex; }
.floating-controls button {
    width:28px;height:28px;border:none;border-radius:6px;
    cursor:pointer;font-size:12px;color:#fff;display:flex;
    align-items:center;justify-content:center;
}
.fab-add-img {
    position:fixed;bottom:100px;right:20px;width:56px;height:56px;
    border-radius:50%;background:var(--accent-modern);color:#fff;
    border:none;font-size:24px;cursor:pointer;z-index:1000;
    box-shadow:0 4px 20px rgba(255,71,87,.4);display:none;
    align-items:center;justify-content:center;transition:transform .3s;
}
body.admin-mode .fab-add-img { display:flex; }
.fab-add-img:hover { transform:scale(1.1); }

/* Floating Image Style Panel */
.float-style-panel {
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    background:var(--bg);border:1px solid var(--l);border-radius:16px;
    padding:25px;width:340px;max-height:80vh;overflow-y:auto;z-index:10001;
    box-shadow:0 20px 60px rgba(0,0,0,.6);display:none;
}
.float-style-panel.active { display:block; }
.float-style-panel h4 { font-family:var(--handwriting);font-size:24px;margin-bottom:15px; }
.float-style-panel label { display:block;margin:10px 0 5px;color:var(--m);font-size:13px; }
.float-style-panel input[type="range"],
.float-style-panel select {
    width:100%;padding:8px;background:rgba(255,255,255,.05);
    border:1px solid var(--l);border-radius:8px;color:#fff;
}
.float-style-panel .panel-actions {
    display:flex;gap:10px;margin-top:15px;
}
.float-style-panel .panel-actions button {
    flex:1;padding:10px;border:none;border-radius:10px;
    font-weight:700;cursor:pointer;color:#fff;
}

/* === EmailJS Config === */
.emailjs-section input, .emailjs-section select {
    width:100%;padding:10px;margin-bottom:8px;background:rgba(255,255,255,.05);
    border:1px solid var(--l);border-radius:8px;color:#fff;font-size:13px;
}

/* === Theme Editor === */
.theme-grid {
    display:grid;grid-template-columns:1fr 1fr;gap:15px;
}
.color-item {
    display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.color-item input[type="color"] {
    width:44px;height:44px;border:2px solid var(--l);border-radius:10px;
    cursor:pointer;background:transparent;padding:2px;
}
.color-item label { color:var(--m);font-size:13px;flex:1; }
.font-select {
    width:100%;padding:10px;background:rgba(255,255,255,.05);
    border:1px solid var(--l);border-radius:8px;color:#fff;font-size:13px;
    margin-bottom:10px;
}
.preview-box {
    padding:20px;border-radius:12px;border:1px solid var(--l);
    margin-top:15px;text-align:center;
}

/* Chatbot action button */
.chat-action-btn{display:inline-block;margin:4px 2px;padding:6px 14px;background:var(--accent-modern);color:#fff;border:none;border-radius:20px;font-size:12px;cursor:pointer;transition:opacity .2s;}
.chat-action-btn:hover{opacity:.85;}

/* Édition texte story en admin */
.editable-story-text{
    cursor:text;
}
.editable-story-text:hover{
    background:rgba(255,255,255,0.03);
    border-radius:12px;
}
.editable-story-text h2:hover, .editable-story-text p:hover{
    outline:1px dashed var(--accent-modern);
    outline-offset:4px;
}

/* Upload media en mode admin */
.story-image .admin-img-upload, .story-media .admin-media-upload{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.7);
    cursor:pointer;
    flex-direction:column;
    gap:10px;
    z-index:10;
}

.story-image:hover .admin-img-upload, .story-media:hover .admin-media-upload{display:flex;}
.admin-img-upload i, .admin-media-upload i{font-size:40px;color:var(--accent-modern);}
.admin-img-upload span, .admin-media-upload span{color:#fff;font-size:14px;font-weight:600;}