/* ========================================================================

   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}

}

@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;

    }

    /* フィードカード body: スマホでは meta と actions を縦並びに、actions は右寄せ */

    .aiap-theme-modern .aiap-rss-feed-card-body {

        flex-direction: column;

        align-items: stretch;

    }

    .aiap-theme-modern .aiap-rss-feed-card-body .aiap-rss-feed-actions {

        margin-left: 0;

        justify-content: flex-end;

    }

}

/* スマホ (~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;

  }

}

