@charset "UTF-8";
/* ==========================================================================
   Suggesco ─ 記事へのお便り  2026-08-16
   --------------------------------------------------------------------------
   本文を読み終わったところで Suggesco AI が感想を聞き、その場で送れるようにする。
   ページ遷移させない（odaira「この記事のなかで送れたらベスト」）。

   吹き出し・チップ・カードは **記事レコメンドAI（sgr-）の部品をそのまま使う**。
   同じ人格が記事の頭と終わりに出るので、見た目を分けない。
   ここで足しているのはフォーム（sgl-）だけ。

   色はトークンのみ（--ink / --paper / --line …）。16進を直書きしない
   ＝ダークモードで壊れないため（docs/design-system.md「色の鉄則」）。
   ========================================================================== */

.sgl{border-top:1px solid var(--line);margin-top:clamp(48px,7vw,86px);padding-top:34px}
.sgl__thread{max-width:720px}

/* --- フォーム ------------------------------------------------------------- */
/* 43px ＝ 円相マーク32px＋間隔11px。吹き出しの本文と左端を揃えるため。 */
.sgl__form{margin:14px 0 0 43px;border:1px solid var(--line);
  background:var(--paper-2);padding:clamp(16px,2.4vw,22px)}
.sgl__row{margin-bottom:15px}
.sgl__lb{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.sgl__moods{display:flex;gap:8px;flex-wrap:wrap}
.sgl__mood{font-family:var(--font-sans);font-size:13.5px;background:var(--paper);
  border:1px solid var(--line);padding:9px 14px;cursor:pointer;transition:.2s;color:var(--ink)}
.sgl__mood:hover{border-color:var(--ink)}
.sgl__mood[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sgl__ta{width:100%;min-height:104px;resize:vertical;
  font-family:var(--font-sans);font-size:14.5px;line-height:1.85;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);padding:12px 13px}
.sgl__ta:focus{outline:0;border-color:var(--ink)}
.sgl__in{width:100%;font-family:var(--font-sans);font-size:14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);padding:10px 13px}
.sgl__in:focus{outline:0;border-color:var(--ink)}

/* ハニーポット。人には見せず、読み上げソフトからも隠す。
   display:none だと埋めない bot がいるので、画面外に飛ばす。 */
.sgl__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sgl__foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sgl__send{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:13px 20px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;transition:.25s}
.sgl__send:hover:not(:disabled){background:transparent;color:var(--ink)}
.sgl__send:disabled{opacity:.4;cursor:default}
/* 書かない人の逃げ道。送信ボタンと並べても主役を張らないよう、下線だけにする。
   強く見せると「書かなくていい」と誘導しているように読めるため。 */
.sgl__skip{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-sans);font-size:13px;color:var(--ink-2);
  border-bottom:1px solid var(--line)}
.sgl__skip:hover{color:var(--ink);border-bottom-color:var(--ink)}
.sgl__note{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3)}
.sgl__err{margin-top:12px;font-size:13px;line-height:1.7;color:var(--ink)}

/* --- 送信後 --------------------------------------------------------------- */
.sgl__done{margin:14px 0 0 43px;border:1px solid var(--line);
  background:var(--paper-2);padding:clamp(16px,2.4vw,22px);font-size:14px;line-height:1.9}
/* 中身は「受け取りました。」の一言だけ。下の余白が要らないので margin は持たせない */
.sgl__done b{display:block;font-family:var(--font-display,serif);font-size:15.5px;
  font-weight:600}

@media (max-width:820px){
  .sgl__form,.sgl__done{margin-left:0}
}
@media print{.sgl{display:none}}