/* =========================================================
   BLUUPI — ASSISTANT DESKTOP
   Fichier : /app/assets/styles/pages/desktop/assistant.css

   Rôle :
   - assistant IA version bureau
   - menu desktop identique aux autres pages
   - chat centré propre
   - input intégré
   - footer desktop visible
   - bottom-nav mobile cachée
========================================================= */

@media (min-width:1200px){

  /* =========================================================
     0. MENU DESKTOP — MÊME RENDU QUE INDEX
  ========================================================= */

  .desktop-header{
    width:100%;
    max-width:var(--desktop-max);
    height:78px;
    margin:0 auto;
    padding:0 4px;

    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:32px;

    background:transparent;
    position:relative;
    z-index:100;
  }

  .desktop-brand{
    display:flex !important;
    align-items:center;
    flex:0 0 auto;
  }

  .desktop-logo-img{
    width:132px;
    height:auto;
    display:block;
    object-fit:contain;
  }

  .desktop-nav{
    flex:1;
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:32px;
  }

  .desktop-nav a{
    display:inline-flex;
    align-items:center;

    color:#1f526f;
    font-size:14px;
    font-weight:850;
    white-space:nowrap;
    text-decoration:none;
  }

  .desktop-actions{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
    flex:0 0 auto;
  }

  .desktop-login{
    display:inline-flex;
    align-items:center;

    color:#1f526f;
    font-size:14px;
    font-weight:850;
    white-space:nowrap;
    text-decoration:none;
  }

  .desktop-register{
    min-height:42px;
    padding:0 20px;

    display:flex !important;
    align-items:center;
    justify-content:center;

    border-radius:999px;
    background:var(--primary);
    color:#fff;

    font-size:14px;
    font-weight:900;
    white-space:nowrap;
    text-decoration:none;

    box-shadow:0 10px 22px rgba(14,62,97,.16);
  }


  /* =========================================================
     1. BASE DESKTOP ASSISTANT
  ========================================================= */

  html,
  body{
    background:var(--desktop-bg) !important;
    color:var(--text);
    overflow-x:hidden;
  }

  body{
    min-height:100vh;
  }

  .bottom-nav{
    display:none !important;
  }

  .desktop-footer{
    display:block !important;
  }

  .app{
    width:100%;
    max-width:var(--desktop-max);
    min-height:auto;
    margin:0 auto;
    padding:34px 0 0;

    display:block;
    background:transparent !important;
    overflow:visible;
    border-radius:0;
  }


  /* =========================================================
     2. CONTENEUR ASSISTANT
  ========================================================= */

  .bluupi-zone,
  .app-main,
  .app-input{
    width:100%;
    max-width:980px;
    margin-left:auto;
    margin-right:auto;
  }


  /* =========================================================
     3. ZONE MASCOTTE
  ========================================================= */

  .bluupi-zone{
    padding:34px 0 0;
    text-align:center;

    position:relative;
    z-index:3;

    background:
      radial-gradient(circle at 50% 10%, rgba(92,216,244,.22), rgba(92,216,244,0) 42%),
      linear-gradient(135deg,#fff8e6,#ffffff 52%,#eef8fc);

    border:1px solid var(--desktop-border);
    border-bottom:0;
    border-radius:34px 34px 0 0;
    box-shadow:0 18px 46px rgba(14,62,97,.08);
  }

  .bluupi-avatar{
    width:210px;
    height:auto;
    display:block;
    margin:0 auto -70px;

    animation:bluupiDesktopFloat 2.6s ease-in-out infinite;
    position:relative;
    z-index:5;
  }

  @keyframes bluupiDesktopFloat{
    0%{
      transform:translateY(0) scale(1);
    }

    50%{
      transform:translateY(-5px) scale(1.015);
    }

    100%{
      transform:translateY(0) scale(1);
    }
  }


  /* =========================================================
     4. PANNEAU CHAT
  ========================================================= */

  .app-main{
    min-height:640px;

    display:flex;
    overflow:hidden;

    background:#0b324f;
    border:1px solid rgba(255,255,255,.08);
    border-radius:0 0 34px 34px;

    box-shadow:0 26px 70px rgba(14,62,97,.16);
  }

  .chat{
    width:100%;
    min-height:0;
    max-height:640px;

    padding:90px 46px 130px;

    overflow-y:auto;
    overflow-x:hidden;

    font-size:17px;
  }

  .msg{
    display:flex;
    margin-bottom:14px;
  }

  .msg.me{
    justify-content:flex-end;
  }

  .bubble{
    max-width:68%;
    padding:13px 16px;

    border-radius:22px;

    font-size:17px;
    line-height:1.42;
    white-space:pre-line;
    word-wrap:break-word;
    overflow-wrap:anywhere;
  }

  .bubble.bluupi{
    background:#127194;
    color:#fff;
    border-bottom-left-radius:7px;
    box-shadow:0 14px 34px rgba(0,0,0,.14);
  }

  .bubble.me{
    background:#E6EEF2;
    color:#0E3E61;
    border-bottom-right-radius:7px;
  }

  .chat .msg:first-child .bubble.bluupi{
    max-width:68%;
    margin:0;
    padding:13px 16px;

    border-radius:22px;
    border-bottom-left-radius:7px;

    font-size:17px;
    line-height:1.42;
    font-weight:400;
  }


  /* =========================================================
     5. INPUT DESKTOP
  ========================================================= */

  .app-input{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;

    width:100%;
    max-width:980px;

    margin:-100px auto 0;
    padding:0 28px 28px;

    background:transparent;
    border:0;
    z-index:20;
  }

  .input-row{
    width:100%;
    padding:12px;

    display:flex;
    align-items:center;
    gap:10px;

    background:rgba(7,31,51,.96);
    border:1px solid rgba(230,238,242,.12);
    border-radius:26px;
    box-shadow:0 18px 46px rgba(0,0,0,.22);
  }

  .mic-btn{
    width:52px;
    height:52px;
    flex:0 0 52px;

    border:0;
    border-radius:50%;

    background:rgba(92,214,244,.15);
    color:#fff;

    font-size:24px;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  .composer{
    position:relative;
    flex:1;
    min-width:0;

    display:flex;
    align-items:center;
  }

  .text-input{
    width:100%;
    height:54px;

    border:0;
    outline:0;
    border-radius:999px;

    background:#E6EEF2;
    color:#0E3E61;

    font-size:16px;
    padding:0 16px 0 54px;
  }

  .text-input::placeholder{
    color:#4B5A68;
  }

  .attach-btn{
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);

    width:40px;
    height:40px;

    border-radius:50%;
    border:1px solid rgba(92,214,244,.45);

    background:rgba(92,214,244,.22);
    color:#fff;

    font-size:25px;

    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
  }

  .send-btn{
    width:54px;
    height:54px;
    flex:0 0 54px;

    border:0;
    border-radius:50%;

    background:#5CD6F4;
    color:#0E3E61;

    font-size:0;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  .send-btn::before{
    content:"↑";
    font-size:34px;
    font-weight:900;
    line-height:1;
  }


  /* =========================================================
     6. MENU PIÈCES JOINTES
  ========================================================= */

  .attach-menu{
    display:none;
    position:absolute;
    left:0;
    bottom:calc(100% + 10px);

    min-width:170px;
    padding:8px;

    background:rgba(8,31,51,.96);
    border:1px solid rgba(230,238,242,.14);
    border-radius:16px;

    box-shadow:0 14px 40px rgba(0,0,0,.35);
    backdrop-filter:blur(10px);
    z-index:999;
  }

  .attach-menu.open{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .attach-item{
    border:0;
    background:rgba(255,255,255,.08);
    color:#fff;

    padding:10px 12px;
    border-radius:12px;

    text-align:left;
  }


  /* =========================================================
     7. ÉLÉMENTS ANCIENS / NON UTILISÉS
  ========================================================= */

  .assistant-topbar,
  .assistant-modes,
  .mode-btn,
  .account-btn,
  .bluupi-bubble,
  .weather-widget,
  .quick-start{
    display:none !important;
  }


  /* =========================================================
     8. ÉTAT CHAT DÉMARRÉ
  ========================================================= */

  body.chat-started .bluupi-zone{
    animation:none;
    opacity:1;
    transform:none;

    height:auto;
    padding:24px 0 0;
    margin-left:auto;
    margin-right:auto;

    pointer-events:auto;
  }

  body.chat-started .bluupi-avatar{
    width:130px;
    margin-bottom:-42px;
  }

  body.chat-started .chat{
    padding-top:62px;
  }


  /* =========================================================
     9. HOVER DESKTOP
  ========================================================= */

  .desktop-nav a,
  .desktop-login,
  .desktop-register,
  .mic-btn,
  .send-btn,
  .attach-btn,
  .attach-item{
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      background .18s ease,
      color .18s ease;
  }

  .desktop-nav a:hover,
  .desktop-login:hover{
    color:var(--blue);
  }

  .desktop-register:hover{
    background:#092f4c;
  }

  .mic-btn:hover,
  .send-btn:hover,
  .attach-btn:hover,
  .attach-item:hover{
    transform:translateY(-2px);
  }
}