/* Noren Bubble UI */
:root{
  --nb-z:2147483646;
  --nb-gap:12px;
  --nb-shadow:0 10px 30px rgba(0,0,0,.18);
  --nb-border:#e5e7eb;
  --nb-bg:#0ea5e9;      /* 吹き出し色(ボタン) */
  --nb-bg-press:#0284c7;
  --nb-text:#0f172a;
  --nb-white:#ffffff;
}

.nb-wrap{
  position:fixed;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  z-index:var(--nb-z);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* 文字入りの“吹き出しボタン” */
.nb-speech{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--nb-bg); color:var(--nb-white);
  border-radius:999px; padding:12px 16px;
  box-shadow:var(--nb-shadow); cursor:pointer; user-select:none;
  font-size:15px; line-height:1.2;
  position:relative; min-height:48px;
}
.nb-speech:active{ background:var(--nb-bg-press); }
.nb-speech .nb-emoji{ font-size:20px; line-height:1; }
.nb-speech .nb-label{ font-weight:600; letter-spacing:.2px; }

/* 吹き出しの“しっぽ” */
.nb-speech::after{
  content:""; position:absolute; right:18px; bottom:-8px;
  width:0; height:0; border-left:8px solid transparent;
  border-right:8px solid transparent; border-top:8px solid var(--nb-bg);
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.12));
}

/* メニューカード */
.nb-menu{
  position:absolute; right:0; bottom:68px;
  background:#fff; border:1px solid var(--nb-border);
  border-radius:16px; box-shadow:var(--nb-shadow);
  min-width:240px; padding:8px;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.nb-menu.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }

.nb-item{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:12px; text-decoration:none; color:var(--nb-text);
}
.nb-item:hover{ background:#f8fafc; }
.nb-icn{ width:22px; height:22px; flex:0 0 22px; }
.nb-textbox{ display:flex; flex-direction:column; gap:2px; }
.nb-title{ font-size:15px; font-weight:600; }
.nb-sub{ font-size:12px; color:#64748b; }

/* 注意書き（最下部） */
.nb-note{ display:block; text-align:center; color:#64748b; font-size:12px; padding:6px 4px 2px; }

/* スマホ強調（文字/タップ領域を大きく） */
@media (max-width: 480px){
  .nb-wrap{ bottom:max(24px, env(safe-area-inset-bottom)); right:max(14px, env(safe-area-inset-right)); }
  .nb-speech{ padding:14px 18px; font-size:16px; min-height:52px; }
  .nb-speech .nb-emoji{ font-size:22px; }
  .nb-menu{ min-width:260px; bottom:76px; }
  .nb-title{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce){
  .nb-menu{ transition:none; }
}