/* ==================================================
 * さやかLP / style.css — mobile-first（背景画像版・クロスフェード安定版）
 * 背景：photo/back_hosizora.jpg（全面）
 * プリローダー：中央配置（左=画像 / 右=テキスト）
 * 切替：preloader.hide → LP(#mainContent.show) でクロスフェード
 * FX：preloader内 #fx-layer（z=1）/ LP内 .fx-layer（z=1, fixed）
 * --------------------------------------------------
 * セクション目次
 * [1] Reset / Base / 背景
 * [2] Preloader（中央配置・スキップ・クロスフェード）
 * [3] Main（LP本編・クロスフェード）
 * [4] ロゴ
 * [5] 投稿UI/カード（装飾復元）
 * [6] LINEボタン（さやか/他の子）
 * [7] 検索入力＆サジェスト（ID/クラス両対応）
 * [8] フッター
 * [9] FX Layer（星のエフェクト）
 * [10] バナー/補助UI（Marquee/ステータス）
 * [11] インラインチャット（さやか）
 * [12] モーダル（共通/オーバーレイ）
 * [13] 女の子ログイン（ミニカード）
 * [14] 他の子・共有インライン送信
 * [15] 汎用ユーティリティ＆アニメーション
 * [16] 表示仕様の固定（非表示など）
 ================================================== */


/* =========================
   [1] Reset / Base / 背景
========================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; -webkit-text-size-adjust:100%; }
img{ display:block; max-width:100%; height:auto; vertical-align:top; }

html,body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",Roboto,"Helvetica Neue",Arial,"Yu Gothic","YuGothic",Meiryo,sans-serif;
  font-feature-settings:"palt" 1;
  color:#e9eef5;
  min-height:100svh;
  display:flex; flex-direction:column;
  overflow-x:hidden;
}
@supports (height:100dvh){ body{ min-height:100dvh; } }

/* 背景（星空画像 + ほんのりビネット） */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:url("photo/back_hosizora.jpg") center/cover no-repeat;
  filter:saturate(1.05) brightness(.92);
  transform:scale(1.02);
  will-change:transform;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(20,10,25,.35), rgba(10,15,24,.45));
  mix-blend-mode:multiply;
}


/* =========================================
   [2] Preloader（中央配置・スキップ・クロスフェード）
========================================= */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: url('./photo/back_hosizora.jpg') center/cover no-repeat;
  opacity: 1; visibility: visible;
  transition: opacity .6s ease, visibility 0s linear .6s;
  backface-visibility: hidden;
  contain: paint;
  will-change: opacity;
}
#preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
#preloader.fade-out { opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
#preloader.fade-out * { animation-play-state: paused !important; }

.preloader-inner{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:clamp(14px,4vw,28px);
  max-width: 640px; width: calc(100vw - 24px); z-index:2;
}
.pl-figure-wrap{ width:clamp(110px,28vw,170px); max-height:60svh; margin:0; }
.pl-figure-wrap img{ width:100%; height:auto; object-fit:contain; }

.preloader-copy{ display:flex; flex-direction:column; width:100%; align-items:flex-end; text-align:right; }
.pl-copy{
  font-family:"Yomogi","Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
  font-weight:700; letter-spacing:.01em;
  font-size:clamp(13.5px,3.9vw,18px); line-height:1.34;
  color:#ffe6f2;
  text-shadow:0 0 12px rgba(0,0,0,.44), 0 0 18px rgba(255,120,190,.28);
  max-width:clamp(22ch,62vw,26ch);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.pl-copy .highlight{
  background:linear-gradient(90deg,#fff 0%,#ffd6f0 45%,#ff8ac6 100%);
  -webkit-background-clip:text; color:transparent;
  text-decoration:underline wavy #ff66aa; text-underline-offset:4px;
  filter:drop-shadow(0 0 6px rgba(255,120,190,.25));
}

/* 行ごとの軽い出現 */
.line{
  display:inline-block; position:relative; filter:blur(6px) saturate(1.1);
  opacity:0; transform:translateX(-4px);
  animation:revealSweep 1.15s cubic-bezier(.2,.6,.2,1) forwards,
           crispIn     .8s  cubic-bezier(.2,.6,.2,1) .15s forwards;
}
.line2{ animation-delay:.18s,.33s; }
.wavy{
  color:#ff66aa; font-weight:800;
  text-decoration:underline wavy #ff66aa; text-underline-offset:4px;
  text-shadow:0 0 6px rgba(255,160,210,.5), 0 0 14px rgba(255,80,160,.35);
}
.wavy::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:8px; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,180,220,0) 35%,rgba(255,180,220,.85) 50%,rgba(255,180,220,0) 65%,transparent 100%);
  transform:translateX(-120%); filter:blur(2px);
  animation:shine 1.4s ease .45s both;
}

