/* 2026-09-25 talkui1 司さん「トークする時の UI のレベル上げて」
   INFO と同じ「ホログラムの操作面」へ。構造・文言・挙動は変えず、見た目だけの層 (html[data-talkui] の時だけ効く。?talkui=0 で旧)。
   - 面: 粒子の上に文字が浮いていた → 深い夜色のガラス面 + 上辺に RGBCMY の細い光 (ぼかし=backdrop-filter は使わない: GPU 負荷)
   - 発言: 右寄せの灰色の文字だけ → 自分は細い縁のカプセル、INFO は左に小さなコアの光点 + 縦の光の筋
   - 候補: 透明度 .38 で押せないように見えた → 待機中は明るいガラスの丸ボタン (返事中の無効は従来どおり薄く)
   - 入力: PC は下線、スマホはカプセルで食い違い → どちらもカプセル + 焦点で虹の縁
   - 見出し・切り替え・保存: 階層を整理 (切り替えは分段ボタン、保存は小さく) */

html[data-talkui] #inryoku-chat.chat-cosmos {
  background:
    linear-gradient(90deg, rgba(255,70,110,0) 4%, rgba(255,70,110,.55) 18%, rgba(255,230,90,.5) 34%, rgba(70,240,140,.5) 50%, rgba(60,220,255,.55) 66%, rgba(110,120,255,.5) 82%, rgba(240,90,230,0) 96%) top / 100% 1px no-repeat,
    radial-gradient(120% 70% at 50% 0%, rgba(120,190,230,.07), transparent 60%),
    /* 点検 fix: 上端は透かす (トーク中の逆立ちで輪の下へぶら下がるコアが面の縁で切れていた) */
    linear-gradient(180deg, rgba(9,12,17,0) 0, rgba(9,12,17,.55) 34px, rgba(9,12,17,.86) 72px, rgba(5,7,10,.94)) !important;
  border: 1px solid rgba(190,220,240,.09) !important;
  border-radius: 24px !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow: hidden;
}

/* 見出し */
/* 点検 fix: 見出しの帯を元の高さに (padding-top 6px を足した分だけ発言の欄が狭くなっていた) */
html[data-talkui] #inryoku-chat.chat-cosmos .info-state-label {
  letter-spacing: .14em;
}
html[data-talkui] #inryoku-chat.chat-cosmos #chat-close {
  /* 点検 fix: 角の丸みから離す (面の縁に 2〜3px まで寄っていた) */
  margin: 6px 6px 0 0;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .2s ease, border-color .2s ease;
}
html[data-talkui] #inryoku-chat.chat-cosmos #chat-close:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(160,225,255,.35);
}

/* ことば / 粒子で話す = 分段ボタン */
html[data-talkui] #inryoku-chat.chat-cosmos .particle-mode-switch {
  /* 点検 fix: 区切り線は残す (消すと流れた発言が丸ボタンの真下で唐突に切れて見えた) */
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  gap: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}
html[data-talkui] #inryoku-chat.chat-cosmos .particle-mode-switch button {
  border-radius: 999px !important;
  padding: 0 16px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(220,232,240,.62) !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
html[data-talkui] #inryoku-chat.chat-cosmos .particle-mode-switch button[aria-pressed="true"] {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(170,225,250,.22) !important;
  color: #f2f8fc !important;
  box-shadow: inset 0 0 12px rgba(120,210,255,.08);
}
html[data-talkui] #inryoku-chat.chat-cosmos .particle-mode-switch button[aria-pressed="true"]::after { display: none !important; }

/* 会話の保存 = 小さな補足 */
html[data-talkui] #inryoku-chat.chat-cosmos #chat-save-state {
  font-size: 11px !important;
  letter-spacing: .06em;
  color: rgba(214,226,235,.72) !important;   /* 点検 fix: .5 はコントラスト 3.9:1 → 4.5:1 以上に */
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  border-top: 0 !important;
}

/* 発言 */
html[data-talkui] #inryoku-chat.chat-cosmos #chat-messages {
  scroll-padding-top: 12px;
}
html[data-talkui] #inryoku-chat.chat-cosmos .chat-msg.ai-msg {
  position: relative;
  padding-left: 20px !important;
  color: #eef4f8 !important;
  line-height: 1.8 !important;
}
/* INFO のコアの光点と、そこから下りる光の筋 (投影) */
html[data-talkui] #inryoku-chat.chat-cosmos .chat-msg.ai-msg::before {
  content: '';
  position: absolute;
  left: 3px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: conic-gradient(from 200deg, #ff5a7a, #ffe45a, #5af08c, #5ae6ff, #6f7dff, #f05ae6, #ff5a7a);
  box-shadow: 0 0 8px rgba(140,220,255,.55);
}
html[data-talkui] #inryoku-chat.chat-cosmos .chat-msg.ai-msg::after {
  content: '';
  position: absolute;
  left: 6px; top: calc(.62em + 11px); bottom: .3em;
  width: 1px;
  background: linear-gradient(180deg, rgba(150,220,255,.4), rgba(150,220,255,0));
}
html[data-talkui] #inryoku-chat.chat-cosmos .chat-msg.user-msg {
  width: fit-content !important;
  max-width: 78% !important;
  margin-left: auto !important;
  padding: 8px 15px !important;
  border-radius: 18px 18px 5px 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(200,225,240,.12) !important;
  color: rgba(242,247,250,.9) !important;
  text-align: left !important;
  line-height: 1.6 !important;
}

