/* Phase 4 Mobile Chat Redesign - focused, non-destructive layer */
@media (max-width: 768px) {
  html, body { width:100%; max-width:100%; overflow:hidden !important; }
  .app-container { height:100dvh !important; min-height:100dvh !important; overflow:hidden !important; }
  #chat-tab.tab-content.active { height:100dvh !important; min-height:0 !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; }

  .chat-header { flex:0 0 auto !important; padding:.7rem .85rem !important; gap:.6rem !important; border-radius:0 0 24px 24px !important; }
  .header-left { min-width:0 !important; }
  .bot-avatar { width:48px !important; height:48px !important; min-width:48px !important; }
  .bot-info { display:none !important; }
  .header-actions { flex:1 1 auto !important; justify-content:flex-end !important; gap:.45rem !important; min-width:0 !important; }
  .language-selector { flex:1 1 112px !important; min-width:96px !important; max-width:180px !important; height:42px !important; font-size:.9rem !important; }
  .header-btn { width:42px !important; height:42px !important; min-width:42px !important; }
  .header-text-btn { display:none !important; }

  .training-context.active { flex:0 0 auto !important; padding:.65rem .8rem !important; gap:.55rem !important; max-height:24dvh !important; overflow:hidden !important; }
  .active-persona-card { padding:.62rem .75rem !important; min-height:0 !important; border-radius:18px !important; }
  .persona-avatar { width:44px !important; height:44px !important; flex:0 0 44px !important; }
  .persona-kicker { font-size:.55rem !important; letter-spacing:.12em !important; line-height:1 !important; }
  .persona-content strong { font-size:1rem !important; line-height:1.1 !important; }
  .persona-content p { display:none !important; }
  .persona-badges span { font-size:.62rem !important; padding:.18rem .48rem !important; }
  .conversation-progress-timeline { padding:.58rem .7rem !important; border-radius:18px !important; }
  .timeline-track { height:6px !important; }
  .timeline-steps { margin-top:.4rem !important; }
  .timeline-steps span { font-size:clamp(.56rem, 2.4vw, .68rem) !important; }

  .messages-container { flex:1 1 auto !important; min-height:0 !important; overflow:hidden !important; }
  .messages-area { height:100% !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; padding:.85rem .82rem calc(33dvh + 1rem) !important; }
  .message { max-width:96% !important; }
  .message-bubble { border-radius:20px !important; padding:.82rem .95rem !important; }
  .message-text { font-size:.94rem !important; line-height:1.45 !important; overflow-wrap:anywhere !important; word-break:normal !important; }

  .response-container { position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; max-height:34dvh !important; overflow-y:auto !important; overflow-x:hidden !important; border-radius:24px 24px 0 0 !important; padding:.65rem .8rem calc(.8rem + env(safe-area-inset-bottom)) !important; z-index:70 !important; box-shadow:0 -16px 38px rgba(15,23,42,.16) !important; }
  .response-container.is-expanded { max-height:72dvh !important; }
  .response-handle { width:54px !important; height:5px !important; margin:0 auto .65rem !important; cursor:pointer !important; }
  .response-label { font-size:.94rem !important; margin-bottom:.6rem !important; }
  .response-options { display:grid !important; grid-template-columns:1fr !important; gap:.62rem !important; }
  .premium-response-card, .response-btn, .response-option { min-height:unset !important; padding:.8rem .85rem !important; border-radius:16px !important; }
  .response-card-body { font-size:.88rem !important; line-height:1.35 !important; }
  .response-number { width:34px !important; height:34px !important; min-width:34px !important; font-size:.9rem !important; }
}

@media (max-width: 420px) {
  .chat-header { padding:.62rem .68rem !important; }
  .bot-avatar { width:42px !important; height:42px !important; min-width:42px !important; }
  .language-selector { height:38px !important; font-size:.82rem !important; max-width:132px !important; }
  .header-btn { width:38px !important; height:38px !important; min-width:38px !important; }
  .training-context.active { max-height:22dvh !important; padding:.55rem .65rem !important; }
  .messages-area { padding:.72rem .68rem calc(35dvh + .8rem) !important; }
  .response-container { max-height:36dvh !important; padding:.58rem .68rem calc(.7rem + env(safe-area-inset-bottom)) !important; }
  .response-container.is-expanded { max-height:76dvh !important; }
}


/* Final mobile visibility fix: keep chat and responses inside normal layout.
   Some Android browsers misplace fixed bottom panels when the address bar changes height. */
