/* ============================================================
   TrueStage カスタムスキン(elastic継承)
   独自CSSはすべてここに集約する。elastic本体は継承しているので
   ここには「上書き・追加」だけを書く。
   PHPプラグイン(custom_from / easy_forward)が使うクラスも
   ここで定義し、PHP側は<style>を出力しない方針。
   ============================================================ */

/* ------------------------------------------------------------
   markasjunk: 迷惑メール/非迷惑メール ボタンのラベル切れ対策
   ------------------------------------------------------------ */
.button.notjunk .inner,
.button.junk .inner {
    font-size: 80%;
}

/* ------------------------------------------------------------
   custom_from: 返信画面の送信元バナー
   状態はPHPが class(cf-registered / cf-unregistered / cf-notarget)で付与。
   色・装飾はここで定義する。
   ------------------------------------------------------------ */
/* 返信画面ではネイティブの差出人セレクタを隠す */
#compose_from { display: none !important; }

#custom_from_banner {
    color: #ffffff;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    margin: 10px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#custom_from_banner.cf-registered   { background-color: #1e7e34; } /* 登録済み(緑) */
#custom_from_banner.cf-unregistered { background-color: #dc3545; } /* 未登録(赤) */
#custom_from_banner.cf-notarget     { background-color: #6c757d; } /* 検出失敗(灰) */
#custom_from_banner .banner-icon {
    margin-right: 8px;
    font-size: 18px;
}
/* バナー内の補足注意書き(赤=未登録リスト登録/灰=検出不能の説明) */
#custom_from_banner .cf-banner-note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: normal;
    opacity: 0.9;
}

/* ------------------------------------------------------------
   custom_from: テンプレート挿入UI(カテゴリ→ホバーメニュー)
   ------------------------------------------------------------ */
#custom_template_box {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 6px 16px;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
.ctpl-cat {
    position: relative;
    display: inline-block;
}
.ctpl-cat-label {
    display: inline-block;
    padding: 6px 14px;
    margin-right: 2px;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-size: 13px;
    color: #495057;
    cursor: pointer;
    user-select: none;
}
.ctpl-cat:hover .ctpl-cat-label {
    background-color: #e9ecef;
    border-color: #adb5bd;
}
.ctpl-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    max-width: 400px;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}
.ctpl-cat:hover .ctpl-menu {
    display: block;
}
.ctpl-menu li {
    padding: 6px 14px;
    font-size: 13px;
    color: #212529;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ctpl-menu li:hover {
    background-color: #007bff;
    color: #ffffff;
}

/* ------------------------------------------------------------
   custom_from: メール一覧の各行に出すサイト名の段
   (JSが .cf-siteline を td.subject 先頭に挿入。データはJSが埋める)
   ------------------------------------------------------------ */
