/* ═══════════════════════════════════════════════════════
   MixReview — Main Stylesheet
   ═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Thème sombre (défaut) ── */
:root {
  --bg:        #0E0E0E;
  --surface:   #161616;
  --surface2:  #1E1E1E;
  --surface3:  #252525;
  --border:    #2A2A2A;
  --border2:   #333333;
  --accent:    #C0614A;
  --accent-d:  #A04E3A;
  --green:     #3ecf8e;
  --yellow:    #f5c842;
  --blue:      #4a9eff;
  --text:      #F5F0E8;
  --muted:     #6A6460;
  --muted2:    #3E3A38;
  --radius:    6px;
  --radius-lg: 12px;
  /* Waveform */
  --wf-played:   var(--accent);
  --wf-unplayed: rgba(245,240,232,.10);
  --pin-color:   #f5c842;
  --pin-dot-bg:  #f5c842;
  --pin-line:    rgba(245,200,66,.25);
}

/* ── Thème clair ── */
[data-theme="light"] {
  --bg:        #F5F0E8;
  --surface:   #FFFFFF;
  --surface2:  #EDE8E0;
  --surface3:  #E0DBD2;
  --border:    #D4CFC6;
  --border2:   #C0BAB0;
  --accent:    #B85540;
  --accent-d:  #9A4433;
  --green:     #1a9e68;
  --yellow:    #9a6f00;
  --blue:      #2070cc;
  --text:      #0E0E0E;
  --muted:     #8A8478;
  --muted2:    #B0AA9E;
  /* Waveform */
  --wf-played:   var(--accent);
  --wf-unplayed: rgba(14,14,14,.15);
  /* Pins */
  --pin-color:   #7a5600;
  --pin-dot-bg:  #7a5600;
  --pin-line:    rgba(122,86,0,.4);
}

