/* ========== 共通レイアウト ========== */
:root{
  --mic-col: 44px;   /* 右側のマイク欄の固定幅 */
  --btn-pad-x: 14px; /* トリガーボタン左右の余白（見た目統一）*/
}
body{ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif; color:#111; }

/* 行レイアウト（左：可変／右：マイク欄） */
.input-row {
  display: flex;
  align-items: center; /* ← これがポイント！ 中央揃え */
  gap: 8px;            /* テキストエリアとボタンの間隔 */
}
.mic-spacer{ flex:0 0 var(--mic-col); height:36px; visibility:hidden; }
.mic-spacer{ flex:0 0 var(--mic-col); height:36px; visibility:hidden; }
.mic-button {
  margin-left: 0px;    /* テキストエリアとの間を 3px あける */
  margin-right: 12px;   /* 右端との間を 5px あける */

  height: 40px;        /* 枠を少し大きく */
  min-width: 40px;
  padding: 0 6px;      /* 中の余白も少しだけ足す */
  border-radius: 8px;  /* 枠も少し丸くして見やすく（任意） */
}

.mic-button:hover{ background:#d0d0d0; }
.mic-icon {
  width: 22px;
  height: 22px;
}

.input-label{ display:block; font-weight:700; margin:12px 0 4px 8px; color:#333; }

/* 入力系の統一見た目 */
.select-style,
.shipping-input,
.custom-textarea{
  width:100%;
  padding:10px;
  border:1px solid #333;
  background:#f6f6f6;
  font-size:16px;
  border-radius:6px;
  box-sizing:border-box;
}
.custom-textarea{ font-size:17px; line-height:1.8; letter-spacing:.02em; resize:none; }
.custom-textarea.auto-resize{ overflow-y:hidden; min-height:36px; }

/* 右にマイクを置く横並びコンテナ */
.textarea-with-icon{ display:flex; align-items:center; gap:8px; width:100%; }

/* 参考リンク群（既存幅に揃える） */
.app-links{ width:400px; margin:12px 8px 0 8px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; justify-items:center; }
.app-link{ width:100%; text-decoration:none; color:#111; display:flex; flex-direction:column; align-items:center;
  padding:10px 0; border-radius:10px; background:#f6f6f6; border:1px solid #ddd; transition:transform .12s, box-shadow .12s, background-color .12s; }
.app-link:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.08); background:#fff; }
.app-icon{ width:56px; height:56px; margin-bottom:6px; }
.app-label{ font-size:13px; line-height:1.2; white-space:nowrap; }

/* ボタン */
.copy-button, .btn-primary{
  display:inline-block; padding:10px 14px; font-size:15px; border-radius:10px; cursor:pointer;
  background:#d6ecff; border:.125rem solid #99caff; color:#003357;
}
.copy-button{ width:250px; height:50px; display:block; margin:20px auto 0; background:#4CAF50; color:#fff; border:none; border-radius:5px; font-size:16px; }
.copy-button:hover{ background:#45a049; }
.btn-primary:active, #dialogue-copy-button:active{ transform:translateY(1px); }

/* ラジオグループ */
.reference-group{ width:400px; margin:10px 8px 15px 8px; padding:10px; background:#f6f6f6; box-sizing:border-box; border:1px solid #333; border-radius:6px; }
.reference-option{ display:flex; align-items:center; gap:8px; margin:6px 0; }

/* アコーディオン見出しボタン（tips/acc 共通トーン） */
.tips-trigger,
.acc-trigger{
  width:calc(100% - 32px); /* 右の mic-spacer 分だけ差し引く */
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px var(--btn-pad-x);
  border:1px solid #ccc; border-radius:8px;
  background:#fff; color:#333; font-size:15px; font-weight:600; text-align:left;
  cursor:pointer; box-sizing:border-box; margin:0;
  transition:background-color .15s, border-color .15s;
}
.tips-trigger:hover, .acc-trigger:hover{ background:#fafafa; border-color:#bbb; }

.acc-trigger[aria-expanded="true"]::after{ content:"▲"; }

/* パネル（外枠は単一の線。内側 textarea は枠ゼロにして二重枠を回避） */
.tips-panel,
.acc-panel{
  width:calc(100% - 52px); /* 見出しより少し狭く */
  border:1px solid #ccc; border-radius:8px; background:#fff;
  box-sizing:border-box; padding:14px 16px; margin-top:6px; margin-bottom:0;
}
.acc-panel[hidden], .tips-panel[hidden]{ display:none; }

/* パネル内テキスト */
.tips-body,
.acc-panel .custom-textarea[readonly]{
  color:#333; font-size:14px; line-height:1.8; word-break:break-word;
}

/* 「書きたい内容(プライベート)」専用：内側の textarea は枠0にして外枠のみ表示 */
#acc-panel-message-private .custom-textarea{
  border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important;
  padding:12px 14px; width:100%;
}

/* 類似文例ボックス */
.similar-box{ width:100%; border:1px solid #e5e5e5; border-radius:10px; padding:10px; background:#fff; box-sizing:border-box; }
.similar-header{ font-weight:600; margin-bottom:6px; }
.similar-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.similar-list li a{
  display:block; text-decoration:none; border:.125rem solid #99caff; background:#d6ecff; border-radius:10px;
  padding:8px 10px; color:#003357; line-height:1.4;
}
.similar-list li a:hover{ filter:brightness(.98); }

/* 幅合わせ：400px ベースの古い指定が残っていても、親が伸びれば100%で追従 */
.textarea-with-icon, .select-style, .shipping-input, .custom-textarea{ max-width:100%; }

.input-label + .option-list {
  margin-top: 4px;
}


/* ▼ リスト群の幅を tips-panel と完全一致させる */
.option-list {
  width: calc(100% - 105px);  /* tips-panel と同じ */
  margin: 6px auto 14px auto; /* 左右中央寄せ */
  display: grid;
  gap: 8px;
  box-sizing: border-box;
}

/* ▼ 各項目：角丸なしの枠、ブロック表示 */
.list-option {
  display: block;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid #333;     /* 角丸なし */
  border-radius: 0;           /* 角丸なし */
  background: #f6f6f6;
  color: #111;
  font-size: 15px;
  cursor: pointer;
}

/* ホバー */
.list-option:hover {
  background: #fff;
}

/* 選択状態（色変更） */
.list-option.selected {
  background: #d6ecff;
  border-color: #99caff;
  color: #003357;
  font-weight: 600;
}

/* ▼ コピー系ボタンを横並び中央揃え */
.copy-button-group {
  display: flex;
  justify-content: center; /* 中央寄せ */
  align-items: center;
  gap: 20px;               /* ボタン間の余白 */
  margin: 24px 0;
}

/* ▼ コピー系ボタン共通デザイン */
.copy-button {
  background-color: #2563eb; /* ブルー系 */
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease, transform 0.1s ease;
  min-width: 220px; /* 統一感を出す */
}

/* hover / active 状態 */
.copy-button:hover {
  background-color: #1d4ed8;
}
.copy-button:active {
  transform: scale(0.98);
}

/* ▼ AIリンクコンテナ（中央揃えを厳密に） */
.app-links {
  display: flex;
  justify-content: center;   /* 横方向の中央揃え */
  align-items: center;       /* 縦方向の中央揃え */
  gap: 50px;                 /* ボタン間の余白 */
  margin: 30px auto;         /* 全体を中央に配置 */
  flex-wrap: nowrap;         /* 1行に固定（必要に応じて wrap） */
  max-width: 100%;           /* 幅制限解除（親の影響を打ち消す） */
  text-align: center;        /* 万が一のズレ防止 */
  box-sizing: border-box;
}

/* ▼ 各リンクボタン */
.app-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px 16px;
  width: 110px;              /* 少し大きめ（前回と同じ） */
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* ▼ ホバー時 */
.app-link:hover {
  background: #f3f4f6;
  border-color: #ccc;
  transform: translateY(-2px);
}

/* ▼ アイコンとラベル */
.app-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
}

.app-label {
  color: #333;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

/* ▼ 全体の角丸を削除（統一スタイル） */
button,
textarea,
select,
input,
.custom-textarea,
.select-style,
.copy-button,
.btn-primary,
.acc-trigger,
.tips-trigger,
.acc-panel,
.tips-panel,
.app-link {
  border-radius: 0 !important;
}

/* ▼ hover 時もフラットを維持 */
button:hover,
.app-link:hover,
.btn-primary:hover {
  border-radius: 0 !important;
}

/* ▼ 類似文例ボタンとインデックス状態を右に寄せる */
.similar-action,
#index-status {
  margin: 15px 0px 0px 20px;
}

#doc-title.singleline {
  height: 2.6em;
  min-height: 2.6em;
  max-height: 2.6em;
  white-space: nowrap;
  overflow: hidden;     /* 横スクロールをなくす */
  text-overflow: ellipsis; /* はみ出し時に「…」を表示（自然に切れる） */
  resize: none;          /* 手動リサイズ禁止 */
}

/* 「作成したい文章の名称欄」と「受信メール／メッセージ貼り付け欄」を統一 */
#doc-title,
#incoming {
  font-size: 1rem;   /* ← #doc-title と同じ大きさに */
  line-height: 1.4;  /* 行間を揃える（調整可） */
}

/* ▼ テキストエリアの幅を統一 */
#recipient,
#sender,
#message {
  width: calc(100% - 10px); /* ← micボタン+余白ぶん差し引き（他と同じ） */
  box-sizing: border-box;
}

/* ▼ 3つの説明枠ボタンを左に8pxインデント */
#acc-btn-message-private,
#tips-toggle,
#tips-toggle-sender {
  margin-left: 8px;
}

/* ▼ 展開パネル（開いた内容部分）も同じく左にそろえる */
#acc-panel-message-private,
#tips-panel,
#tips-panel-sender {
  margin-left: 8px;
}

/* ▼ 類似文例表示枠：角丸を削除 */
#similar-box {
  border-radius: 0; /* ← 丸みを完全になくす */
}