/* SKIPボタン */
.pl-skip{
  position:fixed; top:max(10px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right));
  z-index:10000; padding:7px 12px; font-size:12px; letter-spacing:.08em;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:999px; backdrop-filter:blur(6px); opacity:.85; cursor:pointer;
  transition:opacity .2s, transform .2s, background .2s;
}
.pl-skip:hover{ opacity:1; transform:translateY(-1px); background:rgba(255,255,255,.18); }
.pl-skip:active{ transform:scale(.98); }

/* プリロの中身を先に薄くする余韻 */
#preloader.pre-exit .preloader-inner,
#preloader.pre-exit .pl-skip{
  transition: opacity .55s ease, transform .55s ease, filter .55s ease !important;
  opacity: 0 !important; transform: translateY(8px) scale(.985) !important; filter: blur(1px) !important;
}
#preloader.pre-exit .pl-figure-wrap img{
  transition: opacity .6s ease, transform .6s ease, filter .6s ease !important;
  opacity: 0 !important; transform: translateY(10px) scale(.98) !important; filter: blur(1.2px) !important;
}
#preloader.pre-exit .preloader-copy .pl-copy{
  transition: opacity .6s ease .05s, transform .6s ease .05s, filter .6s ease .05s !important;
  opacity: 0 !important; transform: translateY(6px) !important; filter: blur(.8px) !important;
}


/* ==========================
   [3] Main（LP本編）
========================== */
.preloading #mainContent{
  opacity:0; transform:translateY(6px); pointer-events:none;
}
#mainContent{
  flex:1 0 auto; width:96vw; max-width:520px;
  margin:0 auto; padding:0 0 16px; text-align:initial; position:relative;
  z-index:2; /* FX層(1)の前に出す */
  transition:opacity .9s ease .10s, transform .9s ease .10s;
  will-change:opacity, transform;
}
#mainContent.show{ opacity:1; transform:none; }
#mainContent > *{ position:relative; z-index:1; }


/* =============
   [4] ロゴ
============= */
.logo-wrap{ margin:0; padding:0; text-align:center; }
.logo-image{
  margin:0 auto; width:clamp(220px,58vw,340px);
  opacity:0; transform:scale(.92);
  filter:drop-shadow(0 0 6px rgba(255,230,255,.4)) drop-shadow(0 0 12px rgba(255,200,255,.25));
  animation:logoIn 1.2s ease-out .2s forwards;
}
@keyframes logoIn{ to{ opacity:1; transform:scale(1) } }


/* ===================================
   [5] 投稿UI/カード（装飾復元）
=================================== */
.container{ display:flex; flex-direction:column; gap:12px; margin-top:12px; text-align:left; padding-bottom:8px; }
.post-box{
  max-width:100%; margin:12px auto 16px; display:flex; gap:12px; align-items:center;
  padding:10px; background:rgba(26,37,50,.9);
  border-radius:12px; backdrop-filter:blur(4px);
  box-shadow:0 6px 20px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}
