/* Woospeak AI Coach — mobile/PWA layer
 * Purpose: make the existing WordPress front feel app-like on iPhone/Android without changing business logic.
 */

html.ws-pwa-standalone,
html.ws-pwa-standalone body,
body.woospeak-ai-page {
  min-height: 100%;
  min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

body.woospeak-ai-page {
  background: #f6f8fb;
  touch-action: manipulation;
}

body.woospeak-ai-page .woospeak-ai-app {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.woospeak-ai-page .woospeak-ai-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

/* PWA install prompt */
.ws-pwa-install {
  position: fixed;
  left: max(14px, env(safe-area-inset-left, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 99990;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 22px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.ws-pwa-install.is-visible {
  display: flex;
}

.ws-pwa-install__content {
  min-width: 0;
}

.ws-pwa-install__title {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.ws-pwa-install__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: #475569;
}

.ws-pwa-install__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ws-pwa-install__btn,
.ws-pwa-install__close {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}

.ws-pwa-install__btn {
  padding: 0 14px;
  color: #fff;
  background: #0f172a;
}

.ws-pwa-install__close {
  width: 40px;
  color: #334155;
  background: rgba(15, 23, 42, 0.08);
}

.ws-pwa-ios-help {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  padding: 24px;
  background: rgba(15, 23, 42, 0.52);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.ws-pwa-ios-help.is-visible {
  display: grid;
  place-items: end center;
}

.ws-pwa-ios-help__card {
  width: min(100%, 430px);
  padding: 20px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.28);
}

.ws-pwa-ios-help__card h3 {
  margin: 0 0 10px;
  font-size: 19px;
  color: #0f172a;
}

.ws-pwa-ios-help__card ol {
  margin: 0 0 18px 20px;
  padding: 0;
  color: #334155;
  line-height: 1.55;
}

.ws-pwa-ios-help__card button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #0f172a;
  font-weight: 800;
}

/* =========================================================
   MOBILE APPLICATION LAYOUT
   Source unique mobile — structure stable

   Objectifs :
   1) conserver le header/menu existant
   2) aligner légèrement avatar + menus
   3) garder Chat / EN / FR sous le chat
   4) bouton ? = mode d'emploi existant en pop-up plein écran
   5) bouton micro-fiche = card existante en pop-up plein écran
========================================================= */

@media (max-width: 780px) {

  html,
  body.woospeak-ai-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
    -webkit-text-size-adjust: 100% !important;
  }

  body.woospeak-ai-page #woospeak-ai-app,
  body.woospeak-ai-page .woospeak-ai-app,
  body.woospeak-ai-page .woospeak-ai-shell,
  body.woospeak-ai-page .woospeak-ai-panels,
  body.woospeak-ai-page .woospeak-ai-panel,
  body.woospeak-ai-page .woospeak-ai-layout,
  body.woospeak-ai-page .woospeak-ai-chat {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.woospeak-ai-page #woospeak-ai-app,
  body.woospeak-ai-page .woospeak-ai-app {
    margin: 0 auto !important;
    padding: 0 8px 12px !important;
  }

  body.woospeak-ai-page .woospeak-ai-shell {
    padding: 0 !important;
    gap: 6px !important;
    min-height: auto !important;
  }

  /* =========================================================
     HEADER EXISTANT : avatar à gauche + menu existant à droite
  ========================================================= */

  body.woospeak-ai-page .woospeak-ai-hero,
  body.woospeak-ai-page .woospeak-ai-hero.ws-coach-hero,
  body.woospeak-ai-page .ws-coach-hero {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 4px !important;
    padding: calc(5px + env(safe-area-inset-top, 0px)) 8px 6px !important;
    border-radius: 0 0 16px 16px !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
  }

  body.woospeak-ai-page .woospeak-ai-hero::after,
  body.woospeak-ai-page .ws-coach-hero::after {
    display: none !important;
    content: none !important;
  }

  body.woospeak-ai-page .ws-coach-hero-top {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    column-gap: 8px !important;
    align-items: center !important;
    justify-items: stretch !important;
    width: 100% !important;
    min-height: 40px !important;
  }

  body.woospeak-ai-page .ws-coach-hero-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    justify-self: start !important;
    align-self: center !important;
  }

  body.woospeak-ai-page .ws-coach-info,
  body.woospeak-ai-page .ws-coach-name,
  body.woospeak-ai-page .ws-coach-hero-main,
  body.woospeak-ai-page .ws-coach-hero-copy,
  body.woospeak-ai-page .woospeak-ai-hero-title,
  body.woospeak-ai-page .woospeak-ai-hero-subtitle,
  body.woospeak-ai-page .woospeak-ai-logout-icon,
  body.woospeak-ai-page .ws-mobile-topbar,
  body.woospeak-ai-page .ws-mobile-actions {
    display: none !important;
  }

  body.woospeak-ai-page #ws-coach-avatar-hero.ws-coach-avatar,
  body.woospeak-ai-page .ws-coach-hero-brand .ws-coach-avatar {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
  }

  body.woospeak-ai-page .woospeak-ai-tabs {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
    justify-items: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.woospeak-ai-page .woospeak-ai-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 1px 0 0 !important;
    padding: 0 5px !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .055) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.woospeak-ai-page .woospeak-ai-tab.is-active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #2563eb !important;
  }

  body.woospeak-ai-page .woospeak-ai-tab .ws-tab-icon {
    display: none !important;
  }

  body.woospeak-ai-page .woospeak-ai-tab .ws-tab-label {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.woospeak-ai-page #woospeak-ai-tab-level .ws-tab-label {
    font-size: 0 !important;
  }

  body.woospeak-ai-page #woospeak-ai-tab-level .ws-tab-label::before {
    content: "Niveau" !important;
    font-size: 10px !important;
  }

  body.woospeak-ai-page #woospeak-ai-tab-courses .ws-tab-label {
    font-size: 0 !important;
  }

  body.woospeak-ai-page #woospeak-ai-tab-courses .ws-tab-label::before {
    content: "Cours" !important;
    font-size: 10px !important;
  }

  body.woospeak-ai-page #woospeak-ai-tab-dashboard .ws-tab-label {
    font-size: 0 !important;
  }

  body.woospeak-ai-page #woospeak-ai-tab-dashboard .ws-tab-label::before {
    content: "Stats" !important;
    font-size: 10px !important;
  }


  /* =========================================================
     MODE D'EMPLOI EXISTANT : bouton ? + pop-up plein écran
  ========================================================= */

  #woospeak-ai-app .woospeak-ai-howto {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 40 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #woospeak-ai-app .woospeak-ai-howto-head {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #woospeak-ai-app .woospeak-ai-howto-title {
    display: none !important;
  }

  #woospeak-ai-app .woospeak-ai-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(37,99,235,.18) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.08) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  #woospeak-ai-app .woospeak-ai-toggle-btn::before {
    content: "?" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  #woospeak-ai-app .woospeak-ai-howto-body {
    display: none !important;
  }

  #woospeak-ai-app .woospeak-ai-howto.is-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99980 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(15,23,42,.52) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    overflow: hidden !important;
  }

  #woospeak-ai-app .woospeak-ai-howto.is-open .woospeak-ai-howto-head {
    position: absolute !important;
    top: calc(14px + env(safe-area-inset-top,0px)) !important;
    right: max(14px, env(safe-area-inset-right,0px)) !important;
    z-index: 2 !important;
  }

  #woospeak-ai-app .woospeak-ai-howto.is-open .woospeak-ai-toggle-btn::before {
    content: "×" !important;
    font-size: 27px !important;
    font-weight: 600 !important;
    transform: translateY(-1px);
  }

  #woospeak-ai-app .woospeak-ai-howto.is-open .woospeak-ai-howto-body {
    display: block !important;
    position: absolute !important;
    left: max(12px, env(safe-area-inset-left,0px)) !important;
    right: max(12px, env(safe-area-inset-right,0px)) !important;
    top: calc(68px + env(safe-area-inset-top,0px)) !important;
    bottom: calc(16px + env(safe-area-inset-bottom,0px)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: 18px !important;
    border-radius: 24px !important;
    border: 0 !important;
    background: #ffffff !important;
    color: #334155 !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.28) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  #woospeak-ai-app .woospeak-ai-howto.is-open .woospeak-ai-examples {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }


  /* =========================================================
     COMPOSER : Chat | EN | FR en 3 colonnes
  ========================================================= */

  body.woospeak-ai-page .woospeak-ai-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  body.woospeak-ai-page .woospeak-ai-chat {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 20px !important;
    overflow: visible !important;
  }

  body.woospeak-ai-page .woospeak-ai-chat-log {
    min-height: 300px !important;
    height: auto !important;
    max-height: none !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  body.woospeak-ai-page .woospeak-ai-input {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.055) !important;
    overflow: hidden !important;
  }

  body.woospeak-ai-page #woospeak-ai-message {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 96px !important;
    margin: 0 0 6px !important;
    padding: 11px 14px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
  }

  body.woospeak-ai-page .woospeak-ai-actions,
  #woospeak-ai-app .woospeak-ai-layout .woospeak-ai-chat .woospeak-ai-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "chat micen micfr"
      "simulation simulation simulation"
      "assessment assessment assessment" !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  body.woospeak-ai-page #woospeak-ai-send {
    grid-area: chat !important;
  }

  body.woospeak-ai-page .woospeak-ai-mic-stack,
  #woospeak-ai-app .woospeak-ai-layout .woospeak-ai-chat .woospeak-ai-mic-stack {
    display: contents !important;
  }

  body.woospeak-ai-page #woospeak-ai-mic-en {
    grid-area: micen !important;
  }

  body.woospeak-ai-page #woospeak-ai-mic-fr {
    grid-area: micfr !important;
  }

  body.woospeak-ai-page #woospeak-ai-simulation-trigger {
    grid-area: simulation !important;
    display: flex !important;
  }

  body.woospeak-ai-page .woospeak-ai-assessment-trigger {
    grid-area: assessment !important;
    display: flex !important;
  }

  body.woospeak-ai-page #woospeak-ai-send,
  body.woospeak-ai-page #woospeak-ai-mic-en,
  body.woospeak-ai-page #woospeak-ai-mic-fr {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body.woospeak-ai-page #woospeak-ai-simulation-trigger,
  body.woospeak-ai-page .woospeak-ai-assessment-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body.woospeak-ai-page #woospeak-ai-mic-en .woospeak-ai-mic-ico,
  body.woospeak-ai-page #woospeak-ai-mic-fr .woospeak-ai-mic-ico {
    font-size: 12px !important;
    margin-right: 4px !important;
  }


  /* =========================================================
     MICRO-FICHE / CARD EXISTANTE : pop-up plein écran
  ========================================================= */

  body.woospeak-ai-page .ws-mobile-card-fab {
    position: fixed !important;
    right: max(14px, env(safe-area-inset-right,0px)) !important;
    bottom: calc(88px + env(safe-area-inset-bottom,0px)) !important;
    z-index: 99960 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 14px 32px rgba(37,99,235,.28) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body.woospeak-ai-page.ws-mobile-card-ready .ws-mobile-card-fab {
    display: flex !important;
  }

  body.woospeak-ai-page.ws-mobile-card-open .ws-mobile-card-fab {
    display: flex !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.woospeak-ai-page .ws-mobile-card-fab__label {
    display: none !important;
  }

  body.woospeak-ai-page .ws-mobile-card-fab__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  body.woospeak-ai-page .ws-mobile-card-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99970 !important;
    display: none !important;
    width: 100vw !important;
    height: 100dvh !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(15,23,42,.52) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 0;
    visibility: hidden;
  }

  body.woospeak-ai-page.ws-mobile-card-open .ws-mobile-card-overlay {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.woospeak-ai-page .ws-mobile-card-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99980 !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(20px + env(safe-area-inset-top,0px)) 12px calc(24px + env(safe-area-inset-bottom,0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(900px 240px at 50% 0%, rgba(37,99,235,.07), transparent 56%),
      linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,255,.99)) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    transform: translateY(105%) !important;
    transition: transform .24s cubic-bezier(.2,.8,.2,1) !important;
    pointer-events: auto !important;
    opacity: 0;
    visibility: hidden;
  }

  body.woospeak-ai-page.ws-mobile-card-open .ws-mobile-card-sheet {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.woospeak-ai-page .ws-mobile-card-handle {
    width: 56px !important;
    height: 4px !important;
    margin: 0 auto 12px !important;
    border-radius: 999px !important;
    background: rgba(100,116,139,.28) !important;
  }

  body.woospeak-ai-page .ws-mobile-card-close {
    position: fixed !important;
    top: calc(14px + env(safe-area-inset-top,0px)) !important;
    right: max(14px, env(safe-area-inset-right,0px)) !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #1d4ed8 !important;
    -webkit-text-fill-color: #1d4ed8 !important;
    box-shadow: 0 10px 26px rgba(15,23,42,.16) !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.woospeak-ai-page.ws-mobile-card-open .ws-mobile-card-close {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.woospeak-ai-page .ws-mobile-card-content {
    display: block !important;
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.woospeak-ai-page .ws-mobile-card-content #woospeak-ai-card,
  body.woospeak-ai-page .ws-mobile-card-content .woospeak-ai-card-inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.woospeak-ai-page.ws-mobile-card-open {
    overflow: hidden !important;
  }
}

@media (max-width: 380px) {
  body.woospeak-ai-page .ws-coach-hero-top {
    grid-template-columns: auto minmax(0,1fr) !important;
    gap: 6px !important;
  }

  body.woospeak-ai-page .woospeak-ai-tabs {
    gap: 5px !important;
  }

  body.woospeak-ai-page .woospeak-ai-tab {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 3px !important;
    font-size: 10px !important;
  }

  body.woospeak-ai-page #woospeak-ai-tab-level .ws-tab-label::before,
  body.woospeak-ai-page #woospeak-ai-tab-courses .ws-tab-label::before,
  body.woospeak-ai-page #woospeak-ai-tab-dashboard .ws-tab-label::before {
    font-size: 10px !important;
  }

  body.woospeak-ai-page .woospeak-ai-actions {
    gap: 6px !important;
  }

  body.woospeak-ai-page #woospeak-ai-send,
  body.woospeak-ai-page #woospeak-ai-mic-en,
  body.woospeak-ai-page #woospeak-ai-mic-fr {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 12px !important;
    padding: 0 6px !important;
  }
}

@media (min-width:781px) {
  .ws-mobile-card-fab,
  .ws-mobile-card-overlay,
  .ws-mobile-card-sheet {
    display: none !important;
  }
}

/* =========================================================
   COURSES MOBILE LAYOUT
   Adaptations mobiles uniquement — chargé dans mobile.css
========================================================= */

@media (max-width: 780px) {

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-wrap {
    padding: 0 0 14px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-inner,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-generate-section,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-library-section {
    gap: 12px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-topnav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-topnav-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.045) !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-header,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-form,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-card,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-library-card {
    border-radius: 18px !important;
    padding: 14px 12px !important;
  }
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-header .woospeak-ai-courses-title {
    margin: 0 0 6px !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-title::after,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-library-title::after,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-library-card::before {
    display: none !important;
    content: none !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-header .woospeak-ai-courses-intro {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.36 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-form {
    gap: 11px !important;
  }

body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-card-head{
  gap: 4px !important;
  margin-bottom: 4px !important;
}

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-card-title,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-library-card .woospeak-ai-courses-card-title {
    margin: 0 0 4px !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-intro,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-library-intro {
    font-size: 13px !important;
    line-height: 1.38 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-field label {
    margin-bottom: 5px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-textarea,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-select,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-search-input {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-textarea {
    height: auto !important;
    min-height: 78px !important;
    max-height: 110px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    resize: vertical !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-textarea::placeholder,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-search-input::placeholder {
    font-size: 12px !important;
    line-height: 1.28 !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-help {
    margin-top: 4px !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-actions {
    gap: 8px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-generate-btn,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-open-btn {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-status {
    min-height: 16px !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-library-head {
    gap: 9px !important;
    margin-bottom: 9px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-library-count,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-library-results {
    min-height: 32px !important;
    padding: 6px 11px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-library-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding: 11px !important;
    border-radius: 15px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-library-filters .woospeak-ai-course-field {
    width: 100% !important;
    min-width: 0 !important;
    gap: 4px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-library-filters .woospeak-ai-course-field label {
    font-size: 11.5px !important;
    line-height: 1.1 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-library-filters .woospeak-ai-course-search-input,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-library-filters .woospeak-ai-course-select {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    padding: 0 38px 0 12px !important;
    font-size: 12.5px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-library-reset,
  body.woospeak-ai-page #woospeak-ai-app #ws-library-reset {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-thumb-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-thumb {
    padding: 12px !important;
    border-radius: 15px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-thumb:hover {
    transform: none !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-thumb-title {
    margin-bottom: 6px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-thumb-meta {
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-course-thumb-actions {
    gap: 7px !important;
    margin-top: 4px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .ws-course-page {
    padding: 0 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .ws-course-stack {
    gap: 12px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .ws-course-card {
    padding: 13px !important;
    border-radius: 17px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .ws-course-hero {
    margin-bottom: 12px !important;
    border-radius: 17px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .ws-course-hero-media {
    height: 170px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .ws-course-hero-content {
    padding: 15px !important;
    gap: 8px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .ws-course-title {
    font-size: 23px !important;
    line-height: 1.08 !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .ws-course-section-title {
    margin-bottom: 9px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 380px) {
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-card-title,
  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-library-card .woospeak-ai-courses-card-title {
    font-size: 20px !important;
  }

  body.woospeak-ai-page #woospeak-ai-app .woospeak-ai-courses-topnav-btn {
    font-size: 12px !important;
    min-height: 38px !important;
    height: 38px !important;
  }
}


/* =========================================================
   MOBILE VOICE REVIEW
   ========================================================= */
@media (max-width: 780px) {
  body.woospeak-ai-page .woospeak-ai-actions,
  #woospeak-ai-app .woospeak-ai-layout .woospeak-ai-chat .woospeak-ai-actions {
    grid-template-areas:
      "chat micen micfr"
      "review review review"
      "simulation simulation simulation"
      "assessment assessment assessment" !important;
  }

  #woospeak-ai-app .woospeak-ai-voice-review{
    grid-area:review !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:9px !important;
    border-radius:16px !important;
  }

  #woospeak-ai-app .woospeak-ai-voice-review-meta{
    justify-content:center !important;
    text-align:center !important;
    font-size:11.5px !important;
  }

  #woospeak-ai-app .woospeak-ai-voice-review-hint{
    max-width:210px !important;
  }

  #woospeak-ai-app .woospeak-ai-voice-review-actions{
    justify-content:center !important;
  }

  #woospeak-ai-app .woospeak-ai-voice-review-btn{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    font-size:16px !important;
  }
}


/* =========================================================
   MOBILE VOICE REVIEW — TEXT STACK FIX
   ========================================================= */

@media (max-width:780px){

  #woospeak-ai-app .woospeak-ai-voice-review{
    grid-template-columns:minmax(0, 1fr) auto !important;
    column-gap:8px !important;
    padding:10px !important;
  }

  #woospeak-ai-app .woospeak-ai-voice-review-help,
  #woospeak-ai-app .woospeak-ai-voice-review-hint{
    font-size:11px !important;
    line-height:1.25 !important;
  }

  #woospeak-ai-app .woospeak-ai-voice-review-title,
  #woospeak-ai-app .woospeak-ai-voice-review-status{
    font-size:12px !important;
  }

  #woospeak-ai-app .woospeak-ai-voice-review-actions{
    gap:6px !important;
  }

}