/**
 * uploader-search.css
 * アップローダー検索アコーディオンUIのスタイル定義
 * 検索窓の自動伸縮化、アコーディオン開閉連動幅、文字詰まり解消、ホバー枠水色化版
 */

/* ==========================================================================
   CSS変数 (ライトモード / デフォルト)
   ========================================================================== */
:root {
    --up-bg-app: #f8f8f8;
    --up-bg-card: #ffffff;
    --up-bg-input: #ffffff;
    --up-bg-item: #fcfdfe;
    /* ファイル項目の上品な淡い背景 */
    --up-text-main: #333333;
    --up-text-muted: #666666;

    --up-theme-blue: #4ca9df;
    /* 本物のTwitterブルー */
    --up-border-color: #d3d3d3;
    /* 本物の優しいグレーのフチ */
    --up-item-border: #eef2f6;
    /* ファイル項目の淡いフチ */

    --up-border-radius-card: 12px;
    --up-border-radius-button: 999px;
    /* 本物のカプセル丸型 */
    --up-border-radius-input: 999px;
    /* 本物のカプセル丸型 */

    --up-shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.05);
    --up-transition-smooth: all 0.2s ease;

    --up-link-color: #0000ff;
    /* 本物のライトモード青リンク */
    --up-link-hover: #ff3300;
    /* 本物のホバー赤リンク */
}

/* ==========================================================================
   ダークモード時の上書き設定 (html.dark-mode)
   ========================================================================== */
html.dark-mode {
    --up-bg-app: #121212;
    --up-bg-card: #1e1e1e;
    --up-bg-input: #262626;
    --up-bg-item: #252525;
    --up-text-main: #e2e8f0;
    --up-text-muted: #94a3b8;
    --up-theme-blue: #64b5f6;
    --up-border-color: #333333;
    --up-item-border: #2d2d2d;

    --up-link-color: #64b5f6;
    /* 暗所用の青リンク */
    --up-link-hover: #90caf9;
}

/* ==========================================================================
   全体レイアウト
   ========================================================================== */
#uploader-search-app {
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: 30px;
    box-sizing: border-box;
}

#uploader-search-app *,
#uploader-search-app *::before,
#uploader-search-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.uploader-search-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ==========================================================================
   検索＆ソートコントロール行 (伸縮対応・完全同期版)
   ========================================================================== */
.uploader-search-bar {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 13px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    position: relative !important;
}

/* 検索インプット (伸縮に対応するため flex-grow を追加、width は自動に) */
#uploader-search-input {
    flex: 1 !important;
    /* 余白を埋めるために自然に伸ばします */
    min-width: 240px !important;
    width: auto !important;
    padding: 8px 16px !important;
    border: 2px solid var(--up-border-color) !important;
    border-radius: var(--up-border-radius-input) !important;
    background-color: var(--up-bg-input) !important;
    color: var(--up-text-main) !important;
    font-size: 14px !important;
    font-weight: bold !important;
    box-shadow: none !important;
    outline: none !important;
    transition: var(--up-transition-smooth) !important;
}

#uploader-search-input:focus {
    border-color: var(--up-theme-blue) !important;
}

/* ソートボタン (#tweet-controls button スタイルと完全同期) */
.uploader-sort-btn {
    background: #ffffff !important;
    border: 2px solid var(--up-border-color) !important;
    border-radius: var(--up-border-radius-button) !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: var(--up-transition-smooth) !important;
    min-width: 100px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--up-text-main) !important;
    outline: none !important;
}

.uploader-sort-btn:hover {
    background: #f3f3f3 !important;
    border-color: var(--up-theme-blue) !important;
    color: var(--up-theme-blue) !important;
}

/* ダークモード時のホバー背景色調整 */
html.dark-mode .uploader-sort-btn {
    background: #1e1e1e !important;
}

html.dark-mode .uploader-sort-btn:hover {
    background: #2b2b2b !important;
}

/* アクティブ状態 (青背景) */
.uploader-sort-btn.active {
    background-color: var(--up-theme-blue) !important;
    border-color: var(--up-theme-blue) !important;
    color: white !important;
}

