/* ======================================== */
/* ✅ 全局模式控制（Unity 模式 / 网页模式） */
/* ======================================== */

/* Unity 模式：禁用所有右键、选择、拖拽 */
body.unity-mode {
    /* 阻止默认右键菜单 */
    -webkit-touch-callout: none !important;
    /* 阻止文本选择 */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    /* 阻止图片拖拽 */
    -webkit-user-drag: none !important;
    /* 阻止高亮 */
    -webkit-tap-highlight-color: transparent !important;
}

/* 网页模式：允许正常交互 */
body.web-mode {
    /* 允许右键菜单 */
    -webkit-touch-callout: default !important;
    /* 允许文本选择 */
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* 默认状态（无类）- 使用 Unity 模式 */
body:not(.web-mode) {
    -webkit-touch-callout: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ======================================== */
/* 全局样式 */
/* ======================================== */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #ffa02b 0%, #c94300 100%);
    height: 100vh;
    overflow: hidden;
}

#app {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideOut {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

/* 登录表单 */
.login-form-container {
    max-width: 450px;
    margin: 50px auto;
    padding: 40px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    animation: fadeIn 0.5s ease-out;
}

.login-form-container h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-size: 24px;
}

.tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 25px;
}

.tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
    color: #666;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    font-weight: 500;
}

.tab:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.server-config {
    margin-bottom: 25px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.server-config label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

.server-input-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: row;
}

.server-input-group input {
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
}

.server-input-group input:first-child {
    flex: 2;
}

.server-input-group input:last-child {
    flex: 1;
}

button[type="submit"] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
}

button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

button[type="submit"]:active {
    transform: translateY(0);
}

/* 聊天视图 */
.chat-view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    padding: 20px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 50%);
    z-index: 999;
}

.chat-header h1 {
    font-size: 25px;
    font-weight: 500;
    color: #ffffff;
}

