/**
 * 输入框和按钮公共样式
 * 用于统一弹幕输入框、用户名按钮、发送按钮、私密聊天输入框和发送按钮的样式
 */

/* 主站/桌台统一尺寸变量（尽量复用主题与页面壳变量） */
:root {
    --ib-primary: var(--theme-primary, #ff6699);
    --ib-text: var(--theme-text, #ffffff);
    /* 与页面壳统一（danmu-page-common.css） */
    --ib-font: var(--dp-btn-font, var(--dp-fs-body, 14px));
    --ib-font-sm: var(--dp-fs-small, 13px);
    --ib-pad-y: var(--dp-btn-pad-y, 10px);
    --ib-pad-x: var(--dp-btn-pad-x, 16px);
    --ib-pad-x-md: 14px;
    --ib-pad-x-sm: 12px;
    --ib-radius: 999px;
    --ib-min-h: var(--dp-tap-min, 44px);
    --ib-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
}

/* ========== 弹幕输入框相关按钮样式 ========== */

/* 用户名按钮（.sender-input, .nickname-btn）和发送按钮（.send-btn）的公共样式 */
.sender-input,
.nickname-btn,
.send-btn,
#login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    align-self: stretch;
    font-size: var(--ib-font);
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    transition: all 0.3s ease;
    /* 移动端触控友好：保证最小点击高度 */
    min-height: var(--ib-min-h);
    touch-action: manipulation;
}

/* 用户名按钮样式 */
.sender-input,
.nickname-btn {
    background: var(--ib-primary);
    color: var(--ib-text);
    padding: var(--ib-pad-y) var(--ib-pad-x);
    border-radius: var(--ib-radius);
    box-shadow: var(--ib-shadow);
    border: none;
    cursor: default;
    /* 昵称可能很长：避免把输入框挤没 */
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 发送按钮样式 */
.send-btn {
    padding: var(--ib-pad-y) var(--ib-pad-x);
    border: none;
    border-radius: var(--ib-radius);
    background: var(--ib-primary);
    color: var(--ib-text);
    cursor: pointer;
    box-shadow: var(--ib-shadow);
}

.send-btn:active {
    transform: scale(0.96);
    background: linear-gradient(45deg, #ee3377, #dd2266);
    box-shadow: 0 2px 6px rgba(255, 102, 153, 0.4);
}

.send-btn:disabled {
    background: #444;
    cursor: not-allowed;
    box-shadow: none;
}

/* 登录按钮样式 */
#login-btn {
    background: var(--ib-primary);
    color: var(--ib-text);
    padding: var(--ib-pad-y) var(--ib-pad-x);
    border-radius: var(--ib-radius);
    box-shadow: var(--ib-shadow);
    border: none;
    cursor: pointer;
    font-weight: bold;
}

/* ========== 私密聊天输入框相关按钮样式 ========== */

/* 私密聊天：长文本按钮（样式与发送按钮保持同一主题体系） */
.pm-longtext-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 0 var(--ib-pad-x-md);
    min-width: 76px;
    min-height: var(--ib-min-h);
    background: var(--ib-primary);
    color: var(--ib-text);
    border: none;
    border-radius: 999px;
    font-size: var(--ib-font);
    font-weight: bold;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    box-sizing: border-box;
    touch-action: manipulation;
}

.pm-longtext-btn:active {
    transform: scale(0.96);
    background: linear-gradient(45deg, #ee3377, #dd2266);
    box-shadow: 0 2px 6px rgba(255, 102, 153, 0.4);
}

.pm-longtext-btn:disabled {
    background: #444;
    cursor: not-allowed;
    box-shadow: none;
}

/* 私密聊天发送按钮样式 */
.private-message-send-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 0 var(--ib-pad-x-md);
    min-width: 68px;
    min-height: var(--ib-min-h);
    background: var(--ib-primary);
    color: var(--ib-text);
    border: none;
    border-radius: 999px;
    font-size: var(--ib-font);
    font-weight: bold;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    box-sizing: border-box;
}

.private-message-send-btn:hover {
    background: linear-gradient(45deg, #ee3377, #dd2266);
}

.private-message-send-btn:disabled {
    background: #444;
    cursor: not-allowed;
}

/* ========== 响应式样式 ========== */

/* 中等屏幕（平板） */
@media (max-width: 768px) {
    .sender-input,
    .nickname-btn,
    .send-btn,
    #login-btn {
        font-size: var(--ib-font);
        padding: 9px var(--ib-pad-x-md);
    }
    
    .private-message-send-btn {
        font-size: var(--ib-font);
        padding: 0 var(--ib-pad-x-md);
    }
    .pm-longtext-btn {
        font-size: var(--ib-font);
        padding: 0 var(--ib-pad-x-md);
    }
}

/* 小屏幕（手机） */
@media (max-width: 480px) {
    .sender-input,
    .nickname-btn,
    .send-btn,
    #login-btn {
        font-size: var(--ib-font);
        padding: 8px var(--ib-pad-x-sm);
    }
    
    .private-message-send-btn {
        font-size: var(--ib-font);
        padding: 0 var(--ib-pad-x-sm);
    }
    .pm-longtext-btn {
        font-size: var(--ib-font);
        padding: 0 var(--ib-pad-x-sm);
    }
}

/* 超小屏幕 */
@media (max-width: 375px) {
    .sender-input,
    .nickname-btn,
    .send-btn,
    #login-btn {
        font-size: var(--ib-font);
        padding: 8px var(--ib-pad-x-sm);
    }
    
    .private-message-send-btn {
        font-size: var(--ib-font-sm);
        padding: 0 var(--ib-pad-x-sm);
    }
    .pm-longtext-btn {
        font-size: var(--ib-font-sm);
        padding: 0 var(--ib-pad-x-sm);
    }
}

/* ========== 敏感词提示（主站/桌台共用） ========== */
/* 由 /js/banword-common.js 的 showBanwordWarning 注入 .banword-warning-pop 到输入框父容器中 */
.banword-warning-pop {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #ff4444;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 4px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}