@charset "utf-8";
/*
 * Re:lation Chat ランチャー カスタムCSS
 * ----------------------------------------------------------
 *  対象：<cw-launcher> のシャドウDOM内のランチャーボタン #relation-chat-launcher
 *  ・既定＝右に300px飛ばし＋透明＝非表示（影も除去）
 *  ・ホスト(cw-launcher)に .rc-active が付くと表示（戻る）
 *  ※ このCSSは relationchat-custom.js がシャドウDOMへ読み込みます。
 *    表示/非表示の切替（100pxスクロール）はJSがホストに .rc-active を付け外しして制御。
 *  ※ クラスはボタンではなくホストに付ける。Svelteがホバー時にボタンの
 *    classNameを書き換える(scale-100↔105)ため、ボタンに付けると消えて
 *    ボタンが右へ逃げてしまう。ホストのクラスはSvelteが触らないので安定。
 *  ※ rc.js/Svelte がインラインstyle等を当てるため !important で上書き。
 * ----------------------------------------------------------
 */

#relation-chat-launcher {
  transform: translateX(300px) !important;   /* 右に飛ばす */
  opacity: 0 !important;                      /* 非表示 */
  box-shadow: none !important;                /* 影を消す */
  pointer-events: none !important;
  transition: transform 0.35s ease, opacity 0.35s ease !important;
}

:host(.rc-active) #relation-chat-launcher {
  transform: translateX(0) !important;        /* 戻す */
  opacity: 1 !important;                       /* 表示 */
  pointer-events: auto !important;
}