.logout-button {
    padding: 10px 20px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

.logout-button:hover {
    background: rgba(255,255,255,0.3);
}

/* 消息容器 */
.message-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.message-container::-webkit-scrollbar {
    width: 8px;
}

.message-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.message-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.message-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 消息气泡 */
.message-bubble {
    display: flex;
    margin-bottom: 15px;
    animation: fadeIn 0.3s ease-out;
}

.message-bubble.sent {
    justify-content: flex-end;
}

.message-bubble.received {
    justify-content: flex-start;
}

.bubble-content {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 18px;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    min-height: 40px; /* 统一最小高度 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.message-bubble.sent .bubble-content {
    background: linear-gradient(135deg, #ffa02b 0%, #c94300 100%);
    color: white;
    border-bottom-right-radius: 4px;
    border: 2px solid #fff;
}

.message-bubble.received .bubble-content {
    background: white;
    color: #333;
    border-bottom-left-radius: 4px;
}

.message-text {
    line-height: 1.6;
    white-space: pre-wrap;
    font-size: 15px;
}

.typing-cursor {
    animation: blink 1s infinite;
    margin-left: 2px;
    font-weight: bold;
}

.message-time {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    margin-top: 6px;
    text-align: right;
}

.message-bubble.received .message-time {
    color: #999;
    text-align: left;
}

.message-voice {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    transition: background 0.3s;
}

.message-voice:hover {
    background: rgba(255,255,255,0.1);
}

.message-function {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #1976d2;
}

/* 输入区域 */
.input-container {
    padding: 20px;
    background: #e57216;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    z-index: 999;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 50%);
}

.chat-input-wrapper {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s;
    background-color: white;
}

.chat-input-wrapper:focus-within {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.chat-input {
    width: 100% !important;
    min-height: 1rem !important;
    padding: 12px 16px;
    border-radius: 0;
    border: none !important;
    font-size: 15px;
    font-family: inherit;
    outline: none !important;
    box-sizing: border-box;
    position: relative;
    resize: none;
    background: none;
}

.chat-input:focus {
    border: none;
    box-shadow: none;
}

.voice-button {
    background: #f0f0f000;
    border: solid 2px #ffffff00;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none !important;
}

.voice-button:hover {
    transform: scale(1.05);
    border: solid 2px #fff;
}

.voice-button.recording {
    background: #f44336;
    animation: pulse 1.5s infinite;
}

/* 语音按钮 SVG 图标样式 */
.voice-button img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.send-button {
    padding: 11px 22px;
    background: linear-gradient(135deg, #ffa02b 0%, #c94300 100%);
    color: white;
    border: 2px solid #fff;
    border-radius: 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s;
    -webkit-user-select: none !important;
}

.send-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.send-button:active {
    transform: translateY(0);
}

/* 通知 */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 14px 20px;
    border-radius: 6px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideIn 0.3s ease-out;
    max-width: 400px;
}

.notification-info {
    background: #2196f3;
}

.notification-success {
    background: #4caf50;
}

.notification-error {
    background: #f44336;
}

/* 设置按钮 */
.settings-button {
    padding: 10px 20px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
}

.settings-button:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

/* 全屏按钮 */
.fullscreen-button {
    padding: 7px 9px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s;
    line-height: 20px;
    text-align: center;
}

.fullscreen-button:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

/* 设置面板 */
.settings-panel {
    position: fixed;
    top: 0;
    right: -100vw;
    width: 100vw;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: right 0.4s ease-out;
    display: flex;
    flex-direction: column;
}

.settings-panel.open {
    right: 0;
}

.settings-header {
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-header h3 {
    font-size: 20px;
    font-weight: 500;
}

.settings-close {
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s;
}

.settings-close:hover {
    background: rgba(255,255,255,0.2);
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.settings-section {
    margin-bottom: 30px;
}

.settings-section h4 {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #667eea;
}

/* 折叠区域样式 */
.collapsible-section {
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: visible;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: linear-gradient(135deg, #ffa02b 0%, #c94300 100%);
    color: white;
    user-select: none;
    /* transition: all 0.3s; */
    border-radius: 8px;
}

.section-header:hover {
    /* background: linear-gradient(135deg, #ffa02b 0%, #c94300 100%); */
    border: 2px solid #fff;
    padding: 13px 18px;
}

.section-header-left {
    display: flex;
    align-items: center;
    flex: 1;
    cursor: pointer;
}

.section-header-right {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.section-header h4 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: white;
}

.toggle-icon {
    font-size: 14px;
    margin-right: 10px;
    transition: transform 0.3s;
    display: inline-block;
    width: 20px;
    text-align: center;
}

/* 更新开关样式 */
.update-switch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.update-switch {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.update-switch-slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    transition: background 0.3s;
    cursor: pointer;
}

.update-switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.update-switch:checked + .update-switch-slider {
    background: #4caf50;
}

.update-switch:checked + .update-switch-slider::before {
    transform: translateX(20px);
}

.update-switch-text {
    font-size: 13px;
    color: white;
    font-weight: 500;
    white-space: nowrap;
}

.section-content {
    padding: 20px;
    background: #fafafa;
    border-top: 1px solid #e0e0e0;
    border-radius: 0 0 8px 8px;
}

.settings-fields {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.settings-section .form-group {
    margin-bottom: 20px;
}

.settings-section .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

.settings-section .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s;
}

.settings-section .form-control:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.settings-section .form-control.error {
    border-color: #f44336;
}

.settings-section textarea.form-control {
    resize: vertical;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
}

.checkbox-label span {
    font-weight: 500;
}

.form-description {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    margin-left: 28px;
}

.number-group .form-control {
    max-width: 200px;
}

.vad-params-group {
    margin-left: 20px;
    padding-left: 15px;
    border-left: 3px solid #e0e0e0;
}

/* 头部按钮容器 */
.header-button-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logout-button,
.settings-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    transition: all 0.3s;
}

.logout-button {
    background-color: #dc3545;
    border: none;
}

.logout-button:hover {
    background-color: #c82333;
}

.settings-button {
    background-color: #6c757d;
    font-size: 16px;
    padding: 8px;
    width: 36px;
    border: none;
}

.settings-button:hover {
    background-color: #5a6268;
}

/* 登录容器 */
.login-container {
    max-width: 450px;
    margin: 50px auto;
    padding: 40px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    animation: fadeIn 0.5s ease-out;
}

.login-title {
    text-align: center;
    margin-bottom: 10px;
    color: #333;
    font-size: 28px;
}

.login-subtitle {
    text-align: center;
    margin-bottom: 30px;
    color: #666;
    font-size: 14px;
}

.login-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 15px;
    transition: border-color 0.3s;
}

.login-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.auth-type-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.auth-type-container input[type="radio"] {
    margin-right: 5px;
}

.auth-type-container label {
    cursor: pointer;
    font-size: 14px;
    color: #555;
}

.auth-input-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.login-button {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #ffa02b 0%, #c94300 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.login-button:active {
    transform: translateY(0);
}

.login-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.login-status {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    min-height: 20px;
}

/* ==================== 三种消息类型的视觉区分 ==================== */



/* 语音消息 - 特殊样式 */
.message-bubble.message-voice .bubble-content {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%) !important;
    color: white !important;
    cursor: pointer;
    transition: all 0.3s ease;
    /* 移除特殊的 padding 和 min-width，使用统一尺寸 */
}

.message-bubble.message-voice .bubble-content:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.message-bubble.message-voice .bubble-content:active {
    transform: scale(0.98);
}

.message-bubble.message-voice.sent .bubble-content {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%) !important;
}

.message-bubble.message-voice.received .bubble-content {
    background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%) !important;
}

.message-voice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px; /* 与文本消息字体大小一致 */
    line-height: 1.4; /* 与文本消息行高一致 */
    padding: 0; /* 移除额外 padding */
}

