/* ============================================
   COMPACT — aligné sur html[data-layout="compact"] (voir script dans index.html)
   ============================================ */

html[data-layout="compact"] {
  --side-padding: 30px;
  --frame-radius: 0;
}

html[data-layout="compact"] body {
  min-width: 0;
  overflow-x: clip;
}

html[data-layout="compact"] .demo-layout,
html[data-layout="compact"] .phone-frame,
html[data-layout="compact"] .home-screen,
html[data-layout="compact"] .scanning-screen {
  min-width: 0;
}

html[data-layout="compact"] .phone-frame {
  max-width: 100%;
}

/* Titres & textes : pas de débordement horizontal */
html[data-layout="compact"] .title-block,
html[data-layout="compact"] .stats-summary,
html[data-layout="compact"] .stats-summary-sentence,
html[data-layout="compact"] .stats-summary-inner,
html[data-layout="compact"] .stats-summary-line--primary,
html[data-layout="compact"] .stats-summary-flow,
html[data-layout="compact"] .stats-summary-alerts-only,
html[data-layout="compact"] .title-name,
html[data-layout="compact"] .title-network,
html[data-layout="compact"] .title-status,
html[data-layout="compact"] .actions-title,
html[data-layout="compact"] .action-text,
html[data-layout="compact"] .discussion-text {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

html[data-layout="compact"] .stats-summary-inner {
  gap: 10px;
}

/* Cartes d'action : pleine largeur utile */
html[data-layout="compact"] .action-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* ============================================
   HOME SCREEN — scrollable + discussion bar fixe
   ============================================ */

html[data-layout="compact"] .home-screen {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

html[data-layout="compact"] .discussion-bar {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: max(var(--side-padding), env(safe-area-inset-left, 0px));
  right: max(var(--side-padding), env(safe-area-inset-right, 0px));
  width: auto;
  z-index: 10;
}

/* Hide the home "Ask me anything..." bar whenever an overlay is open.
   The chat screen (Scam Detector, Scout Bot, etc.) has its own input bar. */
.phone-frame:has(.menu-drawer.open) .discussion-bar,
.phone-frame:has(.devices-screen.active) .discussion-bar,
.phone-frame:has(.users-screen.active) .discussion-bar,
.phone-frame:has(.conversations-screen.active) .discussion-bar,
.phone-frame:has(.alerts-screen.active) .discussion-bar,
.phone-frame:has(.activity-screen.active) .discussion-bar,
.phone-frame:has(.chat-screen.active) .discussion-bar,
.phone-frame:has(.scanning-screen.active) .discussion-bar {
  display: none;
}

html[data-layout="compact"] .discussion-inner {
  min-width: 0;
}

html[data-layout="compact"] .discussion-left {
  min-width: 0;
}

html[data-layout="compact"] .actions {
  padding-bottom: calc(77px + max(40px, env(safe-area-inset-bottom, 20px)));
}


/* ============================================
   SCANNING SCREEN — logo en flux flex
   Le logo devient un flex-item (au lieu de position:absolute)
   pour rester centré verticalement sur tout écran.
   ============================================ */

html[data-layout="compact"] .scanning-screen {
  border-radius: 0;
}

html[data-layout="compact"] .scanning-logo {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  animation: logo-appear-compact 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes logo-appear-compact {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

html[data-layout="compact"] .scanning-content {
  margin-top: 24px;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
  box-sizing: border-box;
  width: 100%;
}

html[data-layout="compact"] .scanning-progress {
  width: min(175px, calc(100% - 32px));
  max-width: 100%;
}

html[data-layout="compact"] .scanning-word-wrap {
  width: 100%;
  max-width: 100%;
}


/* ============================================
   CHAT SCREEN — safe-area + border-radius
   ============================================ */

html[data-layout="compact"] .chat-screen {
  border-radius: 0;
}

html[data-layout="compact"] .chat-input-bar {
  padding-bottom: max(28px, env(safe-area-inset-bottom, 28px));
}


/* ============================================
   CONVERSATIONS SCREEN — safe-area + border-radius
   ============================================ */

html[data-layout="compact"] .conversations-screen {
  border-radius: 0;
}

html[data-layout="compact"] .conversations-list {
  min-width: 0;
  padding-bottom: max(32px, env(safe-area-inset-bottom, 32px));
}

html[data-layout="compact"] .conversation-item,
html[data-layout="compact"] .conversation-text {
  min-width: 0;
}


/* ============================================
   MENU — border-radius + colonnes sur mobile
   ============================================ */

html[data-layout="compact"] .menu-drawer,
html[data-layout="compact"] .menu-drawer-inner {
  border-radius: 0;
}

html[data-layout="compact"] .menu-featured {
  flex-direction: row;
  gap: 12px;
}

html[data-layout="compact"] .menu-featured-card {
  flex: 1 1 0;
  min-width: 0;
}

html[data-layout="compact"] .chat-messages {
  min-width: 0;
}


/* ============================================
   ÉCRANS COURTS — réduction des marges verticales
   Cible les appareils < 700px de hauteur (iPhone SE, etc.)
   ============================================ */

@media (max-height: 700px) {
  html[data-layout="compact"] .logo-row {
    margin-top: max(16px, env(safe-area-inset-top, 0px));
  }

  html[data-layout="compact"] .header {
    margin-top: 16px;
  }

  html[data-layout="compact"] .title-block {
    margin-top: 24px;
  }

  html[data-layout="compact"] .stats-summary {
    margin-top: 24px;
  }

  html[data-layout="compact"] .actions-title {
    margin-top: 28px;
  }

  html[data-layout="compact"] .actions {
    margin-top: 14px;
  }

  html[data-layout="compact"] .title-name,
  html[data-layout="compact"] .title-network,
  html[data-layout="compact"] .title-status {
    font-size: 26px;
    line-height: 34px;
  }

  html[data-layout="compact"] .stats-summary-sentence {
    font-size: 16px;
  }
}