/* ========================================================================
   AI Auto Poster - Responsive overrides (all @media queries)
   ------------------------------------------------------------------------
   全ファイルから @media クエリを集約。テーマ規約に従い、新規追加分は
   スマホファースト (min-width) を推奨。WP コア管理画面の折り畳み閾値
   (782px) との整合のため max-width 系は維持。
   ======================================================================== */

/* スマホ (~767px): 1 行に詰めると時刻 input が squeeze されて
   "8:00" の数字部分まで枠で切れて表示されるため、削除/追加ボタンを
   下の行に折り返し、時刻 input には可読な最小幅を確保する。 */
@media (max-width: 767px){
    .aiap-allowed-row{
        flex-wrap:wrap;
    }
    .aiap-allowed-row .aiap-input-text{
        flex:1 1 0;
        min-width:80px;
    }
    .aiap-allowed-actions{
        flex:1 1 100%;
        margin-left:0;
        margin-top:6px;
        justify-content:flex-end;
    }
}
/* ≥768px: 共通ブレークポイントに合わせて横並び + カード固定幅 */
@media (min-width: 768px){
    .aiap-random-fields{
        flex-direction:row;
        flex-wrap:wrap;
        gap:8px 28px;
    }
    .aiap-allowed-row{
        width:380px;
    }
    .aiap-allowed-row .aiap-input-text{
        flex:0 0 100px;
        width:100px;
    }
}
@media (max-width: 768px) {
    .aiap-dedup-sens-wrap{
        margin-left: 0;
    }
}
/* Responsive */
@media (max-width: 768px) {
    .aiap-card .form-table th{display:block;width:100%;padding-bottom:2px}
    .aiap-card .form-table td{display:block;padding-top:0}
    .aiap-api-row{flex-direction:column}
    .aiap-api-row input{width:100%}
}
@media (max-width: 768px) {
    .aiap-grid-2col {
        grid-template-columns: 1fr;
    }
    .aiap-subtab-wrapper {
        gap: 0;
    }
    .aiap-subtab {
        padding: 8px 10px;
        font-size: 11.5px;
    }
}
@media (max-width: 768px) {
    .aiap-main-tab-wrapper{
        padding: 0;
        overflow-x: visible;
        flex-wrap: wrap;
        gap: 2px;
        background: #f0f0f1;
        border-bottom: 1px solid #2271b1;
    }
    .aiap-main-tab-wrapper .aiap-subtab{
        padding: 8px 6px;
        font-size: 11px;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        text-align: center;
        border-bottom-width: 2px;
    }
    .aiap-main-tab-wrapper .aiap-subtab .aiap-tab-icon{
        font-size: 14px;
        width: 14px;
        height: 14px;
    }
    .aiap-main-tab-wrapper .aiap-subtab span:not(.aiap-tab-icon){
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .aiap-main-tab-wrapper .aiap-subtab-active{
        margin-bottom: 0;
    }
    .aiap-wrap{
        margin-right: 10px;
        overflow-x: hidden;
    }
    .aiap-provider-picker{
        padding: 16px;
    }

    /* ──────────────────────────────────────────
       タスク一覧テーブルをカード風に縦積み表示
       (widefat のデフォルト横組では4列が画面幅を超える)
       ────────────────────────────────────────── */
    .aiap-wrap table.widefat {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        display: block;
    }
    .aiap-wrap table.widefat thead,
    .aiap-wrap table.widefat tbody,
    .aiap-wrap table.widefat tr,
    .aiap-wrap table.widefat th,
    .aiap-wrap table.widefat td {
        display: block;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }
    .aiap-wrap table.widefat thead {
        display: none; /* カード表示では列見出しを隠す */
    }
    .aiap-wrap table.widefat tr {
        border: 1px solid #dcdcde;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 10px;
        background: #fff;
        overflow: hidden;
    }
    .aiap-wrap table.widefat td {
        border: none;
        padding: 6px 0;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .aiap-wrap table.widefat td:empty {
        display: none;
    }
    /* 操作列のボタン群は横並びで折り返し */
    .aiap-wrap table.widefat td .aiap-inline-form,
    .aiap-wrap table.widefat td .button {
        display: inline-flex;
        margin: 3px 4px 3px 0;
        vertical-align: middle;
    }

    /* ──────────────────────────────────────────
       幅固定の入力を画面幅に収める
       ────────────────────────────────────────── */
    .aiap-wrap input.regular-text,
    .aiap-wrap input[type="text"]:not(.small-text),
    .aiap-wrap input[type="number"]:not(.small-text),
    .aiap-wrap textarea.large-text,
    .aiap-wrap textarea.code {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* スケジュール入力行がテーブル内でも縮むように */
    .aiap-sched-row {
        flex-wrap: wrap;
    }
    .aiap-sched-row input {
        width: 100%;
        max-width: 100%;
    }

    /* スケジュールグリッド: モバイルでは 1 列に戻す
       (HTML/JS にインライン style 指定が無いことを確認済。同セレクタ詳細度の
        2 列定義より後にあるためソース順で勝つ。!important は不要。) */
    .aiap-sched-grid {
        grid-template-columns: 1fr;
    }

    /* form-table の th/td も縦積みに */
    .aiap-wrap table.form-table th,
    .aiap-wrap table.form-table td {
        display: block;
        width: 100%;
        padding: 8px 0;
        box-sizing: border-box;
    }

    /* サブタブのパネルパディングを削減(画面幅を有効活用) */
    .aiap-subtab-panel,
    .aiap-main-tab-panel {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* カード(aiap-card)もパディング圧縮 */
    .aiap-wrap .aiap-card {
        padding: 14px;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* タスクオプション(言語・文字数)をモバイルでは縦積み */
    .aiap-task-options {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .aiap-task-options > label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }
    .aiap-task-options select,
    .aiap-task-options input[type="number"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}
@media (max-width: 768px) {
    .aiap-progress-media {
        width: 100%;
        max-width: 240px;
        margin: 0 auto;
    }
}
/* WP 標準のタブレット折り畳み閾値 (max-width: 992px) に揃える。
   admin-modern.css 側でも min-width:960px で 2 カラムに切り替えており、両ファイルの
   閾値を同じに保つことでモダンテーマ ON/OFF どちらでも同じ折り返し挙動になる。 */
@media (max-width: 992px) {
    .aiap-prompts-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
@media (min-width: 768px){
    .aiap-image-presets{grid-template-columns:repeat(3,1fr);gap:14px}
    .aiap-preset-visual{height:120px}
    .aiap-img-hero-title{font-size:26px}
}
@media (min-width: 768px){
    .aiap-imgset-title{font-size:26px}
    .aiap-imgset-presets{grid-template-columns:repeat(3,1fr);gap:14px}
    .aiap-imgset-card__visual{height:130px}
}
/* デスクトップレイアウト */
@media (min-width: 768px){
    .aiap-provider-hero-title{font-size:26px}
    .aiap-provider-popular{grid-template-columns:repeat(3,1fr);gap:12px}
    .aiap-provider-other{grid-template-columns:repeat(4,1fr)}
    .aiap-provider-tile{flex-direction:column;text-align:center;padding:18px 14px;align-items:center;min-height:140px}
    .aiap-provider-tile .aiap-provider-tile-meta{align-items:center;text-align:center}
    .aiap-provider-tile .aiap-provider-tile-status,
    .aiap-provider-tile .aiap-provider-tile-check{position:absolute;top:10px;right:10px}
    .aiap-provider-tile .aiap-provider-tile-icon{width:44px;height:44px;font-size:16px;margin-bottom:4px}
}
@media (min-width: 768px){
    .aiap-grid-2{grid-template-columns:1fr 1fr;gap:14px 18px}
    .aiap-field-fullspan{grid-column:1/-1}
}
@media (min-width: 768px){.aiap-quickpost-options{grid-template-columns:1fr 1fr;gap:18px}}
@media (min-width: 768px){
    .aiap-theme-modern .aiap-quickpost-task-select{flex:0 1 220px;order:0}
}
@media (min-width: 768px){.aiap-sched-grid{grid-template-columns:1fr 1fr;gap:8px 14px}}
@media screen and (max-width: 782px){
  .aiap-row-aux{display:block}
  /* Suppress the column-header lists that appear as vertical strips on mobile.
     WP_List_Table renders headers in both <thead> AND <tfoot>; theme CSS in
     this site overrides WP core's mobile rules and lets them expand into a
     stacked list of column names ("AI Generated Title / Created At / ..." etc).
     Targeting the dedicated class added via get_table_classes() so the rule
     is independent of any wrapper element. */
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts thead,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts thead tr,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts thead th,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tfoot,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tfoot tr,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tfoot th{display:none}
}
/* ====== モバイル (<=782px) ====== */
@media screen and (max-width: 782px){
  .aiap-logs-table-section .aiap-section-body{padding:0;overflow:hidden}
  .aiap-logs-table-section .tablenav{
    padding:12px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  /* モバイルではバルクアクション領域は完全に潰す */
  .aiap-logs-table-section .bulkactions{display:none}

  /* 範囲表示はページ送りの上に中央寄せで小さく */
  .aiap-logs-table-section .aiap-tablenav-info{
    text-align:center;
    font-size:12px;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  /* ページ送りはタップしやすく大きめ・中央寄せ */
  .aiap-logs-table-section .tablenav .tablenav-pages{
    width:100%;
    justify-content:center;
    gap:8px;
  }
  .aiap-logs-table-section .tablenav-pages .pagination-links{gap:4px}
  /* モバイルでも «(最初) ‹(前へ) ›(次へ) »(最後) の4ボタンを表示する。
     端ジャンプボタンは多ページ時に直接入力より早くたどり着けるので隠さない。
     font-size を素直に上げることで、有効リンクと無効 span (.tablenav-pages-navspan)
     のどちらでも «‹›» 文字が同じ大きさで描画されるようにする (::before 不要)。 */
  .aiap-logs-table-section .tablenav-pages .button,
  .aiap-logs-table-section .tablenav-pages .tablenav-pages-navspan{
    min-width:40px;
    width:40px;
    height:40px;
    font-size:22px;
    border-radius:10px;
  }
  /* モバイルでも «(最初) »(最後) は背景を薄くして ‹ › と区別する */
  .aiap-logs-table-section .tablenav-pages a.first-page.button,
  .aiap-logs-table-section .tablenav-pages a.last-page.button{
    background:var(--bg-soft, #f9fafb);
    font-size:24px;
  }
  .aiap-logs-table-section .tablenav-pages .current-page{
    width:56px;
    min-width:56px;
    height:40px;
    font-size:16px;
    border-radius:10px;
  }
  .aiap-logs-table-section .tablenav-paging-text{
    font-size:14px;
    color:var(--txt, #18181b);
  }

  /* ====== 投稿履歴: スマホはミニリスト表示 ======
     生成ログはスマホでテーブル列を維持しない。添付イメージに合わせ、
     画像 / タイトル+メタ / 操作メニューの3要素だけを1カードにまとめる。 */
  .aiap-logs-table-section .aiap-section-body{
    overflow:visible;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts{
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    border:0;
    background:transparent;
    table-layout:auto;
    box-sizing:border-box;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts thead,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tfoot{
    display:none;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody{
    display:block;
    width:100%;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr{
    display:grid;
    position:relative;
    grid-template-columns:56px minmax(0, 1fr) 36px;
    column-gap:12px;
    align-items:center;
    width:100%;
    min-height:76px;
    margin:0 0 10px;
    padding:12px;
    border:1px solid var(--bdr, #e5e7eb);
    border-radius:12px;
    background:#fff;
    box-sizing:border-box;
    overflow:visible;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr.aiap-mobile-action-row-open,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:has(.aiap-mobile-action-menu[open]){
    z-index:30;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:last-child{
    margin-bottom:0;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) td:not(.hidden),
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) th:not(.hidden){
    display:block;
    width:auto;
    min-width:0;
    max-width:none;
    padding:0;
    border:0;
    background:transparent;
    box-sizing:border-box;
    overflow:visible;
    white-space:normal;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) td.column-created_at,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) td.column-writer,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) td.column-task_name,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) td.column-status{
    display:none;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr td::before,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr th::before{
    content:none;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .toggle-row{
    display:none;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) td.column-image:not(.hidden){
    grid-column:1;
    grid-row:1;
    align-self:center;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) td.column-title:not(.hidden){
    grid-column:2;
    grid-row:1;
    align-self:center;
    padding-right:2px;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) td.column-actions:not(.hidden){
    grid-column:3;
    grid-row:1;
    align-self:center;
    justify-self:end;
    position:relative;
    width:36px;
    min-width:36px;
    max-width:36px;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) td.column-actions::before{
    content:none;
    display:none;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts td.column-title strong{
    display:block;
    min-width:0;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts td.column-title a{
    display:-webkit-box;
    max-width:100%;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    white-space:normal;
    word-break:break-word;
    line-height:1.35;
    font-size:16px;
    font-weight:700;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-row-aux{
    display:block;
    margin-top:4px;
    color:var(--txt-m, #52525b);
    font-size:13px;
    line-height:1.35;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-logs-thumb,
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-logs-thumb-placeholder{
    display:block;
    width:48px;
    height:48px;
    border-radius:8px;
    object-fit:cover;
    background:#e5e7eb;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-action-buttons--desktop{
    display:none;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-mobile-action-menu{
    display:block;
    position:relative;
    width:32px;
    height:32px;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-mobile-action-menu summary{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--txt-m, #52525b);
    cursor:pointer;
    list-style:none;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-mobile-action-menu summary::-webkit-details-marker{
    display:none;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-mobile-action-menu summary span{
    display:block;
    font-size:24px;
    line-height:1;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-mobile-action-menu__items{
    display:flex;
    position:absolute;
    top:50%;
    right:38px;
    z-index:40;
    flex-direction:column;
    gap:4px;
    width:120px;
    padding:8px;
    border:1px solid var(--bdr, #e5e7eb);
    border-radius:10px;
    background:#fff;
    box-shadow:0 8px 20px rgb(15 23 42 / 0.12);
    box-sizing:border-box;
    transform:translateY(-50%);
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-mobile-action-menu:not([open]) .aiap-mobile-action-menu__items{
    display:none;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-mobile-action-menu__items a{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:32px;
    padding:4px 6px;
    color:var(--txt, #18181b);
    text-decoration:none;
    border-radius:6px;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-mobile-action-menu__items .dashicons{
    width:16px;
    height:16px;
    font-size:16px;
    line-height:16px;
  }
}
@media (min-width: 768px){
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts{
    display:table;
    table-layout:fixed;
    border-collapse:collapse;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts thead{
    display:table-header-group;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tfoot{
    display:table-footer-group;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody{
    display:table-row-group;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr{
    display:table-row;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) td:not(.hidden),
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts tbody tr:not(.inline-edit-row):not(.no-items) th:not(.hidden){
    display:table-cell;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-action-buttons--desktop{
    display:flex;
  }
  .aiap-logs-table-section table.wp-list-table.aiap-generated-posts .aiap-mobile-action-menu{
    display:none;
  }
}
@media (max-width: 768px) {
    .aiap-rss-add-grid { grid-template-columns: 1fr; }

    /* 追加フォーム下段：actions を1段では入りきらないので折り返し可能に */
    .aiap-rss-add-row {
        flex-direction: column;
        align-items: stretch;
    }
    .aiap-rss-add-actions {
        margin-left: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* 登録済みフィードカード：ステータスバッジ＋トグルを次行へ折り返す */
    .aiap-rss-feed-card-head {
        flex-wrap: wrap;
    }
    .aiap-rss-feed-card-head .aiap-provider-tile-status {
        margin-left: auto;
    }
}
/* スマホ (~767px): スケジュールサマリー本文 (例: "— ランダム 2〜4 回 / 日") は
   ヘッダ要素 (トグル + アイコン + タイトル + 「設定済」バッジ) で残り幅を
   ほぼ食われ、3 行に折り返されて醜くなる。状態は「設定済」バッジで伝わるため
   スマホでは本文を非表示にし、詳細はセクションを開いて確認してもらう。 */
@media (max-width: 767px){
    .aiap-task-section__summary-text{
        display:none;
    }
}
/* ≤ 768px: 1 カラム + ハンバーガー */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-shell{
        grid-template-columns: 1fr;
    }
    .aiap-theme-modern .aiap-sidebar{
        position: relative;
        top: 0;
        display: none;
        margin-bottom: 12px;
    }
    .aiap-theme-modern .aiap-sidebar.is-open{
        display: block;
    }
    .aiap-theme-modern .aiap-sidebar-toggle{
        display: inline-flex;
    }
    .aiap-theme-modern .aiap-sidebar-toggle[aria-expanded="true"] .dashicons-menu::before{
        content: "\f335"; /* dashicons-no-alt */
    }
}
/* === レスポンシブ === */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-dash-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .aiap-theme-modern .aiap-dash-card-value{
        font-size: 22px;
    }
}
@media (max-width: 782px){
    .aiap-theme-modern .aiap-dash-grid{
        grid-template-columns: 1fr;
    }
}
/* ≤ 600px: プリセットを 1 列に */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-wizard{
        margin: 12px;
        border-radius: var(--r);
    }
    .aiap-theme-modern .aiap-wizard-header{
        padding: 20px 18px 16px;
    }
    .aiap-theme-modern .aiap-wizard-form{
        padding: 18px 18px;
    }
    .aiap-theme-modern .aiap-wizard-presets{
        grid-template-columns: 1fr;
    }
}
/* モバイル: 上の desktop 向けテーブル表示を解除。
   モバイルでは tr が display:block の縦カードリストになるので固定 min-width は不要。
   .aiap-theme-modern を付けて admin.css 側より specificity を上げて確実に勝たせる。 */
@media screen and (max-width: 782px){
    .aiap-theme-modern .aiap-logs-table-section .aiap-section-body{
        overflow: visible;
    }
    .aiap-theme-modern .aiap-run-logs-section .aiap-section-body{
        overflow-x: hidden;
    }
    .aiap-theme-modern .aiap-logs-table-section table.widefat,
    .aiap-theme-modern .aiap-run-logs-section table.widefat{
        min-width: 0;
        width: 100%;
    }
}
/* レスポンシブ: モバイルでは meta を縦積み */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-task-card-row{
        flex-direction: column;
    }
    .aiap-theme-modern .aiap-task-card-actions{
        align-self: flex-end;
    }
    .aiap-theme-modern .aiap-task-card-meta{
        gap: 4px 12px;
    }
}
/* === レスポンシブ === */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-quickpost-options-grid{
        grid-template-columns: 1fr;
    }
    .aiap-theme-modern .aiap-quickpost-editor{
        padding: 18px 16px 14px;
    }
    .aiap-theme-modern .aiap-quickpost-options-grid{
        padding: 16px;
    }
    .aiap-theme-modern .aiap-quickpost-action{
        padding: 16px;
    }
    .aiap-theme-modern .aiap-quickpost-cta{
        width: 100%;
        justify-content: center;
    }
}
@media (min-width: 992px){
    .aiap-theme-modern .aiap-prompts-layout{
        grid-template-columns: 360px 1fr;
        align-items: start;
    }
    /* システムプロンプト (左) を sticky にして読みやすく */
    .aiap-theme-modern .aiap-prompts-col-system{
        position: sticky;
        top: 24px;
    }
}
/* レスポンシブ: 720px 以下では 2 行に折り返す */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-task-card-row-compact{
        flex-wrap: wrap;
    }
    .aiap-theme-modern .aiap-task-card-row-compact .aiap-task-card-main{
        flex-basis: calc(100% - 24px);
    }
    .aiap-theme-modern .aiap-task-card-row-compact .aiap-task-card-actions{
        flex-basis: 100%;
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--bdr-l);
        margin-top: 4px;
    }
}
/* === タスクカード モバイル === */
@media (max-width: 782px){
    /* 状態ドットは非表示 (左 border が状態を示すので不要) */
    .aiap-theme-modern .aiap-task-status-dot{
        display: none;
    }
    /* main を完全に幅いっぱい使う */
    .aiap-theme-modern .aiap-task-card-row-compact .aiap-task-card-main{
        flex-basis: 100%;
    }
    /* タスク名行を改行可に (ID は別行に) */
    .aiap-theme-modern .aiap-task-name-line{
        flex-wrap: wrap;
    }
}
/* 4 つ横並びは ≤480px で 1 列に */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-dash-grid{
        grid-template-columns: 1fr;
    }
}
/* Phase 7 で「+ タスク追加」をヘッダー右に置いたが、モバイルでは見切れることがあるので flex-wrap */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-section-header.aiap-section-header-with-action{
        flex-wrap: wrap;
        gap: 8px;
    }
    .aiap-theme-modern .aiap-section-header-cta{
        flex-shrink: 0;
    }
}
@media (max-width: 992px){
    .aiap-theme-modern .aiap-quickpost-form .aiap-progress,
    .aiap-theme-modern .aiap-quickpost .aiap-progress{
        grid-template-columns: 1fr;
    }
    .aiap-theme-modern .aiap-quickpost-form .aiap-progress-media,
    .aiap-theme-modern .aiap-quickpost .aiap-progress-media{
        width: min(260px, 100%);
        justify-self: start;
    }
}
/* ========================================================================
   モバイル(<=782px)レイアウトの基盤

   設計方針 (旧「REAL mobile overflow fix」を構造ごと書き直したもの):
   - 旧版は .wrap / .aiap-wrap / .aiap-shell ... に width:100% !important を
     一括で当てる「核兵器ルール」だったが、box-sizing:border-box の下では
     box が親の content 幅をフルに占有し、margin が box の外側に張り出して
     viewport を超え、html{overflow-x:hidden} で切られる事故が起きていた
     (右が切れる現象 / 左の選択カード box-shadow が切れる現象、両方の真因)。
   - 本実装はガター(余白)を margin ではなく padding(border-box の内側)で取る
     ことで、box が viewport を超えない状態を保証する。
   - WP コアの .wrap はモバイルで margin:0 12px 0 2px と非対称のため、
     プラグイン管理画面に限り margin を打ち消し、自前の .aiap-wrap で
     左右対称 14px のガターを作る (カード選択時の box-shadow 0 0 0 3px が
     ガター内に収まるので切られない)。
   ======================================================================== */
@media (max-width: 782px){
  /* グローバル overflow ガード: 想定外の長文 (URL, コード, 翻訳等) で
     横スクロールが発生したときの最終防衛線。本来は overflow させない CSS が
     正解で、これに頼らず作るべきだが、ユーザーコンテンツが入る都合上残す。 */
  html, body{
    overflow-x: hidden !important;
    width: 100%;
  }

  /* WP コアの .wrap (margin:0 12px 0 2px) を一旦リセット。
     ガターは下の .aiap-wrap の padding 側で作る。 */
  .aiap-theme-modern.wp-admin .wrap,
  .aiap-theme-modern .wrap{
    margin: 0;
  }

  /* 左右対称 14px のガター。border-box なので padding 込みでも box は
     viewport を超えない。これがモバイル全画面共通の余白の源泉。 */
  .aiap-theme-modern .aiap-wrap{
    padding: 0 14px;
    box-sizing: border-box;
  }

  /* grid item が flex/grid 親の中で min-width:auto により縮まないバグの
     防衛策。横幅の強制ではなく、収縮可能性の宣言。!important は不要。 */
  .aiap-theme-modern .aiap-shell,
  .aiap-theme-modern .aiap-main{
    min-width: 0;
  }

  /* 長いタスク名等のはみ出し対策 (タスクカード内部のレイアウトに閉じる) */
  .aiap-theme-modern .aiap-task-card{
    overflow: hidden;
  }

  .aiap-theme-modern .aiap-task-card-row-compact{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
  }

  .aiap-theme-modern .aiap-task-card-main{
    width: 100%;
  }

  .aiap-theme-modern .aiap-task-name{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    line-height: 1.45;
  }

  .aiap-theme-modern .aiap-task-card-actions{
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid var(--bdr-l);
    padding-top: 10px;
  }

  .aiap-theme-modern .aiap-section-header.aiap-section-header-with-action{
    flex-direction: column;
    align-items: stretch;
  }

  .aiap-theme-modern .aiap-section-header-cta{
    width: 100%;
    justify-content: center;
  }
}
