/* =========================================
   スマホ用レスポンシブ対応 (768px以下)
========================================= */
@media (max-width: 768px) {
  /* ステータスバー：Claudeアプリのような1行の軽いヘッダーに。
     model/channel/session/uptime は「詳細」トグルで折りたたむ */
  .statusbar-main {
    padding: 10px 10px;
    padding-top: calc(10px + env(safe-area-inset-top));
    gap: 10px;
  }
  .statusbar-main .item { display: none; } /* model/channel/session/uptime は詳細側へ */
  .statusbar-main .online-item { display: flex; order: 3; } /* pulseだけ常時表示 */
  .statusbar-main .online-label { display: none; }
  .statusbar-title {
    display: block;
    flex: 1;
    text-align: left;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 15px;
    flex-shrink: 0;
  }
  .details-toggle {
    display: block;
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 11px;
  }
  .statusbar-details {
    padding: 0 14px;
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: max-height 0.2s ease, padding 0.2s ease;
  }
  .statusbar-details.open {
    max-height: 200px;
    padding: 4px 14px 12px;
    border-top: 1px solid var(--border);
  }
  .statusbar-details .item {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 13px;
  }

  /* サイドバーを画面外(左)に隠すスライドドロワー化。
     幅は画面の85%までにして狭い端末でも操作しやすく */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(85vw, 300px);
    transform: translateX(-100%);
    z-index: 1000;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.5);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* .open がついたら画面内にスライドイン */
  #sidebar.open { transform: translateX(0); }

  /* サイドバー内のタップ領域を広げる */
  .session-list li { padding: 10px 8px; font-size: 14px; }
  .session-list .del { opacity: 1; padding: 4px 6px; } /* モバイルはhoverが無いので常時表示 */

  /* サイドバーが開いた時は背景オーバーレイを表示 */
  .overlay.active { display: block; }

  /* メインエリアとログエリアをスマホ画面にフィットさせる */
  #main { width: 100%; }
  #log { padding: 14px 12px 6px; }
  .msg { width: 100%; max-width: 100%; }

  /* Claudeアプリ風：自分のメッセージだけ右寄せの吹き出しにして
     やり取りの流れを一目で追えるようにする */
  .msg.user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .msg.user .role { display: none; }
  .msg.user .content {
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 16px 16px 4px 16px;
    padding: 9px 13px;
    max-width: 88%;
  }
  .msg.bot .content { padding-right: 4px; }

  /* 入力欄：角丸のピル型にして、キーボード表示中もホームインジケータ分を確保 */
  #inputArea {
    position: sticky;
    bottom: 0;
    z-index: 50;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }
  #messageInput {
    border-radius: 20px;
    max-height: 40vh;
    resize: none;
  }
  .icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  input[type=text], input[type=password], select, textarea {
    font-size: 16px !important; /* スマホブラウザは16px未満だとタップ時にズームされるため強制 */
    padding: 10px;
  }
  button.primary {
    min-width: 42px;
    height: 42px;
    width: 42px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    flex-shrink: 0;
    position: relative;
  }
  button.primary::after {
    content: '↑';
    font-size: 18px;
    line-height: 1;
  }

  /* プレビューカードを少しコンパクトに */
  .file-card { width: 90px; height: 90px; }
  .file-preview { overflow-x: auto; flex-wrap: nowrap; padding: 10px 12px; }
}