/* =========================================================
   AIトリリオン — 徘徊マスコット ＋ AI受付チャット
   既存 index.html の :root 変数（--sky / --ice / --abyss 等）を継承する。
   ここでは既存セレクタを一切上書きしない（全て .tl- 接頭辞）。
   z-index: grain=80 / walker=90 / fab=98 / header=100 / panel=115 / drawer=120
   ========================================================= */

/* ---------- 徘徊キャラ ----------
   3重入れ子で transform の役割を分ける：
   .tlw       = 位置（translate3d）
   .tlw-flip  = 進行方向の左右反転
   img        = 歩行の上下ゆれ
   これを1要素にまとめると transform が食い合って壊れる。 */
.tlw{
  position:fixed;left:0;top:0;z-index:90;pointer-events:none;
  will-change:transform;transform:translate3d(-400px,-400px,0);
}
.tlw .tlw-flip,.tlw .tlw-in{display:block}
.tlw.rtl .tlw-flip{transform:scaleX(-1)}
.tlw img{
  display:block;height:64px;width:auto;pointer-events:auto;cursor:pointer;
  transform-origin:50% 100%;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
/* 潰れ・転び・寝姿は横長。CSSで潰さず別画像に差し替えるので幅基準に切り替える */
.tlw img.tl-squash{animation:none!important;transform:none!important;transition:none;width:92px;height:auto}
.tlw img.tl-fall{animation:none!important;transform:none!important;transition:none;width:86px;height:auto}
.tlw img.tl-sleep{animation:none!important;transform:none!important;transition:none;width:88px;height:auto}
.tlw img.tl-fade{transition:opacity .5s var(--ease,ease);opacity:0}

/* 吹き出し */
.tlw-say{
  position:absolute;left:50%;bottom:72px;z-index:2;
  transform:translateX(calc(-50% + var(--tlbx,0px)));
  background:rgba(6,35,72,.95);border:1px solid rgba(125,180,224,.5);
  border-radius:13px 13px 13px 4px;padding:8px 12px;
  font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif;
  font-size:12.5px;font-weight:700;line-height:1.65;letter-spacing:.01em;
  color:#eaf3fb;text-align:left;
  width:max-content;max-width:min(66vw,268px);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  pointer-events:auto;
  animation:tlSayIn .32s cubic-bezier(.22,.61,.36,1) both;
}
.tlw-say.tl-out{animation:tlSayOut .3s ease both}
.tlw-say .tl-mute{
  position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(169,200,230,.4);background:#062348;color:#a9c8e6;
  font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;font-family:inherit;
}
.tlw-say .tl-mute:hover{color:#eaf3fb;border-color:#7db4e0}
@keyframes tlSayIn{from{opacity:0;transform:translateX(calc(-50% + var(--tlbx,0px))) translateY(8px) scale(.9)}
  to{opacity:1;transform:translateX(calc(-50% + var(--tlbx,0px))) translateY(0) scale(1)}}
@keyframes tlSayOut{from{opacity:1}to{opacity:0;transform:translateX(calc(-50% + var(--tlbx,0px))) translateY(-6px) scale(.96)}}

@keyframes tlWalk{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-5px) rotate(2.5deg)}}
@keyframes tlRun{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-9px) rotate(-1deg)}}
@keyframes tlHop{
  0%,100%{transform:translateY(0) scale(1,1)}
  16%{transform:translateY(0) scale(1.12,.86)}
  50%{transform:translateY(-30px) scale(.94,1.07)}
  84%{transform:translateY(0) scale(1.1,.9)}
}
@keyframes tlPop{
  0%{transform:translateY(0) scale(1,1)}
  25%{transform:translateY(-20px) scale(.93,1.1)}
  55%{transform:translateY(0) scale(1.12,.9)}
  78%{transform:translateY(-6px) scale(1,1)}
  100%{transform:translateY(0) scale(1,1)}
}
@keyframes tlSleep{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-2px) scale(1.015,.985)}}
/* 夜のふよふよ（寝たまま漂う） */
.tlw.tl-drift .tlw-in{animation:tlDrift 2.8s ease-in-out infinite}
@keyframes tlDrift{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}

