/* ===== 123ONE Design Override for PairDrop ===== */
/* Purple theme matching 123one.top design system */

body {
    /* Primary color - 123ONE Purple */
    --primary-color: #8B5CF6 !important;
    --paired-device-color: #10B981 !important;
    --public-room-color: #F59E0B !important;
    --accent-color: var(--primary-color) !important;
    --ws-peer-color: #EF4444 !important;
    
    /* Light theme - match 123ONE light mode */
    --lt-text-color: 10,9,13 !important;
    --lt-dialog-bg-color: #FFFFFF !important;
    --lt-bg-color: 255,255,255 !important;
    --lt-bg-color-secondary: #f5f3f7 !important;
    --lt-border-color: #cac7d1 !important;
    --lt-badge-color: #8B5CF6 !important;
    --lt-lang-hr-color: #e5e1ec !important;
    
    /* Dark theme - match 123ONE dark mode */
    --dt-text-color: 242,242,242 !important;
    --dt-dialog-bg-color: #1a1721 !important;
    --dt-bg-color: 13,11,18 !important;
    --dt-bg-color-secondary: #232227 !important;
    --dt-border-color: #4a4658 !important;
    --dt-badge-color: #a78bfa !important;
    --dt-lang-hr-color: #3d3950 !important;
}

/* Rounded corners matching 123ONE radius (12px) */
.panel.column { border-radius: 16px !important; }
.panel.row { border-radius: 12px !important; }
.btn-rounded { border-radius: 12px !important; }
.btn-small.btn-rounded { border-radius: 10px !important; }
.badge { border-radius: 0.5rem !important; }

/* Smooth shadow matching 123ONE */
[shadow="1"], [shadow="2"] {
    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.08),
                0 1px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Typography - match 123ONE */
body {
    font-family: "Noto Sans SC", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0.01em !important;
}

h2 { color: var(--primary-color) !important; font-weight: 600 !important; }
h3 { color: var(--primary-color) !important; font-weight: 600 !important; }

/* Button refinements */
.btn-primary {
    background: linear-gradient(135deg, #8B5CF6, #a78bfa) !important;
    color: white !important;
}
.btn:not([disabled]):hover:before,
.icon-button:hover:before {
    opacity: 0.15 !important;
}

/* Selection color */
::-moz-selection, ::selection {
    color: white !important;
    background: #8B5CF6 !important;
}

/* Transitions match 123ONE */
body, header *, .panel, .btn:before, .icon-button:before {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fix scrollbar to be subtle like 123ONE */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-thumb { 
    background: rgba(139, 92, 246, 0.3) !important; 
    border-radius: 3px !important; 
}

/* Header style tweaks */
header { background: transparent !important; }

/* Theme toggle area */
#theme-wrapper:hover::before {
    background: var(--primary-color) !important;
}

/* Discovery badges */
.badge-room-ip { --badge-color: var(--primary-color) !important; }

/* ===== 公共房间 & 配对功能 - 直接可见 ===== */

/* 底部 Footer 区域 - 始终可见、更显眼 */
footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: rgba(var(--bg-color, 255,255,255), 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid var(--primary-color) !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* 隐藏 footer 中的大 logo（节省空间） */
footer .logo {
    display: none !important;
}

/* 展开按钮 - 更大更明显 */
#expand {
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(135deg, #8B5CF6, #a78bfa) !important;
    border-radius: 12px !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
}

#expand:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4) !important;
}

#expand .icon {
    filter: brightness(0) invert(1) !important;
}

/* 公共房间徽章 - 更显眼 */
.badge-room-public-id {
    --badge-color: #F59E0B !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
}

/* 配对徽章 - 更显眼 */
.badge-room-secret {
    --badge-color: #10B981 !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

/* x-room 容器中的按钮 */
#x-room {
    padding: 10px 16px !important;
    background: rgba(var(--bg-color, 255,255,255), 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 14px !important;
    border: 1px solid var(--primary-color) !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15) !important;
    margin: 8px !important;
}

/* 房间操作按钮 */
#x-room .btn {
    margin: 4px 6px !important;
    font-size: 0.85rem !important;
}

/* 底部输入区域留出 footer 空间 */
#receive-text-area {
    margin-bottom: 80px !important;
}

/* 消息提示在 footer 上方 */
#notifications {
    bottom: 80px !important;
}

/* 移动端适配 */
@media (max-width: 640px) {
    footer {
        padding: 8px 10px !important;
        gap: 8px !important;
    }
    #expand {
        width: 38px !important;
        height: 38px !important;
    }
    .badge-room-public-id, .badge-room-secret {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }
}