*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{display:flex;min-height:100vh;background-color:#f5f7fa;color:#333;touch-action:pan-y}.sidebar{width:280px;background-color:#2c3e50;color:#ecf0f1;padding:20px 0;display:flex;flex-direction:column;box-shadow:2px 0 5px #0000001a;transition:transform .3s ease;position:relative;z-index:100}.sidebar-header h2{font-size:1.5rem;font-weight:600}.menu-toggle{display:none;background:none;border:none;color:#ecf0f1;font-size:1.5rem;cursor:pointer}.chat-item{padding:12px 15px;margin:5px 0;border-radius:8px;cursor:pointer;transition:background-color .2s;display:flex;align-items:center}.chat-item:hover{background-color:#34495e}.chat-info{flex:1}.chat-name{font-weight:500;margin-bottom:4px}.chat-preview{font-size:.85rem;color:#a0aec0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.create-chat-btn{background-color:#3498db;color:#fff;border:none;padding:12px 15px;margin:15px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color .2s}.create-chat-btn:hover{background-color:#2980b9}.no-chats-message{padding:20px;text-align:center;color:#ecf0f1}.no-chats-message p{margin-bottom:10px;font-size:1rem}.welcome-message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#7f8c8d;font-size:1.1rem;line-height:1.5}.main-content{flex:1;padding:20px;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}.page-header{margin-bottom:20px;display:flex;flex-direction:column;gap:8px}.back-button{display:none;background:none;border:none;margin-bottom:10px;cursor:pointer;color:#3498db}.page-header h1{font-size:1.8rem;color:#2c3e50;word-break:break-word}.page-header p{color:#7f8c8d;font-size:1rem;line-height:1.5}.chat-creation-panel{background-color:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 12px #0000001a;max-width:100%}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#2c3e50}.form-group input{width:100%;padding:14px 16px;border:1px solid #ddd;border-radius:8px;font-size:1rem;transition:border-color .3s}.form-group input:focus{border-color:#3498db;outline:none;box-shadow:0 0 0 2px #3498db33}.action-buttons{display:flex;flex-direction:column;gap:12px;margin-top:25px}.btn{padding:14px 20px;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s}.btn-primary{background-color:#3498db;color:#fff}.btn-primary:hover{background-color:#2980b9}.btn-secondary{background-color:#ecf0f1;color:#2c3e50}.btn-secondary:hover{background-color:#dfe6e9}.btn-success{background-color:#2ecc71;color:#fff}.btn-success:hover{background-color:#27ae60}.link-box{background-color:#f8f9fa;border:1px dashed #ddd;border-radius:8px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;margin-top:10px}.link-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:10px;color:#7f8c8d;font-size:.9rem}.copy-btn{background:none;border:none;color:#3498db;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.copy-btn:hover{background-color:#3498db1a}.copy-btn.copied{background:#2ecc71;color:#fff}.delete-chat-btn{background:#e74c3c;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.delete-chat-btn:hover{background:#c0392b}.confirm-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:20px;border-radius:8px;box-shadow:0 4px 12px #0003;z-index:1000;display:flex;flex-direction:column;gap:10px}.confirm-dialog p{font-size:1rem;color:#2c3e50}.confirm-dialog button{padding:8px 12px;border:none;border-radius:4px;cursor:pointer}.confirm-dialog button:first-child{background:#e74c3c;color:#fff}.confirm-dialog button:last-child{background:#ecf0f1;color:#2c3e50}.chat-container{flex:1;display:flex;flex-direction:column;background-color:#fff;position:relative;z-index:1}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 15px;background-color:#fff;border-bottom:1px solid #ddd;position:relative}.back-button,.settings-btn{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;line-height:1;color:#3498db}.open-sidebar-btn{background:none!important;border:none!important;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:inherit;font:inherit;outline:none}.open-sidebar-btn img{width:24px;height:24px;max-width:24px;max-height:24px;object-fit:contain;image-rendering:pixelated;display:block}.back-button img,.settings-btn img{width:24px;height:24px;max-width:24px;max-height:24px;object-fit:contain}.chat-title{font-size:1.2rem;font-weight:500;text-align:center;flex:1;margin:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-messages{flex:1;overflow-y:auto;padding:15px;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;justify-content:flex-end}.message{margin-bottom:10px;padding:10px 15px;border-radius:8px;max-width:70%;align-self:flex-start;word-break:break-word}.message.outgoing{background-color:#3498db;color:#fff;margin-left:auto;align-self:flex-end}.message.incoming{background-color:#f1f1f1;color:#333;margin-right:auto;align-self:flex-start}.message-text{word-break:break-word}.message-time{font-size:.8rem;color:#999;margin-top:5px;text-align:right}.chat-input-container{padding:15px;background-color:#fff;border-top:1px solid #ddd}.chat-input-wrapper{display:flex;align-items:center;gap:10px}.chat-input{flex:1;padding:12px 15px;border:1px solid #ddd;border-radius:8px;font-size:1rem}.chat-input:focus{border-color:#3498db;outline:none}.send-button{background:#3498db;color:#fff;border:none;padding:12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}.send-button:hover{background:#2980b9}.chat-link{padding:10px 15px;background-color:#f8f9fa;border-bottom:1px solid #ddd;display:flex;align-items:center;gap:10px}.chat-link input{flex:1;padding:8px;border:1px solid #ddd;border-radius:4px;font-size:.9rem}.copy-link-btn{background:#3498db;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;gap:5px;transition:background-color .2s}.copy-link-btn:hover{background:#2980b9}.copy-link-btn.copied{background:#2ecc71}@media (max-width: 768px){body{flex-direction:column;position:relative;overflow-x:hidden}.app-root{display:flex;height:100vh;position:relative}.sidebar{position:absolute;top:0;left:0;height:100%;width:100%;z-index:100;transform:translate(-100%);transition:transform .3s ease}.sidebar.active{transform:translate(0)}.menu-toggle,.back-button{display:block}.main-content{width:100%;padding:15px}.page-header h1{font-size:1.5rem}.page-header p{font-size:.9rem}.chat-creation-panel{padding:15px}.form-group input{padding:12px 14px}.btn{padding:12px 16px;font-size:.95rem}.create-chat-btn{padding:10px 12px;margin:10px 10px 16px}.chat-header{padding:8px 10px}.back-button,.settings-btn,.open-sidebar-btn{width:36px;height:36px;padding:6px}.back-button img,.settings-btn img,.open-sidebar-btn img{width:20px;height:20px;max-width:20px;max-height:20px;object-fit:contain;image-rendering:pixelated}.chat-title{font-size:1.1rem}.chat-link{padding:8px 10px}.chat-link input{font-size:.85rem}.copy-link-btn,.delete-chat-btn{padding:6px 10px;font-size:.85rem}.chat-input-container{margin-bottom:26px}}@media (max-width: 480px){.page-header h1{font-size:1.3rem}.form-group input{padding:10px 12px;font-size:.95rem}.btn{padding:10px 14px;font-size:.9rem}.link-text,.chat-link input{font-size:.8rem}.copy-link-btn,.delete-chat-btn{padding:5px 8px;font-size:.8rem}.create-chat-btn{margin-bottom:26px}.chat-input-container{margin-bottom:16px}}html,body{margin:0;padding:0;height:100%;-webkit-text-size-adjust:100%}.app-root{display:flex;flex-direction:row;width:100vw;height:100vh;overflow:hidden;font-family:Arial,sans-serif;position:fixed;top:0;left:0}.sidebar{width:280px;min-width:280px;background-color:#2c3e50;color:#ecf0f1;display:flex;flex-direction:column;padding:20px 0;height:100%}.sidebar-header{padding:0 20px 20px;border-bottom:1px solid #34495e;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center}.no-chats-message{padding:20px;font-size:.95rem;color:#ecf0f1;text-align:center}.chat-list{flex:1;overflow-y:auto;padding:0 10px;-webkit-overflow-scrolling:touch}.chat-item{padding:12px 15px;margin:5px 0;border-radius:8px;cursor:pointer;display:flex;align-items:center}.chat-item.active{background-color:#3498db}.chat-avatar{width:40px;height:40px;border-radius:50%;background-color:#3498db;display:flex;align-items:center;justify-content:center;margin-right:12px;font-weight:700}.chat-container{flex:1;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;background-color:#f5f7fa}.chat-header{background-color:#fff;padding:15px 20px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 2px 4px #0000000d}.chat-title{font-size:1.25rem;font-weight:600;color:#2c3e50;text-align:center}.chat-header .back-button,.chat-header .settings-btn{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.2rem;cursor:pointer}.chat-header .back-button{left:15px}.chat-header .settings-btn{right:15px}.chat-messages{flex:1;padding:15px 20px;overflow-y:auto;display:flex;flex-direction:column;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.message{max-width:85%;padding:12px 16px;margin-bottom:12px;border-radius:12px}.message.outgoing{align-self:flex-end;background-color:#dbeafe;color:#1e40af}.message-time{font-size:.75rem;text-align:right;margin-top:5px;color:#64748b}.chat-input-container{padding:15px 20px;background-color:#fff;border-top:1px solid #e2e8f0}.chat-input-wrapper{display:flex;gap:10px}.chat-input{flex:1;padding:12px 16px;border:1px solid #e2e8f0;border-radius:24px;font-size:16px;-webkit-text-size-adjust:100%}.send-button{background-color:#3498db;color:#fff;border:none;width:45px;height:45px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}.send-button:hover{background-color:#2980b9}@media (max-width: 768px){.app-root{flex-direction:column;height:100vh}.chat-container{width:100%;position:relative;height:100%}.sidebar{position:fixed;top:0;left:0;width:80%;max-width:280px;height:100%;transform:translate(-100%);transition:transform .3s ease;z-index:100}.sidebar.active{transform:translate(0)}.sidebar-header button{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer}.open-sidebar-btn{position:fixed;top:15px;left:15px;z-index:101;background-color:#3498db;color:#fff;border:none;padding:10px 15px;border-radius:8px;font-size:1.2rem;cursor:pointer}.back-button{display:block;margin-right:10px}}.chat-link{background-color:#f0f4ff;padding:10px 15px;margin:10px 20px;border-radius:8px;font-size:.9rem;display:flex;flex-direction:column;gap:8px}.chat-link span{font-weight:500;color:#2c3e50}.chat-link input{width:100%;border:1px solid #cbd5e1;border-radius:4px;padding:5px 8px;font-size:.9rem;background-color:#fff}.copy-link-btn{align-self:flex-start;background-color:#3498db;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s ease}.copy-link-btn:hover{background-color:#2980b9}.copy-link-btn.copied{background-color:#2ecc71}.delete-chat-btn{align-self:flex-start;background-color:#e74c3c;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s ease}.delete-chat-btn:hover{background-color:#c0392b}.notification-container{position:fixed;top:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.notification{padding:12px 16px;border-radius:4px;box-shadow:0 2px 8px #00000026;font-size:.9rem;font-weight:500;opacity:0;transform:translate(100%);transition:opacity .3s,transform .3s;pointer-events:auto;min-width:250px;max-width:350px;word-wrap:break-word}.notification.show{opacity:1;transform:translate(0)}.notification.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.notification.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.notification.info{background-color:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}.notification .close-btn{float:right;background:none;border:none;font-size:1.2rem;cursor:pointer;color:inherit;opacity:.7;margin-left:10px}.notification .close-btn:hover{opacity:1}