@media (max-width: 768px) {
  html, body { width:100% !important; max-width:100% !important; overflow-x:hidden !important; overflow-y:auto !important; }
  .app-container { min-height:100svh !important; height:auto !important; overflow:visible !important; }
  #chat-tab.tab-content.active { min-height:100svh !important; height:auto !important; display:flex !important; flex-direction:column !important; overflow:visible !important; }
  .chat-header { position:sticky !important; top:0 !important; z-index:80 !important; }
  .training-context.active { flex:0 0 auto !important; max-height:none !important; overflow:visible !important; }
  .messages-container { flex:1 1 auto !important; min-height:42svh !important; overflow:visible !important; display:flex !important; flex-direction:column !important; }
  .messages-area { height:auto !important; min-height:42svh !important; overflow:visible !important; padding:.85rem .82rem 1rem !important; }
  .response-container {
    position:sticky !important;
    left:auto !important;
    right:auto !important;
    bottom:0 !important;
    width:100% !important;
    max-height:46svh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    display:block;
    z-index:90 !important;
  }
  .response-options { display:grid !important; grid-template-columns:1fr !important; gap:.65rem !important; }
  .response-options:empty::after { content:'Loading response options...'; display:block; padding:14px; border-radius:16px; background:#fff7ed; color:#9d0a0e; font-weight:700; }
}

/* FINAL OVERRIDE: response choices must not be fixed to bottom on mobile. */
@media (max-width: 820px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .chat-container, .chat-wrapper, .messages-container, .messages-area, #messages-area { height:auto!important; max-height:none!important; overflow:visible!important; }
  .response-container { position:relative!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; max-height:none!important; overflow:visible!important; margin:12px 0 calc(16px + env(safe-area-inset-bottom))!important; padding:12px!important; border-radius:22px!important; z-index:10!important; background:#fff!important; }
  .response-container:not(.is-visible){display:none!important;}
  .response-options{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;max-height:none!important;overflow:visible!important;width:100%!important;}
  .response-btn,.response-option,.premium-response-card{width:100%!important;max-width:100%!important;white-space:normal!important;text-align:start!important;}
  .welcome-card,.language-selection,.role-selection,.scenario-card,.active-scenario-card{max-width:calc(100vw - 24px)!important;margin-left:auto!important;margin-right:auto!important;transform:none!important;box-sizing:border-box!important;}
}


/* === FINAL CLIENT MOBILE UI SUPERFIX ===
   Android Chrome-safe layout: no horizontal crop, scenario cards fit, responses stay visible. */
@media (max-width: 820px) {
  *, *::before, *::after { box-sizing: border-box !important; }
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body { position: relative !important; }
  .app-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100svh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  .chat-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }
  .header-actions {
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  .language-selector {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: 160px !important;
  }
  .header-btn { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; }
  .messages-container,
  .messages-area,
  #messages-area,
  .welcome-screen,
  .welcome-card-shell,
  .language-selection,
  .role-selection,
  .scenario-selection,
  .training-context,
  .active-persona-card,
  .conversation-progress-timeline,
  .response-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .messages-container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .messages-area {
    height: auto !important;
    min-height: 58svh !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 12px 16px !important;
  }
  .welcome-card-shell,
  .language-selection,
  .role-selection,
  .scenario-selection {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    transform: none !important;
  }
  .welcome-card-shell { width: calc(100vw - 24px) !important; }
  .role-cards,
  #language-cards {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  .role-card,
  .language-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
  }
  .scenario-selector-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  .scenario-selector {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    display: flex !important;
    gap: 12px !important;
    padding: 4px 2px 12px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .scroll-arrow { display: none !important; }
  .scenario-card,
  .scenario-card.scenario-card-v3,
  .active-scenario-card {
    flex: 0 0 calc(100vw - 28px) !important;
    width: calc(100vw - 28px) !important;
    min-width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    scroll-snap-align: center !important;
    overflow: hidden !important;
  }
  .scenario-card-v3 .scenario-image { height: 170px !important; }
  .scenario-card-v3 .scenario-info { padding: 12px !important; }
  .scenario-card-v3 .scenario-title,
  .scenario-card .scenario-title {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }
  .training-context.active {
    padding: 10px 12px !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .active-persona-card,
  .conversation-progress-timeline {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
  }
  .persona-content strong { font-size: 1rem !important; line-height: 1.12 !important; overflow-wrap: anywhere !important; }
  .timeline-steps { gap: 4px !important; }
  .timeline-steps span { font-size: 0.58rem !important; white-space: nowrap !important; }
  .message, .message-row, .message-bubble {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .response-container {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    display: block;
    margin: 8px 0 calc(14px + env(safe-area-inset-bottom)) !important;
    padding: 12px !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fff !important;
    z-index: 20 !important;
  }
  .response-container:not(.is-visible) { display: none !important; }
  .response-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  .response-btn,
  .response-option,
  .premium-response-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    white-space: normal !important;
    text-align: start !important;
    overflow-wrap: anywhere !important;
  }
}