/* AIプロンプト虎の巻 固有スタイル（#app-promptbook スコープ） */

/* ジャンルチップの横スクロール行 */
#app-promptbook .pb-chip-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}

#app-promptbook .pb-chip-row .btn {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* カード */
#app-promptbook .pb-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
    #app-promptbook .pb-card:hover {
        transform: translateY(-2px);
    }
}

#app-promptbook .pb-title {
    word-break: break-word;
}

/* 本文プレビュー: 3行で省略、改行は保持 */
#app-promptbook .pb-body-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
    word-break: break-word;
    min-height: 3.9em;
}

/* お気に入りボタン */
#app-promptbook .pb-fav {
    color: var(--bs-secondary-color);
    line-height: 1;
}

#app-promptbook .pb-fav.active {
    color: #f5b301;
}

/* 穴埋めプレビュー */
#pb-fill-preview {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 35vh;
    overflow: auto;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* ブックマークレットリンク（ドラッグ用） */
#pb-bookmarklet-link {
    cursor: grab;
}

/* 取り込み手順の番号を表示する
   （common/style-components.css がモーダル内の ol[class] の番号を消すため上書き） */
#pb-modal-capture ol[class] {
    list-style-type: decimal;
}

#pb-modal-capture ol[class] li {
    margin-bottom: 0.35rem;
}

/* ショートカット用アドレスは省略せず選択しやすく */
#pb-ios-url {
    font-size: 0.75rem;
}

/* タッチ操作時・スマホ幅ではタップ領域を最低44pxに広げる（指での誤タップ防止） */
@media (pointer: coarse), (max-width: 767.98px) {

    #app-promptbook .pb-copy,
    #app-promptbook .pb-edit,
    #app-promptbook .pb-source {
        min-height: 44px;
    }

    #app-promptbook .pb-fav {
        min-width: 44px;
        min-height: 44px;
    }

    #pb-modal-edit .modal-footer .btn,
    #pb-modal-fill .modal-footer .btn,
    #pb-modal-capture .btn,
    #pb-modal-settings .btn {
        min-height: 44px;
    }

    #app-promptbook .pb-chip-row .btn {
        min-height: 40px;
    }
}