/* ================================
   ■ リストUI 最終上書き（idで確実に適用）
   - 未選択：薄い細線
   - 選択済：濃い太線＋濃い背景＋左青帯
================================ */

/* 共通（未選択） */
#style-list .list-option,
#output-list .list-option,
#opening-list .list-option {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: #fff !important;
  color: #333;
  border: 1px solid #bbb !important;   /* ← 未選択は薄め細線 */
  border-radius: 0;
  padding: 0.8rem 1rem !important;
  font-size: 1.25rem;                   /* 他ページトーンに合わせる */
  font-weight: 400;
  transition: background .2s, border-color .2s, box-shadow .2s;
  /* 以前の border-left や border-bottom の影響を打ち消す */
  box-shadow: none !important;
}

/* hover（未選択時の反応） */
#style-list .list-option:hover,
#output-list .list-option:hover,
#opening-list .list-option:hover {
  background: #f0f6ff !important;
  border-color: #66aaff !important;
}

/* 選択状態 */
#style-list .list-option.selected,
#output-list .list-option.selected,
#opening-list .list-option.selected {
  border: 2px solid #007bff !important; /* ← 選択は濃い太線 */
  background: #33ccff !important;       /* ← 背景をもう少し濃く */
  color: #003366 !important;
  font-weight: 600;
}

