/* v6.191.0: Web Push 通知 UI（ポータル上部バナー + 手動配信画面）。
   .webpush-banner は index.html / app-index.html に並列定義 #92。専用プレフィックスで他画面に非波及。 */

/* ===== 未許可バナー（ポータル上部・未許可時のみ表示） ===== */
.webpush-banner {
  position: sticky; top: 0; z-index: 900;
  background: #e8f0fe; border-bottom: 1px solid #c6dafc;
  color: #1a2b4a;
}
.webpush-banner.hidden { display: none !important; }
.webpush-banner .banner-content {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: 13px;
}
.webpush-banner .banner-icon { font-size: 18px; }
.webpush-banner .banner-text { flex: 1; min-width: 0; }
.webpush-banner .banner-action {
  flex-shrink: 0; font: inherit; font-weight: 600; color: #fff;
  background: #1a73e8; border: none; border-radius: 9999px;
  padding: 6px 16px; cursor: pointer;
}
.webpush-banner .banner-action:active { opacity: .85; }
.webpush-banner .banner-close {
  flex-shrink: 0; background: none; border: none; color: #5f6368;
  font-size: 16px; cursor: pointer; padding: 2px 6px; line-height: 1;
}

/* ===== 手動配信画面（webpush-admin.html・.wpa- プレフィックス） ===== */
.wpa-wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
.wpa-card {
  background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 16px; box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.1));
  padding: 20px; margin-bottom: 16px;
}
.wpa-card h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; color: var(--color-text, #202124); }
.wpa-field { margin-bottom: 14px; }
.wpa-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #3c4043; }
.wpa-field input[type="text"], .wpa-field textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  border: 1px solid var(--color-border, #dadce0); border-radius: 10px; padding: 10px 12px;
}
.wpa-field textarea { min-height: 80px; resize: vertical; }
.wpa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wpa-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--color-border, #dadce0); border-radius: 9999px;
  padding: 6px 14px; font-size: 13px; cursor: pointer; user-select: none; background: #fff;
}
.wpa-chip input { margin: 0; }
.wpa-chip.checked { background: #e8f0fe; border-color: #1a73e8; color: #1a56c4; font-weight: 600; }
.wpa-preview-count {
  margin-top: 8px; font-size: 13px; color: #1a56c4; font-weight: 600;
  background: #f1f6ff; border-radius: 10px; padding: 8px 12px;
}
.wpa-notif-preview {
  border: 1px solid #e0e0e0; border-radius: 12px; padding: 12px; background: #fafafa;
  display: flex; gap: 10px; align-items: flex-start;
}
.wpa-notif-preview .np-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: conic-gradient(from 210deg, #1a73e8, #34a853, #fbbc04, #ea4335, #1a73e8);
  display: grid; place-items: center;
}
.wpa-notif-preview .np-icon svg { width: 26px; height: 26px; background: #fff; border-radius: 8px; padding: 5px; color: #1a73e8; box-sizing: border-box; }
.wpa-notif-preview .np-title { font-size: 13px; font-weight: 700; color: #202124; }
.wpa-notif-preview .np-body { font-size: 12px; color: #5f6368; white-space: pre-wrap; margin-top: 2px; }
.wpa-result {
  margin-top: 12px; font-size: 13px; border-radius: 10px; padding: 10px 12px;
  background: #e6f4ea; color: #1e7e34; display: none;
}
.wpa-result.error { background: #fce8e6; color: #c5221f; }
.wpa-result.staging { background: #fff4e5; color: #b06000; }
.wpa-send-btn {
  width: 100%; font: inherit; font-size: 15px; font-weight: 700; color: #fff;
  background: #1a73e8; border: none; border-radius: 9999px; padding: 12px; cursor: pointer;
}
.wpa-send-btn:disabled { opacity: .5; cursor: not-allowed; }