.uploader-sort-btn .arrow {
    font-size: 13px;
    font-weight: bold;
}

/* 件数表示 (変に丸いバッジを廃止し、すっきりとしたプレーンテキストに) */
.uploader-search-count-badge {
    font-size: 13px !important;
    font-weight: bold !important;
    color: var(--up-text-muted) !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    margin-left: 10px !important;
    /* 右側にぴたっと吸着させるためのマージン */
}

.uploader-search-count-badge.active {
    color: var(--up-theme-blue) !important;
}

/* ==========================================================================
   アコーディオン構造 (開閉に応じた動的な横幅切り替え)
   ========================================================================== */
.uploader-list-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    /* details が fit-content の時に左寄せにする */
    width: 100% !important;
    gap: 16px !important;
    /* アコーディオン同士の上下の間隔を確実に確保！ */
}

.uploader-accordion {
    background-color: var(--up-bg-card) !important;
    border-radius: var(--up-border-radius-card) !important;
    box-shadow: var(--up-shadow-soft) !important;
    border: 1px solid var(--up-border-color) !important;
    transition: var(--up-transition-smooth) !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 !important;
    /* gapで制御するためマージンはリセット */

    /* 初期状態（閉じている時）は文字幅に合わせたコンパクトな幅にする */
    width: fit-content !important;
    min-width: 130px !important;
    /* 横並びにしやすくするために130pxへコンパクト化 */
    max-width: 100% !important;
}

/* 開いた（[open]）時は画面いっぱいに広がる */
.uploader-accordion[open] {
    width: 100% !important;
    border-color: var(--up-border-color) !important;
}

.uploader-accordion.has-match {
    border-color: var(--up-theme-blue) !important;
}

/* マウスオーバー時に枠線を水色にする */
.uploader-accordion:hover {
    border-color: var(--up-theme-blue) !important;
}

/* ヘッダー (パディングと最小高さを強制して潰れと左詰まりを解消) */
.uploader-accordion-header {
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    /* 枠の内側にしっかり余白を作る */
    background-color: var(--up-bg-card) !important;
    cursor: pointer !important;
    user-select: none !important;
    list-style: none !important;
    font-weight: bold !important;
    transition: var(--up-transition-smooth) !important;
    min-height: 46px !important;
    /* 潰れ防止の最小高さ */
    height: auto !important;
}

.uploader-accordion-header::-webkit-details-marker {
    display: none;
}

/* ホバー時に背景をグレーにするのを廃止 (透明のまま) */
.uploader-accordion-header:hover {
    background-color: transparent !important;
}