/* PC表示時の行間・サイズ微調整（任意） */
@media (min-width: 48.8125rem) {
  #style-list .list-option,
  #output-list .list-option,
  #opening-list .list-option {
    font-size: 0.87rem;
  }
}

@media (max-width: 48.75rem) { /* 780px */
  #style-list .list-option,
  #output-list .list-option,
  #opening-list .list-option {
    font-size: 0.87rem;
  }
}

/* ========== 「作成したい文章の名称欄」＆「受信メール/メッセージ貼り付け欄」 見た目を統一 ========== */
/* 本文サイズをそろえる（少し小さめ） */
#doc-title,
#incoming {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em;
}

/* プレースホルダーの文字も少し小さく＆薄めに */
#doc-title::placeholder,
#incoming::placeholder {
  font-size: 0.9rem;
  opacity: .75;
}

/* doc-title は1行表示（横スクロールなし・はみ出し省略）※既存定義を上書き維持 */
#doc-title.singleline {
  height: 2.6em !important;
  min-height: 2.6em !important;
  max-height: 2.6em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  resize: none !important;
}

/* ▼ 各入力欄とその「記入例」ブロックの間隔を15pxあける */
.input-row + section.acc-item {
  margin-top: 15px !important;   /* 受取人／差出人 */
}

.input-row + .accordion {
  margin-top: 15px !important;   /* 書きたい内容(プライベート) の記入例 */
}

/* ▼ 差出人情報記入例とポイントの枠だけ左ずれを補正 */
#tips-panel-sender {
  margin-left: 11px !important; /* 元の8px → +3px 補正 */
}

/* ===== 記入例トリガー＆パネルの左インデントを統一（8px） ===== */
/* トリガーボタン（▼の行） */
#acc-btn-message-private,   /* 書きたい内容の記入例 */
#tips-toggle,               /* 受取人情報の記入例とポイント */
#sender-tips-toggle         /* 差出人情報の記入例とポイント（←正しいID） */
{
  margin-left: 8px !important;
}

/* 展開パネル（本文の枠） */
#acc-panel-message-private, /* 書きたい内容の記入例 */
#tips-panel,                /* 受取人情報の記入例とポイント */
#sender-tips-panel          /* 差出人情報の記入例とポイント（←正しいID） */
{
  margin-left: 8px !important;
  width: calc(100% - 52px) !important; /* 他と同じ幅計算で右位置を揃える */
  box-sizing: border-box;
}

/* 入力欄と各「記入例」ブロックの間隔を15pxに統一 */
.input-row + section.acc-item,
.input-row + .accordion {
  margin-top: 15px !important;
}

/* ▼ 発送予定日の入力欄を1行固定にする */
#shipping-date.shipping-input {
  height: 2.6em;         /* 1行分の高さ（調整可） */
  line-height: 1.4;      /* テキストの中央寄せ */
  resize: none;          /* リサイズ禁止 */
  overflow: hidden;      /* 改行禁止で見た目も固定 */
  white-space: nowrap;   /* 折り返し禁止 */
}