/* --- static/css/poda_style.css (独立特效样式) --- */

/* 容器定位 */
#poda {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 750px; /* 聊天框最大宽度 */
    min-height: 180px;
    margin: 0 auto;
}

#poda-main {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: flex;
}

/* --- 背景辉光层 (使用ID限定范围，避免冲突) --- */
#poda .white,
#poda .border,
#poda .darkBorderBg,
#poda .glow {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    z-index: 1; /* 放在底层 */
    border-radius: 20px;
    filter: blur(3px);
    pointer-events: none; /* 确保不阻挡点击 */
}

/* 1. 白色流光层 */
#poda .white { filter: blur(2px); }
#poda .white::before {
    content: ""; z-index: -2; text-align: center; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(83deg);
    position: absolute; width: 1500px; height: 1500px;
    background-repeat: no-repeat; background-position: center;
    filter: brightness(1.4);
    background-image: conic-gradient(rgba(0,0,0,0) 0%, #a099d8, rgba(0,0,0,0) 8%, rgba(0,0,0,0) 50%, #dfa2da, rgba(0,0,0,0) 58%);
    transition: all 2s;
}

/* 2. 边界层 */
#poda .border { filter: blur(0.5px); }
#poda .border::before {
    content: ""; z-index: -2; text-align: center; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(70deg);
    position: absolute; width: 1500px; height: 1500px;
    filter: brightness(1.3);
    background-repeat: no-repeat; background-position: center;
    background-image: conic-gradient(#1c191c, #402fb5 5%, #1c191c 14%, #1c191c 50%, #cf30aa 60%, #1c191c 64%);
    transition: all 2s;
}

/* 3. 深色背景层 */
#poda .darkBorderBg::before {
    content: ""; z-index: -2; text-align: center; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(82deg);
    position: absolute; width: 1500px; height: 1500px;
    background-repeat: no-repeat; background-position: center;
    background-image: conic-gradient(rgba(0,0,0,0), #18116a, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 50%, #6e1b60, rgba(0,0,0,0) 60%);
    transition: all 2s;
}

/* 4. 外部辉光层 */
#poda .glow { filter: blur(30px); opacity: 0.5; }
#poda .glow:before {
    content: ""; z-index: -2; text-align: center; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(60deg);
    position: absolute; width: 1500px; height: 1500px;
    background-repeat: no-repeat; background-position: center;
    background-image: conic-gradient(#000, #402fb5 5%, #000 38%, #000 50%, #cf30aa 60%, #000 87%);
    transition: all 2s;
}

/* --- 交互动画逻辑 (Hover & Focus) --- */
#poda:hover > .darkBorderBg::before { transform: translate(-50%, -50%) rotate(-98deg); }
#poda:hover > .glow::before { transform: translate(-50%, -50%) rotate(-120deg); }
#poda:hover > .white::before { transform: translate(-50%, -50%) rotate(-97deg); }
#poda:hover > .border::before { transform: translate(-50%, -50%) rotate(-110deg); }

#poda:focus-within > .darkBorderBg::before { transform: translate(-50%, -50%) rotate(442deg); transition: all 4s; }
#poda:focus-within > .glow::before { transform: translate(-50%, -50%) rotate(420deg); transition: all 4s; }
#poda:focus-within > .white::before { transform: translate(-50%, -50%) rotate(443deg); transition: all 4s; }
#poda:focus-within > .border::before { transform: translate(-50%, -50%) rotate(430deg); transition: all 4s; }

/* --- 输入框样式 --- */
#poda .poda-input {
    background-color: #010201;
    border: none;
    width: 100%;
    height: 100%;
    min-height: 180px;
    border-radius: 20px;
    color: white;
    padding: 1.5rem 80px 1.5rem 1.5rem;
    font-size: 16px;
    line-height: 1.6;
    resize: none;
    z-index: 2; /* 在背景之上 */
    position: relative;
    font-family: inherit;
}
#poda .poda-input::placeholder { color: #c0b9c0; }
#poda .poda-input:focus { outline: none; }

/* --- 遮罩特效 --- */
#poda #input-mask {
    pointer-events: none; width: 100px; height: 20px;
    position: absolute; top: 18px; left: 70px;
    background: linear-gradient(90deg, transparent, black);
    z-index: 3;
}
#poda #poda-main:focus-within > #input-mask { display: none; }

#poda #pink-mask {
    pointer-events: none; width: 30px; height: 20px;
    position: absolute; top: 10px; left: 20px;
    background: #cf30aa; filter: blur(20px); opacity: 0.8;
    transition: all 2s; z-index: 3;
}
#poda #poda-main:hover > #pink-mask { opacity: 0; }

/* --- 发送按钮 --- */
#poda #send-button {
    position: absolute; top: 1rem; right: 1rem; z-index: 10;
    height: 40px; width: 40px;
    background: linear-gradient(180deg, #161329, black, #1d1b4b);
    border-radius: 10px; border: 1px solid transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: #d6d6e6; transition: color 0.3s ease; padding: 0;
}
#poda #send-button:hover { color: #fff; }

/* 按钮的旋转边框 */
#poda .filterBorder {
    height: 44px; width: 44px;
    position: absolute; top: calc(1rem - 2px); right: calc(1rem - 2px);
    overflow: hidden; border-radius: 12px; z-index: 9;
    pointer-events: none;
}
#poda .filterBorder::before {
    content: ""; text-align: center; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    position: absolute; width: 200px; height: 200px;
    background-repeat: no-repeat; background-position: center;
    filter: brightness(1.35);
    background-image: conic-gradient(rgba(0, 0, 0, 0), #3d3a4f, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, #3d3a4f, rgba(0, 0, 0, 0) 100%);
    animation: poda-rotate 4s linear infinite;
}
@keyframes poda-rotate {
    100% { transform: translate(-50%, -50%) rotate(450deg); }
}