/* 各要素の幅・高さを「padding/border」込みで扱う */
.tipWidget, .tipWidget * { box-sizing: border-box; }

/* ボタンだけ別フォントになる事故を防ぐ（ウィジェット内だけ） */
.tipWidget button { font: inherit; }
.tipWidget { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }


/* ダーク背景を前提にしていたので当初はいれていた装飾。必要な時にまた使ええばいい */
/* body{
  margin: 0;
  background: #111;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
} */


/* =========================================================
  tipWidget: ガワ（overlay / backdrop / modal）最小CSS
  目的：全画面オーバーレイ＋半透明背景＋中央モーダル
  注意：.tipWidget の外へ影響を出さない
========================================================= */
/* hidden属性が付いている間は確実に非表示 */
.tipWidget .tipOverlay[hidden]{
  display: none!important;
}

/* overlay：画面全体を覆う土台 */
.tipWidget .tipOverlay{
  position: fixed;
  inset: 0;
  z-index: 100000;

  /* ↓ modalを中央に置く ↓ */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 端末が小さい時にモーダルが画面端へ貼り付かないようにする */
  box-sizing: border-box;  
  padding: 16px;
}

//* backdrop：背景ページを暗くしない */
.tipWidget .tipBackdrop{
  position: absolute;
  inset: 0;
  background: transparent;
}