.uploader-accordion-title {
    font-size: 16px !important;
    color: var(--up-text-main) !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

.uploader-accordion-count {
    font-size: 14px !important;
    font-weight: normal !important;
    color: var(--up-text-muted) !important;
    margin-left: 10px !important;
    white-space: nowrap !important;
}

/* 矢印アイコン */
.uploader-accordion-icon {
    margin-left: 20px !important;
    /* 閉じている時にアコーディオンの見出しとくっつかないようにする */
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid var(--up-text-muted) !important;
    border-right: 2px solid var(--up-text-muted) !important;
    transform: rotate(135deg) !important;
    transition: transform 0.2s ease-in-out !important;
}

.uploader-accordion[open] .uploader-accordion-icon {
    transform: rotate(-45deg) translateY(2px) translateX(-2px) !important;
}

/* ==========================================================================
   アコーディオン内のファイルリスト (上品な静的リスト表示)
   ========================================================================== */
.uploader-accordion-content {
    border-top: 1px dashed var(--up-border-color) !important;
    padding: 18px 20px !important;
    background-color: var(--up-bg-app) !important;
    width: 100% !important;
}

.uploader-file-list {
    list-style: none !important;
    padding: 0 !important;
    /* グローバルCSSの影響を完全に排除 */
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* ファイル項目 (完全にフラットかつ左余白をしっかり持たせた上品なカード) */
.uploader-file-item {
    background-color: var(--up-bg-item) !important;
    border: 1px solid var(--up-item-border) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    /* 文字が左端にくっつかないよう余白を確保 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01) !important;
    margin: 0 !important;
}

/* ファイル名の中のろだ元タグ [ろだA] スタイル */
.uploader-file-source {
    color: var(--up-text-muted) !important;
    font-weight: normal !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    margin-left: 8px !important;
    /* ZIP名のすぐ右隣に隙間を空けて並べる */
    display: inline-block !important;
}

/* ファイルヘッダー (ファイル名リンク ＋ [ろだ名] ＋ メタ情報) */
.uploader-file-header {
    display: flex !important;
    justify-content: flex-start !important;
    /* 左から順番に並べる */
    align-items: center !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* 青文字下線付きリンク */
.uploader-file-link {
    font-size: 15px !important;
    font-weight: bold !important;
    color: var(--up-link-color) !important;
    text-decoration: underline !important;
    word-break: break-all;
    transition: var(--up-transition-smooth) !important;
    flex-grow: 0 !important;
    /* ZIP名幅にフィットさせる */
}

.uploader-file-link:hover {
    color: var(--up-link-hover) !important;
}

/* 右上のメタ情報 (中黒 • 区切り。一番右端へ寄せる) */
.uploader-file-meta {
    font-size: 12px !important;
    color: var(--up-text-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    /* メタデータだけを右端にピタッと寄せる */
}

.uploader-meta-divider {
    color: var(--up-border-color) !important;
    margin: 0 6px !important;
    font-weight: normal !important;
}

/* ファイル本文 (改行されたコメント) */
.uploader-file-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-left: 2px !important;
}

/* コメント文 */
.uploader-file-comment {
    font-size: 14px !important;
    color: var(--up-text-main) !important;
    line-height: 1.6 !important;
    white-space: pre-wrap !important;
    word-break: break-all;
}

/* メッセージ表示 */
.uploader-no-results,
.uploader-error {
    text-align: center;
    padding: 30px;
    background-color: var(--up-bg-card);
    border-radius: var(--up-border-radius-card);
    border: 1px dashed var(--up-border-color);
    color: var(--up-text-muted);
    font-weight: bold;
    font-size: 14px;
}

/* ==========================================================================
   「さらに表示する」ボタンとコンテナのスタイル (余白の確保とスマート化)
   ========================================================================== */
.uploader-more-container {
    text-align: center !important;
    margin-top: 0px !important;
    /* カード末尾と点線の間を15pxに縮めてぴったり近づける */
    margin-bottom: 5px !important;
    /* アコーディオン底面までの余白 */
    padding-top: 0px !important;
    /* 点線とボタンの間の余白を30pxにして、ぴったりくっつくのを完全に防ぐ */
    border-top: 1px dashed var(--up-border-color) !important;
    /* アコーディオンの点線と全く同じ色に統一 */
    display: block !important;
    width: 100% !important;
}

.uploader-more-btn {
    display: inline-block !important;
    width: auto !important;
    min-width: 320px !important;
    /* ボタンの最小横幅 */
    padding: 10px 24px !important;
    /* ソートボタンと同じような太すぎずスマートな大きさに調整 */
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--up-border-radius-button) !important;
    /* 角丸もソートボタンに統一 */
    font-size: 14px !important;
    /* ソートボタンと同じ文字サイズ */
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 180, 216, 0.2) !important;
    transition: var(--up-transition-smooth) !important;
    outline: none !important;
    margin: 0 auto !important;
}

.uploader-more-btn:hover {
    background: linear-gradient(135deg, #00c4e8 0%, #0088c6 100%) !important;
    box-shadow: 0 6px 18px rgba(0, 180, 216, 0.35) !important;
    transform: translateY(-1px) !important;
}

.uploader-more-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(0, 180, 216, 0.15) !important;
}

/* ==========================================================================
   「ろだグループ」とグリッド横並びのスタイル
   ========================================================================== */
.uploader-group {
    width: 100% !important;
    margin-bottom: 0px !important;
}

.uploader-group-title {
    font-size: 20px !important;
    font-weight: bold !important;
    color: var(--up-text-main) !important;
    margin: 0 0 15px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--up-border-color) !important;
    width: 100% !important;
}

.uploader-group-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    /* アコーディオン同士の隙間 */
    width: 100% !important;
}