.post-box textarea{
  width:80%; padding:10px 12px; font-size:.95rem; line-height:1.45;
  border-radius:10px; background:#223344; color:#e1e8ed;
  border:1px solid rgba(255,255,255,.1); resize:vertical; min-height:42px;
}
.post-box button{
  width:18%; padding:11px; font-size:.95rem; font-weight:700;
  border-radius:12px; background:linear-gradient(135deg,#ff4d81,#ff99cc);
  color:#fff; border:none; cursor:pointer;
  box-shadow:0 6px 18px rgba(255,95,163,.35);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.post-box button:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(255,95,163,.45); }
.post-box button:active{ transform:scale(.98); }

/* タイムラインカード */
.tweet.sayaka-style,.tweet.locked{
  width:100%; background:rgba(25,39,52,.9);
  padding:12px; border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.06);
}
.sayaka-header{ display:flex; align-items:center; gap:12px; }
.sayaka-image{ width:60px; height:60px; border-radius:50%; overflow:hidden; flex:0 0 60px; }
.sayaka-image img{ width:100%; height:100%; object-fit:cover; }
.sayaka-info{ display:flex; flex-direction:column; gap:4px; }
.account{ font-size:.92rem; color:#ff99cc; font-weight:700; }
.badge{ font-size:.85rem; color:#fff; background:#ff6699; border-radius:14px; padding:4px 8px; margin-left:6px; }
.text{ font-size:.95rem; color:#fff; line-height:1.55; margin-top:6px; }


/* ==============================
   [6] LINEボタン（さやか/他の子）
============================== */
.line-button{
  display:block; width:max-content; max-width:96vw;
  margin:10px auto 0; text-align:center; font-weight:700;
  padding:13px 16px; border-radius:12px; cursor:pointer; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .25s ease;
}
.line-button.sayaka-button{
  position:relative; background:linear-gradient(135deg,#ff8fc2,#ff5fa3);
  color:#fff; box-shadow:0 6px 18px rgba(255,95,163,.35);
  font-size:clamp(15px,4.2vw,19px); letter-spacing:.02em; line-height:1.22;
}
.line-button.sayaka-button:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(255,95,163,.45); }
.line-button.sayaka-button:active{ transform:scale(.98); }

.line-button.other-button{ background:linear-gradient(135deg,#00c3ff,#0066cc); color:#fff; box-shadow:0 0 12px rgba(0,195,255,.6); }
.line-button.other-button:hover{ transform:translateY(-1px); box-shadow:0 0 16px rgba(0,195,255,.75); }


/* ===========================================
   [7] 検索入力＆サジェスト（ID/クラス両対応）
=========================================== */
/* 枠そのもの */
.search-area{
  position: relative;
  width: 100%;
  z-index: 1200;
  overflow: visible;
  margin-bottom: 20px;
}

/* 入力欄（ID/クラス両対応） */
.search-area .userSearch,
.search-area #userSearch{
  display: block;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(11,18,32,.65);
  color: #e9eef5;
  outline: none;
}

/* ドロップ（ID/クラス両対応） */
.search-area .suggestions,
.search-area #suggestions{
  background: rgba(11,18,32,.98); /* 0.95 → 0.98 など濃く */
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  display: none;                /* JSで開閉 */
  z-index: 3000;                /* 競合に勝つ */
  pointer-events: auto;         /* クリック不可を防ぐ */
  transform: translateZ(0);     /* iOSちらつき対策 */
  animation: sugDrop .18s ease both;
}

/* リスト外枠 */
.search-area .suggestions ul,
.search-area #suggestions ul{
  margin: 0;
  padding: 6px;
  list-style: none;             /* 箇条書き(●)を消す */
  background: rgba(11,18,32,.95);
  color: #fff;
  border: 1px solid #ff6699;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.25);
  max-height: 240px;
  overflow: auto;
}

/* 各候補 */
.search-area .suggestions li,
.search-area #suggestions li{
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .95rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* hover/キーボード選択 */
.search-area .suggestions li:hover,
.search-area #suggestions li:hover,
.search-area .suggestions li.active,
.search-area #suggestions li.active{
  background: #1f2c3a;
}

/* スクロールバー（任意） */
.search-area .suggestions ul::-webkit-scrollbar,
.search-area #suggestions ul::-webkit-scrollbar{ width: 8px; }
.search-area .suggestions ul::-webkit-scrollbar-thumb,
.search-area #suggestions ul::-webkit-scrollbar-thumb{
  background: rgba(255,102,153,.45);
  border-radius: 999px;
}
.search-area .suggestions ul::-webkit-scrollbar-track,
.search-area #suggestions ul::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}

/* サジェストが開いている間は下部のフッターも隠す（レイアウトは維持） */
.search-active .site-footer{
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* サジェスト開いてる間は“女の子ログイン”一式を消す */
.search-active #girlLoginBtn,
.search-active .login-note {
  display: none !important;
}

/* サジェストの前面保証 */
.search-area .suggestions,
.search-area #suggestions {
  z-index: 10010;
  pointer-events: auto;
}

