*{margin:0;padding:0;box-sizing:border-box;}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#0f172a 100%);min-height:100vh;padding:20px;color:#fff;}.container{max-width:1400px;margin:0 auto;}.header{background:linear-gradient(90deg,#2563eb 0%,#7c3aed 100%);padding:30px;border-radius:12px 12px 0 0;box-shadow:0 4px 20px rgba(0,0,0,0.3);}.header h1{font-size:28px;margin-bottom:5px;display:flex;align-items:center;gap:12px;}.header p{color:#bfdbfe;font-size:14px;}.connection-status{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,0.3);padding:6px 12px;border-radius:20px;font-size:13px;margin-top:10px;}.status-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;}.status-dot.connected{background:#22c55e;}.main-content{background:rgba(30,41,59,0.5);backdrop-filter:blur(10px);border:1px solid rgba(59,130,246,0.3);border-radius:0 0 12px 12px;padding:30px;display:grid;grid-template-columns:350px 1fr;gap:30px;}.sidebar{display:flex;flex-direction:column;gap:20px;}.card{background:rgba(51,65,85,0.5);border:1px solid rgba(71,85,105,0.5);border-radius:8px;padding:20px;}.card-header{display:flex;align-items:center;gap:8px;margin-bottom:15px;font-weight:600;font-size:16px;}.key-display{background:#0f172a;border-radius:6px;padding:12px;word-break:break-all;font-family:"Courier New",monospace;font-size:11px;color:#4ade80;margin-bottom:10px;}.fingerprint{font-size:11px;color:#94a3b8;}.fingerprint span{color:#60a5fa;font-family:"Courier New",monospace;}.info-box{background:rgba(30,58,138,0.3);border:1px solid rgba(59,130,246,0.3);border-radius:8px;padding:15px;}.sound-toggle{display:flex;align-items:center;justify-content:space-between;background:rgba(51,65,85,0.5);border:1px solid rgba(71,85,105,0.5);border-radius:6px;padding:10px 12px;margin-top:10px;cursor:pointer;transition:all 0.2s;}.sound-toggle:hover{background:rgba(71,85,105,0.5);}.sound-toggle-label{display:flex;align-items:center;gap:8px;font-size:13px;}.toggle-switch{position:relative;width:44px;height:24px;background:#475569;border-radius:12px;transition:background 0.3s;}.toggle-switch.active{background:#2563eb;}.toggle-slider{position:absolute;top:2px;left:2px;width:20px;height:20px;background:white;border-radius:50%;transition:transform 0.3s;}.toggle-switch.active .toggle-slider{transform:translateX(20px);}.info-title{font-size:12px;font-weight:600;color:#93c5fd;margin-bottom:10px;}.info-list{font-size:12px;color:#cbd5e1;line-height:1.8;list-style:none;padding-left:0;}.info-list li.me{font-weight:bold;color:#4ade80;}.info-list li.clickable{cursor:pointer;transition:all 0.2s;padding:4px 8px;border-radius:4px;margin:2px 0;}.info-list li.clickable:hover{background:rgba(59,130,246,0.2);color:#60a5fa;}.info-list li.selected{background:rgba(59,130,246,0.3);color:#60a5fa;font-weight:600;}.chat-mode-indicator{background:rgba(59,130,246,0.2);border:1px solid rgba(59,130,246,0.4);border-radius:6px;padding:8px 12px;margin-bottom:15px;font-size:12px;display:flex;align-items:center;gap:8px;}.chat-mode-indicator .close-btn{margin-left:auto;cursor:pointer;padding:2px 8px;background:rgba(239,68,68,0.3);border-radius:4px;font-size:11px;}.chat-mode-indicator .close-btn:hover{background:rgba(239,68,68,0.5);}.chat-area{display:flex;flex-direction:column;height:600px;background:rgba(51,65,85,0.3);border:1px solid rgba(71,85,105,0.5);border-radius:8px;overflow:hidden;}.messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:15px;}.message{max-width:70%;animation:slideIn 0.3s ease;position:relative;padding-top:18px;}@keyframes slideIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.typing-indicator{animation:pulse 1.5s ease-in-out infinite;}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.6;}}.message.system{align-self:center;max-width:90%;padding-top:0;}.system-text{background:rgba(71,85,105,0.5);border-radius:20px;padding:8px 16px;font-size:12px;color:#cbd5e1;text-align:center;opacity:1;visibility:visible;animation:fadeOut 7s forwards;}@keyframes fadeOut{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-100px);display:none;}}.message.sent{align-self:flex-end;}.message.received{align-self:flex-start;}.message-bubble{padding:12px 16px;border-radius:12px;margin-bottom:6px;}.message-bubble button{display:flex;justify-content:center;align-items:center;}.message-sender{font-size:11px;position:absolute;top:0;font-weight:600;}.sent .message-sender{right:0;color:#bfdbfe;}.received .message-sender{left:0;color:#a7f3d0;}.sent .message-bubble{background:#2563eb;border-bottom-right-radius:4px;}.sent.private .message-bubble{background:#3b4b6b;border:1px solid #5b6b8b;}.received .message-bubble{background:#475569;border-bottom-left-radius:4px;}.received.private .message-bubble{background:#3b4560;border:1px solid #5b6580;}.message-text{font-size:14px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word;}.message-text a{color:#60a5fa;text-decoration:underline;font-weight:500;transition:color 0.2s;}.message-text a:hover{color:#93c5fd;}.sent .message-text a{color:#bfdbfe;}.sent .message-text a:hover{color:#dbeafe;}.message-time{font-size:11px;color:#94a3b8;}.private-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(71,85,105,0.5);border:1px solid rgba(100,116,139,0.6);border-radius:8px;padding:3px 8px;font-size:9px;font-weight:600;color:#94a3b8;letter-spacing:0.5px;}.sent .private-badge{float:right;}.received .private-badge{float:left;}.input-area{border-top:1px solid rgba(71,85,105,0.5);padding:20px;display:flex;gap:12px;}.message-input{flex:1;background:#1e293b;color:#fff;border:1px solid #475569;border-radius:8px;padding:12px 16px;font-size:14px;}.message-input:focus{outline:none;border-color:#3b82f6;}button{padding:12px 24px;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:8px;}.btn-primary{background:#2563eb;color:#fff;}.btn-primary:hover:not(:disabled){background:#1d4ed8;}button:disabled{opacity:0.5;cursor:not-allowed;}.icon{width:20px;height:20px;}@media (max-width:1024px){.main-content{grid-template-columns:1fr;}}.btn-voice{background:#3b82f6;border:none;border-radius:12px;padding:12px 16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;margin-right:10px;}.btn-voice:hover{background:#2563eb;transform:scale(1.05);}.btn-voice:active{background:#ef4444;transform:scale(0.95);}.btn-voice .icon{width:24px;height:24px;}.input-area{display:flex;gap:10px;padding:15px;background:#1e293b;border-top:1px solid #334155;}.header{position:relative;}.security-badge{position:absolute;top:1.5rem;right:1.5rem;background:linear-gradient( 135deg,rgba(16,185,129,0.1),rgba(59,130,246,0.1) );border:1px solid rgba(16,185,129,0.3);border-radius:12px;padding:0.75rem 1rem;cursor:pointer;transition:all 0.3s ease;backdrop-filter:blur(10px);display:flex;align-items:center;gap:0.5rem;}.security-badge:hover{background:linear-gradient( 135deg,rgba(16,185,129,0.2),rgba(59,130,246,0.2) );border-color:rgba(16,185,129,0.5);transform:translateY(-2px);box-shadow:0 4px 12px rgba(16,185,129,0.2);}.security-icon{font-size:1.2rem;animation:pulse 2s ease-in-out infinite;}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.6;}}.security-text{display:flex;flex-direction:column;gap:0.15rem;}.security-title{font-size:0.75rem;color:#10b981;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}.security-subtitle{font-size:0.7rem;color:#94a3b8;}.security-dropdown{position:absolute;top:4.5rem;right:1.5rem;background:rgba(15,23,42,0.98);border:1px solid rgba(16,185,129,0.3);border-radius:12px;padding:1rem;min-width:320px;max-width:400px;display:none;z-index:1000;backdrop-filter:blur(20px);box-shadow:0 10px 40px rgba(0,0,0,0.5);animation:slideDown 0.3s ease;}@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}.security-dropdown.show{display:block;}.security-dropdown-header{font-size:0.9rem;color:#10b981;font-weight:600;margin-bottom:0.75rem;}.security-feature{display:flex;align-items:start;gap:0.5rem;padding:0.5rem 0;color:#cbd5e1;font-size:0.85rem;line-height:1.4;}.security-feature-icon{color:#10b981;font-size:0.75rem;margin-top:0.15rem;flex-shrink:0;}.security-divider{height:1px;background:linear-gradient( to right,transparent,rgba(16,185,129,0.3),transparent );margin:0.75rem 0;}