/* ---------- AI受付チャット ---------- */
.tlc-fab{
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:98;
  display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border-radius:999px;cursor:pointer;
  border:2px solid #7db4e0;background:#fff;color:#0b2447;text-align:left;font-family:inherit;
  box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 0 6px rgba(125,180,224,.14);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .3s;
  -webkit-tap-highlight-color:transparent;
}
.tlc-fab:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,0,0,.4),0 0 0 8px rgba(125,180,224,.2)}
.tlc-fab-label{display:flex;flex-direction:column;line-height:1.25}
.tlc-fab-label b{font-size:14px;font-weight:800;letter-spacing:.02em}
.tlc-fab-label small{font-size:10.5px;color:#5c6b7a;font-weight:600}
.tlc-fab-ico{position:relative;width:52px;height:52px;border-radius:50%;flex:none}
.tlc-fab-ico img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.tlc-tease{
  position:fixed;right:18px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:98;max-width:min(300px,calc(100vw - 36px));
  background:#0b2447;color:#fff;font-size:13px;line-height:1.55;padding:12px 34px 12px 14px;border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;cursor:pointer;
}
.tlc-tease::after{content:"";position:absolute;right:26px;bottom:-8px;border:8px solid transparent;border-top-color:#0b2447;border-bottom:0}
.tlc-tease.on{opacity:1;transform:none}
.tlc-tease-x{position:absolute;top:6px;right:8px;background:none;border:none;color:#fff;font-size:16px;cursor:pointer;opacity:.75;padding:2px 4px}
.tlc-fab-ico .tl-ping{
  position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(125,180,224,.7);
  animation:tlPing 2.4s ease-out infinite;pointer-events:none;
}
@keyframes tlPing{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.45)}}
body.tlc-open .tlc-fab,body.tlc-open .tlc-tease{opacity:0;visibility:hidden;pointer-events:none}

.tlc-panel{
  box-sizing:border-box;
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:115;
  width:360px;max-width:calc(100vw - 24px);
  height:min(540px,calc(100svh - 120px));
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(170deg,#0a2244,#071a30 46%,#050f1f);
  border:1px solid rgba(169,200,230,.22);border-radius:20px;
  box-shadow:0 40px 90px rgba(0,0,0,.65);
  font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);
  transition:opacity .3s cubic-bezier(.22,.61,.36,1),transform .3s cubic-bezier(.22,.61,.36,1),visibility .3s;
}
.tlc-panel.on{opacity:1;visibility:visible;transform:none}
.tlc-panel *,.tlc-panel *::before,.tlc-panel *::after{box-sizing:border-box}
.tlc-head{
  display:flex;align-items:center;gap:11px;padding:14px 14px 13px;flex:0 0 auto;
  background:rgba(6,35,72,.6);border-bottom:1px solid rgba(169,200,230,.14);
}
.tlc-head .av{width:38px;height:38px;border-radius:50%;background:#fff;flex:0 0 auto;overflow:hidden;border:1.5px solid rgba(125,180,224,.6)}
.tlc-head .av img{width:100%;height:100%;object-fit:cover;display:block}
.tlc-head .tt{min-width:0;line-height:1.35}
.tlc-head .tt b{display:block;font-size:14px;font-weight:700;color:#eaf3fb}
.tlc-head .tt span{display:block;font-size:10.5px;color:#8aa3bd;letter-spacing:.04em}
.tlc-x{
  margin-left:auto;width:32px;height:32px;flex:0 0 auto;border-radius:10px;
  border:1px solid rgba(169,200,230,.24);background:rgba(122,168,210,.08);
  color:#c9d9e8;font-size:16px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:.25s;
}
.tlc-x:hover{color:#eaf3fb;border-color:#7db4e0;background:rgba(122,168,210,.18)}

.tlc-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:15px 14px;display:flex;flex-direction:column;gap:11px;-webkit-overflow-scrolling:touch}
.tlc-msg{max-width:86%;font-size:13px;line-height:1.85;border-radius:14px;padding:10px 13px;word-break:break-word;white-space:pre-wrap}
.tlc-msg.ai{align-self:flex-start;background:rgba(122,168,210,.1);border:1px solid rgba(169,200,230,.18);border-bottom-left-radius:5px;color:#dbe8f5}
.tlc-msg.me{align-self:flex-end;background:linear-gradient(125deg,#7db4e0,#5391c5);border-bottom-right-radius:5px;color:#04121f;font-weight:500}
.tlc-msg a{color:#7db4e0;text-decoration:underline}
.tlc-msg.err{background:rgba(224,145,58,.1);border-color:rgba(224,145,58,.4);color:#f4cf9a}
.tlc-dots{align-self:flex-start;display:flex;gap:5px;padding:12px 14px;background:rgba(122,168,210,.1);border:1px solid rgba(169,200,230,.18);border-radius:14px;border-bottom-left-radius:5px}
.tlc-dots i{width:6px;height:6px;border-radius:50%;background:#7db4e0;animation:tlDot 1.1s ease-in-out infinite}
.tlc-dots i:nth-child(2){animation-delay:.15s}
.tlc-dots i:nth-child(3){animation-delay:.3s}
@keyframes tlDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.tlc-linebtn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:9px 17px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:#04120a;background:linear-gradient(120deg,#06C755,#4fd98a);
  box-shadow:0 8px 20px rgba(6,199,85,.28);
}

.tlc-foot{flex:0 0 auto;padding:11px 12px calc(11px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(169,200,230,.14);background:rgba(4,15,30,.5)}
.tlc-form{display:flex;gap:8px;align-items:flex-end}
.tlc-ta{
  flex:1 1 auto;min-width:0;resize:none;font-family:inherit;font-size:13.5px;line-height:1.6;
  color:#eaf3fb;background:rgba(122,168,210,.1);border:1px solid rgba(169,200,230,.22);
  border-radius:13px;padding:10px 12px;max-height:96px;
}
.tlc-ta::placeholder{color:#7d92a9}
.tlc-ta:focus{outline:none;border-color:#7db4e0;background:rgba(122,168,210,.16)}
.tlc-send{
  flex:0 0 auto;min-width:42px;height:42px;border-radius:13px;border:none;cursor:pointer;padding:0 12px 0 10px;gap:5px;
  font-family:inherit;font-size:13px;font-weight:800;white-space:nowrap;
  background:linear-gradient(120deg,#7db4e0,#5391c5);color:#04121f;
  display:flex;align-items:center;justify-content:center;transition:.25s;
}
.tlc-send:disabled{opacity:.4;cursor:default}
.tlc-send svg{width:18px;height:18px}
.tlc-send span{line-height:1}
.tlc-line{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:9px;
  padding:11px 14px;border-radius:12px;font-size:12.5px;font-weight:700;
  color:#04120a;background:linear-gradient(120deg,#06C755,#4fd98a);
  box-shadow:0 8px 20px rgba(6,199,85,.26);
}
.tlc-note{margin-top:8px;font-size:10px;line-height:1.6;color:#7d92a9;text-align:center;letter-spacing:.01em}

@media(max-width:640px){
  body.tlc-open{overflow:hidden;position:relative}
  /* iOSは16px未満の入力欄にフォーカスすると自動ズームして右側が切れる → 16pxに */
  .tlc-ta{font-size:16px}
  .tlc-panel{
    right:0;left:0;bottom:0;width:100%;max-width:none;
    height:min(84svh,640px);border-radius:20px 20px 0 0;border-bottom:none;
    transform:translateY(20px);
  }
  .tlc-panel.on{transform:none}
  .tlc-fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}

@media(prefers-reduced-motion:reduce){
  .tlw{display:none!important}
  .tlc-fab .tl-ping{display:none}
}
@media print{.tlw,.tlc-fab,.tlc-panel{display:none!important}}