/* ================================================================
   PGirls AMA - Frontend Stylesheet
   Music / NFT 共通 - 完全ダークテーマ版
================================================================ */

/* ----- Theme Colors ----- */
:root{
  --pg-bg:#0d0e10;     /* ← 背景色（ページのダーク背景と統一） */
  --pg-card:#181a1d;
  --pg-ring:#2d2f34;
  --pg-fg:#f3f4f6;
  --pg-muted:#9ca3af;

  --pg-grad1:#7c8cff;
  --pg-grad2:#a06bff;
  --pg-accent:#60a5fa;
  --pg-shadow:0 8px 30px rgba(120,130,255,.22);

  --pg-gradA:#6366f1;
  --pg-gradB:#a855f7;
  --pg-gradC:#22d3ee;
  --pg-gradD:#8b5cf6;
}

/* ================================================================
   AMA セクション背景（重要）
================================================================ */
.pg-ama{
  background:var(--pg-bg) !important;          /* ← 下のセクションと同じ背景に変更 */
  padding:2rem 1.4rem !important;             /* ← カード周りに余白 */
  border-radius:1rem;                          /* ← なめらかに */
  color:var(--pg-fg);
  font:16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:1.6rem 0;
}


/* ================================================================
   CARD
================================================================ */
.pg-ama__card{
  background:var(--pg-card);
  border:1px solid var(--pg-ring);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:var(--pg-shadow);
}

.pg-ama__title{
  font-weight:800;
  font-size:1.18rem;
  margin:0 0 .6rem;
}

.pg-ama__subtitle{
  color:var(--pg-muted);
  font-size:.94rem;
  margin:.25rem 0 .8rem;
}

/* ----- MODE SWITCH ----- */
.pg-ama__modes{
  display:flex;
  gap:.6rem;
  margin:.2rem 0 1rem;
}

.pg-ama__mode{
  appearance:none;
  border:0;
  border-radius:9999px;
  padding:.45rem .95rem;
  font-size:.86rem;
  font-weight:700;
  cursor:pointer;
  background:#111318;
  color:var(--pg-muted);
  transition:.18s;
}

.pg-ama__mode--active{
  background-image:linear-gradient(90deg,var(--pg-gradA),var(--pg-gradB));
  color:#050714;
  box-shadow:var(--pg-shadow);
}

/* ----- Chips ----- */
.pg-ama__chips{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:.4rem 0 .9rem;
}

.pg-ama__chip{
  border-radius:9999px;
  padding:.25rem .75rem;
  border:1px solid var(--pg-ring);
  background:#111318;
  color:var(--pg-muted);
  font-size:.8rem;
  cursor:pointer;
  transition:.18s;
}

.pg-ama__chip--primary{
  background:linear-gradient(90deg,var(--pg-grad1),var(--pg-grad2));
  color:#050714;
  font-weight:700;
  border:1px solid transparent;
}

/* ----- Textarea ----- */
.pg-ama__textarea{
  width:100%;
  box-sizing:border-box;
  margin:.1rem 0 .9rem;
  padding:.6rem .75rem;
  border-radius:.6rem;
  border:1px solid var(--pg-ring);
  background:#050609;
  color:var(--pg-fg);
  min-height:4.8rem;
  font-size:.9rem;
  resize:vertical;
}

.pg-ama__textarea::placeholder{
  color:#6b7280;
}

/* ----- Actions ----- */
.pg-ama__actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
}

.pg-ama__btn{
  border:0;
  border-radius:.75rem;
  padding:.55rem 1.2rem;
  background:linear-gradient(90deg,var(--pg-grad1),var(--pg-grad2));
  color:#050714;
  font-weight:800;
  cursor:pointer;
  transition:.18s;
  box-shadow:var(--pg-shadow);
}

.pg-ama__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 40px rgba(120,130,255,.33);
}

/* ================================================================
   MODAL
================================================================ */
.pg-ama__overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  z-index:9999;
  padding:1rem;
}

.pg-ama__overlay.active{
  display:flex;
}

.pg-ama__modal{
  background:#050609;
  border-radius:1.1rem;
  border:1px solid var(--pg-ring);
  padding:1.2rem;
  max-width:720px;
  width:100%;
  box-shadow:var(--pg-shadow);
  position:relative;
}

