/* ========================================
   Responsive Design System
   ======================================== */

/* Mobile First Approach
 * Base styles: Defined in styles.css
 * Tablet: 769px - 1024px
 * Mobile: max-width 768px, 640px, 480px
 */

/* デスクトップではボタンアイコンを非表示（モバイルでアイコン化するため） */
.knowledge-btn-icon {
  display: none;
}

/* ========================================
   Tablet (max-width: 1024px)
   ======================================== */
@media (max-width: 1024px) {
  /* モバイルヘッダーを表示 */
  .mobile-header {
    display: block !important;
  }

  /* ハンバーガーメニューボタンを表示 */
  .mobile-header__menu-btn {
    display: flex !important;
  }

  /* デスクトップヘッダーを非表示 */
  .desktop-header {
    display: none !important;
  }

  /* モバイルではツールバー内チャットタイトルを非表示（モバイルヘッダーに表示） */
  .chat-toolbar-title {
    display: none;
  }

  /* モバイルヘッダー(60px)に合わせた高さ調整 */
  body.chat-active .main-content {
    padding: 8px 0 0;
    height: calc(100vh - 60px - var(--app-update-bar-height));
    height: calc(100dvh - 60px - var(--app-update-bar-height));
  }

  /* アプリコンテナをフル幅に */
  .app-container {
    margin-left: 0 !important;
    padding-top: 0;
  }

  /* サイドバーをモバイル風に（デフォルトで非表示） */
  .sidebar-main {
    position: fixed;
    top: calc(60px + var(--app-update-bar-height));
    left: 0;
    height: calc(100vh - 60px - var(--app-update-bar-height));
    height: calc(100dvh - 60px - var(--app-update-bar-height));
    width: 80px;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sidebar-sub {
    position: fixed;
    top: calc(60px + var(--app-update-bar-height));
    left: 0;
    height: calc(100vh - 60px - var(--app-update-bar-height));
    height: calc(100dvh - 60px - var(--app-update-bar-height));
    width: 240px;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* アクティブ時に表示 */
  .sidebar-main.mobile-open {
    transform: translateX(0);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }

  .sidebar-sub.mobile-open {
    transform: translateX(80px);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  }

  /* オーバーレイ */
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: calc(60px + var(--app-update-bar-height));
    left: 0;
    width: 100%;
    height: calc(100vh - 60px - var(--app-update-bar-height));
    height: calc(100dvh - 60px - var(--app-update-bar-height));
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .sidebar-overlay.active {
    display: block;
  }

  /* メインコンテンツ調整 */
  .main-content {
    margin-left: 0 !important;
  }

  /* fixedポジション要素のleft調整（サイドバー非表示時） */
  .knowledge-detail-view,
  .knowledge-create-view {
    left: 0;
  }

  /* ハンバーガーメニューアイコンスタイル */
  .hamburger-mobile {
    width: 20px;
    height: 16px;
    position: relative;
  }

  .hamburger-mobile span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--color-text);
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }

  .hamburger-mobile span:nth-child(1) {
    top: 0px;
  }

  .hamburger-mobile span:nth-child(2) {
    top: 7px;
  }

  .hamburger-mobile span:nth-child(3) {
    top: 14px;
  }

  /* ハンバーガーメニューアニメーション（開閉用） */
  .hamburger-mobile.active span:nth-child(1) {
    top: 7px;
    transform: rotate(135deg);
  }

  .hamburger-mobile.active span:nth-child(2) {
    opacity: 0;
    left: -20px;
  }

  .hamburger-mobile.active span:nth-child(3) {
    top: 7px;
    transform: rotate(-135deg);
  }

  /* モバイル用ヘッダーウィジェットコンテナ */
  .mobile-header-widgets-container {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 4px;
    margin: 0 2px;
  }

  .mobile-header-widgets-left,
  .mobile-header-widgets-center,
  .mobile-header-widgets-right {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .mobile-header-widgets-center {
    flex: 1;
    justify-content: center;
  }

  .mobile-header-widget {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
  }
}

/* ========================================
   Compact Desktop (1025px - 1279px)
   サブメニューをオーバーレイ化して
   コンテンツ領域を広く確保する
   ======================================== */
@media (max-width: 1279px) and (min-width: 1025px) {
  /* サブメニューをオーバーレイ化 */
  .sidebar-sub {
    transform: translateX(-100%);
    transition:
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.25s;
    box-shadow: none;
    z-index: 103;
    visibility: hidden;
    pointer-events: none;
  }

  .sidebar-sub.compact-open {
    transform: translateX(0);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
    visibility: visible;
    pointer-events: auto;
  }

  /* メインコンテンツのmargin-leftを縮小（メインサイドバー80pxのみ） */
  .app-container {
    margin-left: 80px;
  }

  /* サブメニューオーバーレイ背景 */
  .sidebar-overlay.compact-active {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  /* fixedポジション要素のleft調整 */
  .knowledge-detail-view {
    left: 80px;
  }
}

/* ========================================
   Tablet Range Specific (769px - 1024px)
   ======================================== */
@media (max-width: 1024px) and (min-width: 769px) {
  /* タブレット範囲でハンバーガーメニューボタンを確実に表示 */
  .mobile-header {
    display: block !important;
  }

  .mobile-header__menu-btn {
    display: flex !important;
  }
  /* チャットアクティブ時の上部余白を削減 */
  body.chat-active .main-content {
    padding-top: 8px;
  }
}

@media (max-width: 768px) {
  /* ツールバー右側の要素順序を修正（モバイルのみ） */
  .toolbar__right {
    flex-direction: row-reverse;
  }

  /* メッセージバブル */
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 送信ボタン (B-致命-2: WCAG 2.5.5 タッチターゲット 44px) */
  .send-button {
    width: var(--touch-target-min) !important;
    height: var(--touch-target-min) !important;
    min-width: var(--touch-target-min);
    max-width: var(--touch-target-min);
    flex-shrink: 0;
  }

  .send-button svg {
    width: 16px;
    height: 16px;
  }

  /* モバイル全体調整 */
  /* モバイル時の全体的なフォントサイズ削減と余白調整 */
  html {
    font-size: calc(var(--base-font-size, 16px) - 2px);
  }
  body {
    /* 画面が狭いぶんデスクトップより詰める。 設定との連動は保つ (1.7 -> 1.5 相当) */
    line-height: var(--line-height-normal, 1.5);
  }

  /* 見出しサイズの削減 */
  h1 {
    font-size: 1.4rem;
  }
  h2 {
    font-size: 1.2rem;
  }
  h3 {
    font-size: 1rem;
  }
  h4 {
    font-size: 0.9rem;
  }

  /* 本文・段落の調整 */
  p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 8px;
  }

  /* ヘッダー切り替え */
  .desktop-header {
    display: none;
  }

  .mobile-header {
    display: block;
  }

  /* アプリレイアウト調整 */
  .app-container {
    position: relative;
    padding-top: 0;
    margin-left: 0;
  }

  /* サイドバーモバイル化 */
  .sidebar-main {
    position: fixed;
    top: 60px;
    left: 0;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    width: 80px;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }

  .sidebar-sub {
    position: fixed;
    top: 60px;
    left: 0;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    width: 240px;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }

  .sidebar-main.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }

  .sidebar-sub.mobile-open {
    transform: translateX(80px) !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  }

  /* サイドバー内のハンバーガーメニューを非表示 */
  .sidebar__mobile-toggle {
    display: none;
  }

  /* メインコンテンツ調整 */
  .main-content {
    width: 100%;
    margin-left: 0;
    height: calc(100vh - 60px - var(--app-update-bar-height));
    height: calc(100dvh - 60px - var(--app-update-bar-height));
    overflow-y: auto;
    position: relative;
    padding-bottom: 24px;
  }

  /* チャットアクティブ時: body全体のスクロールを止めてグリッド内だけスクロールさせる */
  body.chat-active {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }

  /* チャットアクティブ時のみヘッダーを縮小してツールバーとの間隔を確保 */
  body.chat-active .mobile-header {
    height: 56px;
    margin-bottom: 4px;
  }

  body.chat-active .main-content {
    padding-top: 0;
    padding-bottom: 0;
    height: calc(100vh - 60px - var(--app-update-bar-height));
    height: calc(100dvh - 60px - var(--app-update-bar-height));
    overflow: hidden;
  }

  /* チャットメッセージエリアのモバイル高さ調整 */
  /* グリッドで自動調整されるためcalc不要 */
  body.chat-active #messages {
    max-height: none;
  }

  /* ナレッジビューのモバイル調整 */
  .knowledge-detail-view,
  .knowledge-create-view {
    top: 60px;
    left: 0;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
  }

  /* オーバーレイ */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* メニューを開いたときに背景のスクロールをロック（JavaScriptで position: fixed を設定） */
  body.sidebar--mobile-open {
    overflow: hidden;
  }

  /* サイドバーの上部固定エリア調整 */
  .sidebar__header {
    justify-content: center;
  }

  .sidebar__header-content {
    text-align: center;
  }

  .sidebar__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* アクションボタンの最適化 */
  .sidebar__actions {
    gap: 8px;
    padding: 0 10px;
  }

  .sidebar__action-btn {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .sidebar__action-btn--primary {
    background: linear-gradient(135deg, var(--color-accent-bg) 0%, var(--color-accent-strong) 100%);
  }

  /* サイドバーセクションの余白調整 */
  .sidebar__section {
    padding: 6px 8px;
  }

  .sidebar__section-title {
    font-size: 0.7rem;
    margin-bottom: 4px;
  }

  /* サイドバーヘッダーの余白調整 */
  .sidebar__header {
    padding: 8px;
  }

  /* チャット一覧の最適化 */
  .sidebar__section--scrollable {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 28vh;
  }

  .sidebar__section--scrollable .sidebar__menu {
    overflow-y: auto;
    flex: 1;
    padding-right: 8px;
    margin-right: -8px;
  }

  .chat-item-container {
    margin-bottom: 3px;
  }

  .sidebar__menu-link {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
  }

  /* 下部固定エリアの安全エリア対応 */
  .sidebar__section--fixed-bottom {
    padding: 10px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* テキストはみ出し防止 */
  .mobile-user-menu__username,
  .sidebar__title,
  .sidebar__subtitle,
  .message__from {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 管理画面の表のはみ出し防止 */
  .admin-panel,
  .profile-panel,
  .dashboard-panel {
    padding: 6px;
    margin-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* マイページ・ダッシュボード内の余白削減 */
  .profile-panel header,
  .dashboard-panel header {
    margin-bottom: 6px !important;
  }

  .profile-panel > div,
  .dashboard-panel > div {
    padding: 6px !important;
    margin-bottom: 6px !important;
  }

  .profile-panel form,
  .dashboard-panel form {
    gap: 6px !important;
  }

  .profile-panel form > div,
  .dashboard-panel form > div {
    gap: 6px !important;
  }

  .stat-card-grid {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  .stat-card {
    padding: 6px !important;
  }

  /* 統計グリッドを2カラムに */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* プロフィール画像設定の余白削減 */
  #profile-avatar-preview {
    width: 80px !important;
    height: 80px !important;
    font-size: 1.8rem !important;
  }

  /* 統計カードの数字サイズ調整 */
  #today-messages,
  #user-chats,
  #active-users,
  #personal-messages {
    font-size: 1.3rem !important;
  }

  #total-users,
  #total-messages,
  #total-chats,
  #active-sessions,
  #editor-total-chats,
  #editor-today-messages,
  #pending-invitations,
  #system-uptime {
    font-size: 1.1rem !important;
  }

  #guest-remaining {
    font-size: 1rem !important;
  }

  /* メディアライブラリの3カラム構成 */
  #media-library-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  /* メディアライブラリのボタンをアイコン化 */
  #media-upload-button,
  #media-refresh-button {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
    position: relative;
  }

  #media-upload-button::before,
  #media-refresh-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  #media-upload-button::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
  }

  #media-refresh-button::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237f8c8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'%3E%3C/polyline%3E%3Cpath d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'%3E%3C/path%3E%3C/svg%3E");
  }

  /* 新規チャットポップアップのボタンサイズ調整 */
  .confirm-button {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
  }

  .popup-body {
    gap: 10px !important;
  }

  #new-chat-form {
    gap: 10px !important;
  }

  /* プロフィール画像設定のレイアウト調整 */
  .profile-panel > div > div[style*='display: flex'],
  .profile-panel > div > div[style*='display: grid'] {
    gap: 8px !important;
  }

  /* フォームのボタン調整 */
  .profile-panel button,
  .dashboard-panel button {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
  }

  /* フォーム内のlabel調整 */
  .profile-panel label,
  .dashboard-panel label {
    gap: 4px !important;
  }

  /* ダイアログのモバイル対応 */
  .confirm-dialog {
    padding: 12px;
  }

  .confirm-dialog-content {
    max-width: calc(100% - 24px);
  }

  /* フォーム要素のフォントサイズ調整（iPhoneのズームフォーカス防止のため16px） */
  input,
  textarea {
    font-size: 1rem !important;
  }

  /* readonly/disabled inputs don't need 16px (no iOS zoom trigger) */
  input[readonly],
  input[disabled],
  textarea[readonly],
  textarea[disabled] {
    font-size: 0.9rem !important;
  }

  label {
    font-size: 0.7rem !important;
  }

  /* 説明文のサイズ調整 */
  p,
  small {
    font-size: 0.85rem;
  }

  .page {
    padding: 0 6px;
  }

  /* メディアパネルとナレッジパネルの余白調整 */
  .media-panel,
  .knowledge-panel {
    padding: 6px !important;
  }

  /* メッセージ入力フォームの余白調整 */
  #message-form {
    padding: 0 0 6px;
  }

  .message-form-row {
    gap: 6px;
  }

  /* 宛先ボタンのモバイル最適化 */
  .recipients-compact {
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  /* モバイルで宛先入力をアイコンボタン化 */
  .recipients-compact .recipients-input {
    border: 1px solid var(--color-border);
    padding: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
  }

  .recipients-compact .recipients-chips {
    display: none;
  }

  /* 添付の公開範囲メニュー: 狭い画面ではみ出さない幅だけ調整 (配置は ui.css で共通) */
  .visibility-control__menu {
    max-width: calc(100vw - 24px);
  }

  .recipients-compact .recipients-input input {
    display: none;
  }

  .recipients-compact .recipients-suggestions {
    left: 0;
    width: 220px;
  }

  .recipients-compact .recipients-suggestions .suggestion {
    font-size: 0.8rem;
    padding: 8px 12px;
    position: relative;
  }

  /* 選択中の宛先をハイライト */
  .recipients-compact .recipients-suggestions .suggestion.selected {
    background: var(--color-accent-bg);
    color: var(--color-button-text);
    font-weight: 600;
  }

  .recipients-compact .recipients-suggestions .suggestion.selected::after {
    content: '[X]';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* 宛先アイコンボタンのスタイル */
  .recipients-compact .recipients-input::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237f8c8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='9' cy='7' r='4'%3E%3C/circle%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'%3E%3C/path%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
  }

  /* モバイルの入力欄をコンパクトに (1 行分の高さに統一) */
  .message-input-wrapper {
    border-radius: 10px;
    padding: 0 4px;
    gap: 4px;
  }

  .message-input-wrapper textarea {
    /* テキスト 1 行分 + 上下 padding (line-height 1.35 で日本語クリッピング回避) */
    padding: 8px 0;
    min-height: calc(1.35em + 16px);
    line-height: 1.35;
  }

  .message-input-wrapper textarea::placeholder {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  /* 添付ボタンのサイズ調整 (モバイルタッチターゲット) */
  .attach-media-button {
    padding: 5px;
  }

  .attach-media-button svg {
    width: 14px;
    height: 14px;
  }

  /* チャットエリアの余白削減 */
  #messages {
    padding: 12px;
  }

  .toolbar__filter {
    margin: 8px 0 8px;
  }

  /* メッセージ表示エリアの余白調整 */
  .message {
    padding: 8px 10px;
    font-size: 0.85rem;
    margin-bottom: 12px;
  }

  .message__body {
    font-size: 0.82rem !important;
    line-height: 1.4;
  }

  .message__bubble {
    max-width: 95% !important;
    padding: 8px 12px;
    /* 鬼教官 C-1（チャット吹き出しレビュー）対応:
       狭い viewport で min-width: 240px が viewport を超えるリスクあり。
       100% を上限として min-width に min() を適用する */
    min-width: min(240px, 100%);
  }

  /* 編集モード時の bubble 拡張は通常時より広げず、画面幅 95% を遵守 */
  .message--editing .message__bubble {
    max-width: 95% !important;
    min-width: min(280px, 100%);
  }

  .message__header {
    margin-bottom: 3px;
  }

  .message__from {
    font-size: 0.8rem;
  }

  .message__time {
    font-size: 0.7rem;
  }

  /* ログイン画面のモバイル最適化 */
  .login-container {
    padding: 16px;
    border-radius: 10px;
    max-width: 95%;
  }

  .login-header {
    margin-bottom: 14px;
  }

  .login-title {
    font-size: 1.25rem;
    margin-bottom: 4px;
  }

  .login-subtitle {
    font-size: 0.8rem;
  }

  .login-form {
    gap: 12px;
  }

  .login-field {
    gap: 4px;
  }

  /* メッセージカラー設定のモバイル最適化 */
  #message-color-settings > div > div > div > div[style*='grid-template-columns'] {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
  }

  .login-label {
    font-size: 0.8rem;
  }

  .login-select,
  .login-input {
    padding: 10px 12px;
    min-height: 42px;
    font-size: 0.9rem;
  }

  #username-search {
    padding: 10px 12px;
    min-height: 42px;
    font-size: 0.9rem;
  }

  .login-button {
    padding: 10px 16px;
    font-size: 0.9rem;
    min-height: 42px;
  }

  /* ログインフォームの候補リスト */
  .username-suggestions {
    max-height: 180px !important;
    font-size: 0.85rem;
  }

  /* 管理画面のテーブル改善 */
  .admin-panel table,
  .profile-panel table,
  .dashboard-panel table {
    display: block;
    width: 100%;
    font-size: 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-panel thead,
  .profile-panel thead,
  .dashboard-panel thead,
  .admin-panel tbody,
  .profile-panel tbody,
  .dashboard-panel tbody,
  .admin-panel tr,
  .profile-panel tr,
  .dashboard-panel tr {
    display: table;
    width: 100%;
    min-width: 600px;
    table-layout: auto;
  }

  .admin-panel th,
  .admin-panel td,
  .profile-panel th,
  .profile-panel td,
  .dashboard-panel th,
  .dashboard-panel td {
    padding: 6px 3px;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* テーブル内のボタン調整 */
  .admin-panel button,
  .profile-panel button,
  .dashboard-panel button {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
    white-space: nowrap;
  }

  /* ポップアップのモバイル対応 */
  .popup-header {
    padding: 10px;
  }

  .popup-body {
    padding: 10px;
    gap: 8px !important;
  }

  .popup-content,
  .popup-container {
    max-width: 95vw;
    max-height: 85vh;
    border-radius: 12px;
    padding: 10px;
  }

  /* グリッドを2カラムに */
  [style*='grid-template-columns'] {
    grid-template-columns: 1fr 1fr !important;
  }

  #profile-update-form [style*='grid-template-columns'] {
    grid-template-columns: 1fr !important;
  }

  /* 新規ユーザー追加フォームの最適化 */
  #add-user-form input,
  #add-user-form select {
    font-size: 0.9rem !important;
    padding: 10px 12px !important;
  }

  #add-user-form button {
    font-size: 0.85rem !important;
    padding: 10px 16px !important;
  }

  /* ナレッジ画面のモバイル最適化 */
  .knowledge-create-title-input,
  .knowledge-view-title {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
  }

  .knowledge-detail-header {
    padding: 10px 12px !important;
    flex-wrap: nowrap;
    gap: 8px !important;
  }

  /* モバイルでは「パネルで開く」と重複する「戻る」を非表示 */
  #knowledge-open-panel-btn,
  #knowledge-cancel-create-button {
    display: none !important;
  }

  .knowledge-create-header {
    padding: 10px 12px !important;
  }

  .knowledge-create-body,
  .knowledge-detail-body {
    padding: 12px !important;
    font-size: 0.85rem !important;
  }

  /* ナレッジアイテムのモバイル最適化 */
  .knowledge-item {
    padding: 12px !important;
    border-radius: 6px !important;
  }

  .knowledge-item-header {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .knowledge-item-icon {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  .knowledge-item-title {
    font-size: 0.85rem !important;
  }

  .knowledge-item-preview {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }

  .knowledge-item-tags {
    gap: 3px !important;
    margin-bottom: 6px !important;
  }

  .knowledge-item-meta {
    gap: 8px !important;
    font-size: 0.7rem !important;
  }

  .knowledge-detail-view-mode,
  .knowledge-create-edit-mode {
    max-width: 100%;
    padding: 0;
  }

  /* ナレッジボタンの調整 */
  .knowledge-create-actions button,
  .knowledge-detail-actions button {
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    min-width: auto !important;
  }

  /* 戻るボタンの最適化 */
  .knowledge-detail-back-btn,
  .knowledge-create-back-btn {
    padding: 8px !important;
    font-size: 0 !important;
    gap: 0 !important;
  }

  .knowledge-detail-back-btn svg,
  .knowledge-create-back-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  .knowledge-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .knowledge-create-actions {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }

  /* モバイルではラベル非表示、アイコン表示 */
  .knowledge-detail-edit-btn .knowledge-btn-label,
  .knowledge-detail-cancel-btn .knowledge-btn-label,
  .knowledge-detail-delete-btn .knowledge-btn-label {
    display: none;
  }

  .knowledge-detail-edit-btn .knowledge-btn-icon,
  .knowledge-detail-cancel-btn .knowledge-btn-icon,
  .knowledge-detail-delete-btn .knowledge-btn-icon {
    display: block;
    width: 18px;
    height: 18px;
  }

  .knowledge-detail-edit-btn,
  .knowledge-detail-cancel-btn,
  .knowledge-detail-delete-btn {
    padding: 8px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 下書き保存を短縮 */
  .knowledge-detail-draft-btn {
    font-size: 0.75rem !important;
  }

  /* ナレッジエディターの調整 */
  .knowledge-create-editor {
    font-size: 0.9rem !important;
    min-height: 200px !important;
  }

  /* ナレッジタグ入力の調整 */
  .knowledge-tags-input {
    font-size: 0.9rem !important;
    padding: 10px 12px !important;
  }

  /* 通知ポップアップのモバイル対応 */
  .notification-popup {
    right: 10px;
    left: 10px;
    top: calc(70px + var(--app-update-bar-height));
  }

  .notification-content {
    min-width: auto;
    max-width: 100%;
    padding: 10px 12px;
  }

  .notification-message {
    font-size: 0.85rem;
  }

  /* 設定ビューのモバイル対応 */
  .settings-tabs {
    gap: 0 !important;
    margin-bottom: 12px !important;
  }

  .settings-tab {
    padding: 10px 6px !important;
    font-size: 0.75rem !important;
  }

  #settings-tab-content {
    padding: 0 !important;
  }

  /* ブランド設定のモバイル対応 */
  #settings-tab-content > div > div {
    max-width: 100% !important;
    gap: 20px !important;
  }

  #app-title-input {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
  }

  #app-logo-preview,
  #app-favicon-preview {
    min-height: 60px !important;
    padding: 12px !important;
  }

  #clear-logo-button,
  #clear-favicon-button {
    width: var(--touch-target-min) !important;
    height: var(--touch-target-min) !important;
    font-size: 0.85rem !important;
    top: 4px !important;
    right: 4px !important;
  }

  #reset-brand-settings {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
  }

  #apply-brand-settings {
    padding: 10px 24px !important;
    font-size: 0.85rem !important;
  }

  /* カラー設定のモバイル対応 */
  .theme-btn {
    padding: 12px !important;
    font-size: 0.8rem !important;
  }

  #message-color-settings {
    gap: 16px !important;
  }

  #message-color-settings > div {
    gap: 8px !important;
  }

  #message-color-settings h4 {
    font-size: 0.8rem !important;
    margin-bottom: 8px !important;
  }

  #message-color-settings label {
    font-size: 0.75rem !important;
    gap: 4px !important;
  }

  #message-color-settings input[type='color'] {
    width: 100% !important;
    height: 36px !important;
    padding: 2px !important;
  }

  #message-color-settings button {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
  }

  /* ポップアップタイトル・ヘッダーのモバイル対応 */
  .popup-header h2,
  .popup-header h3,
  .popup-title {
    font-size: 1rem !important;
  }

  .popup-header {
    padding: 12px !important;
  }

  .popup-close {
    width: var(--touch-target-min) !important;
    height: var(--touch-target-min) !important;
    font-size: 1.25rem !important;
  }

  /* ポップアップボタンのモバイル最適化 */
  .btn,
  .popup-footer button {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
  }

  .popup-footer {
    padding: 12px 16px !important;
    gap: 8px !important;
  }

  /* メディアライブラリとテーブル */
  .media-library-item-info {
    padding: 6px;
  }

  .media-library-item-meta {
    font-size: 0.6rem;
  }

  /* メディアピッカーのモバイル最適化 */
  .media-picker-tabs {
    gap: 0;
    margin-bottom: 12px;
    display: flex !important;
  }

  .media-picker-tab {
    padding: 10px 6px !important;
    font-size: 0.75rem !important;
    flex: 1 !important;
  }

  .media-picker-filter {
    gap: 6px;
    margin-bottom: 8px;
  }

  .media-picker-search {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
  }

  .media-picker-select {
    flex-shrink: 1 !important;
    padding: 6px 4px !important;
    font-size: 0.75rem !important;
    min-width: 0 !important;
  }

  .media-sort-btn {
    width: var(--touch-target-min) !important;
    height: var(--touch-target-min) !important;
    flex-shrink: 0 !important;
  }

  /* ピッカーモーダルのモバイル対応 */
  #media-picker-modal .popup-content {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #media-picker-modal .popup-body {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #media-picker-modal .media-picker-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px !important;
  }

  #media-picker-modal .media-picker-item {
    padding: 3px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #media-picker-modal .media-picker-item-preview {
    margin-bottom: 2px !important;
  }

  #media-picker-modal .media-picker-item-name {
    font-size: 0.6rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #media-picker-modal .media-picker-filter {
    flex-wrap: wrap;
  }

  #media-picker-modal .media-picker-search {
    flex: 1 1 100% !important;
  }

  .media-sort-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .knowledge-search-input {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
  }

  .media-picker-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    min-height: 150px;
    max-height: 50vh;
  }

  .media-picker-item {
    padding: 4px;
  }

  .media-picker-item-preview {
    margin-bottom: 4px;
  }

  .media-picker-item-name {
    font-size: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .media-picker-dropzone {
    padding: 40px 15px;
  }

  .media-picker-dropzone p {
    font-size: 0.85rem;
  }

  /* 管理画面テーブルのスマホ対応 */
  .admin-users-table-container,
  #admin-invitations-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px 12px 12px;
  }

  .admin-users-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.75rem;
    border-collapse: separate;
    border-spacing: 0;
  }

  .admin-users-table th,
  .admin-users-table td {
    padding: 6px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--color-border);
    border-right: none;
    border-bottom: none;
  }

  .admin-users-table th:last-child,
  .admin-users-table td:last-child {
    border-right: 1px solid var(--color-border);
  }

  .admin-users-table tbody tr:last-child td {
    border-bottom: 1px solid var(--color-border);
  }

  .admin-users-table th {
    padding: 8px 4px;
    font-size: 0.7rem;
  }

  /* ユーザーテーブルの列幅 */
  #admin-users-container .admin-users-table th:nth-child(1),
  #admin-users-container .admin-users-table td:nth-child(1) {
    width: 20%;
    font-size: 0.7rem;
  }

  #admin-users-container .admin-users-table th:nth-child(2),
  #admin-users-container .admin-users-table td:nth-child(2) {
    width: 22%;
  }

  #admin-users-container .admin-users-table th:nth-child(3),
  #admin-users-container .admin-users-table td:nth-child(3) {
    width: 18%;
  }

  #admin-users-container .admin-users-table th:nth-child(4),
  #admin-users-container .admin-users-table td:nth-child(4) {
    display: none;
  }

  #admin-users-container .admin-users-table th:nth-child(5),
  #admin-users-container .admin-users-table td:nth-child(5) {
    display: none;
  }

  #admin-users-container .admin-users-table th:nth-child(6),
  #admin-users-container .admin-users-table td:nth-child(6) {
    width: 40%;
    min-width: 140px;
  }

  #admin-users-container .admin-users-table td:nth-child(6) {
    padding: 4px 3px;
  }

  /* 操作セル内のflexレイアウト調整 */
  #admin-users-container .admin-users-table td:nth-child(6) > * {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 4px;
    align-items: center;
    width: 100%;
  }

  /* 招待コードテーブルの列幅 */
  #admin-invitations-container .admin-users-table th:nth-child(1),
  #admin-invitations-container .admin-users-table td:nth-child(1) {
    width: 28%;
    white-space: nowrap;
    font-size: 0.7rem;
  }

  #admin-invitations-container .admin-users-table th:nth-child(2),
  #admin-invitations-container .admin-users-table td:nth-child(2) {
    width: 28%;
  }

  #admin-invitations-container .admin-users-table th:nth-child(3),
  #admin-invitations-container .admin-users-table td:nth-child(3) {
    display: none;
  }

  #admin-invitations-container .admin-users-table th:nth-child(4),
  #admin-invitations-container .admin-users-table td:nth-child(4) {
    display: none;
  }

  #admin-invitations-container .admin-users-table th:nth-child(5),
  #admin-invitations-container .admin-users-table td:nth-child(5) {
    display: none;
  }

  #admin-invitations-container .admin-users-table th:nth-child(6),
  #admin-invitations-container .admin-users-table td:nth-child(6) {
    display: none;
  }

  #admin-invitations-container .admin-users-table th:nth-child(7),
  #admin-invitations-container .admin-users-table td:nth-child(7) {
    width: 18%;
    font-size: 0.7rem;
  }

  #admin-invitations-container .admin-users-table th:nth-child(8),
  #admin-invitations-container .admin-users-table td:nth-child(8) {
    width: 26%;
    padding: 4px 2px;
  }

  .admin-action-button {
    padding: 7px 8px;
    font-size: 0.7rem;
    white-space: nowrap;
    text-align: center;
    min-width: 0;
    flex: 1;
  }

  .admin-users-table td select {
    padding: 3px 4px;
    font-size: 0.7rem;
    width: 100%;
  }

  .dashboard-panel {
    padding: 12px;
  }

  /* プラグインカード */
  .plugin-card__header {
    flex-direction: column;
  }

  .plugin-card__status {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .plugin-card__meta {
    flex-direction: column;
    gap: 8px;
  }
}