.cf-siteline {
    display: block;
    width: 100%;
    flex-basis: 100%;
    order: -1;
    font-size: 11px;
    line-height: 1.3;
    color: #2e7dd1;
    font-weight: bold;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cf-siteline .cf-dom { color: #888; font-weight: normal; }
.cf-siteline .cf-cp  { color: #666; font-weight: normal; }

/* ------------------------------------------------------------
   easy_forward: 「簡単転送」ボタンのメインアイコンだけ青くする
   (レイアウト・字形・▼ は Elastic 標準に任せる)
   ------------------------------------------------------------ */
li[data-ef-wrap="1"] .dropbutton > a.forward:before {
    color: #2e7dd1;
}

/* ------------------------------------------------------------
   easy_forward: 転送先メニューの各項目の説明文(誤操作防止)
   ------------------------------------------------------------ */
#easy-forward-menu .ef-menu-desc {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: #666;
    font-weight: normal;
    white-space: normal;
    margin-top: 2px;
    max-width: 320px;
}
/* メニュー項目自体が複数行を許容するように */
#easy-forward-menu li a {
    height: auto;
    white-space: normal;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ------------------------------------------------------------
   easy_forward: 選択後 compose 画面の説明文バナー
   (送信元バナーの下に表示。青系で注意喚起)
   ------------------------------------------------------------ */
.ef-desc-banner {
    background-color: #eaf3fb;
    border: 1px solid #b6d4ef;
    color: #1a4971;
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.6;
    border-radius: 4px;
    margin: 0 10px 10px 10px;
    white-space: pre-wrap;
}

/* ------------------------------------------------------------
   対応時間計測SSO: 未ログイン時のモーダル
   (sup未ログインを検知したとき、画面遷移せず案内を出す)
   ------------------------------------------------------------ */
.ef-sso-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ef-sso-box {
    background: #ffffff;
    border-radius: 8px;
    padding: 24px 28px;
    max-width: 420px;
    width: calc(100% - 40px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.ef-sso-title {
    font-size: 17px;
    font-weight: bold;
    color: #212529;
    margin-bottom: 12px;
}
.ef-sso-msg {
    font-size: 13px;
    line-height: 1.7;
    color: #495057;
    margin-bottom: 20px;
    text-align: left;
}
.ef-sso-btn {
    display: block;
    width: 100%;
    padding: 11px 16px;
    margin: 8px 0 0;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.ef-sso-btn-primary {
    background: #007bff;
    color: #ffffff;
}
.ef-sso-btn-primary:hover { background: #0069d9; }
.ef-sso-btn-cancel {
    background: transparent;
    color: #6c757d;
    font-weight: normal;
    font-size: 13px;
}
.ef-sso-btn-cancel:hover { color: #343a40; }

/* ------------------------------------------------------------
   アドレスコピー機能
   ------------------------------------------------------------ */
/* compose: 送信元バナー・宛先のコピーボタン */
.cf-copy-btn {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 11px;
    line-height: 1.6;
    color: #2e7dd1;
    background: #eaf3fb;
    border: 1px solid #b6d4ef;
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
}
.cf-copy-btn:hover {
    background: #2e7dd1;
    color: #fff;
    border-color: #2e7dd1;
}

/* preview: mailtoメニューに追加した「アドレスをコピー」項目 */
#mailto-menu li.cf-copy-item a.cf-copy-addr {
    cursor: pointer;
}

/* preview: 「アドレスをコピー」メニュー項目のアイコン(他項目と同じFont Awesome方式) */
.menu a.cf-copy-addr:before {
    content: "\f0c5";
}

/* 「このプログラムについて」(About/バージョン情報)を非表示 */
a.about {
    display: none !important;
}
/* ------------------------------------------------------------
   管理リンク(groupId=1のときだけ左メニューに出る)
   custom_from.php が #taskmenu の「設定」の直後に
   <a class="cf-admin"><span class="inner">管理</span></a> を挿入する。
   アイコンは他のメニュー項目と同じ Font Awesome 方式で指定。
   ------------------------------------------------------------ */
#taskmenu a.cf-admin:before {
    content: "\f0ad";   /* レンチ(工具)アイコン */
}

/* ------------------------------------------------------------
   「全件検索」リンク(search.ture-system.com・全ユーザー・メニュー下部)
   custom_from.php が #taskmenu の special-buttons 直前に
   <a class="cf-search"><span class="inner">全件検索</span></a> を挿入する。
   ------------------------------------------------------------ */
#taskmenu a.cf-search:before {
    content: "\f002";   /* 虫眼鏡(検索)アイコン */
}

/* ------------------------------------------------------------
   「サポート管理」リンク(sup.ture-system.com・全ユーザー・全件検索の直下)(v1.33.0)
   custom_from.php が「全件検索」のすぐ後ろに
   <a class="cf-sup"><span class="inner">サポート管理</span></a> を挿入する。
   ラベルが長いので文字だけ縮小(アイコンはそのまま)。
   ------------------------------------------------------------ */
#taskmenu a.cf-sup:before {
    content: "\f590";   /* ヘッドセット(サポート)アイコン */
}
#taskmenu a.cf-sup .inner {
    font-size: 85%;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   「機能」リンク(全ユーザーに出る。テンプレート・署名を開放)
   custom_from.php が #taskmenu に
   <a class="cf-features"><span class="inner">機能</span></a> を挿入する。
   ------------------------------------------------------------ */
#taskmenu a.cf-features:before {
    content: "\f0d0";   /* magic(魔法の杖)アイコン */
}

/* ------------------------------------------------------------
   連絡先(addressbook)の導線は管理者だけに見せる。
   custom_from.php が body に cf-nonadmin クラスを付ける(非管理者/未判定)。
   bodyクラスなのでtaskmenu再構築後も効き続ける。管理者はクラスが付かず表示。
   ------------------------------------------------------------ */
body.cf-nonadmin #taskmenu a.contacts { display: none !important; }

/* 管理画面(と設定画面)の左メニュー幅を狭める(既定 max-width:30% → 17%) */
#layout #layout-sidebar {
    max-width: 17%;
}
/* ============================================================
   差出人メモ機能(v1.18.0)
   ・返信画面/閲覧画面の「メモ」ボタン
   ・モーダル(一覧+追記+取消)
   ============================================================ */
/* ボタン(返信画面: 宛先をコピー の隣) */
.cf-memo-btn {
    margin-left: 6px; padding: 1px 10px; font-size: 12px; cursor: pointer;
    border: 1px solid #b58900; background: #fff8e1; color: #8a6d00; border-radius: 4px;
}
.cf-memo-btn:hover { background: #ffe9a8; }
/* リンク(閲覧画面: .header-links の要約/ヘッダーの並び) */
/* 閲覧画面「メモ」リンク: 隣の「要約」「ヘッダー」と同じ体裁に合わせる
   (色は .header-links 標準の青を継承。アイコンだけ Elastic と同じ :before 方式で付与) */
.header-links a.cf-memo-link:before {
    content: "\f249";                 /* sticky-note(メモ)。□で出るなら \f044(ペン)/\f075(吹き出し)に */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;                  /* solid字形を出すのに必須 */
    margin-right: 4px;
}

/* モーダル */
#cf-memo-overlay {
    display: none; position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,0.4); align-items: flex-start; justify-content: center;
}
#cf-memo-overlay.open { display: flex; }
#cf-memo-panel {
    background: #fff; width: 92%; max-width: 560px; margin-top: 8vh;
    border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); overflow: hidden;
    display: flex; flex-direction: column; max-height: 80vh;
}
.cf-memo-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #f5f2e8; border-bottom: 1px solid #e0d9c5; }
.cf-memo-title { font-weight: bold; color: #8a6d00; }
.cf-memo-email { flex: 1; font-size: 13px; color: #333; word-break: break-all; }
.cf-memo-close { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #888; }
.cf-memo-close:hover { color: #333; }
.cf-memo-bwt { padding: 8px 16px; background: #fff3cd; border-bottom: 1px solid #f0e0a0; font-size: 13px; }
.cf-memo-bwt a { color: #b02a37; font-weight: bold; }
.cf-memo-list { flex: 1; overflow-y: auto; padding: 12px 16px; }
.cf-memo-empty { color: #999; font-size: 13px; padding: 8px 0; }
.cf-memo-item { border: 1px solid #eee; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; background: #fafafa; }
.cf-memo-body { font-size: 14px; color: #222; line-height: 1.6; white-space: normal; }
.cf-memo-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11px; color: #888; }
.cf-memo-who { font-weight: bold; color: #555; }
.cf-memo-at { flex: 1; }
.cf-memo-cancel { border: 1px solid #dc3545; background: #fff; color: #dc3545; border-radius: 4px; font-size: 11px; padding: 1px 8px; cursor: pointer; }
.cf-memo-cancel:hover { background: #dc3545; color: #fff; }
.cf-memo-add { border-top: 1px solid #eee; padding: 10px 16px; background: #fff; }
.cf-memo-input { width: 100%; box-sizing: border-box; font-size: 14px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; }
.cf-memo-add-row { text-align: right; margin-top: 6px; }
.cf-memo-save { border: 1px solid #b58900; background: #fff8e1; color: #8a6d00; border-radius: 4px; padding: 4px 16px; font-weight: bold; cursor: pointer; }
.cf-memo-save:hover { background: #ffe9a8; }
.cf-memo-save:disabled { opacity: 0.5; cursor: default; }

/* 差出人メモ: 画像添付(v1.34.0)
   ・入力欄下の選択中プレビュー(×で外す)/「画像を選択」ボタン
   ・一覧のサムネイル(クリックで拡大表示) */
.cf-memo-add-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cf-memo-file-btn {
    margin-right: auto; border: 1px solid #adb5bd; background: #f8f9fa; color: #495057;
    border-radius: 4px; padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.cf-memo-file-btn:hover:not(:disabled) { background: #e9ecef; }
.cf-memo-file-btn:disabled { opacity: 0.5; cursor: default; }
.cf-memo-file-cnt { font-size: 11px; color: #888; }
.cf-memo-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cf-memo-picked:empty { display: none; }
.cf-memo-pick { position: relative; display: inline-block; }
.cf-memo-pick img {
    width: 64px; height: 64px; object-fit: cover; border: 1px solid #ddd; border-radius: 4px; display: block;
}
.cf-memo-pick-del {
    position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 16px;
    border: none; border-radius: 50%; background: #dc3545; color: #fff; font-size: 12px; cursor: pointer; padding: 0;
}
.cf-memo-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cf-memo-thumb {
    width: 96px; height: 72px; object-fit: cover; border: 1px solid #ddd; border-radius: 4px; cursor: zoom-in;
    background: #f1f3f5;
}
.cf-memo-thumb-ng { cursor: default; }
#cf-memo-lightbox {
    display: none; position: fixed; inset: 0; z-index: 100002;
    background: rgba(0,0,0,0.8); align-items: center; justify-content: center; cursor: zoom-out;
}
#cf-memo-lightbox.open { display: flex; }
#cf-memo-lightbox img { max-width: 94vw; max-height: 92vh; box-shadow: 0 6px 30px rgba(0,0,0,0.5); background: #fff; }

/* ============================================================
   AI返信支援(v1.21.0)
   ・ツールバー「AI返信案」ボタン(スペルの右)
   ・フローティングパネル(ミニチャット)
   ============================================================ */
/* ツールバーボタンのアイコン(他のツールバー項目と同じ方式) */
#toolbar-menu a.cf-ai-toolbtn:before {
    content: "\f0eb";   /* 電球(ひらめき/提案) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* フローティングパネル */
#cf-ai-panel {
    display: none;
    position: fixed;
    top: 90px; right: 24px;
    width: 380px;
    min-width: 300px;
    max-width: 92vw;
    max-height: 76vh;
    background: #fff;
    border: 1px solid #c9d3df;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.28);
    z-index: 100001;
    flex-direction: column;
    resize: horizontal;   /* 横幅をドラッグで変更可(幅はlocalStorageに保持) */
    overflow: hidden;      /* resizeハンドルを出すため */
}
#cf-ai-panel.open { display: flex; }
.cf-ai-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; cursor: move;
    background: #2e7dd1; color: #fff;
    border-radius: 10px 10px 0 0;
}
.cf-ai-title { flex: 1; font-weight: bold; font-size: 14px; }
.cf-ai-close { border: none; background: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.cf-ai-close:hover { opacity: 0.8; }
.cf-ai-body { flex: 1; overflow-y: auto; padding: 12px 14px; min-height: 80px; }
.cf-ai-output { font-size: 14px; }
.cf-ai-text { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14px; line-height: 1.7; color: #222; margin: 0; }
.cf-ai-spin { color: #2e7dd1; font-size: 13px; }
.cf-ai-err  { color: #dc3545; font-size: 13px; }
.cf-ai-actions { display: flex; gap: 8px; padding: 8px 14px; border-top: 1px solid #eee; }
.cf-ai-actions button {
    flex: 1; padding: 6px 10px; font-size: 13px; cursor: pointer;
    border: 1px solid #2e7dd1; background: #eaf3fb; color: #1c5a97; border-radius: 5px; font-weight: bold;
}
.cf-ai-actions button:hover:not(:disabled) { background: #2e7dd1; color: #fff; }
.cf-ai-actions button:disabled { opacity: 0.45; cursor: default; }
.cf-ai-good { border-color: #b58900 !important; background: #fff8e1 !important; color: #8a6d00 !important; }
.cf-ai-good:hover:not(:disabled) { background: #ffe9a8 !important; color: #8a6d00 !important; }
.cf-ai-revise { padding: 8px 14px 12px; border-top: 1px solid #eee; }
.cf-ai-instr { width: 100%; box-sizing: border-box; font-size: 13px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; }
.cf-ai-gen { margin-top: 6px; width: 100%; padding: 7px; font-size: 14px; font-weight: bold; cursor: pointer; border: 1px solid #2e7dd1; background: #2e7dd1; color: #fff; border-radius: 5px; }
.cf-ai-gen:hover:not(:disabled) { background: #1c5a97; }
.cf-ai-gen:disabled { opacity: 0.5; cursor: default; }

/* AI返信パネル: 要約・参照テンプレの表示(v1.25.0) */
.cf-ai-summary {
    background: #eef5fc; border-left: 3px solid #2e7dd1; border-radius: 4px;
    padding: 8px 10px; margin-bottom: 10px; font-size: 12px; line-height: 1.6; color: #1c5a97;
}
.cf-ai-refs {
    margin-top: 8px; font-size: 11px; color: #8a6d00;
    background: #fff8e1; border-radius: 4px; padding: 5px 8px;
}

/* ============================================================
   メール一覧 右クリック操作メニュー(v1.27.0)
   ============================================================ */
#cf-ctx-menu {
    position: fixed;
    z-index: 2147483647;
    min-width: 190px;
    background: #fff;
    border: 1px solid #c9d3df;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    padding: 6px 0;
    font-size: 13px;
    color: #222;
    user-select: none;
}
#cf-ctx-menu .cf-ctx-head {
    padding: 6px 16px;
    font-size: 11px;
    color: #888;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#cf-ctx-menu .cf-ctx-item {
    padding: 8px 16px;
    cursor: pointer;
    white-space: nowrap;
}
#cf-ctx-menu .cf-ctx-item:hover { background: #eaf3fb; }
#cf-ctx-menu .cf-ctx-danger { color: #c0392b; }
#cf-ctx-menu .cf-ctx-danger:hover { background: #fdecea; }
#cf-ctx-menu .cf-ctx-sep { height: 1px; background: #eee; margin: 4px 0; }

/* ============================================================
   uid別の表示出し分け(body[data-cf-uid] を custom_from が付与)
   ・特定uidだけ表示/非表示を、ここに書き足すだけで増やせる。
   ============================================================ */
/* フォルダ操作メニューの「圧縮(expunge)」「空(purge)」は uid=1 のときだけ表示。
   それ以外(未ログイン含む)は非表示。 */
body:not([data-cf-uid="1"]) #mailboxoptions-menu a.expunge,
body:not([data-cf-uid="1"]) #mailboxoptions-menu a.purge {
    display: none !important;
}
/* uid=1(自分)には「自分だけに見えている」印を付ける(薄い黄色+ラベル)。
   他の人には非表示になっていることを忘れないための目印。 */
body[data-cf-uid="1"] #mailboxoptions-menu a.expunge,
body[data-cf-uid="1"] #mailboxoptions-menu a.purge {
    background: #fff8e1;
}
body[data-cf-uid="1"] #mailboxoptions-menu a.expunge::after,
body[data-cf-uid="1"] #mailboxoptions-menu a.purge::after {
    content: " 🔒自分のみ";
    font-size: 10px;
    color: #b58900;
    white-space: nowrap;
}

/* ============================================================
   送信前チェック(v1.35.0)
   custom_from の precheck_js が送信時に検査し、引っかかると
   #cf-pc-overlay(確認ダイアログ)を出す。
   ・赤見出し=送信不可(戻って直す/管理者に報告)
   ・黄見出し=確認(戻って直す/このまま送信)
   ============================================================ */
#cf-pc-overlay {
    position: fixed; inset: 0; z-index: 100003;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: flex-start; justify-content: center;
}
#cf-pc-panel {
    background: #fff; width: 92%; max-width: 480px; margin-top: 12vh;
    border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); overflow: hidden;
}
.cf-pc-head { padding: 12px 16px; font-weight: bold; font-size: 15px; }
.cf-pc-head-block { background: #dc3545; color: #fff; }
.cf-pc-head-warn  { background: #fff3cd; color: #856404; border-bottom: 1px solid #f0e0a0; }
.cf-pc-body { padding: 12px 16px; font-size: 13px; line-height: 1.7; color: #222; }
.cf-pc-body ul { margin: 0; padding-left: 20px; }
.cf-pc-body li.cf-pc-block { color: #b02a37; font-weight: bold; }
.cf-pc-body li.cf-pc-warn  { color: #333; }
.cf-pc-note { margin-top: 10px; font-size: 12px; color: #6c757d; }
.cf-pc-actions { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid #eee; }
.cf-pc-actions button {
    flex: 1; padding: 8px 12px; font-size: 13px; font-weight: bold; cursor: pointer; border-radius: 5px;
}
.cf-pc-back   { border: 1px solid #2e7dd1; background: #2e7dd1; color: #fff; }
.cf-pc-back:hover { background: #1c5a97; }
.cf-pc-force  { border: 1px solid #adb5bd; background: #fff; color: #495057; }
.cf-pc-force:hover { background: #f1f3f5; }
.cf-pc-report { border: 1px solid #dc3545; background: #fff; color: #dc3545; }
.cf-pc-report:hover:not(:disabled) { background: #dc3545; color: #fff; }
.cf-pc-report:disabled { opacity: 0.6; cursor: default; }

/* 「全員に返信」は uid=1 のときだけ表示(v1.37.1) */
body:not([data-cf-uid="1"]) #toolbar-menu a.reply-all,
body:not([data-cf-uid="1"]) #toolbar-menu .dropbutton:has(> a.reply-all) {
    display: none !important;
}
body[data-cf-uid="1"] #toolbar-menu a.reply-all {
    background: #fff8e1;
}

/* ============================================================
   エラーメール(バウンス)の説明バナー(v1.38.0)
   custom_from の bounce_banner がプレビュー/全画面の本文の上に
   <div class="cf-bounce cf-bounce-(yellow|red|gray)"> を挿入する。
   ・yellow = 相手側の問題(容量オーバー・宛先なし 等)
   ・red    = こちら側の可能性(拒否 5.7.x)→ 管理者へ
   ・gray   = 一時的/再送中/判定不能
   ============================================================ */
.cf-bounce {
    margin: 10px 0 14px;
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 13px;
    line-height: 1.7;
}
.cf-bounce-yellow { background: #fff8e1; border-color: #f0d58a; color: #5c4a00; }
.cf-bounce-red    { background: #fdecea; border-color: #f1aeb5; color: #842029; }
.cf-bounce-gray   { background: #f1f3f5; border-color: #ced4da; color: #343a40; }
.cf-bounce-title { font-size: 15px; font-weight: bold; margin-bottom: 4px; }
.cf-bounce-todo  { margin-bottom: 6px; }
.cf-bounce-meta  { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; }
.cf-bounce-diag  { margin-top: 6px; font-size: 11px; opacity: 0.8; word-break: break-all; }

/* ============================================================
   お客様の問い合わせ履歴(v1.39.0)
   custom_from がプレビュー/全画面の本文の上に .cf-hist を置き、
   JSが履歴APIの結果で中身を埋める(過去0件なら非表示のまま)。
   ============================================================ */
.cf-hist {
    margin: 8px 0 12px;
    padding: 8px 12px;
    background: #eef5fc;
    border: 1px solid #c7dbf0;
    border-radius: 6px;
    font-size: 13px;
    color: #1c3d5a;
}
.cf-hist-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.cf-hist-main b { color: #c0392b; }
.cf-hist-memo { color: #8a6d00; font-weight: bold; text-decoration: none; }
.cf-hist-memo:hover { text-decoration: underline; }
.cf-hist-hidden { color: #6c757d; font-size: 12px; }
.cf-hist-toggle { margin-left: auto; color: #2e7dd1; text-decoration: none; font-size: 12px; white-space: nowrap; }
.cf-hist-toggle:hover { text-decoration: underline; }
.cf-hist-list { width: 100%; margin-top: 8px; border-collapse: collapse; background: #fff; border-radius: 4px; }
.cf-hist-list td { padding: 5px 8px; border-top: 1px solid #e3ecf5; font-size: 12px; vertical-align: top; }
.cf-hist-list tr { cursor: pointer; }
.cf-hist-list tr:hover td { background: #dbe8fb; }
.cf-hist-dt   { white-space: nowrap; color: #555; width: 1%; }
.cf-hist-site { white-space: nowrap; color: #2e7dd1; font-weight: bold; width: 1%; }
.cf-hist-subj { word-break: break-all; }
.cf-hist-more { margin-top: 4px; font-size: 11px; color: #6c757d; }

/* ============================================================
   要望(改修・追加機能の依頼)(v1.40.0)
   ・ツールバー「その他の操作」の左に custom_from が
     <a class="cf-request"><span class="inner">要望</span></a> を挿入
   ・押すと #cf-req-overlay(入力モーダル)
   ============================================================ */
#toolbar-menu a.cf-request:before {
    content: "\f086";   /* 吹き出し(comments)アイコン */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

#cf-req-overlay {
    display: none; position: fixed; inset: 0; z-index: 100004;
    background: rgba(0,0,0,0.45); align-items: flex-start; justify-content: center;
}
#cf-req-overlay.open { display: flex; }
#cf-req-panel {
    background: #fff; width: 94%; max-width: 620px; margin-top: 6vh; max-height: 88vh;
    border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; overflow: hidden;
}
.cf-req-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #2e7dd1; color: #fff; font-weight: bold; font-size: 15px;
}
.cf-req-close { border: none; background: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.cf-req-body { padding: 12px 16px; overflow-y: auto; font-size: 13px; }
.cf-req-row { margin-bottom: 12px; }
.cf-req-row > label, .cf-req-2col label { display: block; font-weight: bold; color: #333; margin-bottom: 4px; }
.cf-req-row textarea, .cf-req-row select {
    width: 100%; box-sizing: border-box; font-size: 13px; padding: 6px 8px;
    border: 1px solid #ccc; border-radius: 4px; resize: vertical;
}
.cf-req-kinds { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cf-req-kinds label { font-weight: normal; cursor: pointer; }
.cf-req-kinds input { margin-right: 4px; }
.cf-req-2col { display: flex; gap: 12px; }
.cf-req-2col > div { flex: 1; }
.cf-req-shot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cf-req-file-btn {
    border: 1px solid #adb5bd; background: #f8f9fa; color: #495057;
    border-radius: 4px; padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.cf-req-file-btn:disabled { opacity: 0.5; cursor: default; }
.cf-req-hint { font-size: 11px; color: #888; }
.cf-req-picked { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cf-req-picked:empty { display: none; }
.cf-req-pick { position: relative; }
.cf-req-pick img { width: 120px; height: 80px; object-fit: cover; border: 1px solid #ddd; border-radius: 4px; display: block; }
.cf-req-pick button {
    position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 16px; padding: 0;
    border: none; border-radius: 50%; background: #dc3545; color: #fff; font-size: 12px; cursor: pointer;
}
.cf-req-note { font-size: 11px; color: #6c757d; }
.cf-req-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid #eee; }
.cf-req-actions button { padding: 7px 18px; font-size: 13px; font-weight: bold; border-radius: 5px; cursor: pointer; }
.cf-req-cancel { border: 1px solid #adb5bd; background: #fff; color: #495057; }
.cf-req-send   { border: 1px solid #2e7dd1; background: #2e7dd1; color: #fff; }
.cf-req-send:disabled { opacity: 0.6; cursor: default; }