.pg-ama__close{
  position:absolute;
  top:.6rem;
  right:.6rem;
  border:0;
  border-radius:9999px;
  width:2rem;
  height:2rem;
  background:#111318;
  color:var(--pg-muted);
  font-size:1.1rem;
  cursor:pointer;
}

.pg-ama__close:hover{
  background:#181b1f;
  color:#e5e7eb;
}

/* ----- Video ----- */
.pg-ama__video{
  display:none;
  aspect-ratio:16/9;
  margin:.4rem 0 .5rem;
  border-radius:.75rem;
  overflow:hidden;
  background:#000;
}

.pg-ama__video iframe{
  width:100%;
  height:100%;
  border:0;
}

/* ----- Answer ----- */
.pg-ama__answer{
    background:#111315;
    border:1px solid var(--pg-ring);
    border-radius:.75rem;
    padding:.85rem .95rem;
    min-height:5rem;
    font-size:.92rem;
    white-space: normal !important;
    line-height:1.7;
    word-break:break-word;

    /* ❌ flex を全部禁止 */
    display:block !important;
    align-items:unset !important;
    justify-content:unset !important;

    /* スクロール領域のまま */
    max-height:200px;
    overflow-y:auto;
    padding-right:8px;
}

/* ================================================================
   LOADING
================================================================ */
.pg-loading{
  display:flex;
  gap:.75rem;
  align-items:center;
  justify-content:center;
  color:var(--pg-muted);
}

.pg-spin{
  width:2rem;
  height:2rem;
  border:3px solid #444;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  0%{transform:rotate(0)}
  100%{transform:rotate(360deg)}
}

/* AMA セクションの背景をサイト背景と完全一致させる */
.pg-ama,
.pg-ama-embed,
.pg-ama-wrapper {
    background: #0d0e10 !important;  /* ← サイトのダーク背景と同じ色 */
    padding: 2rem 1.4rem !important;
    border-radius: 1rem;
}

/* AMA 全体のコンテナ（親要素）にも適用 */
.pg-ama-block,
.pg-ama-container {
    background: #0d0e10 !important;
    border-radius: 1rem;
}

/* カードの外側余白と背景改善 */
.pg-ama__card {
    background: #181a1d !important;  /* 既存のカード色を維持 */
    border: 1px solid #2d2f34 !important;
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(120,130,255,.22);
}

.pg-ai-modal-body {
    white-space: normal !important;
    word-break: break-word !important;
}

.pg-ama__explain-zealy {
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    opacity: 0.9;
}

.pg-ama__btn--zealy {
    display: none !important;
}

/* ==========================================================
   Zealy Button — Purple Gradient (PGirlsChain Style)
   ========================================================== */

.pg-ama-zealy-box {
    margin-top: 16px;
    text-align: center;
}

.pg-ama-zealy-msg {
    color: #e5d4ff;
    font-size: 14px;
    margin-bottom: 8px;
    opacity: 0.9;
}

/* ★ ボタン本体（紫〜ピンクの美しいグラデ） */
.pg-ama-zealy-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;

    background: linear-gradient(135deg, #a678ff 0%, #bf5bff 50%, #d46bff 100%);
    color: #ffffff;
    text-decoration: none;

    box-shadow: 0 4px 16px rgba(190, 120, 255, 0.35);

    transition: all 0.25s ease;
}

/* ★ Hover（明るく光る） */
.pg-ama-zealy-btn:hover {
    background: linear-gradient(135deg, #b98bff 0%, #cf7aff 50%, #e684ff 100%);
    box-shadow: 0 4px 22px rgba(220, 150, 255, 0.55);
    transform: translateY(-2px);
}

/* ★ Active（押し込み感） */
.pg-ama-zealy-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(190, 120, 255, 0.25);
}


/* --- AI回答をスクロール可能にする（200px） --- */
.pg-ama__answer {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 8px;
    word-break: break-word;
}

/* スクロールバー（任意） */
.pg-ama__answer::-webkit-scrollbar {
    width: 6px;
}
.pg-ama__answer::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 3px;
}

/* 回答時間メッセージ */
.pg-ama__delay {
    font-size: 12px;
    color: #bbb;
    margin-left: 6px;
    white-space: nowrap;
}