/*
    根元の文字サイズ。画面のサイズ指定はほぼ rem のため、ここを動かすと全体が揃って変わる。
    倍率（--font-scale）は個人設定の文字サイズで差し替える。既定は1倍。
*/
html {
    font-size: calc(12px * var(--font-scale, 1));
}

@media (min-width: 768px) {
    html {
        font-size: calc(14px * var(--font-scale, 1));
    }
}

/*
    文字サイズ（個人設定・5段階）の倍率そのもの（--font-scale）は custom.css に置いてある。
    custom.css は利用者画面と管理者ポータルの両方が読むため、そこを1か所にしておくと
    どちらの画面でも同じ段階で効く。ここには実寸の計算だけを残す。
*/

::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background: var(--gray-800);
    border-radius: 0.6rem;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-600);
    border-radius: 0.6rem;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--gray-500);
    }

::-webkit-scrollbar-button {
    display: none;
}

html {
    position: relative;
    height: 100%;
}

/*
    画面全体（文書）には縦スクロールを出さない。
    スクロールさせるのは本文の枠だけにする。こうしないと、ヘッダーやサイドメニューが
    一緒に上へ流れていき、どこを見ているのか分からなくなる。

    高さを 100vh などで決め打ちして「ぴったり」を狙うと、ヘッダーの実寸との差が
    そのまま数ピクセルのスクロールになって残る。flex で配分して差が出ないようにする。
*/
body {
    height: 100%;
    overflow: hidden;
    font-family: "Noto Sans JP", sans-serif;
}

    body.menu-open {
        overflow: hidden;
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/*
    レイアウトの外枠。
    ヘッダーやサイドメニューを持つ画面は、この中で自分の高さを配分する。
    ログインや利用規約のように枠を持たない画面は、あふれた分だけここがスクロールする
    （そういう画面は隠す場所が無く、出さないと内容へ届かなくなる）。
*/
main {
    background-color: var(--bs-gray-100);
    height: 100%;
    overflow-y: auto;
}

.material-symbols-outlined {
    font-size: 1.3rem !important;
}

/*
    サイドメニュー付きの画面。左のメニューと上のヘッダーは動かさず、ここだけが動く。
    以前は height: calc(100vh - 4.25rem) だった。4.25rem はヘッダーの実寸とは別物で、
    差のぶんだけ画面全体にスクロールが出ていた。flex で余りを受け取る形に変えている。
*/
.share-layout {
    height: 100%;
    min-height: 0;
}

.share-layout-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

    .share-layout-body > .navbar {
        flex-shrink: 0;
    }

.render-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/*
    フルスクリーンの画面（エージェント作成・帳票フォーマット・ワークフロー）。
    以前は 93.5vh の決め打ちで、上のナビと合わせると画面を超えていた。
*/
.full-screen-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

    .full-screen-page > nav {
        flex-shrink: 0;
    }

.render-body-full-screen {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/*
    ViewBag.FixedHeight を立てた画面用。
    本文の枠でもスクロールさせず、中の各パネル（図・設定など）に任せる。
    枠ごと動いてよい画面（縦に長い設定画面など）は立てない。
*/
.full-screen-page.is-fixed .render-body-full-screen {
    overflow: hidden;
}


input, select, textarea {
    width: 100%;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    outline: none;
    background-color: var(--gray-50);
}

    input:focus, select:focus, textarea:focus {
        border-color: var(--gray-400);
    }


/* ボタン共通
   モック（com_agent_mockup.html の Btn / size="md"）に合わせている。
   padding 8px 14px ／ 角丸 8px ／ 文字 13px ／ 太さ600 ／ アイコンとの間隔 6px。
   ルートのフォントサイズが14pxのため 1rem = 14px 換算で指定する。
   ホバーは色を変えず不透明度を落とす（モックと同じ挙動）。 */
button.btn {
    padding: 0.571rem 1rem;
    border-radius: 0.571rem;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.929rem;
    line-height: 1.4;
    font-family: inherit;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.429rem;
    transition: opacity 0.15s ease;
}

    button.btn:hover:not(:disabled) {
        opacity: 0.85;
    }

/* 上の display: flex !important は .d-none（クラス1つ）より詳細度が高いため、
   .btn を持つボタンに d-none を付けても消えなかった。
   同じ詳細度で打ち消しておく。 */
button.btn.d-none {
    display: none !important;
}

    /* 全幅・等分で伸ばすボタンはモックの GradBtn に合わせる
       （padding 12px ／ 角丸 12px ／ 文字 14px ／ 太さ700）。
       ログイン・サインアップ・モーダルの主要ボタンが該当する。 */
    button.btn.w-100,
    button.btn.w-90,
    button.btn.w-80,
    button.btn.w-50 {
        padding: 0.857rem;
        border-radius: 0.857rem;
        font-size: 1rem;
        font-weight: 700;
    }

    button:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* モックのボタン内アイコンは15px */
    button .material-symbols-outlined {
        font-size: 1.071rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
    }

/* アイコンだけのボタン
   モックは押せる範囲を28px角・角丸8pxにしている。
   アイコンの大きさは用途で異なり、モーダルの閉じるやヘッダは20px、
   表の行内アクションは15px（後述の変種側で指定する）。 */
.btn-icon {
    width: 2rem !important;
    height: 2rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.571rem;
    background: none;
    padding: 0;
}

    .btn-icon .material-symbols-outlined {
        font-size: 1.45rem !important;
        font-weight: lighter;
    }

    /* 表の行内アクション（編集・削除など）はモックでは15px */
    .btn-icon.btn-icon-secondary .material-symbols-outlined,
    .btn-icon.btn-icon-danger .material-symbols-outlined,
    .btn-icon.btn-outline-primary .material-symbols-outlined,
    .btn-icon.btn-outline-danger .material-symbols-outlined {
        font-size: 1.071rem !important;
    }

    .btn-icon:focus,
    .btn-icon:active,
    .btn-icon:focus-visible,
    .btn-icon.active,
    .btn-icon:focus:active {
        outline: none !important;
        box-shadow: none !important;
    }

        .btn-icon:active .material-symbols-outlined {
            font-size: 1.25rem !important;
        }

    .btn-icon.btn-icon-secondary {
        color: var(--gray-500) !important;
    }

        .btn-icon.btn-icon-secondary:hover {
            color: var(--blue-300) !important;
        }

    /*
        削除の印は**はじめから赤**（2026-09-15 指摘「システム共通で赤色に」）。
        以前は灰色で、触れたときだけ赤くしていた。同じ画面の中に
        text-danger（最初から赤）で描いた削除もあり、赤い削除と灰色の削除が混在していた。
        押し間違いを避けたいなら色を消すのではなく、確認のモーダルで止める。
    */
    .btn-icon.btn-icon-danger {
        color: var(--danger) !important;
    }

        .btn-icon.btn-icon-danger:hover {
            color: var(--red-700) !important;
            background: var(--red-100);
        }

.btn-link {
    font-size: 0.9rem !important;
    font-weight: bold;
    text-decoration: none;
    color: var(--gray-800) !important;
    padding-right: 0;
    padding-left: 0;
}

    .btn-link span {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .btn-link .material-symbols-outlined {
        font-size: 1.5rem !important;
        margin-right: 0.5rem;
        font-weight: lighter;
    }

.btn-secondary {
    background: linear-gradient(135deg, var(--gray-600), var(--gray-800)) !important;
    font-weight: bold !important;
}



/*モーダル全般*/
/* モックの削除確認モーダルのボタン（padding 11px ／ 角丸 12px） */
.modal.delete-modal button {
    border-radius: 0.857rem !important;
    padding: 0.786rem 1rem !important;
}

/*
    確認だけのモーダル（削除の確認など）の幅。

    画面に付いている modal-md は Bootstrap 5 には無いクラスで、実際には
    既定の500pxで出ている。一行の問いかけと2つのボタンには広すぎるため、
    確認用は modal-confirm を付けてここで幅を決める。
    入力のあるモーダル（登録・招待・設定など）は500pxのままにする。

    幅を変えたいときはこの 25rem（400px）を直せば、確認モーダル全体に効く。
    狭い端末では画面から 0.5rem ずつ空けた幅までに収める（min の右側）。
*/
/*
    モーダルの幅は文字サイズに合わせて広がるようにする。

    Bootstrap の既定は px（既定500px・modal-lg 800px）なので、**文字サイズを大きくしても幅は変わらず**、
    中身だけが太って窮屈になる（ボタンの文字が2行になる・入力欄が縮む）。
    ここで同じ大きさを rem に置き換える（500px = 35.714rem・800px = 57.143rem）。
    標準（font-size-3）では今までと同じ幅で、小さく／大きくしたときだけ一緒に動く。

    画面に付いている modal-md は Bootstrap 5 には無いクラス。既定と同じ幅であることを
    はっきりさせるため、ここで既定と同じ値を持たせている（付けても付けなくても同じ幅）。
    **確認モーダル（modal-confirm）の幅指定より前に置くこと。** 後ろに置くと
    「modal-dialog modal-md」と書いてある確認モーダルが、こちらの幅で上書きされてしまう。
*/
.modal-dialog {
    max-width: min(35.714rem, calc(100% - 1rem));
}

/*
    モーダルは**画面の上下の真ん中**に出す（2026-09-29 利用者の指定「基本的に画面の中央」）。
    Bootstrap の既定は上寄せで、中央に出すには画面ごとに modal-dialog-centered を付ける必要があり、
    付いているのは一部だけだった。ここで全部に同じ指定（modal-dialog-centered の中身）を当てる。
    画面より高いモーダルは、これまでどおり外側（.modal）ごとスクロールする。
*/
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-dialog.modal-md {
    max-width: min(35.714rem, calc(100% - 1rem));
}

.modal-dialog.modal-lg {
    max-width: min(57.143rem, calc(100% - 1rem));
}

.modal-dialog.modal-xl {
    max-width: min(81.429rem, calc(100% - 1rem));
}

.modal-dialog.modal-sm {
    max-width: min(21.429rem, calc(100% - 1rem));
}

/*
    予定の登録・編集だけは横長にする（利用者の指摘・2026-09-17「横長2行でもOK」）。

    入力の数が多く（件名・切り替え・開始・終了・色・備考・繰り返し・複製）、
    既定の500pxに1列で積むと画面の高さに収まらない。
    680px（48.571rem）あれば、日付＋時刻の行が2つ横に並ぶ。
    2列の割り付けそのものは `.schedule-form`（下の「スケジュール」節）側。
*/
.modal-dialog.modal-schedule {
    max-width: min(48.571rem, calc(100% - 1rem));
}

/*
    確認モーダルの幅。modal-confirm は外側（.modal）に付ける書き方と、
    .modal-dialog に直接付ける書き方の両方が画面に混ざっているため、どちらでも効かせる。
    どの書き方でも同じ幅になっていないと、同じ「削除しますか」の問いかけが画面ごとに違う幅で出る。
*/
.modal-confirm .modal-dialog,
.modal-confirm .modal-dialog.modal-md,
.modal-dialog.modal-confirm {
    max-width: min(25rem, calc(100% - 1rem));
    margin-left: auto;
    margin-right: auto;
}


/*フォーム共通*/
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/*フォームグループ共通*/
.form-group label {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
    display: block;
    text-transform: uppercase;
}

/*
    .form-group の中に置いた「チェックの1行」（2026-09-16 指摘 No.59 の横展開）。

    この行は <label> なので、上の `.form-group label`（クラス1つ＋要素1つ）のほうが
    強く当たり、見出しの札の見た目（0.75rem・太字・灰色・大文字・下余白）になる。
    d-flex などの Bootstrap の指定は !important で効くので縦位置はそろうが、
    **文字だけが小さく太い灰色のまま**になる。クラスを重ねて打ち消す
    （.picker-item / .member-picker-row と同じやり方）。
*/
.form-group label.form-group-check {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: inherit;
    text-transform: none;
}

/*
    共通の input 指定（幅100%・padding 0.75rem 1rem）はチェックにも当たるため
    箱が膨らむ（[[aiagentsystem-css-input-trap]]）。余白を戻して行の中央にそろえる。
*/
.form-group-check input[type="checkbox"],
.form-group-check input[type="radio"] {
    padding: 0 !important;
    flex: none;
    align-self: center;
}

    /* .custome-checkbox を付けていない行は幅100%のまま伸びるので、素の大きさへ戻す */
    .form-group-check input[type="checkbox"]:not(.custome-checkbox),
    .form-group-check input[type="radio"]:not(.custome-checkbox) {
        width: 1rem;
        height: 1rem;
    }

/*アイコン共通*/
.icon-base {
    width: 2.75rem;
    aspect-ratio: 1/1;
    border-radius: 0.75rem;
    background: var(--gray-100);
    color: var(--gray-900);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .icon-base.danger-icon {
        background-color: color-mix(in srgb, var(--danger) 30%, transparent);
        color: var(--danger);
    }

/*検索スペース*/
.search-group {
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

    .search-group .search-icon {
        font-size: 1.2rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-300);
        pointer-events: none;
    }

    .search-group .search-input {
        width: 100%;
        border: 0.05rem solid var(--gray-300);
        border-radius: 0.75rem;
        padding: 0.75rem 0.75rem 0.75rem 3rem;
        font-size: 1rem;
        outline: none;
        box-sizing: border-box;
        background: white;
    }

.content {
    width: 100%;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 0.05rem 0.25rem var(--gray-300);
    border: 0.05rem solid var(--gray-200);
}

/*Spinner*/
/* 読み込み中の幕（.loading-overlay / .spinner）と回転（@keyframes spin）は
   管理者ポータルのレイアウトも同じものを置いているため、custom.css へ移した */

/*ステータスバッチ*/
/* ステータスバッジ（.badge-main）は利用者画面と管理者ポータルの両方で使うため、custom.css へ移した */

.divider {
    background: var(--gray-200);
    height: 0.0125rem;
    border-radius: 0;
    margin: 0.75rem 1rem;
}

/*共通メニュー*/
/* 共通サイドバー（モック Sidebar 準拠：幅240px・ルート14px換算） */
.share-menu {
    min-width: 17.143rem;
    max-width: 17.143rem;
    /*
        ここは画面の高さそのままでよいので vh で持つ。
        100% にすると親（share-layout）に高さが無いときに auto へ落ち、
        メニューが中身の高さまで縮んで下に地色の余白が出る。
        サイドメニューの高さは常に画面いっぱいと決まっているため、親に依存させない。
    */
    height: 100vh;
    display: flex;
    flex-direction: column !important;
    background-color: var(--gray-800);
    overflow: hidden;
}

/* ヘッダ（高さ56px・下線あり） */
.share-menu-header {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    height: 4rem;
    padding: 0 1.143rem;
    border-bottom: 0.05rem solid var(--gray-700);
    flex-shrink: 0;
}

.share-menu-logo {
    width: 2.286rem;
    height: 2.286rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.571rem;
    border: 0.05rem dashed var(--gray-500);
    background: var(--gray-700);
}

.share-menu-logo-text {
    font-size: 1.143rem;
    font-weight: 900;
    color: var(--gray-400);
    line-height: 1;
}

.share-menu-brand {
    min-width: 0;
    flex: 1 1 0%;
}

.share-menu-title {
    margin: 0;
    color: #fff;
    font-weight: 700;
    font-size: 0.929rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-menu-subtitle {
    margin: 0;
    color: var(--gray-400);
    font-size: 0.786rem;
}

/* ナビ（項目間2px・内側8px） */
.share-menu-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.143rem;
    margin: 0;
    padding: 0.571rem;
    overflow-y: auto;
}

.share-menu-item {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    padding: 0.714rem 0.857rem;
    border-radius: 0.571rem;
}

    .share-menu-item .material-symbols-outlined {
        flex-shrink: 0;
        font-size: 1.286rem;
    }

.share-menu-label {
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    左メニューのβ版の札。

    メニュー名のうしろに置く。名前が長い項目でも札が潰れないよう、
    縮ませない（flex-shrink: 0）。色は選択中かどうかに関わらず同じ
    ——選択中だけ読めなくなる配色を作らないため、枠線と文字で描く。
*/
.share-menu-beta {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0 0.25rem;
    border: 0.05rem solid currentColor;
    border-radius: 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.4;
    opacity: 0.9;
}

.system-icon {
    width: 2.5rem;
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
    background: rgb(55, 65, 81);
    color: var(--gray-400);
    text-align: center;
    align-content: center;
}

.share-menu ul li {
    list-style: none;
}

    .share-menu ul li div {
        color: var(--gray-400);
        cursor: pointer;
        transition: 0.15s;
    }

    .share-menu ul li.select div,
    .share-menu ul li:not(.select) div:hover {
        background: linear-gradient(135deg, var(--gray-600), var(--gray-700));
        color: white;
    }

        .share-menu ul li div span {
            font-size: 0.929rem;
            font-weight: 500;
        }

/* 区切り線。暗い背景に合わせる（従来は明るいグレーで浮いていた） */
.share-menu .divider {
    background: none;
    height: 0;
    border-top: 0.05rem solid var(--gray-700);
    margin: 0.429rem 0.286rem;
}

/* サイドバーのアバターはモックに合わせて32px */
.user-button .user-icon {
    width: 2.286rem !important;
    font-size: 0.929rem;
}

.user-icon {
    width: 2.5rem !important;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--gray-600), var(--gray-700));
    color: white;
    /*
        **50% で持つ。** 半径を寸法べた書き（1.25rem など）にすると、
        大きさを変えた場所で角丸の四角に見えてしまう。
    */
    border-radius: 50%;
    font-weight: bold;
    /* 中の文字を縦横まん中へ。1行の高さに引きずられないようにする */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 並びの中で縮められると楕円になる */
    flex: none;
    overflow: hidden;
    line-height: 1;
}

    .user-icon.large {
        width: 4.8rem !important;
        font-size: 1.9rem;
    }

.mail {
    font-size: 1rem;
}

.user-menu-space {
    position: fixed;
    inset: 0;
    z-index: 10;
}

/* ユーザー欄（モックは内側12px・上線あり） */
.user-space {
    border-top: 0.05rem solid var(--gray-700);
    position: relative;
    padding: 0.857rem;
    margin-top: auto;
    flex-shrink: 0;
}

.user-button {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    padding: 0.571rem;
    border-radius: 0.857rem;
    cursor: pointer;
    transition: background 0.15s;
}

    .user-button:hover {
        background: var(--gray-700);
    }

.user-button-text {
    min-width: 0;
    flex: 1 1 0%;
    text-align: left;
}

.user-button-name {
    margin: 0;
    color: #fff;
    font-size: 0.929rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-button-sub {
    margin: 0;
    color: var(--gray-400);
    font-size: 0.786rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-symbols-outlined.user-button-arrow {
    flex-shrink: 0;
    color: var(--gray-400);
    font-size: 1.071rem;
}

.user-menu {
    position: absolute;
    bottom: 100%;
    left: 0.571rem;
    right: 0.571rem;
    margin-bottom: 0.286rem;
    border-radius: 0.857rem;
    border: 0.05rem solid var(--gray-200);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 20;
    overflow: hidden;
    background: #fff;
}

.user-menu-list {
    margin: 0;
    padding: 0;
    background: #fff;
}

.user-menu-header {
    padding: 0.857rem 1.143rem;
    background: var(--gray-50);
    border-bottom: 0.05rem solid var(--gray-200);
}

/* メニューヘッダの氏名（太字）とメール（青字の補助行）。モック準拠 */
.user-name {
    margin: 0;
    font-size: 0.929rem;
    font-weight: 700;
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-email {
    margin: 0.143rem 0 0;
    font-size: 0.786rem;
    color: var(--sky-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.714rem;
    padding: 0.714rem 1.143rem;
    color: var(--gray-700);
    cursor: pointer;
    text-align: left;
    font-size: 0.929rem !important;
}

    .menu-item .material-symbols-outlined {
        flex-shrink: 0;
        font-size: 1.071rem !important;
        color: var(--gray-400);
    }

    .menu-item .menu-text {
        flex: 1 1 0%;
    }

    .menu-item:hover {
        background: var(--gray-50);
    }

/* ログアウトはモックでは赤字 */
.menu-item--danger {
    color: var(--danger);
}

    .menu-item--danger .material-symbols-outlined {
        color: var(--danger);
    }

.menu-divider {
    border-top: 0.05rem solid var(--gray-100);
}

/*組織切り替えモーダル*/
.content.organization-content {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    margin: 0.5rem 0rem;
    cursor: pointer;
}

    .content.organization-content.select {
        border: 0.2rem solid var(--gray-500) !important;
    }

    .content.organization-content.register-content {
        border: 0.2rem dotted var(--gray-300) !important;
        cursor: pointer;
        box-shadow: none;
    }

        .content.organization-content.register-content:hover {
            border: 0.2rem dotted var(--gray-400) !important;
            background: var(--gray-50) !important;
            box-shadow: none;
        }

    .content.organization-content:not(.register-content):not(.select):hover {
        border: 0.05rem solid var(--gray-400) !important;
        background: var(--gray-50) !important;
        box-shadow: none;
    }

/*ヘッダーレス共通*/
/*
    ログイン・本人確認・アカウント登録などヘッダーを持たない画面。
    スクロールするのは親の main（body は overflow:hidden）。

    高さは min-height: 100% にする。100vh だと main の高さとずれ、
    ウィンドウを縮めたときに常に数十pxのあふれが出る。

    中央寄せは align-items ではなく子の margin:auto で行う。
    align-items:center は、内容がウィンドウより高いときに上へもあふれて
    スクロールでは戻れない位置（負のスクロール量）へ行ってしまうため。
*/
.headerless-page {
    min-height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.25rem;
    background: linear-gradient( 160deg, var(--gray-600) 0%, var(--gray-500) 50%, var(--gray-600) 100% );
}

    .headerless-page > * {
        margin-top: auto;
        margin-bottom: auto;
    }

/*
    ヘッダーレス画面のスクロールバー。
    既定のつまみは --gray-600 で、この画面の背景グラデーションと同じ色のため
    「スクロールできること」が見えず、画面の下に隠れたボタンへ届かなかった。
    背景が暗いので、明るい色で出す。
*/
main:has(> .headerless-page)::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
}

main:has(> .headerless-page)::-webkit-scrollbar-thumb {
    background: var(--gray-200);
}

    main:has(> .headerless-page)::-webkit-scrollbar-thumb:hover {
        background: var(--gray-50);
    }

.headerless-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.headerless-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    aspect-ratio: 1/1;
    border-radius: 1rem;
    border: 0.05rem dashed var(--gray-400);
    background: var(--gray-600);
    margin-bottom: 1rem;
}

.headerless-brand-icon-text {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--gray-300);
}

/*
    ロゴを入れた枠。

    SVG自体が角丸のタイルを持っているので、仮置きだった破線の枠と灰色の背景は出さない。
    「!」や状態コードを出す画面（アクセス拒否・エラー）は今までどおり枠付きのままにする。
*/
.share-menu-logo--brand,
.headerless-brand-icon--logo {
    border: none;
    background: none;
}

.share-menu-logo-image,
.headerless-brand-icon-image {
    display: block;
    width: 100%;
    height: 100%;
}

.headerless-brand-title {
    margin: 0;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.headerless-brand-subtitle {
    margin: 0.29rem 0 0;
    font-size: 0.93rem;
    color: var(--gray-300);
}

.headerless-help {
    text-align: right;
    margin-top: -0.25rem;
}

.headerless-link {
    font-size: 0.9rem;
    color: var(--sky-500);
    border: none;
    background: none;
    cursor: pointer;
}

/* Debugビルドのときだけ出す管理者ポータルへの導線。
   検証用だと分かるよう本来の動線と見た目を分けている */
.signin-debug {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 0.05rem dashed var(--gray-300);
}

.signin-debug__label {
    padding: 0.1rem 0.5rem;
    border: 0.05rem solid var(--amber-400);
    border-radius: var(--system-radius-pill, 999px);
    background: #fffbeb;
    color: var(--amber-800);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.signin-debug .headerless-link {
    text-decoration: none;
}

.headerless-submit {
    width: 100%;
    padding: 1rem;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    background: linear-gradient( 135deg, var(--gray-600), var(--gray-800) );
    color: white;
    font-weight: bold;
    font-size: 1rem;
    transition: opacity 0.15s;
}

    .headerless-submit:hover {
        opacity: 0.9;
    }

.headerless-text {
    font-size: 0.8rem;
    color: var(--gray-400);
    text-align: center;
    margin: 0;
}

.headerless-notices {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.headerless-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: var(--gray-200);
}

.headerless-notice-icon {
    font-size: 0.9rem;
    margin-top: 0.1rem;
}

.headerless-notice--warning .headerless-notice-icon {
    color: var(--amber-400);
}

.headerless-notice--info .headerless-notice-icon {
    color: var(--blue-300);
}

/* お知らせのアイコン種別（check_circle）の分。
   一覧で使う icon-check は明るい背景向けの色なので、この画面では使わない */
.headerless-notice--check .headerless-notice-icon {
    color: var(--green-300);
}



/*サインイン画面*/
.signin-container {
    width: 100%;
    max-width: 25rem;
}


/*アカウント登録画面*/
.signup-container {
    width: 100%;
    max-width: 30rem;
}

.steps {
    display: flex;
    gap: 0.25rem;
}

.step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.bar {
    width: 100%;
    height: 0.25rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.3s;
}

.step span {
    font-size: 0.9rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.4);
}


.step.active .bar {
    background: #fff;
}

.step.active span {
    color: #fff;
}

/*組織追加画面*/
.form-text {
    display: flex;
    border-bottom: 0.05rem solid var(--gray-300);
    margin: 0.5rem 0;
    padding: 0.75rem 0.25rem;
    font-weight: bold;
}

    .form-text label {
        color: var(--gray-400);
    }

    .form-text span {
        margin-left: auto !important;
    }

.plan-content {
    width: 100%;
    background: white;
    border-radius: 1rem;
    padding: 1.25rem 1rem;
    margin: 1rem 0;
    border: 0.1rem solid var(--gray-200);
    position: relative;
    cursor: pointer;
}

    .plan-content.select {
        border: 0.1rem solid var(--gray-900);
    }

    .plan-content:hover {
        background-color: var(--gray-100);
    }

.plan-content-pop {
    position: absolute;
    background-color: var(--gray-900);
    color: white;
    padding: .125rem .75rem;
    border-radius: 1rem;
    margin: 0;
    top: -0.65rem;
    right: 1.5rem;
    font-size: 0.8rem;
    font-weight: bold;
}

.plan-content p {
    font-size: 0.9rem !important;
    color: var(--gray-600);
}

.plan-content small {
    font-size: 0.8rem !important;
    color: var(--gray-400);
}
/*ダッシュボード画面*/
.section {
    border-radius: 0.25rem;
    width: 100%;
    min-width: 15rem;
    background-color: white;
}

.section-icon {
    border-radius: 0.25rem;
    width: 2rem;
    aspect-ratio: 1 / 1;
    text-align: center;
    color: white;
}

.section .section-icon span {
    font-size: 0.95rem;
}

/*チャット画面*/
.chat-content {
    padding: 0 !important;
    /* 音声会話モードを重ねる基準にする */
    position: relative;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 1000;
}

    .overlay.active {
        display: block;
    }

.side-menu {
    position: fixed;
    top: 0;
    left: -20rem;
    /*
        チャット一覧のメニューは、既定のメニュー（.share-menu）と同じ幅にする。
        別々の値だと、開いたときに左端の線がずれて別の画面のように見える。
    */
    width: 17.143rem;
    height: 100vh;
    background: white;
    z-index: 1001;
    transition: right 0.3s ease;
}

    .side-menu.active {
        left: 0;
    }

/*
    チャット一覧のメニューを開いたままにする（固定）

    固定していないときは、これまでどおり上に重ねて出す（背面を暗くする）。
    固定したときは**重ねずに横へ寄せる**——ずっと出しておくものを
    背面を暗くしたまま置くと、本文が読めず操作もできない。
*/
@media (min-width: 901px) {
    .side-menu.is-pinned {
        left: 0;
        /* 重ねないので影は要らない。境目は線で示す */
        border-right: 0.0625rem solid var(--gray-200);
    }

    /* 固定中は覆いを出さない（出すと本文が押せなくなる） */
    .side-menu.is-pinned ~ .overlay {
        display: none;
    }
}

/*
    固定しているあいだ、本文を寄せる必要は無い。

    固定したメニュー（.side-menu）は position:fixed の left:0 で、
    共通メニュー（.share-menu）とまったく同じ幅（17.143rem）のため、
    **共通メニューの上に重なる**。本文の枠（.render-body）は
    もともと共通メニューの右から始まっているので、そこからさらに
    17.143rem 空けると、メニューと本文のあいだに同じ幅の空きができる。
    実測でも 240px ちょうどの空きになっていた。
*/
.chat-page.chat-menu-pinned {
    padding-left: 1rem !important;
}

/*
    固定中は「閉じる」と「メニューを開く」を出さない。

    閉じられると本文だけ寄ったまま空きができ、開くほうは既に開いているので
    押しても何も起きない。外すのは固定ボタンでできる。
    狭い画面では固定しないので、そのときは元どおり出す。
*/
@media (min-width: 901px) {
    .side-menu.is-pinned .sidebar-header button[cmd="close"],
    .chat-page.chat-menu-pinned button[cmd="menu"] {
        /* custom.css の button.btn { display: flex !important } を外すため */
        display: none !important;
    }
}

.chat-menu-pin {
    /* 押していないときは控えめに。押すと色が付く */
    color: var(--gray-500);
    transform: rotate(45deg);
}

    .chat-menu-pin.is-on {
        color: var(--primary);
        /* 留めた向きに戻す。回転の有無で「留まっている」ことが一目で分かる */
        transform: none;
    }

/*
    狭い画面では固定しない。
    17rem を占めると本文が読めなくなるため、重ねる動きに戻す。
*/
@media (max-width: 900px) {
    .side-menu.is-pinned {
        border-right: none;
    }
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0.75rem 0.75rem;
    border-bottom: 0.125rem solid #ececec;
    flex-shrink: 0;
}

.sidebar-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: .01em;
    margin: 0;
}

.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0rem 0.25rem;
    max-height: 40vh;
}

    .sidebar-body::-webkit-scrollbar {
        width: 0.25rem;
    }

    .sidebar-body::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 0.25rem;
    }

.section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #b0b0b0;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 1rem 1.25rem 0.5rem;
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    margin: 0.125rem 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background .12s;
    min-width: 0;
}

    .chat-item:hover {
        background: #f5f5f5;
    }

    .chat-item.active {
        background: #efefef;
    }

        .chat-item.active .chat-name {
            font-weight: 600;
        }

/* チャットヘッダのメニュー（more_vert）の中身
   従来はスタイル指定が無く、さらにアイコンとラベルの両方に mr-auto が付いていたため
   横並びにならず配置が崩れていた */
.chat-header .dropdown-menu {
    min-width: 12rem;
    padding: 0.25rem 0;
}

.chat-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 1rem;
    border: none;
    background: none;
    text-align: left;
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--gray-700);
    cursor: pointer;
}

    .chat-menu-item:hover {
        background: var(--gray-50);
    }

    .chat-menu-item .material-symbols-outlined {
        flex-shrink: 0;
        color: var(--gray-400);
    }

.chat-menu-item--danger {
    color: var(--danger);
}

    .chat-menu-item--danger .material-symbols-outlined {
        color: var(--danger);
    }

/* サイドバーのチャット検索（モック準拠） */
.sidebar-search {
    position: relative;
    padding: 0 0.75rem;
    margin-bottom: 0.25rem;
}

.sidebar-search-input {
    width: 100%;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.714rem;
    padding: 0.5rem 1.75rem 0.5rem 2rem;
    font-size: 0.929rem;
    background: #fff;
}

.sidebar-search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}

.sidebar-search-clear {
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--gray-400);
    display: inline-flex;
    padding: 0;
    cursor: pointer;
}

.sidebar-empty {
    margin: 0.5rem 1.25rem;
    font-size: 0.857rem;
    color: var(--gray-400);
}

/* チャット1件（行内に操作ボタンを置く） */
.chat-item--room {
    gap: 0.25rem;
}

.chat-item-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
}

/*
    行内の操作（ピン留め・削除）。

    **場所は常に空けておく。** display:none で出し入れすると、
    出た瞬間に行が高くなり・チャット名が縮んで、一覧全体が下へずれていた。
    見えるかどうかだけを切り替える。
*/
.chat-item-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    visibility: hidden;
}

.chat-item--room:hover .chat-item-actions,
.chat-item--room:focus-within .chat-item-actions {
    visibility: visible;
}

/*
    3点メニューを開いている間は出したままにする。

    開いたあとマウスが行から外れると（:hover が外れる）、面だけが残って
    ボタンが消えていた。Bootstrap は面に .show を付けるので、それで見る。
*/
.chat-item-actions:has(.dropdown-menu.show) {
    visibility: visible;
}

/*
    見出し（チャット一覧）の右に置く操作

    見出しは素の div なので、3点を右端へ寄せるためにこの段だけ flex にする。
    **文字の大きさ・色は .section-label のまま。** 見出しは並びの区切りで、
    操作が付いたぶん目立たせる理由が無い。
    下の余白は 0 にする。3点のぶん段が高くなるので、0.5rem のままだと
    見出しだけの段（36.75px）より 7px 高くなって並びがそろわない（実測で 36.65px）。
*/
.section-label--with-action {
    display: flex;
    align-items: center;
    padding-bottom: 0;
}

    /* 見出しの文字（0.75rem）の段に収まる大きさ。これより大きいと段が押し広がる */
    .section-label--with-action .btn-icon {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }

/* チャット名（0.857rem）の行に収まる大きさ。これより大きいと行が押し広げられる */
.btn-icon.chat-item-action {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* 行内の操作アイコン。チャット名（0.85rem）より大きいと目立ちすぎる */
.btn-icon.chat-item-action .material-symbols-outlined {
    font-size: 0.875rem;
}

/* ピン留めの印 */
.chat-pinned-mark {
    color: var(--gray-400);
    flex-shrink: 0;
}

.chat-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 0.9rem
}

.chat-name {
    flex: 1;
    font-size: 0.85rem;
    color: #2a2a2a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: auto;
    margin-bottom: auto;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    padding: 0.75rem 1.25rem;
    border-bottom: 0.083rem solid var(--gray-200);
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient( 135deg, var(--gray-500), var(--gray-800) );
    color: white;
    width: 2.5rem;
    height: 2.5rem;
}

.chat-title-wrap {
    min-width: 0;
    flex: 1 1 0%;
}

    .chat-title-wrap .chat-title {
        margin: 0;
        overflow: hidden;
        font-size: 1rem;
        font-weight: bold;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-title-wrap .chat-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.chat-model {
    margin: 0;
    font-size: 0.9rem;
    color: var(--gray-800);
}

.chat-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    background: var(--gray-300);
    color: var(--gray-800);
    font-size: 0.75rem;
    font-weight: bold;
}

.icon--xs {
    font-size: 1.125rem;
}

.icon--sm {
    font-size: 1.25rem;
}

.icon--md {
    font-size: 1.5rem;
}

.icon--lg {
    font-size: 1.675rem;
}

/*
    チャットの画面。枠を画面の高さいっぱいに広げる。

    本文の枠（.render-body）は flex で余りを受け取っているため、そこから
    高さをもらい、ヘッダーと入力欄を除いた残りをメッセージ一覧へ渡す。
    以前はメッセージ一覧が 26rem の決め打ちで、画面の下に余白が残り、
    履歴も一度に少ししか見えなかった。
*/
.chat-page {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    .chat-page > .content.chat-content {
        display: flex;
        flex-direction: column;
        flex: 1 1 0%;
        min-height: 0;
    }

.chat-body {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow-y: auto;
    padding: 1.25rem;
    /*
        高さの決め打ち。親から高さが降りてこない場所（エージェントのプレビューなど）
        でも潰れないようにするための下限で、チャットの画面では下の指定で外している
    */
    height: 26rem;
}

    /* チャットの画面では列の余りを受け取らせる（決め打ちを外す） */
    .chat-page .chat-body {
        height: auto;
        min-height: 0;
    }

/*
    吹き出しの行。**顔（アイコン）は吹き出しの上端にそろえる**（2026-09-16 の指摘）。
    下端そろえだと、長い回答ほど顔が下へ離れて、誰の発言か読み始めの位置で分からない。
    吹き出しの下に付く操作ボタン（.message-actions）は中に入っているので位置は変わらない。
*/
.message-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.message-row--left {
    justify-content: flex-start;
}

.message-row--right {
    justify-content: flex-end;
}

.message {
    max-width: 75%;
    min-width: 5rem;
    overflow: hidden;
}

/*
    吹き出しの文字の大きさ。

    **既定は本文より1段小さく**（利用者の指摘・2026-09-17
    「チャットのデフォルトの文字が少し大きく感じる。大きくはできるので」）。
    1rem（14px）は画面本文と同じ大きさで、会話が続くと画面が文字で埋まる。
    0.929rem（13px）はボタンの文字（button.btn）と同じ段。
    大きくしたい人は［個人設定］の文字サイズで上げられる（--font-scale が rem ごと動かす）。
*/
.message-row--left .message-bubble {
    border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
    background: var(--gray-200);
    font-size: 0.929rem;
}

.message-row--right .message-bubble {
    border-radius: 1.25rem 1.25rem 0.25rem 1.25rem;
    background: var(--primary);
    color: white;
    font-size: 0.929rem;
}

.message-content {
    padding: 0.75rem 1rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

/*
    回答を作れなかったときの断り書き。

    通知（Site.Alert）は閉じると消えてしまい、あとから
    「なぜこの発言に答えが無いのか」が分からなくなるため、会話の中に残す。
    吹き出しの中に置くので、本文があるときはその下に続けて出る。
*/
.message-failed {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--red-100);
    color: var(--red-700);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* 本文があるときはその下に続ける（本文側の下余白と重ねない） */
.message-content:not(:empty) + .message-failed {
    margin-top: 0;
}

/*
   利用者が中止したときの断り書き（2026-09-10）

   **失敗（.message-failed）と色を分ける。** 赤で出すと、
   自分で止めたのに何か壊れたように見える。灰色で「止めた」だけを伝える。
*/
.message-stopped {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.85rem;
    line-height: 1.4;
}

.message-content:not(:empty) + .message-stopped {
    margin-top: 0;
}

/*
    本文が1文字も無いまま失敗したときは、空の本文（余白だけ）を畳む。
    畳まないと、余白ぶん断り書きが吹き出しの下に寄って見える。

    吹き出しは flow-root にして、断り書きの上下の余白が吹き出しの外へ抜けない
    （余白の相殺）ようにする。抜けると余白が背景の外に出て、上下に詰まって見える。
*/
.message-bubble {
    display: flow-root;
}

.message-bubble > .message-content:empty {
    display: none;
}

/* 回答を待っている間の表示。画面全体を覆う代わりに吹き出しの中で待たせる */
.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.5em;
}

.typing-dots > span {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--gray-600);
    opacity: 0.35;
    animation: typing-dots 1.2s infinite ease-in-out;
}

.typing-dots > span:nth-child(2) {
    animation-delay: 0.15s;
}

.typing-dots > span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes typing-dots {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.35;
    }

    30% {
        transform: translateY(-0.1875rem);
        opacity: 0.9;
    }
}

/* 動きを抑える設定の環境では点を動かさない */
@media (prefers-reduced-motion: reduce) {
    .typing-dots > span {
        animation: none;
    }
}

/* 回答が届くまでは評価やコピーを出さない（中身がまだ無いため）。
   場所ごと空けるのは、残しておくとアイコンが吹き出しから下へずれて見えるため */
.message-row--thinking .message-actions {
    display: none;
}

.message-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin-top: 0.25rem;
    padding-left: 0.125rem;
}

/* 所要時間と消費クレジット。吹き出しの外（右隣）に置く。
   行そのものは上端そろえに変えた（顔を上に出すため）が、**この2つは下端のまま**。
   読み終わりの位置に出したいので align-self で下へ戻している。
   本文の幅を押し出さないよう縮まないようにし、狭い画面では折り返す */
.message-metrics {
    display: flex;
    flex-shrink: 0;
    align-self: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    color: var(--gray-400);
    font-size: 0.75rem;
    white-space: nowrap;
}

.message-metric {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

/* 入力欄。JSが高さを付けるため、ここでは初期の高さと折り返しだけを決める。
   共通の input,select,textarea 指定より後に置いて上書きする */
/*
    **上下の余白を詰める**（利用者の指摘・2026-09-17「初期高さが少し大きい？」）。

    共通の入力欄は padding 0.75rem なので、1行のときでも
    0.9rem × 1.5 ＋ 1.5rem ＝ 2.95rem（約41px）あり、
    隣のボタン（2rem＝28px）より13pxも高かった。0.5rem へ詰めて 2.45rem。
    高さは site.js の autoGrowTextarea が computed style から測り直すので、
    ここを変えるだけで伸びる側の計算もそろう。
*/
.composer-textarea {
    max-height: none;
    overflow-y: hidden;
    resize: none;
    line-height: 1.5;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.message-action {
    display: flex;
    padding: 0.333rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--gray-300);
    cursor: pointer;
}

    .message-action:hover {
        color: var(--gray-500);
    }

    /* 評価済み・コピー完了の状態 */
    .message-action.is-active {
        color: var(--gray-800);
    }

    /* 読み上げ中 */
    .message-action.is-speaking {
        color: var(--blue-500, #3b82f6);
    }

/* 送信ボタン（モックはグラデーションの丸ボタン） */
.btn-icon.chat-send {
    background: linear-gradient(135deg, var(--gray-600), var(--gray-800));
    color: #fff;
    border-radius: 0.857rem;
}

    .btn-icon.chat-send:disabled {
        opacity: 0.4;
    }

    .btn-icon.chat-send .material-symbols-outlined {
        color: #fff;
    }

.chat-composer {
    flex-shrink: 0;
    padding: 1rem;
    border-top: 0.1rem solid var(--gray-200);
}

/*
    エージェントが削除されているトークの入力欄の代わり。
    入力欄と同じ場所・同じ区切り線で出し、なぜ送れないかをその場で伝える
*/
.chat-composer.chat-composer-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    font-size: 0.857rem;
    background: var(--gray-50);
}

    .chat-composer.chat-composer-notice .material-symbols-outlined {
        flex: none;
        color: var(--gray-500);
    }

.chat-composer-inner {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

    .chat-composer-inner button {
        flex-shrink: 0;
        border: 0.125rem solid var(--gray-200);
    }

    /*
        **ボタンを入力欄の高さに近づける**（利用者の指摘・2026-09-17）。
        「入力欄が大きい」の半分はボタン側の問題で、2rem（28px）のボタンが
        下端にそろっているぶん、上に空きが残って入力欄が高く見えていた。
        1行の入力欄は 2.45rem なので、2.25rem まで上げる。
        .btn-icon の大きさは !important なので、こちらも !important で上書きする。
    */
    .chat-composer-inner button.btn-icon {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

        .chat-composer-inner button:disabled {
            opacity: 0.4;
        }

.send-button:disabled {
    opacity: 0.4;
}

.response-button {
    display: block !important;
}

    .response-button.select {
        color: var(--indigo-500) !important;
        border-color: var(--indigo-500) !important;
        background-color: var(--indigo-100) !important;
    }

    .response-button .small {
        font-size: 0.8rem !important;
        font-weight:normal;
    }

.memory-button {
    padding: 0.75rem 1rem;
    align-items: initial;
    text-align: left;
    box-shadow: none!important;
}

    .memory-button.select {
        border-color: var(--gray-500)!important;
        background-color: var(--gray-100) !important;
    }
    /*要約一覧画面*/
    .content.recording-space {
        border: 0.25rem dashed var(--gray-200) !important;
        box-shadow: none;
    }

.recording-icon {
    width: 5rem;
    aspect-ratio: 1 / 1;
    border-color: var(--gray-300) !important;
    background-color: color-mix(in srgb, var(--gray-600) 30%, transparent);
    color: white !important;
    border-radius: 2.5rem;
    margin: auto !important;
    box-shadow: none;
}

    .recording-icon.waiting {
        border-color: var(--primary) !important;
        background-color: color-mix(in srgb, var(--primary) 30%, transparent);
        color: var(--primary) !important;
    }

    .recording-icon .material-symbols-outlined {
        font-size: 2.2rem !important;
    }

    .recording-icon.recording {
        background-color: color-mix(in srgb, var(--red-500) 30%, transparent);
        border-color: var(--danger) !important;
        color: var(--danger) !important;
        animation: pulseShadow 1.8s infinite ease-in-out;
    }

@keyframes pulseShadow {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--red-500) 40%, transparent);
    }

    70% {
        box-shadow: 0 0 0 12px color-mix(in srgb, var(--red-500) 0%, transparent);
    }

    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--red-500) 0%, transparent);
    }
}

.summary-frame {
    margin-top: 1.5rem;
    padding: 0;
    background: #ffffff;
}

.summary-card {
    border: 0.05rem solid #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
    padding: 1rem;
    position: relative;
    box-shadow: 0 0.1rem 0.2rem #0000000A, 0 0.3rem 1rem #00000014;
    cursor: pointer;
}

.summary-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.summary-title-block {
    width: 100%;
}

.summary-title {
    display: flex;
    font-weight: bold;
    width: 100%;
}

    .summary-title .material-symbols-outlined {
        margin-left: auto !important;
        color: var(--gray-300);
    }

.summary-meta-row {
    display: flex;
    gap: 0.25rem;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.1;
}

    .summary-meta-row .summary-meta-item {
        display: inline-flex;
        white-space: nowrap;
    }

.summary-content {
    margin-top: 0.5rem;
    padding: 0.5rem 1.25rem 0.5rem 4rem;
}

    .summary-content p {
        margin: 0;
        font-size: 0.9rem !important;
        line-height: 1.7;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.icon-base.processing-icon {
    background-color: var(--amber-100);
}

.processing-barch {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    color: var(--amber-800);
    background-color: var(--amber-100);
    font-size: 0.8rem;
    border-radius: 1rem;
    padding: .25rem .75rem;
    font-weight: bold;
}

.summary-textarea {
    font-size: 1rem !important;
    padding: 0.25rem 0.5rem;
}

/*
    表を枠の中で横に動かす。
    以前は 900px 以下のメディアクエリの中にしか無く、デスクトップの幅では素の div だった。
    列の合計が枠より広い表（ユーザー管理の招待中など）は列を折り返さないため、枠からはみ出して崩れて見えていた。
*/
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*各種マスタ一覧画面*/
.master-table {
    height: 100%;
    border: 0.02rem solid var(--gray-300) !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 1rem !important;
    overflow: hidden;
}

    .master-table thead th {
        font-weight: bold;
        font-size: 0.8rem;
        color: var(--gray-500) !important;
        background-color: var(--gray-50);
        padding: 0.75rem 1rem !important;
        /*
            見出しは折り返さない。

            master-main を付けた列が幅を取り切ると、残りの列が文字の幅まで詰められ、
            「使用数」が縦に1文字ずつ積まれた状態になっていた。
            見出しはどれも短い決まり文句なので、折り返さなくても表は広がらない。
        */
        white-space: nowrap;
    }

    .master-table tbody td {
        white-space: nowrap;
        vertical-align: middle;
        font-size: 0.9rem;
        border: none;
        /*
            左右の余白は見出し（thead th）と同じ 1rem にする。

            素の Bootstrap は 0.5rem しか持たないため、見出しだけが広く、
            中身は隣の列へ張り付いて見えていた（2026-09-16 利用者指摘：
            要約フォーマット一覧のフォーマット名の右が詰まっている）。
            見出しが既に 1rem 取っているので、そろえても列は広がらない。
            上下は行の高さを変えないよう素のままにする。
        */
        padding-left: 1rem;
        padding-right: 1rem;
    }

.master-no {
    width: 2rem;
    min-width: 2rem;
    text-align: center;
}

.master-name,
.master-user {
    width: 10rem;
    min-width: 10rem;
}

.master-main {
    width: 100%;
    min-width: 10rem;
}

.master-date {
    width: 11rem;
    min-width: 11rem;
}

.master-action {
    width: 5rem;
    min-width: 5rem;
}

    .master-action button {
        padding: 0 !important;
    }

.master-button {
    width: 3rem;
    min-width: 3rem;
    padding: 0 !important;
    vertical-align: middle;
    text-align: center;
}

    .master-button button {
        padding: 0 !important;
    }


/*組織マスタ設定画面*/
.tab-container {
    display: flex;
    gap: 0.25rem;
    border-bottom: 0.02rem solid var(--gray-200);
    overflow-x: auto;
    margin: 0.75rem 0;
}

/* タスク一覧の見出し・検索条件。折り返したときに行同士がくっつかないようにする */
.task-list-head {
    gap: 0.5rem;
    align-items: center;
}

.task-search-row {
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

    /*
        検索欄と絞り込みは1行に並べる。

        **検索欄を幅いっぱいにしない。** 幅いっぱいだと絞り込みが必ず2段目へ落ち、
        見たいのは一覧なのに条件だけで縦を大きく使う。検索欄を伸び縮みさせて、
        入りきらない画面でだけ折り返させる。
    */
    .task-search-row .search-group {
        flex: 1 1 16rem;
        min-width: 10rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* 検索欄と高さをそろえる。10%指定だと選択肢が読めない幅まで縮む */
    .task-search-row .task-search-select {
        flex: 0 0 auto;
        width: auto;
        min-width: 9rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

.tab {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: bold;
    background: none;
    border: none;
    border-bottom: 0.2rem solid transparent;
    cursor: pointer;
    margin-bottom: -0.01rem;
    white-space: nowrap;
    color: var(--gray-500);
    transition: all 0.2s ease;
}

    .tab:hover {
        color: var(--gray-700);
    }

    .tab.active {
        color: var(--gray-800);
        border-bottom: 0.1rem solid var(--gray-400);
    }

        .tab.active:hover {
            border-bottom: 0.1rem solid var(--gray-600);
        }

/*プロフィール画面*/
.connection-group {
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

    .connection-group span {
        font-size: 1.2rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-300);
        pointer-events: none;
    }

    .connection-group input {
        width: 100%;
        border: 0.05rem solid var(--gray-300);
        border-radius: 0.75rem;
        padding: 0.75rem 0.75rem 0.75rem 2.5rem;
        font-size: 1rem;
        outline: none;
        box-sizing: border-box;
    }

/*
    メールアドレスの行。中の要素（アイコン・アドレス・「現在のID」）は
    横に並ぶ前提で作られているが、並べる指定が無く縦に流れていた。
*/
.email-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.email-icon {
    flex-shrink: 0;
    color: var(--gray-400);
}

/* 「現在のID」の注記はアドレスに押されて折り返さない */
.email-group > .text-secondary {
    flex-shrink: 0;
    white-space: nowrap;
}

    .email-group .email-icon {
        font-size: 1.2rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-300);
        pointer-events: none;
    }

    .email-group span:not(.email-icon) {
        font-size: 0.8rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-300);
        pointer-events: none;
    }


    .email-group input {
        width: 100%;
        border: 0.05rem solid var(--gray-300);
        border-radius: 0.75rem;
        padding: 0.75rem 0.75rem 0.75rem 2.5rem;
        font-size: 1rem;
        outline: none;
        box-sizing: border-box;
    }

/*個人設定画面*/
.setting-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 0;
    border-bottom: 0.125rem solid var(--gray-100);
}

.setting-item-text {
    flex: 1;
}

.setting-item-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--gray-800);
    margin: 0;
}

.setting-item-description {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin: 0.25rem 0 0;
}

/* トグル */
/* トグル（.toggle-switch）は管理者ポータルの登録モーダルでも使うため、custom.css へ移した */

/*QA画面*/
.section-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin: 0 0 0.5rem;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-item {
    padding: 0;
    overflow: hidden;
}

.faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-icon {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--gray-400);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.faq-text {
    flex: 1;
    font-size: 1rem;
    font-weight: bold;
    color: var(--gray-800);
}

.faq-arrow {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gray-400);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.faq-answer {
    padding: 1rem 1.25rem 1.25rem 3rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--gray-600);
    background: var(--gray-50);
    border-top: 0.05rem solid var(--gray-100);
}

.faq-item:not(.is-open) .faq-answer {
    display: none;
}

/*お知らせ画面*/

.icon-info {
    color: color-mix(in srgb, var(--info) 60%, transparent);
}

.icon-check {
    color: color-mix(in srgb, var(--success) 60%, transparent);
}

.icon-warning {
    color: var(--alert);
}

/*タスク一覧画面*/
.task-content {
    padding: 1rem 1.5rem !important;
    cursor: pointer;
    will-change: transform;
}

    .task-content:hover {
        background-color: var(--glay-100);
    }


.btn-flex {
    flex: 1 1 0%;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border-width: 0.125rem;
    border-style: solid;
    font-size: 1rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: 0.15s;
    border-color: var(--gray-200);
    background: #ffffff;
    color: var(--gray-400);
}

    .btn-flex.select {
        border-color: var(--amber-500);
        background: var(--amber-100);
        color: var(--amber-800);
    }

.custome-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    cursor: pointer;
    margin-right: 1rem;
}

    .custome-checkbox:checked {
        background-color: var(--primary);
    }

.task-priority {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.75rem;
}

    .task-priority.task-priority0 {
        background-color: red;
    }

    .task-priority.task-priority1 {
        background-color: var(--amber-500);
    }

    .task-priority.task-priority2 {
        background-color: var(--gray-300);
    }

.complete-tasks .un-complete-text,
.un-complete-tasks .complete-text,
.complete-tasks .task-priority {
    display: none !important;
}

.task-name {
    font-weight: bold;
}

/*
   グループトークのタスクの印（2026-09-10・利用者の指摘）

   **タブを増やさず、同じ一覧に印を付けて出す。**
   完了させると全員のぶんが完了になるので、自分だけの仕事と見分けが付く必要がある。
*/
.task-group-mark {
    display: inline-flex;
    align-items: center;
    color: var(--indigo-600);
}

.complete-tasks .task-name {
    text-decoration: line-through;
    font-weight: normal;
    color: var(--gray-500);
}

/*RAG一覧画面*/
.rag-table {
    height: 100%;
    border: 0.02rem solid var(--gray-300) !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 1rem !important;
    overflow: hidden;
    font-size: 0.9rem;
}

    .rag-table thead th {
        font-weight: bold;
        color: var(--gray-500) !important;
        background-color: var(--gray-50);
        padding: 1rem 1.5rem !important;
    }

    .rag-table tbody td {
        white-space: nowrap;
        vertical-align: middle;
        border: none;
        padding: 1.25rem 1.5rem !important;
    }

.rag-name {
    width: 100%;
    min-width: 10rem;
    font-weight: bold;
}

.rag-attribute, .rag-status {
    width: 8rem;
    min-width: 8rem;
    text-align: center;
}

.rag-date {
    width: 11rem;
    min-width: 11rem;
}

.rag-action {
    width: 5rem;
    min-width: 5rem;
}


.knowledge-base-rag-index-checkbox {
    width: 5rem;
    min-width: 5rem;
    border: none !important;
}

    /*
        共通の input 指定（幅100%）が効くと、チェックがセルの幅（5rem）まで伸びる
        （[[aiagentsystem-css-input-trap]]）。四角は中央に描かれるので、左端でそろわず
        押せる範囲も見た目と食い違う。素の大きさへ戻す。
    */
    .knowledge-base-rag-index-checkbox input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
        padding: 0;
        margin: 0;
    }

.knowledge-base-rag-index-name {
    width: 100%;
    min-width: 10rem;
    font-weight: bold;
    border: none !important;
}

.knowledge-base-knowledge-source-name {
    width: 20rem;
    min-width: 20rem;
    border: none !important;
}

.knowledge-content-space {
    max-height: 15rem;
    overflow-y: auto;
}

/*エージェント一覧画面*/
/* エージェント一覧（モックは minmax(280px,1fr) の auto-fill） */
.agent-space {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1.143rem;
    /*
        横に並ぶカードは同じ高さにする（ボタンの位置をそろえるため）。
        grid-auto-rows: 1fr で一覧全体をそろえることもできるが、
        1件でも長い説明があると短いカードまで背伸びして余白だらけになるため、
        そろえるのは行の中だけにしている。
    */
    align-items: stretch;
}

.content.agent-content {
    padding: 1.143rem;
    cursor: pointer;
    /* つまみ（ドラッグ用）をカードの右上に置くための基準 */
    position: relative;
    /* 説明文の長さでボタンの位置が上下しないよう、カードは縦の器にする */
    height: 100%;
    display: flex;
    flex-direction: column;
    /* 中身の出し分けをカードの幅で決めるための宣言（agent-chat-label） */
    container-type: inline-size;
}

/* 並べ替えでつかんでいるカード */
.content.agent-content.dragging {
    opacity: 0.4;
}

/*
    アイコンと本文。カードの余りをここが受け取り、本文側でボタンを下へ押し下げる。
    名前を agent-card- で始めているのは、エージェント詳細画面が .agent-body を
    別の意味で使っており（1200px以下で縦積みになる）、当てられてしまうため。
*/
.agent-card-body {
    flex: 1;
    min-height: 0;
}

.agent-card-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 並べ替えのつまみ。カードの本文と重ならないよう右上に固定する */
.agent-drag-handle {
    position: absolute;
    top: 0.571rem;
    right: 0.571rem;
    display: flex;
    padding: 0.143rem;
    border: none;
    border-radius: 0.286rem;
    background: none;
    color: var(--gray-400);
    /* つかめる場所だと分かるようにする */
    cursor: grab;
}

    .agent-drag-handle:hover {
        color: var(--gray-600);
        background: var(--gray-100);
    }

    .agent-drag-handle:active {
        cursor: grabbing;
    }

    .agent-drag-handle .material-symbols-outlined {
        font-size: 1.286rem;
    }

/* 見出しの案内文に混ぜるつまみの絵。文字と同じ大きさにそろえる */
.agent-drag-hint-icon {
    font-size: 1.143rem;
    vertical-align: text-bottom;
}

/*
    狭い画面では案内文を出さない。折り返して「◯件 稼働中」と
    ［新規エージェント］を押しつぶすため。つまみには title を付けてあるので、
    出さなくても何のための絵かは分かる。
*/
@media (max-width: 992px) {
    .agent-drag-hint {
        display: none;
    }
}

.icon-base.agent-icon {
    width: 3.143rem;
    border-radius: 0.857rem;
    background: var(--gray-100);
    color: var(--gray-600);
}

.agent-title-row {
    align-items: center;
    gap: 0.571rem;
    /* 右上のつまみに名前・バッジが潜り込まないように空けておく */
    padding-right: 1.714rem;
}

.agent-name {
    font-size: 1rem;
}

.agent-model {
    font-size: 0.786rem;
    margin-top: 0.143rem !important;
}

.agent-footer {
    /* 説明文が短いカードでも、ボタンはカードの下端に置く */
    margin-top: auto;
    padding-top: 0.857rem;
    /*
        「今月:◯回」と操作ボタン。折り返すと、チャットが出るカード（稼働中）だけ
        ボタンが左下へ落ちて位置がそろわないため、1行に固める。
        入りきらないときは「今月:◯回」側を削る。
    */
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: center;
}

/* 「今月:◯回」。折り返させず、狭いときはここを削る */
.agent-usage {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 操作ボタンはひとかたまりで右下に置く */
.agent-actions {
    margin-left: auto;
    gap: 0.4rem;
    flex-shrink: 0;
}

/*
    チャットの文字を出すかどうかは、画面の広さではなくカードの幅で決める。
    一覧は幅に応じて列数が変わるため、画面が広くてもカードは狭いことがあり、
    画面幅で判断すると「今月:◯回」がつぶれて読めなくなっていた。
*/
@container (max-width: 24rem) {
    .agent-chat-label {
        display: none;
    }
}

/* 稼働／停止ボタン（モック Btn size="sm"） */
button.btn.agent-publish {
    padding: 0.357rem 0.857rem;
    font-size: 0.857rem;
}

/* 末尾の追加カード（点線枠） */
.agent-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.571rem;
    min-height: 8.571rem;
    padding: 2.286rem;
    border: 0.143rem dashed var(--gray-300);
    border-radius: 0.857rem;
    background: none;
    color: var(--gray-400);
    cursor: pointer;
    transition: 0.15s;
}

    .agent-add:hover {
        border-color: var(--gray-500);
        color: var(--gray-600);
        background: var(--gray-50);
    }

    .agent-add .material-symbols-outlined {
        font-size: 2rem;
    }

.agent-add-label {
    font-size: 0.929rem;
    font-weight: 600;
}

.min-w-0 {
    min-width: 0;
}

/*
    説明文（Agents.Description は1000文字まで入る）
    以前は3行で切って「…」にしていたが、長い説明が読めなくなるため切らない。
    カードの余りを目いっぱい使い、それでも入らない分はこの中だけをスクロールさせる。
    上限を付けているのは、1件の長い説明でその行のカードが全部背伸びしてしまうため。
*/
.agent-description {
    flex: 1 1 auto;
    line-height: 1.5;
    min-height: calc(1.5em * 3);
    max-height: calc(1.5em * 6);
    overflow-y: auto;
    /* カードの端でホイールが親（一覧全体）へ移らないようにする */
    overscroll-behavior: contain;
    /* 説明文に入れた改行をそのまま出す */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-top: 0.286rem !important;
}

.position-right {
    right: 1rem !important;
}

/* 選ぶモーダルの一覧（.modal-dropdown-list）は管理者ポータルのプリセット画面でも使うため、custom.css へ移した */

/* ===== ダッシュボード：レイアウト ===== */
.dashboard-main {
    overflow-y: auto;
    padding: 1rem 1rem 5rem;
    background-color: var(--gray-100);
}

.dashboard-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ===== ダッシュボード：ヒーローカード ===== */
.dashboard-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, var(--gray-600), var(--gray-800));
    box-shadow: 0 0.25rem 1.25rem rgba(31, 41, 55, 0.2);
}

.dashboard-hero-deco {
    position: absolute;
    border-radius: 50%;
}

.dashboard-hero-deco-1 {
    top: -1.25rem;
    right: -1.25rem;
    width: 7.5rem;
    height: 7.5rem;
    background: rgba(255,255,255,0.06);
}

.dashboard-hero-deco-2 {
    bottom: -1.875rem;
    right: 1.875rem;
    width: 5rem;
    height: 5rem;
    background: rgba(255,255,255,0.04);
}

.dashboard-hero-greeting {
    position: relative;
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dashboard-hero-title {
    position: relative;
    margin: 0 0 0.625rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.dashboard-hero-subtitle {
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.8;
}

.dashboard-hero-body {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

/* チャット開始ボタン（白ピル） */
.dashboard-chat-btn {
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 1.5rem;
    background: #fff;
    color: var(--gray-800);
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.12);
}

/* ヒーロー右側：統計＋グラフ */
.dashboard-hero-stats {
    flex: 1 1 0%;
    min-width: 0;
}

.dashboard-hero-stats-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

.dashboard-hero-stats-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
}

.dashboard-hero-stats-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.dashboard-hero-stats-unit {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.6;
}

.dashboard-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.1875rem;
    height: 2.25rem;
}

.dashboard-chart-col {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.dashboard-chart-bar {
    width: 100%;
    border-radius: 0.1875rem;
    background: var(--gray-200);
    transition: height 0.3s;
}

    .dashboard-chart-bar.is-active {
        background: var(--gray-800);
    }

.dashboard-chart-label {
    font-size: 0.65rem;
    color: var(--gray-400);
    white-space: nowrap;
}

/* ===== 要約一覧（検索とページ送り） ===== */

/* form には共通で flex-direction:column が当たる。打ち消さないと検索欄とボタンが縦に並ぶ */
.summary-search-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0;
    padding-bottom: 0;
}

/* 検索欄は余った幅をすべて使う。ボタンは縮めない */
.summary-search-box {
    flex: 1 1 14rem;
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.summary-search-btn {
    flex-shrink: 0;
}

/* 検索語の表示。件数の隣に小さく添える */
.summary-keyword {
    font-size: 0.8rem;
    color: var(--gray-400);
    margin-left: 0.5rem;
}

/* カードの間隔をここで一括して持つ。以前は各カードの margin-top に頼っており、
   先頭のカードだけ検索欄との間隔が変わっていた */
.summary-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

    .summary-list .summary-frame {
        margin-top: 0;
    }

/* 0件の案内。以前は absolute-center で中央に浮かせており、
   検索して0件になったときに見つけにくかった */
.summary-empty {
    padding: 2rem 0;
}

/* クレジットの警告帯（ダッシュボード） */
.dashboard-notice-alert {
    padding: 0.5rem 0.75rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.6rem;
    background: var(--gray-50);
}

    .dashboard-notice-alert .dashboard-notice-text {
        font-weight: bold;
    }

/* ===== 監査ログ（マスタ管理タブ） ===== */
.audit-filter {
    display: flex;
    /* form には共通で flex-direction:column が当たる。
       打ち消さないと絞り込みが縦に積み上がる */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    /* 条件・ボタンをすべて1行に収める（1280px幅・メニュー展開で約990px）ため詰めている */
    gap: 0.5rem;
}

    /* ボタンの左右の余白を詰める。ここだけ4つ並ぶので、既定の余白だと1行に収まらない */
    .audit-filter .btn {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        white-space: nowrap;
    }

.audit-filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* input・select には共通で width:100% が当たる。指定しないと1件で行を占有する */
.audit-filter-input {
    width: auto;
    min-width: 8.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

    /* select は一番長い選択肢の幅に伸びる（種別は「エージェントの設定変更」まで）。閉じた状態は上限で止める */
    select.audit-filter-input {
        max-width: 11rem;
    }

/* 絞り込みではない操作（表示設定・CSV）は右端にまとめる。条件と同じ1行に収めるため */
.audit-filter-actions {
    flex-direction: row;
    gap: 0.5rem;
    margin-left: auto;
}

.audit-datetime {
    width: 11rem;
    min-width: 11rem;
    font-variant-numeric: tabular-nums;
}

.audit-user {
    width: 10rem;
    min-width: 10rem;
}

.audit-type {
    width: 12rem;
    min-width: 12rem;
}

.audit-type-badge {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.audit-type-icon {
    font-size: 1rem;
}

/* 内容は長くなりがち。折り返さず省略する（行の高さをそろえるため）。
   幅は 1280px（メニュー展開・約990px）でクレジット列まで横に動かさず見える上限 */
.audit-message {
    max-width: 30rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 消費クレジット。数字なので右寄せ・桁をそろえる */
.audit-credit {
    width: 6.5rem;
    min-width: 6.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 表示設定で隠していることの知らせ */
.audit-hidden-note {
    display: flex;
    align-items: center;
}

/*
    表示設定（モーダル）。
    form が modal-body と modal-footer を包んでいる。flex の子は中身より縮まない（min-height:auto）ため、
    ここを 0 にしないと modal-dialog-scrollable が効かず、モーダルが画面の下へはみ出す
*/
.audit-view-setting-form {
    min-height: 0;
}

/* 種別が多いので2列に並べる */
.audit-view-setting-master {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

/*
    columns（段組み）は使わない。高さを抑えて縦に動かすと、収まらないぶんが
    右へ段を増やして横スクロールになる（採寸で踏んだ）。grid なら縦にだけ伸びる
*/
.audit-view-setting-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    /* 高さは抑えない。動かすのはモーダル本文（modal-dialog-scrollable）に任せる */
    padding: 0.25rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
}

@media (max-width: 575.98px) {
    .audit-view-setting-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.audit-view-setting-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.3rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
}

    .audit-view-setting-item:hover {
        background: var(--gray-100);
    }

/* site.css の input 一括指定（width:100% / padding）を打ち消して素の大きさへ戻す */
.audit-view-setting-item input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
    flex: none;
}

/* ===== 組織タスク（タスク管理タブ） ===== */

/* 分類。タスク名の右に小さく添える */
.org-task-category {
    display: inline-block;
    padding: 0 0.5rem;
    border-radius: 0.75rem;
    background: var(--gray-200, #e9ecef);
    color: var(--gray-600);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* ===== ログイン履歴（マスタ管理タブ） ===== */

/* 絞り込みと日時・利用者の列は監査ログと同じものを使い回す */
.login-history-ip {
    width: 10rem;
    min-width: 10rem;
    font-variant-numeric: tabular-nums;
}

.login-history-agent {
    width: 11rem;
    min-width: 11rem;
}

.login-history-badge {
    font-size: 0.8rem;
    color: var(--gray-600);
}

/* 成功が大半を占めるため、目を留めてほしい行だけ色を変える */
.login-history-badge.is-warning {
    color: var(--danger, #c0392b);
    font-weight: 600;
}

/* 同じ人でも入口が違う。利用者名の後ろに小さく添える */
.login-history-portal {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0 0.35rem;
    border-radius: 0.75rem;
    background: var(--gray-200, #e9ecef);
    color: var(--gray-600);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* ===== 利用状況（マスタ管理タブ） ===== */

/* select には共通で width:100% が当たる。指定しないと絞り込みが行いっぱいに広がる */
.usage-month-select {
    width: auto;
    min-width: 9rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

.usage-cards {
    display: grid;
    /* 狭い画面では2列、広い画面では4列に落ち着く */
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.usage-card {
    background: white;
    border: 0.05rem solid var(--gray-200);
    border-radius: 1rem;
    box-shadow: 0 0.05rem 0.25rem var(--gray-300);
    padding: 1rem 1.25rem;
}

.usage-card-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin: 0 0 0.35rem;
}

.usage-card-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--gray-800);
    margin: 0;
    white-space: nowrap;
}

.usage-card-unit {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--gray-500);
}

.usage-card-note {
    font-size: 0.8rem;
    color: var(--gray-400);
    margin: 0.4rem 0 0;
}

.usage-section-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--gray-700);
    margin: 0 0 0.75rem;
}

/* 機能別と部署別を横に並べる。入らなくなったら縦に折り返す */
.usage-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.usage-table {
    margin: 0;
}

    .usage-table thead th {
        font-weight: bold;
        font-size: 0.75rem;
        color: var(--gray-500) !important;
        border-bottom: 0.05rem solid var(--gray-200);
        padding: 0.4rem 0.5rem !important;
    }

    .usage-table tbody td {
        font-size: 0.85rem;
        vertical-align: middle;
        white-space: nowrap;
        border: none;
        padding: 0.4rem 0.5rem;
    }

/* 使われていない機能。行は残して薄く出す（使われていないことも情報のため） */
.usage-row-empty td {
    color: var(--gray-400);
}

.usage-name {
    /* 長い名前で数字が押し出されないようにする */
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usage-department {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--gray-500);
}

.usage-number {
    text-align: right;
    width: 5rem;
}

/* 横棒は余った幅をすべて使う。数字だけだと差が掴みにくい */
.usage-bar-cell {
    width: auto;
    min-width: 4rem;
}

.usage-bar {
    display: block;
    height: 0.4rem;
    min-width: 0;
    border-radius: 0.2rem;
    background: var(--gray-300);
}

.usage-left {
    font-size: 0.7rem;
    color: var(--gray-400);
}

.usage-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.125rem;
    /* 棒の最大90px＋日付ラベルの分 */
    height: 7rem;
}

.usage-chart-col {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.125rem;
    height: 100%;
}

.usage-chart-bar {
    width: 100%;
    /* 日数のぶん均等に割ると1本が太くなりすぎるため頭打ちにする */
    max-width: 1.25rem;
    border-radius: 0.1875rem;
    background: var(--gray-300);
}

.usage-chart-label {
    font-size: 0.65rem;
    color: var(--gray-400);
    white-space: nowrap;
    /* 日付を出さない列でも高さをそろえる */
    min-height: 0.9rem;
}

/* ===== ダッシュボード：メンテナンス通知行 ===== */
.dashboard-notice {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0 0;
}

.dashboard-notice-icon {
    flex-shrink: 0;
    color: var(--amber-500) !important;
}

.dashboard-notice-text {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gray-400);
}

.dashboard-notice-link {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--sky-500);
    font-size: 0.85rem;
    font-weight: 400;
    white-space: nowrap;
}

/* ===== ダッシュボード：汎用カード ===== */
.dashboard-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 0.0625rem solid var(--gray-200);
    border-radius: 0.75rem;
    box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.07);
}

.dashboard-card-body {
    padding: 0.875rem 1rem;
}

/* ===== ダッシュボード：利用枠（プログレス） ===== */
.dashboard-quota-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.dashboard-quota-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
}

.dashboard-quota-count {
    font-size: 0.8rem;
    color: var(--gray-400);
}

.dashboard-progress {
    height: 0.1875rem;
    margin-bottom: 0.375rem;
    border-radius: 0.25rem;
    background: var(--gray-100);
    overflow: hidden;
}

.dashboard-progress-bar {
    height: 100%;
    border-radius: 0.25rem;
    background: var(--gray-800);
}

.dashboard-quota-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--gray-400);
}

/* ===== ダッシュボード：統計カード（2×2グリッド） ===== */
.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.dashboard-stat-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dashboard-stat-icon {
    color: var(--gray-300) !important;
}

.dashboard-stat-label {
    margin: 0;
    font-size: 0.8rem;
    color: var(--gray-400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-stat-value {
    margin: 0 0 0.125rem;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.03em;
}

.dashboard-stat-sub {
    margin: 0;
    font-size: 0.8rem;
    color: var(--gray-400);
}

/* ===== ダッシュボード：下部2カラム ===== */
.dashboard-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

/*
   権限の無いカードを外した結果、中身が1枚だけになった場合。
   列の指定をそのままにすると、カードが左半分だけになって右が空く
*/
.dashboard-stat-grid.dashboard-grid-single,
.dashboard-bottom-grid.dashboard-grid-single {
    grid-template-columns: 1fr;
}

.dashboard-panel-title {
    margin: 0 0 0.625rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
}

/* 最近の活動 */
.dashboard-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.375rem 0;
    border-bottom: 0.0625rem solid var(--gray-50);
}

    .dashboard-activity-item:last-child {
        border-bottom: none;
    }

.dashboard-activity-icon {
    flex-shrink: 0;
    margin-top: 0.0625rem;
    color: var(--gray-300) !important;
}

.dashboard-activity-text {
    flex: 1 1 0%;
    min-width: 0;
}

.dashboard-activity-name {
    margin: 0 0 0.0625rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-activity-time {
    font-size: 0.7rem;
    color: var(--gray-300);
}

/* クイックアクセス */
.dashboard-quick-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.dashboard-quick-btn {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 0.0625rem solid var(--gray-200);
    border-radius: 0.5rem;
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    transition: 0.12s;
}

    .dashboard-quick-btn:hover {
        background: var(--gray-100);
    }

.dashboard-quick-icon {
    flex-shrink: 0;
    color: var(--gray-400) !important;
}

.dashboard-quick-label {
    flex: 1 1 0%;
}

.dashboard-quick-arrow {
    color: var(--gray-300) !important;
}

/*
   クイックアクセスが5つ以上のとき。
   1列のままだと縦に伸びて、隣の「最近の活動」と高さが合わなくなる
*/
.dashboard-quick-list.is-dense {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ===== ダッシュボード：要対応の札 ===== */
/*
    相手を待たせているもの（未読・申請・期限切れ）を、開いた時点で見える位置に出す。
    押すとその画面へ行く。件数が0のものは出さない（画面側で組み立てる）
*/
.dashboard-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.dashboard-chip {
    display: flex !important;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border: 0.0625rem solid var(--gray-200);
    border-radius: 999px;
    background: #fff;
    color: var(--gray-700);
    font-size: 0.8rem;
    font-weight: 500;
    transition: 0.12s;
}

    .dashboard-chip:hover {
        background: var(--gray-50);
    }

    /* 期限切れだけは色を変える。ほかの札と同じ見た目だと埋もれる */
    .dashboard-chip.is-urgent {
        border-color: var(--red-100);
        background: var(--red-100);
        color: var(--red-700);
    }

.dashboard-chip-icon {
    color: var(--gray-400) !important;
}

.dashboard-chip.is-urgent .dashboard-chip-icon {
    color: var(--red-700) !important;
}

.dashboard-chip-count {
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 0.75rem;
    font-weight: 700;
}

.dashboard-chip.is-urgent .dashboard-chip-count {
    background: var(--red-500);
    color: #fff;
}

/* ===== ダッシュボード：パネルの見出し（右に「すべて見る」） ===== */
.dashboard-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

    /* 見出しの下余白は親（head）が持つ */
    .dashboard-panel-head .dashboard-panel-title {
        margin-bottom: 0;
    }

.dashboard-panel-link {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--sky-500);
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
}

/* ===== ダッシュボード：開催中・これからのWeb会議 ===== */
/*
    左の色帯と状態の札は一覧（.meeting-row）と同じものを使う。
    色を別に決めると、一覧では緑の会議がここでは灰色、という食い違いが出る
*/
.dashboard-meeting-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0 0.375rem 0.625rem;
    border-left: 0.286rem solid var(--gray-300);
    border-bottom: 0.0625rem solid var(--gray-50);
}

    .dashboard-meeting-item:last-child {
        border-bottom: none;
    }

    .dashboard-meeting-item.is-scheduled {
        border-left-color: var(--gray-400);
    }

    .dashboard-meeting-item.is-joinable {
        border-left-color: var(--success, #16a34a);
    }

    .dashboard-meeting-item.is-live {
        border-left-color: var(--danger, #ef4444);
    }

    .dashboard-meeting-item.is-private {
        border-left-color: #7c3aed;
    }

.dashboard-meeting-text {
    flex: 1 1 0%;
    min-width: 0;
}

.dashboard-meeting-name {
    margin: 0 0 0.0625rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-meeting-time {
    font-size: 0.7rem;
    color: var(--gray-400);
}

/* ボタンは縮めない（縮むと「参加する」が2行に折れる） */
.dashboard-meeting-join {
    flex: none;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}

.dashboard-meeting-wait {
    flex: none;
    font-size: 0.7rem;
    color: var(--gray-400);
}

/* ===== ダッシュボード：今日の予定 ===== */
.dashboard-schedule-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 0.0625rem solid var(--gray-50);
    cursor: pointer;
}

    .dashboard-schedule-item:last-child {
        border-bottom: none;
    }

    /* 終わった予定。消さずに薄くして、これからのものと見分ける */
    .dashboard-schedule-item.is-past {
        opacity: 0.55;
    }

/* 色は予定の色（.schedule-color-*）がそのまま塗る */
.dashboard-schedule-color {
    flex: none;
    width: 0.1875rem;
    height: 1.5rem;
    border-radius: 0.125rem;
    background: var(--gray-300);
}

.dashboard-schedule-text {
    flex: 1 1 0%;
    min-width: 0;
}

.dashboard-schedule-name {
    margin: 0 0 0.0625rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-schedule-time {
    font-size: 0.7rem;
    color: var(--gray-400);
}

.dashboard-schedule-mark {
    flex: none;
    color: var(--gray-300) !important;
}

/* ===== ダッシュボード：期限が近いタスク ===== */
.dashboard-task-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 0.0625rem solid var(--gray-50);
    cursor: pointer;
}

    .dashboard-task-item:last-child {
        border-bottom: none;
    }

.dashboard-task-text {
    flex: 1 1 0%;
    min-width: 0;
}

.dashboard-task-name {
    margin: 0 0 0.0625rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-task-project {
    font-size: 0.7rem;
    color: var(--gray-400);
}

/* 期日の札。切らない（「9/17 期限切れ」まで読めないと意味がない） */
.dashboard-task-due {
    flex: none;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.286rem;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.7rem;
    white-space: nowrap;
}

    .dashboard-task-due.is-overdue {
        background: var(--red-100);
        color: var(--red-700);
    }

    .dashboard-task-due.is-today {
        background: var(--amber-100);
        color: var(--amber-800);
    }

/* 統計カードの添え字。急ぐもの・待っているものだけ色を変える */
.dashboard-stat-sub.is-overdue {
    color: var(--red-700);
}

.dashboard-stat-sub.is-waiting {
    color: var(--amber-800);
}

.material-symbols-outlined.dashboard-icon-xs {
    font-size: 0.9rem !important;
}

.material-symbols-outlined.dashboard-icon-sm {
    font-size: 1rem !important;
}

.material-symbols-outlined.dashboard-icon-lg {
    font-size: 1.55rem !important;
}

/*用語集画面*/
.dict-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--gray-400);
    line-height: 1;
}

    .dict-search-clear .material-symbols-outlined {
        font-size: 1.1rem;
    }

.dict-pager {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.75rem 0;
}

.dict-pager-btn,
.dict-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    font-size: 0.8rem;
    color: var(--gray-700);
    text-decoration: none;
}

    .dict-pager-btn.is-disabled,
    .dict-pager-num.is-disabled {
        color: var(--gray-300);
        cursor: not-allowed;
    }

    .dict-pager-num.is-current {
        background: var(--gray-800);
        border-color: var(--gray-800);
        color: white;
        font-weight: bold;
    }

.dict-pager-count {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* タスク一覧のページャ。見た目は用語集と同じものを使う（クラスを重ねている）。
   一覧の上下に置くため、上側は詰めて下側は少し空ける */
.task-pager {
    flex-wrap: wrap;
}

/* タスク詳細から元の要約へ辿るリンク */
.task-summary-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    background: var(--gray-50, #f9fafb);
    color: var(--gray-700);
    font-size: 0.85rem;
    text-decoration: none;
}

    .task-summary-link:hover {
        border-color: var(--gray-300);
        color: var(--gray-800);
    }

/* タブに出す未対応件数のバッジ */
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.375rem;
    padding: 0 0.25rem;
    border-radius: 0.75rem;
    background: var(--danger, #ef4444);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    line-height: 1;
}

.dict-type {
    width: 7rem;
    min-width: 7rem;
}

.dict-word {
    font-weight: bold;
    color: var(--gray-900);
}

/*
    用語マスタの列幅。

    master-table は white-space:nowrap なので、上限まで書かれた用語・読み・説明が
    1行に伸びて表が入れ物からはみ出す。監査ログ（audit-message）と同じやり方で
    上限を決めて省略する。全文は title で読める。
*/
.dict-term {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dict-kana {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dict-description {
    max-width: 30rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    要約フォーマットの1列目（名前と説明）。

    説明は1000字まで書けるため、抑えないと表が桁違いに横へ伸びる。
    名前と説明はそれぞれ別の行なので、行ごとに省略する。
*/
.summary-format-main {
    max-width: 32rem;
}

.summary-format-name,
.summary-format-description {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 無効な用語は一覧上でも参照対象外であることが分かるようにする */
.dict-row-inactive {
    opacity: 0.45;
    background-color: var(--gray-50);
}

    .dict-row-inactive .dict-word {
        text-decoration: line-through;
        color: var(--gray-400);
    }

.badge-main.dict-badge-preset {
    background-color: #eff6ff;
    color: var(--primary);
    border: 0.05rem solid #bfdbfe;
}

.badge-main.dict-badge-custom {
    background-color: var(--gray-100);
    color: var(--gray-500);
    border: 0.05rem solid var(--gray-200);
}

.dict-audit {
    padding: 0.75rem 1rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.75rem;
    background: var(--gray-50);
    margin-bottom: 1rem;
}

.dict-audit-label {
    min-width: 3rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--gray-500);
}

.dict-audit-text {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.dict-switch {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.75rem;
    background: var(--gray-50);
    margin-bottom: 1rem;
}

.dict-switch-label {
    margin: 0;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--gray-900);
}

.dict-switch-note {
    margin: 0;
    font-size: 0.75rem;
    color: var(--gray-400);
}

/*タスク一覧の検索・絞り込み*/
.task-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--gray-400);
    line-height: 1;
}

    .task-search-clear .material-symbols-outlined {
        font-size: 1.1rem;
    }

.task-filter {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.task-filter-label {
    font-size: 0.8rem;
    color: var(--gray-500);
}

/* 一覧のヘッダーに並べるため小さめのトグルを用意する（span でも使えるようにする） */
.toggle-switch.toggle-switch-sm {
    display: inline-block;
    width: 2.25rem;
    height: 1.35rem;
    border-radius: 0.675rem;
}

    .toggle-switch.toggle-switch-sm .toggle-switch-thumb {
        width: 1.1rem;
        height: 1.1rem;
        top: 0.125rem;
        left: 0.125rem;
    }

    .toggle-switch.toggle-switch-sm.is-on .toggle-switch-thumb {
        transform: translateX(0.9rem);
    }

/*要約詳細画面*/
.summary-title-edit {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    min-width: 0;
}

    .summary-title-edit .summary-title-icon {
        font-size: 1rem;
        flex-shrink: 0;
    }

.summary-title-input {
    font-size: 1.25rem;
    font-weight: bold;
    border: none;
    border-bottom: 0.15rem solid var(--gray-600);
    border-radius: 0;
    padding: 0 0 0.15rem;
    background: transparent;
    box-shadow: none;
}

.summary-processing {
    padding: 1rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.75rem;
    background: var(--gray-50);
}

.spinner.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    border-top-width: 2px;
}

/* 生成中であることを示すプレースホルダ */
.summary-skeleton {
    height: 0.7rem;
    margin-bottom: 0.4rem;
    border-radius: 0.25rem;
    background: var(--gray-200);
    animation: summary-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes summary-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/*要約詳細：録音プレイヤー*/
.summary-player-toggle {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    background: linear-gradient(135deg, var(--gray-600), var(--gray-800));
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.15);
}

    .summary-player-toggle .material-symbols-outlined {
        font-size: 1.5rem !important;
    }

.summary-player-info {
    min-width: 0;
}

.summary-player-bar {
    position: relative;
    height: 0.3rem;
    border-radius: 0.3rem;
    background: var(--gray-200);
    cursor: pointer;
    /* タップで再生位置を動かせるようにする（既定の遅延・拡大を止める） */
    touch-action: manipulation;
}

/*
    見た目は細いまま、指で押せるだけの当たり判定を上下に広げる。
    棒の高さ（0.3rem＝4px前後）のままでは、指では狙って押せない。
    広げるために overflow:hidden は外している（進み具合の棒は自前で角を丸めている）。
*/
.summary-player-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.8rem;
    bottom: -0.8rem;
}

.summary-player-progress {
    height: 100%;
    width: 0;
    border-radius: 0.3rem;
    background: linear-gradient(135deg, var(--gray-600), var(--gray-800));
}

#summary-audio {
    display: none;
}

/*要約詳細：タスク*/
.summary-task {
    padding: 0.75rem 0;
    border-bottom: 0.05rem solid var(--gray-100);
}

    .summary-task:last-child {
        border-bottom: none;
    }

.summary-task-body {
    min-width: 0;
}

.summary-task-name {
    font-weight: 500;
    color: var(--gray-800);
}

.summary-task-expired {
    color: var(--sky-500);
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

    .summary-task-expired .material-symbols-outlined {
        font-size: 0.9rem !important;
    }

/* 完了の切り替え。タスク一覧と同じ大きさにそろえる（余白だけ詰める） */
.summary-task-check {
    margin-right: 0.75rem;
}

/* 完了日。完了しているときだけ出す */
.summary-task-completed {
    display: none;
    color: var(--gray-500);
    align-items: center;
    gap: 0.15rem;
}

    .summary-task-completed .material-symbols-outlined {
        font-size: 0.9rem !important;
    }

/* 完了したタスクは、名前に取り消し線を引いて期限を隠す（一覧と同じ見せ方） */
.summary-task.is-completed .summary-task-name {
    text-decoration: line-through;
    color: var(--gray-500);
}

.summary-task.is-completed .summary-task-expired {
    display: none;
}

.summary-task.is-completed .summary-task-completed {
    display: inline-flex;
}

.summary-task-actions {
    flex-shrink: 0;
    align-items: center;
}

/* モック Btn size="sm"（padding 5px 10px ／ 文字 12px） */
button.btn.summary-task-button {
    padding: 0.357rem 0.714rem !important;
    border-radius: 0.571rem !important;
    font-size: 0.857rem !important;
    white-space: nowrap;
}

    button.btn.summary-task-button .material-symbols-outlined {
        font-size: 0.95rem !important;
    }

/*要約詳細：公開設定*/
.summary-visibility {
    padding-top: 1rem;
    border-top: 0.05rem solid var(--gray-100);
}

.summary-visibility-options {
    gap: 0.4rem;
}

.summary-visibility-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.4rem;
    border: 0.1rem solid var(--gray-200);
    border-radius: 0.6rem;
    background: white;
    cursor: pointer;
    color: var(--gray-500);
}

    .summary-visibility-option.select {
        border-color: var(--gray-800);
        background: var(--gray-50);
        color: var(--gray-900);
        font-weight: bold;
    }

.summary-visibility-option-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    color: var(--gray-400);
}

.summary-visibility-option.select .summary-visibility-option-icon {
    background: linear-gradient(135deg, var(--gray-600), var(--gray-800));
    color: white;
}

/*メンバー選択リスト*/
.summary-member-list {
    max-height: 14rem;
    overflow-y: auto;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.6rem;
}

.summary-member {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 0.05rem solid var(--gray-100);
    cursor: pointer;
}

    .summary-member:last-child {
        border-bottom: none;
    }

    .summary-member:hover {
        background: var(--gray-50);
    }

.summary-member-check {
    width: auto;
    padding: 0;
    flex-shrink: 0;
}

.summary-member-name {
    font-size: 0.85rem;
    color: var(--gray-700);
    /* 長い氏名で押し出されないようにする（メールアドレス側を縮める） */
    flex-shrink: 0;
}

/* 長いメールアドレスは折り返さず省略する。折り返すと行の高さがそろわない */
.summary-member-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*ナレッジ取り込み先リスト*/
.knowledge-target-list {
    /* 候補が多い組織があるため高さを止める。止めないとモーダルが画面外まで伸びる */
    max-height: 14rem;
    overflow-y: auto;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.6rem;
}

.knowledge-target {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 0.05rem solid var(--gray-100);
    cursor: pointer;
}

    .knowledge-target:last-child {
        border-bottom: none;
    }

    .knowledge-target:hover {
        background: var(--gray-50);
    }

    /* 取り込み済みは選べない。押せないことが分かるようにする */
    .knowledge-target.is-added {
        cursor: default;
    }

        .knowledge-target.is-added:hover {
            background: none;
        }

/* クラスを付けないと input の共通指定（width:100%）が効いて
   ラジオが行いっぱいに広がり、名前が右端へ押し出される */
.knowledge-target-check {
    width: auto;
    padding: 0;
    flex-shrink: 0;
}

.knowledge-target-name {
    font-size: 0.85rem;
    color: var(--gray-700);
    /* 長い名前は折り返さず省略する。折り返すと行の高さがそろわない */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.knowledge-target.is-added .knowledge-target-name {
    color: var(--gray-400);
}

.knowledge-target-added {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-left: auto;
}

/*共有タスクタブ*/
.shared-task-body {
    min-width: 0;
}

.shared-task-responded {
    opacity: 0.6;
}

.shared-task .material-symbols-outlined {
    font-size: 0.9rem !important;
    vertical-align: middle;
}

/*利用規約への同意画面*/
.terms-container {
    width: 100%;
    max-width: 48rem;
    padding: 0;
    overflow: hidden;
}

.terms-header {
    padding: 1.25rem 2rem;
    border-bottom: 0.05rem solid var(--gray-200);
}

.terms-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--gray-900);
}

.terms-guide {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--gray-400);
}

    /* 最後まで読んだら案内文を消す（領域は残して高さが動かないようにする） */
    .terms-guide.is-hidden {
        visibility: hidden;
    }

.terms-body {
    padding: 1.25rem 2rem;
    height: 28rem;
    overflow-y: auto;
    background: var(--gray-50);
    border-bottom: 0.05rem solid var(--gray-200);
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.8;
}

.terms-description {
    margin: 0 0 1rem;
    color: var(--gray-500);
}

.terms-chapter {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: bold;
    color: var(--gray-900);
    padding-bottom: 0.25rem;
    border-bottom: 0.05rem solid var(--gray-200);
}

.terms-article {
    margin: 1rem 0 0.25rem;
    font-weight: bold;
    color: var(--gray-900);
}

.terms-text {
    margin: 0 0 0.5rem;
}

.terms-implemented {
    margin: 1.5rem 0 0;
    font-size: 0.8rem;
    color: var(--gray-400);
}

.terms-footer {
    padding: 1.5rem 2rem;
}

.terms-form {
    gap: 1rem;
}

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--gray-700);
    cursor: pointer;
}

    /* 読了までは操作できないことを見た目でも示す */
    .terms-check.is-disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .terms-check input[type="checkbox"] {
        width: auto;
        margin-top: 0.2rem;
        padding: 0;
        flex-shrink: 0;
    }

/*組織情報タブ*/
.org-info {
    max-width: 44rem;
}

/* モックの「変更を保存」（GradBtn を width:auto・padding 10px 28px にしたもの） */
button.btn.org-info-submit {
    padding: 0.714rem 2rem !important;
    border-radius: 0.857rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.org-quota {
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.65rem;
    overflow: hidden;
}

.org-quota-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 0.05rem solid var(--gray-100);
}

.org-quota-cell {
    padding: 0.9rem 1rem;
    border-right: 0.05rem solid var(--gray-100);
}

    .org-quota-cell:last-child {
        border-right: none;
    }

.org-quota-label {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--gray-400);
}

.org-quota-value {
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--gray-900);
}

.org-quota-unit {
    margin-left: 0.2rem;
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--gray-400);
}

.org-quota-footer {
    padding: 0.7rem 1rem;
    background: var(--gray-50);
}

.org-quota-bar {
    height: 0.4rem;
    border-radius: 0.4rem;
    background: var(--gray-200);
    overflow: hidden;
}

.org-quota-progress {
    height: 100%;
    border-radius: 0.4rem;
    background: linear-gradient(135deg, var(--gray-600), var(--gray-800));
}

/*オプション設定タブ*/
.option-section-head {
    display: flex;
    padding-bottom: 0.6rem;
    border-bottom: 0.05rem solid var(--gray-200);
    margin-bottom: 0.3rem;
}

.option-row {
    display: flex;
    padding: 0.85rem 0;
    border-bottom: 0.05rem solid var(--gray-100);
}

    .option-row:last-child {
        border-bottom: none;
    }

.option-label {
    margin: 0 0 0.15rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-900);
}

.option-note {
    margin: 0;
    font-size: 0.75rem;
    color: var(--gray-400);
    line-height: 1.6;
}

.icon-base.option-paid-icon {
    background-color: var(--amber-100);
    color: var(--amber-800);
}

.option-paid-note {
    padding: 0.75rem 0.9rem;
    border: 0.05rem solid var(--amber-400);
    border-radius: 0.6rem;
    background: #fffbeb;
    font-size: 0.85rem;
    color: var(--amber-800);
    line-height: 1.7;
}

/*ロール・権限タブ*/
.role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

.role-card {
    display: flex;
    flex-direction: column;
}

.role-permission-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .role-permission-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.4rem;
        font-size: 0.8rem;
        color: var(--gray-600);
    }

.role-permission-check {
    font-size: 1rem !important;
    color: var(--success);
    flex-shrink: 0;
}

/*
    ロール一覧：11件目以降は「すべて表示」を押すまで隠す（レイアウト指摘 No.26）。
    権限が多いロール（管理者は18件すべて）でカードが縦に伸び、隣と高さが揃わないため。
*/
.role-permission-list .role-permission-rest {
    display: none;
}

.role-permission-list.expanded .role-permission-rest {
    display: flex;
}

.role-permission-toggle {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.5rem;
    padding: 0.2rem 0;
    border: none;
    background: none;
    font-size: 0.8rem;
    color: var(--gray-600);
    cursor: pointer;
}

    .role-permission-toggle:hover {
        color: var(--gray-800);
        text-decoration: underline;
    }

    .role-permission-toggle .material-symbols-outlined {
        font-size: 1rem;
    }

/*
    権限登録モーダル：チェックボックスの部分だけをスクロールさせる（レイアウト指摘 No.27）。
    モーダル全体が伸びると、保存ボタンまでスクロールしないと押せなかった。
*/
.role-permission-scroll {
    max-height: 45vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.role-permission-group {
    padding: 0.75rem 0;
    border-top: 0.05rem solid var(--gray-100);
}

.role-permission-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.4rem 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

    .role-permission-item:hover {
        background: var(--gray-50);
    }

.role-permission-check[type="checkbox"],
input.role-permission-check {
    width: auto;
    padding: 0;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.role-permission-body {
    display: flex;
    flex-direction: column;
}

.role-permission-label {
    font-size: 0.85rem;
    color: var(--gray-800);
}

.role-permission-desc {
    font-size: 0.75rem;
    color: var(--gray-400);
}

/*
    β版の札（ロール編集・ロール一覧）。

    左メニューの札と同じ見た目にそろえる。**意味は「まだ作りかけ」だけ**で、
    付けられる・使えるは変わらない（出し分けはシステム管理者の表示設定）。
*/
.role-permission-beta {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border: 0.05rem solid var(--primary);
    border-radius: 0.25rem;
    background: transparent;
    color: var(--primary);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: middle;
}

/*メンバー一覧のロール選択*/
.member-role-select {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    border: 0.05rem solid var(--gray-300);
    border-radius: 0.5rem;
    background: white;
    color: var(--gray-900);
}

    .member-role-select:focus {
        outline: none;
        border-color: var(--gray-600);
    }

/*お知らせ（一覧・詳細）*/
.content.notice-row {
    cursor: pointer;
}

    .content.notice-row.is-unread {
        border-left: 0.214rem solid var(--sky-500) !important;
    }

.notice-detail {
    max-width: 52rem;
}

.notice-detail-head {
    padding-bottom: 0.857rem;
    border-bottom: 0.05rem solid var(--gray-200);
    margin-bottom: 1.143rem;
}

/* 本文（ブロックの並び） */
.notice-body {
    display: flex;
    flex-direction: column;
    gap: 1.143rem;
}

.notice-heading {
    margin: 0;
    padding-bottom: 0.571rem;
    border-bottom: 0.05rem solid var(--gray-200);
    font-size: 1.143rem;
    font-weight: 700;
    color: var(--gray-900);
}

.notice-text {
    margin: 0;
    font-size: 0.929rem;
    line-height: 1.8;
    color: var(--gray-700);
    white-space: pre-wrap;
}

.notice-list {
    display: flex;
    flex-direction: column;
    gap: 0.429rem;
    margin: 0;
    padding-left: 1.286rem;
    font-size: 0.929rem;
    color: var(--gray-700);
}

.notice-table-wrap {
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.571rem;
    overflow: hidden;
}

.notice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.929rem;
}

    .notice-table tr:nth-child(odd) {
        background: var(--gray-50);
    }

    .notice-table th {
        width: 33%;
        padding: 0.571rem 0.857rem;
        border-right: 0.05rem solid var(--gray-200);
        font-weight: 600;
        color: var(--gray-500);
        text-align: left;
        vertical-align: top;
    }

    .notice-table td {
        padding: 0.571rem 0.857rem;
        color: var(--gray-800);
    }

/* 注意書き */
.notice-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.571rem;
    padding: 0.714rem 1rem;
    border-radius: 0.714rem;
    font-size: 0.929rem;
    line-height: 1.7;
}

    .notice-callout .material-symbols-outlined {
        flex-shrink: 0;
        font-size: 1.143rem;
    }

.notice-callout--info {
    background: #f0f9ff;
    border: 0.05rem solid #bae6fd;
    color: #0369a1;
}

.notice-callout--warning {
    background: #fffbeb;
    border: 0.05rem solid #fde68a;
    color: #92400e;
}

.notice-callout--success {
    background: #f0fdf4;
    border: 0.05rem solid #bbf7d0;
    color: #15803d;
}

/* 添付ファイル */
.notice-attachments {
    margin-top: 1.429rem;
    padding-top: 1.143rem;
    border-top: 0.05rem solid var(--gray-200);
}

.notice-attachments-label {
    margin: 0 0 0.571rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
}

.notice-attachment {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    padding: 0.571rem 0.857rem;
    margin-bottom: 0.429rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.571rem;
    color: var(--gray-800);
    text-decoration: none;
    font-size: 0.929rem;
}

    .notice-attachment:hover {
        background: var(--gray-50);
    }

    .notice-attachment .material-symbols-outlined {
        color: var(--gray-400);
        flex-shrink: 0;
    }

.notice-attachment-name {
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-attachment-size {
    flex-shrink: 0;
    font-size: 0.786rem;
    color: var(--gray-400);
}

/* 未読のお知らせ件数バッジ（モック準拠） */
.menu-badge {
    flex-shrink: 0;
    min-width: 1.286rem;
    height: 1.286rem;
    padding: 0 0.286rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.429rem;
    background: var(--danger);
    color: #fff;
    font-size: 0.714rem;
    font-weight: 700;
    line-height: 1;
}

/* ===== ドキュメントの中身（RAG詳細） ===== */

.rag-detail-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--gray-800);
}

.rag-detail-section-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--gray-700);
}

/* 内訳のカード。狭い画面では2列、広い画面では4列に落ち着く */
.rag-detail-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.rag-detail-card {
    background: #fff;
    border: 0.05rem solid var(--gray-200);
    border-radius: 1rem;
    box-shadow: 0 0.05rem 0.25rem var(--gray-300);
    padding: 1rem 1.25rem;
}

.rag-detail-card-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin: 0 0 0.35rem;
}

.rag-detail-card-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--gray-800);
    margin: 0;
    white-space: nowrap;
}

.rag-detail-card-unit {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--gray-500);
}

.rag-detail-attribute {
    width: 6rem;
    min-width: 6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rag-detail-status {
    width: 8rem;
    min-width: 8rem;
}

.rag-detail-user {
    width: 9rem;
    min-width: 9rem;
    color: var(--gray-500);
}

.rag-detail-date {
    width: 10rem;
    min-width: 10rem;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}

/* ファイル名は長くなりがち。折り返さず省略する（行の高さをそろえるため） */
/* 操作列。ボタン1つ分に収める */
.rag-detail-action {
    width: 4rem;
    min-width: 4rem;
}

.rag-detail-file {
    max-width: 26rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* エラーの理由。master-table は white-space:nowrap のため折り返しを戻す */
.rag-detail-error {
    white-space: normal;
    word-break: break-word;
}

/* ===== フィードバック（ヘッダーのボタンとモーダル） ===== */

/* フィードバックとお知らせを隣に並べる。モックと同じ並び */
.navbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* 種類の選択肢。1行1つで、押せることが分かる見た目にする */
.feedback-type-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feedback-type {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0.1rem solid var(--gray-200);
    border-radius: 0.6rem;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
}

    .feedback-type:hover {
        border-color: var(--gray-700);
        background: var(--gray-50);
    }

.feedback-type-icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, var(--gray-600), var(--gray-800));
    color: #fff;
}

    .feedback-type-icon .material-symbols-outlined {
        font-size: 1.15rem;
    }

.feedback-type-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feedback-type-label {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--gray-800);
}

.feedback-type-desc {
    font-size: 0.72rem;
    color: var(--gray-400);
}

.feedback-type-arrow {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--gray-300);
    font-size: 1rem;
}

/* 種類を変更するリンク */
.feedback-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    margin-bottom: 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--primary);
}

    .feedback-back .material-symbols-outlined {
        font-size: 0.9rem;
    }

/* 選んだ種類の表示 */
.feedback-selected {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.625rem;
    border-radius: 0.6rem;
    background: var(--gray-50);
}

    .feedback-selected .feedback-type-icon {
        width: 2rem;
        height: 2rem;
    }

.feedback-selected-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
}

/* 本文。textarea は共通指定で width:100% が当たるため幅の指定は不要 */
.feedback-text {
    resize: none;
    line-height: 1.6;
}

/* 送信できたことを伝える面 */
.feedback-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    text-align: center;
}

.feedback-done-icon {
    width: 3.2rem;
    height: 3.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-50);
    color: var(--success);
}

    .feedback-done-icon .material-symbols-outlined {
        font-size: 1.7rem;
    }

.feedback-done-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--gray-800);
}

.feedback-done-text {
    margin: 0;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.navbar-bell {
    position: relative;
    display: inline-flex;
}

.navbar-bell-badge {
    position: absolute;
    top: -0.143rem;
    right: -0.143rem;
    min-width: 1.143rem;
    height: 1.143rem;
    padding: 0 0.214rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.429rem;
    background: var(--danger);
    color: #fff;
    font-size: 0.643rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* ---------------------------------------------------------------
   音声会話モード（モックの voiceMode）
   チャット画面に重ねる暗い面。表示は data-phase で切り替える
   --------------------------------------------------------------- */
.voice-mode {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    background: #0f172a;
}

.voice-mode-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.857rem 1.143rem;
    border-bottom: 0.05rem solid rgba(255, 255, 255, 0.08);
}

.voice-mode-title {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    color: #fff;
    font-size: 0.929rem;
    font-weight: 700;
}

/* 接続中を示す点。点滅させる */
.voice-mode-dot {
    width: 0.571rem;
    height: 0.571rem;
    border-radius: 50%;
    background: #22c55e;
    animation: voice-pulse 1.5s ease-in-out infinite;
}

.voice-mode-end {
    display: flex;
    align-items: center;
    gap: 0.286rem;
    padding: 0.429rem 0.857rem;
    border: 0;
    border-radius: 0.571rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 0.857rem;
    cursor: pointer;
}

    .voice-mode-end:hover {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

.voice-mode-body {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
    overflow-y: auto;
    padding: 0.857rem 1.143rem;
}

.voice-mode-empty {
    margin: 1.429rem 0 0;
    text-align: center;
    font-size: 0.857rem;
    color: rgba(255, 255, 255, 0.3);
}

.voice-turn {
    display: flex;
}

.voice-turn--user {
    justify-content: flex-end;
}

.voice-turn--agent {
    justify-content: flex-start;
}

.voice-turn-text {
    max-width: 80%;
    padding: 0.571rem 0.857rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.857rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.voice-turn--user .voice-turn-text {
    border-radius: 1rem 1rem 0.286rem 1rem;
    background: rgba(99, 102, 241, 0.5);
}

.voice-turn--agent .voice-turn-text {
    border-radius: 1rem 1rem 1rem 0.286rem;
    background: rgba(255, 255, 255, 0.1);
}

.voice-mode-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.857rem;
    padding: 1.143rem;
    border-top: 0.05rem solid rgba(255, 255, 255, 0.08);
}

.voice-mode-visual {
    height: 3.429rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.429rem;
}

.voice-wave {
    display: none;
    align-items: center;
    gap: 0.429rem;
    height: 100%;
}

.voice-wave-bar {
    width: 0.286rem;
    border-radius: 0.143rem;
}

/* 聞き取り中の波形 */
.voice-wave--listening .voice-wave-bar {
    background: var(--indigo-500, #6366f1);
    animation: voice-wave 0.7s ease-in-out infinite;
}

/* 読み上げ中の波形 */
.voice-wave--speaking .voice-wave-bar {
    background: #22c55e;
    animation: voice-wave 0.5s ease-in-out infinite;
}

/* 待機中は動かさない */
.voice-wave--idle .voice-wave-bar {
    height: 0.429rem;
    background: rgba(255, 255, 255, 0.2);
}

    .voice-wave--idle .voice-wave-bar:nth-child(3) {
        height: 0.857rem;
    }

/* 波形の高さは本数ごとにずらす（モックの wave1〜5 と同じ見え方） */
.voice-wave-bar:nth-child(1),
.voice-wave-bar:nth-child(9) {
    height: 0.429rem;
    animation-delay: 0s;
}

.voice-wave-bar:nth-child(2),
.voice-wave-bar:nth-child(8) {
    height: 0.857rem;
    animation-delay: 0.08s;
}

.voice-wave-bar:nth-child(3),
.voice-wave-bar:nth-child(7) {
    height: 1.286rem;
    animation-delay: 0.16s;
}

.voice-wave-bar:nth-child(4),
.voice-wave-bar:nth-child(6) {
    height: 1.714rem;
    animation-delay: 0.24s;
}

.voice-wave-bar:nth-child(5) {
    height: 2.143rem;
    animation-delay: 0.32s;
}

/* 回答待ちの回転 */
.voice-spinner {
    display: none;
    width: 2.286rem;
    height: 2.286rem;
    border: 0.214rem solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--indigo-500, #6366f1);
    border-radius: 50%;
    animation: voice-spin 0.8s linear infinite;
}

.voice-mode-status {
    margin: 0;
    min-height: 1.286rem;
    text-align: center;
    font-size: 0.857rem;
    color: rgba(255, 255, 255, 0.5);
}

.voice-mode-interrupt {
    display: none;
    padding: 0.5rem 1.286rem;
    border: 0.05rem solid rgba(255, 255, 255, 0.2);
    border-radius: 1.429rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 0.857rem;
    cursor: pointer;
}

    .voice-mode-interrupt:hover {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
    }

.voice-mode-error {
    margin: 0;
    text-align: center;
    font-size: 0.857rem;
    color: #fca5a5;
}

/* 状態ごとの出し分け */
.voice-mode[data-phase="listening"] .voice-wave--listening,
.voice-mode[data-phase="speaking"] .voice-wave--speaking,
.voice-mode[data-phase="idle"] .voice-wave--idle,
.voice-mode[data-phase="waitnext"] .voice-wave--idle,
.voice-mode[data-phase="stopped"] .voice-wave--idle {
    display: flex;
}

.voice-mode[data-phase="thinking"] .voice-spinner {
    display: block;
}

.voice-mode[data-phase="speaking"] .voice-mode-interrupt {
    display: block;
}

@keyframes voice-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

@keyframes voice-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes voice-wave {
    0%, 100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.45);
    }
}

/* ---------------------------------------------------------------
   パスワード再設定（本人確認 → 認証コード → 新しいパスワード）
   --------------------------------------------------------------- */
.reset-lead {
    margin-bottom: 1rem;
}

.reset-lead-title {
    margin: 0 0 0.286rem;
    font-size: 1.071rem;
    font-weight: 700;
    color: var(--gray-900);
}

.reset-lead-text {
    margin: 0;
    font-size: 0.929rem;
    line-height: 1.5;
    color: var(--gray-500);
}

.reset-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.857rem;
    margin-bottom: 1rem;
}

/* 送信方法の選択 */
.reset-methods {
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
    margin-bottom: 1rem;
}

.reset-method {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    margin: 0;
    padding: 0.857rem;
    border: 0.143rem solid var(--gray-200);
    border-radius: 0.857rem;
    background: #fff;
    cursor: pointer;
}

    .reset-method.is-selected {
        border-color: var(--gray-800);
        background: var(--gray-50);
    }

    /* 準備中の手段（SMS）。押せないことが分かるようにする */
    .reset-method.is-disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

.reset-method-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.429rem;
    height: 2.429rem;
    border-radius: 0.643rem;
    background: var(--gray-100);
    color: var(--gray-400);
}

.reset-method.is-selected .reset-method-icon {
    background: linear-gradient(135deg, var(--gray-600), var(--gray-800));
    color: #fff;
}

.reset-method-label {
    font-size: 0.929rem;
    font-weight: 600;
    color: var(--gray-900);
}

.reset-method-note {
    margin-left: 0.429rem;
    padding: 0.071rem 0.429rem;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 0.714rem;
    font-weight: 700;
}

/* 認証コードの入力欄 */
input.reset-code-input {
    text-align: center;
    font-size: 1.429rem;
    font-weight: 700;
    letter-spacing: 0.3em;
}

.reset-information {
    margin: 0 0 0.857rem;
    padding: 0.571rem 0.857rem;
    border: 0.05rem solid var(--green-100);
    border-radius: 0.571rem;
    background: var(--green-100);
    color: var(--green-700);
    font-size: 0.857rem;
    font-weight: 600;
}

.reset-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

    .reset-links form {
        margin: 0;
    }

/* 残り時間の表示 */
.reset-timer {
    position: relative;
    flex-shrink: 0;
    width: 3.143rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--success);
}

    .reset-timer.is-warning {
        color: var(--amber-500);
    }

    .reset-timer.is-danger {
        color: var(--danger);
    }

.reset-timer-ring {
    width: 3.143rem;
    height: 3.143rem;
    transform: rotate(-90deg);
}

.reset-timer-track {
    fill: none;
    stroke: var(--gray-200);
    stroke-width: 3;
}

.reset-timer-value {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.reset-timer-icon {
    position: absolute;
    top: 0.929rem;
    font-size: 1.143rem;
    color: currentColor;
}

.reset-timer-text {
    margin-top: 0.143rem;
    font-size: 0.786rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: currentColor;
}

/* パスワード欄の表示切り替え */
.reset-password-field {
    position: relative;
}

    .reset-password-field input {
        padding-right: 2.571rem;
    }

.reset-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.643rem;
    transform: translateY(-50%);
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gray-400);
    cursor: pointer;
}

    .reset-password-toggle:hover {
        color: var(--gray-600);
    }

/* 完了・期限切れの表示 */
.reset-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 0.571rem 0;
}

.reset-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.714rem;
    height: 3.714rem;
    border-radius: 50%;
}

    .reset-result-icon .material-symbols-outlined {
        font-size: 1.857rem;
    }

.reset-result-icon--success {
    background: var(--green-100);
    color: var(--success);
}

.reset-result-icon--danger {
    background: #fef2f2;
    color: var(--danger);
}

.reset-result-title {
    margin: 0 0 0.429rem;
    font-size: 1.071rem;
    font-weight: 700;
    color: var(--gray-900);
}

.reset-result-text {
    margin: 0;
    font-size: 0.929rem;
    line-height: 1.6;
    color: var(--gray-500);
}

/* ログイン画面のロック表示 */
.signin-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 0.571rem 0;
}

.signin-error {
    margin: 0.571rem 0 0;
    font-size: 0.857rem;
    color: var(--danger);
}

/* ---------------------------------------------------------------
   タスクの共有（モーダル）
   --------------------------------------------------------------- */
.icon-base.success-icon {
    background: var(--green-100);
    color: var(--success);
}

.share-task-target {
    padding: 0.714rem 0.857rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.714rem;
    background: var(--gray-50);
}

.share-task-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.429rem;
    margin: 0.571rem 0;
}

.share-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
    padding: 0.286rem 0.714rem;
    border-radius: 1.429rem;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 0.857rem;
    font-weight: 500;
}

    .share-task-chip button {
        display: flex;
        padding: 0;
        border: 0;
        background: none;
        color: var(--gray-400);
        cursor: pointer;
    }

        .share-task-chip button:hover {
            color: var(--gray-600);
        }

    .share-task-chip .material-symbols-outlined {
        font-size: 0.929rem;
    }

.share-task-members {
    margin-top: 0.571rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.714rem;
    overflow: hidden;
    max-height: 17rem;
    overflow-y: auto;
}

.share-task-member {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.714rem;
    padding: 0.643rem 0.857rem;
    border: 0;
    border-bottom: 0.05rem solid var(--gray-100);
    background: #fff;
    text-align: left;
    cursor: pointer;
}

    .share-task-member:last-child {
        border-bottom: 0;
    }

    .share-task-member:hover {
        background: var(--gray-50);
    }

    .share-task-member .material-symbols-outlined {
        margin-left: auto;
        color: var(--gray-400);
        font-size: 1.071rem;
    }

.share-task-member-name {
    font-size: 0.929rem;
    color: var(--gray-700);
}

.share-task-member-department {
    margin-left: auto;
    font-size: 0.786rem;
    color: var(--gray-400);
}

/* 共有できたあとの表示 */
.share-task-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.571rem;
    padding: 1.429rem 0.571rem;
    text-align: center;
}

/* ---------------------------------------------------------------
   個人設定（プロフィール・セキュリティ）
   --------------------------------------------------------------- */
.security-current-email {
    flex: 1 1 0%;
    font-size: 0.929rem;
    color: var(--gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 変更できたことを伝える表示 */
.security-done {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    padding: 0.714rem 1rem;
    border: 0.05rem solid #bbf7d0;
    border-radius: 0.714rem;
    background: #f0fdf4;
    color: var(--green-700);
    font-size: 0.929rem;
    font-weight: 600;
}

    .security-done .material-symbols-outlined {
        flex-shrink: 0;
        color: var(--success);
    }

input.security-code-input {
    max-width: 12rem;
}

/* 自分のQRコード */
.my-qr-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.429rem;
    text-align: center;
}

.my-qr-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.286rem;
    width: 11rem;
    height: 11rem;
    margin-bottom: 0.571rem;
    border: 0.143rem dashed var(--gray-300);
    border-radius: 0.857rem;
    background: var(--gray-50);
    color: var(--gray-400);
}

    .my-qr-code .material-symbols-outlined {
        font-size: 3.429rem;
    }

/* アカウント削除の確認 */
.delete-account-confirm {
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
    margin-top: 0.857rem;
    padding: 1rem;
    border: 0.05rem solid #fecaca;
    border-radius: 0.714rem;
    background: #fef2f2;
}

    .delete-account-confirm input {
        background: #fff;
    }

/* ---------------------------------------------------------------
   回答のMarkdown表示・参照元・生成ファイル
   --------------------------------------------------------------- */

/* Markdownへ変換した後は改行を保持しない（変換で <p>/<br> になっている）。
   pre-wrap のままだと元の改行が二重に効いて隙間だらけになる */
.message-content.message-markdown {
    white-space: normal;
}

    .message-content.message-markdown > :first-child {
        margin-top: 0;
    }

    .message-content.message-markdown > :last-child {
        margin-bottom: 0;
    }

    .message-content.message-markdown p {
        margin: 0 0 0.571rem;
    }

    .message-content.message-markdown h1,
    .message-content.message-markdown h2,
    .message-content.message-markdown h3,
    .message-content.message-markdown h4,
    .message-content.message-markdown h5,
    .message-content.message-markdown h6 {
        margin: 0.857rem 0 0.429rem;
        font-weight: 700;
        line-height: 1.4;
    }

    .message-content.message-markdown h1 {
        font-size: 1.214rem;
    }

    .message-content.message-markdown h2 {
        font-size: 1.143rem;
    }

    .message-content.message-markdown h3 {
        font-size: 1.071rem;
    }

    .message-content.message-markdown h4,
    .message-content.message-markdown h5,
    .message-content.message-markdown h6 {
        font-size: 1rem;
    }

    .message-content.message-markdown ul,
    .message-content.message-markdown ol {
        margin: 0 0 0.571rem;
        padding-left: 1.429rem;
    }

    .message-content.message-markdown li {
        margin-bottom: 0.214rem;
    }

    .message-content.message-markdown blockquote {
        margin: 0 0 0.571rem;
        padding: 0.429rem 0.857rem;
        border-left: 0.214rem solid var(--gray-300);
        color: var(--gray-600);
    }

    .message-content.message-markdown hr {
        margin: 0.857rem 0;
        border: 0;
        border-top: 0.05rem solid var(--gray-300);
    }

    .message-content.message-markdown code {
        padding: 0.071rem 0.286rem;
        border-radius: 0.286rem;
        background: rgba(0, 0, 0, 0.06);
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        font-size: 0.929em;
    }

    /* コードブロックは横に長くなるため、吹き出しの中で横スクロールさせる */
    .message-content.message-markdown pre {
        margin: 0 0 0.571rem;
        padding: 0.714rem 0.857rem;
        border-radius: 0.571rem;
        background: var(--gray-900);
        color: var(--gray-100);
        overflow-x: auto;
    }

        .message-content.message-markdown pre code {
            padding: 0;
            background: none;
            color: inherit;
        }

    /* 表も同様に、はみ出す場合は表だけをスクロールさせる */
    .message-content.message-markdown table {
        display: block;
        width: max-content;
        max-width: 100%;
        margin: 0 0 0.571rem;
        border-collapse: collapse;
        overflow-x: auto;
        font-size: 0.929rem;
    }

    .message-content.message-markdown th,
    .message-content.message-markdown td {
        padding: 0.357rem 0.714rem;
        border: 0.05rem solid var(--gray-300);
        text-align: left;
    }

    .message-content.message-markdown th {
        background: rgba(0, 0, 0, 0.04);
        font-weight: 700;
    }

    .message-content.message-markdown a {
        color: var(--sky-500);
        text-decoration: underline;
        word-break: break-all;
    }

/* 利用者側の吹き出し（濃い背景）でも読めるようにする */
.message-row--right .message-content.message-markdown code,
.message-row--right .message-content.message-markdown th {
    background: rgba(255, 255, 255, 0.2);
}

.message-row--right .message-content.message-markdown a {
    color: #fff;
}

/* 参照元（モックの水色のパネル） */
.message-references {
    margin-top: 0.429rem;
    padding: 0.571rem 0.857rem;
    border: 0.05rem solid #bae6fd;
    border-radius: 0.714rem;
    background: #f0f9ff;
}

.message-references-label {
    margin: 0 0 0.429rem;
    font-size: 0.714rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--sky-500);
}

.message-reference {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    margin-bottom: 0.286rem;
    font-size: 0.786rem;
    color: #0369a1;
}

    .message-reference:last-child {
        margin-bottom: 0;
    }

    .message-reference .material-symbols-outlined {
        flex-shrink: 0;
        color: var(--sky-500);
    }

    .message-reference a {
        color: #0369a1;
        text-decoration: underline;
        word-break: break-all;
    }

/* エージェントが生成したファイル */
.message-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.429rem;
    margin-top: 0.429rem;
}

.message-file {
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
    max-width: 100%;
    padding: 0.286rem 0.643rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.571rem;
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 0.786rem;
}

    .message-file .material-symbols-outlined {
        flex-shrink: 0;
        color: var(--gray-400);
    }

.message-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    生成ファイルの札。
    名前の側が「開く」、右の矢印が「保存」。押せる場所を2つに分けている。
*/
.message-file {
    padding: 0;
    overflow: hidden;
}

.message-file-open,
.message-report-open,
.message-file-download {
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
    padding: 0.286rem 0.643rem;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    min-width: 0;
}

.message-file-download {
    /* 境目を1本だけ引く。札そのものの枠は .message-file が持っている */
    border-left: 0.05rem solid var(--gray-200);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    flex: none;
}

    .message-file-open:hover,
    .message-report-open:hover,
    .message-file-download:hover {
        background: var(--gray-100);
        color: var(--gray-900);
    }

/*
    帳票モードで作った帳票の札（2026-09-29）。帳票はファイルではなく表示画面なので、
    押すと別のタブで帳票の画面を開く（印刷もそこから）。生成ファイルと見分けが付くよう色を付ける。
*/
.message-file--report {
    border-color: var(--indigo-100);
    background: var(--indigo-50);
    color: var(--primary);
    font-weight: 700;
}

    .message-file--report .material-symbols-outlined {
        color: var(--primary);
    }

    .message-report-open:hover {
        text-decoration: none;
    }

/*
    生成ファイルのプレビュー。画面にかぶせて出す。

    Excel・PowerPoint・Wordはブラウザーでは開けない。開ける形式
    （画像・PDF・文字もの）だけ中身を出し、それ以外は保存へ誘導する。
*/
.file-preview {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.5);
}

.file-preview-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 60rem;
    height: 100%;
    max-height: 45rem;
    min-height: 0;
    background: white;
    border-radius: 1rem;
    overflow: hidden;
}

.file-preview-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.857rem 1.143rem;
    border-bottom: 0.05rem solid var(--gray-200);
    flex: none;
}

.file-preview-name {
    font-weight: 600;
    margin-right: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview-download {
    flex: none;
}

.file-preview-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1.143rem;
    background: var(--gray-50);
    display: flex;
    flex-direction: column;
}

/* 画像は枠に収める。原寸で出すと、図表は画面からはみ出す */
.file-preview-image {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
    background: white;
}

.file-preview-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    background: white;
}

.file-preview-text {
    margin: 0;
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
    font-size: 0.857rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.file-preview-table-scroll {
    overflow: auto;
    background: white;
    border-radius: 0.5rem;
}

.file-preview-table {
    margin: 0;
    font-size: 0.857rem;
    white-space: nowrap;
}

    .file-preview-table th {
        position: sticky;
        top: 0;
        background: var(--gray-100);
    }

.file-preview-notice {
    margin: auto;
    color: var(--gray-500);
    text-align: center;
}

/*
    PCのファイルを読む承認

    「読めなかった」ではなく「押せば読める」ことが分かる見た目にする。
    エラーの赤ではなく注意の色にしているのはそのため。
*/
.approval-box {
    margin-top: 0.571rem;
    padding: 0.643rem 0.786rem;
    border: 0.05rem solid var(--amber-100);
    border-left: 0.214rem solid var(--amber-400);
    border-radius: 0.571rem;

    /* --amber-50 は定義していない。Debugの印（.signin-debug__label）と同じ地色に合わせる */
    background: #fffbeb;
}

.approval-lead {
    margin: 0 0 0.429rem;
    font-size: 0.857rem;
    font-weight: 600;
    color: var(--gray-900);
}

.approval-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.429rem;
    margin-bottom: 0.429rem;
}

/* パスは長い。折り返させて、ボタンを画面外へ押し出さない */
.approval-path {
    flex: 1 1 14rem;
    min-width: 0;
    font-size: 0.786rem;
    color: var(--gray-700);
    word-break: break-all;
}

.approval-item .btn {
    flex-shrink: 0;
    padding: 0.214rem 0.714rem;
    font-size: 0.786rem;
}

.approval-note,
.approval-done {
    margin: 0;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.approval-done {
    margin-bottom: 0.429rem;
}

/* 読み上げ音声の選択（個人設定） */
select.voice-select {
    width: auto;
    min-width: 12rem;
    flex-shrink: 0;
}

/* 要約詳細：決定事項 */
.summary-decisions {
    margin: 0;
    padding-left: 1.2rem;
}

    .summary-decisions li {
        margin-bottom: 0.35rem;
        line-height: 1.6;
    }

    .summary-decisions li:last-child {
        margin-bottom: 0;
    }

/*
   要約詳細：文字起こしの全文
   長いので details で閉じておく。開く部分は行として押せるようにする
*/
.summary-transcript-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

    /* 既定の三角は消して、右端に開閉の向きを出す */
    .summary-transcript-toggle::-webkit-details-marker {
        display: none;
    }

    /* アイコンフォントの合字に頼らない。読み込み前でも文字が化けないようにする */
    .summary-transcript-toggle::after {
        content: "▾";
        margin-left: auto;
        color: var(--gray-400);
    }

.summary-transcript[open] .summary-transcript-toggle::after {
    content: "▴";
}

.summary-transcript-body {
    margin: 1rem 0 0;
    padding: 0.75rem;
    max-height: 24rem;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.8;
    background: var(--gray-50);
    border-radius: 0.5rem;
    color: var(--gray-700);
}

/* ドキュメントRAG：表データの分析結果 */
.rag-profile-summary {
    white-space: pre-wrap;
    color: var(--gray-700);
}

/* 組織情報：プラン欄と、プラン変更の選択肢 */
.org-plan-row {
    align-items: center;
}

    .org-plan-row input[type="text"] {
        flex: 1 1 0%;
        min-width: 0;
    }

.org-plan-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.org-plan-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 0.1rem solid var(--gray-200);
    border-radius: 0.6rem;
    cursor: pointer;
    margin: 0;
}

    .org-plan-option.select {
        border-color: var(--gray-800);
        background: var(--gray-50);
    }

    /*
        レイアウト指摘 No.32：モーダルのレイアウトが大きく崩れていた原因。
        共通の input, select, textarea { width: 100%; padding: 0.75rem 1rem; ... } が
        ラジオにも当たり、丸ではなく全幅の入力欄として描かれてプラン名を押し出していた。
        チェックボックス（.role-permission-check）と同じように素の大きさへ戻す。
    */
    .org-plan-option input[type="radio"] {
        width: auto;
        padding: 0;
        margin-top: 0.2rem;
        flex-shrink: 0;
    }

    .org-plan-option:hover {
        border-color: var(--gray-400);
    }

.org-plan-option-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.org-plan-option-head {
    display: flex;
    align-items: center;
}

/*
    クレジット追加：口数に応じた合計（レイアウト指摘 No.30）。
    利用枠の枠（.org-quota-footer）と同じ見た目にそろえている。
*/
.org-credit-total {
    padding: 0.75rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.6rem;
    background: var(--gray-50);
}

/* 文字サイズの選択（個人設定）。要約の公開設定と同じ見た目に揃えている */
.font-size-options {
    gap: 0.4rem;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.font-size-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 4.2rem;
    padding: 0.6rem 0.4rem;
    border: 0.1rem solid var(--gray-200);
    border-radius: 0.6rem;
    background: white;
    cursor: pointer;
    color: var(--gray-500);
}

    .font-size-option.select {
        border-color: var(--gray-800);
        background: var(--gray-50);
        color: var(--gray-900);
        font-weight: bold;
    }

/* 見本の「あ」。選んだときの大きさの違いがその場で分かるようにする */
.font-size-option-sample {
    line-height: 1;
}

.font-size-option-sample-1 {
    font-size: 0.85rem;
}

.font-size-option-sample-2 {
    font-size: 0.925rem;
}

.font-size-option-sample-3 {
    font-size: 1rem;
}

.font-size-option-sample-4 {
    font-size: 1.125rem;
}

.font-size-option-sample-5 {
    font-size: 1.25rem;
}

.font-size-option-label {
    font-size: 0.75rem;
    white-space: nowrap;
}

/* 聞き取り途中の吹き出しは確定前だと分かるようにする */
.voice-turn-text.is-partial {
    opacity: 0.6;
    font-style: italic;
}

/* 音声会話で残った音声（話した内容・読み上げた音声） */
.message-audios {
    display: flex;
    flex-direction: column;
    gap: 0.286rem;
    margin-top: 0.429rem;
}

.message-audio {
    width: 100%;
    max-width: 18rem;
    height: 2.286rem;
}

/* ---------------------------------------------------------------
   エージェントの作成・編集

   帳票フォーマット（builder-page）・ワークフロー（wf-page）と同じ組み方。
   上段のカードに情報と操作、下段を「左：設定／右：プレビュー」の2列にする。
   以前は幅を w-40 / w-60（!important）で決めていたため、狭い画面でも
   2列のまま潰れ、メディアクエリでも上書きできなかった。flexで配分する。
   --------------------------------------------------------------- */
.agent-page {
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
    padding-top: 0.857rem;
    padding-bottom: 0.857rem;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.content.agent-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.857rem;
    padding: 0.857rem 1rem;
    flex-shrink: 0;
}

.agent-head-info {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    min-width: 0;
}

.agent-head-version {
    font-size: 0.857rem;
    color: var(--gray-600);
    white-space: nowrap;
}

/* 操作は右端へ寄せる（他の編集画面と同じ位置） */
.agent-head-actions {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    margin-left: auto;
}

.agent-body {
    display: flex;
    gap: 0.571rem;
    flex: 1;
    min-height: 0;
}

/* 左：設定。項目が増えるため枠の中でスクロールさせる */
.content.agent-editor {
    flex: 0 0 26rem;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
}

.agent-panel-title {
    margin: 0 0 0.857rem;
    font-size: 0.786rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

/* 右：プレビュー。チャットと注記を縦に積む */
.agent-preview {
    display: flex;
    flex-direction: column;
    gap: 0.286rem;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

    .agent-preview .content.chat-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

        /*
            チャット本体の高さは既定で 26rem の決め打ち。
            ここでは列の余りを受け取らせたいため auto へ戻して flex に任せる。
        */
        .agent-preview .chat-body {
            height: auto;
            min-height: 0;
        }

/*
    ナレッジの一覧。
    項目に .content が付いており、そのままだとカードの中にカードが入って影が二重になる。
    設定パネルの中では枠線だけの平らな見た目にそろえる（パレットの項目と同じ扱い）。
*/
/*
    ツールを選ぶモーダル。エージェント一覧と同じカードで並べる。
    文字だけの一覧では、何ができるツールなのかが読むまで分からなかった。
*/
/*
    区切り（通常／PCとの連携／外部MCP連携）。
    平らに並べると、クラウドで動くものと、利用者のPCが要るものと、
    会社が登録した外部のシステムが同じ見た目で混ざる。
*/
.tool-group + .tool-group {
    margin-top: 1.429rem;
    padding-top: 1.143rem;
    border-top: 0.0625rem solid var(--gray-200);
}

.tool-group-title {
    font-size: 0.929rem;
    font-weight: 700;
    margin-bottom: 0.286rem;
}

/* 区切りの下の一行。見出しとカードのあいだに置く */
.tool-group-note {
    font-size: 0.857rem;
    color: var(--gray-600);
    margin-bottom: 0.571rem;
}

/* 一行が無い区切りは、見出しとカードのあいだを空けすぎない */
.tool-group-title:last-of-type {
    margin-bottom: 0.571rem;
}

.tool-select-space {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.857rem;
}

.content.tool-card {
    padding: 1.143rem;
    cursor: pointer;
    text-align: left;
    /*
        カードは button で、button は中身を上下中央に置く。
        グリッドの同じ行では背の高いカード（説明の長いツール）に高さがそろうため、
        説明の短いツールだけアイコンと名前が下がって並びがずれていた。
        中身を上から積んで、どのカードでもアイコンと名前を同じ高さに置く
    */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /* button の既定の見た目を消し、.content のカードに戻す */
    font: inherit;
    color: inherit;
    /* 選ぶと枠の太さが変わると、カードの幅がずれて並びが動く。太さは変えず色だけ変える */
    border: 0.125rem solid var(--gray-200);
    transition: border-color 0.12s, background 0.12s;
}

    .content.tool-card:hover {
        background: var(--gray-50);
    }

    /* 入っているもの。枠の色と左上のアイコンで示す */
    .content.tool-card.is-selected {
        border-color: var(--primary);
        background: var(--gray-50);
    }

.icon-base.tool-card-icon {
    width: 3.143rem;
    border-radius: 0.857rem;
    background: var(--gray-100);
    color: var(--gray-600);
    /* 名前が折り返してもアイコンは潰さない */
    flex: none;
}

.content.tool-card.is-selected .icon-base.tool-card-icon {
    background: var(--primary);
    color: white;
}

/*
    1行目はアイコンと名前だけ。説明は次の行へ、カードの幅いっぱいで置く。
    アイコンの右に説明まで入れると、字数の多いツールで1行が十数文字になっていた。
*/
.tool-card-head {
    align-items: center;
    gap: 0.571rem;
    margin-bottom: 0.571rem;
}

.tool-card-name {
    font-size: 1rem;
    /* 名前と印のあいだの余りは名前が受け取る（印は右端に置く） */
    flex: 1 1 auto;
    min-width: 0;
    /* 長い名前はカードの中で折り返す。切ると別のツールと見分けられない */
    overflow-wrap: anywhere;
}

/*
    入っているときだけ出す印。
    場所を空けたままにしておき、出たり消えたりで名前の位置がずれないようにする
*/
.tool-card-check {
    color: var(--primary);
    visibility: hidden;
    flex: none;
}

.content.tool-card.is-selected .tool-card-check {
    visibility: visible;
}

.tool-card-description {
    font-size: 0.857rem;
    line-height: 1.5;
    /* アイコンのぶんだけ下げず、カードの左端から始める */
    width: 100%;
    /*
        説明に入れた改行をそのまま出す。
        「何ができるか」と「気をつけること」を続けて書くと一続きの塊になって読まれない。
        pre-line なので、行の中の折り返しはこれまでどおり効く
    */
    white-space: pre-line;
}

/*
    「その操作には権限が要る」ことをその場に出す一行。
    ボタンを消すだけだと、機能が無いのか権限が無いのかが見分けられない。
*/
.permission-note {
    display: flex;
    align-items: center;
    color: var(--gray-500);
}

    .permission-note .material-symbols-outlined {
        flex: none;
    }

/*
    ツール・ナレッジの見出しの右に置く［設定］［追加］。

    btn-sm でも 8px/14px の余白があり、隣の見出し（1行）より背が高くなって
    行そのものが押し広げられていた。見出しの高さに収まるところまで詰める。
*/
.btn.agent-section-add {
    padding: 0.286rem 0.714rem;
    font-size: 0.857rem;
    line-height: 1.3;
}

/*
    使えるツールの一覧。ナレッジと同じ見た目にそろえる。
    隣り合う2つの設定で枠の形が違うと、別の種類のものに見えてしまう。
    ツールは2行目（kb-… の名前）を持たないため、1行だけになる。
*/
.agent-editor .content.tool-content {
    border-radius: 0.5rem;
    box-shadow: none;
    border: 0.05rem solid var(--gray-200);
    background: var(--gray-50);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.286rem 0.571rem;
}

.agent-editor .content.knowledge-content {
    border-radius: 0.5rem;
    box-shadow: none;
    border: 0.05rem solid var(--gray-200);
    background: var(--gray-50);
    /*
        1行目にアイコンと表示名、2行目に kb-… の名前を置く。
        横一列だと、この枠の幅（約17rem）に対して kb-… の名前が長く、
        しかも .badge-main が nowrap で縮まないため、
        表示名だけが数文字ずつ3行に折り返されていた。
    */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.286rem 0.571rem;
}

.agent-editor .knowledge-content-icon {
    color: var(--gray-500);
}

.agent-editor .knowledge-content-title {
    font-weight: bold;
    color: var(--gray-700);
    /* 長い表示名は途中で折り返す。切ると別のナレッジと見分けられない */
    overflow-wrap: anywhere;
}

/*
    kb-… の名前。2行目に置き、幅を超える分は折り返す。
    末尾を省略すると、GUIDのどのナレッジか分からなくなる
*/
.agent-editor .knowledge-content-name {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

/*
    設定パネル自体がスクロールするため、この中でさらに高さを切らない。
    切るとスクロールバーが二重になり、どちらを動かせばよいか分からなくなる。
*/
.agent-editor .knowledge-content-space {
    max-height: none;
    overflow-y: visible;
}

/* プレビューの見出し。何ができる場かを添えておく */
.agent-preview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.286rem 0.571rem;
    flex-shrink: 0;
}

/*
    ナレッジを参照しない旨の注意。
    ここで確かめられるのは「モデル＋指示」までなので、そう伝わるようにする。
    黙っていると「ナレッジが効いていない」という不具合に見えてしまう。
*/
.agent-preview-caution {
    display: inline-flex;
    align-items: center;
    gap: 0.214rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.agent-preview-note {
    margin: 0;
    text-align: center;
    font-size: 0.786rem;
    color: var(--gray-400);
    flex-shrink: 0;
}

/* 狭い画面では2列をやめて縦に積む（区切りは帳票フォーマットと同じ1200px） */
@media (max-width: 1200px) {
    .agent-body {
        flex-direction: column;
        overflow-y: auto;
    }

    .content.agent-editor {
        flex: 0 0 auto;
        overflow-y: visible;
    }

    .agent-preview {
        flex: 0 0 auto;
    }

        /* 縦に積むとチャットが潰れるため、最低の高さを確保する */
        .agent-preview .content.chat-content {
            flex: 0 0 auto;
            min-height: 24rem;
        }

    .agent-page {
        overflow: visible;
    }

    /* 縦に積んだぶんは枠ごとスクロールさせる */
    .full-screen-page.is-fixed .render-body-full-screen:has(.agent-page) {
        overflow-y: auto;
    }
}

/* ---------------------------------------------------------------
   帳票フォーマットのビルダー
   モックの3分割（パーツ／用紙／設定）を既存の content の中に収めている
   --------------------------------------------------------------- */
.builder-page {
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
    padding-top: 0.857rem;
}

.content.builder-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.857rem;
    padding: 0.857rem 1rem;
}

.builder-head-fields {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr) minmax(10rem, 1fr);
    gap: 0.857rem;
    flex: 1 1 30rem;
}

.builder-head-actions {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    margin-left: auto;
}

.content.builder-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.857rem;
    padding: 0.571rem 1rem;
}

.builder-tool {
    display: flex;
    align-items: center;
    gap: 0.429rem;
}

    .builder-tool .form-control {
        width: auto;
        min-width: 8rem;
    }

.builder-tool-label {
    margin: 0;
    font-size: 0.786rem;
    font-weight: 700;
    color: var(--gray-500);
    white-space: nowrap;
}

.builder-tool-group {
    display: flex;
    align-items: center;
    gap: 0.286rem;
}

.builder-divider {
    width: 0.05rem;
    height: 1.429rem;
    background: var(--gray-200);
}

.builder-zoom {
    min-width: 3.429rem;
    text-align: center;
    font-size: 0.857rem;
    font-variant-numeric: tabular-nums;
    color: var(--gray-600);
}

/* 押した状態のトグル */
.btn.is-on {
    border-color: var(--indigo-500);
    background: var(--indigo-50);
    color: var(--indigo-700);
}

/* 縦横の切り替え */
.builder-seg {
    display: inline-flex;
    gap: 0.143rem;
    padding: 0.143rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.571rem;
    background: var(--gray-50);
}

    .builder-seg button {
        display: inline-flex;
        align-items: center;
        gap: 0.286rem;
        padding: 0.286rem 0.643rem;
        border: 0;
        border-radius: 0.429rem;
        background: none;
        color: var(--gray-500);
        font-size: 0.857rem;
        cursor: pointer;
    }

        .builder-seg button[aria-pressed="true"] {
            background: #fff;
            color: var(--indigo-600);
            font-weight: 600;
            box-shadow: 0 0.05rem 0.15rem var(--gray-300);
        }

/* 3分割 */
.builder-body {
    display: flex;
    gap: 0.571rem;
    align-items: flex-start;
}

.content.builder-palette,
.content.builder-inspector {
    flex: 0 0 14rem;
    max-height: 44rem;
    overflow-y: auto;
    padding: 0.857rem;
}

.content.builder-inspector {
    flex-basis: 17rem;
}

.builder-panel-title {
    margin: 0 0 0.571rem;
    font-size: 0.786rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

.builder-panel-sub {
    margin: 0.857rem 0 0.429rem;
    font-size: 0.786rem;
    font-weight: 700;
    color: var(--gray-500);
}

.builder-palette-group + .builder-palette-group {
    margin-top: 0.857rem;
}

.builder-palette-label {
    margin: 0 0 0.286rem;
    font-size: 0.714rem;
    font-weight: 700;
    color: var(--gray-400);
}

.builder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.286rem;
}

.builder-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
    padding: 0.357rem 0.571rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.571rem;
    background: #fff;
    color: var(--gray-700);
    font-size: 0.786rem;
    cursor: grab;
}

    .builder-chip:hover {
        border-color: var(--indigo-300);
        background: var(--indigo-50);
        color: var(--indigo-700);
    }

/* 用紙 */
.builder-canvas {
    flex: 1 1 0%;
    min-width: 0;
    max-height: 44rem;
    overflow: auto;
    padding: 1.429rem;
    border-radius: 1rem;
    background: var(--gray-200);
}

.builder-paper-wrap {
    margin: 0 auto;
}

.builder-paper {
    position: relative;
    transform-origin: top left;
    background: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
    touch-action: none;
}

/* マス目は背景で描く（要素を並べると重い） */
.builder-paper-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, #e2e8f2 0.05rem, transparent 0.05rem),
        linear-gradient(to bottom, #e2e8f2 0.05rem, transparent 0.05rem),
        linear-gradient(to right, #c9d4e6 0.05rem, transparent 0.05rem),
        linear-gradient(to bottom, #c9d4e6 0.05rem, transparent 0.05rem);
}

.builder-paper-margin {
    position: absolute;
    pointer-events: none;
    border: 0.05rem dashed var(--indigo-200);
}

/* 置いた部品 */
.builder-node {
    position: absolute;
    overflow: visible;
    cursor: move;
}

.builder-node-body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--gray-900);
}

.builder-node.is-selected {
    outline: 0.143rem solid var(--indigo-500);
    outline-offset: 0.071rem;
}

.builder-paper.is-preview .builder-node {
    cursor: default;
}

/* 大きさを変えるつまみ */
.builder-handle {
    position: absolute;
    width: 0.571rem;
    height: 0.571rem;
    background: #fff;
    border: 0.107rem solid var(--indigo-500);
    border-radius: 0.143rem;
}

.builder-handle--nw { top: -0.286rem; left: -0.286rem; cursor: nwse-resize; }
.builder-handle--n { top: -0.286rem; left: 50%; margin-left: -0.286rem; cursor: ns-resize; }
.builder-handle--ne { top: -0.286rem; right: -0.286rem; cursor: nesw-resize; }
.builder-handle--e { top: 50%; right: -0.286rem; margin-top: -0.286rem; cursor: ew-resize; }
.builder-handle--se { bottom: -0.286rem; right: -0.286rem; cursor: nwse-resize; }
.builder-handle--s { bottom: -0.286rem; left: 50%; margin-left: -0.286rem; cursor: ns-resize; }
.builder-handle--sw { bottom: -0.286rem; left: -0.286rem; cursor: nesw-resize; }
.builder-handle--w { top: 50%; left: -0.286rem; margin-top: -0.286rem; cursor: ew-resize; }

/* ドラッグ中の目安 */
.builder-ghost {
    position: absolute;
    border: 0.143rem dashed var(--indigo-400);
    background: rgba(99, 102, 241, 0.08);
    pointer-events: none;
}

.builder-marquee {
    position: absolute;
    border: 0.05rem solid var(--indigo-500);
    background: rgba(99, 102, 241, 0.1);
    pointer-events: none;
}

.builder-tip {
    position: absolute;
    transform: translateY(-100%);
    padding: 0.143rem 0.429rem;
    border-radius: 0.286rem;
    background: var(--gray-800);
    color: #fff;
    font-size: 0.714rem;
    white-space: nowrap;
    pointer-events: none;
}

/* 部品の中身 */
.builder-heading,
.builder-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.143rem;
    line-height: 1.4;
}

.builder-heading {
    justify-content: center;
}

.builder-divider-line {
    width: 100%;
    margin-top: 0.5rem;
    color: var(--gray-600);
}

.builder-box {
    width: 100%;
    height: 100%;
    color: var(--gray-600);
}

.builder-image {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.143rem;
    border: 0.05rem dashed var(--gray-300);
    color: var(--gray-400);
    font-size: 0.714rem;
}

/* 取り込んだ写真。背景として敷くため、枠に合わせて全体を出す */
.builder-image-file {
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* 元の紙は薄く出す。上に載せたパーツの文字が読めなくなるのを防ぐ */
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.builder-field {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 0.286rem;
    min-width: 0;
}

.builder-field--top {
    flex-direction: column;
}

.builder-field--left {
    flex-direction: row;
    align-items: center;
}

.builder-field-label {
    flex-shrink: 0;
    color: var(--gray-700);
    white-space: nowrap;
}

.builder-field--left .builder-field-label {
    min-width: 5rem;
}

.builder-required {
    margin-left: 0.143rem;
    color: #c1442e;
    font-style: normal;
}

.builder-ctrl {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    padding: 0 0.286rem;
    min-height: 1.143rem;
    color: var(--gray-400);
}

.builder-ctrl--box {
    border: 0.05rem solid var(--gray-500);
}

.builder-ctrl--line {
    border-bottom: 0.05rem solid var(--gray-500);
}

.builder-ctrl--multi {
    align-items: flex-start;
    padding-top: 0.143rem;
}

.builder-ctrl--select {
    justify-content: space-between;
}

    .builder-ctrl--select::after {
        content: "\25BC";
        font-size: 0.6em;
        color: var(--gray-500);
    }

/*
    チェック・ラジオの選択肢。

    **上に置いた項目名との間が大きく空く問題があった。**
    この枠は残りの高さを全部受け取る（flex:1）。折り返す flex では
    既定の align-content:stretch で1行だけの中身が枠いっぱいに伸び、
    そこへ align-items:center が効いて、真ん中に浮いていた。
    行は上から詰める。
*/
.builder-choices {
    flex: 1 1 0%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.429rem;
    align-items: center;
    align-content: flex-start;
}

.builder-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.214rem;
    color: var(--gray-800);
}

.builder-mark {
    width: 0.714rem;
    height: 0.714rem;
    border: 0.05rem solid var(--gray-600);
    display: inline-block;
}

.builder-mark--circle {
    border-radius: 50%;
}

.builder-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

    /*
        揃えは部品（table要素）に付いた text-align を受け継ぐ。
        ここで left を書いていたため、［揃え］を中央・右にしても
        セルは左のままだった（セル側の指定のほうが勝つ）。
    */
    .builder-table th,
    .builder-table td {
        border: 0.05rem solid var(--gray-500);
        padding: 0.143rem 0.286rem;
        text-align: inherit;
    }

    .builder-table th {
        background: var(--gray-100);
        font-weight: 700;
    }

.builder-stamp {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.143rem solid #c1442e;
    border-radius: 50%;
    color: #c1442e;
}

.builder-signature {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    border-bottom: 0.05rem solid var(--gray-600);
    color: var(--gray-500);
}

/* 設定パネル */
.builder-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.429rem;
}

.builder-check {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    margin: 0.286rem 0;
    font-size: 0.857rem;
    cursor: pointer;
}

    /*
        チェック本体。

        **site.css の `input { width:100%; padding:0.75rem 1rem }` が効いてしまい、
        四角が横いっぱいに伸びて、右のラベルが下へ回り込んでいた。**
        「見出し行を出す」「必須項目」「太字」が全部この形。打ち消す。
    */
    .builder-check input[type="checkbox"] {
        width: auto;
        padding: 0;
        margin: 0;
        flex: none;
    }

    .builder-check span {
        min-width: 0;
    }

.builder-inspect-actions {
    display: flex;
    gap: 0.429rem;
    margin-top: 0.857rem;
}

.builder-inspect-empty {
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
}

.builder-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.214rem 0.571rem;
    margin: 0;
    font-size: 0.786rem;
}

    .builder-meta dt {
        color: var(--gray-400);
        font-weight: 400;
    }

    .builder-meta dd {
        margin: 0;
        color: var(--gray-700);
    }

textarea.builder-json {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.786rem;
    white-space: pre;
}

/* 狭い画面ではパーツと設定を上下に回す */
@media (max-width: 1200px) {
    .builder-body {
        flex-wrap: wrap;
    }

    .content.builder-palette,
    .content.builder-inspector {
        flex: 1 1 100%;
        max-height: none;
    }

    .builder-canvas {
        flex: 1 1 100%;
    }
}

/* ---------------------------------------------------------------
   作成した帳票の表示（印刷もここから行う）
   --------------------------------------------------------------- */
.report-page {
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
    padding-top: 0.857rem;
}

.content.report-head {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    padding: 0.857rem 1rem;
}

.report-head-actions {
    margin-left: auto;
}

.report-canvas {
    padding: 1.429rem;
    border-radius: 1rem;
    background: var(--gray-200);
    overflow: auto;
}

.report-paper {
    position: relative;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

.report-node {
    position: absolute;
    overflow: hidden;
    color: var(--gray-900);
    line-height: 1.4;
}

.report-heading,
.report-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.143rem;
}

.report-heading {
    justify-content: center;
}

.report-divider {
    width: 100%;
    margin-top: 0.5rem;
    color: var(--gray-800);
}

.report-box {
    width: 100%;
    height: 100%;
    color: var(--gray-800);
}

.report-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.05rem dashed var(--gray-300);
    color: var(--gray-400);
    font-size: 0.714rem;
}

/* 取り込んだ写真。印刷しても値が読めるよう、ビルダーより薄くする */
.report-image-file {
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0.35;
}

.report-field {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 0.286rem;
    min-width: 0;
}

.report-field--top {
    flex-direction: column;
}

.report-field--left {
    flex-direction: row;
    align-items: center;
}

.report-label {
    flex-shrink: 0;
    color: var(--gray-700);
    white-space: nowrap;
}

.report-field--left .report-label {
    min-width: 5rem;
}

.report-value {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    padding: 0 0.286rem;
    min-height: 1.143rem;
    min-width: 0;
    color: var(--gray-900);
    overflow: hidden;
}

.report-value--box {
    border: 0.05rem solid var(--gray-600);
}

.report-value--line {
    border-bottom: 0.05rem solid var(--gray-600);
}

.report-value--multi {
    align-items: flex-start;
    padding-top: 0.143rem;
    white-space: pre-wrap;
}

.report-choices {
    flex: 1 1 0%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.429rem;
    align-items: center;
}

.report-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.214rem;
}

.report-mark {
    width: 0.714rem;
    height: 0.714rem;
    border: 0.05rem solid var(--gray-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.report-mark--circle {
    border-radius: 50%;
}

/* 選ばれた選択肢に印を付ける */
.report-mark.is-checked::before {
    content: "";
    width: 0.357rem;
    height: 0.357rem;
    background: var(--gray-900);
}

.report-mark--circle.is-checked::before {
    border-radius: 50%;
}

.report-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

    /* 揃えは部品から受け継ぐ（ビルダー側と同じ理由） */
    .report-table th,
    .report-table td {
        border: 0.05rem solid var(--gray-600);
        padding: 0.143rem 0.286rem;
        text-align: inherit;
        vertical-align: top;
    }

    .report-table th {
        background: var(--gray-100);
        font-weight: 700;
    }

.report-stamp {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.143rem solid #c1442e;
    border-radius: 50%;
    color: #c1442e;
}

.report-signature {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    border-bottom: 0.05rem solid var(--gray-700);
}

.report-source-text {
    white-space: pre-wrap;
}

/* 印刷時は用紙だけを出す */
@media print {
    body {
        background: #fff;
    }

    .navbar,
    .side-menu,
    .content.report-head,
    .content.report-source,
    .overlay {
        display: none !important;
    }

    .report-canvas {
        padding: 0;
        background: #fff;
        overflow: visible;
    }

    .report-paper {
        box-shadow: none;
        margin: 0;
    }
}

/* 期限切れの成果物は一覧に残すが、区別がつくようにする */
tr.generated-expired td {
    color: var(--gray-400);
}

    tr.generated-expired td .badge-main {
        opacity: 0.6;
    }

/* ---------------------------------------------------------------
   帳票フォーマットのビルダー：はみ出しと配置の調整
   （後から効かせるため、元の定義より後ろに置いている）
   --------------------------------------------------------------- */

/* 上段の入力欄。minmax の最小幅の合計が画面幅を超えると
   グリッドが縮まずページごと横スクロールしていたため、折り返す形にする */
.builder-head-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    min-width: 0;
}

    .builder-head-fields .form-group,
    .builder-head-fields input,
    .builder-head-fields select {
        min-width: 0;
        max-width: 100%;
    }

.content.builder-head,
.content.builder-toolbar {
    min-width: 0;
    max-width: 100%;
}

.builder-head-actions {
    flex-wrap: wrap;
}

/* ツールバーの選択欄も画面幅に応じて縮められるようにする */
.builder-tool {
    min-width: 0;
}

    .builder-tool .form-control {
        min-width: 6rem;
        max-width: 100%;
    }

/* 用紙は常に幅へ合わせているため、横スクロールは出さない。
   縦だけスクロールさせる */
.builder-canvas {
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: 0.857rem;
    padding-right: 0.857rem;
}

/* パーツ・設定パネルも縮められるようにする（固定幅だとはみ出す） */
.content.builder-palette,
.content.builder-inspector {
    min-width: 0;
}

@media (min-width: 1201px) {
    .content.builder-palette {
        flex: 0 1 13rem;
    }

    .content.builder-inspector {
        flex: 0 1 16rem;
    }
}

/* ---- 設定パネル：畳める区切り ---- */
/*
    設定が10個以上縦に並び、いちばん使う「中身の書き換え」が
    下へ流れていた。内容・表示・位置の3つに畳む。
*/
.builder-section {
    border-top: 0.05rem solid var(--gray-200);
    padding: 0.286rem 0;
}

    .builder-section:first-of-type {
        border-top: 0;
    }

    .builder-section > summary {
        display: flex;
        align-items: center;
        gap: 0.286rem;
        padding: 0.357rem 0;
        font-size: 0.857rem;
        font-weight: 600;
        color: var(--gray-700);
        cursor: pointer;
        /* 既定の三角は位置が揃わないので自前で出す */
        list-style: none;
    }

        .builder-section > summary::-webkit-details-marker {
            display: none;
        }

        .builder-section > summary::before {
            content: "";
            width: 0.35rem;
            height: 0.35rem;
            border-right: 0.1rem solid var(--gray-500);
            border-bottom: 0.1rem solid var(--gray-500);
            transform: rotate(-45deg);
            transition: transform 0.12s;
            flex: none;
        }

    .builder-section[open] > summary::before {
        transform: rotate(45deg);
    }

.builder-section-body {
    padding-bottom: 0.429rem;
}

/* ---- 設定パネル：表の中身をマス目のまま書き換える ---- */
/*
    以前はタブ区切りの入力欄1つだった。
    どの文字がどのマスなのかを数えながら書くことになっていた。
*/
.builder-cells-scroll {
    overflow: auto;
    max-height: 18rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.357rem;
    background: var(--gray-50);
}

.builder-cells {
    border-collapse: collapse;
    width: 100%;
}

    .builder-cells th,
    .builder-cells td {
        border: 0.05rem solid var(--gray-200);
        padding: 0;
        /* 列が多いときは横へスクロールさせる。潰して読めなくしない */
        min-width: 4.5rem;
    }

    .builder-cells th {
        background: var(--gray-100);
    }

.builder-cell-input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.286rem 0.357rem;
    font-size: 0.786rem;
    color: var(--gray-800);
}

    .builder-cell-input:focus {
        outline: 0.1rem solid var(--primary);
        outline-offset: -0.1rem;
        background: white;
    }

    .builder-cells th .builder-cell-input {
        font-weight: 700;
    }

/* ---- 部品の中の配置 ---- */

/* 枠線を幅に含める。含めないと枠付きの入力欄が部品の外へはみ出す */
.builder-node,
.builder-node-body,
.builder-field,
.builder-ctrl,
.builder-box,
.builder-image,
.builder-stamp,
.builder-signature,
.builder-table,
.builder-table th,
.builder-table td {
    box-sizing: border-box;
}

/* 部品の中の余白は em で持つ。rem だと文字サイズ（pt）を変えても
   余白が変わらず、大きい文字のときに窮屈・小さい文字のときに間延びしていた */
.builder-ctrl {
    padding: 0 0.3em;
    min-height: 1.2em;
}

.builder-field {
    gap: 0.4em;
}

.builder-field--left .builder-field-label {
    /* 固定の最小幅だと、幅の狭い部品で入力欄が押し出されていた */
    min-width: 0;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.builder-choices {
    gap: 0.2em 0.8em;
}

.builder-choice {
    gap: 0.3em;
}

.builder-mark {
    width: 0.9em;
    height: 0.9em;
    flex-shrink: 0;
}

.builder-heading,
.builder-text {
    padding: 0 0.2em;
    /* 長い文字で部品の幅を押し広げない */
    overflow: hidden;
    word-break: break-word;
}

.builder-table th,
.builder-table td {
    padding: 0.15em 0.35em;
    /* 列数が多いときに文字で幅が広がらないよう均等割りにする */
    width: auto;
    overflow: hidden;
    word-break: break-word;
}

.builder-table {
    table-layout: fixed;
}

.builder-image {
    gap: 0.2em;
    overflow: hidden;
}

/* ---------------------------------------------------------------
   作成した帳票の表示：同じ調整
   --------------------------------------------------------------- */
.report-node,
.report-field,
.report-value,
.report-box,
.report-image,
.report-stamp,
.report-signature,
.report-table,
.report-table th,
.report-table td {
    box-sizing: border-box;
}

.report-value {
    padding: 0 0.3em;
    min-height: 1.2em;
}

.report-field {
    gap: 0.4em;
}

.report-field--left .report-label {
    min-width: 0;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-choices {
    gap: 0.2em 0.8em;
    /* ビルダーと同じ。1行だけのときに枠の真ん中へ浮かせない */
    align-content: flex-start;
}

.report-choice {
    gap: 0.3em;
}

.report-mark {
    width: 0.9em;
    height: 0.9em;
}

.report-table {
    table-layout: fixed;
}

    .report-table th,
    .report-table td {
        padding: 0.15em 0.35em;
        overflow: hidden;
        word-break: break-word;
    }

.report-heading,
.report-text {
    padding: 0 0.2em;
    overflow: hidden;
    word-break: break-word;
}

/* 帳票の表示も横スクロールを出さない */
.report-canvas {
    overflow-x: hidden;
    overflow-y: auto;
}

/* ---------------------------------------------------------------
   Web会議（LiveKit）
   --------------------------------------------------------------- */
.meeting-page .content,
.meeting-room .content {
    margin-bottom: 1rem;
}

/* 設定が足りない・入れなかった、を伝える枠 */
.meeting-alert {
    border-color: var(--amber-400);
    background: #fffbeb;
    color: var(--gray-800);
}

    .meeting-alert code {
        padding: 0.1rem 0.286rem;
        border-radius: 0.25rem;
        background: rgba(0, 0, 0, 0.06);
    }

.meeting-row {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    padding: 0.714rem 0;
    border-top: 0.05rem solid var(--gray-200);
    min-width: 0;
}

    .meeting-row:first-of-type {
        border-top: 0;
    }

    /* 終わった会議は淡く。開催中と見分けが付くようにする */
    .meeting-row.is-closed {
        color: var(--gray-500);
    }

.meeting-row-icon {
    flex: none;
    color: var(--gray-500);
}

.meeting-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.meeting-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.143rem 0.714rem;
}

/* ボタンは縮めない。縮むと「参加する」が2行に折れる */
.meeting-row-actions {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    flex: none;
}

    .meeting-row-actions .btn {
        flex: none;
        padding: 0.357rem 0.714rem;
        font-size: 0.857rem;
        white-space: nowrap;
    }

/* ---- 会議を開くダイアログ ---- */
.meeting-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.meeting-kind,
.meeting-member {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    margin: 0;
    cursor: pointer;
}

    /*
        site.css の `input { width:100% }` がラジオ・チェックにも当たり、
        四角が横いっぱいに伸びてラベルが下へ回り込む。打ち消す。
    */
    .meeting-kind input,
    .meeting-member input {
        width: auto;
        padding: 0;
        margin: 0;
        flex: none;
    }

.meeting-members {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.286rem 0.857rem;
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.286rem 0;
}

/* ---- 会議室（フルスクリーン） ---- */
/*
    並びは上下。上に操作、下が映像。
    ・主役（画面共有・ピン留め）があるとき … 主役に全部使い、参加者の枠は主役の上の帯に小さく重ねる
    ・無いとき … 参加者の枠を均等に割って並べる
    右にチャットの枠（押したときだけ出す）。
*/
.meeting-room {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
    padding: 0.5rem 0.75rem 0.75rem;
}

.meeting-body {
    display: flex;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* 映像の置き場。主役か、参加者の並びのどちらかが全部を使う */
.meeting-stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
    min-height: 0;
}

/*
    主役の枠。**角の丸みは小さく**（大きいと柔らかい印象になり、共有した資料の角が欠ける）。
    出すものが無いときは畳んで、参加者の並びが全部を使えるようにする。
*/
.meeting-main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.286rem;
    background: var(--gray-900, #111827);
    overflow: hidden;
}

    /* 指しているあいだは、映像の上で位置が拾えるようにする */
    .meeting-main.is-pointing {
        cursor: crosshair;
    }

    .meeting-main.is-empty {
        display: none;
    }

.meeting-main-slot {
    width: 100%;
    height: 100%;
    display: flex;
}

/* ---- 参加者の帯（主役の右。2026-09-18 デスクトップ版に合わせた） ---- */
/*
    **主役の右に縦へ並べる。** 以前は主役の下端に重ねていたため、共有した資料の
    下端が隠れた。場所を分けると主役は少し狭くなるが、資料が欠けない。
    枠は 16:9 の小さな札のまま。多ければ縦にスクロールし、**引き伸ばさない**。
*/
.meeting-strip {
    flex: 0 0 22%;
    min-width: 9.5rem;
    max-width: 14rem;
    display: flex;
    gap: 0.143rem;
    margin-left: 0.143rem;
    min-height: 0;
}

.meeting-strip-tiles {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.143rem;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* 細いスクロールバーで済ませる（枠の幅を取らない） */
    scrollbar-width: thin;
}

    /* 帯の枠は 16:9 で固定。余った縦は空ける（人数で高さを変えない） */
    .meeting-strip-tiles .meeting-tile {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    /* 畳んだら枠を隠して、取っ手だけ残す */
    .meeting-strip.is-collapsed {
        flex: 0 0 auto;
        min-width: 0;
    }

        .meeting-strip.is-collapsed .meeting-strip-tiles {
            display: none;
        }

.meeting-strip-toggle {
    flex: none;
    align-self: flex-start;
    width: 1.714rem;
    height: 1.714rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.286rem;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    padding: 0;
    pointer-events: auto;
}

    .meeting-strip-toggle .material-symbols-outlined {
        font-size: 1rem !important;
    }

    .meeting-strip-toggle:hover {
        background: rgba(0, 0, 0, 0.8);
    }

/* ---- 操作（上にまとめる） ---- */
.meeting-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.857rem;
    border-radius: 0.5rem;
    background: white;
    border: 0.05rem solid var(--gray-200);
    flex: none;
}

/*
    録音・録画の印。**これは状態表示ではない。**
    「参加中」のような状態は出さず（幕とトーストで見せる）、
    録っていることだけは全員に分かるように残している。
*/
.meeting-recording {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    font-size: 0.857rem;
    color: var(--danger, #ef4444);
    font-weight: bold;
    min-width: 0;
}

/*
    マイク・カメラの ON / OFF。
    ラベルは動かさず、この札で状態を見せる（押すたびに文字が変わると読み直しになる）。
*/
.meeting-switch {
    margin-left: 0.143rem;
    padding: 0.071rem 0.357rem;
    border-radius: 0.786rem;
    background: var(--primary);
    color: white;
    font-size: 0.679rem;
    font-weight: bold;
    line-height: 1.4;
    align-self: center;
}

    .meeting-switch.is-off {
        background: var(--gray-400);
    }

/* 読んでいない件数（チャット）。押していないあいだも気づけるように */
.meeting-badge {
    margin-left: 0.143rem;
    min-width: 1.286rem;
    padding: 0.071rem 0.357rem;
    border-radius: 0.786rem;
    background: var(--danger, #ef4444);
    color: white;
    font-size: 0.679rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    align-self: center;
}

/* ---- 全画面（F11） ---- */
/*
    ブラウザの枠まで消して映像に使う。**地の色は明るいまま**にする
    （透ける地のままだと、全画面の下が黒く抜けて枠の境目が分からない）。
*/
.meeting-room:fullscreen {
    width: 100%;
    height: 100%;
    padding: 0.571rem;
    background: var(--gray-100, #f3f4f6);
}

/* ---- 会議の時計（経過・残り） ---- */
/*
    録音の印（赤）とは別物。**こちらは自分のための目安**なので、
    ふだんは灰色で、残り5分から色を付ける（過ぎたら赤）。
*/
.meeting-clock {
    display: flex;
    align-items: center;
    gap: 0.286rem;
    font-size: 0.857rem;
    color: var(--gray-600);
    white-space: nowrap;
}

    .meeting-clock .meeting-clock-elapsed {
        font-variant-numeric: tabular-nums;
    }

    .meeting-clock .meeting-clock-remaining {
        font-variant-numeric: tabular-nums;
    }

        /* 残り5分。**切りどきが分かる**ように色を変える */
        .meeting-clock .meeting-clock-remaining.is-short {
            color: #b45309;
            font-weight: bold;
        }

        .meeting-clock .meeting-clock-remaining.is-over {
            color: var(--danger, #ef4444);
            font-weight: bold;
        }

/* ---- 表示の切替（ギャラリー／スピーカー） ---- */
/*
    **この端末の見え方だけ**を変えるもの。押している状態が分かるよう、
    3つを1つの枠に入れて、選んでいるものだけ塗る。
*/
/*
    表示の切替。**一覧に入れず、押せば選べる1列で出す**（2026-09-18 利用者の指定）。
    デスクトップ版と同じく、選んでいるものを塗って示す。
*/
.meeting-views {
    display: inline-flex;
    border: 0.05rem solid var(--gray-300);
    border-radius: 0.357rem;
    overflow: hidden;
}

.meeting-view {
    padding: 0.286rem 0.643rem;
    border: 0;
    background: white;
    color: var(--gray-600);
    font-size: 0.786rem;
    white-space: nowrap;
}

    .meeting-view + .meeting-view {
        border-left: 0.05rem solid var(--gray-300);
    }

    .meeting-view:hover {
        background: var(--gray-100);
    }

    .meeting-view.is-active {
        background: var(--primary);
        color: white;
    }

/* 人数が1ページに収まらないときだけ出す */
.meeting-pager {
    display: flex;
    align-items: center;
    gap: 0.143rem;
}

    .meeting-pager .meeting-pager-text {
        font-size: 0.786rem;
        color: var(--gray-600);
        font-variant-numeric: tabular-nums;
        min-width: 2.5rem;
        text-align: center;
    }

/* ---- 設定：使う機器 ---- */
.meeting-devices {
    display: grid;
    gap: 0.429rem;
}

/* 名前は上、選ぶところは下（機器の名前は長い。横に並べると読めない） */
.meeting-device {
    margin: 0;
    font-weight: normal;
}

    .meeting-device .meeting-device-label {
        display: flex;
        align-items: center;
        gap: 0.286rem;
        margin-bottom: 0.143rem;
        color: var(--gray-600);
        font-size: 0.857rem;
    }

    .meeting-device select:disabled {
        background: var(--gray-100);
        color: var(--gray-500);
    }

/* ボタンは縮めない。縮むと文字が2行に折れる */
.meeting-toolbar-buttons {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    margin-left: auto;
    flex-wrap: wrap;
}

    .meeting-toolbar-buttons .btn {
        flex: none;
        padding: 0.357rem 0.714rem;
        font-size: 0.857rem;
        gap: 0.25rem;
        white-space: nowrap;
    }

/*
    いま外へ出ているもの（カメラ入・共有中・録音中・録画中）。
    押せば止められる、という意味で赤にする。
*/
.btn.is-on {
    border-color: var(--danger);
    background: #fef2f2;
    color: var(--danger);
}

/*
    切っているもの（マイクが切）。

    **赤にしない。** 同じ赤で「出ている」と「切っている」の両方を表すと、
    どちらの意味なのか見て分からなくなる。切は沈んだ色にする。
*/
.btn.is-off {
    border-color: var(--gray-300);
    background: var(--gray-100);
    color: var(--gray-500);
}

/* 開いている枠（チャット）。赤ではなく主色で「いま開いている」 */
.btn.is-active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--indigo-50, #eef2ff);
}

/* ---- 許可待ち ---- */
/*
    ホスト側の帯。映像の上に被せず、操作の下に出す（見落とすと相手が入れない）。
*/
.meeting-admissions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.857rem;
    padding: 0.5rem 0.857rem;
    border-radius: 0.5rem;
    border: 0.05rem solid var(--amber-400, #fbbf24);
    background: #fffbeb;
    flex: none;
}

.meeting-admissions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.429rem 0.857rem;
    flex: 1 1 auto;
    min-width: 0;
}

.meeting-admission {
    display: flex;
    align-items: center;
    gap: 0.357rem;
    padding: 0.214rem 0.214rem 0.214rem 0.571rem;
    border-radius: 0.357rem;
    background: white;
    border: 0.05rem solid var(--gray-200);
}

    .meeting-admission .btn {
        padding: 0.214rem 0.571rem;
        font-size: 0.786rem;
    }

.meeting-admission-name {
    font-size: 0.857rem;
    font-weight: bold;
}

/* 待つ側。幕ではなく帯で出す（やめる操作ができるように） */
.meeting-waiting {
    display: flex;
    align-items: center;
    gap: 0.714rem;
    padding: 0.5rem 0.857rem;
    border-radius: 0.5rem;
    border: 0.05rem solid var(--gray-200);
    background: white;
    font-size: 0.857rem;
    flex: none;
}

/* ---- 翻訳電話の字幕 ---- */
/*
    映像の下に重ねる（枠を狭めない）。地は濃い半透明で、映像の上でも読める。
    上（履歴）は確定した区切り、下（live）はいま聞き取っている途中で差し替わる。
*/
.meeting-captions {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 0.286rem;
    max-height: 45%;
    padding: 0.5rem 0.857rem 0.643rem;
    border-radius: 0.5rem;
    background: rgba(17, 24, 39, 0.84);
    color: white;
    pointer-events: auto;
}

.meeting-captions-head {
    display: flex;
    align-items: center;
    gap: 0.357rem;
    font-size: 0.857rem;
}

    .meeting-captions-head .material-symbols-outlined {
        color: white;
        background-color: white;
    }

    .meeting-captions-head .btn-icon .material-symbols-outlined {
        background-color: white;
    }

.meeting-captions-state {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.786rem;
}

.meeting-caption-log {
    display: flex;
    flex-direction: column;
    gap: 0.286rem;
    overflow-y: auto;
    min-height: 0;
    font-size: 0.929rem;
}

.meeting-caption-row {
    padding-left: 0.5rem;
    border-left: 0.143rem solid rgba(255, 255, 255, 0.35);
}

.meeting-caption-row-translation {
    color: rgba(255, 255, 255, 0.92);
}

.meeting-caption-row-source {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.786rem;
}

.meeting-caption-live {
    min-height: 1.5rem;
}

.meeting-caption-translation {
    font-size: 1.214rem;
    font-weight: 600;
    line-height: 1.4;
}

.meeting-caption-original {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.857rem;
    line-height: 1.4;
}

/* 自分の声 → 相手の言葉（相手に届いている訳の確認。1行に収める） */
.meeting-caption-live-out {
    display: flex;
    align-items: baseline;
    gap: 0.357rem;
    min-height: 0;
    padding-top: 0.286rem;
    border-top: 0.05rem solid rgba(255, 255, 255, 0.18);
    font-size: 0.857rem;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
}

    .meeting-caption-live-out .meeting-caption-out-original,
    .meeting-caption-live-out .meeting-caption-out-translation {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

.meeting-caption-tag {
    flex: none;
    padding: 0 0.357rem;
    border-radius: 0.286rem;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.714rem;
}

.meeting-caption-row.is-out {
    border-left-color: rgba(147, 197, 253, 0.7);
}

/* 帯の中に収まる小さな回転 */
.spinner.meeting-waiting-spinner {
    width: 1.286rem;
    height: 1.286rem;
    border-width: 0.214rem;
    flex: none;
}

/* ---- 参加者のフレーム（主役が無いとき） ---- */
/*
    人数に応じて列の数を変える（JSが --tile-columns を書く）。
    行は余った高さを等分するので、**1人なら1枚で枠いっぱい**、
    2人なら半分ずつ、というように均等に割れる。

    **枠と枠の隙間はほぼ無し・角の丸みは小さく。** 隙間が広く角が丸いと
    柔らかい印象になり、映像が小さく見える。隙間には薄い灰色の線が出る。
*/
.meeting-people {
    --tile-columns: 1;
    /*
        枠1つの横幅の上限（JSが行の高さ × 16/9 を書く。2026-09-18）。
        入れていないと、横に広い画面で枠が**極端な横長**に伸びる。
    */
    --tile-max-width: none;

    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(var(--tile-columns), minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 0.143rem;
    overflow: auto;
    border-radius: 0.286rem;
    /* 隙間に見える線の色。枠の罫線はこれで決まる */
    background: var(--gray-300);
    padding: 0.071rem;
}

    /*
        **横に伸びきらせない**（2026-09-18）。行の高さから 16:9 の幅を出して頭打ちにし、
        余った横は左右へ振り分ける。縦が足りないときは今までどおり枠なりに収まる。
    */
    .meeting-people > .meeting-tile {
        max-width: var(--tile-max-width, none);
        margin: 0 auto;
        width: 100%;
    }

.meeting-people-empty {
    grid-column: 1 / -1;
    align-self: center;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.857rem;
}

.meeting-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.286rem;
    /* 枠線は薄い灰色。話している人だけ主色で縁取る */
    border: 0.071rem solid var(--gray-300);
    background: var(--gray-800, #1f2937);
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

    /* 話している人。音声だけの会議では誰が話しているか分からない */
    .meeting-tile.is-speaking {
        border-color: var(--primary);
        box-shadow: inset 0 0 0 0.071rem var(--primary);
    }

    /* 主役の枠は角を合わせる（外側の枠がすでに丸いため） */
    .meeting-tile.is-main {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0;
        background: transparent;
    }

.meeting-tile-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

    /* 共有された画面は切らずに全部見せる（文字が切れると読めない） */
    .meeting-tile-video.is-contain {
        object-fit: contain;
    }

/* カメラが切のときの名札 */
.user-icon.meeting-tile-icon {
    width: 3.429rem !important;
    font-size: 1.286rem;
}

    /* 帯の中は枠が小さいので名札も小さく */
    .meeting-strip-tiles .user-icon.meeting-tile-icon {
        width: 2.286rem !important;
        font-size: 0.929rem;
    }

/* 名前は映像に重ねる。枠の高さを取らないため */
.meeting-tile-label {
    position: absolute;
    left: 0.357rem;
    bottom: 0.357rem;
    /* 名前の長さぶんだけ。right を入れると黒帯が枠いっぱいに伸びる */
    max-width: calc(100% - 4rem);
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
    padding: 0.143rem 0.5rem;
    border-radius: 0.286rem;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: 0.786rem;
    min-width: 0;
}

    .meeting-tile-label span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 帯の枠は操作が上にあるので、名前は幅いっぱい使ってよい（切れにくくする） */
    .meeting-strip-tiles .meeting-tile-label {
        font-size: 0.679rem;
        padding: 0.071rem 0.357rem;
        max-width: calc(100% - 0.714rem);
    }

/* ホストの印。誰の指示に従うかが分かるように */
.meeting-tile-host {
    padding: 0 0.286rem;
    border-radius: 0.214rem;
    background: var(--primary);
    font-size: 0.643rem;
    line-height: 1.5;
    flex: none;
}

/*
    枠の右上の操作（ピン留め・相手のマイクを切る）。
    常に出しておく（重ねたときだけ出すと、指の操作で押せない）。
*/
.meeting-tile-actions {
    position: absolute;
    top: 0.286rem;
    right: 0.286rem;
    display: flex;
    gap: 0.214rem;
}

.btn-icon.meeting-tile-action {
    width: 1.714rem !important;
    height: 1.714rem !important;
    border-radius: 0.286rem;
    background: rgba(0, 0, 0, 0.45);
    color: white;
}

    .btn-icon.meeting-tile-action .material-symbols-outlined {
        font-size: 1rem !important;
    }

    .btn-icon.meeting-tile-action:hover {
        background: rgba(0, 0, 0, 0.7);
    }

    /* 留めているあいだは色を付ける */
    .btn-icon.meeting-tile-pin.is-on {
        background: var(--primary);
    }

    /* スポットライトを当てているあいだも同じ扱い（押した状態が分かるように） */
    .btn-icon.meeting-tile-action.is-on {
        background: var(--primary);
    }

    /* 退出させるは戻せない操作。触れたときだけ赤くして、押し間違いを減らす */
    .btn-icon.meeting-tile-kick:hover {
        background: var(--danger, #ef4444);
    }

    .meeting-strip-tiles .btn-icon.meeting-tile-action {
        width: 1.429rem !important;
        height: 1.429rem !important;
    }

/* ---- チャット ---- */
/*
    右の枠。押したときだけ出す。映像の幅を取るので、要らないときは畳んでおく。
*/
.meeting-chat {
    flex: 0 0 20rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 0.5rem;
    background: white;
    border: 0.05rem solid var(--gray-200);
    overflow: hidden;
}

.meeting-chat-head {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.5rem 0.5rem 0.857rem;
    border-bottom: 0.05rem solid var(--gray-200);
    flex: none;
}

.meeting-chat-log {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.571rem 0.714rem;
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
}

.meeting-chat-empty {
    color: var(--gray-500);
    font-size: 0.786rem;
}

.meeting-chat-item {
    display: flex;
    flex-direction: column;
    gap: 0.143rem;
    padding: 0.429rem 0.571rem;
    border-radius: 0.357rem;
    background: var(--gray-100);
    font-size: 0.857rem;
}

    /* 自分の発言は右に寄せて色を変える（誰のかを読まずに分かる） */
    .meeting-chat-item.is-mine {
        background: var(--indigo-50, #eef2ff);
    }

.meeting-chat-meta {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    font-size: 0.714rem;
    color: var(--gray-500);
}

.meeting-chat-name {
    font-weight: bold;
    color: var(--gray-700);
}

.btn-icon.meeting-chat-copy {
    width: 1.429rem !important;
    height: 1.429rem !important;
    margin-left: auto;
    color: var(--gray-500);
}

/* 資料のパスを貼ることが多い。折らずに読める幅にし、長いものは折り返す */
.meeting-chat-text {
    white-space: pre-wrap;
    word-break: break-all;
}

    .meeting-chat-text a {
        color: var(--primary);
        text-decoration: underline;
    }

.meeting-chat-form {
    display: flex;
    gap: 0.357rem;
    padding: 0.5rem;
    border-top: 0.05rem solid var(--gray-200);
    flex: none;
}

    .meeting-chat-form textarea {
        flex: 1 1 auto;
        resize: none;
        font-size: 0.857rem;
        min-width: 0;
    }

    .meeting-chat-form .btn {
        flex: none;
        padding: 0.357rem 0.571rem;
        align-self: flex-end;
    }

/* ---- 背景の選択（設定） ---- */
.meeting-backgrounds {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
}

.form-group label.meeting-background {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.214rem;
    margin: 0;
    font-size: 0.714rem;
    font-weight: normal;
    color: var(--gray-700);
    text-transform: none;
    cursor: pointer;
}

    /* ラジオの丸は出さない。選んでいるものは枠の色で見せる */
    .meeting-background input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
    }

.meeting-background-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.286rem;
    border: 0.143rem solid var(--gray-200);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--gray-500);
}

    .meeting-background-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .meeting-background-thumb.is-blur {
        background: linear-gradient(135deg, var(--gray-300), var(--gray-100));
    }

.meeting-background input:checked + .meeting-background-thumb {
    border-color: var(--primary);
}

.meeting-background input:disabled + .meeting-background-thumb {
    opacity: 0.5;
    cursor: not-allowed;
}

.meeting-background-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- ポインター（共有した画面を指す） ---- */
/*
    映像の上に重ねる。**押せないようにしておく**（点の上でマウスが
    止まると、その先の位置が拾えなくなる）。
*/
.meeting-pointer {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.286rem;
    pointer-events: none;
    /* 指した位置が点の中心に来るようにする */
    transform: translate(-50%, -50%);
    transition: left 0.06s linear, top 0.06s linear;
}

.meeting-pointer-dot {
    width: 0.857rem;
    height: 0.857rem;
    border-radius: 50%;
    background: #f97316;
    border: 0.143rem solid white;
    box-shadow: 0 0 0.429rem rgba(0, 0, 0, 0.5);
    flex: none;
}

.meeting-pointer-name {
    padding: 0.071rem 0.357rem;
    border-radius: 0.286rem;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.714rem;
    white-space: nowrap;
}

/* 録音中の赤い点。参加者全員に分かるようにする */
.meeting-recording-dot {
    width: 0.643rem;
    height: 0.643rem;
    border-radius: 50%;
    background: var(--danger, #ef4444);
    flex: none;
    animation: meeting-recording-blink 1.4s ease-in-out infinite;
}

@keyframes meeting-recording-blink {
    50% {
        opacity: 0.25;
    }
}

/* 狭い画面。チャットは下に積み、帯の枠は小さく */
@media (max-width: 900px) {
    .meeting-body {
        flex-direction: column;
    }

    .meeting-chat {
        flex: 0 0 40%;
    }

    .meeting-strip-tiles .meeting-tile {
        width: 6.5rem;
    }

    .meeting-toolbar-buttons {
        margin-left: 0;
    }
}

/* ---- 一覧の状態（左の色付き枠線） ---- */
/*
    予定がいくつも並ぶので、**いま入れるのはどれか**を色で分かるようにする。
    色だけに頼らないよう、行の中に文字（予定・会議中…）も出している。
*/
.meeting-row {
    /* 色の帯と文字がくっつかないよう、左に余白を足す */
    border-left: 0.286rem solid var(--gray-300);
    padding-left: 0.857rem;
}

    .meeting-row.is-scheduled {
        border-left-color: var(--gray-400);
    }

    /* もうすぐ始まる。押せばすぐ入れる */
    .meeting-row.is-joinable {
        border-left-color: var(--success, #16a34a);
    }

    /* 誰かが入っている・始まっている */
    .meeting-row.is-live {
        border-left-color: var(--danger, #ef4444);
    }

    /* 知り合いとの1対1。社外の相手なので社内の予定と分ける */
    .meeting-row.is-private {
        border-left-color: #7c3aed;
    }

    .meeting-row.is-closed {
        border-left-color: var(--gray-200);
    }

.meeting-row-status {
    margin-left: 0.429rem;
    padding: 0.071rem 0.429rem;
    border-radius: 0.286rem;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.714rem;
    font-weight: normal;
    vertical-align: middle;
}

.is-joinable .meeting-row-status {
    background: #dcfce7;
    color: #15803d;
}

.is-live .meeting-row-status {
    background: #fee2e2;
    color: #b91c1c;
}

.is-private .meeting-row-status {
    background: #ede9fe;
    color: #6d28d9;
}

/* ---- 会議の詳細（行を押すと出るモーダル） ---- */
/*
    行には入りきらない「誰を呼んだのか」「その人は入ったのか」「許可制だったか」を見る。
    **見るだけ。** 作ったあとの会議は変えられないので、入力の部品は置かない。
    （デスクトップアプリの［会議の詳細］から移した。2026-09-15）
*/
.meeting-row {
    cursor: pointer;
}

    /* 行の中のボタンは、それぞれの役目のほうを優先する（詳細は開かない） */
    .meeting-row button,
    .meeting-row a {
        cursor: pointer;
    }

.meeting-detail-head {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    margin-bottom: 0.857rem;
}

    /* 一覧の行と同じ色。どの会議を開いたのかが色でも分かる */
    .meeting-detail-head .meeting-detail-bar {
        flex: 0 0 auto;
        width: 0.286rem;
        align-self: stretch;
        min-height: 1.429rem;
        border-radius: 0.143rem;
        background: var(--gray-300);
    }

    .meeting-detail-head.is-scheduled .meeting-detail-bar {
        background: var(--gray-400);
    }

    .meeting-detail-head.is-joinable .meeting-detail-bar {
        background: var(--success, #16a34a);
    }

    .meeting-detail-head.is-live .meeting-detail-bar {
        background: var(--danger, #ef4444);
    }

    .meeting-detail-head.is-private .meeting-detail-bar {
        background: #7c3aed;
    }

    .meeting-detail-head.is-closed .meeting-detail-bar {
        background: var(--gray-200);
    }

.meeting-detail-title {
    font-weight: bold;
    word-break: break-word;
}

/* 見出しと値。**見出しの幅を揃える**（値の頭が縦に並ばないと読みにくい） */
.meeting-detail-list {
    display: grid;
    grid-template-columns: 5.714rem 1fr;
    gap: 0.286rem 0.857rem;
    margin: 0;
}

    .meeting-detail-list dt {
        color: var(--gray-600);
        font-size: 0.786rem;
        font-weight: normal;
        padding-top: 0.071rem;
    }

    .meeting-detail-list dd {
        margin: 0;
        word-break: break-word;
    }

/* 呼んだ人。名前と「入室／未入室」を1行に並べる */
.meeting-detail-person {
    display: flex;
    justify-content: space-between;
    gap: 0.857rem;
}

.meeting-detail-guest {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    margin-top: 0.857rem;
    padding: 0.571rem 0.857rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.286rem;
    background: var(--gray-50, #f8fafc);
}

    .meeting-detail-guest > div {
        flex: 1 1 auto;
        min-width: 0;
    }

    .meeting-detail-guest button {
        flex: 0 0 auto;
    }

@media (max-width: 575.98px) {
    .meeting-detail-list {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

        .meeting-detail-list dd {
            margin-bottom: 0.571rem;
        }

    .meeting-detail-guest {
        flex-wrap: wrap;
    }
}

/* 色の見方。並んだ枠線が何を表すのか、一覧の上で分かるようにする */
.meeting-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.857rem;
    font-size: 0.786rem;
    color: var(--gray-600);
}

    /*
        タブと同じ行の右端に置く（利用者の指定）。
        タブは高さを持つボタンなので、**縦は中央に揃える**。
        入りきらない画面ではタブの行ごと横スクロールになるため、
        ここでは縮ませずに送り出す（`flex-shrink: 0`）。
    */
    .tab-container > .meeting-legend {
        margin: auto 0 auto auto;
        padding-left: 1rem;
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

/*
    ［会議を開く］はタブと同じ行の右端（2026-09-16 の指摘）。
    ボタンだけの行を上に持つと、見出しと一覧の間が55pxも空いていた。
    色の見方（meeting-legend）は ml-auto で右へ寄るので、
    このボタンを後ろへ置くだけで「色の見方は左・ボタンは右端」になる。
    行の高さはボタンで決まるため、タブの上下の余白はここで詰める。
*/
.tab-container > .meeting-open-button {
    margin: auto 0 auto 1rem;
    flex: 0 0 auto;
}

.meeting-tabs {
    /* ボタンが入って行が厚くなるぶん、上の余白を詰める */
    margin-top: 0.25rem;
    align-items: center;
}

/*
    狭い画面ではタブと色の見方が1行に入らない。**横スクロールにはしない**——
    タブの下にスクロールバーが出るうえ、右端の色は切れたままになる。
    タブの下へ回して全部見せる。
*/
@media (max-width: 48rem) {
    .meeting-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }

        .meeting-tabs > .meeting-legend {
            margin: 0 0 0.5rem auto;
            padding-left: 0;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        /*
            折り返した行でも右端に置く。**auto で寄せる**——
            0.5rem の余白にすると、文字サイズ［特大］でボタンだけが次の行へ落ちたとき
            左端に付いてしまう（色の見方は右、ボタンは左、とちぐはぐになる）
        */
        .meeting-tabs > .meeting-open-button {
            margin: 0 0 0.5rem auto;
        }
}

.meeting-legend-item {
    display: flex;
    align-items: center;
    gap: 0.286rem;
}

    .meeting-legend-item::before {
        content: "";
        width: 0.214rem;
        height: 0.857rem;
        border-radius: 0.143rem;
        background: var(--gray-400);
    }

    .meeting-legend-item.is-joinable::before {
        background: var(--success, #16a34a);
    }

    .meeting-legend-item.is-live::before {
        background: var(--danger, #ef4444);
    }

    .meeting-legend-item.is-private::before {
        background: #7c3aed;
    }

/* ---- 会議を組むダイアログ ---- */
.meeting-times {
    display: flex;
    align-items: center;
    gap: 0.571rem;
    margin-bottom: 0.286rem;
}

    /* 時刻の欄は中身ぶんでよい。100%だと「〜」が押し出される */
    .meeting-times input {
        flex: 1 1 auto;
        min-width: 0;
    }

/* ---- 会議を開くダイアログ（間隔と入力の間違い） ---- */
/*
    項目が詰まっていると、どこからどこまでが1つの設定なのか分からない。
    見出し・入力・補足を1つのまとまりとして、まとまりの間を空ける。
*/
.meeting-form .form-group {
    margin-bottom: 1.429rem;
}

    .meeting-form .form-group:last-child {
        margin-bottom: 0;
    }

    .meeting-form .form-group > label {
        margin-bottom: 0.429rem;
    }

    /* 補足は入力から少しだけ離す（くっつくと入力欄の一部に見える） */
    .meeting-form .form-group > p.small {
        margin-top: 0.357rem !important;
    }

/*
    見出しの右に添える短い補足（「最長60分」など）。
    段落で下に出すと項目が縦に伸びて、どこまでが1つの項目か分からなくなる。
*/
.meeting-label-note {
    margin-left: 0.571rem;
    font-size: 0.714rem;
    font-weight: normal;
    color: var(--gray-500);
    text-transform: none;
}

/*
    任意のオプションは1つの枠にまとめる。
    必須の欄とチェックが交互に並ぶと「どこまで入れれば作れるのか」が分からない。
    1行＝チェック＋名前＋短い補足。
*/
.meeting-options {
    /* 入力欄の枠と同じ濃さにする（gray-200 だと白地に溶けて枠に見えない） */
    border: 0.05rem solid var(--gray-300, #d1d5db);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* `.form-group label`（太字・大文字・block）より強くしておく。負けると縦に積まれて大文字になる */
.form-group label.meeting-option,
.meeting-option {
    display: flex;
    align-items: flex-start;
    gap: 0.643rem;
    margin: 0;
    padding: 0.643rem 0.857rem;
    font-size: 0.929rem;
    font-weight: normal;
    color: var(--gray-800);
    text-transform: none;
    cursor: pointer;
}

    .meeting-option + .meeting-option {
        border-top: 0.05rem solid var(--gray-200);
    }

    .meeting-option:hover {
        background: var(--gray-50, #f9fafb);
    }

    .meeting-option input[type="checkbox"] {
        width: auto;
        padding: 0;
        margin: 0.214rem 0 0;
        flex: none;
    }

/*
    種類ごとのまとまり（お知らせ／参加と入室／記録）。
    まとまりの境目は、項目どうしの細い線より濃くして段差を付ける。
*/
.meeting-option-group + .meeting-option-group {
    border-top: 0.05rem solid var(--gray-300, #d1d5db);
}

/*
    まとまりの見出し。**チェックの名前より小さく薄く**する。
    同じ大きさだと、項目が6つではなく9つあるように見える。
*/
.meeting-option-group-title {
    margin: 0;
    padding: 0.429rem 0.857rem;
    background: var(--gray-50, #f9fafb);
    font-size: 0.714rem;
    font-weight: bold;
    line-height: 1.4;
    color: var(--gray-500);
}

.meeting-option-body {
    display: flex;
    flex-direction: column;
    gap: 0.143rem;
    min-width: 0;
}

.meeting-option-title {
    line-height: 1.3;
}

.meeting-option-hint {
    font-size: 0.714rem;
    color: var(--gray-500);
    line-height: 1.4;
}

/* 履歴のモーダルで読み返すチャット（会議室のチャットと同じ部品を使う） */
.meeting-chat-history {
    max-height: 60vh;
    padding: 0.857rem 1rem;
}

/* 間違いは、その項目のすぐ下に赤で出す */
.field-error {
    margin: 0.357rem 0 0;
    font-size: 0.786rem;
    color: var(--danger, #ef4444);
}

.form-control.is-invalid {
    border-color: var(--danger, #ef4444);
}

/* ---- 複数選択（相手を選ぶ） ---- */
/*
    人数が増えるとチェックボックスの一覧では探せない。
    選んだ人を札で出し、絞り込みながら選ぶ。**外の部品は足していない。**
*/
.picker {
    position: relative;
}

.picker-field {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    width: 100%;
    min-height: 2.857rem;
    padding: 0.357rem 0.714rem;
    border: 0.05rem solid var(--gray-300);
    border-radius: 0.5rem;
    background: white;
    text-align: left;
    cursor: pointer;
}

    .picker-field.is-open {
        border-color: var(--primary);
    }

.picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.286rem;
    flex: 1 1 auto;
    min-width: 0;
}

.picker-placeholder {
    color: var(--gray-500);
    font-size: 0.857rem;
    align-self: center;
}

.picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.214rem;
    padding: 0.071rem 0.214rem 0.071rem 0.5rem;
    border-radius: 1rem;
    background: var(--gray-100);
    font-size: 0.786rem;
}

/*
    札の×。

    **`!important` が要る。** `.material-symbols-outlined` が
    `font-size: 1.3rem !important` を持っており（site.css の先頭近く）、
    クラスを重ねただけでは戻せない（実測18.2pxで、札の文字11pxより大きかった）。
    アイコン全体の指定を外すと影響が広すぎるので、ここだけ打ち消す。
*/
.picker-chip .picker-chip-remove {
    font-size: 0.857rem !important;
    width: 0.857rem;
    height: 0.857rem;
    line-height: 1;
    color: var(--gray-500);
    cursor: pointer;
    flex: none;
}

    .picker-chip .picker-chip-remove:hover {
        color: var(--danger);
    }


.picker-panel {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: calc(100% + 0.286rem);
    padding: 0.571rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}

.picker-list {
    max-height: 14rem;
    overflow-y: auto;
    margin-top: 0.429rem;
}

/*
    `.form-group label` は「見出しの札」の指定（太字・大文字・小さい灰色）で、
    しかも .picker-item より強い。**中で使う label はそれを打ち消す。**
    選ぶ相手の名前が大文字になったり、縦に積まれたりするのを防ぐ。
*/
.form-group label.picker-item,
.form-group label.meeting-check {
    display: flex;
    font-size: 0.929rem;
    font-weight: normal;
    color: var(--gray-800);
    text-transform: none;
    margin-bottom: 0;
}

.form-group label.meeting-check {
    margin-bottom: 0.286rem;
}

.picker-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.357rem 0.286rem;
    margin: 0;
    border-radius: 0.357rem;
    cursor: pointer;
}

    .picker-item:hover {
        background: var(--gray-100);
    }

    /* site.css の input は幅100%・余白ありが既定。チェックだけ戻す */
    .picker-item input[type="checkbox"] {
        width: auto;
        padding: 0;
        margin: 0;
        flex: none;
    }

.picker-item-body {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

/* ---- 会議室 ---- */
/* 操作の区切り。「自分の設定」と「会議への操作」を見た目で分ける */
.meeting-toolbar-divider {
    width: 0.05rem;
    align-self: stretch;
    margin: 0.143rem 0.286rem;
    background: var(--gray-200);
    flex: none;
}

/* ---- 設定（音量・画質・背景） ---- */
.meeting-range {
    display: flex;
    align-items: center;
    gap: 0.714rem;
}

    /*
        site.css の input は幅100%・余白ありが既定。
        そのままだとつまみが潰れるので、ここで戻す。
    */
    .meeting-range input[type="range"] {
        flex: 1 1 auto;
        width: auto;
        padding: 0;
        margin: 0;
        min-width: 0;
    }

.meeting-range-value {
    flex: none;
    width: 3rem;
    text-align: right;
    font-size: 0.857rem;
    color: var(--gray-600);
    font-variant-numeric: tabular-nums;
}

/* 項目どうしが近すぎると、どの説明がどれのものか分からない */
#modal-meeting-settings .form-group {
    margin-bottom: 1.143rem;
}

    #modal-meeting-settings .form-group > label {
        display: block;
        margin-bottom: 0.286rem;
        font-size: 0.857rem;
        font-weight: 600;
    }

    /* チェックは横並びのまま。上の見出しとは別扱い */
    #modal-meeting-settings .form-group > label.meeting-check {
        display: flex;
        font-weight: 400;
    }

/* 同じ理由で、チェックも幅を戻す */
.meeting-check {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    margin: 0 0 0.286rem;
    cursor: pointer;
}

    .meeting-check input[type="checkbox"] {
        width: auto;
        padding: 0;
        margin: 0;
        flex: none;
    }

/* ---- トースト（Site.Toast） ---- */
/*
    読めば済む知らせ。ダイアログと違って押さなくても消える。
    画面のいちばん上に重ねる（モーダルより上には出さない）。
*/
.toast-area {
    position: fixed;
    right: 1.143rem;
    bottom: 1.143rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.429rem;
    pointer-events: none;
}

.toast-item {
    padding: 0.643rem 1rem;
    border-radius: 0.5rem;
    background: var(--gray-800, #1f2937);
    color: white;
    font-size: 0.857rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.18s, transform 0.18s;
    max-width: 22rem;
}

    .toast-item.is-shown {
        opacity: 1;
        transform: none;
    }

/* ---------------------------------------------------------------
   個人設定 ＞ コネクション（知り合い）
   --------------------------------------------------------------- */
.connection-page .content {
    margin-bottom: 1rem;
}

/*
    左に一覧、右に「増やす」。
    狭い画面では縦に積む（右の枠にはQRが入るので、詰めると読めない）。
*/
.connection-columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .connection-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.connection-block {
    margin-bottom: 0;
}

/* つながり1件。知り合い・届いた申請・出した申請で同じ形 */
.connection-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.643rem 0;
    border-top: 0.05rem solid var(--gray-200);
    min-width: 0;
}

    .connection-row:first-child {
        border-top: 0;
    }

.connection-row-body {
    min-width: 0;
    flex: 1 1 auto;
}

.connection-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 連絡先Id・会社・部署を1行に。狭いときは折り返す */
.connection-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.143rem 0.714rem;
}

.connection-row-org {
    color: var(--gray-700);
}

.connection-row-message {
    margin-top: 0.143rem !important;
    color: var(--gray-700);
}

/*
    操作は縮めない。
    縮むと「承認する」が2行に割れて、行の高さが件数ごとにばらつく。
*/
.connection-row-actions {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    flex: none;
}

    .connection-row-actions .btn {
        padding: 0.357rem 0.714rem;
        font-size: 0.857rem;
    }

.connection-outgoing {
    margin-top: 1rem;
    padding-top: 0.857rem;
    border-top: 0.05rem solid var(--gray-200);
}

.connection-search .form-control {
    min-width: 0;
}

    /*
        **［探す］が2行に折れていた。**
        枠が狭いとボタンも縮められ、アイコンと「探す」が縦に積まれる。
        ボタンは中身なりの幅で固定し、余りは入力欄に受け取らせる。
    */
    .connection-search .btn {
        flex: none;
        white-space: nowrap;
    }

/* QRの使い方（i） */
.btn-icon.connection-info {
    width: 1.5rem !important;
    height: 1.5rem !important;
    color: var(--gray-500);
}

    .btn-icon.connection-info .material-symbols-outlined {
        font-size: 1rem;
    }

.connection-qr-help {
    padding: 0.571rem 0.714rem;
    border-radius: 0.5rem;
    background: var(--gray-50);
    border: 0.05rem solid var(--gray-200);
}

/* 連絡先Idとコピーボタン */
.connection-my-id-row {
    gap: 0.286rem;
    min-width: 0;
}

/* リンクのコピーとQRの作り直し。狭いときは縦に積む */
.connection-qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.429rem;
    margin-top: 0.571rem;
}

    .connection-qr-actions .btn {
        flex: none;
        padding: 0.357rem 0.714rem;
        font-size: 0.857rem;
        gap: 0.25rem;
    }

/* 探した結果。見つからなかったときもこの枠に出す */
.connection-result {
    margin-top: 0.571rem;
    padding: 0.571rem 0.857rem;
    border-radius: 0.5rem;
    background: var(--gray-50);
    border: 0.05rem solid var(--gray-200);
}

.connection-divider {
    margin: 1rem 0;
    border-top: 0.05rem solid var(--gray-200);
}

.connection-qr {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

    .connection-qr svg {
        flex: none;
        border: 0.05rem solid var(--gray-200);
        border-radius: 0.5rem;
    }

.connection-qr-side {
    min-width: 0;
    flex: 1 1 10rem;
}

.connection-my-id {
    word-break: break-all;
}

/* ---- QR・リンクから開く申請の確認画面 ---- */
.connect-card {
    max-width: 32rem;
    margin: 2rem auto;
}

.connect-person {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 0.05rem solid var(--gray-200);
}

.connect-actions {
    padding-top: 1rem;
}

.connect-empty {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--gray-500);
}

    .connect-empty .material-symbols-outlined {
        font-size: 2.5rem;
        color: var(--gray-300);
    }

/* ---- 同じ会社の人（コネクション画面の社員一覧） ---- */
.connection-directory-head {
    gap: 0.5rem;
}

/* 絞り込みは見出しの右。人数が多いと目で探すのがつらい */
.connection-filter {
    max-width: 16rem;
    padding: 0.357rem 0.714rem;
    font-size: 0.857rem;
}

/*
    人数ぶん縦に伸びると、下にある枠へ届かなくなる。
    枠の中でスクロールさせる。
*/
.connection-directory {
    max-height: 24rem;
    overflow-y: auto;
}

/* タスクのまとめて登録（音声入力・フリーテキスト） */
.bulk-task-tools {
    flex-wrap: wrap;
    gap: 0.571rem;
}

/* 録音中のマイクボタン */
.btn.is-recording {
    border-color: var(--danger);
    background: #fef2f2;
    color: var(--danger);
}

    .btn.is-recording .material-symbols-outlined {
        animation: voice-pulse 1.2s ease-in-out infinite;
    }

.bulk-task-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.571rem;
    padding: 1.143rem 0.571rem;
    text-align: center;
}

.bulk-task-result {
    margin: 0;
    padding-left: 1.286rem;
    text-align: left;
    font-size: 0.929rem;
    color: var(--gray-700);
    max-height: 16rem;
    overflow-y: auto;
}

    .bulk-task-result li {
        margin-bottom: 0.214rem;
    }

/* ===========================================================
   ワークフロー
   =========================================================== */

/* ---- 一覧 ---- */
/*
    ワークフローの実行履歴の表（2026-09-16 の指摘）。

    素の .table のままだったので、左の余白が 0.5rem しかなく名前が枠に張り付き、
    小さい文字（起動・実行日時・所要）は上そろえで、状態の札と縦がずれていた。
    ・左右の余白は一覧の他の表（.master-table）と同じ 1rem
    ・中身は縦中央
    ・**1行に収める**。器（.table-scroll）が横に動くので、広がっても崩れない
*/
.wf-run-table th,
.wf-run-table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    white-space: nowrap;
}

    /*
        表の中のボタンは**横に並べる**（［内容を見る］／［再開］／［詳細］）。
        `button.btn` は `display: flex !important` なのでブロックとして改行してしまい、
        中断・失敗の行だけ2段になって高さがそろわなかった。
        同じ強さで打ち消さないと、nowrap を指定していても次の行へ落ちる
    */
    .wf-run-table td button.btn {
        display: inline-block !important;
        vertical-align: middle;
    }

/*
    カードは縦に積む。**操作の行（フッター）はカードの下端に付ける**（2026-09-16 の指摘）。
    説明文の長さでボタンの位置が上下してしまい、隣のカードと高さがそろわなかった。
    ．agent-space が行の中で高さをそろえているので、本文を伸ばせば下端で並ぶ
*/
.workflow-content {
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.workflow-body {
    flex: 1 1 auto;
    min-height: 0;
}

    .workflow-content:hover {
        background: var(--gray-50, #f9fafb);
    }

/*
    カード下部の操作。本文とは行を分ける。
    ボタンは縮まないため、本文と同じ行に置くとカードの幅（20rem）では
    本文が数文字ずつしか入らなくなる。
*/
.workflow-actions {
    margin-top: 0.857rem;
    padding-top: 0.857rem;
    border-top: 0.05rem solid var(--gray-200);
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    /* 幅の足りないカードでも文字が潰れないよう、ボタンは中身なりの幅にする */
    .workflow-actions .btn {
        flex: none;
        padding: 0.357rem 0.714rem;
        font-size: 0.857rem;
        gap: 0.25rem;
    }

/*
    ステップ数・実行回数などの並び。
    2列に決め打ちすると、値の長い「起動」「最終」がぶつからない。
*/
.workflow-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.286rem 0.857rem;
    margin: 0.857rem 0 0;
    font-size: 0.857rem;
}

    .workflow-facts > div {
        display: flex;
        gap: 0.357rem;
        min-width: 0;
    }

    .workflow-facts dt {
        color: var(--gray-500);
        font-weight: 400;
        flex: none;
    }

    .workflow-facts dd {
        margin: 0;
        font-weight: 600;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 最終実行だけは日付と時刻で長い。半分の幅では切れるため1行を使う */
    .workflow-facts > div:last-child {
        grid-column: 1 / -1;
    }

/* 最後の実行が失敗・中断で終わっているときの1行 */
.workflow-trouble {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 0.05rem solid var(--gray-200);
    color: var(--gray-400);
}

    .workflow-trouble .material-symbols-outlined {
        color: #f87171;
        font-size: 1.1rem;
    }

/* ---- 実行の詳細：進み具合 ---- */
/*
    まだ動いている実行の「いまどこか」。
    手動実行はその場で終わらないため、受け付けた後に見る先が要る。
*/
.wf-progress {
    padding: 0.857rem 1rem;
    border-radius: 0.5rem;
    background: var(--gray-50);
    border: 0.05rem solid var(--gray-200);
}

.wf-progress-mark {
    color: var(--primary);
    animation: wf-progress-spin 1.6s linear infinite;
}

@keyframes wf-progress-spin {
    to {
        transform: rotate(360deg);
    }
}

.wf-progress-bar {
    height: 0.357rem;
    border-radius: 0.25rem;
    background: var(--gray-200);
    overflow: hidden;
}

    .wf-progress-bar span {
        display: block;
        height: 100%;
        background: var(--primary);
        transition: width 0.3s;
    }

/* いま動いているステップ。記録の並びの中で見つけやすくする */
.wf-step.is-running {
    border-color: var(--primary);
}

/* ---- 編集画面 ---- */
/*
    全画面の見出し（nav）は既定で py-5（上下3rem）。

    ワークフローの編集では、そのぶん図と設定に渡せる高さが 100px ほど減る。
    プロジェクト詳細と同じ書き方で詰める（2026-09-17・標準の倍率で操作しにくい への対応）。
*/
.full-screen-page:has(.wf-page) > nav {
    padding: 0.5rem 1rem !important;
}

.wf-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
    min-width: 0;
    /* 余った高さは図と設定に配る。ここでスクロールはさせない */
    overflow: hidden;
    padding-bottom: 0.75rem;
}

/* 必須の印。ラベルの後ろに小さく置く */
.wf-required {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.7rem;
    font-weight: bold;
    vertical-align: middle;
}

/*
    上段（名前・説明・起動方法）。

    もとは2枚の板に分かれていた。標準の倍率では、板の余白と隙間だけで
    100px ほど使っており、そのぶん図と設定の高さが削られていたため
    1枚にまとめ、上下の余白も詰めている（2026-09-17）。
*/
.content.wf-head {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    flex-shrink: 0;
    padding: 0.875rem 1.25rem;
}

.wf-head-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    min-width: 0;
}

.wf-head-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.wf-head-actions {
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* 起動方法。手動のときは中身を隠すため、高さが変わってもよい作りにする */
.wf-trigger-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 1.5rem;
    padding-top: 0.625rem;
    border-top: 0.05rem solid var(--gray-200);
}

    .wf-trigger-row > .wf-panel-title {
        padding-bottom: 0.5rem;
    }

/*
    ラジオ。
    site.css の先頭に input, select, textarea への一括指定（width:100% と
    padding:0.75rem 1rem）があり、Bootstrap の form-check-input より後に来るため
    ラジオが横幅いっぱいの箱になって崩れていた。ここで打ち消す。
*/
.wf-radio-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

.wf-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
}

    .wf-radio input[type="radio"] {
        width: 1rem;
        height: 1rem;
        min-width: 1rem;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        background-color: #fff;
        accent-color: var(--primary, #2563eb);
        cursor: pointer;
        flex-shrink: 0;
    }

    .wf-radio span {
        user-select: none;
    }

.wf-schedule {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 1rem;
    min-width: 0;
}

    .wf-schedule select,
    .wf-schedule input[type="time"] {
        width: auto;
        min-width: 6.5rem;
    }

.wf-schedule-days {
    display: flex;
    gap: 0.25rem;
}

/* 曜日は押して選ぶ。チェックボックスより指で押しやすく、選んだ結果も一目で分かる */
.wf-day {
    width: 2rem;
    height: 2.25rem;
    padding: 0;
    border: 0.05rem solid #d1d5db;
    border-radius: 0.375rem;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
}

    .wf-day:hover {
        background: #f3f4f6;
    }

    .wf-day.selected {
        border-color: var(--primary, #2563eb);
        background: var(--primary, #2563eb);
        color: #fff;
        font-weight: bold;
    }

/* 保存はできたが稼働にできない、という案内 */
.wf-warning {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: #fffbeb;
    border: 0.05rem solid #fde68a;
    color: #92400e;
    font-size: 0.875rem;
}

    .wf-warning ul {
        padding-left: 1.25rem;
        margin-top: 0.25rem;
    }

/*
    実行履歴のモーダルに出す理由。

    改行をそのまま見せ、区切りの無い長い文字列（URLなど）も必ず折り返す。
    折り返さないと、MCPのエラーのような長いURL入りの文でモーダルが横に伸びる。
    長い場合はモーダルの中だけを縦に動かす。
*/
.wf-run-message {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 60vh;
    overflow-y: auto;
}

.wf-body {
    display: flex;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
}

/*
    右の列。［ステップ］と［AIに作ってもらう］の2枚を切り替える。

    パレットと設定を縦に並べると、標準の倍率では設定の枠が数行しか残らない。
    切り替えにして、選んだ側に高さを全部渡している（2026-09-17）。
*/
.wf-side {
    flex: 0 0 20rem;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wf-side-tabs {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.2rem;
    border-radius: 0.5rem;
    background: var(--gray-100, #f3f4f6);
}

.wf-side-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--gray-600, #4b5563);
    font-size: 0.8rem;
    white-space: nowrap;
}

    .wf-side-tab .material-symbols-outlined {
        font-size: 1rem;
    }

    .wf-side-tab.is-active {
        background: white;
        color: var(--primary, #2563eb);
        font-weight: bold;
        box-shadow: 0 0.05rem 0.15rem var(--gray-300);
    }

/* 切り替えの中身。縦の余りはこちらが全部受け取る */
.wf-side-pane {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
}

    .wf-side-pane.d-none {
        display: none;
    }

.content.wf-palette {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
}

.wf-panel-title {
    font-weight: bold;
    font-size: 0.9rem;
}

/*
    ステップの一覧。

    縦1列だと8種類で 330px ほど使い、その下の設定が数行しか残らない。
    2列にして高さを半分にしている（2026-09-17）。
*/
.wf-palette-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
}

.wf-palette-item {
    display: flex;
    align-items: center;
    /* 2列に8種類を並べるので、余白は「成果物として保存」が収まる幅から逆算している */
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
    padding: 0.4rem 0.35rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    font-size: 0.8rem;
    text-align: left;
    cursor: grab;
    /* ドラッグ中に文字が選ばれると、掴んでいる感じが崩れる */
    user-select: none;
    touch-action: none;
}

    /* 2列に詰めるので、長い名前は折り返さず「…」で切る */
    .wf-palette-item .wf-palette-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wf-palette-item:hover:not(:disabled) {
        border-color: var(--gray-400);
        background: var(--gray-50, #f9fafb);
    }

    .wf-palette-item:disabled {
        cursor: not-allowed;
        opacity: 0.5;
        background: var(--gray-50, #f9fafb);
    }

    .wf-palette-item .material-symbols-outlined {
        flex-shrink: 0;
        font-size: 1rem;
        color: var(--gray-600, #4b5563);
    }


/* 追加できない理由。パレットの下に出す */
.wf-palette-warn {
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    background: #fffbeb;
    border: 0.05rem solid #fde68a;
    color: #92400e;
    font-size: 0.75rem;
    line-height: 1.6;
}

.wf-palette-note {
    font-size: 0.75rem;
    color: var(--gray-400);
    line-height: 1.6;
}

/* 図。縦にも横にも伸びうるため、この枠の中だけでスクロールさせる */
.content.wf-canvas {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: var(--gray-50, #f9fafb);
    position: relative;
}

    /* 余白へ落とすと末尾に足せる。落とせることを枠線で示す */
    .content.wf-canvas.is-drop {
        outline: 0.15rem dashed var(--primary, #2563eb);
        outline-offset: -0.3rem;
    }

/* 開始しか無いうちの案内。図の上に重ねる */
.wf-canvas-hint {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    max-width: 20rem;
    text-align: center;
    color: var(--gray-400);
    font-size: 0.8rem;
    line-height: 1.8;
    pointer-events: none;
}

.content.wf-inspector {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 0.875rem 1rem;
}

/* いま何を触っているか。板の見出しを兼ねる */
.wf-inspector-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 0.05rem solid var(--gray-200);
    font-weight: bold;
    font-size: 0.9rem;
}

    .wf-inspector-head .material-symbols-outlined {
        font-size: 1.1rem;
        color: var(--gray-600, #4b5563);
    }

    .wf-inspector-head-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 表示名を変えていると種別が分からなくなるので、後ろに小さく添える */
    .wf-inspector-head-type {
        flex-shrink: 0;
        margin-left: auto;
        padding: 0.05rem 0.375rem;
        border-radius: 0.25rem;
        background: var(--gray-100, #f3f4f6);
        color: var(--gray-600, #4b5563);
        font-size: 0.7rem;
        font-weight: normal;
    }

/*
    ［詳しい設定］。入れなくても動くものを畳んでおく場所。

    設定項目が多い、という指摘への対応（2026-09-17）。
    畳むのは「空でも動く」ものだけで、稼働に要る項目は畳まない。
*/
.wf-more {
    margin-top: 0.5rem;
}

    .wf-more > summary {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.375rem 0;
        color: var(--gray-600, #4b5563);
        font-size: 0.8rem;
        cursor: pointer;
        user-select: none;
        list-style: none;
    }

        /* 既定の三角は位置が揃わないので、自前の印を置く */
        .wf-more > summary::-webkit-details-marker {
            display: none;
        }

        .wf-more > summary::before {
            content: "";
            width: 0;
            height: 0;
            border-left: 0.3rem solid var(--gray-400);
            border-top: 0.25rem solid transparent;
            border-bottom: 0.25rem solid transparent;
        }

    .wf-more[open] > summary::before {
        border-left: 0.25rem solid transparent;
        border-right: 0.25rem solid transparent;
        border-top: 0.3rem solid var(--gray-400);
        border-bottom: none;
    }

    .wf-more[open] {
        padding-bottom: 0.25rem;
    }

/*
    図の倍率。

    「標準の倍率では操作しにくい」への対応（2026-09-17）。
    ブラウザ全体を縮めると設定の文字まで小さくなるので、図だけを縮められるようにする。
    枠の内側に貼り付けるため、図が長くなっても位置が動かない。
*/
.wf-zoom {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.2rem;
    border-radius: 0.5rem;
    border: 0.05rem solid var(--gray-200);
    background: white;
    box-shadow: 0 0.05rem 0.25rem var(--gray-300);
}

.wf-zoom-btn,
.wf-zoom-value {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    padding: 0 0.375rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--gray-600, #4b5563);
    font-size: 0.75rem;
}

.wf-zoom-btn {
    width: 1.75rem;
    padding: 0;
}

    .wf-zoom-btn .material-symbols-outlined {
        font-size: 1.05rem;
    }

    .wf-zoom-btn:hover,
    .wf-zoom-value:hover {
        background: var(--gray-100, #f3f4f6);
    }

.wf-zoom-value {
    min-width: 3rem;
}

/*
    AIに作ってもらう欄。

    0から組み立てるのが難しい、という指摘への対応（2026-09-17）。
    作るのは下書きだけで、保存も稼働も人が押す。
*/
.content.wf-ai {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
}

/* やり取り。伸びるのはここだけで、入力欄は下に残す */
.wf-ai-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wf-ai-msg {
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

    .wf-ai-msg.is-me {
        align-self: flex-end;
        max-width: 90%;
        background: var(--primary, #2563eb);
        color: white;
    }

    .wf-ai-msg.is-ai {
        background: var(--gray-100, #f3f4f6);
        color: var(--gray-800, #1f2937);
    }

    .wf-ai-msg.is-pending {
        color: var(--gray-500, #6b7280);
    }

/* 何を書けばよいか分からない、を埋めるための例。1度送ったら消す */
.wf-ai-samples {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wf-ai-sample {
    padding: 0.375rem 0.5rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    color: var(--gray-700, #374151);
    font-size: 0.75rem;
    line-height: 1.6;
    text-align: left;
}

    .wf-ai-sample:hover {
        border-color: var(--gray-400);
        background: var(--gray-50, #f9fafb);
    }

.wf-ai-input {
    flex-shrink: 0;
}

    /* 共通の input 一括指定に負けないよう、ここで高さを決める */
    .wf-ai-input textarea.form-control {
        min-height: 5rem;
        resize: vertical;
    }

.wf-ai-note {
    flex-shrink: 0;
    font-size: 0.7rem;
    line-height: 1.6;
    color: var(--gray-400);
}

/* 設定を進められない理由（エージェント未作成・帳票フォーマット0件） */
.wf-inspector-alert {
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    background: #fffbeb;
    border: 0.05rem solid #fde68a;
    color: #92400e;
    font-size: 0.75rem;
    line-height: 1.7;
}

    .wf-inspector-alert a {
        color: #92400e;
        font-weight: bold;
        text-decoration: underline;
    }

.wf-inspector-divider {
    height: 0.05rem;
    background: var(--gray-200);
    margin: 1rem 0;
}

.wf-inspector-empty {
    line-height: 1.7;
}

/* ---- フロー図（SVG） ---- */
.wf-node {
    cursor: pointer;
}

    /* 開始以外は掴んで並べ替えられる */
    .wf-node.is-movable {
        cursor: grab;
        /* 指で掴んだときに図のスクロールと取り合わないようにする */
        touch-action: none;
    }

    /* 入れ替え先として狙われている */
    .wf-node.is-drop .wf-node-box {
        stroke: var(--primary, #2563eb);
        stroke-width: 2;
        stroke-dasharray: 4 3;
    }

/* ドラッグ中は図の文字を選ばせない。選択が走ると掴んだ感じが崩れる */
body.wf-dragging {
    cursor: grabbing;
    user-select: none;
}

/* 指の先に付いてくる札。判定の邪魔をしないよう当たり判定を持たせない */
.wf-drag-ghost {
    position: fixed;
    z-index: 1080;
    transform: translate(0.5rem, 0.5rem);
    padding: 0.3rem 0.6rem;
    border-radius: 0.375rem;
    background: var(--primary, #2563eb);
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.wf-node-box {
    fill: white;
    stroke: var(--gray-300, #d1d5db);
    stroke-width: 1;
}

.wf-node:hover .wf-node-box {
    stroke: var(--gray-500, #6b7280);
}

.wf-node.is-selected .wf-node-box {
    stroke: var(--primary, #2563eb);
    stroke-width: 2;
}

.wf-node--start .wf-node-box,
.wf-node--end .wf-node-box {
    fill: var(--gray-100, #f3f4f6);
}

/* 図の中のアイコンは <g> に図形を入れている（icons.js）。線で描くので stroke で色を付ける */
.wf-node-icon {
    color: var(--gray-600, #4b5563);
}

.wf-node-type {
    font-size: 10px;
    fill: var(--gray-400, #9ca3af);
}

.wf-node-name {
    font-size: 12px;
    font-weight: bold;
    fill: var(--gray-800, #1f2937);
}

/* 設定が足りないステップの印 */
.wf-node-alert {
    fill: #f59e0b;
}

.wf-edge {
    fill: none;
    stroke: var(--gray-300, #d1d5db);
    stroke-width: 1.5;
}

/*
    矢印の当たり判定。
    見える線は 1.5px しかなく、そのままでは「矢印の上に落とす」が当たらない。
    透明な太い線を重ねて、掴みやすい幅にする。
*/
.wf-edge-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 18;
    pointer-events: stroke;
}

/* 差し込み先として狙われている矢印 */
.wf-edge-group.is-drop .wf-edge {
    stroke: var(--primary, #2563eb);
    stroke-width: 3;
}

.wf-edge-group.is-drop .wf-arrow {
    fill: var(--primary, #2563eb);
}

.wf-arrow {
    fill: var(--gray-300, #d1d5db);
}

.wf-edge-label {
    font-size: 10px;
    font-weight: bold;
}

    .wf-edge-label.is-true {
        fill: #059669;
    }

    .wf-edge-label.is-false {
        fill: #9ca3af;
    }

/*
    ステップの出口（●）。ここから引っ張ると次のステップへ繋がる。

    見える丸は小さく、当たり判定（.wf-port-hit）だけ大きい透明の丸にしてある。
    見えているとおりの大きさだと、指でもマウスでもほとんど掴めない。
*/
.wf-port-dot {
    fill: white;
    stroke: var(--gray-300, #d1d5db);
    stroke-width: 1.5;
}

/* すでに線が出ている出口は塗る。空いている出口と見分けるため */
.wf-port.is-connected .wf-port-dot {
    fill: var(--gray-300, #d1d5db);
}

.wf-port-hit {
    fill: transparent;
    cursor: crosshair;
}

.wf-port:hover .wf-port-dot {
    fill: var(--primary, #2563eb);
    stroke: var(--primary, #2563eb);
}

.wf-port-label {
    font-size: 10px;
    font-weight: bold;
    pointer-events: none;
}

    .wf-port-label.is-true {
        fill: #059669;
    }

    .wf-port-label.is-false {
        fill: #9ca3af;
    }

/* 引いている最中の線 */
.wf-link-preview {
    fill: none;
    stroke: var(--primary, #2563eb);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    pointer-events: none;
}

/* 線を繋ぐ先として狙われているステップ */
.wf-node.is-drop .wf-node-box {
    stroke: var(--primary, #2563eb);
    stroke-width: 2;
}

/*
    線を外す×。矢印に重ねたときだけ出す。
    常に出しておくと、ステップが増えるほど図が×だらけになる。
*/
.wf-edge-remove {
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
}

.wf-edge-group:hover .wf-edge-remove {
    opacity: 1;
    pointer-events: auto;
}

.wf-edge-remove-bg {
    fill: white;
    stroke: var(--gray-300, #d1d5db);
    stroke-width: 1;
}

.wf-edge-remove-mark {
    stroke: var(--gray-500, #6b7280);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.wf-edge-remove:hover .wf-edge-remove-bg {
    stroke: #f87171;
}

.wf-edge-remove:hover .wf-edge-remove-mark {
    stroke: #ef4444;
}

/* ---- ワークフローの実行履歴 ---- */
.wf-step-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-600, #4b5563);
    font-size: 0.8rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* 入力と出力を並べる。どこで内容が変わったか見比べるため */
.wf-step-io {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 900px) {
    .wf-step-io {
        grid-template-columns: 1fr;
    }
}

/* AIの出力は長くなるため、高さを抑えて中でスクロールさせる */
.wf-step-text {
    margin: 0.25rem 0 0;
    padding: 0.5rem 0.625rem;
    max-height: 12rem;
    overflow: auto;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.375rem;
    background: var(--gray-50, #f9fafb);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- チャットの添付（利用者が付けた画像・ファイル） ---- */

/*
    吹き出しの上に出す。生成ファイル（message-file）とは別に持つのは、
    画像をサムネイルで見せる必要があり、並びの規則も違うため。
*/
.message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.429rem;
    margin-bottom: 0.429rem;
    /* 送信側の吹き出しは右寄せなので、添付も右へそろえる */
    justify-content: inherit;
}

.message-row--right .message-attachments {
    justify-content: flex-end;
}

.message-attachment-image {
    display: block;
    max-width: 12rem;
    border-radius: 0.571rem;
    overflow: hidden;
    border: 0.05rem solid var(--gray-200);
    background: var(--gray-50);
}

    .message-attachment-image img {
        display: block;
        width: 100%;
        /* 縦長の写真で吹き出しが画面を埋めないよう、高さで止める */
        max-height: 12rem;
        object-fit: cover;
    }

.message-attachment-file {
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
    max-width: 100%;
    padding: 0.286rem 0.643rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.571rem;
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 0.786rem;
    text-decoration: none;
}

    .message-attachment-file:hover {
        border-color: var(--gray-400);
        background: var(--gray-100);
        color: var(--gray-700);
    }

    .message-attachment-file .material-symbols-outlined {
        flex-shrink: 0;
    }

.message-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- 入力欄の添付（送信待ち） ---- */

/*
    送る前に何を付けているかを見せ、取り消せるようにする。
    入力欄の上に置くのは、本文を書いている最中でも視界に入るため。
*/
.composer-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.429rem;
    margin-bottom: 0.571rem;
}

.composer-attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
    max-width: 14rem;
    padding: 0.286rem 0.286rem 0.286rem 0.571rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 1rem;
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 0.786rem;
}

    /* 上げ終わるまでは取り消せない。押せない状態が見た目で分かるようにする */
    .composer-attachment.is-uploading {
        opacity: 0.6;
    }

    .composer-attachment .material-symbols-outlined {
        flex-shrink: 0;
        color: var(--gray-500);
    }

.composer-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-attachment-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.286rem;
    height: 1.286rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    flex-shrink: 0;
}

    .composer-attachment-remove:hover {
        background: var(--gray-200);
        color: var(--gray-700);
    }

/* =========================================================
   狭い画面への対応（利用者側）

   狙いは「スマートフォンでも機能が使えること」。
   ・左のメニューは引き出しにして、画面の幅を本文に使う
   ・横に並んでいるものは縦に積む
   ・表は枠の中で横スクロールさせる（列を消すと項目が見えなくなる）
   ・押すところは指で押せる大きさにする
   区切りは 900px。それ以下でメニューを引き出しにする。
   ========================================================= */

/* 引き出しを開いている間、後ろを覆う。広い画面では出さない */
.nav-drawer-backdrop {
    display: none;
}

/* 開閉ボタンは狭い画面でだけ出す */
.nav-drawer-toggle {
    display: none;
}

@media (max-width: 900px) {

    /* ---- サイドメニューを引き出しにする ---- */
    .share-menu {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1040;
        /* 画面外へ逃がしておく。display:none にするとアニメーションが効かない */
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

        .share-menu.is-open {
            transform: translateX(0);
        }

    .nav-drawer-toggle {
        display: inline-flex;
    }

    .nav-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1030;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

        .nav-drawer-backdrop.is-open {
            opacity: 1;
            pointer-events: auto;
        }

    /* ---- 本文の余白を詰める。狭い画面では余白より中身を優先する ---- */
    .content {
        padding: 1rem;
        border-radius: 0.75rem;
    }

    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* ---- 横並びを縦に積む ---- */
    .wf-head,
    .wf-head-actions,
    .builder-body {
        flex-wrap: wrap;
    }

    .wf-head-fields {
        grid-template-columns: 1fr;
    }

    /* ---- 表は枠の中で横に動かす。列を落とすと何の値か分からなくなる ---- */
    .table-responsive,
    .notice-table-wrap,
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        /* 横に動かす前提なので、セルは折り返さない */
        .table-scroll > .table {
            white-space: nowrap;
        }

    /* ---- 指で押せる大きさにする（44px相当） ---- */
    .btn-icon,
    .message-action {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    /* ---- チャット ---- */
    .chat-composer {
        padding: 0.75rem;
        /* 端末下部のホームバーに隠れないようにする */
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    .chat-composer-inner {
        /* ボタンが多いので折り返す。入力欄は必ず1行ぶん確保する */
        flex-wrap: wrap;
    }

        .chat-composer-inner .composer-textarea {
            order: -1;
            width: 100%;
            flex: 1 0 100%;
        }

    /* 幅の制限は .message 側（既定75%）。.message-bubble には付いていない */
    .message {
        max-width: 88%;
    }

    .message-attachment-image {
        max-width: 8rem;
    }

        .message-attachment-image img {
            max-height: 8rem;
        }

    /* ---- ワークフローの編集：3列を縦に積む ---- */
    .wf-body {
        flex-direction: column;
        overflow-y: auto;
    }

    .wf-side {
        flex: 0 0 auto;
    }

    .content.wf-canvas {
        /* 縦に積むと図がつぶれるため、最低の高さを確保する */
        min-height: 18rem;
        flex: 0 0 auto;
    }

    .content.wf-inspector {
        flex: 0 0 auto;
        overflow-y: visible;
    }

    /* 縦に積むので、右の欄も高さを取り合わない */
    .wf-side-pane {
        flex: 0 0 auto;
    }

    .content.wf-ai {
        flex: 0 0 auto;
    }

    .wf-ai-log {
        flex: 0 0 auto;
        max-height: 20rem;
    }

    /* 図は指で動かすため、倍率の操作が邪魔にならない位置へ */
    .wf-zoom {
        right: 0.5rem;
        bottom: 0.5rem;
    }

    /* 縦に積んだぶん、枠ごとスクロールさせる */
    .full-screen-page.is-fixed .render-body-full-screen {
        overflow-y: auto;
    }

    .wf-page {
        overflow: visible;
    }
}

/* ---- さらに狭い端末（スマートフォン） ---- */
@media (max-width: 576px) {

    /* 引き出しは画面幅いっぱいまで使わない。後ろが見えていると閉じ方が分かる */
    .share-menu {
        min-width: 84vw;
        max-width: 84vw;
    }

    /* モーダルは画面の端まで使う */
    .modal-dialog {
        margin: 0.5rem;
    }

    /* 列数を決め打ちしているところを1列にする（auto-fit のものは自然に1列になる） */
    .dashboard-stat-grid,
    .dashboard-bottom-grid,
    .dashboard-quick-list.is-dense,
    .org-quota-grid,
    .builder-head-fields {
        grid-template-columns: 1fr;
    }

    /*
        チャット一覧の引き出し。16remは狭く、チャット名がすぐ切れる。
        メインの引き出し（share-menu）と同じ幅にそろえる。
        閉じている位置も幅に合わせて広げないと、画面の左に少しはみ出して残る。
    */
    .side-menu {
        width: 84vw;
        max-width: 22rem;
        left: -100vw;
    }

    /*
        要約詳細のタスク。操作のボタンが横に並ぶと内容が数文字ずつ折り返されるため、
        操作は下の行へ回して、内容に幅を渡す。
    */
    .summary-task-view {
        flex-wrap: wrap;
    }

    .summary-task-actions {
        flex-basis: 100%;
        justify-content: flex-end;
        margin-top: 0.25rem;
    }

    /* タスク一覧の検索欄。並び順の選択が縮みすぎて読めなくなるのを防ぐ */
    .task-search-row .form-control {
        width: auto;
        min-width: 8rem;
    }
}

/*
    スマートフォンでの高さ。
    100vh / 100% はブラウザのバー（URL欄など）を含んだ高さなので、
    そのままだと画面の下端が隠れて入力欄や送信ボタンへ届かないことがある。
    dvh に対応している端末では、実際に見えている高さを使う。
*/
@supports (height: 100dvh) {
    html {
        height: 100dvh;
    }

    .share-menu {
        height: 100dvh;
    }
}

/*
    要約に失敗したカード。
    成功と同じ見た目だと「要約が空の会議」に見えてしまうため、
    処理中（琥珀）とは別に赤で区別する。
*/
.icon-base.failed-icon {
    background-color: var(--red-100);
}

    .icon-base.failed-icon .material-symbols-outlined {
        color: var(--red-700);
    }

.failed-barch {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    color: var(--red-700);
    background-color: var(--red-100);
    font-size: 0.8rem;
    border-radius: 1rem;
    padding: .25rem .75rem;
    font-weight: bold;
}

.summary-frame--failed .summary-card {
    border-left: 3px solid var(--red-500);
}

.summary-content--failed p {
    color: var(--red-700);
}

/* 詳細で失敗の理由を出す帯。バッジは詳細では絶対配置にしない */
.failed-barch.position-static {
    position: static;
    transform: none;
    right: auto;
}

.summary-failed-notice {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .75rem 1rem;
    border-radius: .5rem;
    color: var(--red-700);
    background-color: var(--red-100);
}

    .summary-failed-notice .material-symbols-outlined {
        color: var(--red-700);
    }

/* 組織切り替えの一覧。所属が増えても、下の「追加」とキャンセルが隠れないようにする。
   画面の高さに合わせるが、狭い画面でも数件は見える高さを残す */
.organization-list-scroll {
    max-height: min(24rem, 45vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 受信が続いていることを本文の末尾で示す。
   ツールを使う会話では、途中まで答えてから次の呼び出しの結果を待つため、
   見た目には答え終わったのに送信できない時間が生まれる。
   点滅する印を残して「まだ受け取っている」と分かるようにする */
.message-row--streaming .message-content::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 1em;
    margin-left: 0.125rem;
    border-radius: 0.125rem;
    background: var(--gray-600);
    opacity: 0.35;
    vertical-align: text-bottom;
    animation: message-streaming 1.2s infinite ease-in-out;
}

@keyframes message-streaming {
    0%, 100% {
        opacity: 0.15;
    }

    50% {
        opacity: 0.55;
    }
}

/* 動きを減らす設定の利用者には点滅させない（印は残す） */
@media (prefers-reduced-motion: reduce) {
    .message-row--streaming .message-content::after {
        animation: none;
    }
}

/* ===== スケジュール（カレンダー） ===== */

/*
    上のバーは1行に収める。2行に折れるとカレンダーの表示領域が減るため、
    幅が足りないときはプルダウンと検索欄を縮める（狭い画面だけ折り返す）。
*/
.schedule-head {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

    .schedule-head > * {
        flex: 0 0 auto;
    }

.schedule-modes,
.schedule-nav {
    white-space: nowrap;
}

.schedule-period {
    font-weight: bold;
    font-size: 1rem;
    color: var(--gray-800);
    white-space: nowrap;
}

.schedule-member {
    flex: 0 1 10rem !important;
    width: auto;
    min-width: 7rem;
}

.schedule-organization {
    /* 会社名は「【API】コムテックス株式会社」のように長い。広いときは伸ばし、足りないときは縮める */
    flex: 1 1 12rem !important;
    width: auto;
    min-width: 8rem;
    max-width: 20rem;
}

/* ---- 月間 ---- */

/*
    月は「曜日の見出し」＋「週の行」で組む。

    表（table）にしないのは、1マスに何件も予定が入って高さが揃わないため。
    grid なら行ごとに高さが決まり、少ない週は詰まる。
*/
.schedule-weekdays,
.schedule-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule-weekday {
    padding: 0.5rem 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 0.05rem solid var(--gray-200);
}

    .schedule-weekday:first-child { color: var(--red-500); }
    .schedule-weekday:last-child { color: var(--primary); }

/*
    月間のマスの低さ。**もう1予定ぶん高くする**（利用者の指摘・2026-09-17）。

    1件（.schedule-chip）は「件名」「時刻」の2行＋上下の余白で 2.275rem、
    件と件のあいだが 0.125rem なので、1予定ぶんは 2.4rem。
    7rem では見出し（1.625rem）と余白（0.5rem）を引いた残りに2件しか入らず、
    3件目から「＋n件」に落ちていた。
*/
.schedule-cell {
    min-height: 9.4rem;
    padding: 0.25rem;
    border-right: 0.05rem solid var(--gray-200);
    border-bottom: 0.05rem solid var(--gray-200);
    overflow: hidden;
}

    .schedule-cell:last-child { border-right: none; }

/* 前後の月のマス。数字だけ薄くして、予定は同じ濃さで出す */
.schedule-cell--muted .schedule-cell-day { color: var(--gray-400); }

/*
    土日の色。

    平日と見分けが付けばよいので、**うっすらとだけ**。
    予定の色（塗り）より濃くすると、予定のほうが読みにくくなる。
*/
.schedule-cell--saturday { background: #eff6ff; }
.schedule-cell--sunday { background: #fef2f2; }

/* 今日はいちばん強く出す。土日と重なったら今日を優先 */
.schedule-cell--today,
.schedule-cell--today.schedule-cell--saturday,
.schedule-cell--today.schedule-cell--sunday {
    /* 今日は淡い黄色。土日の色より目立つが、予定の文字は黒のまま読める */
    background: #fdf9d8;
}

/*
    日にちの数字はマスの中央、「＋」は右端。

    両端に同じ幅の枠（1fr）を取り、真ん中（auto）へ数字を入れる。
    こうすると「＋」の幅に引っ張られず、数字がマスのまん中に来る
    （flex で margin: auto だと、＋のぶんだけ数字が左へずれる）。
*/
.schedule-cell-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.25rem;
    /* 高さを決めておく。帯（.schedule-bands）の位置をここから測るため */
    height: 1.25rem;
    margin-bottom: 0.375rem;
}

.schedule-cell-day {
    /* まん中の枠。左端の枠は空けたままにする */
    grid-column: 2;
    justify-self: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--gray-700);
}

/*
    「＋」はマスの左上に常に出す（黒い丸に白い＋）。
    触れたときだけ出す形だと、追加できることに気づけない
*/
.schedule-cell-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #1f1f1f;
    color: #fff;
    cursor: pointer;
}

    .schedule-cell-add:hover { background: #000; }

    .schedule-cell-add .material-symbols-outlined {
        font-size: 1rem !important;
        line-height: 1;
    }

/* 月間のマスは小さいので「＋」をひと回り小さくする（週間・日の見出しはそのまま） */
.schedule-cell .schedule-cell-add {
    width: 1rem;
    height: 1rem;
}

    .schedule-cell .schedule-cell-add .material-symbols-outlined {
        font-size: 0.75rem !important;
    }

/* 月間の「＋」は右端の枠に置く（日にちはまん中の枠） */
.schedule-cell-head .schedule-cell-add {
    grid-column: 3;
    justify-self: end;
}

.schedule-cell-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    /*
        その日にかかる帯のぶんだけ空ける（--bands は**マスごと**に持つ段数）。
        週の行でまとめて空けると、通しの予定が無い日まで下がって空きができる
    */
    padding-top: calc(var(--bands, 0) * 3rem);
}

/* ---- 日をまたぐ予定の帯 ---- */
/*
    週の行（grid）に重ねて置く。マスの見出し（＋と日付）の下から始め、
    左端と幅は列の位置（--band-from / --band-span）から 1/7 刻みで決める。
    帯そのものはマスの外にあるため、ドロップ先の判定は下のマスで行う（ドラッグ中は帯を素通しにする）。
*/
.schedule-week {
    position: relative;
}

.schedule-bands {
    position: absolute;
    top: calc(0.25rem + 1.25rem + 0.375rem);
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
}

.schedule-band {
    position: absolute;
    top: calc(var(--band-lane, 0) * 3rem);
    left: calc(var(--band-from, 0) * 100% / 7 + 0.125rem);
    width: calc(var(--band-span, 1) * 100% / 7 - 0.5rem);
    /* 通常の予定（2行）と同じ高さに見えるよう、線のぶんを足しておく */
    height: 2.75rem;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.125rem 0.375rem 0.125rem 0;
    border: none;
    border-bottom: 0.25rem solid var(--gray-500);
    border-radius: 0.25rem 0.25rem 0 0;
    font-size: 0.75rem;
    text-align: left;
    color: var(--gray-900);
    cursor: grab;
    pointer-events: auto;
    overflow: hidden;
}

    .schedule-band:hover {
        filter: brightness(0.97);
    }

    .schedule-band.schedule-chip--readonly {
        padding-left: 1rem;
        cursor: default;
    }

/* 前の週から続く／次の週へ続く印 */
.schedule-band--before {
    border-top-left-radius: 0;
}

.schedule-band--after {
    border-top-right-radius: 0;
}

    .schedule-band--after::after {
        content: "";
        flex: 0 0 auto;
        width: 0;
        height: 0;
        margin-left: auto;
        border-top: 0.3rem solid transparent;
        border-bottom: 0.3rem solid transparent;
        border-left: 0.35rem solid var(--gray-500);
    }

/* ドラッグ中は帯を素通しにして、下のマスへ落とせるようにする */
.schedule-drag-active .schedule-band {
    pointer-events: none;
}

/* ---- 予定の見た目 ---- */
/*
    塗りつぶしではなく、左の縦バーに予定の色を出す。
    1件は「件名（青）」「時刻（黒）」の2行。左端に掴み手の印を置く。
    月間・週間・日で同じ部品を使う（大きさだけ変える）。
*/
.schedule-chip,
.schedule-row {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    width: 100%;
    padding: 0.125rem 0.25rem 0.125rem 0;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    text-align: left;
    color: var(--gray-900);
    background: transparent;
    cursor: pointer;
}

/* 掴み手（四方向の矢印）。目印であって、掴めるのはチップ全体 */
.schedule-chip-handle {
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--gray-500);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3Cpath d='M9 6l3-3 3 3M9 18l3 3 3-3M6 9l-3 3 3 3M18 9l3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3Cpath d='M9 6l3-3 3 3M9 18l3 3 3-3M6 9l-3 3 3 3M18 9l3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 縦バー＋2行。バーの色は予定の色（.schedule-color-*）から取る */
.schedule-chip-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0.375rem;
    border-left: 0.25rem solid var(--schedule-color, #7fb7de);
    line-height: 1.35;
}

/* 件名は1行で切る。折り返すとマスの高さが件数で大きく変わる */
.schedule-chip-title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    color: #1d4ed8;
}

.schedule-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-chip-time {
    color: var(--gray-900);
    white-space: nowrap;
}

.schedule-chip-mark {
    flex: 0 0 auto;
    color: var(--gray-500);
}

/* 重ねて出すタスク。予定と間違えないよう、バーを点線にして件名も灰色にする */
.schedule-task {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.125rem 0.25rem 0.125rem 1rem;
    font-size: 0.75rem;
    color: var(--gray-600);
    background: transparent;
    cursor: default;
}

    .schedule-task .schedule-chip-body {
        border-left-style: dashed;
        border-left-color: var(--gray-400);
    }

    .schedule-task .schedule-chip-title {
        color: var(--gray-700);
    }

.schedule-task--done {
    opacity: 0.5;
    text-decoration: line-through;
}

/* ---- 週間 ---- */

.schedule-week-view {
    display: flex;
    flex-direction: column;
}

.schedule-day {
    border-bottom: 0.05rem solid var(--gray-200);
}

    .schedule-day:last-child { border-bottom: none; }

.schedule-day--saturday { background: #eff6ff; }
.schedule-day--sunday { background: #fef2f2; }

.schedule-day--today,
.schedule-day--today.schedule-day--saturday,
.schedule-day--today.schedule-day--sunday {
    background: #fdf9d8;
}

.schedule-day-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--gray-50);
    border-bottom: 0.05rem solid var(--gray-200);
}

.schedule-day-name {
    font-weight: bold;
    font-size: 0.8rem;
    color: var(--gray-500);
}

.schedule-day-date {
    font-weight: bold;
    color: var(--gray-800);
}

.schedule-day-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
}

.schedule-day-empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gray-400);
}

/* 週間の1件。月間より少し大きい */
.schedule-row {
    padding: 0.25rem 0.5rem 0.25rem 0.125rem;
    font-size: 0.875rem;
}

    .schedule-row .schedule-chip-handle {
        width: 1rem;
        height: 1rem;
        margin-right: 0.125rem;
    }

    .schedule-row .schedule-chip-time {
        font-size: 0.8rem;
    }

/* すべての組織を出しているときだけ添える組織名 */
.schedule-row-organization {
    flex: 0 0 auto;
    padding: 0.0625rem 0.375rem;
    border-radius: 1rem;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.7rem;
    font-weight: normal;
}

/* 週間のタスクは予定と同じ行の形にして高さを揃える */
.schedule-row.schedule-task {
    padding-left: 1.25rem;
    color: var(--gray-600);
    cursor: default;
}

/* ---- ドラッグでの移動 ---- */

/* 掴めることが分かるようにする。掴んでいる間は薄くする */
.schedule-chip,
.schedule-row:not(.schedule-task) {
    cursor: grab;
}

    .schedule-chip:hover .schedule-chip-handle,
    .schedule-row:hover .schedule-chip-handle {
        background-color: var(--gray-800);
    }

/*
    他の人の予定。

    **押せる見た目にしない。** 開いても直せないので、
    手の形も影も付けず、色だけを薄くして「読むもの」に見せる
*/
.schedule-chip--readonly {
    padding-left: 1rem;
    cursor: default;
    opacity: 0.8;
}

    .schedule-chip--readonly:hover {
        box-shadow: none;
    }

    .schedule-chip--readonly .schedule-chip-title {
        color: var(--gray-700);
    }

/*
    参加している予定（2026-09-18）。

    **色は変えない。** 色は予定そのものの目印なので、上書きすると
    主催者の付けた色が伝わらなくなる。左端に破線を1本足して
    「自分で入れたものではない」ことだけを見せる。
*/
.schedule-chip--invited {
    border-left: 0.1875rem dashed var(--gray-400);
}

/* プライベートに切り替えたときの「参加者」。押せないことを薄さで見せる */
.schedule-participants--off {
    opacity: 0.5;
}

/* 誰の打ち合わせか（自分が入れた予定でないときだけ、見出しの横に添える） */
.schedule-owner-note {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.schedule-dragging {
    opacity: 0.4;
}

/* 落とせる場所。枠を出して、どこへ入るのかを見せる */
.schedule-drop {
    outline: 0.125rem dashed var(--primary);
    outline-offset: -0.125rem;
    background: var(--indigo-50);
}

/* ---- 日 ---- */
/*
    1日ぶんだけを全幅で出す。週間と同じ日の一覧だが、
    読むことが目的なので行を少し大きくし、時刻の欄をそろえる。
*/
.schedule-day-view .schedule-day-head {
    padding: 0.75rem 1.25rem;
}

.schedule-day-view .schedule-day-date {
    font-size: 1.071rem;
}

.schedule-day-view .schedule-day-body {
    padding: 0.75rem 1.25rem;
    gap: 0.375rem;
}

.schedule-day-view .schedule-row {
    padding: 0.375rem 0.75rem 0.375rem 0.25rem;
    font-size: 0.929rem;
}

.schedule-day-view .schedule-row .schedule-chip-time {
    font-size: 0.857rem;
}

/* 日付を押すと日表示へ。押せることが分かる程度に */
a.schedule-cell-day {
    color: inherit;
    text-decoration: none;
    border-radius: 0.286rem;
    padding: 0 0.214rem;
}

    a.schedule-cell-day:hover {
        background: var(--indigo-50);
        color: var(--primary);
    }

/* ---- 検索 ---- */
.schedule-search-form {
    flex: 0 1 14rem !important;
    min-width: 9rem;
    /* site.css の form は縦積み。ここは横に並べる（入力と虫めがねが上下に割れていた） */
    flex-direction: row;
    align-items: center;
    gap: 0.429rem;
}

.schedule-search-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.schedule-search-filter {
    width: 14rem;
}

.schedule-search-summary {
    gap: 0.5rem;
}

.schedule-search-list {
    display: flex;
    flex-direction: column;
    gap: 0.286rem;
}

/* 1件＝1行。押すと編集のモーダル */
.schedule-search-row {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    width: 100%;
    padding: 0.571rem 0.714rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    text-align: left;
    color: var(--gray-800);
    cursor: pointer;
}

    .schedule-search-row:hover {
        background: var(--gray-50);
        border-color: var(--gray-300);
    }

.schedule-search-date {
    flex: 0 0 11rem;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.schedule-search-day {
    font-weight: bold;
    font-size: 0.857rem;
}

.schedule-search-time {
    font-size: 0.786rem;
    color: var(--gray-500);
}

/* 予定の色は帯で出す（塗りつぶすと本文が読みにくい） */
.schedule-search-color {
    flex: none;
    width: 0.286rem;
    height: 2rem;
    border-radius: 0.143rem;
}

.schedule-search-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.schedule-search-title {
    font-size: 0.929rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-search-memo {
    font-size: 0.786rem;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-search-organization {
    flex: none;
    max-width: 12rem;
    padding: 0.071rem 0.5rem;
    border-radius: 1rem;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.714rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .schedule-search-date {
        flex-basis: 7rem;
    }

    .schedule-search-organization {
        display: none;
    }
}

/* ---- 色 ---- */

/*
    予定の色。**決まった中からしか選べない。**
    カレンダーでは左の縦バー（--schedule-color）に、検索の一覧と登録の見本では塗りに使う。
    カレンダーのチップは塗らないので、直後で背景を打ち消している。
*/
.schedule-color-blue { --schedule-color: #2563eb; background: var(--schedule-color); }
.schedule-color-red { --schedule-color: #dc2626; background: var(--schedule-color); }
.schedule-color-orange { --schedule-color: #ea580c; background: var(--schedule-color); }
.schedule-color-amber { --schedule-color: #b45309; background: var(--schedule-color); }
.schedule-color-green { --schedule-color: #15803d; background: var(--schedule-color); }
.schedule-color-sky { --schedule-color: #0369a1; background: var(--schedule-color); }
.schedule-color-purple { --schedule-color: #7c3aed; background: var(--schedule-color); }
.schedule-color-gray { --schedule-color: #4b5563; background: var(--schedule-color); }

.schedule-cell-body .schedule-chip,
.schedule-day-body .schedule-row {
    background: transparent;
}

.schedule-bands .schedule-band {
    background: #eef3fb;
}

    .schedule-cell-body .schedule-chip:not(.schedule-chip--readonly):hover,
    .schedule-day-body .schedule-row:not(.schedule-chip--readonly):not(.schedule-task):hover {
        background: rgba(0, 0, 0, 0.05);
    }

/* ---- モーダルの中 ---- */

/*
    予定の登録・編集は**2列で並べる**（利用者の指摘・2026-09-17「横長2行でもOK」）。

    共通の `form` は縦1列の flex（gap 1rem）なので、grid で置き換える。
    対になるもの（開始／終了、備考／繰り返し）が横に並び、
    幅いっぱいで読みたいもの（件名・切り替え・色・複製・組織）は
    `.schedule-form-full` で2列ぶんに広げる。

    **列の高さはそろえない**（align-items: start）。そろえると、
    繰り返しの囲みが開いたときに隣の「備考」まで引き伸ばされる。
*/
.schedule-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1rem 1.25rem;
}

.schedule-form-full {
    grid-column: 1 / -1;
}

/* 狭い画面では1列へ戻す（日付＋時刻が1行に収まらなくなるため） */
@media (max-width: 700px) {
    .schedule-form {
        grid-template-columns: 1fr;
    }
}

.schedule-datetime {
    gap: 0.5rem;
}

.schedule-time {
    max-width: 8rem;
}

.schedule-interval {
    max-width: 5rem;
}

/*
    繰り返しの設定はひとまとまりに見せる。

    種類・間隔・曜日・終わりがそのまま縦に並ぶと、
    どこまでが繰り返しの話なのかが分からない。囲って先頭に要約を置く。
*/
.schedule-recurrence-detail {
    margin-top: 0.5rem;
    padding: 0.75rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    background: var(--gray-50);
}

.schedule-recurrence-summary {
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.05rem dashed var(--gray-300);
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--gray-800);
}

    .schedule-recurrence-summary:empty {
        display: none;
    }

.schedule-until,
.schedule-copy-date {
    max-width: 11rem;
}

/* 追加した複製先の日。1件ずつ外せるようにする */
.schedule-copy-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

    .schedule-copy-list:empty {
        margin-top: 0;
    }

.schedule-copy-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    border-radius: 1rem;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 0.8rem;
}

.schedule-scope {
    gap: 1rem;
}

/*
    チェック・ラジオ・色見本の並び。

    **.form-group label より強く指定する。** あちらは見出し用で
    display:block・大文字化・小さい太字が当たっており、そのままだと
    チェックの文字が下へ落ちたり、右端で縦に折れたりする。
*/
.form-group label.schedule-scope-item,
.form-group label.schedule-weekday-item,
.form-group label.schedule-color-item,
.schedule-scope-item,
.schedule-weekday-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0.75rem 0 0;
    font-size: 0.875rem;
    font-weight: normal;
    color: var(--gray-800);
    text-transform: none;
}

    /*
        中の2つ（チェックと文字）を縮ませない。

        既定では互いに縮み合うため、**「終日」が1文字ずつ縦に折れる**。
        どちらも中身の幅のまま置いて、必要なら親のほうで折り返す。
    */
    .form-group label.schedule-scope-item input,
    .form-group label.schedule-weekday-item input {
        flex: 0 0 auto;
        margin: 0;
        /*
            大きさを決める。

            **既定のチェックは周りに見えない余白を持っている。**
            そのままだと文字との間が空きすぎ、gap を詰めても縮まらない。
        */
        width: 0.95rem;
        height: 0.95rem;
    }

    .form-group label.schedule-scope-item span,
    .form-group label.schedule-weekday-item span {
        flex: 0 0 auto;
        white-space: nowrap;
    }

.schedule-toggles {
    gap: 0.5rem;
}

/*
    曜日の7つは**1行に収める。**

    2列にしたぶん（`.schedule-form`）1列の幅が 302px まで狭まり、
    既定の右余白 0.75rem では 7つで 281px と 2px だけ足りずに「土」が折れていた。
    0.5rem にすると 257px で収まる（実測）。
*/
.form-group .schedule-weekday-picker label.schedule-weekday-item,
.schedule-weekday-picker .schedule-weekday-item {
    margin-right: 0.5rem;
}

/*
    終日・プライベートの当たり判定。

    **チェックと文字だけだと的が小さい。** 周りに余白を足して
    枠ごと押せるようにする（枠の中ならどこを押しても切り替わる）。
*/
.form-group label.schedule-toggle,
.schedule-toggle {
    padding: 0.5rem 0.85rem;
    margin: 0;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    background: var(--gray-50);
    cursor: pointer;
}

    .form-group label.schedule-toggle:hover {
        border-color: var(--gray-300);
        background: var(--gray-100);
    }

    /* 中のチェックも同じ大きさで押せるようにする */
    .form-group label.schedule-toggle input {
        cursor: pointer;
    }

.schedule-colors {
    gap: 0.5rem;
}

/* 色は見本そのものを押させる。名前は title で補う */
.schedule-color-item {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

    .schedule-color-item input {
        position: absolute;
        opacity: 0;
    }

.schedule-color-swatch {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background: inherit;
    box-shadow: inset 0 0 0 0.05rem rgba(0, 0, 0, 0.15);
}

/* 選んでいる色は輪郭を付ける。塗りだけだと選択が分からない */
.schedule-color-item input:checked + .schedule-color-swatch {
    box-shadow: 0 0 0 0.15rem #fff, 0 0 0 0.25rem var(--gray-700);
}

@media (max-width: 900px) {
    /* 狭い画面では月間のマスを低くする。7列は保つ（曜日が崩れると読めない） */
    /* ここも1予定ぶん（2.4rem）足す。狭くても2件は見えるようにする */
    .schedule-cell { min-height: 7.4rem; }

    .schedule-head { flex-wrap: wrap; }
    .schedule-organization { flex-basis: 100% !important; max-width: none; }
}

/*
    ラベル横の「i」ボタン（補足の表示）

    説明の文章を常に並べると、入力欄より説明のほうが多くなって
    どこを触ればよいか分からなくなる。要る人だけが開けるようにする。
*/
.field-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.143rem;
    height: 1.143rem;
    margin-left: 0.286rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--gray-500);
    vertical-align: middle;
    cursor: pointer;
}

    .field-hint:hover {
        color: var(--primary);
        background: var(--gray-100);
    }

    .field-hint:focus-visible {
        outline: 0.125rem solid var(--primary);
        outline-offset: 0.0625rem;
    }

    .field-hint .material-symbols-outlined {
        font-size: 1.143rem;
        line-height: 1;
    }

/* 補足は説明文なので、本文より少し小さく・詰めて出す */
.popover-body {
    font-size: 0.857rem;
    white-space: pre-line;
}

/*
    一覧の操作を3点ボタンにまとめる

    ボタンを並べると列が広がり、行が2段になって一覧が読めなくなる。
    ふだん押さないものはここへ畳む。
*/
.row-menu {
    position: relative;
}

    .row-menu > .dropdown-menu {
        min-width: 10rem;
        /* 表の枠（角丸のため overflow:hidden）より手前に出す */
        z-index: 1060;
    }

    .row-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.429rem;
        font-size: 0.929rem;
    }

        .row-menu .dropdown-item.is-danger {
            color: var(--danger, #dc3545);
        }

/* =========================================================
   メッセージ（人どうしのメッセージ）

   AIチャットの枠（chat-page / chat-body / message-row …）を流用しつつ、
   **左にメッセージ一覧を常に出す**ところだけが違う。
   AIチャットの一覧はスライドで開く側メニューだが、こちらは相手を選ぶのが
   主な操作なので、隠すと毎回開くことになる。
   ========================================================= */
.message-page .content.chat-content.message-layout {
    /* chat-content は縦並び。ここだけ横並びにする */
    flex-direction: row;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.message-threads {
    width: 18rem;
    flex: 0 0 18rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 0.05rem solid var(--gray-200);
}

.message-threads-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem 0.75rem 1rem;
    border-bottom: 0.05rem solid var(--gray-200);
}

.message-threads-title {
    font-weight: 700;
    margin-right: auto;
}

.message-threads-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
}

.message-thread-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 0.05rem solid var(--gray-100);
}

    .message-thread-item:hover {
        background: var(--gray-100);
        text-decoration: none;
        color: inherit;
    }

    .message-thread-item.is-active {
        background: var(--gray-200);
    }

/* AIは ai_agent（人＋きらめき）。人であることをアイコンでも分かるようにする */
.message-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    border-radius: 50%;
    background: var(--gray-500);
}

.message-avatar--lg {
    width: 2.75rem;
    height: 2.75rem;
    flex-basis: 2.75rem;
}

/*
    メッセージ一覧の顔の輪（利用者の指摘・2026-09-17。**デスクトップ版と同じ**）

    プライベート（会社をまたぐ）と社内の1対1は、どちらも人の顔が並ぶだけで
    一覧の時点では見分けが付かなかった。**札は足さない**（利用者の指定）。
    グループとプロジェクトは顔そのものが印（group / account_tree）なので、
    輪は「会社をまたぐかどうか」の1点だけを言う。

    **枠線ではなく外側の影で引く。** border を足すと 2.25rem の丸が内側へ縮み、
    頭文字と画像の位置がずれる。凡例は置かないので、色の意味は行の title で言う。
*/
.message-thread-avatar.is-private {
    box-shadow: 0 0 0 0.143rem var(--amber-500);
}

.message-thread-avatar.is-internal {
    box-shadow: 0 0 0 0.143rem var(--primary);
}

.message-thread-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.message-thread-name {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    min-width: 0;
}

.message-thread-user {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 同じ会社の人には出さない（全部同じ会社名が並ぶと社外の相手が埋もれる） */
.message-thread-org {
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-thread-last {
    font-size: 0.8rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-thread-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.message-thread-time {
    font-size: 0.7rem;
    color: var(--gray-500);
    white-space: nowrap;
}

/*
    未読の数。**inline-block ＋ line-height では中央に来ない**（レイアウト指摘 No.35）。
    数字の字面は行の高さいっぱいではないため、下に寄って見える。
    flex で縦横とも中央に置き、丸は縦横同じ寸法で作る。
*/
.message-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 0.75rem;
    background: var(--primary);
    color: white;
    font-size: 0.7rem;
    line-height: 1;
}

.message-thread {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.message-header {
    gap: 0.75rem;
}

.message-body {
    gap: 0.25rem;
}

/* 相手を選んでいない・まだメッセージが無い */
.message-empty {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--gray-500);
}

.message-empty-note {
    font-size: 0.85rem;
}

/* 上スクロールの番人。見えたら20件足す */
.message-sentinel,
.message-nomore {
    text-align: center;
    font-size: 0.75rem;
    color: var(--gray-500);
    padding: 0.5rem 0;
}

.message-date {
    align-self: center;
    margin: 0.5rem 0;
    padding: 0.125rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--gray-200);
    color: var(--gray-600);
    font-size: 0.75rem;
}

/* ---------------------------------------------------------
   吹き出しの下には何も置かない（レイアウト指摘・2026-09-10）

   以前は下に1段（.message-foot）を作り、返信・コピー・ブックマーク・
   取り消し・既読・時刻をまとめて並べていた。**短い発言ほど余白が目立つ**ため、
   時刻と既読は吹き出しの外側の横へ、操作は横に浮かせる形へ移した。

   **必ず .message-page で縛る。** .message も .message-action も
   AIチャットと同じ名前で、裸で書くと向こうを上書きする
   （.message-files で一度踏んでいる）。
   --------------------------------------------------------- */

/* 自分の発言は「吹き出し→横の枠」の並びを逆にする（横の枠が内側へ来る） */
.message-page .message-row--right {
    flex-direction: row-reverse;
    /* row-reverse では flex-end が左端になる。右へ寄せるのは flex-start */
    justify-content: flex-start;
}

/* 時刻と既読。**吹き出しの下端に揃える**（上端だと吹き出しの角と競る） */
.message-page .message-side {
    /* 操作（.message-actions-side）を置く基準。下の「操作」の節を参照 */
    position: relative;
    display: flex;
    /*
       **「既読」は時刻の上**（2026-09-16・利用者の指定）。横に並べると、
       既読が付いた行だけ時刻の位置がずれて、目で追う手がかりにならない。
       **どちらも右詰め**にして、時刻の右端を揃える。
    */
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    flex: 0 0 auto;
    align-self: flex-end;
    padding-bottom: 0.125rem;
    font-size: 0.7rem;
    color: var(--gray-500);
    /* 「10:24」で折り返させない。幅は2文字ぶん増える程度なので押し出しは起きない */
    white-space: nowrap;
}

/*
   同じ人・同じ時刻が続く並びは、最後の1件にだけ時刻を出す（判定は applyGrouping）。

   **消す（display:none）のではなく、見えなくするだけ（visibility）にする**
   （2026-09-16・利用者の指摘）。消すと .message-side が**幅0・高さ1.8pxに潰れ**、
   そこを基準に浮かせている操作が**行の外（13px下）まで垂れて、次の行の吹き出しに重なっていた**。
   横にもずれる——時刻のぶんだけ吹き出しが右へ出て、**前後の行と右端が揃わない**。
   場所だけ残せば、時刻が出ている行とまったく同じ形になる。
*/
.message-page .message-row.is-time-hidden .message-time {
    visibility: hidden;
}

/*
   操作（返信・コピー・ブックマーク・取り消し）。

   **場所を取らせない。** position:absolute で浮かせ、マウスを乗せたときだけ出す。
   常に出すと読むだけのときに邪魔になり、場所を取る形にすると狭い画面で吹き出しが押し出される。

   **枠も背景も持たせない**（2026-09-11・利用者の指摘）。
   白い箱に影を付けて吹き出しの横へ浮かせていたが、**そこだけ別の部品のように浮いて見えた**。
   記号だけを置き、吹き出しの**下の角**（自分の発言は左下・相手の発言は右下）に揃える。

   **基準は吹き出しではなく時刻（.message-side）。**
   吹き出しの下の角に直に置くと、そこには必ず時刻と既読が居るので必ず重なる。
   時刻の外側から並べれば、時刻の文字数（既読の有無）が変わっても重ならない。
*/
.message-page .message {
    position: relative;
    /* 吹き出しの外へ出したもの（引用の印など）を切り取らせない（AIチャット側は overflow:hidden） */
    overflow: visible;
}

.message-page .message-actions-side {
    position: absolute;
    /*
        **下端で揃える**（2026-09-16・利用者の指摘）。
        以前は時刻の行に中心を合わせていた（top:50% ＋ translateY(-50%)）が、
        ボタン（27.5px）は時刻の行（16.4px）より背が高いので、**どの行でも 6px 垂れていた**。
        行と行のすき間は3pxしかないため、**次の行の吹き出しに重なる**。
        下端で揃えれば行からはみ出さない。時刻より少し上に乗るが、
        吹き出しの下の角に並ぶ見え方は変わらない。
    */
    top: auto;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    /*
        **後ろの行の下へ潜らせない。** 並びの後にある行のほうが後から描かれるため、
        重ねる置き方（狭い画面）では、これが無いと出したはずの操作が隠れる。
    */
    z-index: 5;
    opacity: 0;
    /* 出ていないあいだは押せないようにする（見えないボタンを押させない） */
    pointer-events: none;
    transition: opacity 0.12s;
}

    /*
        **見た目は AIチャットの .message-action に揃える**（2026-09-16・利用者の指摘）。

        以前はここで大きさ（1.75rem角）と色（--gray-600／乗せたら--primary）を上書きし、
        ボタンには .btn-icon も付けていた。そのため同じ「吹き出しの操作」なのに、
        **AIチャットより枠が小さく・記号が大きく・色だけ濃い**という別物になっていた。
        上書きをやめ、印の class（.btn-icon）も外したので、
        大きさ・角丸・記号の大きさ・色（--gray-300／乗せたら--gray-500）は向こうと同じになる。

        **出し入れは枠（.message-actions-side）だけが決める。**

        ボタン側にも「乗せたときだけ出す」（.message-action の opacity）が
        別に効いており、そのままだと**触る画面で開いても中身が出ない**
        （乗せる操作が無いので opacity が 0 のまま＝空の白い箱になる）。
        実際に撮って初めて分かった（[[verify-by-eye-before-delivery]]）。
    */
    .message-page .message-actions-side .message-action {
        opacity: 1;
    }

    /* 取り消し済みには操作が1つも入らない。空の枠を出さない */
    .message-page .message-actions-side:empty {
        display: none;
    }

/* 相手の発言は**右下**から外側（右）へ並べる */
.message-page .message-row--left .message-actions-side {
    left: 100%;
    margin-left: 0.25rem;
}

/* 自分の発言は**左下**から外側（左）へ並べる */
.message-page .message-row--right .message-actions-side {
    right: 100%;
    margin-right: 0.25rem;
}

/* 乗せたとき／中のボタンへキーで移ったとき／触る画面で押したとき */
.message-page .message-row:hover .message-actions-side,
.message-page .message-row:focus-within .message-actions-side,
.message-page .message-row.is-open .message-actions-side {
    opacity: 1;
    pointer-events: auto;
}

/* ---------------------------------------------------------
   置き場所が足りないときは吹き出しの下へ回す

   **同じ中身を2か所に書いている。** 一方は**窓の幅**、もう一方は
   **メッセージ欄の幅**で切り替える。媒体問い合わせ（@media）と
   容器問い合わせ（@container）は1つにまとめられないため。

   ・窓が 900px 以下：ここから指で押す大きさ（ボタン 2.75rem）と
     吹き出し 88% に変わる。**時刻の外側にはどう詰めても収まらない**
   ・メッセージ欄が 54rem（1rem＝14px なので 756px）以下：窓が広くても、
     左の一覧に 18rem を取られるぶん余りが足りなくなる（窓 1080px あたりから）。
     内訳＝吹き出し 75％の外に、時刻「既読 18:52」約48px＋記号4つ約115px が要る。
     **48rem では足りていなかった**（窓 1040〜1070px で記号が数px はみ出して切れる。
     2026-09-16・ボタンをAIチャットに揃えたときに実測して直した）
   --------------------------------------------------------- */
/* 置き場所の基準を「メッセージ欄の幅」にする（容器問い合わせ用） */
.message-page .message-body {
    container-type: inline-size;
    container-name: messages;
}

/*
    操作ボタン1つの実寸。**下へ回したときに空ける高さは、必ずこれを見る**
    （2026-09-16・利用者の指摘で直した）。

    下の2つの節（@media と @container）は**どちらも効く幅がある**。
    同じ強さなので後に書いた @container が勝つが、ボタンの大きさを決めているのは
    @media（狭い画面では指で押せる 2.75rem 角にする）のほう。
    数字を直に書いていたため、**空ける高さだけ 2rem のままで、
    38.5px のボタンが次の行の吹き出しに重なっていた**。
    片方に書いて両方が読む形にしておけば、もう食い違わない。
*/
.message-page {
    --message-action-size: 2rem;
}

@media (max-width: 900px) {
    .message-page {
        --message-action-size: 2.75rem;
    }
}

@media (max-width: 900px) {
    /*
        時刻の外側に置けないときは、**吹き出しの下**へ回す。

        置けるかどうかは「行の余り（吹き出しの外）」で決まる。
        足りないまま横へ並べると、記号が**画面の外へ出て切れる**
        （780px で撮って分かった）。

        **次の行へ重ねない。** 枠と背景を外した（2026-09-11）ので、
        重ねると次の発言の文字と記号が混ざって読めない。
        出しているあいだだけ行の下に場所を作る。
    */
    /*
        **操作が1つも入らない行では空けない**（2026-09-16・利用者の指摘）。
        取り消し済みの行には返信もコピーもブックマークも入らず、枠じたい
        （.message-actions-side:empty）が display:none になっている。
        それでも場所を空けていたため、**取り消しの行にマウスが乗っただけで
        その下がまるごと 31.5px 飛んでいた**。中身があるときだけ空ける。
    */
    .message-page .message-row:has(.message-action):hover,
    .message-page .message-row:has(.message-action):focus-within,
    .message-page .message-row.is-open:has(.message-action) {
        padding-bottom: calc(var(--message-action-size) + 0.25rem);
    }

    .message-page .message-actions-side {
        top: 100%;
        /* 平常時は bottom で下端に揃えているので、下へ回すときは外す */
        bottom: auto;
        margin-top: 0.125rem;
    }

    /* 相手の発言は右下の角から、自分の発言は左下の角から、吹き出しの下へ並べる */
    .message-page .message-row--left .message-actions-side {
        left: auto;
        right: 0;
        margin-left: 0;
    }

    .message-page .message-row--right .message-actions-side {
        right: auto;
        left: 0;
        margin-right: 0;
    }
}

@container messages (max-width: 54rem) {
    /*
        時刻の外側に置けないときは、**吹き出しの下**へ回す。

        置けるかどうかは「行の余り（吹き出しの外）」で決まる。
        足りないまま横へ並べると、記号が**画面の外へ出て切れる**
        （780px で撮って分かった）。

        **次の行へ重ねない。** 枠と背景を外した（2026-09-11）ので、
        重ねると次の発言の文字と記号が混ざって読めない。
        出しているあいだだけ行の下に場所を作る。
    */
    /* 操作が1つも入らない行（取り消し済み）では空けない。上の @media と同じ理由 */
    .message-page .message-row:has(.message-action):hover,
    .message-page .message-row:has(.message-action):focus-within,
    .message-page .message-row.is-open:has(.message-action) {
        padding-bottom: calc(var(--message-action-size) + 0.25rem);
    }

    .message-page .message-actions-side {
        top: 100%;
        /* 平常時は bottom で下端に揃えているので、下へ回すときは外す */
        bottom: auto;
        margin-top: 0.125rem;
    }

    /* 相手の発言は右下の角から、自分の発言は左下の角から、吹き出しの下へ並べる */
    .message-page .message-row--left .message-actions-side {
        left: auto;
        right: 0;
        margin-left: 0;
    }

    .message-page .message-row--right .message-actions-side {
        right: auto;
        left: 0;
        margin-right: 0;
    }
}

/*
   複数人のアイコンと氏名（レイアウト指摘・2026-09-10）

   **同じ人が続くあいだは先頭の1件だけ。** 続く行は visibility で消して、
   字下げ（アイコンのぶんの幅）だけ残す——display:none にすると、
   続く行だけ左へ寄って階段になる。
*/
.message-page .message-row-avatar {
    align-self: flex-end;
    margin-bottom: 0.125rem;
}

.message-page .message-sender {
    margin: 0 0.25rem 0.125rem;
    font-size: 0.75rem;
    color: var(--gray-600);
}

.message-page .message-row.is-continued .message-row-avatar {
    visibility: hidden;
}

.message-page .message-row.is-continued .message-sender {
    display: none;
}

/* 取り消しは自分が送ったものだけ。既読が付いたら外す（押せないボタンを出さない） */
.message-retract {
    opacity: 0;
    transition: opacity 0.15s;
}

.message-row:hover .message-retract {
    opacity: 1;
}

.message-read {
    color: var(--gray-500);
}

.message-bubble--retracted {
    background: transparent !important;
    border: 0.05rem dashed var(--gray-300);
    color: var(--gray-500) !important;
}

.message-retracted {
    font-size: 0.85rem;
    font-style: italic;
}

/*
   添付のファイル（画像以外）。**吹き出しの外に、札として出す**（レイアウト指摘 No.40）。

   吹き出しの中に入れると、ファイル名がそのまま本文に見える。
   外へ出し、枠と種類を付けて「押して開くもの」だと分かる形にする。

   **セレクタは .message-page で縛る。** ここを裸で書くと、
   AIチャットが生成したファイルの札（.message-files / .message-file）まで
   同じ名前なので上書きしてしまう。
*/
.message-page .message-files {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
    max-width: 100%;
}

.message-page .message-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 17rem;
    max-width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.625rem;
    background: white;
    color: var(--gray-700);
    text-decoration: none;
}

    .message-page .message-file:hover {
        background: var(--gray-50);
        color: var(--gray-700);
        text-decoration: none;
    }

    .message-page .message-file > .material-symbols-outlined {
        flex-shrink: 0;
        color: var(--gray-400);
    }

.message-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 0.375rem;
    background: var(--gray-100);
    color: var(--gray-500);
}

.message-file-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.message-page .message-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

.message-file-kind {
    font-size: 0.7rem;
    color: var(--gray-500);
}


/* ---------------------------------------------------------
   返信の引用（吹き出しの中・本文より上）

   押すと元の発言まで飛ぶ。押せることが見た目で分かるよう、
   左に縦線を入れて中を一段暗くする（引用の作法にそろえる）。
   --------------------------------------------------------- */
.message-reply-quote {
    display: block;
    width: calc(100% - 1.5rem);
    margin: 0.75rem 0.75rem 0;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-left: 0.15rem solid currentColor;
    border-radius: 0 0.25rem 0.25rem 0;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    text-align: left;
    font-size: 0.8rem;
    line-height: 1.4;
    cursor: pointer;
}

    /* 自分の吹き出しは地が濃いので、明るいほうへ寄せる */
    .message-row--right .message-reply-quote {
        background: rgba(255, 255, 255, 0.18);
    }

    .message-reply-quote:hover {
        background: rgba(0, 0, 0, 0.12);
    }

    .message-row--right .message-reply-quote:hover {
        background: rgba(255, 255, 255, 0.28);
    }

.message-reply-quote-name {
    display: block;
    font-weight: 600;
    opacity: 0.85;
}

/*
    引用は必ず1行に収める。伸ばすと、返信のほうが引用より小さく見える。

    **white-space: nowrap にしない。** 折り返さない文字は「これ以上縮められない幅」を
    親へ押し付けるため、狭い画面で吹き出しごと画面の外へはみ出す。
    折り返しは許したうえで1行で切り、どこでも切れるようにして幅を親に合わせる。
*/
.message-reply-quote-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    opacity: 0.85;
}

/* 飛んできた先を少しのあいだ光らせる（どこへ来たのか分かるように） */
.message-row.is-jumped .message-bubble {
    animation: message-jumped 2s ease-out;
}

@keyframes message-jumped {
    0%, 40% {
        box-shadow: 0 0 0 0.15rem var(--primary);
    }

    100% {
        box-shadow: 0 0 0 0.15rem transparent;
    }
}

/* ---------------------------------------------------------
   吹き出しの下のボタン（返信・ブックマーク・取り消し）

   常に出しておくと、吹き出しの列が記号でうるさくなる。
   その行に触れているあいだだけ出す。ブックマーク済みだけは出したままにする
   （印が付いていることは、触らなくても分かる必要がある）。
   --------------------------------------------------------- */
.message-action {
    opacity: 0;
    transition: opacity 0.15s;
}

.message-row:hover .message-action {
    opacity: 1;
}

/*
    ブックマーク済み。**色は AIチャットの「評価済み・コピー完了」（.is-active）と同じ
    --gray-800 にする**（2026-09-16・利用者の指摘）。以前は --primary だけ別だった。
    乗せたときの色（--gray-500）より後に書いてあるので、乗せても濃いまま変わらない
    （AIチャットの .is-active と同じ振る舞い）。
*/
.message-bookmark.is-on {
    opacity: 1;
    color: var(--gray-800);
}

/* ---------------------------------------------------------
   画像は1つの枠にまとめる

   1枚ずつ縦に積むと、5枚送られただけで画面が埋まって前の話が見えなくなる。
   枚数で並べ方を変え、どの枚数でも同じ幅に収まるようにする。
   --------------------------------------------------------- */
/*
    吹き出し・画像・ファイルを縦に積む。

    **画像とファイルは吹き出しの外**（No.38〜40）なので、自分の発言では
    どれも右へ寄せる必要がある。align-items でまとめて寄せる。

    .message は AIチャットとも共有しているため、**必ず .message-page で縛る。**
*/
.message-page .message {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.message-page .message-row--right .message {
    align-items: flex-end;
}

.message-page .message-row--left .message {
    align-items: flex-start;
}

/* 中身が何であれ、.message（画面の75%）からはみ出させない */
.message-page .message > * {
    max-width: 100%;
}

.message-images {
    display: grid;
    gap: 0.125rem;
    width: 16rem;
    max-width: 100%;
    /* **吹き出しの外**。本文の吹き出しが上にあるときだけ、そのぶん離す */
    margin-top: 0.25rem;
    border-radius: 0.625rem;
    overflow: hidden;
}

/*
    1枚だけのときは**枠も切り取りもしない**（レイアウト指摘 No.38）。
    正方形に切ると、縦長の写真が上下だけになって何の写真か分からない。
*/
.message-images--1 {
    display: block;
    width: auto;
}

    .message-images--1 .message-image {
        display: block;
        width: auto;
        aspect-ratio: auto;
        background: transparent;
    }

    .message-images--1 img {
        max-width: 16rem;
        max-height: 18rem;
        width: auto;
        height: auto;
        object-fit: contain;
    }

.message-images--2 {
    grid-template-columns: 1fr 1fr;
}

/* 3枚は1枚目を大きく。3列に並べると1枚ずつが小さくなりすぎる */
.message-images--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

    /*
        1枚目は2行ぶち抜き。**aspect-ratio を外す。**
        正方形に切りそろえる指定が残っていると、そちらが勝って
        下の段が空いたまま（1枚目が上半分だけ）になる。
    */
    .message-images--3 .message-image:first-child {
        grid-row: span 2;
        aspect-ratio: auto;
        height: 100%;
    }

.message-images--4 {
    grid-template-columns: 1fr 1fr;
}

.message-image {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--gray-300);
    cursor: pointer;
    /* 2枚以上は同じ大きさの枠に切りそろえる（縦横が混ざっても崩れない） */
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

    .message-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* 5枚目からは出さず、4枚目に残りの枚数をかぶせる */
.message-image-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

/* ---------------------------------------------------------
   返信先の帯（入力欄のすぐ上）
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   スタンプ（2026-09-16）

   **吹き出しに入れない。** 画像の添付と同じく、枠も背景も付けずに置く
   （レイアウト指摘 No.38〜40 の決まりをそのまま当てる）。
   左右の寄せは .message の align-items が持っているので、ここでは触らない。
   --------------------------------------------------------- */
.message-page .message-stamp {
    /* 吹き出しが上にあるときだけ、そのぶん離す（画像と同じ） */
    margin-top: 0.25rem;
    /* img の下に出る行の余りを消す（絵と時刻の高さがずれる） */
    line-height: 0;
}

    .message-page .message-stamp img {
        width: 7.5rem;
        height: 7.5rem;
        max-width: 100%;
    }

/*
   スタンプを選ぶ窓

   **入力欄の上に浮かせる。** 列に押し込むと、狭い画面で入力欄が潰れる。
   高さは頭打ちにして中でスクロールさせる（種類が増えても入力欄を押し上げない）。
*/
.message-page .chat-composer {
    position: relative;
}

.composer-stamps {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 100%;
    z-index: 10;
    max-height: 18rem;
    overflow-y: auto;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    border: 0.05rem solid var(--gray-200);
    background: #fff;
    box-shadow: 0 0.25rem 0.75rem var(--gray-300);
}

.composer-stamp-group {
    margin: 0.5rem 0 0.25rem;
    color: var(--gray-500);
    font-size: 0.786rem;
}

    .composer-stamp-group:first-child {
        margin-top: 0;
    }

.composer-stamp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.composer-stamp {
    padding: 0.25rem;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
}

    .composer-stamp:hover {
        background: var(--gray-100);
    }

    .composer-stamp:disabled {
        opacity: 0.4;
    }

    .composer-stamp img {
        width: 4.5rem;
        height: 4.5rem;
    }

/* 開いているあいだは、どのボタンで開いたのかが分かるようにする */
.chat-composer-inner [cmd="toggle-stamps"].is-on {
    border-color: var(--primary);
    color: var(--primary);
}

.composer-reply {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.571rem;
    padding: 0.375rem 0.5rem;
    border-left: 0.15rem solid var(--primary);
    border-radius: 0 0.25rem 0.25rem 0;
    background: var(--gray-100);
    font-size: 0.8rem;
}

    .composer-reply .material-symbols-outlined {
        flex-shrink: 0;
        color: var(--primary);
    }

.composer-reply-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.composer-reply-name {
    font-weight: 600;
    color: var(--primary);
}

.composer-reply-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-600);
}

/* ---------------------------------------------------------
   メッセージの中でエージェントに聞く（2026-09-10・利用者の指摘）

   **人へ送るのと同じ入力欄を使う。** 別の入力欄を作ると、
   どちらに書いているのか分からなくなる。代わりに、
   選んでいるあいだは帯を出して「人ではない相手」だと分かるようにする。
   --------------------------------------------------------- */
.composer-agent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.571rem;
    padding: 0.375rem 0.5rem;
    /* 返信の帯（--primary）と色で分ける。相手が人ではないことを色でも示す */
    border-left: 0.15rem solid var(--purple);
    border-radius: 0 0.25rem 0.25rem 0;
    background: var(--gray-100);
    font-size: 0.8rem;
}

    .composer-agent > .material-symbols-outlined {
        flex-shrink: 0;
        color: var(--purple);
    }

.composer-agent-main {
    min-width: 0;
    flex: 1 1 auto;
    /* 名前が長くても、注意書きごと折り返して読めるようにする */
    overflow-wrap: anywhere;
}

.composer-agent-name {
    font-weight: 600;
    color: var(--purple);
}

.composer-agent-note {
    color: var(--gray-600);
}

/* エージェントの回答の吹き出し。人の発言（--gray-200）と色を分ける */
.message-page .message-row--agent .message-bubble {
    background: var(--indigo-50);
    border: 0.05rem solid var(--indigo-100);
}

.message-avatar--agent {
    background: var(--purple);
}

/* 「◯◯」＋「誰の質問に回答」。名前だけだと、勝手に喋り出したように見える */
.message-page .message-sender {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    min-width: 0;
}

.message-sender-note {
    font-size: 0.7rem;
    color: var(--gray-500);
}

/* 質問の行の印。人に向けた発言と見分けが付くようにする */
.message-ask-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0.25rem 0.125rem;
    font-size: 0.7rem;
    color: var(--purple);
}

/* 「回答を作っています…」。数十秒かかるので、空の吹き出しにしない */
.message-agent-thinking {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-600);
    /* 中止のボタンが入るので、本文と同じ余白では詰まって見える */
    padding: 0.625rem 0.875rem;
}

.message-agent-stop {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* 聞くエージェントを選ぶモーダル。カードで出す（文字だけでは中身が分からない） */
.agent-picker-note {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.agent-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.agent-picker-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 0.05rem solid var(--gray-300);
    border-radius: 0.5rem;
    background: transparent;
    text-align: left;
}

    .agent-picker-item:hover {
        border-color: var(--primary);
        background: var(--gray-50);
    }

.agent-picker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 50%;
    background: var(--purple);
}

.agent-picker-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.agent-picker-name {
    font-weight: 600;
}

.agent-picker-description {
    font-size: 0.8rem;
    color: var(--gray-600);
    /* 説明が長いエージェントでカードの高さが暴れないように2行で切る */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.picker-empty {
    padding: 1rem 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray-500);
}

/* ---------------------------------------------------------
   ブックマーク一覧（左の列に、メッセージ一覧と入れ替えて出す）
   --------------------------------------------------------- */
#btn-bookmarks.is-on {
    color: var(--primary);
}

.message-bookmark-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 0.05rem solid var(--gray-100);
}

    .message-bookmark-item:hover {
        background: var(--gray-100);
        text-decoration: none;
        color: inherit;
    }

.message-bookmark-head {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    min-width: 0;
}

.message-bookmark-thread {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
}

.message-bookmark-time {
    font-size: 0.7rem;
    color: var(--gray-500);
    white-space: nowrap;
    flex: 0 0 auto;
}

/* 2行まで。1行だと何の話か分からず、伸ばすと一覧に何件も入らない */
.message-bookmark-body {
    font-size: 0.8rem;
    color: var(--gray-600);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .message-bookmark-body.is-retracted {
        font-style: italic;
        color: var(--gray-500);
    }

.message-bookmark-sender {
    color: var(--gray-500);
}

.message-bookmark-note {
    padding: 0 0.75rem;
    font-size: 0.75rem;
    color: var(--gray-500);
    line-height: 1.6;
}

    .message-bookmark-note .material-symbols-outlined {
        vertical-align: -0.1em;
        margin: 0 0.15em;
    }

/* ---------------------------------------------------------
   画像を大きく見る（ライトボックス）

   共通モーダル（#modal-frame）とは別にする。画像は画面いっぱいに出したく、
   モーダルの枠と余白がそのまま邪魔になる。
   --------------------------------------------------------- */
.image-viewer {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
}

/* 後ろの画面がスクロールしないようにする */
body.is-viewer-open {
    overflow: hidden;
}

.image-viewer-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: white;
}

    .image-viewer-bar .btn-icon {
        color: white;
    }

.image-viewer-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-viewer-count {
    flex: 0 0 auto;
    font-size: 0.85rem;
    opacity: 0.8;
}

.image-viewer-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4rem 3.5rem;
}

    .image-viewer-stage img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.image-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
}

    .image-viewer-nav:hover {
        background: rgba(255, 255, 255, 0.3);
    }

.image-viewer-nav--prev {
    left: 0.5rem;
}

.image-viewer-nav--next {
    right: 0.5rem;
}


/* ---------------------------------------------------------
   メッセージごとの操作（見出しの右のメニュー）

   共有した画像・ファイル・通知の切り替えを見出しに横並びにすると、
   相手の氏名が押し出されて「誰と話しているか」が読めなくなる。
   --------------------------------------------------------- */
.message-header-menu {
    margin-left: auto;
    flex: 0 0 auto;
}

/* 知らせを止めている印。押せるボタンではなく、状態の印 */
.message-muted-mark {
    margin-left: 0.375rem;
    color: var(--gray-400);
    vertical-align: -0.1em;
}

/* ---------------------------------------------------------
   プロジェクトのトークから、そのプロジェクトの詳細へ

   **見出しにアイコンのボタンを増やさない**（通話とメニューで埋まっている）。
   名前の下の行に、文字の導線として置く。
   --------------------------------------------------------- */
.message-project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

    .message-project-link:hover,
    .message-project-link:focus {
        color: var(--primary);
        text-decoration: underline;
    }

/* ---------------------------------------------------------
   相手を選ぶ（レイアウト指摘 No.36）
   --------------------------------------------------------- */
.picker-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

    .picker-search .material-symbols-outlined {
        flex-shrink: 0;
        color: var(--gray-400);
    }

/*
    共通の input 指定（幅100%・大きめの padding）がそのまま効くと、
    枠の中でもう一段の入力欄に見える。素の見た目へ戻す
*/
.picker-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
    outline: none;
}

.picker-list {
    max-height: 24rem;
    overflow-y: auto;
}

.picker-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    text-align: left;
    color: inherit;
}

    .picker-item:hover {
        background: var(--gray-100);
    }

.picker-item-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.picker-item-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-item-sub {
    font-size: 0.75rem;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-empty,
.picker-note {
    color: var(--gray-500);
    font-size: 0.85rem;
}

/* ---------------------------------------------------------
   共有した画像・ファイル（レイアウト指摘 No.45・No.46）

   画像は見て探し、書類は名前で探す。だからタブで分ける。
   --------------------------------------------------------- */
.shared-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 0.05rem solid var(--gray-200);
    margin-bottom: 0.75rem;
}

.shared-tab {
    padding: 0.5rem 1rem;
    border: 0;
    border-bottom: 0.15rem solid transparent;
    background: transparent;
    color: var(--gray-500);
}

    .shared-tab.is-active {
        border-bottom-color: var(--primary);
        color: var(--primary);
        font-weight: 600;
    }

.shared-body {
    max-height: 26rem;
    overflow-y: auto;
}

/* 送った順（新しいものが左上）。すべて同じ大きさに切りそろえる */
.shared-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 0.25rem;
}

.shared-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background: var(--gray-200);
    overflow: hidden;
    cursor: pointer;
}

    .shared-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.shared-files {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.shared-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
}

.shared-file-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.shared-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 誰が・いつ。書類は「あの人がくれたやつ」で探すことが多い */
.shared-file-sub {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.shared-empty {
    padding: 2rem 0;
    text-align: center;
    color: var(--gray-500);
}

/* ---------------------------------------------------------
   相手が入力しています（レイアウト指摘 No.42）

   入力欄のすぐ上。**場所を取らない。** 出たり消えたりするものが
   吹き出しの列を押し上げると、読んでいる場所が動いてしまう。
   --------------------------------------------------------- */
.message-typing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem 0.375rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.message-typing-dots {
    display: inline-flex;
    gap: 0.15rem;
}

    .message-typing-dots i {
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background: var(--gray-400);
        animation: message-typing-blink 1.2s infinite;
    }

    .message-typing-dots i:nth-child(2) {
        animation-delay: 0.2s;
    }

    .message-typing-dots i:nth-child(3) {
        animation-delay: 0.4s;
    }

@keyframes message-typing-blink {
    0%, 60%, 100% {
        opacity: 0.3;
    }

    30% {
        opacity: 1;
    }
}


/* =========================================================
   通話（トークからの電話）

   実体は1対1のWeb会議。ここは「かける・鳴る・出る／出ない」のあいだだけの見た目で、
   つながった後は会議室の画面（.meeting-*）に変わる。
   ========================================================= */

/* 見出しの通話ボタン。相手の氏名の右、メニューの左 */
.message-call {
    margin-left: auto;
}

    /* メニューが隣にあるときは、そちらの margin-left:auto を効かせない */
    .message-call + .message-header-menu {
        margin-left: 0;
    }

/*
    メッセージの中の通話の跡。

    **かけた人が送った1件のメッセージとして置く**（利用者の指摘・2026-09-19。
    デスクトップ版に合わせる）。左右の寄せ方は .message-row--right / --left が持つので、
    ここでは何もしない——**中央寄せ（justify-content:center）を書き戻さないこと。**
    書き戻すと、かけた側と受けた側のどちらの画面でも同じ位置に出て、
    「共通のお知らせ」に見える（2026-09-17 の指摘はそこから出ている）。

    中身は**吹き出しにしない。** 人が書いた文字ではないので、
    Web会議のお知らせ（.message-meeting-card）と同じ「札」にする。
*/
.message-call-card {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.125rem 0;
    padding: 0.5rem 0.875rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.75rem;
    background: white;
    color: var(--gray-600);
    /* 吹き出しと同じ段（.message-row--left .message-bubble） */
    font-size: 0.929rem;
    white-space: nowrap;
}

/*
    システムメッセージ（2026-09-29）。外部システムが送信者を名乗らずに投稿した連絡。
    「COM-A」という参加者の発言として相手の発言と同じ形で出し、アイコンだけシステムの印にする
    （エージェントの回答の .message-avatar--agent と同じ作り。色で人と見分ける）。
*/
.message-avatar--system {
    background: var(--gray-500);
}

    /*
        取り損ねたものは目に留まる必要がある（色は通話履歴 .call-row-direction と同じ赤）。
        つながった通話に色は付けない——向きは左右の位置が伝えている。

        **印に矢印は使わない**（利用者の指摘・2026-09-19）。
        向きは左右の寄せ方が伝えているので、↗↙↘ は同じことを2回言うだけになる。
        つながった通話はヘッドセット、取り損ねたものは受話器に斜線（ic-call_end）。
        言葉も印もサーバー（DmMessageView.CallDirectionIcon）が決めている。
    */
    .message-call-card.is-missed {
        border-color: var(--danger, #dc3545);
        color: var(--danger, #dc3545);
    }

    /*
        取り損ねた通話は**札そのものを押すとかけ直せる**（利用者の指摘・2026-09-19）。

        **中に［かけ直す］のボタンも文字も置かない。** 押すところが2つあるように見える。
        矢印（＞）も付けない（この画面に矢印は置かない）。
        押せることは、手の形（cursor）と乗せたときの色、それに
        押したあとの「○○さんにかけますか？」で伝わる。

        button は既定の書体と余白を持っているので、札の見た目に戻してから使う。
    */
    button.message-call-card {
        font: inherit;
        font-size: 0.929rem;
        text-align: left;
        cursor: pointer;
    }

        .message-call-card.is-redial:hover,
        .message-call-card.is-redial:focus-visible {
            /* 濃い赤の地に赤文字は埋もれる（custom.css の注記どおり）ので薄い段を使う */
            background: var(--red-100, #fee2e2);
            border-color: var(--red-700, #b91c1c);
            color: var(--red-700, #b91c1c);
        }


/* ---------------------------------------------------------
   Web会議のお知らせ（2026-09-11）

   **かけた側が送った1件のメッセージとして扱う**（利用者の指定）。
   中央には置かず、ふつうの発言と同じ側に寄る。吹き出しには入れず、
   画像・ファイルと同じく吹き出しの外の「札」として並べる
   （中身が文字ではないため）。
   --------------------------------------------------------- */
.message-meeting-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /*
        文字サイズ［特大］でも札を外へはみ出させない。
        28rem は倍率と一緒に伸びるので、入る幅（100%）のほうで頭を打たせる。
    */
    max-width: min(28rem, 100%);
    /* 入りきらないときは［参加する］を下の段へ送る（押せない位置へ追い出さない） */
    flex-wrap: wrap;
    margin: 0.25rem 0;
    padding: 0.75rem 1rem;
    border: 0.05rem solid var(--primary, #4361ee);
    border-radius: 0.5rem;
    background: white;
}

    /* 終わった会議・消された会議は、押せる札と見分けが付くようにする */
    .message-meeting-card.is-closed {
        border-color: var(--gray-200);
        background: var(--gray-50, #f8f9fa);
    }

.message-meeting-icon {
    flex: 0 0 auto;
    color: var(--primary, #4361ee);
}

    .message-meeting-card.is-closed .message-meeting-icon {
        color: var(--gray-500);
    }

.message-meeting-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    /*
        **幅の目安は 8rem**（auto＝会議名の長さ、にしない）。
        auto のままだと「長い会議名」というだけで札が折り返し、アイコンだけの段ができる。
        8rem を割るときにはじめて折り返して、［参加する］が下の段へ落ちる。
    */
    flex: 1 1 8rem;
}

.message-meeting-label {
    color: var(--gray-500);
    font-size: 0.7rem;
}

.message-meeting-title {
    font-weight: bold;
    font-size: 0.9rem;
    /* 長い会議名でも札を横に広げない（枠の中で折り返す） */
    overflow-wrap: anywhere;
}

.message-meeting-range {
    color: var(--gray-600);
    font-size: 0.8rem;
}

.message-meeting-notice {
    color: var(--gray-500);
    font-size: 0.75rem;
}

.message-meeting-join {
    flex: 0 0 auto;
}


/* ---------------------------------------------------------
   呼び出し中／着信の幕

   **どの画面にいても出る。** 共通レイアウトが持っているので、
   メッセージ画面の外にも重なる。いちばん上に置く（会議室より上）。
   --------------------------------------------------------- */
.call-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
}

.call-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 20rem;
    max-width: calc(100% - 2rem);
    padding: 2rem 1.5rem 1.5rem;
    /* 角はモック（com_agent_mockup_20260316bk.html の通話の幕）に合わせて大きめ */
    border-radius: 1.25rem;
    background: white;
    box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.3);
    text-align: center;
}

.call-avatar {
    /* 顔（プロフィール画像）をかぶせるので、必ず位置の基準にする */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    /* 顔が無い人は頭文字も画像も無いので、丸そのものを他のアイコンと同じ地にする */
    background: linear-gradient(135deg, var(--gray-600), var(--gray-800));
    overflow: hidden;
}

    .call-avatar > .avatar-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
    }

.call-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

/* 名前の下の1行。モックの「音声通話」に当たる（何の呼び出しかを名前の次に置く） */
.call-kind {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.85rem;
}

.call-state {
    margin: 0;
    color: var(--gray-500);
    font-size: 0.85rem;
    /* 出したり消したりで高さが動かないように、行を確保しておく */
    min-height: 1.2rem;
}

.call-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/*
    受ける・断るのボタン。**丸くして色で分ける。**
    文字だけの並びだと、鳴っている数十秒のあいだに押し間違える。
*/
.call-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 5rem;
    padding: 0.75rem 0;
    border: 0;
    border-radius: 0.75rem;
    color: white;
    font-size: 0.8rem;
}

.call-button--answer {
    background: var(--success, #198754);
}

    .call-button--answer:hover {
        filter: brightness(1.1);
    }

.call-button--decline {
    background: var(--danger, #dc3545);
}

    .call-button--decline:hover {
        filter: brightness(1.1);
    }

/* 鳴っているあいだ、受話器の輪をふわりと動かす（音が出せない環境の手がかり） */
.call-overlay:not(.d-none) .call-avatar {
    animation: call-ring 1.6s ease-out infinite;
}

@keyframes call-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
    }

    70% {
        box-shadow: 0 0 0 1rem rgba(37, 99, 235, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}


/* =========================================================
   プロフィール画像（顔のアイコン）

   出し方は1つ。**丸い枠の中に頭文字を置き、画像があればその上にかぶせる。**
   画像を出す側と出さない側で構造を変えないので、大きさ・色・並びを決めている
   既存のCSS（.user-icon / .message-avatar など）がそのまま効く。

   画像が読めなかったときは img が外れ、下の頭文字がそのまま出る。
   ========================================================= */
.has-avatar {
    position: relative;
}

/*
    頭文字。**枠いっぱいに広げて中央へ置く。**
    枠側の text-align や line-height に頼ると、
    大きさを変えた場所（.large・メッセージの見出し）でずれる。
*/
.avatar-initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
    **必ず .has-avatar の中だけに効かせる。**
    裸で書くと、位置指定を持たない枠（.call-avatar など）に置いたときに
    親ではなく画面いっぱいへ広がる（実際に踏んだ。緑の丸が全画面を覆った）。
*/
.has-avatar > .avatar-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* 縦横が違う写真でも丸に収める。真ん中を残して切る */
    object-fit: cover;
    border-radius: inherit;
}

/*
    メッセージの丸は背景が灰色で、中に人のアイコン（span）を置いていた。
    画像を入れるので、頭文字と同じ扱いにそろえる
*/
.message-avatar.has-avatar .avatar-initial {
    color: white;
    font-weight: 700;
}

/* ---------------------------------------------------------
   ユーザ設定の顔（押して選び直す）
   --------------------------------------------------------- */
.profile-avatar {
    position: relative;
    flex: none;
}

    /* 顔そのものを押しても選び直せる。押せることを形で伝える */
    .profile-avatar .user-icon {
        cursor: pointer;
    }

.profile-avatar-edit {
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0.1rem solid white;
    border-radius: 50%;
    background: var(--primary);
    color: white;
}

    .profile-avatar-edit:hover {
        filter: brightness(1.1);
    }

.profile-avatar-remove {
    color: var(--gray-500);
    text-decoration: underline;
}


/* =========================================================
   複数人のメッセージ（参加者・人を足す）
   ========================================================= */
.member-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.05rem solid var(--gray-200);
    margin-bottom: 0.5rem;
}

.member-count {
    font-weight: 600;
    margin-right: auto;
}

.member-list {
    max-height: 22rem;
    overflow-y: auto;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 0.05rem solid var(--gray-100);
}

.member-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-me {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 0 0.5rem;
    border-radius: 0.75rem;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 0.7rem;
    line-height: 1.25rem;
}

/*
    足した人に見える範囲の断り書き。**必ず出す。**
    「呼んだら前のメッセージも読める」と思ったまま人を足されると、
    見せるつもりのなかった話が渡る
*/
.member-note {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    background: var(--gray-50);
    color: var(--gray-600);
    font-size: 0.75rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   同じ会社の人を選ぶ（チェックで複数選べる）
   --------------------------------------------------------- */
.picker-item--check {
    cursor: pointer;
    margin: 0;
}

    /*
        共通の input 指定（幅100%・大きめの padding）が効くと
        チェックが横に伸びる（[[aiagentsystem-css-input-trap]]）。素の大きさへ戻す
    */
    .picker-item--check input[type="checkbox"] {
        width: 1rem !important;
        height: 1rem;
        margin: 0 0.25rem 0 0 !important;
        padding: 0 !important;
        flex: none;
    }

    /* .form-group label が太字・大文字・block で勝つので、クラスを重ねて打ち消す */
    .form-group label.picker-item--check,
    .picker-item--check {
        font-weight: 400;
        font-size: 1rem;
        color: inherit;
        text-transform: none;
        display: flex;
    }

/* 退出はやり直せない。メニューの中でも色で分ける */
.row-menu .dropdown-item.is-danger {
    color: var(--danger, #dc3545);
}

/* 狭い画面では一覧を畳んで、選んだメッセージだけを出す */
@media (max-width: 768px) {
    .message-threads {
        width: 100%;
        flex-basis: auto;
        border-right: 0;
    }

    .message-page .content.chat-content.message-layout {
        flex-direction: column;
    }

}

/* ============================================================
   プロジェクト管理（一覧・詳細・WBS・工程）

   工程は「左に表・右に横スクロールする棒」の2枚で作る。
   1枚の表に棒まで入れると、横に流したときに作業名まで一緒に流れて
   「どの行を見ているか」が分からなくなる。
   行の高さ（36px）は Razor 側と必ず合わせること。ずれると表と棒が食い違う。
   ============================================================ */

/*
    一覧の余白（2026-09-11 利用者の指摘で詰めた）。

    **プロジェクトの行そのものより、まわりのほうが目立ってはいけない。**
    見出し・検索欄・行間を削って、1画面に入る件数を増やしている。
*/
.project-search-row {
    gap: 0.5rem;
    background: var(--gray-50);
    /* 見出しの行を無くしたぶん、この行が一覧の先頭。上に詰める（2026-09-16 の指摘） */
    margin-top: 0.25rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    /*
        検索条件と1件目のあいだ。行と行のあいだ（0.25rem）に近づける。
        0.5rem のときは1件目だけ5倍あいていて、検索条件が一覧から切り離されて見えた
    */
    margin-bottom: 0;
}

    /*
        .search-group は既定で上下 1.5rem の余白を持つ（単独で置く検索欄向け）。
        行の中に入れるときは打ち消す——タスク一覧（.task-search-row）では既に消してあり、
        ここだけ取りこぼしていて、検索の行が42pxぶん厚くなっていた
    */
    .project-search-row .search-group {
        margin-top: 0;
        margin-bottom: 0;
    }

.project-search-select {
    width: auto;
    min-width: 10rem;
}

.content.project-content {
    /*
        縦の余白（2026-09-16 の指摘で 0.75rem → 1.125rem）。
        横は一覧の幅を食うので据え置き。
        1枚1枚を厚くし、そのぶん枚数の間（margin）は詰める——
        余白がカードの中にあるほうが、どこからどこまでが1件か分かる
    */
    padding: 1.125rem 0.85rem;
    color: inherit;
    text-decoration: none;
}

/* 行と行のあいだ。中の余白を広げたぶん、ここはさらに詰める（Razor 側の my-2 を上書き） */
.project-parent .content.project-content {
    margin-top: 0.125rem !important;
    margin-bottom: 0.125rem !important;
}

    .content.project-content:hover {
        background: var(--gray-50);
    }

.project-content-body {
    min-width: 0;
}

/* 状態の色。左端の細い帯で表す（文字を読まなくても状態が分かる） */
.project-status {
    width: 0.25rem;
    align-self: stretch;
    min-height: 2rem;
    border-radius: 0.25rem;
    margin-right: 0.75rem;
    background: var(--gray-300);
    flex: 0 0 auto;
}

.project-status--0 { background: var(--gray-400); }
.project-status--1 { background: var(--primary); }
.project-status--2 { background: var(--amber-500); }
.project-status--3 { background: var(--success); }
.project-status--4 { background: var(--gray-300); }

.project-code {
    font-size: 0.75rem;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: 0.25rem;
    padding: 0.1rem 0.4rem;
}

.project-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-progress {
    /* 7rem では棒が短く、割合の違いが読み取りにくかった */
    width: 9.5rem;
    flex: 0 0 auto;
    text-align: right;
}

.project-progress--lg {
    width: 12rem;
}

.project-progress-bar {
    width: 100%;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: var(--gray-200);
    overflow: hidden;
}

.project-progress-value {
    display: block;
    height: 100%;
    background: var(--primary);
}

.project-progress-label {
    font-size: 0.75rem;
    color: var(--gray-600);
}

.project-pager {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.project-pager-link {
    min-width: 2rem;
    text-align: center;
    padding: 0.25rem 0.5rem;
    margin: 0 0.15rem;
    border-radius: 0.35rem;
    color: var(--gray-700);
    text-decoration: none;
}

    .project-pager-link.is-current {
        background: var(--primary);
        color: white;
    }

/*
    プロジェクト詳細はフルスクリーン（2026-09-16 の指摘「工程表が全然見えない」）。

    サイドメニューとヘッダーを外したぶん横に広がり、縦は画面の高さいっぱいに使う。
    **外枠はスクロールさせず**（_FullScreenLayout の FixedHeight）、
    タブの中身だけが動く形にする——見出し・タブが上に残るので、
    どの工程を見ているのか分からなくならない。
*/
.full-screen-page:has(.project-detail) > nav {
    /* 既定の py-5 は上下3remずつ。工程表に渡す高さが減るので詰める */
    padding: 0.5rem 1rem !important;
}

.project-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding-bottom: 0.75rem;
}

    /* タブの中身が残りの高さを受け取る */
    .project-detail > [id^="pane-"] {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

        .project-detail > [id^="pane-"] > .content {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        /*
            工程表だけは器では動かさない。**表と棒は同じ縦位置でそろえる**必要があり、
            別々に動かすと行がずれる。中の .wbs-layout がまとめて動く
        */
        .project-detail > #pane-wbs > .content {
            overflow-y: hidden;
        }

.project-wbs .wbs-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.content.project-header {
    padding: 1rem 1.25rem;
}

.project-description {
    color: var(--gray-600);
    white-space: pre-wrap;
}

.project-tabs {
    margin-top: 1rem;
}

/*
    詳細のタブの中身。**4つとも同じ余白にする。**
    タスクだけこの指定から漏れていて、素の .content（1.5rem・margin なし）で描かれ、
    ほかのタブと左右の位置も上の間隔も食い違っていた（2026-09-15 指摘）
*/
.content.project-wbs,
.content.project-members,
.content.project-tasks,
.content.project-documents {
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
}

.project-wbs-head {
    gap: 0.5rem;
    padding-bottom: 0.75rem;
}

.project-wbs-warning {
    margin-bottom: 0.75rem;
}

/* ── WBS・工程表（画面モック wbs_system.html に寄せた版） ──
   行の高さ30px・見出し2段（月／日＋曜日）は Razor 側と同じ値。
   ずらすと表と棒が食い違うので、片方だけ変えないこと。 */

.wbs-summary {
    gap: 0;
    padding: 0.5rem 0 0.75rem;
}

.wbs-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding-right: 0.9rem;
    margin-right: 0.9rem;
    border-right: 0.05rem solid var(--gray-200);
}

    .wbs-stat:last-child {
        border-right: none;
    }

    .wbs-stat b {
        font-size: 1rem;
        font-weight: 700;
        color: var(--gray-800);
    }

        .wbs-stat b.is-accent { color: var(--primary); }
        .wbs-stat b.is-done { color: var(--success); }
        .wbs-stat b.is-run { color: var(--primary); }
        .wbs-stat b.is-late { color: var(--danger); }

    .wbs-stat small {
        font-size: 0.6875rem;
        color: var(--gray-500);
    }

.wbs-toolbar {
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--gray-50);
    border-radius: 0.5rem;
}

.wbs-toolbar-label {
    font-size: 0.6875rem;
    color: var(--gray-500);
    font-weight: 600;
}

.wbs-toolbar-select {
    width: auto;
    min-width: 8rem;
    height: auto;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

.wbs-layout {
    display: flex;
    align-items: flex-start;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
}

.wbs-table-pane {
    flex: 0 0 auto;
    min-width: 30rem;
    border-right: 0.1rem solid var(--gray-300);
    background: white;
}

.wbs-chart-pane {
    flex: 1 1 auto;
    overflow-x: auto;
    min-width: 0;
}

.wbs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

    .wbs-table th {
        background: var(--gray-50);
        color: var(--gray-500);
        font-weight: 600;
        text-align: left;
        padding: 0 0.4rem;
        border-bottom: 0.05rem solid var(--gray-200);
        white-space: nowrap;
        vertical-align: bottom;
        padding-bottom: 0.35rem;
    }

    .wbs-table td {
        padding: 0 0.4rem;
        border-bottom: 0.05rem solid var(--gray-100);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 工程（子を持つ行）は太字。表と棒の両方で見分けが付くようにする */
    .wbs-table tr.is-summary td {
        font-weight: 700;
        background: var(--gray-50);
    }

    /* クリティカルパスは行ごと薄く色を付ける。棒の色だけだと表を見ているときに分からない */
    .wbs-table tr.is-critical td {
        background: var(--red-100);
    }

    .wbs-table tr.wbs-row:hover td {
        background: var(--indigo-50);
    }

/*
    行の高さは**工程表の行と同じ30px**でなければならない（棒の位置は行数 x 30 で置いている）。
    既定の .btn-icon は39pxあり、そのままだと行が40pxまで伸びて、
    下へ行くほど表と棒がずれていく（実測で気づいた）。操作の印はここだけ小さくする。
*/
.wbs-table td,
.wbs-table th {
    line-height: 1.2;
}

/*
    **ここだけ px で決める。** 工程表の行は30px固定で、表の行がそれを超えると
    下へ行くほど棒とずれる。文字サイズの設定（5段階）で rem が大きくなっても
    行が伸びないよう、操作の印だけは倍率から外してある
    （読む文字ではなく印なので、大きくならなくても困らない）。
*/
.wbs-table .btn-icon {
    /* 既定の .btn-icon が !important で 2rem を指定している。同じ強さで上書きする */
    width: 24px !important;
    height: 24px !important;
    min-width: 0;
    min-height: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .wbs-table .btn-icon .material-symbols-outlined {
        font-size: 16px !important;
    }

/* 遅れの印も同じ理由で px。行の高さを押し上げない */
.wbs-delayed {
    font-size: 14px;
}

.wbs-table .dropdown {
    line-height: 1;
}

.wbs-col-no { width: 3.5rem; color: var(--gray-400); font-size: 0.6875rem; }
.wbs-col-name { width: 13rem; max-width: 13rem; }
.wbs-col-assignee { width: 5rem; max-width: 5rem; color: var(--gray-600); }
.wbs-col-date { width: 5.2rem; color: var(--gray-600); font-size: 0.6875rem; }
.wbs-col-tasks { width: 3.6rem; text-align: center; color: var(--gray-600); font-size: 0.6875rem; }
.wbs-col-progress { width: 3.2rem; text-align: right; }
.wbs-col-float { width: 2.8rem; text-align: right; color: var(--gray-600); }
.wbs-col-actions { width: 4rem; text-align: right; }

.wbs-name {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.3rem;
}

/* 階層の目印。深さで色を変える（記号を並べるより読みやすい） */
.wbs-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--gray-400);
}

.wbs-dot--0 { background: var(--indigo-600); }
.wbs-dot--1 { background: var(--purple); }
.wbs-dot--2 { background: var(--sky-500); }
.wbs-dot--3 { background: var(--gray-400); }

.wbs-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wbs-delayed {
    color: var(--danger);
}

.wbs-chart {
    position: relative;
}

/* 枠線のぶんだけ高さが増えると、表の見出しと1pxずれて全部の行が下へずれる */
.wbs-chart-head {
    box-sizing: border-box;
    border-bottom: 0.05rem solid var(--gray-200);
    background: var(--gray-50);
}

.wbs-chart-months {
    display: flex;
    box-sizing: border-box;
    border-bottom: 0.05rem solid var(--gray-200);
}

.wbs-chart-month {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 0.35rem;
    border-right: 0.05rem solid var(--gray-200);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--gray-600);
    white-space: nowrap;
    overflow: hidden;
}

.wbs-chart-days {
    display: flex;
    box-sizing: border-box;
}

/*
    **枠線を幅に含める。** 含めないと1日あたり枠線のぶんだけ広くなり、
    日付の見出しと棒が日を追うごとにずれていく（棒の位置は幅 x 日数で計算している）。
*/
.wbs-chart-day {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    border-right: 0.05rem solid var(--gray-100);
    font-size: 0.625rem;
    color: var(--gray-600);
}

    .wbs-chart-day.is-weekend {
        background: var(--gray-100);
        color: var(--gray-400);
    }

    .wbs-chart-day.is-today {
        background: var(--primary);
        color: white;
        font-weight: 700;
    }

.wbs-chart-dow {
    font-size: 0.5625rem;
    opacity: .8;
}

.wbs-chart-body {
    position: relative;
}

.wbs-chart-stripe {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .035);
}

.wbs-chart-rowline {
    position: absolute;
    left: 0;
    right: 0;
    height: 0.05rem;
    background: var(--gray-100);
}

/* 今日は線ではなく帯。1日の幅ぶんを薄く塗って、日付の見出しとそろえる */
.wbs-chart-todayband {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(37, 99, 235, .10);
    border-left: 0.05rem solid rgba(37, 99, 235, .45);
    border-right: 0.05rem solid rgba(37, 99, 235, .45);
    z-index: 1;
}

.wbs-chart-links {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
}

.wbs-link {
    fill: none;
    stroke: var(--gray-400);
    stroke-width: 1;
}

    .wbs-link.is-critical {
        stroke: var(--danger);
    }

.wbs-link-head {
    fill: var(--gray-400);
}

    .wbs-link-head.is-critical {
        fill: var(--danger);
    }

/*
    棒。**本体が濃く、進んだぶんを白で明るく重ねる**（画面モックと同じ）。
    逆にすると、進んでいない作業のほうが目立つ。
*/
.wbs-bar {
    position: absolute;
    border-radius: 0.25rem;
    background: var(--indigo-600);
    overflow: hidden;
    z-index: 3;
    display: flex;
    align-items: center;
}

    .wbs-bar.is-summary {
        background: var(--gray-600);
        border-radius: 0.15rem;
    }

    .wbs-bar.is-critical {
        background: var(--danger);
    }

    .wbs-bar.is-done {
        background: var(--success);
    }

.wbs-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .35);
    pointer-events: none;
}

.wbs-bar-label {
    position: relative;
    z-index: 1;
    padding: 0 0.3rem;
    font-size: 0.5625rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    pointer-events: none;
}

.wbs-legend {
    gap: 1rem;
    padding-top: 0.75rem;
    font-size: 0.6875rem;
    color: var(--gray-600);
}

.wbs-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.wbs-legend-mark {
    display: inline-block;
    width: 1.25rem;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: var(--indigo-600);
}

    .wbs-legend-mark.is-critical { background: var(--danger); }
    .wbs-legend-mark.is-summary { background: var(--gray-600); }
    .wbs-legend-mark.is-today { width: 0.9rem; height: 1rem; border-radius: 0; background: rgba(37, 99, 235, .18); border-left: 0.05rem solid var(--primary); border-right: 0.05rem solid var(--primary); }

/* 絞り込みで隠した行。表と工程表の**両方**を隠さないと目線がずれる */
.wbs-row.is-filtered,
.wbs-bar.is-filtered {
    display: none;
}

/*
    ── 注意書き（利用者画面） ──

    管理者ポータルの `system-alert` は **admin.css にしか無い**。
    利用者画面で使うと枠も色も付かず、`system-icon` が暗い四角として出て
    「押せそうなのに押せないボタン」に見える（2026-09-11 の指摘）。
    利用者画面ではこちらを使う。押せる見た目にはしない。
*/
.notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    border: 0.05rem solid var(--indigo-200);
    background: var(--indigo-50);
    color: var(--gray-700);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.notice--warn {
    border-color: var(--amber-400);
    background: var(--amber-100);
    color: var(--amber-800);
}

.notice-icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.4;
    color: var(--primary);
}

.notice--warn .notice-icon {
    color: var(--amber-800);
}

/* ── 参加者を選ぶ（モーダル） ── */

/*
    ［すべて選択］［選択を解除］。

    **主役は下の名前の一覧で、これは手伝いの操作。**
    btn-sm のままだと 34px の太字のボタンが2つ並び、
    その下の一覧より目立っていた（2026-09-15 指摘）。
    地を持たない小さめの字にして、触れたときだけ薄く敷く。
*/
.btn.picker-action {
    padding: 0.2rem 0.5rem;
    font-size: 0.786rem;
    font-weight: 400;
    color: var(--gray-600);
    background: none;
    border: none;
    border-radius: 0.286rem;
}

    .btn.picker-action:hover {
        background: var(--gray-100);
        color: var(--gray-800);
    }

.member-picker {
    max-height: 18rem;
    overflow-y: auto;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
}

.member-picker-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    margin: 0;
    cursor: pointer;
    border-bottom: 0.05rem solid var(--gray-100);
}

    .member-picker-row:last-child {
        border-bottom: none;
    }

    .member-picker-row:hover {
        background: var(--indigo-50);
    }

.member-picker-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-picker-mail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45%;
}

/*
    チェックと氏名の縦位置（2026-09-16 指摘 No.59）。

    工程の担当者は .form-group の中に置いている（参加者の追加は置いていない）。
    この並びの1行は <label> なので、**`.form-group label` のほうが強く当たり**
    （クラス1つ＋要素1つ ＞ クラス1つ）、display: flex も align-items: center も
    負けて block に戻る。すると中身は文字の並びとして流れ、チェックだけが
    文字の下端にそろって氏名とずれる（ついでに氏名が太字・大文字・灰色になり、
    立場を右へ寄せる ml-auto も効かない）。
    クラスを重ねて打ち消す（.picker-item--check と同じやり方）。
*/
.form-group label.member-picker-row {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: inherit;
    text-transform: none;
}

/*
    共通の input 指定（幅100%・padding 0.75rem 1rem）はチェックにも当たるため、
    .custome-checkbox で幅と高さを決めても**余白のぶんだけ箱が膨らむ**
    （[[aiagentsystem-css-input-trap]]）。素の大きさへ戻して行の中央にそろえる。
*/
.member-picker-row input[type="checkbox"] {
    width: 1rem !important;
    height: 1rem;
    padding: 0 !important;
    margin: 0 0.5rem 0 0 !important;
    flex: none;
    align-self: center;
}

/* ── 資料 ── */

.project-document-table td,
.project-document-table th {
    padding: 0.5rem;
    white-space: normal;
}

/*
    参加者の表。

    見た目は WBS の表に合わせているが、**行の高さの決まりは引き継がない。**
    .wbs-table は工程表の棒と合わせるために行を30pxに保つ作り（上下の余白ゼロ）で、
    参加者の表にそのまま当たると
      ・見出しの上に余白が無く、文字が枠にぶつかって見切れかける
      ・行の高さが［立場］のプルダウンの高さそのままになり、窮屈になる
    の2つが起きていた（2026-09-15 指摘）。ここは棒と揃える必要が無いので、
    資料の表（.project-document-table）と同じ余白にする。
*/
.project-member-table th,
.project-member-table td {
    padding: 0.5rem;
    vertical-align: middle;
}

.project-member-table th {
    /* 既定の .wbs-table th は vertical-align: bottom ＋ padding-bottom だけ持っている */
    padding-bottom: 0.5rem;
}

.project-document-size-col { width: 6rem; }
.project-document-status-col { width: 7rem; }
.project-document-date-col { width: 10rem; }


/* ── 工程のつながり（先行・後続） ──

   選ぶところは**候補を開いたまま**にしている（2026-09-16 指摘 No.61）。
   畳んだプルダウンだと、工程が増えるほど開いて目で探すことになる。
   絞り込みの欄・候補・つながり方を1つの面にまとめ、押す前に
   「A → B」を文章で確かめられるようにする。 */

.dependency-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--gray-50);
    border-radius: 0.5rem;
}

    .dependency-form .form-group {
        margin-bottom: 0;
    }

.dependency-pick {
    flex: 1 1 14rem;
    min-width: 0;
}

.dependency-settings {
    flex: 1 1 12rem;
    min-width: 0;
}

    .dependency-settings .form-group + .form-group {
        margin-top: 0.5rem;
    }

/* 共通の input 指定（padding 0.75rem 1rem）のままだと、絞り込みの欄が候補より目立つ */
.dependency-filter {
    margin-bottom: 0.25rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8125rem;
}

/* 候補の一覧。行が詰まりすぎないよう、option にだけ余白を付ける */
.dependency-list {
    padding: 0.25rem;
    font-size: 0.8125rem;
    background: white;
}

    .dependency-list option {
        padding: 0.2rem 0.35rem;
        border-radius: 0.25rem;
    }

.dependency-count {
    display: block;
    margin-top: 0.15rem;
}

/* 選んでいる組み合わせ。押す前にここで確かめる */
.dependency-preview {
    margin: 0.5rem 0;
    padding: 0.4rem 0.5rem;
    border-radius: 0.5rem;
    background: white;
    border: 0.05rem solid var(--gray-200);
    font-size: 0.8125rem;
    color: var(--gray-700);
    word-break: break-all;
}

/*
    一覧の表。見た目は WBS の表に合わせているが、行の高さの決まりは引き継がない
    （.project-member-table と同じ理由——ここは工程表の棒と並べていない）
*/
.dependency-table td,
.dependency-table th {
    padding: 0.4rem;
    white-space: normal;
}

.dependency-type-col { width: 9rem; }
.dependency-lag-col { width: 4.5rem; }


/* 狭い画面。工程は横に流せるが、表まで潰れると作業名が読めない */
@media (max-width: 900px) {
    .wbs-layout {
        display: block;
    }

    .wbs-table-pane {
        min-width: 0;
        border-right: none;
        border-bottom: 0.05rem solid var(--gray-200);
        overflow-x: auto;
    }
}


/* ============================================================
   プロジェクトのタスク（2026-09-11）

   工程（ProjectWbsItems）とタスク（Tasks）は別の入れ物。
   **工程＝計画のまとまり／タスク＝その中の日々の作業。**
   工程表からはタスクの件数だけを出し、中身はこちらのタブで扱う。
   ============================================================ */

/* 数字の帯の「3/5」。分母は添え字として小さく出す */
.wbs-stat-sub {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
}

/*
    工程表の「3/5」。押すとタスクのタブへ飛ぶ。
    **ボタンだが、見た目はリンクにする**——表の行の中で枠が出ると行が太る
*/
.wbs-task-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* 工程ごとのまとまり */
.project-task-group {
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

    /* 工程表から飛んできたときに、どこへ着いたのかを一瞬だけ光らせる */
    .project-task-group.is-focus {
        box-shadow: 0 0 0 0.15rem var(--primary);
    }

.project-task-group-head {
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    background: var(--gray-50);
    border-bottom: 0.05rem solid var(--gray-200);
}

.project-task-group-name {
    font-weight: 700;
    color: var(--gray-800);
}

.project-task-group-no {
    display: inline-block;
    margin-right: 0.4rem;
    color: var(--gray-400);
    font-size: 0.75rem;
    font-weight: 600;
}

.project-task-table {
    width: 100%;
}

    /* 行の高さは工程表と違って詰めなくてよい（棒と並べていないため） */
    .project-task-table td {
        padding: 0.35rem 0.4rem;
        white-space: normal;
    }

    /*
        見出しも本文と同じ余白にする。

        .wbs-table th は工程表の棒と行を揃えるため**上の余白を持たない**
        （padding: 0 0.4rem ＋ padding-bottom だけ）。td 側はすでに上の理由で
        余白を戻しているのに見出しだけ素通りしていたため、見出しの文字が
        背景の帯の上端にぶつかって見えていた。
        .project-member-table / .dependency-table と同じ直し方。
    */
    .project-task-table th {
        padding: 0.35rem 0.4rem;
        vertical-align: middle;
    }

.project-task-col-check { width: 2.2rem; text-align: center; }
.project-task-col-name { width: auto; }
.project-task-col-assignee { width: 7rem; max-width: 7rem; color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-task-col-date { width: 7rem; color: var(--gray-600); font-size: 0.6875rem; white-space: nowrap; }
.project-task-col-priority { width: 3.5rem; text-align: center; }

.project-task-name {
    color: var(--gray-800);
}

/* 終わったものは薄く。消さずに残すのは、何をやったかが記録として要るため */
.project-task-row.is-done .project-task-name {
    color: var(--gray-400);
    text-decoration: line-through;
}

.project-task-row.is-late .project-task-col-date {
    color: var(--danger);
    font-weight: 600;
}

/* タスク一覧のメモ。1行に収め、長いときは末尾を省略する */
.task-memo {
    max-width: 32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-task-memo {
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-task-priority {
    display: inline-block;
    min-width: 2rem;
    padding: 0.05rem 0.3rem;
    border-radius: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--gray-100);
    color: var(--gray-600);
}

    .project-task-priority.p-0 {
        background: var(--red-100);
        color: var(--danger);
    }

    .project-task-priority.p-2 {
        background: var(--gray-100);
        color: var(--gray-500);
    }

/* 工程の担当は複数選ぶ。モーダルの中なので、参加者の一覧より低く抑える */
.member-picker-sm {
    max-height: 11rem;
}

/* ================================================================
    Web会議：手を挙げる・リアクション・共有の一時停止（2026-09-14）
   ================================================================ */

/*
    リアクションの一覧。ボタンのすぐ上に出す。

    modal ではなく重ねる小さな面にしているのは、**会議を止めないため**。
    幕が下りると、その間の相手の様子が見えなくなる。
*/
/*
    操作のメニュー（2026-09-18）。

    機能が増えて操作の列が2行に折り返し、映像の高さを食っていた。
    関連するものは「ボタン → 一覧」にまとめる。操作の列は画面の上にあるので、
    **一覧は下へ開く**。枠と丸みはチャットの枠に、影はトーストにそろえる。
*/
.meeting-menu-wrap,
.meeting-reaction-wrap {
    position: relative;
    display: inline-flex;
}

.meeting-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 0.357rem);
    z-index: 20;
    min-width: 10rem;
    max-width: 20rem;
    padding: 0.286rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
}

    /* 右端のボタンの一覧は、画面からはみ出さないよう右そろえで開く */
    .meeting-menu.meeting-menu-right {
        left: auto;
        right: 0;
    }

.meeting-menu-button .meeting-menu-caret {
    margin-left: 0.143rem;
    font-size: 1rem !important;
    color: var(--gray-500);
}

.meeting-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.429rem 0.5rem;
    border: none;
    border-radius: 0.286rem;
    background: none;
    color: var(--gray-700, #374151);
    font-size: 0.857rem;
    text-align: left;
    cursor: pointer;
}

    .meeting-menu-item:hover {
        background: var(--gray-100, #f3f4f6);
    }

    .meeting-menu-item .material-symbols-outlined {
        flex: none;
        font-size: 1.143rem !important;
    }

    /* いま選んでいる並べ方 */
    .meeting-menu-item.is-active {
        color: var(--primary);
        font-weight: bold;
    }

    /* いま外へ出ているもの（共有中・録音中）。操作のボタンと同じ赤 */
    .meeting-menu-item.is-on {
        color: var(--danger);
    }

.meeting-menu-divider {
    height: 0.05rem;
    margin: 0.286rem 0.214rem;
    background: var(--gray-200);
}

/* リアクションの6つ。一覧の中で横に並べる */
.meeting-reaction-items {
    display: flex;
    gap: 0.143rem;
    padding: 0.143rem;
}

.meeting-reaction-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.286rem;
    height: 2.286rem;
    padding: 0;
    border: none;
    /* 丸みは枠の操作（.meeting-tile-action）と同じ */
    border-radius: 0.286rem;
    background: none;
    color: var(--gray-700, #374151);
    cursor: pointer;
}

    .meeting-reaction-item .material-symbols-outlined {
        font-size: 1.286rem !important;
    }

    .meeting-reaction-item:hover {
        background: var(--gray-100, #f3f4f6);
        color: var(--primary);
    }

/*
    手を挙げている印。名前は左下にあるので、こちらは左上に出す
    （右上は操作のボタンが並んでいる）。
*/
.meeting-tile-hand {
    position: absolute;
    top: 0.286rem;
    left: 0.286rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.714rem;
    height: 1.714rem;
    border-radius: 0.286rem;
    /* --warning という札はこの案件に無い。注意の色は --amber-500 */
    background: var(--amber-500);
    color: white;
}

    .meeting-tile-hand .material-symbols-outlined {
        font-size: 1rem !important;
    }

    .meeting-strip-tiles .meeting-tile-hand {
        width: 1.286rem;
        height: 1.286rem;
    }

        .meeting-strip-tiles .meeting-tile-hand .material-symbols-outlined {
            font-size: 0.786rem !important;
        }

/*
    リアクション。真ん中から少し上がって消える。

    3秒で自分から消えるので閉じる操作は要らない。
    動きは控えめにする（会議中に大きく動くものがあると、話より目が行く）。
*/
.meeting-tile-reaction {
    position: absolute;
    left: 50%;
    bottom: 22%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.857rem;
    height: 2.857rem;
    border-radius: 50%;
    /* 暗い映像の上でも白い線が沈まないよう、丸い地を敷く（濃さは名前の帯と同じ） */
    background: rgba(0, 0, 0, 0.55);
    color: white;
    pointer-events: none;
    animation: meeting-reaction-rise 3s ease-out forwards;
}

    .meeting-tile-reaction .material-symbols-outlined {
        font-size: 1.571rem !important;
    }

.meeting-strip-tiles .meeting-tile-reaction {
    width: 1.714rem;
    height: 1.714rem;
}

    .meeting-strip-tiles .meeting-tile-reaction .material-symbols-outlined {
        font-size: 1rem !important;
    }

@keyframes meeting-reaction-rise {
    0% { opacity: 0; transform: translate(-50%, 0.714rem); }
    15% { opacity: 1; transform: translate(-50%, 0); }
    75% { opacity: 1; transform: translate(-50%, -0.714rem); }
    100% { opacity: 0; transform: translate(-50%, -1.429rem); }
}

/*
    共有の一時停止。**映像は消さず、上に札を重ねる。**
    消すと枠ごと畳まれ、再開したときに相手の画面が作り直しになる。
*/
.meeting-tile-paused {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: 0.857rem;
    font-weight: bold;
    text-align: center;
    padding: 0 0.714rem;
}

.meeting-strip-tiles .meeting-tile-paused {
    font-size: 0.679rem;
}

/* ── プロジェクト専用エージェントへの指示（ポップアップ） ── */

/*
    プロジェクト詳細の［AIに指示］で開く窓。

    **見た目はAIチャットの画面に合わせる**（2026-09-15 利用者の指定）。
    吹き出しも入力欄も chat-body / chat-composer / composer-textarea をそのまま使い、
    ここでは**モーダルに収めるための高さ**だけを足す。
    専用のクラスで組み直すと、チャット側を直したときにここだけ古い見た目で残る。
*/
.project-agent-chat {
    display: flex;
    flex-direction: column;
    /* 中身の量で伸び縮みさせない。1往復ごとにモーダルの位置が動くと読めない */
    height: min(60vh, 32rem);
}

    /*
        .chat-body は高さ26remの決め打ちを持っている（親から高さが降りてこない場所で
        潰れないようにするための下限）。ここは親で高さを決めているので、
        チャットの画面（.chat-page）と同じように外す。
    */
    .project-agent-chat .chat-body {
        height: auto;
        min-height: 0;
    }

    /*
        入力欄は form で包んでいる（トークンを持たせるため）。
        **site.css の共通 `form` の余白と縦並びを打ち消す**——
        打ち消さないと、チャットの画面より入力欄の上下が広くなる。
    */
    .project-agent-chat .chat-composer form {
        display: block;
        gap: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

/* 何も話していないときの案内。例を出さないと、何を書けばよいか分からない */
.project-agent-empty {
    color: var(--gray-700);
    font-size: 0.8125rem;
    line-height: 1.7;
}

.project-agent-samples {
    margin: 0.5rem 0;
    padding-left: 1.2rem;
    color: var(--gray-600);
}

    .project-agent-samples li {
        margin-bottom: 0.15rem;
    }

/*
    読み直しの案内。**勝手に読み直さない**——書きかけの指示や開いているタブが飛ぶ。
    工程表とタスクは後ろの画面に描いてあるので、押されたときだけ読み直す。
*/
.project-agent-refresh {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-top: 0.05rem solid var(--indigo-200);
    background: var(--indigo-50);
    color: var(--gray-700);
    font-size: 0.8125rem;
}

/* ==================================================================
   通話履歴（/Call）

   **電話はWeb会議と別の立ち位置**（利用者の指定・2026-09-17）。
   通話は［Web会議］の一覧に出さないので、跡を見る場所はここだけ。
   並びはモック（com_agent_mockup_20260316bk.html の［通話履歴］）に合わせている。
   ================================================================== */

.call-alert {
    border-color: var(--amber-400);
    background: #fffbeb;
    color: var(--gray-800);
}

/* 絞り込みの札。リンクなので押した状態がURLに残る */
.call-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.429rem;
    margin-bottom: 0.714rem;
}

.call-filter {
    padding: 0.286rem 0.857rem;
    border: 0.05rem solid var(--gray-300);
    border-radius: 1.429rem;
    background: white;
    color: var(--gray-700);
    font-size: 0.857rem;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

    .call-filter:hover {
        background: var(--gray-50);
        color: var(--gray-900);
        text-decoration: none;
    }

    .call-filter.is-active {
        border-color: transparent;
        background: var(--primary);
        color: white;
    }

.call-filters-count {
    margin-left: auto;
    color: var(--gray-500);
    font-size: 0.857rem;
}

.call-empty {
    line-height: 1.7;
}

/*
    日付の見出し。**転がしても頭に残す**——長い履歴で「いつの通話か」を
    見失わないため。［もっと見る］で足した行も同じまとまりへ入る。
*/
.call-day-label {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 0.429rem 0.286rem;
    background: white;
    color: var(--gray-500);
    font-size: 0.786rem;
    font-weight: bold;
}

.call-row {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    /* 左は縦線（種別）のぶんだけ広く取る */
    padding: 0.571rem 0.429rem 0.571rem 0.786rem;
    border: 0.05rem solid transparent;
    border-radius: 0.857rem;
    cursor: pointer;
    min-width: 0;
}

    .call-row:hover {
        border-color: var(--gray-200);
        background: var(--gray-50);
    }

/*
    種別（プライベート／社内）は**行の頭の縦線**で出す（利用者の指摘・2026-09-17）。

    札で出していたが、「札の見え方が多すぎる」。デスクトップ版がメッセージ一覧で
    顔の輪の色（プライベート＝amber／社内＝primary）に分けているのと同じ色を使う。

    **枠線ではなく内側の影で引く。** .call-row:hover が border-color を
    まとめて塗り替えるので、border-left に色を置くと触れたときに消える。
*/
.call-row.is-private {
    box-shadow: inset 0.214rem 0 0 var(--amber-500);
}

.call-row.is-internal {
    box-shadow: inset 0.214rem 0 0 var(--primary);
}

.call-row-avatar {
    flex: none;
}

.call-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* 取り損ねた通話は氏名も赤。一覧を流し見たときに気づけるようにする */
.call-row.is-missed .call-row-name {
    color: var(--danger);
}

.call-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.143rem 0.571rem;
    margin-top: 0.143rem;
    color: var(--gray-500);
}

.call-row-direction {
    display: inline-flex;
    align-items: center;
    gap: 0.286rem;
}

/* 向きの色。発信＝緑・着信＝青・不在＝赤（モックと同じ） */
.call-row.is-outgoing .call-row-direction {
    color: var(--green-700);
}

.call-row.is-incoming .call-row-direction {
    color: var(--primary);
}

.call-row.is-missed .call-row-direction {
    color: var(--danger);
}

/* まだ終わっていない通話。時間ではなく状態を出す */
.call-row-live {
    padding: 0 0.429rem;
    border-radius: 0.857rem;
    background: var(--green-100);
    color: var(--green-700);
    font-weight: bold;
}

/*
    通話時間の札（利用者の指摘・2026-09-17）

    素の文字で出すと、すぐ左の時刻（HH:mm）と数字が2つ並び、
    どちらが「いつ」でどちらが「どれだけ」か読み取れない。
    数字の幅をそろえて、行ごとに桁がずれないようにする。
*/
.call-row-duration {
    padding: 0 0.429rem;
    border-radius: 0.857rem;
    background: var(--gray-100);
    color: var(--gray-600);
    font-variant-numeric: tabular-nums;
}

/* ボタンは縮めない。縮むとアイコンが重なる */
.call-row-actions {
    display: flex;
    align-items: center;
    gap: 0.143rem;
    flex: none;
}

.call-more {
    margin-top: 0.857rem;
    text-align: center;
}

/* ---- 通話の詳細（モーダル） ---- */

.call-detail-head {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    margin-bottom: 1rem;
}

.call-detail-avatar {
    display: inline-flex;
    flex: none;
}

    /* 詳細の顔は一覧より大きく出す（誰との通話かを最初に見せる） */
    .call-detail-avatar .user-icon {
        width: 3.429rem !important;
        font-size: 1.286rem;
    }

.call-detail-name {
    font-size: 1.143rem;
}

.call-detail-items {
    display: flex;
    flex-direction: column;
    gap: 0.429rem;
}

.call-detail-item {
    display: flex;
    align-items: center;
    gap: 0.857rem;
    padding: 0.571rem 0.857rem;
    border-radius: 0.714rem;
    background: var(--gray-50);
    color: var(--gray-800);
}

    .call-detail-item .material-symbols-outlined {
        flex: none;
        color: var(--gray-400);
    }

.call-detail-label {
    flex: none;
    width: 4.571rem;
    color: var(--gray-500);
    font-size: 0.857rem;
}

.call-detail-value {
    font-weight: bold;
    min-width: 0;
}

    .call-detail-value.is-answered {
        color: var(--green-700);
    }

    .call-detail-value.is-missed {
        color: var(--danger);
    }

/*
    通話中の帯（2026-09-17）

    **通話は別の窓で進む**ので、元の画面には何も見えない。
    どのページの右下にも細い帯を出して、そこから通話の窓を前に出せるようにする。
    出る・消えるは会議室の画面が置いた印（localStorage）で決まる。
*/
.call-bar {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    /* 通話の幕（1090）より下、ふつうの画面より上 */
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 0.714rem;
    padding: 0.5rem 0.714rem 0.5rem 0.857rem;
    border-radius: 1.25rem;
    background: var(--gray-900);
    color: white;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

.call-bar-name {
    font-size: 0.857rem;
    font-weight: bold;
    /* 長い名前で帯が画面幅いっぱいにならないようにする */
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-bar-button {
    padding: 0.214rem 0.714rem;
    font-size: 0.857rem;
}

/* 通話の窓が止められたときの1つだけのボタン。2つ並びより広く取る */
.call-button--wide {
    width: auto;
    min-width: 11rem;
    flex-direction: row;
    gap: 0.5rem;
}



/* ===========================================================
   ナレッジノート（2026-09-17）

   左に置き場所の木、右に原本。**同じ画面に並べる**のは、AIが答えの根拠にした
   資料を、人がその場で開いて確かめられるようにするため（設計書 §8）。

   文字の大きさは rem で書く。［特大］にしたときに、ここだけ据え置きにならないように。
   =========================================================== */

/*
   ノートとソースの行き来（設計「ナレッジの再編」A-1）。

   タブのぶんだけ本体を低くする。引かないと画面全体がスクロールしてしまい、
   中で別々にスクロールさせている意味が無くなる。
*/
.note-page {
    display: flex;
    flex-direction: column;
    /* ヘッダーのぶんを引いた高さ。中で別々にスクロールさせる */
    height: calc(100vh - 4rem);
    min-height: 0;
}

.note-tabs {
    flex: 0 0 auto;
    padding: 0 0.857rem;
}

.note-tabs .tab-container {
    margin: 0.5rem 0 0;
}

.note-layout {
    display: flex;
    align-items: stretch;
    height: calc(100vh - 4rem);
    min-height: 0;
}

/*
    タブの下に置いたときは、**残りの高さを取る**。
    引き算にすると、文字の大きさを変えたときにタブの高さと合わなくなる。
*/
.note-page > .note-layout {
    flex: 1 1 auto;
    height: auto;
}

/* ---- 左：探す・置き場所の木 ---- */

.note-side {
    display: flex;
    flex-direction: column;
    width: 18rem;
    min-width: 14rem;
    border-right: 0.05rem solid var(--gray-200);
    overflow-y: auto;
    background: var(--gray-50);
}

.note-side-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.714rem;
    border-bottom: 0.05rem solid var(--gray-200);
    /* 木を辿っている間も探す欄は見えていてほしい */
    position: sticky;
    top: 0;
    background: var(--gray-50);
    z-index: 1;
}

.note-side-new {
    flex: 0 0 auto;
}

.note-side-label {
    padding: 0.571rem 0.857rem 0.286rem;
    font-size: 0.786rem;
    color: var(--gray-500);
}

.note-side-none {
    padding: 0.857rem;
    font-size: 0.857rem;
    color: var(--gray-500);
}

.note-tree {
    padding: 0 0.429rem 1.5rem;
}

.note-tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 入れ子の段は少しだけ下げる。深く下げると、4段目で名前が読めなくなる */
.note-tree-children .note-tree-list {
    padding-left: 0.857rem;
    border-left: 0.05rem solid var(--gray-200);
}

.note-tree-summary,
.note-tree-item {
    display: flex;
    align-items: center;
    gap: 0.286rem;
    width: 100%;
    padding: 0.286rem 0.429rem;
    border: 0;
    border-radius: 0.286rem;
    background: transparent;
    color: var(--gray-800);
    font-size: 0.857rem;
    text-align: left;
    cursor: pointer;
}

    .note-tree-summary:hover,
    .note-tree-item:hover {
        background: var(--gray-200);
    }

/* いま開いているノート。木の中のどこに居るのかが分かるようにする */
.note-tree-item.is-current {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-weight: bold;
}

/* 既定の三角は消す（フォルダのアイコンで開閉が分かる） */
.note-tree-summary {
    list-style: none;
}

    .note-tree-summary::-webkit-details-marker {
        display: none;
    }

.note-tree-icon {
    /* **px で固定する。** 文字サイズ［特大］で行の高さが崩れるため */
    font-size: 18px !important;
    flex: 0 0 auto;
    color: var(--gray-500);
}

.note-tree-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-tree-count {
    margin-left: auto;
    font-size: 0.714rem;
    color: var(--gray-400);
}

/* 検索の結果 */

.note-hits {
    list-style: none;
    margin: 0;
    padding: 0 0.429rem 1.5rem;
}

.note-hit {
    display: block;
    width: 100%;
    padding: 0.5rem;
    border: 0;
    border-radius: 0.286rem;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

    .note-hit:hover {
        background: var(--gray-200);
    }

.note-hit-title {
    display: block;
    font-size: 0.857rem;
    font-weight: bold;
    color: var(--gray-900);
}

.note-hit-path {
    display: block;
    font-size: 0.714rem;
    color: var(--gray-400);
}

.note-hit-snippet {
    display: block;
    margin-top: 0.214rem;
    font-size: 0.786rem;
    color: var(--gray-600);
    /* 2行で切る。長い抜き書きが並ぶと、結果が何件あるのか分からなくなる */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- 右：原本 ---- */

.note-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
}

.note-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
    color: var(--gray-500);
}

.note-empty-icon {
    font-size: 48px !important;
    color: var(--gray-300);
}

.note-empty-title {
    margin: 0.857rem 0 0.286rem;
    font-size: 1.071rem;
    font-weight: bold;
    color: var(--gray-700);
}

.note-empty-note {
    margin: 0;
    font-size: 0.857rem;
    line-height: 1.7;
}

.note-paper {
    padding: 1rem 1.25rem 3rem;
}

.note-head {
    display: flex;
    align-items: flex-start;
    gap: 0.857rem;
    flex-wrap: wrap;
}

.note-head-main {
    flex: 1 1 18rem;
    min-width: 0;
}

.note-head-actions {
    display: flex;
    align-items: center;
    gap: 0.286rem;
    margin-left: auto;
}

.note-btn {
    display: flex;
    align-items: center;
    gap: 0.214rem;
}

.note-title {
    margin: 0;
    font-size: 1.286rem;
    font-weight: bold;
    color: var(--gray-900);
    word-break: break-word;
}

.note-path {
    display: flex;
    align-items: center;
    gap: 0.214rem;
    margin: 0.143rem 0 0;
    font-size: 0.786rem;
    color: var(--gray-500);
    word-break: break-all;
}

.note-path-icon {
    font-size: 16px !important;
}

.note-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.429rem;
    margin: 0.571rem 0 0.857rem;
    padding-bottom: 0.857rem;
    border-bottom: 0.05rem solid var(--gray-200);
}

.note-meta-item {
    font-size: 0.786rem;
    color: var(--gray-500);
}

/* **AIが書いたことは必ず見せる。** 人が書いたものと同じ見た目で並べない */
.note-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.143rem;
    padding: 0.071rem 0.429rem;
    border-radius: 0.857rem;
    font-size: 0.714rem;
    font-weight: bold;
}

    .note-badge .material-symbols-outlined {
        font-size: 14px !important;
    }

.note-badge--ai {
    background: var(--indigo-100);
    color: var(--indigo-700);
}

.note-tag {
    padding: 0.071rem 0.429rem;
    border-radius: 0.857rem;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.714rem;
}

.note-body {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.note-content {
    flex: 1 1 auto;
    min-width: 0;
}

.note-view {
    font-size: 0.929rem;
    line-height: 1.9;
    color: var(--gray-800);
    word-break: break-word;
}

    .note-view h1,
    .note-view h2,
    .note-view h3 {
        margin: 1.5rem 0 0.571rem;
        font-weight: bold;
        line-height: 1.5;
    }

    .note-view h1 {
        font-size: 1.214rem;
        padding-bottom: 0.286rem;
        border-bottom: 0.05rem solid var(--gray-200);
    }

    .note-view h2 {
        font-size: 1.071rem;
    }

    .note-view h3 {
        font-size: 0.964rem;
    }

    .note-view p {
        margin: 0 0 0.857rem;
    }

    .note-view ul,
    .note-view ol {
        margin: 0 0 0.857rem;
        padding-left: 1.5rem;
    }

    .note-view table {
        width: 100%;
        margin: 0 0 0.857rem;
        border-collapse: collapse;
        font-size: 0.857rem;
    }

    .note-view th,
    .note-view td {
        padding: 0.357rem 0.571rem;
        border: 0.05rem solid var(--gray-200);
    }

    .note-view th {
        background: var(--gray-100);
        text-align: left;
    }

    .note-view blockquote {
        margin: 0 0 0.857rem;
        padding: 0.286rem 0.857rem;
        border-left: 0.214rem solid var(--gray-300);
        color: var(--gray-600);
    }

    .note-view pre {
        padding: 0.714rem;
        border-radius: 0.286rem;
        background: var(--gray-100);
        overflow-x: auto;
        font-size: 0.857rem;
    }

    .note-view code {
        padding: 0.071rem 0.286rem;
        border-radius: 0.214rem;
        background: var(--gray-100);
        font-size: 0.857rem;
    }

/* [[…]] のリンク。**まだ無い行き先は見た目を変える**——
   「まだ書いていない知識」が見えることが、この仕組みの値打ちそのもの */
.note-wiki {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 0.05rem solid color-mix(in srgb, var(--primary) 40%, transparent);
    cursor: pointer;
}

    .note-wiki:hover {
        background: color-mix(in srgb, var(--primary) 8%, transparent);
    }

.note-wiki--missing {
    color: var(--orange);
    border-bottom-style: dashed;
    border-bottom-color: color-mix(in srgb, var(--orange) 50%, transparent);
}

    .note-wiki--missing:hover {
        background: color-mix(in srgb, var(--orange) 10%, transparent);
    }

.note-editor {
    width: 100%;
    min-height: 25rem;
    padding: 0.857rem;
    border: 0.05rem solid var(--gray-300);
    border-radius: 0.286rem;
    /* 書くときだけ等幅にする。表や字下げが揃って見えないと直しにくい */
    font-family: "Consolas", "Menlo", "Osaka-mono", monospace;
    font-size: 0.857rem;
    line-height: 1.8;
    resize: vertical;
}

/* ---- つながり・更新の記録 ---- */

.note-aside {
    flex: 0 0 17rem;
    width: 17rem;
    padding-left: 1rem;
    border-left: 0.05rem solid var(--gray-200);
}

.note-aside-block {
    margin-bottom: 1.25rem;
}

.note-aside-title {
    margin: 0 0 0.357rem;
    font-size: 0.786rem;
    font-weight: bold;
    color: var(--gray-700);
}

.note-aside-note {
    margin-left: 0.286rem;
    font-weight: normal;
    color: var(--gray-400);
}

.note-aside-none {
    margin: 0;
    font-size: 0.786rem;
    color: var(--gray-400);
    line-height: 1.6;
}

.note-fields {
    margin: 0;
    font-size: 0.786rem;
}

    .note-fields dt {
        color: var(--gray-500);
        font-weight: normal;
    }

    .note-fields dd {
        margin: 0 0 0.286rem;
        color: var(--gray-800);
    }

.note-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.note-link {
    display: flex;
    align-items: center;
    gap: 0.214rem;
    width: 100%;
    padding: 0.214rem 0.286rem;
    border: 0;
    border-radius: 0.214rem;
    background: transparent;
    color: var(--primary);
    font-size: 0.786rem;
    text-align: left;
    cursor: pointer;
}

    .note-link:hover {
        background: var(--gray-100);
    }

    .note-link .material-symbols-outlined {
        font-size: 16px !important;
    }

.note-link--missing {
    color: var(--orange);
}

.note-revisions {
    list-style: none;
    margin: 0;
    padding: 0;
}

.note-revision {
    display: flex;
    align-items: center;
    gap: 0.286rem;
    padding: 0.214rem 0;
    font-size: 0.75rem;
    color: var(--gray-600);
    border-bottom: 0.05rem solid var(--gray-100);
}

.note-revision-when {
    flex: 0 0 auto;
    color: var(--gray-400);
}

.note-revision-what {
    flex: 0 0 auto;
    font-weight: bold;
}

    .note-revision-what.is-ai {
        color: var(--indigo-600);
    }

.note-revision-who {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-revision-restore {
    flex: 0 0 auto;
    padding: 0 0.286rem;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 0.714rem;
    cursor: pointer;
}

/* 置き場所を選ぶモーダルの、フォルダの候補 */
.note-folder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.286rem;
}

.note-folder-chip {
    padding: 0.143rem 0.571rem;
    border: 0.05rem solid var(--gray-300);
    border-radius: 0.857rem;
    background: white;
    color: var(--gray-700);
    font-size: 0.75rem;
    cursor: pointer;
}

    .note-folder-chip:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

/* 狭い画面。**横に3つ並べない**——どれも読めない幅になる */
@media (max-width: 1200px) {
    .note-body {
        flex-direction: column;
    }

    .note-aside {
        flex: 1 1 auto;
        width: 100%;
        padding-left: 0;
        padding-top: 0.857rem;
        border-left: 0;
        border-top: 0.05rem solid var(--gray-200);
    }
}

@media (max-width: 768px) {
    .note-page {
        height: auto;
    }

    .note-layout {
        flex-direction: column;
        height: auto;
    }

    .note-side {
        width: 100%;
        max-height: 18rem;
        border-right: 0;
        border-bottom: 0.05rem solid var(--gray-200);
    }
}


/* ---- ナレッジノートのつながりの図（俯瞰・2026-09-17） ---- */

.note-graph-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 4rem);
    min-height: 0;
}

.note-graph-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.857rem;
    padding: 0.571rem 0.857rem;
    border-bottom: 0.05rem solid var(--gray-200);
}

.note-graph-tabs {
    display: flex;
    align-items: center;
    gap: 0.143rem;
    padding: 0.143rem;
    border-radius: 0.429rem;
    background: var(--gray-100);
}

.note-graph-tab {
    display: flex;
    align-items: center;
    gap: 0.214rem;
    padding: 0.286rem 0.714rem;
    border-radius: 0.357rem;
    color: var(--gray-600);
    font-size: 0.857rem;
    text-decoration: none;
}

    .note-graph-tab .material-symbols-outlined {
        font-size: 18px !important;
    }

    .note-graph-tab.is-current {
        background: white;
        color: var(--gray-900);
        font-weight: bold;
        box-shadow: 0 0.05rem 0.143rem rgba(0, 0, 0, 0.08);
    }

.note-graph-filter {
    margin: 0;
}

    .note-graph-filter .form-control {
        width: 14rem;
        height: 2.143rem;
        font-size: 0.857rem;
    }

.note-graph-stats {
    display: flex;
    align-items: center;
    gap: 0.857rem;
}

.note-graph-stat {
    font-size: 0.786rem;
    color: var(--gray-500);
}

    .note-graph-stat b {
        font-size: 1rem;
        color: var(--gray-900);
    }

/* 「まだ無い」「孤立」は、この画面でしか気づけない数。押すと図の上で絞れる */
.note-graph-stat--button {
    padding: 0.143rem 0.571rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.857rem;
    background: white;
    cursor: pointer;
}

    .note-graph-stat--button.is-missing b {
        color: var(--orange);
    }

    .note-graph-stat--button.is-isolated b {
        color: var(--gray-500);
    }

    .note-graph-stat--button.is-on {
        border-color: var(--primary);
        background: color-mix(in srgb, var(--primary) 8%, transparent);
    }

.note-graph-tools {
    display: flex;
    align-items: center;
    gap: 0.429rem;
    margin-left: auto;
}

.note-graph-canvas {
    flex: 1 1 auto;
    min-height: 0;
    /* 図は明るい面の上に描く。線が薄いので、背景に色を敷くと見えなくなる */
    background: var(--gray-50);
    overflow: hidden;
}

.note-graph-svg {
    width: 100%;
    height: 100%;
    cursor: grab;
}

    .note-graph-svg.is-dragging {
        cursor: grabbing;
    }

.note-graph-edge {
    stroke: var(--gray-300);
    stroke-width: 1.2;
}

    /* 行き先がまだ無い線は点線。**消さずに残す**——書かれていることは事実なので */
    .note-graph-edge.is-missing {
        stroke: var(--orange);
        stroke-dasharray: 4 3;
        opacity: 0.7;
    }

    .note-graph-edge.is-dim {
        opacity: 0.08;
    }

.note-graph-node {
    cursor: pointer;
}

    .note-graph-node circle {
        stroke-width: 1.5;
        transition: opacity 0.1s;
    }

    /* まだ無い行き先は中を塗らない。「器はあるが中身が無い」がそのまま形になる */
    .note-graph-node.is-missing circle {
        stroke-dasharray: 3 2;
    }

    .note-graph-node.is-dim {
        opacity: 0.12;
    }

    .note-graph-node.is-focus circle {
        stroke-width: 3;
    }

.note-graph-ai {
    fill: var(--indigo-600);
    stroke: white;
    stroke-width: 1;
}

.note-graph-label {
    font-size: 10px;
    fill: var(--gray-700);
    text-anchor: middle;
    /* 点を押したいので、名前は当たり判定から外す */
    pointer-events: none;
}

.note-graph-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.857rem;
    padding: 0.429rem 0.857rem;
    border-top: 0.05rem solid var(--gray-200);
    font-size: 0.75rem;
    color: var(--gray-500);
}

.note-graph-legend-item {
    display: flex;
    align-items: center;
    gap: 0.286rem;
}

.note-graph-dot {
    width: 0.714rem;
    height: 0.714rem;
    border-radius: 50%;
    background: var(--primary);
}

    .note-graph-dot.is-ai {
        background: var(--indigo-600);
    }

    .note-graph-dot.is-missing {
        background: transparent;
        border: 0.107rem dashed var(--orange);
    }

.note-graph-legend-note {
    margin-left: auto;
}

/* 触っている点の中身を出す小窓 */
.note-graph-card {
    position: fixed;
    z-index: 1060;
    width: 15rem;
    padding: 0.571rem 0.714rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.429rem;
    background: white;
    box-shadow: 0 0.286rem 0.857rem rgba(0, 0, 0, 0.12);
    /* 小窓の上にマウスが乗ると図の判定が切れるので、素通りさせる */
    pointer-events: none;
}

.note-graph-card-title {
    margin: 0;
    font-size: 0.857rem;
    font-weight: bold;
    color: var(--gray-900);
}

.note-graph-card-path {
    margin: 0.143rem 0 0;
    font-size: 0.714rem;
    color: var(--gray-500);
    word-break: break-all;
}

.note-graph-card-note {
    margin: 0.286rem 0 0;
    font-size: 0.714rem;
    color: var(--gray-600);
}

.note-graph-card-open {
    margin: 0.143rem 0 0;
    font-size: 0.714rem;
    color: var(--primary);
}

@media (max-width: 992px) {
    .note-graph-tools {
        margin-left: 0;
        width: 100%;
    }
}

/* ノートの一覧側にも同じ切り替えを出す（同じ知識の2つの見え方） */
.note-side-tabs {
    display: flex;
    align-items: center;
    gap: 0.143rem;
    margin: 0.571rem 0.714rem 0;
    padding: 0.143rem;
    border-radius: 0.429rem;
    background: var(--gray-100);
}

    .note-side-tabs .note-graph-tab {
        flex: 1 1 0;
        justify-content: center;
    }

/* 要約・チャットからノートにするときの「入る内容」 */
.note-source-preview {
    max-height: 12rem;
    padding: 0.571rem 0.714rem;
    border: 0.05rem solid var(--gray-200);
    border-radius: 0.286rem;
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 0.786rem;
    line-height: 1.7;
    /* 改行はそのまま。要約は行で意味が決まる */
    white-space: pre-wrap;
    overflow-y: auto;
}

/* かけ合わせ検索の案内（意味の近いノートも含めている／索引を作り直す） */
.note-side-hint {
    display: flex;
    align-items: center;
    gap: 0.214rem;
    margin: 0 0.857rem 0.286rem;
    font-size: 0.714rem;
    color: var(--gray-500);
}

    .note-side-hint .material-symbols-outlined {
        font-size: 14px !important;
    }

.note-side-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/*
    ノートのボタンを隠す。

    **インラインの style="display:none" では隠れない。** custom.css が
    button.btn { display: flex !important } を当てているため、同じ強さで外す必要がある
    （実機で［編集］［保存］［やめる］が3つ並んで出た）。
*/
.note-btn.is-hidden {
    display: none !important;
}

/*
    AIチャットの開始画面（ウェルカム）— 2026-09-29 デザイン「AIチャット ウェルカム」

    まだ1通も送っていない新しいチャットのときだけ、.chat-content に
    .chat-content--welcome が付く（_ChatContent.cshtml）。
    挨拶 → 入力欄 → エージェントの選択 → 注意書き を真ん中に縦に並べ、
    最初の送信で chat/list.js の leaveWelcome が外して、いつもの並び（入力欄は下）へ戻す。

    並びは DOM を動かさず、枠ごとスクロールさせて上下の余白（margin:auto）で真ん中に寄せる。
    入力欄のフォームを動かすと、送信・添付・音声会話の処理がつかむ位置が変わるため。
*/
.chat-page > .content.chat-content.chat-content--welcome {
    overflow-y: auto;
    scrollbar-width: thin;
}

    /* スクロールしてもヘッダー（メニュー・設定）は上に残す */
    .chat-content--welcome > .chat-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
    }

    /* 会話はまだ無い。場所を取らせない */
    .chat-content--welcome > .chat-body {
        display: none;
    }

    .chat-content--welcome > .chat-welcome-head,
    .chat-content--welcome > form,
    .chat-content--welcome > .chat-welcome-foot {
        width: calc(100% - 3rem);
        max-width: 42rem;
        align-self: center;
    }

.chat-welcome-head {
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    animation: chat-welcome-in 0.4s ease;
}

.chat-welcome-badge {
    width: 4.571rem;
    height: 4.571rem;
    border-radius: 1.286rem;
    background: linear-gradient(160deg, #6582ff 0%, var(--primary) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(37, 99, 235, .28), 0 2px 4px rgba(37, 99, 235, .2);
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* .material-symbols-outlined の大きさは !important で決め打ちされているので、同じ強さで上書きする */
    .chat-welcome-badge .material-symbols-outlined {
        font-size: 2.571rem !important;
        color: #fff;
    }

.chat-welcome-title {
    margin: 0;
    font-size: 1.714rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--gray-800);
}

.chat-welcome-lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--gray-600);
}

/* 入力欄はカードにして真ん中に置く。文字を上、ボタンを下の段に並べる */
.chat-content--welcome .chat-composer {
    margin-top: 1.6rem;
    padding: 0.9rem 0.9rem 0.65rem 1.15rem;
    border: 1px solid #d9dde3;
    border-radius: 0.93rem;
    background: #fff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .06);
}

    .chat-content--welcome .chat-composer:focus-within {
        border-color: var(--primary);
    }

.chat-content--welcome .chat-composer-inner {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

    .chat-content--welcome .chat-composer-inner .composer-textarea {
        order: -1;
        flex: 1 0 100%;
        min-height: 3.4rem;
        border: none;
        outline: none;
        box-shadow: none;
        background: transparent;
        padding-left: 0;
        padding-right: 0;
    }

    /* 送信は右端へ */
    .chat-content--welcome .chat-composer-inner .chat-send {
        margin-left: auto;
    }

.chat-welcome-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 14rem;
    height: 2.143rem;
    padding: 0 0.75rem 0 0.6rem;
    border-radius: 999px;
    background: var(--indigo-50);
    color: var(--primary);
    font-size: 0.857rem;
    font-weight: 700;
    white-space: nowrap;
}

.chat-welcome-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-welcome-foot {
    margin-top: 1.6rem;
    margin-bottom: auto;
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.chat-welcome-agents-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.chat-welcome-label {
    font-size: 0.857rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gray-500);
}

.chat-welcome-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 14.3rem;
    max-width: 50%;
    height: 2.143rem;
    margin: 0;
    padding: 0 0.7rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.57rem;
    background: #fafbfc;
    color: var(--gray-500);
}

    .chat-welcome-search:focus-within {
        border-color: var(--primary);
        background: #fff;
    }

    .chat-welcome-search input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        font: inherit;
        font-size: 0.857rem;
        color: var(--gray-800);
        padding: 0;
        height: auto;
        box-shadow: none;
    }

.chat-welcome-agents {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.86rem), 1fr));
    gap: 0.57rem;
}

/* 押しても画面は読み直さない（chat/list.js の pickWelcomeAgent）。見た目は札のまま */
.chat-welcome-agent {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.7rem;
    background: #fff;
    color: var(--gray-800);
    text-decoration: none;
}

    .chat-welcome-agent:hover {
        background: #f1f4fe;
        border-color: #c9d3fb;
        color: var(--gray-800);
        text-decoration: none;
    }

    .chat-welcome-agent.is-active {
        background: #f1f4fe;
        border-color: var(--primary);
    }

.chat-welcome-agent-icon {
    flex-shrink: 0;
    width: 2.143rem;
    height: 2.143rem;
    border-radius: 0.57rem;
    background: #f1f3f6;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .chat-welcome-agent.is-active .chat-welcome-agent-icon {
        background: var(--primary);
        color: #fff;
    }

.chat-welcome-agent-name {
    flex: 1;
    min-width: 0;
    font-size: 0.857rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-welcome-agent.is-active .chat-welcome-agent-name {
    font-weight: 700;
}

.chat-welcome-agent-check {
    flex-shrink: 0;
    color: var(--primary);
}

    .chat-welcome-agent:not(.is-active) .chat-welcome-agent-check {
        display: none;
    }

.chat-welcome-empty {
    margin: 0;
    padding: 0.85rem 0;
    text-align: center;
    font-size: 0.857rem;
    color: var(--gray-500);
}

.chat-welcome-note {
    margin: 0.4rem 0 0;
    text-align: center;
    font-size: 0.857rem;
    color: var(--gray-500);
}

@keyframes chat-welcome-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .chat-content--welcome > .chat-welcome-head,
    .chat-content--welcome > form,
    .chat-content--welcome > .chat-welcome-foot {
        width: calc(100% - 1.5rem);
    }

    .chat-welcome-title {
        font-size: 1.43rem;
    }
}

/*
    左メニューの上の切り替え（メインメニュー／チャットメニュー）— 2026-09-29 デザイン「AIチャット ウェルカム」

    AIチャットの画面だけ（_HeaderLayout.cshtml）。チャット側は「チャット一覧を開いたままにする」と同じ状態。
    固定したチャット一覧は、ロゴの行（4rem）と利用者の欄の間に収め、切り替えと利用者の欄を隠さない。
    利用者の欄の高さは chat/list.js が測って --chat-dock-bottom で渡す。
    狭い画面ではメニュー自体が引き出しなので、切り替えは出さず、これまでの重ねる動きのまま。
*/
.menu-switch {
    position: relative;
    display: flex;
    flex-shrink: 0;
    padding: 3px;
    border: none;
    cursor: pointer;
    border-radius: 9px;
    background: #152032;
    box-shadow: inset 0 0 0 1px var(--gray-700);
}

.menu-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 26px;
    border-radius: 7px;
    background: var(--primary);
    box-shadow: 0 2px 6px rgba(37, 99, 235, .35);
    transition: transform .2s ease;
}

.menu-switch.is-chat .menu-switch-knob {
    transform: translateX(28px);
}

.menu-switch-btn {
    position: relative;
    width: 28px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
}

    .menu-switch-btn .material-symbols-outlined {
        font-size: 1.286rem !important;
        color: inherit;
    }

    /* 選ばれていない側の印は控えめに */
    .menu-switch:not(.is-chat) .menu-switch-btn[data-menu-switch="chat"],
    .menu-switch.is-chat .menu-switch-btn[data-menu-switch="main"] {
        color: var(--gray-400);
    }

    .menu-switch:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

@media (max-width: 900px) {
    .menu-switch {
        display: none;
    }
}

@media (min-width: 901px) {
    .side-menu.is-pinned {
        top: 4rem;
        bottom: var(--chat-dock-bottom, 5.5rem);
        height: auto;
        background: #f5f6f8;
        display: flex;
        flex-direction: column;
    }

        /* 新規チャット（エージェント）は上の3割ほどまで。残りはチャット一覧に回す */
        .side-menu.is-pinned .sidebar-body {
            flex: 0 1 auto;
            max-height: 35%;
            scrollbar-width: thin;
            scrollbar-color: #d4d8df transparent;
        }

        .side-menu.is-pinned #chat-list {
            flex: 1 1 0%;
            min-height: 0;
            max-height: none;
        }

        /* 固定を外す・閉じるは上の切り替えが受け持つ。見出しの行ごと要らない */
        .side-menu.is-pinned .sidebar-header {
            display: none;
        }

    /* 切り替えがある画面では、チャット一覧を開くボタン（≡）も上の切り替えに任せる */
    .chat-page.has-menu-switch .chat-header button[cmd="menu"] {
        display: none !important;
    }
}

/*
    付いたチャット名の出し方（chat/list.js の typeTitle）— 2026-09-29
    1文字ずつ少しずつずらして、ぼかしから浮かび上がらせる。遅らせる量は JS が文字ごとに付ける。
*/
.chat-title-char {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    animation: chat-title-char-in 360ms cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes chat-title-char-in {
    from { opacity: 0; transform: translateY(3px); filter: blur(3px); }
    to { opacity: 1; transform: none; filter: none; }
}

/*
    帳票モードの札（入力欄の上）— 2026-09-29
    出ているあいだに送った発言からは、回答の代わりに帳票を作る（chat/list.js）。×で普通の会話に戻る。
*/
.composer-report {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.2rem 0.3rem 0.2rem 0.65rem;
    border: 1px solid var(--indigo-100);
    border-radius: 999px;
    background: var(--indigo-50);
    color: var(--primary);
    font-size: 0.857rem;
    font-weight: 700;
}

    .composer-report.d-none {
        display: none !important;
    }

    .composer-report .material-symbols-outlined {
        color: var(--primary);
    }

.composer-report-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-report-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
}

    .composer-report-clear:hover {
        background: var(--indigo-100);
    }