/* =========================================================================
   コスラボ AIサポート — スタイルシート
   （40〜60代女性向け：LINE風・文字大きめ・ボタン大きめ・#f7c8c8基調）
   ========================================================================= */

html,body{margin:0;background:#FBF4F4;}
#root{min-height:100vh;}

.cl-root{
  --bg:#FBF4F4; --surface:#FFFFFF; --ink:#3A2E33; --muted:#8E7E85;
  --pink:#F7C8C8; --pink-deep:#EFA9B2; --pink-soft:#FCEBEC; --pink-bar:#F4B7BD;
  --accent:#DC7E91; --accent-deep:#CF6A80;
  --plum:#6E4A5E; --line:#F0E2E4; --line-2:#E7D3D7;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  color:var(--ink); background:var(--bg); width:100%; min-height:100vh;
  -webkit-font-smoothing:antialiased; font-size:16px;
  touch-action:manipulation;   /* ダブルタップ拡大の抑止（ピンチ拡大はJS側で抑止） */
}
.cl-root *{box-sizing:border-box;}
.cl-wrap{max-width:760px;margin:0 auto;padding:8px 14px 8px;}
.cl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.cl-brand{display:flex;align-items:center;gap:11px;}
.cl-mark{width:42px;height:42px;flex:0 0 auto;}
.cl-logo{font-weight:800;font-size:23px;letter-spacing:.04em;color:var(--plum);line-height:1.05;}
.cl-logo small{display:block;font-weight:600;font-size:11px;letter-spacing:.22em;color:var(--accent);margin-top:3px;}
.cl-tabs{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;}
.cl-tab{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;padding:10px 18px;border-radius:999px;color:var(--muted);font-weight:700;font-size:14.5px;transition:.18s;}
.cl-tab[aria-selected="true"]{background:var(--accent);color:#fff;}
.cl-tab:focus-visible{outline:3px solid var(--pink);outline-offset:2px;}

.cl-chat{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 20px 54px -30px rgba(110,74,94,.45);display:flex;flex-direction:column;height:calc(100dvh - 16px);min-height:570px;max-height:none;}
.cl-chat-bar{background:linear-gradient(120deg,var(--pink-bar),var(--pink));color:#5A3340;padding:15px 20px;display:flex;align-items:center;gap:10px;border-radius:24px 24px 0 0;}
.cl-dot{width:10px;height:10px;border-radius:50%;background:#5FCB8E;box-shadow:0 0 0 3px rgba(95,203,142,.3);}
.cl-chat-bar b{font-size:16px;font-weight:800;}
.cl-chat-bar span{font-size:12px;opacity:.85;margin-left:auto;}
.cl-stream{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px 16px 10px;background:linear-gradient(180deg,#FFF8F8 0%, var(--surface) 30%);}
.cl-msg{display:flex;margin-bottom:14px;animation:rise .28s ease;align-items:flex-end;}
.cl-msg.user{justify-content:flex-end;}
.cl-bubble{max-width:82%;padding:13px 16px;border-radius:18px;font-size:16px;line-height:1.75;white-space:pre-wrap;word-break:break-word;}
.cl-msg.bot .cl-bubble{background:var(--pink-soft);color:var(--ink);border-bottom-left-radius:6px;}
.cl-msg.user .cl-bubble{background:var(--pink);color:#4A2C34;border-bottom-right-radius:6px;}
.cl-msg.handoff .cl-bubble{background:#FFF4E6;border:1px solid #F2D9AE;color:#7A5A2E;}
.cl-link{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px;word-break:break-all;}
.cl-link:hover{color:var(--accent-deep);}
/* AI回答への👍/👎フィードバック */
.cl-bubble-col{display:flex;flex-direction:column;align-items:flex-start;max-width:82%;}
.cl-bubble-col .cl-bubble{max-width:100%;}
.cl-fb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:7px 0 0 4px;}
.cl-fb-q{font-size:13px;color:var(--muted);font-weight:600;}
.cl-fb-btn{appearance:none;cursor:pointer;font:inherit;font-size:14px;font-weight:700;line-height:1;background:#fff;border:1.5px solid var(--line-2);border-radius:12px;padding:5px 12px;transition:.16s;}
.cl-fb-btn:hover{border-color:var(--accent);background:var(--pink-soft);}
.cl-fb-btn:active{transform:scale(.94);}
.cl-fb-btn:focus-visible{outline:3px solid var(--pink);outline-offset:2px;}
.cl-fb-thanks{font-size:13px;color:var(--accent-deep);font-weight:700;}
.cl-ava{width:46px;height:46px;border-radius:50%;flex:0 0 auto;margin-right:9px;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;overflow:hidden;}
.cl-ava-user{margin:0 0 0 9px;padding:2px;}   /* ユーザー側のみ少し余白 */
.cl-ava-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
/* ボット側：余白なしで枠いっぱい。頭が切れないよう上寄せ＋3px下げて表示 */
.cl-ava:not(.cl-ava-user) .cl-ava-img{object-position:center top;transform:translateY(3px);}
.cl-typing{display:flex;gap:5px;padding:14px 16px;}
.cl-typing i{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.5;animation:blink 1.1s infinite;}
.cl-typing i:nth-child(2){animation-delay:.18s;} .cl-typing i:nth-child(3){animation-delay:.36s;}

/* 会話の流れの中に出すボタン群（ボットの吹き出しの直下に寄せる） */
.cl-chips{display:flex;flex-wrap:wrap;gap:9px;padding:2px 0 6px;margin:-4px 0 14px 55px;}
.cl-chip{appearance:none;cursor:pointer;font:inherit;font-size:16px;font-weight:600;display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--plum);border:1.5px solid var(--line-2);border-radius:16px;padding:13px 17px;text-align:left;line-height:1.4;transition:.16s;min-height:50px;}
.cl-chip:hover{border-color:var(--accent);background:var(--pink-soft);}
.cl-chip:active{transform:scale(.98);}
.cl-chip:focus-visible{outline:3px solid var(--pink);outline-offset:2px;}
.cl-chip.menu{font-weight:700;}
/* カテゴリ（TOPメニュー）：縦並び。キャンペーン/メール・ログイン以外を「本人確認…」(約12字)の幅に揃える。
   min-width で 12字が収まる下限を与え、12字以下のボタンはすべて同じ幅にそろう。例外2つは自然幅。 */
.cl-chips.menu-grid{display:grid;grid-template-columns:1fr 1fr;align-content:start;}
.cl-chips.menu-grid .cl-chip.menu{width:100%;min-width:0;justify-content:flex-start;}
.cl-chips.menu-grid .cl-chip.menu.menu-free{min-width:0;}
.cl-chips.menu-grid .cl-chip.back{grid-column:1 / -1;justify-content:center;}
/* STEP2 サブサブ(グループ)：ひと目で選択肢と分かる淡いピンクのピル */
.cl-chip.group{background:var(--pink-soft);border-color:var(--pink);color:var(--plum);font-weight:700;}
.cl-chip.group:hover{border-color:var(--accent);background:#FCE7EC;}
/* STEP3 質問：長文が読みやすいよう1行＝1ボタンの全幅表示 */
.cl-chip.q{flex:1 1 100%;width:100%;}
.cl-chip.back{color:var(--muted);font-weight:700;background:#FBF6F6;}
.cl-chip.staff{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700;}
.cl-chip.staff:hover{background:var(--accent-deep);}
/* LINE誘導ボタン：LINEブランドカラー（緑） */
.cl-chip.line{background:#06C755;color:#fff;border-color:#06C755;font-weight:700;}
.cl-chip.line:hover{background:#05B14C;border-color:#05B14C;}
.cl-sw{width:11px;height:11px;border-radius:50%;flex:0 0 auto;}

/* 自由入力の予測変換（サジェスト）：入力欄の下にせり出すドロップダウン */
.cl-inputwrap{position:relative;z-index:40;}
.cl-suggest{position:absolute;left:0;right:0;bottom:100%;margin-bottom:8px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px -16px rgba(110,74,94,.55);max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px;z-index:41;}   /* 予測変換は入力欄の“上”に開く（PC・スマホ共通） */
.cl-suggest-head{font-size:12px;color:var(--muted);font-weight:700;padding:7px 10px 5px;}
.cl-suggest-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;appearance:none;cursor:pointer;font:inherit;font-size:15px;color:var(--plum);background:transparent;border:0;border-radius:11px;padding:11px;line-height:1.45;transition:.12s;}
.cl-suggest-item:hover,.cl-suggest-item.active{background:var(--pink-soft);}
.cl-suggest-q{flex:1;}

/* 入力欄エリアはスクロール（タッチのパン）を無効化。タップ・文字選択は可能。
   touch-action は要素ごとに効くため、コンテナと中の入力欄・ボタンの両方に指定する */
.cl-input{display:flex;gap:10px;padding:13px 14px;border-top:1px solid var(--line);background:var(--surface);border-radius:0 0 24px 24px;touch-action:none;}
.cl-input input,.cl-input .cl-send,.cl-input .cl-mic{touch-action:none;}
.cl-input input{flex:1;font:inherit;font-size:16px;border:1.5px solid var(--line-2);border-radius:999px;padding:14px 18px;outline:none;background:#FCF7F7;}
.cl-input input:focus{border-color:var(--accent);background:#fff;}
.cl-send{appearance:none;border:0;cursor:pointer;background:var(--accent);color:#fff;font:inherit;font-weight:800;border-radius:999px;padding:0 22px;font-size:16px;transition:.16s;min-height:50px;}
.cl-send:hover{background:var(--accent-deep);} .cl-send:disabled{opacity:.5;cursor:default;}
.cl-mic{appearance:none;cursor:pointer;flex:0 0 auto;width:50px;height:50px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;color:var(--plum);display:grid;place-items:center;transition:.16s;}
.cl-mic:hover{border-color:var(--accent);background:var(--pink-soft);color:var(--accent-deep);}
.cl-mic:disabled{opacity:.5;cursor:default;}
.cl-mic.on{background:var(--accent);border-color:var(--accent);color:#fff;animation:micpulse 1.3s ease-in-out infinite;}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(220,126,145,.45);}50%{box-shadow:0 0 0 9px rgba(220,126,145,0);}}
.cl-voice{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;color:var(--accent-deep);background:var(--pink-soft);padding:9px 14px;margin:0 14px;border-radius:12px;}
.cl-voice.err{color:#C0455F;background:#FCEBEE;}
.cl-voice-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:micpulse 1.1s ease-in-out infinite;}

.cl-panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 18px 50px -30px rgba(110,74,94,.4);}
.cl-panel-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;}
.cl-panel-top h2{font-size:18px;font-weight:800;color:var(--plum);margin:0;}
.cl-count{font-size:12.5px;color:var(--muted);background:var(--pink-soft);padding:4px 11px;border-radius:999px;}
.cl-spacer{flex:1;}
.cl-btn{appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:13.5px;border-radius:11px;padding:10px 15px;border:1.5px solid var(--line-2);background:#fff;color:var(--plum);transition:.16s;}
.cl-btn:hover{border-color:var(--accent);} .cl-btn:focus-visible{outline:3px solid var(--pink);outline-offset:2px;}
.cl-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.cl-btn.primary:hover{background:var(--accent-deep);}
.cl-btn.rose{background:var(--accent);color:#fff;border-color:var(--accent);}
.cl-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;}
table.cl-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:680px;}
.cl-table th{text-align:left;font-weight:700;color:var(--muted);font-size:11.5px;letter-spacing:.04em;padding:11px 12px;background:#FCF3F4;border-bottom:1px solid var(--line);}
.cl-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55;}
.cl-table tr:last-child td{border-bottom:0;}
.cl-table tr:hover td{background:#FDF7F8;}
.cl-cat{display:inline-flex;align-items:center;gap:7px;font-weight:700;white-space:nowrap;font-size:12px;}
.cl-q{font-weight:600;color:var(--ink);}
.cl-a{color:var(--muted);}
.cl-kw{display:inline-block;background:#FCF0F2;color:var(--accent-deep);border-radius:6px;padding:1px 7px;margin:1px 3px 1px 0;font-size:11.5px;}
.cl-flag{display:inline-block;background:#FFF4E6;color:#B07A2E;border:1px solid #F2D9AE;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:700;}
.cl-rowbtns{display:flex;gap:6px;white-space:nowrap;}
.cl-icon{appearance:none;cursor:pointer;border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:6px 10px;font:inherit;font-size:12.5px;font-weight:700;color:var(--plum);}
.cl-icon:hover{border-color:var(--accent);background:var(--pink-soft);}
.cl-icon.del{color:#C0455F;}
.cl-modal-bg{position:fixed;inset:0;background:rgba(58,46,51,.45);display:grid;place-items:center;padding:18px;z-index:50;}
.cl-modal{background:#fff;border-radius:18px;width:min(560px,100%);max-height:92vh;overflow-y:auto;padding:22px;box-shadow:0 30px 80px -20px rgba(58,46,51,.5);}
.cl-modal h3{margin:0 0 16px;font-size:17px;font-weight:800;color:var(--plum);}
.cl-field{margin-bottom:14px;}
.cl-field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px;}
.cl-field input,.cl-field textarea{width:100%;font:inherit;font-size:15px;border:1.5px solid var(--line-2);border-radius:10px;padding:11px 13px;outline:none;background:#FCF7F7;resize:vertical;}
.cl-field input:focus,.cl-field textarea:focus{border-color:var(--accent);background:#fff;}
.cl-check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);font-weight:600;cursor:pointer;}
.cl-check input{width:20px;height:20px;accent-color:var(--accent);}
.cl-modal-btns{display:flex;justify-content:flex-end;gap:9px;margin-top:8px;}
.cl-note{font-size:12.5px;color:var(--muted);line-height:1.7;margin:14px 2px 0;}
@keyframes rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes blink{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(-3px);}}
@media (prefers-reduced-motion: reduce){.cl-msg,.cl-typing i{animation:none;}}
@media (max-width:560px){.cl-logo{font-size:20px;} .cl-bubble{max-width:88%;font-size:16px;} .cl-chip{font-size:16px;min-height:54px;padding:14px 16px;} .cl-chips{gap:9px;}
  /* スマホ：PCと同じく、入力欄は会話カードの最下段に置く（固定配置はやめた）。注意書きは非表示 */
  /* 下端はセーフエリア（iOSホームバー）ぶんだけ確保。ツールバー分は 100dvh が自動で除外するので余分な余白は付けない */
  .cl-wrap{max-width:100%;box-sizing:border-box;padding:6px 8px calc(6px + env(safe-area-inset-bottom));}
  .cl-head{margin-bottom:6px;}
  .cl-chat{height:calc(100dvh - 12px - env(safe-area-inset-bottom));min-height:300px;max-height:none;}   /* スマホ：ビューポート(100dvh)からwrapの上下余白(6+6)とセーフエリアを引いてカードを画面下端まで広げる */
  .cl-stream{flex:1 1 auto;min-height:0;height:auto;}
  .cl-chips{margin-left:0;}
  .cl-inputwrap{flex:0 0 auto;}
  /* カテゴリ（menu-grid）・サブサブ（group-grid）とも2列 */
  .cl-chips.menu-grid{display:grid;grid-template-columns:repeat(12,1fr);align-content:start;gap:8px;}
  .cl-chips.menu-grid .cl-chip.menu{grid-column:span 6;min-width:0;width:100%;justify-content:flex-start;font-size:14px;padding:11px 10px;min-height:0;line-height:1.3;}
  /* .menu-free / .back の指定はトップレベル(75・76行)が@media内でもそのまま効くため再記述しない */
  .cl-chips.group-grid{display:grid;grid-template-columns:1fr 1fr;align-content:start;}
  .cl-chips.group-grid .cl-chip{min-width:0;justify-content:center;text-align:center;font-size:15px;padding:11px 10px;min-height:46px;line-height:1.3;}
  .cl-chips.group-grid .cl-chip.back{grid-column:1 / -1;}
  .cl-chip.q{font-size:15px;}   /* サブサブ配下の質問もサブサブ(15px)に統一 */
  /* スマホ：入力欄・マイク・送信ボタンを縮めて横幅に収める */
  .cl-input{gap:7px;padding:10px 10px;}
  .cl-input input{font-size:16px;padding:11px 14px;}   /* iOSはfont-size<16pxだとフォーカス時に自動ズームするため16px固定 */
  .cl-mic{width:42px;height:42px;}
  .cl-send{padding:0 14px;font-size:14px;min-height:42px;white-space:nowrap;}
  /* スマホ：カテゴリの色丸を小さくして幅を節約 */
  .cl-sw{width:7px;height:7px;}
  .cl-chips.menu-grid .cl-chip.menu{gap:6px;}
  /* スマホ：タップ後に色が残る“sticky hover”を無効化（ホバーをベース色に戻す） */
  .cl-chip:hover{border-color:var(--line-2);background:#fff;}
  .cl-chip.group:hover{border-color:var(--pink);background:var(--pink-soft);}
  .cl-chip.staff:hover{background:var(--accent);border-color:var(--accent);}
  .cl-chip.line:hover{background:#06C755;border-color:#06C755;}
  .cl-chip.back:hover{background:#FBF6F6;border-color:var(--line-2);}
  .cl-send:hover{background:var(--accent);}
  .cl-mic:hover{border-color:var(--line-2);background:#fff;color:var(--plum);}
  .cl-fb-btn:hover{border-color:var(--line-2);background:#fff;}
  .cl-suggest-item:hover{background:transparent;}
  /* スマホ：質問文を短縮したので1行に収める（折り返さない） */
  .cl-fb{gap:6px;flex-wrap:nowrap;}
  .cl-fb-q{font-size:12px;}
  .cl-fb-btn{font-size:13px;padding:5px 13px;border-radius:11px;white-space:nowrap;}
}