*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;background:linear-gradient(to bottom,#b8d4e8,#a8c8dd);min-height:100vh;display:flex;flex-direction:column}.header{display:flex;justify-content:space-between;align-items:center;padding:15px 30px;background:transparent}.logo{font-size:28px;font-weight:bold;cursor:pointer}.logo-side{color:#2b7cd3}.logo-chat{color:#e63995}.header-right{display:flex;align-items:center;gap:15px}.ad-space{padding:10px 30px;color:#666;font-size:12px}.main-container{flex:1;display:flex;justify-content:center;align-items:center;padding:20px}.chat-card{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);width:100%;max-width:1000px;overflow:hidden}.chat-header{text-align:center;padding:30px 40px 20px}.chat-title{font-size:22px;font-weight:600;color:#333;margin-bottom:20px}.name-section{background:#34495e;padding:20px;display:flex;align-items:center;justify-content:center;gap:15px;margin:0 40px 20px;border-radius:4px}.age-badge{display:inline-block;background:#ff5c5c;color:#fff;font-weight:700;padding:6px 10px;border-radius:20px;margin-left:10px;vertical-align:middle}.name-label{color:#fff;font-size:16px;font-weight:500}.name-input{padding:10px 15px;border:none;border-radius:4px;font-size:16px;min-width:150px}.start-btn{background:#28a745;color:#fff;border:none;padding:10px 25px;border-radius:4px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s}.start-btn:hover{background:#218838}.description{padding:0 40px 30px;text-align:center;color:#555;font-size:14px;line-height:1.6}.description a{color:#2b7cd3;text-decoration:underline}.chat-area{background:#f8f9fa;height:350px;padding:20px;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;overflow-y:auto;overflow-x:hidden}.message{display:flex;gap:12px;align-items:flex-end}.message-content{flex:1;padding:8px 12px;border-radius:8px;background:#fff;color:#111;word-wrap:break-word;word-break:break-word;max-width:100%;overflow-wrap:break-word}.message-time{font-size:.75rem;color:#999;white-space:nowrap;margin-left:12px;align-self:flex-end}.message.own .message-time{color:#ffb27a}.message.other .message-time{color:#ff7ab6}.message.own .message-content{background:#fff3e6}.message.other .message-content{background:#fff0f6}.message-sender{font-weight:700;margin-bottom:4px}.message.own .message-sender{color:#ff8a4b}.message.other .message-sender{color:#ff4da6}.message-input-container{display:flex;padding:0}.message-input{flex:1;padding:15px 20px;border:none;font-size:14px;background:#f0f0f0;outline:none}.send-btn{background:#d0d0d0;color:#666;border:none;padding:0 30px;font-size:14px;font-weight:600;cursor:pointer;transition:background .3s}.send-btn:hover{background:#c0c0c0}.searching-indicator{display:none;text-align:center;padding:30px 20px;background:#f8f9fa;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0}.searching-indicator.active{display:block}.searching-text{font-size:18px;font-weight:600;color:#333;margin-bottom:15px}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #2b7cd3;border-radius:50%;margin:0 auto 15px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.cancel-search-btn{background:#dc3545;color:#fff;border:none;padding:10px 20px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;transition:background .3s}.cancel-search-btn:hover{background:#c82333}.action-buttons{display:flex;justify-content:space-between;gap:0}.action-btn{border:none;padding:18px;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .3s;color:#fff;flex:1}.action-btn:hover{opacity:.9}.new-chat-btn{background:#0088cc}.req-photo-btn{background:#20a090}.report-btn{background:#dc3545}.footer{background:#5a6268;padding:20px;text-align:center}.footer-links{display:flex;justify-content:center;gap:30px;margin-bottom:15px}.footer-links a{color:#fff;text-decoration:none;font-size:14px}.footer-links a:hover{text-decoration:underline}.footer-secondary{display:flex;justify-content:center;gap:20px;font-size:13px}.footer-secondary a{color:#ddd;text-decoration:none}.footer-secondary a:hover{text-decoration:underline}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1000;justify-content:center;align-items:center}.modal.active{display:flex}.modal-content{background:#fff;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.3);max-width:500px;width:90%;max-height:80vh;overflow-y:auto}.modal-header{padding:1.5rem;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.modal-header h2{margin:0;color:#333}.close-btn{background:none;border:none;font-size:1.5rem;color:#999;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:color .3s}.close-btn:hover{color:#333}.modal-body{padding:1.5rem}.modal-buttons{padding:1rem 1.5rem;border-top:1px solid #e0e0e0;display:flex;gap:1rem;justify-content:flex-end}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem}.btn-green{background:#28a745;color:#fff}.btn-green:hover{background:#218838}.btn-red{background:#dc3545;color:#fff}.btn-red:hover{background:#c82333}.btn-gray{background:#95a5a6;color:#fff}.btn-gray:hover{background:#7f8c8d}.report-reasons{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}#reportDetails{width:100%;padding:.75rem;border:1px solid #e0e0e0;border-radius:4px;font-family:inherit;font-size:.9rem;resize:vertical;min-height:100px}.age-verify{max-width:400px}.age-verify .modal-body{text-align:center}.age-verify .modal-body p{margin-bottom:1rem;line-height:1.6}

/* Responsive adjustments for mobile */
@media (max-width: 600px){
  .header{padding:12px}
  .chat-card{max-width:100%;margin:0 12px}
  .chat-header{padding:18px}
  .chat-title{font-size:18px}
  .name-section{flex-direction:column;gap:8px;margin:0 16px 12px;padding:12px}
  .name-input{min-width:0;width:100%}
  .description{padding:0 16px 18px;font-size:15px}
  .chat-area{height:50vh;padding:12px}
  .message-input{padding:12px}
  .action-buttons{display:flex;gap:8px;padding:10px}
  .action-btn{padding:12px;font-size:14px}
  .footer{padding:16px}
}