/* ── Thème clair — bulles chat ── */
[data-theme="light"] .cb--left .cb-bubble {
  background: #E0DBD2;
  border-color: #C0BAB0;
}
[data-theme="light"] .cb--right .cb-bubble {
  background: color-mix(in srgb, var(--accent) 15%, #fff);
  border-color: color-mix(in srgb, var(--accent) 28%, #D4CFC6);
}
[data-theme="light"] .cb-reply--admin .cb-reply-text, [data-theme="light"] .cb-reply--right .cb-reply-text {
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  border-color: color-mix(in srgb, var(--accent) 20%, #D4CFC6);
}
[data-theme="light"] .cb-reply--client .cb-reply-text, [data-theme="light"] .cb-reply--left .cb-reply-text {
  background: #E0DBD2;
  border-color: #C0BAB0;
}
[data-theme="light"] .pin-popup {
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
}
[data-theme="light"] .pp-chat-scroll::-webkit-scrollbar-thumb { background: var(--border2); }
.theme-btn{background:none;border:none;cursor:pointer;color:var(--muted);
  padding:6px;border-radius:var(--radius);display:flex;align-items:center;
  justify-content:center;transition:color .15s,background .15s;flex-shrink:0;line-height:0;}
.theme-btn:hover{color:var(--text);background:var(--surface2);}
.theme-btn .icon-sun{display:none;}
.theme-btn .icon-moon{display:block;}
[data-theme="light"] .theme-btn .icon-sun{display:block;}
[data-theme="light"] .theme-btn .icon-moon{display:none;}

html,body {
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  line-height:1.6;
}

/* ── Top nav ─────────────────────────────────────────── */
.topnav {
  display:flex;align-items:center;gap:24px;
  padding:0 32px;height:52px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.topnav-logo {
  font-family:'Bebas Neue',cursive;font-size:22px;
  letter-spacing:3px;color:var(--accent);text-decoration:none;
}
.topnav-logo span{color:var(--text);}
.topnav-right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.topnav-right a{color:var(--muted);text-decoration:none;font-size:13px;
  transition:color .15s;}
.topnav-right a:hover{color:var(--text);}
.btn-logout{color:var(--muted) !important;}

/* ── Layout ──────────────────────────────────────────── */
.page{max-width:1100px;margin:0 auto;padding:40px 32px;}
.page-sm{max-width:680px;margin:0 auto;padding:40px 32px;}

/* ── Typography ──────────────────────────────────────── */
h1{font-family:'Bebas Neue',cursive;font-size:36px;letter-spacing:2px;
  color:var(--text);line-height:1;}
h2{font-family:'Bebas Neue',cursive;font-size:24px;letter-spacing:1.5px;}
h3{font-size:15px;font-weight:500;color:var(--text);}
.label-mono{font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);}

/* ── Buttons ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--radius);border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  text-decoration:none;transition:background .15s,transform .1s,opacity .15s;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-d);}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border2);}
.btn-ghost:hover{color:var(--text);border-color:var(--border2);background:var(--surface2);}
.btn-danger{background:rgba(232,69,69,.15);color:var(--accent);border:1px solid rgba(232,69,69,.25);}
.btn-danger:hover{background:rgba(232,69,69,.25);}
.btn-green{background:rgba(62,207,142,.15);color:var(--green);border:1px solid rgba(62,207,142,.25);}
.btn-green:hover{background:rgba(62,207,142,.25);}
.btn-sm{padding:5px 12px;font-size:12px;}
.btn-icon{padding:7px;border-radius:var(--radius);}

/* ── Forms ───────────────────────────────────────────── */
.form-group{margin-bottom:20px;}
.form-group label{display:block;margin-bottom:7px;font-size:11px;
  font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.form-control{width:100%;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--text);font-family:'DM Sans',sans-serif;
  font-size:14px;padding:10px 14px;outline:none;transition:border-color .2s;}
.form-control:focus{border-color:var(--accent);}
.form-control::placeholder{color:var(--muted);}
textarea.form-control{resize:vertical;min-height:80px;}

/* ── Cards / Surfaces ────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:24px;}
.card-hover{transition:border-color .2s,transform .15s;}
.card-hover:hover{border-color:var(--border2);transform:translateY(-2px);}

/* ── Project grid ────────────────────────────────────── */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;margin-top:32px;}
.project-card{display:block;text-decoration:none;color:inherit;}
.project-card .pc-head{display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:12px;}
.project-card h3{font-family:'Bebas Neue',cursive;font-size:20px;letter-spacing:1px;}
.status-badge{display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;font-size:11px;font-family:'DM Mono',monospace;}
.status-active{background:rgba(62,207,142,.1);color:var(--green);}
.status-archived{background:rgba(90,90,98,.1);color:var(--muted);}
.pc-meta{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:8px;}
.pc-meta span{display:flex;align-items:center;gap:4px;}

/* ── Badges ──────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;font-size:10px;font-family:'DM Mono',monospace;}
.badge-red{background:rgba(232,69,69,.2);color:var(--accent);}
.badge-green{background:rgba(62,207,142,.2);color:var(--green);}
.badge-gray{background:var(--surface3);color:var(--muted);}

/* ── Modal ───────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);
  display:none;align-items:center;justify-content:center;z-index:200;
  backdrop-filter:blur(4px);}
.modal-backdrop.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;width:100%;max-width:480px;
  box-shadow:0 24px 80px rgba(0,0,0,.6);}
.modal h2{margin-bottom:24px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;}

/* ── Scrollbars ──────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

/* ── Utilities ───────────────────────────────────────── */
.flex{display:flex;}.flex-col{flex-direction:column;}
.items-center{align-items:center;}.justify-between{justify-content:space-between;}
.gap-8{gap:8px;}.gap-12{gap:12px;}.gap-16{gap:16px;}
.mt-8{margin-top:8px;}.mt-16{margin-top:16px;}.mt-24{margin-top:24px;}.mt-32{margin-top:32px;}
.mb-8{margin-bottom:8px;}.mb-16{margin-bottom:16px;}
.text-muted{color:var(--muted);}
.text-sm{font-size:12px;}
.text-mono{font-family:'DM Mono',monospace;}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.divider{border:none;border-top:1px solid var(--border);margin:24px 0;}

/* ── Empty state ─────────────────────────────────────── */
.empty-state{text-align:center;padding:60px 20px;color:var(--muted);}
.empty-state svg{margin-bottom:16px;opacity:.3;}
.empty-state p{font-size:16px;margin-bottom:8px;color:var(--text);}
.empty-state small{font-size:12px;}

/* ── Toast ───────────────────────────────────────────── */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:500;
  display:flex;flex-direction:column;gap:10px;}
.toast{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 18px;font-size:13px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  animation:toastIn .25s ease both;}
.toast.success{border-left:3px solid var(--green);}
.toast.error{border-left:3px solid var(--accent);}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════════
   TIROIR MESSAGES GLOBAUX
══════════════════════════════════════════ */
.msg-btn{position:relative;background:none;border:none;cursor:pointer;
  color:var(--muted);padding:6px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,background .15s;flex-shrink:0;line-height:0;
  -webkit-appearance:none;appearance:none;}
.msg-btn:hover{color:var(--text);background:var(--surface2);}
.msg-btn-badge{position:absolute;top:2px;right:2px;width:8px;height:8px;
  border-radius:50%;background:var(--accent);border:2px solid var(--surface);
  display:none;}
.msg-btn-badge.on{display:block;}

/* Topnav doit passer au dessus du tiroir */
.topnav{z-index:400 !important;}

/* Overlay — commence sous la topnav */
.msg-overlay{
  position:fixed;left:0;right:0;bottom:0;
  top:0;                          /* plein écran pour le clic de fermeture */
  background:rgba(0,0,0,.45);
  z-index:350;
  opacity:0;pointer-events:none;
  transition:opacity .22s;
}
.msg-overlay.open{opacity:1;pointer-events:all;}

/* Tiroir — commence après la topnav grâce à top:0 mais le contenu est visible */
.msg-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:340px;max-width:100vw;
  background:var(--surface);
  border-left:1px solid var(--border);
  z-index:351;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.25);
}
.msg-drawer.open{transform:translateX(0);}