/* ==========================================================================
   アコーディオン風「ろだ選択ボタン」のアクティブ・矢印制御スタイル
   ========================================================================== */
.uploader-accordion.uploader-select-btn {
    cursor: pointer !important;
    user-select: none !important;
}

/* 選択されたろだボタンのアクティブ表示 (水色フチ) */
.uploader-accordion.uploader-select-btn.active {
    border-color: var(--up-theme-blue) !important;
    background-color: var(--up-bg-item) !important;
    box-shadow: 0 0 0 2px rgba(76, 169, 223, 0.15) !important;
}

/* 選択時にアコーディオンと同じように矢印がクルッと上を向くギミック */
.uploader-accordion.uploader-select-btn.active .uploader-accordion-icon {
    transform: rotate(-45deg) translateY(2px) translateX(-2px) !important;
}

/* 出現するファイルカードのコンテナ */
.uploader-active-files-container {
    width: 100% !important;
    background-color: var(--up-bg-card) !important;
    border-radius: var(--up-border-radius-card) !important;
    border: 1px solid var(--up-border-color) !important;
    padding: 22px 24px !important;
    margin-top: 15px !important;
    box-shadow: var(--up-shadow-soft) !important;
    animation: uploaderFadeIn 0.22s ease-out !important;
    /* ふわっと表示するアニメーション */
}

@keyframes uploaderFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.uploader-active-files-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px dashed var(--up-border-color) !important;
}

.uploader-active-files-title {
    font-size: 16px !important;
    font-weight: bold !important;
    color: var(--up-text-main) !important;
}

.uploader-active-files-count {
    font-size: 13px !important;
    color: var(--up-text-muted) !important;
}

/* ==========================================================================
   ⓘ インフォメーション・ツールチップのスタイル (右上の注釈風デザイン)
   ========================================================================== */
.uploader-tooltip {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    /* 背景は完全に透明 */
    color: var(--up-text-muted) !important;

    /* 💥 文字サイズは見やすいまま（13px）、位置だけを右上にシフト */
    font-size: 17px !important;
    /* 件数バッジとほぼ同じ見やすい大きさに戻します */
    top: -11px !important;
    /* 右上に引き上げる */
    margin-left: 2px !important;
    /* 件数テキストとの間隔を2pxに詰める */
    margin-right: 8px !important;
    /* 右側の要素との間の適切な余白 */

    cursor: help !important;
    transition: var(--up-transition-smooth) !important;
    line-height: 1 !important;
    border: none !important;
}

.uploader-tooltip:hover {
    color: var(--up-theme-blue) !important;
    /* ホバー時は水色に光る */
}

/* ホバー時に浮かび上がるバルーン (白ベースの上品な吹き出し) */
.uploader-tooltip::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    bottom: 130% !important;
    right: -10px !important;
    transform: translateY(10px) scale(0.95) !important;
    opacity: 0 !important;
    pointer-events: none !important;

    /* 💥 優しい白背景（ダークモード時は自動で暗所に調和）に変更 */
    background-color: var(--up-bg-card) !important;
    color: var(--up-text-main) !important;
    border: 1px solid var(--up-border-color) !important;
    box-shadow: var(--up-shadow-soft) !important;

    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 1.6 !important;
    white-space: pre-wrap !important;
    width: max-content !important;
    max-width: 290px !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    z-index: 9999 !important;
    text-align: left !important;
}

/* ホバー時のふわっと出現 */
.uploader-tooltip:hover::after {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* 吹き出しの小さな下矢印 (吹き出しの色と統一) */
.uploader-tooltip::before {
    content: "" !important;
    position: absolute !important;
    bottom: 115% !important;
    right: 4px !important;
    border-width: 6px 6px 0 6px !important;
    border-style: solid !important;
    border-color: var(--up-border-color) transparent transparent transparent !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}

.uploader-tooltip:hover::before {
    opacity: 1 !important;
}