/* デスクトップ用入力欄スタイルは ui.css に集約済み (旧重複定義を撤去) */

@media (max-width: 1024px) and (min-width: 769px) {
  .sidebar {
    width: 240px;
  }

  .sidebar__actions {
    gap: 6px;
  }

  .sidebar__action-btn {
    padding: 10px 14px;
    font-size: 0.85rem;
  }

  .page {
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .sidebar {
    width: 260px;
  }

  .mobile-header__content {
    padding: 0 8px;
    gap: 8px;
  }

  .mobile-header__title {
    font-size: 0.9rem;
    flex: 0 0 auto;
  }

  .mobile-user-menu {
    right: 12px;
    min-width: 220px;
  }

  .sidebar__header {
    padding: 16px;
  }

  .sidebar__content {
    padding: 12px;
  }

  .sidebar__action-btn {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .sidebar__action-icon {
    width: 16px;
    height: 16px;
  }

  .page {
    padding: 0 12px;
  }

  /* プラグインカード: 小型スマホ対応 */
  .plugin-card__actions {
    flex-direction: column;
    gap: 6px;
  }

  .plugin-card__actions button {
    width: 100%;
    font-size: 0.8rem;
  }
}

@media (max-width: 640px) {
  main {
    min-height: calc(100vh - 220px);
    min-height: calc(100dvh - 220px);
    padding: 8px 0 24px;
    gap: 12px;
  }

  .message__time {
    width: 100%;
    text-align: left;
    margin-left: 0;
  }

  button[type='submit'] {
    width: 100%;
  }
}

/* ========================================
   Media Library Responsive
   ======================================== */

/* PC: 5カラム (デフォルト - minmax(140px, 1fr)で自動調整) */

/* タブレット: 4〜3カラム */
@media (max-width: 1024px) and (min-width: 769px) {
  #media-view .media-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
}

/* スマホ: 3カラム */
@media (max-width: 768px) {
  .media-library-item-name {
    font-size: 0.75rem;
  }

  .media-library-item-meta {
    font-size: 0.6rem;
  }

  .media-library-item-actions {
    gap: 4px;
  }

  .media-library-item-actions button {
    padding: 6px;
  }
}

/* スマホ: アクションボタンを2x2グリッドに */
@media (max-width: 768px) {
  .media-library-item-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 6px;
  }

  .media-library-item-actions button {
    padding: 6px;
    min-height: 32px;
  }
}

/* 小さいスマホ: 2カラム + gap調整 */
@media (max-width: 480px) {
  #media-library-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .media-library-item-info {
    padding: 6px;
  }

  .media-library-item-name {
    font-size: 0.7rem;
  }

  .media-library-item-meta {
    font-size: 0.55rem;
  }
}

/* ========================================
   iOS自動ズーム抑制
   iOSではfont-size 16px未満のinputにフォーカスすると
   自動ズームされるため、モバイル時は最低16pxを保証
   ======================================== */
@media (max-width: 1024px) {
  input[type='text'],
  input[type='password'],
  input[type='email'],
  input[type='number'],
  input[type='search'],
  input[type='tel'],
  input[type='url'],
  input:not([type]),
  textarea,
  select,
  [contenteditable='true'] {
    font-size: max(1rem, 16px) !important;
  }
}