* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100svh;
    width: 100svw;
}

body {
    height: 100svh;
    width: 100svw;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background-color: #1b1b1b;

    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.window {
    height: 1000px;
    aspect-ratio: 1.6;
    background-color: black;

    transform: scale(0.5);
    box-shadow: inset;
    border-radius: 125px;
}

.glow-border {
    position: relative;
}

.glow-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;

    /* ★上品で滑らかなApple本家の質感へチューニング */
    background:
    /* ① 上端の光：強さを落とし、角のカーブに入る手前からフワッと柔らかく減衰させる */
        radial-gradient(
            ellipse 90% 120% at 50% 0%,
            rgba(255, 255, 255, 0.6) 0%,
            /* ← 0.95から0.6に下げて眩しさを抑える */ rgba(255, 255, 255, 0.35) 50%,
            rgba(255, 255, 255, 0.1) 75%,
            /* ← 角ばって見えないよう手前から滑らかにフェード */ transparent 90%
        ),
        /* ② 下端の光：目立たない極薄の反射光（ほんのり立体感を出す程度） */
        radial-gradient(ellipse 80% 120% at 50% 100%, rgba(255, 255, 255, 0.2) 0%, /* ← 0.4から0.2に下げて目立ちすぎを防止 */ rgba(255, 255, 255, 0.05) 40%, transparent 70%);

    /* 真ん中をくり抜く（内側が白く濁らない） */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

.glass-panel {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.fade-text {
    display: block; /* ★超重要：インラインではなくブロック要素にする */
    width: 100%; /* 親の幅（280px）いっぱいに強制固定 */
    white-space: nowrap;
    overflow: hidden;
    /* 
    ★魔法のプロパティ
    左から75%までは普通に見えて、75%〜95%にかけて文字がスーッと透明に消える
  */
    -webkit-mask-image: linear-gradient(to right, #000 75%, transparent 95%);
    mask-image: linear-gradient(to right, #000 75%, transparent 95%);
}

.fade-text[data-user] {
    text-align: right;
    direction: rtl;
    unicode-bidi: bidi-override;
    -webkit-mask-image: linear-gradient(to left, #000 75%, transparent 95%) !important;
    mask-image: linear-gradient(to left, #000 75%, transparent 95%) !important;
}

.fade-text[data-AI] {
    text-align: left;
    -webkit-mask-image: linear-gradient(to right, #000 75%, transparent 95%);
    mask-image: linear-gradient(to right, #000 75%, transparent 95%);
}