/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:12:46 */
/* ==============================================
   導入メッセージ：Apple Notification Style (Center Layout)
   修正：
     BUG-1: -webkit-backdrop-filter の記述順を修正（webkit 先）
     BUG-2: backdrop-filter に will-change を追加（GPU描画）
     BUG-3: highlight-text に background-clip / color を追加（Firefox対応）
     BUG-4: prefers-reduced-motion 対応を追加
     BUG-5: contain: layout style を追加
   ============================================== */

.apple-message-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;

    /* ガラスの質感 */
    background: rgba(255, 255, 255, 0.6) !important;
    /*
     * ★修正BUG-1：-webkit- を先、標準プロパティを後に記述（慣習上の正しい順序）
     * ★修正BUG-2：will-change を追加（backdrop-filter の GPU合成ヒント）
     */
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;

    border-radius: 24px !important;
    padding: 32px 24px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.04) !important;

    /* ★修正BUG-5：レイアウト再計算をカード内に限定 */
    contain: layout style !important;

    /* ★修正BUG-2：backdrop-filter / transform アニメーション用 GPU レイヤー確保 */
    will-change: transform, opacity !important;

    /* 初期状態（アニメーション開始前） */
    opacity: 0;
    transform: translateY(-10px);

    /* アニメーション */
    animation: fadeSlideDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes fadeSlideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* アバター画像エリア */
.message-avatar {
    margin-bottom: 4px !important;
}
.message-avatar img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
    border: 3px solid #ffffff !important;
}

/* テキストエリア */
.message-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* 名前 */
.message-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* 肩書きバッジ */
.message-role {
    font-size: 11px !important;
    background: #e5e5ea !important;
    color: #86868b !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* 本文 */
.message-body {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #424245 !important;
    margin: 0 !important;
    font-feature-settings: "palt" !important;
}

/* 強調テキスト */
.highlight-text {
    background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important;
    -webkit-background-clip: text !important;
    /*
     * ★修正BUG-3：標準プロパティを追加（Firefox で文字が消える問題を解消）。
     * -webkit-text-fill-color は Firefox では解釈されないため
     * color: transparent をフォールバックとして追加。
     */
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: 0.02em !important;
}

/* 補足テキスト */
.sub-text {
    font-size: 12px !important;
    color: #86868b !important;
    display: block !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
}

/*
 * ★修正BUG-4：prefers-reduced-motion 対応。
 * アニメーションを止めて、カードを最初から表示状態にする。
 * opacity: 0 の初期状態が維持されると invisible になるため
 * reduced-motion 時は opacity: 1 / transform: none を強制。
 */
@media (prefers-reduced-motion: reduce) {
    .apple-message-card {
        animation: none !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        will-change: auto !important;
    }
}

/* スマホ対応 */
@media (max-width: 768px) {
    .apple-message-card {
        padding: 24px 20px !important;
        border-radius: 20px !important;
    }
    .message-avatar img {
        width: 72px !important;
        height: 72px !important;
    }
    .message-name {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    .message-body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    .highlight-text {
        font-size: 18px !important;
    }
}