.message-voice.playing {
    animation: voicePulse 1.5s ease-in-out infinite;
}

@keyframes voicePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.message-voice .voice-icon {
    font-size: 16px;
}

.message-voice .voice-label {
    font-weight: 400; /* 与文本消息字重一致 */
}

.message-voice .voice-duration {
    opacity: 0.9;
    font-size: 14px;
}

.message-voice .play-indicator {
    margin-left: auto;
    font-size: 14px;
    transition: transform 0.2s;
}

.message-voice:hover .play-indicator {
    transform: scale(1.2);
}

.message-bubble.message-voice .message-time {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 函数调用消息 - 特殊样式 */
.message-bubble.message-function .bubble-content {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
    color: white !important;
    border-left: 4px solid #e65100;
    /* 移除特殊的 padding，使用统一尺寸 */
}

.message-bubble.message-function.sent .bubble-content {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
}

.message-bubble.message-function.received .bubble-content {
    background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%) !important;
}

.message-function {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: white !important;
    font-size: 14px;
    line-height: 1.4;
    flex-wrap: wrap;
    word-break: break-all;
    white-space: normal;
    width: 100%;
}

.message-function .function-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.message-function .function-name {
    font-weight: 600;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.message-function .function-params {
    display: inline-flex;
    gap: 0;
    flex-wrap: wrap;
    align-items: center;
}

.message-function .param-item {
    display: inline-flex;
    gap: 0;
    align-items: center;
    white-space: nowrap;
}

.message-function .param-key {
    font-weight: 500;
    opacity: 0.95;
}

.message-function .param-value {
    opacity: 0.9;
    font-style: italic;
}

.message-bubble.message-function .message-time {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 消息类型图标动画 */
.message-voice .voice-icon,
.message-function .function-icon {
    display: inline-block;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ==================== Unity 视图样式 ==================== */

.unity-view {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

.unity-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto;
}

.unity-canvas {
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
    border: none;
    margin: 0;
    padding: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto;
}

/* ======================================== */
/* ✅ 全局右键菜单和选择控制 */
/* ======================================== */

/* Unity 主界面（控制按钮未打开时）- 禁用所有交互 */
.unity-view {
    /* 禁用右键菜单 */
    -webkit-touch-callout: none !important;
    /* 禁用文本选择 */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    /* 禁用拖拽 */
    -webkit-user-drag: none !important;
    /* 阻止默认右键行为 */
    pointer-events: auto !important;
}

/* Unity 视图下的所有元素都禁用选择 */
.unity-view * {
    /* 禁用所有元素的选择 */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    /* 禁用拖拽 */
    -webkit-user-drag: none !important;
    /* 禁止高亮 */
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

/* ✅ 修复：输入框和文本域始终允许文字选择和键盘输入，不受模式影响 */
body input,
body textarea,
body [contenteditable],
.floating-panel input,
.floating-panel textarea,
.floating-panel [contenteditable] {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* 聊天/配置页面（控制按钮已打开）- 保留正常交互 */
.chat-view,
.chat-view * {
    /* 允许右键菜单 */
    -webkit-touch-callout: default !important;
}

/* ======================================== */
/* ✅ 移动端视频播放优化 */
/* ======================================== */

@media screen and (max-width: 768px) {
    .unity-view {
        /* 防止 iOS Safari 缩放 */
        touch-action: manipulation;
        /* 防止双击缩放 */
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    .unity-container {
        /* 强制 GPU 加速渲染 */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        /* 确保视频层在正确层级 */
        contain: layout style paint;
    }
    
    .unity-canvas {
        /* 防止 Android WebView 悬浮播放 */
        -webkit-playsinline: 1;
        /* 禁用自动全屏 */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ✅ 针对小米浏览器等 Android WebView 的特殊处理 */
@supports (-webkit-touch-callout: none) {
    .unity-canvas video {
        /* 禁止画中画模式 */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* 强制内联播放 */
        -webkit-playsinline: 1;
        /* 禁止自动悬浮 */
        position: static !important;
        transform: none !important;
    }
}

.unity-loading-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.unity-loading-text {
    color: white;
    font-size: 18px;
    margin-bottom: 20px;
}

.unity-progress-bar-empty {
    width: 300px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #fff;
}

.unity-progress-bar-full {
    height: 100%;
    background: linear-gradient(135deg, #ffa02b 0%, #c94300 100%);
    border-radius: 10px;
    transition: width 0.3s;
    width: 0%;
}

/* ==================== 控制按钮样式 ==================== */

.control-button {
    position: fixed;
    /* ✅ 使用 transform 定位，left/top 保持 0 */
    left: 0;
    top: 0;
    transform: translate(0, 0);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6c04 0%, #ff6a00 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    user-select: none;
    overflow: hidden;
    /* ✅ 现代化优化 */
    will-change: transform;
    contain: layout style paint;
    touch-action: none;
}

/* 控制按钮 SVG 图标默认颜色 #ff6c04 */
.control-button img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(2000%) hue-rotate(5deg) brightness(105%);
    transition: filter 0.3s ease;
}

.control-button:hover img {
    filter: brightness(0) saturate(100%) invert(85%) sepia(90%) saturate(1200%) hue-rotate(5deg) brightness(110%);
}


.control-button::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: rgb(0 0 0);
    z-index: -1;
}

.control-button:hover {
    transform: translate(var(--button-x, 0), var(--button-y, 0)) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.control-button:active {
    transform: translate(var(--button-x, 0), var(--button-y, 0)) scale(0.95);
}

.control-button.dragging {
    cursor: grabbing;
    opacity: 0.9;
    transition: none;  /* ✅ 拖拽时禁用过渡 */
}

.control-button.recording {
    background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
    animation: recordingPulse 1.5s ease-in-out infinite;
}

@keyframes recordingPulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(239, 83, 80, 0.5);
    }
    50% {
        box-shadow: 0 4px 20px rgba(239, 83, 80, 0.8);
    }
}

/* ==================== 控制菜单样式 ==================== */

.control-menu {
    position: fixed;
    display: flex;
    /* flex-direction 由 JS 动态设置（column / column-reverse） */
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: black;
    /* border-radius 由 JS 动态设置（固定像素值 = 容器宽/2，靠近按钮的角归零） */
    border-radius: 0;
    border: 5px solid #ff6b02;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 999;
    /* width 由 JS 动态设置（与控制按钮等宽） */
    box-sizing: border-box;
    animation: menuFadeIn 0.3s ease-out;
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.control-menu-item {
    /* 宽度撑满容器（减去左右 padding 后的可用宽），高度 = 宽度，形成正方形 */
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgb(255 255 255 / 0%);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0;
}

/* 菜单项 SVG 图标默认颜色 #ff6c04 */
.control-menu-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
    filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(2000%) hue-rotate(5deg) brightness(105%);
    transition: filter 0.3s ease;
}

.control-menu-item:hover img {
    filter: brightness(0) saturate(100%) invert(85%) sepia(90%) saturate(1200%) hue-rotate(5deg) brightness(110%);
}

.control-menu-item:hover {
    background: rgba(255, 255, 255, 0);
    transform: scale(1.1);
}

.control-menu-item:active {
    transform: scale(0.95);
}

/* ==================== 悬浮面板样式 ==================== */

.floating-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff00;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.95);
}

.floating-panel.visible {
    opacity: 1;
    transform: scale(1);
}

/* ==================== 尺寸调整手柄样式 ==================== */

.floating-panel-resize-handles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* 通用手柄样式 */
.resize-handle {
    position: absolute;
    background: rgba(255, 107, 2, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    pointer-events: auto;
}

/* 四角手柄 */
.resize-handle.corner {
    /* ✅ 四角手柄尺寸 = 圆角值 + 边宽 */
    width: calc(var(--border-radius, 10px) + var(--handle-width, 10px));
    height: calc(var(--border-radius, 10px) + var(--handle-width, 10px));
}

.resize-handle.corner.top-left {
    top: calc(var(--handle-width,10px) * -1);
    left: calc(var(--handle-width,10px) * -1);
    cursor: nwse-resize;
    border-radius: 100% 0 0 0;
}

.resize-handle.corner.top-right {
    top: calc(var(--handle-width,10px) * -1);
    right: calc(var(--handle-width,10px) * -1);
    cursor: nesw-resize;
    border-radius: 0 100% 0 0;
}

.resize-handle.corner.bottom-left {
    bottom: calc(var(--handle-width,10px) * -1);
    left: calc(var(--handle-width,10px) * -1);
    cursor: nesw-resize;
    border-radius: 0 0 0 100%;
}

.resize-handle.corner.bottom-right {
    bottom: calc(var(--handle-width,10px) * -1);
    right: calc(var(--handle-width,10px) * -1);
    cursor: nwse-resize;
    border-radius: 0 0 100% 0;
}

/* 四边手柄 */
.resize-handle.edge {
    background: rgba(255, 107, 2, 0.2);
}

.resize-handle.edge.top {
    top: calc(var(--handle-width,10px) * -1);
    left: var(--border-radius, 10px);  /* ✅ 直接使用圆角值 */
    right: var(--border-radius, 10px); /* ✅ 直接使用圆角值 */
    height: var(--handle-width,10px);
    cursor: ns-resize;
}

.resize-handle.edge.bottom {
    bottom: calc(var(--handle-width,10px) * -1);
    left: var(--border-radius, 10px);  /* ✅ 直接使用圆角值 */
    right: var(--border-radius, 10px); /* ✅ 直接使用圆角值 */
    height: var(--handle-width,10px);
    cursor: ns-resize;
}

.resize-handle.edge.left {
    left: calc(var(--handle-width,10px) * -1);
    top: var(--border-radius, 10px);  /* ✅ 直接使用圆角值 */
    bottom: var(--border-radius, 10px);  /* ✅ 直接使用圆角值 */
    width: var(--handle-width,10px);
    cursor: ew-resize;
}

.resize-handle.edge.right {
    right: calc(var(--handle-width,10px) * -1);
    top: var(--border-radius, 10px);  /* ✅ 直接使用圆角值 */
    bottom: var(--border-radius, 10px);  /* ✅ 直接使用圆角值 */
    width: var(--handle-width,10px);
    cursor: ew-resize;
}

/* Hover 状态 */
.resize-handle:hover {
    opacity: 0.5;
    background: rgba(255, 107, 2, 0.5);
}

/* 拖拽中状态 */
.resize-handle.resizing {
    opacity: 0.7;
    background: rgba(255, 107, 2, 0.7);
}

.floating-panel-header {
    padding: 20px;
    background: linear-gradient(135deg, #ffa02b 0%, #c94300 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgb(0 0 0 / 50%);
    z-index: 999;
}

.floating-panel-title {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

.floating-panel-buttons {
    display: flex;
    gap: 10px;
}

.floating-panel-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.floating-panel-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.floating-panel-button:active {
    transform: scale(0.95);
}

.floating-panel-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: space-between;
    align-items: stretch;
    background: #ffffff82;
    backdrop-filter: blur(20px);
}

/* 响应式 */
@media (max-width: 768px) {
    .login-form-container,
    .login-container {
        margin: 20px;
        padding: 30px 20px;
    }
    
    .bubble-content {
        max-width: 85%;
    }
    
    .chat-header {
        padding: 15px 20px;
    }
    
    .chat-header h1 {
        font-size: 18px;
    }

    .settings-panel {
        width: 100%;
        right: -100%;
    }
    
    .header-button-container {
        gap: 5px;
    }
    
    .logout-button,
    .settings-button {
        padding: 6px 12px;
        font-size: 12px;
        height: 32px;
    }
    
    .message-bubble.message-voice .bubble-content,
    .message-bubble.message-function .bubble-content {
        min-width: 150px;
    }
    
    .control-button {
        width: 78px;
        height: 78px;
        font-size: 31px;
    }
    
    /* control-menu-item 尺寸由容器宽度（= 控制按钮宽度）驱动，无需在此覆盖 */
}

/* ==================== 浮动面板窗口模式样式 ==================== */

.floating-panel.window-mode {
    width: 80%;
    height: 80%;
    max-width: 800px;
    max-height: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    border-radius: 10px;
    /* ✅ 移除 overflow: hidden，让手柄可以外扩显示 */
    box-shadow: 0px 0px 10px #0000007d;
}

/* ✅ 内容包装容器 - 用于实现圆角裁切 */
.floating-panel.window-mode .floating-panel-content-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.floating-panel.window-mode.dragging {
    cursor: grab;
    transition: none;
}

.floating-panel.window-mode .floating-panel-header {
    cursor: grab;
    user-select: none;
}

.floating-panel.window-mode .floating-panel-header:active {
    cursor: grabbing;
}

/* 全屏模式样式 */
.floating-panel.fullscreen-mode {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
}

/* ✅ 全屏模式下的内容包装容器 */
.floating-panel.fullscreen-mode .floating-panel-content-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0; /* ✅ 全屏模式下不需要圆角 */
    display: flex;
    flex-direction: column;
}

/* 禁用全屏按钮（窗口模式） */
.floating-panel.window-mode .fullscreen-button {
    display: none;
}

/* 窗口/全屏切换按钮 */
.floating-panel .mode-toggle-button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-panel .mode-toggle-button:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.floating-panel .mode-toggle-button:active {
    transform: scale(0.95);
}

/* 拖拽时的样式 */
.floating-panel.dragging {
    cursor: grab;
    transition: none;
}

.floating-panel.dragging .floating-panel-header {
    cursor: grab;
}

.floating-panel.dragging .floating-panel-header:active {
    cursor: grabbing;
}

/* ======================================== */
/* 输入区域激活状态 */
/* ======================================== */

/* 输入区域激活状态 */
[data-input-zone].active {
    outline: 2px solid #4CAF50;
    outline-offset: -2px;
}

/* Web区域激活 */
[data-input-zone="web"].active {
    z-index: 9999;
}

/* Unity区域激活 */
[data-input-zone="unity"].active {
    z-index: 1;
}

/* Unity Canvas特殊样式 */
#unity-canvas {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 输入区域过渡效果 */
[data-input-zone] {
    transition: outline 0.2s ease, z-index 0.2s ease;
}