/* Header du tiroir */
.msg-drawer-hd{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  /* Même hauteur que topnav pour aligner visuellement */
  min-height:52px;
  background:var(--surface);
}
.msg-drawer-hd h3{flex:1;font-size:13px;font-weight:500;}
.msg-close{
  background:none;border:none;cursor:pointer;color:var(--muted);
  line-height:0;padding:6px;border-radius:4px;
  transition:color .13s,background .13s;
}
.msg-close:hover{color:var(--text);background:var(--surface2);}

/* Fil de messages */
.msg-feed{
  flex:1;overflow-y:auto;
  padding:12px 12px 8px;
  display:flex;flex-direction:column;gap:8px;
}
.msg-feed::-webkit-scrollbar{width:3px;}
.msg-feed::-webkit-scrollbar-thumb{background:var(--border2);}
.msg-empty{
  color:var(--muted);font-size:12px;text-align:center;
  margin:auto;padding:20px;line-height:1.6;
}

/* Bulles de message */
.msg-bubble{display:flex;flex-direction:column;width:100%;gap:2px;}
.msg-bubble--left {align-items:flex-start;}
.msg-bubble--right{align-items:flex-end;}
.msg-bubble-inner{display:flex;align-items:flex-end;gap:8px;max-width:88%;}
.msg-bubble--left  .msg-bubble-inner{flex-direction:row;}
.msg-bubble--right .msg-bubble-inner{flex-direction:row;}
.msg-bubble-content{display:flex;flex-direction:column;gap:2px;max-width:82%;}
.msg-bubble--right .msg-bubble-content{align-items:flex-end;}
.msg-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.msg-avatar--initials{background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:var(--muted);font-family:'DM Mono',monospace;}
.msg-bubble--left {align-items:flex-start;}
.msg-bubble--right{align-items:flex-end;}
.msg-bubble-name{
  font-size:10px;color:var(--muted);
  font-family:'DM Mono',monospace;padding:0 2px;
}
.msg-bubble-body{
  padding:9px 13px;font-size:12px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;max-width:82%;
}
.msg-bubble--left  .msg-bubble-body{
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:4px 16px 16px 16px;
  color:var(--text);
}
.msg-bubble--right .msg-bubble-body{
  background:color-mix(in srgb,var(--accent) 18%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border2));
  border-radius:16px 4px 16px 16px;
  color:var(--text);
}
.msg-bubble-time{
  font-size:10px;color:var(--muted2);padding:0 2px;
  font-family:'DM Mono',monospace;
}
.msg-del{
  background:none;border:none;cursor:pointer;color:var(--muted2);
  font-size:10px;padding:1px 4px;border-radius:3px;
  opacity:0;transition:opacity .13s;
}
.msg-bubble:hover .msg-del{opacity:1;}
.msg-del:hover{color:var(--accent);}

/* Zone de saisie */
.msg-compose{
  padding:10px 12px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;flex-shrink:0;
  background:var(--surface);
}
.msg-compose-name input{
  width:100%;background:var(--surface2);border:1px solid var(--border);
  border-radius:4px;color:var(--text);font-size:12px;padding:5px 8px;
  outline:none;font-family:'DM Sans',sans-serif;transition:border-color .2s;
}
.msg-compose-name input:focus{border-color:var(--accent);}
.msg-compose-row{display:flex;gap:6px;align-items:flex-end;}
.msg-compose-row textarea{
  flex:1;background:var(--surface2);border:1px solid var(--border);
  border-radius:4px;color:var(--text);font-size:12px;padding:7px 9px;
  outline:none;resize:none;font-family:'DM Sans',sans-serif;
  transition:border-color .2s;min-height:38px;max-height:100px;
}
.msg-compose-row textarea:focus{border-color:var(--accent);}
.msg-compose-row textarea::placeholder{color:var(--muted);}
.msg-send{
  background:var(--accent);color:#fff;border:none;border-radius:4px;
  padding:8px 12px;cursor:pointer;line-height:0;
  transition:background .13s;flex-shrink:0;
}
.msg-send:hover{background:var(--accent-d);}

/* Thème clair */
[data-theme="light"] .msg-bubble--left  .msg-bubble-body{background:#dcdcec;border-color:#b8b8d0;}
[data-theme="light"] .msg-bubble--right .msg-bubble-body{
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  border-color:color-mix(in srgb,var(--accent) 25%,#c8c8d6);
}
[data-theme="light"] .msg-drawer{box-shadow:-4px 0 20px rgba(0,0,0,.12);}

/* Mobile — tiroir plein écran */
@media(max-width:480px){
  .msg-drawer{width:100vw;border-left:none;}
}

/* ── Mobile global ───────────────────────────────────── */
@media(max-width:640px){
  .topnav { padding: 0 12px; height: 48px; gap: 8px; }
  .topnav-right { gap: 8px; }
  .page { padding: 16px 12px; }
  .page-sm { padding: 16px 12px; }
  /* Logo : icône seule */
  .logo-text { display: none; }
  .logo-slogan { display: none !important; }
}