/* modal：箱背景を消して、キャラとUIだけを浮かせる */
.tipWidget .tipModal{
  position: relative;
  z-index: 1;

  width: min(429px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 16px;

  background: transparent;
  color: #f9fafb;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* =========================================================
   キャラ＋メッセージと画面内容の配置
========================================================= */

/*配置対象全体*/
.tipWidget .tipLayout{
  display: grid;
  gap: 16px;
  align-items: start;
}

/*キャラ*/
.tipWidget .tipLayout .tipChara{
  grid-area: chara;
  min-width: 0;
  margin: 0 auto;
}

/*メッセージ*/
.tipWidget .tipLayout .tipSpeech{
  grid-area: speech;
  min-width: 0;
}

/*各画面の内容*/
.tipWidget .tipLayout .btnParts,
.tipWidget .tipLayout .tipConfirm,
.tipWidget .tipLayout .tipResult,
.tipWidget .tipLayout .sendModeChoice,
.tipWidget .tipLayout .permissionSettings{
  grid-area: content;
  min-width: 0;
}

/*既存の確認・完了画面の上余白を配置用gapへ統一*/
.tipWidget .tipLayout .tipConfirm,
.tipWidget .tipLayout .tipResult{
  margin-top: 0;
}

/*上：キャラ＋メッセージの下に画面内容*/
.tipWidget .tipLayout[data-visual-position="top"]{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "chara"
    "speech"
    "content";
}

/*下：画面内容の下にキャラ＋メッセージ*/
.tipWidget .tipLayout[data-visual-position="bottom"]{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "content"
    "chara"
    "speech";
}

/*左：キャラ＋メッセージを画面内容の左へ配置*/
.tipWidget .tipLayout[data-visual-position="left"]{
  width: min(760px, calc(100% - 32px));
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  grid-template-areas:
    "chara content"
    "speech content";
}

/*右：キャラ＋メッセージを画面内容の右へ配置*/
.tipWidget .tipLayout[data-visual-position="right"]{
  width: min(760px, calc(100% - 32px));
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  grid-template-areas:
    "content chara"
    "content speech";
}

/* キャラ枠：モーダル幅に対する比率で決める */
.tipWidget .tipChara{
  width: clamp(72px, 28%, 120px); /* ←ここが“普通に自然”な決め打ち */
  aspect-ratio: 1 / 1;
  margin: 0 auto 12px;
}

.tipWidget .tipCharaVid{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* キャラ動画・画像が hidden の時は確実に非表示 */
.tipWidget .tipCharaVid[hidden],
.tipWidget .tipCharaImg[hidden]{
  display: none !important;
}

/* キャラ画像 */
.tipWidget .tipCharaImg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* =========================================================
  tipWidget：処理中レイヤー（tipBusy）
  目的：モーダルの上に膜をかぶせて「処理中」を見せる
========================================================= */
/* hiddenの間はtipWidgetを出さない */
.tipWidget .tipBusy[hidden]{
  display: none !important;
}
/* モーダルに被せるレイヤー */
.tipWidget .tipBusy{
  position: absolute;
  inset: 0;
  z-index: 2;
  /* ウォレット確認中のテキストと一緒に出すイメージ */
  display: flex;
  align-items: center;
  justify-content: center;
  /* うっすらした白い膜 */
  background: rgba(255,255,255,0.75);
}

/* 通信中レイヤーの土台 */
.tipWidget .tipBusyBox{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 通信中レイヤーの中身 */
.tipWidget .tipSpinner{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(0,0,0,0.2);
  border-top-color: rgba(0,0,0,0.8);
  animation: tipWidgetSpin 1s linear infinite;
}

/* 通信中レイヤーの中身（動画版） */
.tipWidget .tipSpinnerVid{
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* 処理中文字 */
.tipWidget .tipBusyText{
  margin: 0;
  color: #000;
  font-weight: 700;
}

/* 回転アニメ */
@keyframes tipWidgetSpin{
  to{ transform: rotate(360deg);}
}

/* =========================================================
   tipWidget：金額ボタン（最小レイアウト）
   目的：2列に並べる + 選択中の見た目を出す
========================================================= */
/* 金額ボタンを2×2に並べる */
.tipWidget .amountGrid{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 金額ボタンを2列に並べる */
  gap: 8px; /* ボタン間のすき間 */
}

/* ボタン選択後にJSが isSelected を付けたら） */
.tipWidget .amountBtn.is-selected{
  outline: 2px solid #000;  /* クリックしたら目立つ枠線にする（色は後で調整） */
}

/* 任意金額入力 */
.tipWidget .amountCustom{
  margin-top: 12px;
  display: flex;
  flex-direction:column;
  gap:8px;
}

/* ラベル */
.tipWidget .amountCustomLabel{
  font-size:12px;
}

/* 数値入力 */
.tipWidget .customAmountInput{
  width:100%;
  padding:8px 10px;
}

/* 任意金額の適用ボタン */
.tipWidget .customAmountApplyBtn{
  width:100%;
}

/* =========================================================
   送金確認画面
========================================================= */
/* 最終確認の詳細4項目 */
.tipWidget .tipConfirmMeta{
  margin: 0 0 12px;
  padding: 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius: 10px;
}
/* 最後の行だけ下余白を消す */
.tipWidget .tipConfirmMeta .tipConfirmLine:last-child{
  margin-bottom: 0;
}
/* 受取先名・アドレスは長いので折り返せるようにする */
.tipWidget .confirmRecipientLabel,
.tipWidget .confirmRecipientAddress{
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* =========================================================
   tipWidget：送金完了
========================================================= */
/* 最終確認・完了画面を最低限見やすく */
.tipWidget .tipConfirm,.tipWidget .tipResult{
  margin-top:12px;
}

/* タイトルっぽく */
.tipWidget .tipConfirmTitle,.tipWidget .tipResultTitle{
  margin: 0 0 8px;
  font-weight: 800;
}

/* 行 */
.tipWidget .tipConfirmLine,.tipWidget .tipResultLine{
  margin: 0 0 12px;
}

/* TxHashリンクは長いので、完了画面の中で折り返す */
.tipWidget .resultTxHash{
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* =========================================================
   tipWidget：送金エラー
========================================================= */
.tipWidget .tipError{
  margin-top: 8px;
  padding:8px 10px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius:10px;
  font-size: 12px;
  line-height: 1.4em;
}