/* frontend-core/public/css/mobile.css */

/* iOS の過度な縮小防止 */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* セーフエリア（ノッチ）対応 */
  body, html {
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
  }
  
  /* スマホ時の入力・ボタン可視化とタップ領域確保 */
  @media (max-width: 768px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select,
    button,
    .btn {
      display: block;
      width: 100%;
      min-height: 44px;
      line-height: 1.2;
      box-sizing: border-box;
    }
  
    /* 横スクロール抑止 */
    main, .container, .app-root, body {
      max-width: 100vw;
      overflow-x: hidden;
    }
  
    /* 会話フッター（JS が制御する前提。ここでは高さ/余白だけ与える） */
    #mobile-conversation-footer {
      min-height: 56px;
      padding: 0.75rem 1rem;
    }
  
    #mobile-conversation-footer .btn {
      min-height: 44px;
    }
  }

  /* --- iPhone 実機での強制表示スイッチ（JS が body[data-mobile-footer] を切替） --- */
@media (max-width: 768px) {
    /* JS が on を付けたら確実に表示、off なら非表示にする */
    body[data-mobile-footer="on"] #mobile-conversation-footer {
      display: flex !important;   /* 既存 style.css の display:none を上書き */
      position: fixed;
      bottom: 0; left: 0; right: 0;
      width: 100%;
      z-index: 100;
    }
    body[data-mobile-footer="off"] #mobile-conversation-footer {
      display: none !important;
    }
  }

  /* ================================
   iPhone実機のレイアウト安定化: 追記
   - フッターと吹き出しの重なり解消
   - 吹き出しの前面化
   - モバイル時のアバター拡大
   ================================ */

@media (max-width: 768px) {
    /* 1) 会話画面の下に余白を確保（フッターと重ならないように） */
    /*  フッターが有効のとき(body[data-mobile-footer="on"])だけ余白を追加  */
    body[data-mobile-footer="on"] #conversation-screen {
      /* フッター高さ(約56px) + セーフエリア分 */
      padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
  
    /* 2) 吹き出しを常にフッターより前面に（重なり防止） */
    /*  既存の .speech-bubble/.speech/.bubble いずれにも効くよう冗長指定  */
    #conversation-screen .speech-bubble,
    #conversation-screen .speech,
    #conversation-screen .bubble {
      position: relative;
      z-index: 200; /* フッター(100)より上 */
    }
  
    /* 3) 万一 display: none が残っていた場合の保険（視認性重視 → 最小限） */
    /*  既存JSの切替を尊重しつつ、モバイルでは出す方向へ寄せる */
    #conversation-screen .speech-bubble[style*="display: none"] {
      display: block !important;
    }
  
    /* 4) モバイルのアバターを少し大きく（幅ベース・中央寄せ） */
    /*  想定クラス/IDが環境で異なる可能性があるため、主要パターンを包括 */
    #conversation-screen .avatar img,
    #conversation-screen .avatar-image,
    #conversation-screen .avatar-area img,
    #conversation-screen .avatar-container img,
    #conversation-screen img.avatar {
      display: block;
      width: 56vw;        /* 画面幅の約半分強 */
      max-width: 320px;   /* タブレットでの上限 */
      height: auto;
      margin: 0 auto;     /* 中央寄せ */
    }
  }

  /* ===== モバイル簡易バルーン（読みやすい下部固定パネル） ===== */
@media (max-width: 768px) {
    #mobile-bubble-text {
      display: none;
      position: fixed;
      left: 0; right: 0;
      bottom: calc(64px + env(safe-area-inset-bottom)); /* フッターの少し上に重ねる */
      margin: 0 auto;
      max-width: 92vw;
      background: rgba(255, 255, 255, 0.98);
      color: #222;
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 12px;
      padding: 10px 12px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.15);
      z-index: 250; /* フッター(100)・吹き出し(200) より前面 */
      font-size: 15px;
      line-height: 1.5;
    }
  
    /* iOS の overscroll で位置がズレにくいよう安全側に */
    body {
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
  }
  
  /* モバイルでユーザーの一瞬表示を抑制（お手本モードの残影対策・安全側） */
@media (max-width: 768px) {
    /* クラス名は環境に依存するため一般的なパターンを抑制 */
    #conversation-screen .message.user,
    #conversation-screen .bubble.user,
    #conversation-screen .speech.user {
      transition: opacity .1s linear;
    }
    /* 直後に非表示になるパターンを視覚的に消す（display:none化の直前に opacity 0 を強制） */
    #conversation-screen .message.user[style*="display: none"],
    #conversation-screen .bubble.user[style*="display: none"],
    #conversation-screen .speech.user[style*="display: none"] {
      opacity: 0 !important;
    }
  }
  
  /* ==== iPhone実機で操作群が出ない/遅い対策 ==== */
  /* JSで制御するため、CSSでの強制表示は削除 */
  /* === Modal Mobile Fix === */