.search-shield {
  position: fixed;
  inset: 0;
  z-index: 1000; /* .suggestionsより下 */
  background: rgba(0,0,0,0.2);
  pointer-events: none; /* タップを完全に透過 */
  opacity: 0;
  transition: opacity 0.2s ease;
}
.search-shield.on {
  opacity: 1;
}

.suggestions {
  position: absolute;
  z-index: 3000; /* 最前面を保証 */
  pointer-events: auto;
  background: #fff;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
}
.suggestions li {
  pointer-events: auto;
  padding: 8px;
  cursor: pointer;
}
.suggestions li:hover,
.suggestions li.active {
  background: #f0f0f0;
}

/* 低速端末や省モーションでアニメ抑制 */
@media (prefers-reduced-motion: reduce){
  .search-area .suggestions{ animation: none; }
}

/* 出現アニメ（控えめ） */
@keyframes sugDrop{
  from{ transform: translateY(-4px); opacity: 0; }
  to  { transform: translateY(0);    opacity: 1; }
}
.search-area .suggestions li {
  pointer-events: auto !important;
}

/* ============
   [8] フッター
============ */
.site-footer{
  margin-top:auto; padding:14px 12px calc(14px + env(safe-area-inset-bottom));
  text-align:center; font-size:12px; color:#a9b4c8;
}
.site-footer a{ color:#cbd6ea; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }


/* =================================
   [9] FX Layer（星のエフェクト）
================================= */
#fx-layer{ position:fixed; inset:0; z-index:1; pointer-events:none; }  /* プリロ側 */
.fx-layer{ position:fixed; inset:0; z-index:1; pointer-events:none; }  /* LP側 */

.fx-twinkle{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle,#fff 0 40%,transparent 60%);
  opacity:0; filter:blur(.8px) drop-shadow(0 0 6px rgba(255,255,255,.8));
  mix-blend-mode:screen; animation:fxTwinkle 4.8s ease-in-out infinite;
}
.fx-twinkle::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:40px; height:40px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.95), transparent) 50% 50%/2px 100% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.95), transparent) 50% 50%/100% 2px no-repeat;
  opacity:.8;
}
@keyframes fxTwinkle{
  0%,20%,100%{opacity:0; transform:scale(.7)}
  8%{opacity:.9; transform:scale(1)}
  12%{opacity:.5; transform:scale(.9)}
}

