/* M77：ビジュアル版専用のエレック相談（黒×蛍光）。相談はこのページの中で完結する。
   M78：入口の浮きボタンはPCにも出す（岡本さん決定）。スマホは画面下のバーの上、PCは右下。 */
.vx-elec-launcher { all: unset; box-sizing: border-box; position: fixed; right: 24px; bottom: 24px; z-index: 940; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 18px 6px 7px; border: 1.5px solid #c6ff2e; border-radius: 999px; background: #0a0a0a; color: #fff; font: 800 15px/1.2 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; letter-spacing: 0; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(198, 255, 46, .28); -webkit-tap-highlight-color: transparent; transition: transform .15s ease, box-shadow .15s ease; }
.vx-elec-launcher img { display: block; width: 42px; height: 42px; border-radius: 50%; background: #000; object-fit: cover; }
body.vx-elec-open .vx-elec-launcher, body.modal-open .vx-elec-launcher { visibility: hidden; }
.vx-elec:not([open]) { display: none; }
.vx-elec { --vx-ac: #c6ff2e; box-sizing: border-box; width: min(560px, calc(100% - 32px)); max-width: none; height: min(720px, calc(100vh - 48px)); height: min(720px, calc(100dvh - 48px)); max-height: none; margin: auto; padding: 0; border: 1px solid var(--vx-ac); border-radius: 18px; background: #0a0a0a; color: #f2f2f2; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 24px 80px rgba(0, 0, 0, .7), 0 0 44px rgba(198, 255, 46, .18); font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }
.vx-elec[open] { display: flex; flex-direction: column; }
.vx-elec::backdrop { background: rgba(0, 0, 0, .78); }
.vx-elec-head { display: flex; flex: none; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #2a2a2a; background: #111; }
.vx-elec-head img { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vx-ac); background: #000; object-fit: cover; }
.vx-elec-head div { flex: 1 1 auto; min-width: 0; }
.vx-elec-head h2 { margin: 0; color: #fff; font-size: 17px; font-weight: 800; line-height: 1.4; letter-spacing: 0; }
.vx-elec-head p { margin: 2px 0 0; color: var(--vx-ac); font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; }
.vx-elec-head p::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--vx-ac); box-shadow: 0 0 8px var(--vx-ac); vertical-align: 1px; }
.vx-elec button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vx-elec-close { flex: none; min-width: 72px; min-height: 44px; padding: 8px 14px; border: 1px solid #6a6a6a; border-radius: 999px; background: transparent; color: #fff; font-size: 14px; font-weight: 700; }
.vx-elec-body { flex: 1 1 auto; min-height: 0; padding: 16px 14px 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.vx-elec-log { display: flex; flex-direction: column; gap: 10px; }
.vx-elec-msg { max-width: 88%; margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 16px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.vx-elec-msg--bot { align-self: flex-start; border: 1px solid #2c2c2c; border-left: 3px solid var(--vx-ac); background: #161616; color: #f2f2f2; }
.vx-elec-msg--bot strong { color: var(--vx-ac); }
.vx-elec-msg--result { border-color: var(--vx-ac); background: #10160a; }
.vx-elec-msg--user { align-self: flex-end; background: var(--vx-ac); color: #0a0a0a; font-weight: 700; }
.vx-elec-msg a { display: inline-block; min-height: 44px; padding: 10px 0; box-sizing: border-box; color: var(--vx-ac); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.vx-elec-typing { display: flex; gap: 6px; align-items: center; min-height: 24px; }
.vx-elec-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--vx-ac); animation: vx-elec-dot 1s ease-in-out infinite; }
.vx-elec-typing i:nth-child(2) { animation-delay: .15s; }
.vx-elec-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes vx-elec-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.vx-elec-choices { display: grid; gap: 8px; margin-top: 14px; }
.vx-elec-choices:empty { display: none; }
.vx-elec-choice { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--vx-ac); border-radius: 12px; background: #0a0a0a; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.5; text-align: left; }
.vx-elec-choice:active { background: var(--vx-ac); color: #0a0a0a; }
.vx-elec-note { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid #2a2a2a; color: #bdbdbd; font-size: 14px; line-height: 1.7; }
.vx-elec :focus-visible, .vx-elec-launcher:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .vx-elec-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 26px rgba(198, 255, 46, .5); }
  .vx-elec-choice:hover { background: var(--vx-ac); color: #0a0a0a; }
  .vx-elec-close:hover { border-color: #fff; }
}
@media (max-width: 900px) {
  .vx-elec { width: 100%; height: 100%; max-height: none; border-width: 0 0 0 0; border-top: 3px solid var(--vx-ac); border-radius: 0; }
  .vx-elec-head { padding-top: max(12px, env(safe-area-inset-top)); }
  .vx-elec-body { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  /* 入口はバーの中に入れず、右下でバーの上に浮かせる。 */
  .vx-elec-launcher { right: max(12px, env(safe-area-inset-right)); bottom: calc(72px + env(safe-area-inset-bottom)); gap: 6px; min-height: 52px; padding: 5px 14px 5px 6px; font-size: 14px; }
  .vx-elec-launcher img { width: 40px; height: 40px; }
  body.mobile-menu-open .vx-elec-launcher, body.modal-open .vx-elec-launcher, body.m-lightbox-open .vx-elec-launcher, body.vx-elec-open .vx-elec-launcher, body.vx-elec-open .m-tabbar { visibility: hidden; }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .vx-elec-launcher { bottom: calc(60px + env(safe-area-inset-bottom)); min-height: 44px; }
  .vx-elec-launcher img { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .vx-elec-typing i { animation: none; opacity: .8; } .vx-elec-launcher { transition: none; } }
@media print { .vx-elec-launcher { display: none !important; } }