@media (max-width: 768px) {
  .modal-content {
    position: relative;
    width: 95% !important;
    max-width: 100% !important;
    margin: 1rem auto;
  }
  
  .modal-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    gap: 0.5rem;
  }
  
  .modal-header h2 {
    flex: 1;
    margin: 0;
    font-size: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  
  .btn-close {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
}
/* ================================================================
   MOBILE CONVERSATION REDESIGN
   Layout: Avatar (top) → Chat History (middle, scrollable) → Footer (bottom)
   ================================================================ */
@media (max-width: 768px) {
  /* 1. Main conversation container - vertical flex layout */
   #conversation-screen.conversation-container.active {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    grid-template-columns: unset !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }


   /* 2. Avatar section - 1/3 of screen height */
  #conversation-screen .avatar-section {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
    border-bottom: 1px solid var(--border-color, #dee2e6);
    min-height: 30vh !important;
    max-height: 35vh !important;
  }

  #conversation-screen .avatar-container {
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

   #conversation-screen .avatar-container img,
  #conversation-screen #avatar-image {
    width: 40vw !important;
    height: 40vw !important;
    min-width: 120px !important;
    min-height: 120px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }


   /* Hide speech bubble on mobile - use chat history instead */
  #conversation-screen.active .speech-bubble-container,
  #conversation-screen .speech-bubble-container,
  .conversation-container .speech-bubble-container {
    display: none !important;
    visibility: hidden !important;
  }

  /* 3. Controls section - show on mobile for chat history */
  #conversation-screen .controls-section {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    border-left: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* 4. History log - main scrollable area */
  #conversation-screen .history-log,
  #conversation-screen #history-log-container {
    flex: 1 1 auto !important;
    display: block !important;
    overflow-y: auto !important;
    padding: 1rem !important;
    background: #fff !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 5. Hide PC control input area on mobile */
  #conversation-screen .control-input-area {
    display: none !important;
  }

  /* 6. Chat message styling - AI left, User right */
  #conversation-screen .history-message {
    max-width: 80% !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 16px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
  }

  #conversation-screen .history-ai {
    margin-right: auto !important;
    margin-left: 0 !important;
    background: #f1f3f5 !important;
    color: #212529 !important;
    border-bottom-left-radius: 4px !important;
  }

  #conversation-screen .history-user {
    margin-left: auto !important;
    margin-right: 0 !important;
    background: #007bff !important;
    color: #fff !important;
    border-bottom-right-radius: 4px !important;
  }

  /* 7. Ensure conversation screen has proper bottom padding for footer */
  body[data-mobile-footer="on"] #conversation-screen {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
}
/* ================================================================
   MOBILE FOOTER REDESIGN
   ================================================================ */
@media (max-width: 768px) {
  /* Footer container layout */
  .mobile-conversation-footer,
  #mobile-conversation-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;  /* No !important - JS can override */
    gap: 8px !important;
    padding: 8px 12px !important;
    background: #fff !important;
    border-top: 1px solid #dee2e6 !important;
  }

  /* History button - compact */
  #history-button-mobile {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
  }

  /* Start button - smaller, more compact */
  #start-conversation-button-mobile {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: unset !important;
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
    min-height: 40px !important;
    border-radius: 20px !important;
  }

  /* Text input container - expand to fill space */
  #text-controls-mobile {
    flex: 1 1 auto !important;
    
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
  }

  /* Text input - larger and easier to use */
  #text-input-mobile {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 44px !important;
    max-height: 100px !important;
    padding: 10px 14px !important;
    font-size: 1rem !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 22px !important;
    resize: none !important;
    line-height: 1.4 !important;
  }

  #text-input-mobile:focus {
    outline: none !important;
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15) !important;
  }

  /* Send button - compact circle */
  #send-text-button-mobile {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 1.2rem !important;
  }

  /* Voice controls - center the mic */
  #voice-controls-mobile {
    flex: 1 1 auto !important;
   
    justify-content: center !important;
    align-items: center !important;
  }

  #record-button-mobile {
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
  }

  /* End button - compact */
  #end-session-button-mobile {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
  }
}

/* === Extra Small Mobile (≤320px) - iPhone SE specific === */
@media (max-width: 320px) {
  /* Prevent horizontal overflow */
  html, body, #main-view, #main-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Conversation container fix */
  #conversation-screen.conversation-container.active {
    top: 44px !important;
    padding: 0 !important;
  }

  /* Avatar section - smaller for 320px */
  #conversation-screen .avatar-section {
    min-height: 25vh !important;
    max-height: 30vh !important;
    padding: 0.5rem !important;
  }

  #conversation-screen .avatar-container img,
  #conversation-screen #avatar-image {
    width: 30vw !important;
    height: 30vw !important;
    min-width: 90px !important;
    min-height: 90px !important;
    max-width: 120px !important;
    max-height: 120px !important;
  }

  /* History log */
  #conversation-screen .history-log,
  #conversation-screen #history-log-container {
    padding: 0.5rem !important;
  }

  /* Chat messages */
  #conversation-screen .history-message {
    max-width: 85% !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
  }

  /* Footer */
  .mobile-conversation-footer,
  #mobile-conversation-footer {
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  #history-button-mobile {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 1rem !important;
  }

  #start-conversation-button-mobile {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    min-height: 36px !important;
  }

  #text-input-mobile {
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 0.9rem !important;
  }

  #send-text-button-mobile {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 1rem !important;
  }

  #record-button-mobile {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  #end-session-button-mobile {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 1rem !important;
  }

  /* Modal fix for 320px */
  .modal-content {
    width: 98% !important;
    margin: 0.5rem auto !important;
    padding: 0.5rem !important;
  }

  .modal-header {
    padding: 0.5rem !important;
  }

  .modal-header h2 {
    font-size: 0.9rem !important;
  }

  .btn-close {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 1.2rem !important;
  }
}