/* 流れ星（右上→左下） */
.fx-shoot{
  position:absolute; width:3px; height:3px; opacity:0;
  background:radial-gradient(circle,#fff 60%,transparent 70%);
  border-radius:50%; box-shadow:0 0 10px rgba(255,255,255,.9);
  animation: shootTRBL 6s linear infinite;
}
.fx-shoot::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:160px; height:3px; background:linear-gradient(90deg,#fff,transparent);
  filter:blur(.7px);
}
@keyframes shootTRBL{
  0%{transform:translate3d(0,0,0) rotate(-35deg); opacity:0}
  8%{opacity:1}
  85%{opacity:.95}
  100%{transform:translate3d(-110vw,110vh,0) rotate(-35deg); opacity:0}
}

/* 位置サンプル */
#fx-layer .t1, .fx-layer .t1{ top:18%; left:72%; }
#fx-layer .t2, .fx-layer .t2{ top:28%; left:18%; }
#fx-layer .t3, .fx-layer .t3{ top:42%; left:64%; }
#fx-layer .t4, .fx-layer .t4{ top:58%; left:32%; }
#fx-layer .t5, .fx-layer .t5{ top:70%; left:78%; }
#fx-layer .t6, .fx-layer .t6{ top:24%; left:50%; }


/* ======================================
   [10] バナー/補助UI（Marquee/ステータス）
====================================== */
.site-marquee{
  position:relative; overflow:hidden; width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:8px 0; margin:10px 0 8px;
  backdrop-filter:blur(2px);
}
.site-marquee .marquee__track{
  display:inline-block; white-space:nowrap;
  will-change:transform; animation:marqueeScroll 18s linear infinite;
}
.site-marquee span{
  display:inline-block; padding-left:100%; padding-right:2rem;
  color:#e8e8f2; letter-spacing:.02em; font-size:14px;
}
@keyframes marqueeScroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
@media (prefers-reduced-motion: reduce){ .site-marquee .marquee__track{ animation:none; } }

.status-stack{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }

.status-banner{
  display:flex; align-items:center; gap:.6rem;
  width:100%; padding:9px 12px; border-radius:12px;
  background:rgba(14,14,18,.78);
  border:1px solid rgba(255,255,255,.08);
  color:#ffd7e6; font-weight:700; font-size:14px; line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.status-banner .dot{
  width:8px; height:8px; border-radius:50%;
  background:#16a34a; box-shadow:0 0 8px #16a34a;
  animation:pulse 1.2s ease-in-out infinite;
}
.status-banner .online-pill{
  padding:4px 10px; border-radius:999px; color:#fff; background:#16a34a;
  box-shadow:0 0 0 0 rgba(22,163,74,.55); letter-spacing:.06em; font-weight:800;
  animation: onlinePulse 2s ease-out infinite;
}
.status-banner .status-text{ color:#fff; opacity:.95; }

.section-divider{
  border:none; height:1px; margin:10px 0 14px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.page-subtitle{ font-size:15px; color:#ffd7e6; font-weight:600; letter-spacing:.05em; }


/* ==================================================
 * [11] 小モーダルチャット（さやか＆他の子 入力UI統一）
 * - 両者で共通のベースを共有し、見た目・幅・並びを揃える
 * - 左寄り＆幅が小さくなる崩れを防止（flex, min-width:0 を徹底）
 ================================================== */
/* ==================================================
 * [10] 小モーダルチャット（さやか＆他の子 入力UI統一）
 * - 両者で共通のベースを共有し、見た目・幅・並びを揃える
 * - 左寄り＆幅が小さくなる崩れを防止（flex, min-width:0 を徹底）
 ================================================== */

/* 共通ベース */
.sayaka-inline-chat,
.other-inline-chat{
  margin-top:10px;
  width:100%;
  background:rgba(14,18,28,.85);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  overflow:hidden;
  max-height:0;               /* 初期は閉じる */
  opacity:.98;
  transition:max-height .45s ease;
  will-change:max-height;
}

/* 開いた状態の高さ（さやかは会話ログを想定して少し高め）*/
.sayaka-inline-chat.open{ max-height:420px; }
.other-inline-chat.open{  max-height:160px; } /* 1行投稿想定。必要なら 420px までOK */

/* スクロール領域（さやか用：会話ログ） */
.sayaka-inline-chat .chat-scroll{
  padding:12px 12px 8px;
  display:flex; flex-direction:column; gap:8px;
  max-height:280px;
  overflow:auto;
  scroll-behavior:smooth;
}

/* バブル（会話） */
.bubble{ max-width:78%; font-size:.95rem; line-height:1.45; padding:10px 12px; border-radius:14px; word-break:break-word; }
.bubble.sayaka{
  align-self:flex-start; background:linear-gradient(135deg,#ffd7e6,#ffc0dc);
  color:#2a2330; box-shadow:0 6px 14px rgba(255,170,210,.25);
}
.bubble.user{
  align-self:flex-end; background:#e6eef7; color:#222; box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.bubble.user.error{ background:#ffe9ea; color:#662a2a; border:1px solid rgba(232,64,87,.25); }
.bubble.user.error.with-cta{ background:#fff7fb; border:1px solid rgba(230,69,142,.25); color:#40202a; padding:10px 12px; }

/* CTA（エラーバブル内） */
.inline-cta{ margin-top:8px; background:#fff; border:1px dashed rgba(230,69,142,.35); border-radius:10px; padding:10px; }
.inline-cta .title{ font-weight:700; color:#e6458e; margin-bottom:4px; }
.inline-cta .desc{ font-size:.92em; line-height:1.5; color:#553846; }
.inline-cta .actions{ display:flex; gap:8px; margin-top:8px; justify-content:center; flex-wrap:wrap; }
.inline-cta .btn{ appearance:none; border:none; border-radius:999px; padding:8px 14px; font-weight:700; cursor:pointer; }
.inline-cta .btn-primary{ background:#ff86bd; color:#fff; box-shadow:0 4px 12px rgba(230,69,142,.25); }
.inline-cta .btn-primary:active{ transform:translateY(1px); }
.inline-cta .btn-ghost{ background:#fff; color:#a13a6c; border:1px solid rgba(230,69,142,.35); }

/* 入力エリア（共通） */
.sayaka-inline-chat .chat-input,
.other-inline-chat .chat-input{
  display:flex;
  align-items:stretch;          /* 高さをそろえる */
  gap:10px;
  padding:10px;
  border-top:1px dashed rgba(255,255,255,.14);
  background:rgba(10,14,22,.45);
  backdrop-filter:blur(3px);
}

/* 入力欄（textarea/input 共通）— 幅が縮む崩れ対策 */
.sayaka-inline-chat .chat-input input,
.sayaka-inline-chat .chat-input textarea,
.other-inline-chat .chat-input input,
.other-inline-chat .chat-input textarea{
  flex:1 1 auto;               /* しっかり広がる */
  min-width:0;                 /* 子要素の縮小を許可＝左寄り細長対策のキモ */
  padding:12px 14px;
  border-radius:12px;
  background:rgba(20,28,40,.92);
  color:#e9eef5;
  border:1px solid rgba(255,255,255,.18);
  outline:none;
  font-size:16px; line-height:1.45;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sayaka-inline-chat .chat-input input::placeholder,
.sayaka-inline-chat .chat-input textarea::placeholder,
.other-inline-chat .chat-input input::placeholder,
.other-inline-chat .chat-input textarea::placeholder{
  color:#a9b4c8;
}
.sayaka-inline-chat .chat-input input:focus,
.sayaka-inline-chat .chat-input textarea:focus,
.other-inline-chat .chat-input input:focus,
.other-inline-chat .chat-input textarea:focus{
  border-color:#ff7ab8;
  box-shadow:0 0 0 3px rgba(255,122,184,.2), inset 0 1px 0 rgba(255,255,255,.06);
  background:rgba(24,32,48,.98);
}

/* 送信ボタン（共通） */
.sayaka-inline-chat .chat-input button,
.other-inline-chat .chat-input button{
  flex:0 0 auto;
  padding:12px 16px;
  border:none; border-radius:12px; cursor:pointer;
  font-weight:800;
  background:linear-gradient(135deg,#ff4d81,#ff99cc);
  color:#fff;
  box-shadow:0 6px 18px rgba(255,95,163,.35);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.sayaka-inline-chat .chat-input button:hover,
.other-inline-chat .chat-input button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(255,95,163,.45);
}
.sayaka-inline-chat .chat-input button:active,
.other-inline-chat .chat-input button:active{
  transform:scale(.98);
}

/* さりげない演出（任意） */
.bubble.sayaka.panic{ animation:shakeY .28s ease-in-out 0s 2, pulseGlow 1.2s ease-in-out 0s 2; }
@keyframes shakeY{ 0%,100%{transform:translateY(0)} 25%{transform:translateY(-2px)} 75%{transform:translateY(2px)} }
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 6px 14px rgba(255,170,210,.25)} 50%{ box-shadow:0 10px 22px rgba(255,170,210,.45)} }

/* 小画面での余白最適化（任意） */
@media (max-width: 360px){
  .sayaka-inline-chat .chat-input button,
  .other-inline-chat .chat-input button{
    padding:10px 12px;
  }
}

/* ==============================
   [12] モーダル（共通/オーバーレイ）
============================== */
/* 共通オーバーレイ（一本化） */
.overlay-modal{
  position:fixed; inset:0; z-index:9999;
  display:none; justify-content:center; align-items:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
  height:100dvh;
}
@supports(height:100svh){ .overlay-modal{ height:100svh; } }
.overlay-modal[aria-hidden="false"]{ display:flex; }
.overlay-modal .mini-card{
  position:relative; max-width:360px; width:min(92vw,360px);
  background:#fffdfc; color:#222;
  border:2px solid #ff9ecf; border-radius:14px; padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:modalPop .18s ease-out forwards; text-align:center;
  transform: translateY(6px) scale(.98);
}
@keyframes modalPop { to { transform:translateY(0) scale(1); opacity:1 } }
.modal-heading{ margin:0 0 6px; font-size:17px; color:#e6458e; letter-spacing:.02em; font-weight:bold; }
.modal-title{ margin:.2em 0 .4em; font-weight:700; color:#ff4d7a; }
.modal-sub{ margin:.2em 0 0; line-height:1.7; color:#444; }
.modal-note{ display:block; margin-top:6px; color:#e6458e; font-size:.9rem; }

/* もう一種（.modal）の基本定義（既存互換） */
.modal{
  position: fixed; inset: 0; z-index: 10000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.modal[aria-hidden="false"]{ display: flex; }
.modal .modal-content{
  width: min(92vw, 360px);
  background: #fffdfc; color: #222;
  border: 2px solid #ff9ecf; border-radius: 14px; padding: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transform: translateY(8px) scale(.98);
  animation: modalPop .18s ease-out forwards;
}
.modal .btn-primary{
  appearance: none; border: 0; border-radius: 999px;
  padding: 10px 14px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg,#ff4d81,#ff99cc); color: #fff;
}
.modal .btn-ghost{
  appearance: none; border-radius: 999px; padding: 10px 14px; cursor: pointer;
  background: #fff; color: #a13a6c; border: 1px solid rgba(230,69,142,.35);
}
.modal .btns{ display: flex; gap: 10px; justify-content: center; margin-top: 10px; }


/* =======================================
   [13] 女の子ログイン（ミニカード）
======================================= */
.modal-heading{ margin:0 0 6px; font-size:17px; color:#e6458e; font-weight:700; }
.modal-sub{ margin:.4em 0 .2em; color:#553846; line-height:1.6; }
.modal-form{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.modal-form input{
  padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.12);
  background:#fff; font-size:16px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.modal-form input:focus{
  border-color:#ff7ab8; box-shadow:0 0 0 3px rgba(255,122,184,.2);
}
.modal-actions{ display:flex; gap:10px; justify-content:center; margin-top:6px; }
.btn-primary{
  appearance:none; border:0; border-radius:999px; padding:10px 16px; cursor:pointer;
  background:linear-gradient(135deg,#ff4d81,#ff99cc); color:#fff; font-weight:800;
  box-shadow:0 6px 18px rgba(255,95,163,.35);
}
.btn-ghost{
  appearance:none; border-radius:999px; padding:10px 16px; cursor:pointer;
  background:#fff; color:#a13a6c; border:1px solid rgba(230,69,142,.35); font-weight:800;
}

.girl-login-link {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #ff99cc;
  opacity: 0.7;
  cursor: pointer;
  margin: 10px 0;
  text-decoration: underline dotted;
  transition: all 0.2s ease;
}
.girl-login-link:hover {
  opacity: 1;
  color: #ffb6d6;
}
.post-note {
  text-align: center;
  font-size: 12px;
  opacity: 0.65;
  font-style: italic;
}

/* ==================================
   [14] 他の子・共有インライン送信
================================== */
.other-inline-chat{
  margin: 10px 0;
  background: rgba(14,18,28,.85);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  overflow: hidden;
  max-height: 0;                 /* 初期は閉じる */
  opacity: .98;
  transition: max-height .45s ease;
  will-change: max-height;
}
.other-inline-chat.open{
  max-height: 160px;             /* 中身1行＋ボタンの想定。必要なら 420px までOK */
}
.other-inline-chat .chat-input{
  display: flex;
  gap: 10px;
  padding: 10px;
  border-top: 1px dashed rgba(255,255,255,.14);
  background: rgba(10,14,22,.45);
  backdrop-filter: blur(3px);
}
.other-inline-chat .chat-input input{
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(20,28,40,.92);
  color: #e9eef5;
  border: 1px solid rgba(255,255,255,.18);
  outline: none;
  font-size: 16px;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.other-inline-chat .chat-input input::placeholder{ color:#a9b4c8; }
.other-inline-chat .chat-input input:focus{
  border-color:#ff7ab8;
  box-shadow: 0 0 0 3px rgba(255,122,184,.2), inset 0 1px 0 rgba(255,255,255,.06);
  background: rgba(24,32,48,.98);
}
.other-inline-chat .chat-input button{
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  background: linear-gradient(135deg,#ff4d81,#ff99cc);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255,95,163,.35);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.other-inline-chat .chat-input button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(255,95,163,.45);
}
.other-inline-chat .chat-input button:active{ transform: scale(.98); }

.popup-text {
  color: #333; /* ← ★これ追加！黒系に見えるように */
  font-size: 16px;
  line-height: 1.6;
}

.popup-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.popup-box {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ======================================
   [15] 汎用ユーティリティ＆アニメーション
====================================== */
/* ローディング/ボタン状態 */
#postBtn.is-loading{
  position:relative; background:#2a2a30!important; color:#ff5fa2!important;
  pointer-events:none; opacity:.95;
}
#postBtn.is-loading::after{
  content:""; position:absolute; right:10px; top:50%; margin-top:-7px;
  width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:spin .8s linear infinite;
}
.line-button.sayaka-button.is-loading{ pointer-events:none; opacity:.9; }
.line-button.sayaka-button.is-loading::after{
  content:""; display:inline-block; width:1em; height:1em; margin-left:.5em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  vertical-align:-2px; animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.u-dotted{ text-decoration:underline dotted #ff6699; text-underline-offset:2px; }
.blink{ animation:blink 1.2s step-start infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* プリロの文字アニメ */
@keyframes revealSweep{ to{ opacity:1; filter:blur(0); transform:none; } }
@keyframes crispIn{ from{ text-shadow:0 0 20px rgba(255,120,190,.5); } to{ text-shadow:none; } }
@keyframes shine{ to{ transform:translateX(120%);} }

/* ステータス用アニメ */
@keyframes pulse{ 0%,100%{transform:scale(.9);opacity:.7} 50%{transform:scale(1.15);opacity:1} }
@keyframes onlinePulse{ 0%{ box-shadow:0 0 0 0 rgba(22,163,74,.55);} 70%{ box-shadow:0 0 0 12px rgba(22,163,74,0);} 100%{ box-shadow:0 0 0 0 rgba(22,163,74,0);} }

/* 数値の小数点抜け等の強制上書き（外観維持の保険） */
.site-marquee       { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.sayaka-inline-chat { background: rgba(14,18,28,.85) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 12px 30px rgba(0,0,0,.35) !important; }
.post-box           { background: rgba(26,37,50,.9) !important; box-shadow: 0 6px 20px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06) !important; }
.post-box textarea  { border: 1px solid rgba(255,255,255,.10) !important; }


/* ===========================
   [16] 表示仕様の固定
=========================== */
/* 下部の投稿欄は出さない（デザインを保ったまま非表示） */
.post-area, .post-box{ display:none !important; }



/* ===== [Unify] さやか小モーダル入力UIを other と同じ見た目・レイアウトに揃える ===== */

/* コンテナは横幅いっぱいに */
.sayaka-inline-chat{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  align-self:stretch;
}

/* 入力行：other と同じ flex 行レイアウトに統一 */
.sayaka-inline-chat .chat-input{
  display:flex !important;
  gap:10px;
  padding:10px;
  border-top:1px dashed rgba(255,255,255,.14);
  background:rgba(10,14,22,.45);
  backdrop-filter:blur(3px);
  width:100%;
  box-sizing:border-box;
}

/* 入力欄（input/textarea）：other と同じ見た目 */
.sayaka-inline-chat .chat-input input,
.sayaka-inline-chat .chat-input textarea{
  flex:1 1 auto;
  width:100%;
  min-width:0; /* 折返し時のはみ出し防止 */
  padding:12px 14px;
  border-radius:12px;
  background:rgba(20,28,40,.92);
  color:#e9eef5;
  border:1px solid rgba(255,255,255,.18);
  outline:none;
  font-size:16px;
  line-height:1.45;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sayaka-inline-chat .chat-input input::placeholder,
.sayaka-inline-chat .chat-input textarea::placeholder{
  color:#a9b4c8;
}
.sayaka-inline-chat .chat-input input:focus,
.sayaka-inline-chat .chat-input textarea:focus{
  border-color:#ff7ab8;
  box-shadow:0 0 0 3px rgba(255,122,184,.2), inset 0 1px 0 rgba(255,255,255,.06);
  background:rgba(24,32,48,.98);
}

/* 送信ボタン：other と同じ見た目 */
.sayaka-inline-chat .chat-input button{
  flex:0 0 auto;
  padding:12px 16px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  background:linear-gradient(135deg,#ff4d81,#ff99cc);
  color:#fff;
  box-shadow:0 6px 18px rgba(255,95,163,.35);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.sayaka-inline-chat .chat-input button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(255,95,163,.45);
}
.sayaka-inline-chat .chat-input button:active{
  transform:scale(.98);
}

/* 親が flex のとき幅が詰まらないように保険 */
.tweet.sayaka-style{ align-items:stretch; }
.line-button + .sayaka-inline-chat{ width:100%; }