/* 候補 */
html[data-talkui] #inryoku-chat.chat-cosmos .chat-suggestion {
  border-radius: 999px !important;
  border: 1px solid rgba(200,228,245,.16) !important;
  background: rgba(255,255,255,.035) !important;
  color: rgba(232,242,248,.86) !important;
  opacity: 1 !important;
  letter-spacing: .06em;
  transition: border-color .2s ease, background .2s ease, box-shadow .25s ease, color .2s ease;
}
html[data-talkui] #inryoku-chat.chat-cosmos .chat-suggestion:not(:disabled):hover {
  border-color: rgba(140,225,255,.5) !important;
  background: rgba(140,225,255,.07) !important;
  box-shadow: 0 0 18px rgba(120,215,255,.16);
  color: #ffffff !important;
}
html[data-talkui] #inryoku-chat.chat-cosmos .chat-suggestion:disabled {
  opacity: .42 !important;
}

/* 動きを試す = 目立たせすぎない丸ボタン */
html[data-talkui] #inryoku-chat.chat-cosmos #info-motion-trial > summary {
  border-color: rgba(200,228,245,.14) !important;
  color: rgba(220,232,240,.72) !important;
}

/* 入力 = カプセル (PC もスマホも同じ) */
html[data-talkui] #inryoku-chat.chat-cosmos #chat-input-row {
  margin-top: 6px;
  /* スマホは行そのものにも枠があり、入力のカプセルと二重になっていた */
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html[data-talkui] #inryoku-chat.chat-cosmos #chat-input {
  border-radius: 999px !important;
  border: 1px solid rgba(200,228,245,.16) !important;
  background: rgba(255,255,255,.04) !important;
  padding-left: 20px !important;
  padding-right: 54px !important;
  transition: border-color .25s ease, box-shadow .3s ease, background .25s ease;
}
html[data-talkui] #inryoku-chat.chat-cosmos #chat-input:focus {
  outline: none !important;
  border-color: rgba(150,225,255,.45) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: 0 0 0 3px rgba(120,210,255,.08), 0 0 26px rgba(120,210,255,.12) !important;
}
html[data-talkui] #inryoku-chat.chat-cosmos #chat-send {
  border-radius: 999px !important;
  border: 1px solid rgba(200,228,245,.14) !important;
  background: rgba(255,255,255,.05) !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .25s ease;
}
/* 点検 fix: スマホの入力中 (has-draft) は元の明るい送信ボタンを活かす (旧はここで背景だけ暗くし、矢印が暗い地に暗い色で消えていた) */
html[data-talkui] #inryoku-chat.chat-cosmos #chat-send { color: #e8f3fa !important; }
html[data-talkui] #inryoku-chat.chat-cosmos.has-draft #chat-send:not(:disabled) {
  background: #d4e8f3 !important; color: #0c1d27 !important; border-color: #d4e8f3 !important;
}
/* 点検 fix: キーボードの焦点をはっきり (入力・候補・切り替え) */
html[data-talkui] #inryoku-chat.chat-cosmos .chat-suggestion:focus-visible,
html[data-talkui] #inryoku-chat.chat-cosmos .particle-mode-switch button:focus-visible,
html[data-talkui] #inryoku-chat.chat-cosmos #chat-send:focus-visible {
  outline: 2px solid rgba(160,228,255,.9) !important; outline-offset: 2px !important;
}
html[data-talkui] #inryoku-chat.chat-cosmos #chat-send:hover {
  border-color: rgba(150,225,255,.5) !important;
  box-shadow: 0 0 16px rgba(120,215,255,.2);
}

@media (prefers-reduced-motion: reduce) {
  html[data-talkui] #inryoku-chat.chat-cosmos * { transition: none !important; }
}

/* 点検 fix: 「動きを試す」を開いている間は、その下に隠れる切り替えの丸ボタンを出さない (面の上に透けて見えていた) */
html[data-talkui] #inryoku-chat.chat-cosmos:has(#info-motion-trial[open]) .particle-mode-switch button { visibility: hidden; }