/* ========================================================== */
/*           4. レスポンシブ＆ウィンドウ状態スタイル           */
/* ========================================================== */

/* --- PC用のスタイル (768px以上) --- */
@media (min-width: 768px) {
  #magatama-chat-window {
    width: 380px;
    height: 550px;
    /* max-height: 80vh; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    min-width: 300px;
    min-height: 400px;
  }

  #magatama-chat-window .chat-header {
    cursor: move;
    user-select: none;
  }

  /* 最小化状態 */
  #magatama-chat-window.is-minimized {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #magatama-chat-window.is-minimized .chat-body,
  #magatama-chat-window.is-minimized .chat-input,
  #magatama-chat-window.is-minimized .resizer {
    display: none;
  }

  /* 最大化状態 */
  #magatama-chat-window.is-maximized {
    transition: all 0.2s ease-in-out;
    border-radius: 0;
    height: 100vh;
    /* ← 追加: 高さをビューポートの100%に */
    max-height: none;
    /* ← 追加: 高さの最大値制限を解除 */
  }

  #magatama-chat-window.is-maximized .resizer {
    display: none;
  }
}

/* モバイル用のスタイル (767px以下) */
@media (max-width: 767px) {
  #magatama-chat-window {
    width: 100%;
    height: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 0;
  }

  .chat-header {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  .chat-input {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  #magatama-chat-window.minimized {
    width: 300px;
    height: 49px;
    max-height: 49px;
    top: auto;
    left: auto;
    bottom: 24px;
    right: 24px;
    border-radius: 12px;
  }

  #magatama-chat-window.minimized .chat-body,
  #magatama-chat-window.minimized .chat-input {
    display: none;
  }

  /* すべてのランチャーアイコンに共通のスマホ用配置 */
  #magatama-chat-launcher {
    right: 16px;
    bottom: 16px;
  }

  /* ★デフォルトアイコンにのみ height: 30vh を適用 */
  #magatama-chat-launcher:not(.magatama-custom-icon) {
    height: 30vh;
  }

  /* デフォルトアイコンの場合、中の要素は親の高さに合わせる */
  #magatama-chat-launcher:not(.magatama-custom-icon) .magatama-icon-image-only {
    width: auto;
    height: 100%;
  }

  /* ★カスタムアイコン（画像のみ）の場合のサイズを指定 */
  #magatama-chat-launcher.magatama-custom-icon .magatama-icon-image-only {
    width: 180px;
    /* スマホではこのくらいの幅にする（調整可能） */
    height: auto;
  }

  /* カスタムアイコン（画像＋テキスト）の場合のスマホ用スタイル */
  #magatama-chat-launcher.magatama-custom-icon .magatama-icon-container {
    /* 必要に応じて調整（例：全体を少し小さくするなど）*/
    /* transform: scale(0.9); */
  }

  /* ヘッダー位置上下中央に配置 */
  #magatama-chat-window.minimized .chat-header {
    height: 100%;
    padding-top: 0;
    /* safe-area用のpaddingをリセット */
    padding-bottom: 0;
    /* paddingをリセットして完全に中央揃えにする */
  }
}

/* ========================================================== */
/*           状態安定化のためのスタイル            */
/* ========================================================== */

/* PC版の最小化スタイル */
/* 位置はJSのapplyPosition()が保存済みtop/leftをインラインスタイルで適用するため、CSSでは指定しない */
#magatama-chat-window.is-minimized {
  width: 360px !important;
  height: 44px !important;
  /* ヘッダーの高さ */
  min-height: 44px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#magatama-chat-window.is-minimized .chat-body,
#magatama-chat-window.is-minimized .chat-input,
#magatama-chat-window.is-minimized .resizer {
  display: none !important;
}

#magatama-chat-window.is-minimized {
  width: 280px;
  /* 最小化時の横幅 */
  height: 40px;
  /* 最小化時の縦幅 */
  /* bottom/rightはJSで位置管理するためCSSでは指定しない */
  overflow: hidden;
  /* 中身は非表示 */
  border-radius: 8px;
}

@media (max-width: 767px) {
  #magatama-chat-window.minimized {
    width: 100%;
    height: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    border-radius: 0;
  }
}