:root{--bg-color:#282a36;--text-color:#f8f8f2;--accent-color:#6272a4;--success-color:#8def85;--warning-color:#ea85ef;--error-color:#f55;--dark-bg:#1e1f29;--message-own-bg:#2c3e50;--message-partner-bg:#0d542b;--token-value-color:#8def85;--send-button-bg:#fc0;--send-button-hover:gold;--button-cancel-bg:#6272a4;--button-cancel-hover:#7282b4;--button-confirm-bg:#f55;--button-confirm-hover:#f33;--emoji-picker-bg:#1e1f29;--emoji-hover-bg:hsla(0,0%,100%,.1)}.chat-container{display:flex;flex-direction:column;height:100dvh;width:100vw;padding:0;margin:0;background:var(--bg-color);color:var(--text-color);font-family:Avenir,Helvetica,Arial,sans-serif;box-sizing:border-box;overflow:hidden}.header{position:relative;display:flex;align-items:center;padding:.5rem;flex-shrink:0;gap:.5rem;background:rgba(0,0,0,.3)}.separator{width:1px;height:1.2em;background:var(--accent-color)}.connection-icon-wrapper,.partner-icon-wrapper,.token-icon-wrapper{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.token-icon-wrapper{cursor:pointer;transition:transform .2s}.token-icon-wrapper:hover{transform:rotate(-15deg);filter:drop-shadow(0 0 2px rgba(255,255,255,.5))}.token-icon-wrapper:active .token-icon{transform:scale(.9) rotate(-15deg)}.token-icon{width:100%;height:100%;stroke:none;fill:currentColor;transition:all .3s ease}.token-display.active-token .token-icon{fill:var(--success-color);animation:pulse-icon 2s infinite}.token-display.has-token .token-icon{fill:var(--warning-color)}.token-display:not(.active-token):not(.has-token) .token-icon{fill:var(--error-color);opacity:.6}.partner-icon{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:all .3s ease}.partner-status.idle .partner-icon{stroke:var(--error-color)}.partner-status.searching .partner-icon{stroke:#ffc107;animation:pulse 1.5s infinite}.partner-status.active .partner-icon{stroke:var(--success-color)}.connection-icon{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:all .3s ease}.connection-icon.connected{color:var(--success-color);animation:pulse-icon 2s infinite}.close-chat-button,.connection-icon.disconnected{color:var(--error-color)}.close-chat-button{background:none;border:none;font-size:1.8rem;cursor:pointer;opacity:.7;transition:opacity .3s ease;width:30px;height:30px;display:flex;align-items:center;justify-content:center;margin-left:.5rem;line-height:1;padding:0}.close-chat-button:hover{opacity:1;color:red}.help-icon{cursor:pointer;width:24px;height:24px;margin-left:auto;margin-right:10px;transition:all .3s ease;fill:#6272a4}.help-icon:hover{transform:scale(1.1);fill:#fc0}.send-button{flex:0 0 auto;background:var(--send-button-bg);color:#333;border:none;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;width:40px;padding:0;margin-left:.5rem;transition:all .3s ease}.send-button:disabled{opacity:.6;cursor:not-allowed;background:#ccc}.send-button:not(:disabled):hover{background:var(--send-button-hover);transform:scale(1.05)}.message-input,.search-container{display:flex;gap:.5rem;margin:.5rem 0;flex-shrink:0;font-size:1.1em;position:relative;width:100%;padding:0 .5rem}.input-container{display:flex;gap:.5rem;align-items:center;width:100%;max-width:100%}.token-input{flex:1;padding:.5rem;border:1px solid var(--accent-color);background:hsla(0,0%,100%,.1);color:var(--text-color);border-radius:4px;font-size:1.1em}.token-input:disabled{opacity:.7;cursor:not-allowed}.action-button{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;transition:all .3s ease;background:var(--accent-color);color:var(--bg-color);font-weight:700}.action-button:disabled{opacity:.6;cursor:not-allowed}.action-button.searching-state{animation:pulse 1.5s infinite;background:var(--warning-color)}.action-button.active-state{background:var(--success-color)}.emoji-button{border:none;background:var(--accent-color);color:#fff;border-radius:4px;cursor:pointer;transition:transform .2s;order:-1;font-size:1.2em;padding:.3rem .5rem}.emoji-button:disabled{opacity:.6;cursor:not-allowed}.emoji-button:active{transform:scale(.9)}.messages{flex:1 1 auto;overflow-y:auto;padding:1rem;display:flex;flex-direction:column-reverse;gap:.5rem;background:rgba(0,0,0,.2);-webkit-overflow-scrolling:touch}.message{margin:.5rem 0;padding:1rem;border-radius:1.5rem;background:hsla(0,0%,100%,.05);color:var(--text-color);max-width:80%;position:relative;word-break:break-word;animation:messageAppear .3s ease;align-self:flex-start;font-size:1.3em}.message.own-message{background:var(--message-own-bg);border-bottom-right-radius:.5rem;margin-right:.5rem;box-shadow:0 2px 5px rgba(0,0,0,.1)}.message.partner-message{background:var(--message-partner-bg);border-bottom-left-radius:.5rem;margin-left:.5rem;box-shadow:0 2px 5px rgba(0,0,0,.1)}.message strong{display:block;font-size:.8em;margin-bottom:.3rem;opacity:.8}.emoji-picker{position:fixed;bottom:70px;left:10px;background:var(--emoji-picker-bg);border:1px solid var(--accent-color);border-radius:8px;padding:1rem;display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem;max-height:300px;overflow-y:auto;z-index:1100;box-shadow:0 4px 12px rgba(0,0,0,.25);animation:fadeIn .2s ease-out;width:350px}.emoji-item{cursor:pointer;padding:.3rem;font-size:1.4em;transition:transform .2s;text-align:center}.emoji-item:hover{transform:scale(1.2);background:var(--emoji-hover-bg);border-radius:4px}.notifications-container{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:12px;max-width:350px;width:100%}.notification{position:relative;padding:16px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:space-between;overflow:hidden;animation:slideIn .3s ease-out;transition:transform .3s ease,opacity .3s ease;background-color:hsla(0,0%,100%,.95);color:#222;border:1px solid rgba(0,0,0,.1)}.notification:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px}.notification.error{background-color:#ffebee;color:#b71c1c}.notification.error:before{background-color:#f44336}.notification.success{background-color:#e8f5e9;color:#1b5e20}.notification.success:before{background-color:#4caf50}.notification.info{background-color:#e3f2fd;color:#0d47a1}.notification.info:before{background-color:#2196f3}.notification.warning{background-color:#fff8e1;color:#5d4037}.notification.warning:before{background-color:#ffc107}.notification-content{display:flex;align-items:center;gap:12px;flex:1}.notification-icon{flex-shrink:0;width:24px;height:24px}.notification-icon svg{width:100%;height:100%;fill:currentColor}.notification-message{flex:1;font-size:.95rem;line-height:1.4;font-weight:500}.notification-close{background:none;border:none;color:inherit;cursor:pointer;font-size:1.2rem;opacity:.7;padding:4px;margin-left:8px;transition:opacity .2s}.notification-close:hover{opacity:1}.confirmation-popup,.token-info-popup{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease-out}.confirmation-popup{background:rgba(0,0,0,.7)}.token-info-popup{background:rgba(0,0,0,.5)}.confirmation-content,.token-info-content{background:var(--dark-bg);border-radius:12px;padding:2rem;max-width:90%;width:400px;position:relative;box-shadow:0 8px 24px rgba(0,0,0,.5)}.confirmation-content{border:2px solid var(--button-confirm-bg);text-align:center}.token-info-content{border:2px solid var(--accent-color)}.confirmation-icon{width:64px;height:64px;margin:0 auto 1.5rem;color:var(--button-confirm-bg)}.confirmation-icon svg{width:100%;height:100%;fill:currentColor}.confirmation-content h3{color:var(--button-confirm-bg);font-size:1.5rem;margin-bottom:1rem}.confirmation-content p{color:var(--text-color);line-height:1.5;margin-bottom:1.5rem}.confirmation-buttons{display:flex;justify-content:center;gap:1rem}.cancel-button,.confirm-button{padding:.8rem 1.5rem;border:none;border-radius:6px;cursor:pointer;font-weight:700;transition:all .3s ease;min-width:120px}.confirm-button{background:var(--button-confirm-bg);color:#fff}.confirm-button:hover{background:var(--button-confirm-hover);transform:translateY(-2px)}.cancel-button{background:var(--button-cancel-bg);color:#fff}.cancel-button:hover{background:var(--button-cancel-hover);transform:translateY(-2px)}.token-item{display:flex;align-items:center;margin-bottom:1.2rem;background:hsla(0,0%,100%,.05);border-radius:8px;padding:.8rem;border:1px solid var(--accent-color)}.token-item label{flex:0 0 110px;font-weight:700;color:var(--text-color);opacity:.8}.token-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .8rem;font-size:1.1rem;color:var(--token-value-color);font-weight:700}.token-item button{background:var(--accent-color);color:#fff;border:none;border-radius:4px;padding:.4rem .8rem;cursor:pointer;transition:opacity .3s;font-size:.9rem}.token-item button:hover{opacity:.8}.close-popup{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;background:var(--error-color);color:#fff;border:none;font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);z-index:10}.no-tokens-message{text-align:center;padding:1.5rem;color:var(--accent-color);font-style:italic}.help-modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2000;background:rgba(0,0,0,.5);animation:fadeIn .3s ease-out}.help-content{background:var(--dark-bg);border-radius:12px;padding:2rem;max-width:90%;width:600px;position:relative;box-shadow:0 8px 24px rgba(0,0,0,.5);border:2px solid var(--accent-color);max-height:80vh;display:flex;flex-direction:column}.help-scroll-container{overflow-y:auto;max-height:calc(80vh - 4rem);padding-right:10px}.help-content h2{color:var(--accent-color);margin-bottom:1.5rem;text-align:center}.help-content h3{color:var(--accent-color);margin-top:1.5rem;margin-bottom:1rem}.conditions-list,.principles-list{padding-left:1.5rem;margin-bottom:1.5rem;line-height:1.6;color:#f8f8f2}.conditions-list li,.principles-list li{margin-bottom:.8rem;color:#f8f8f2}.help-content p{color:#f8f8f2}.video-icon-wrapper{display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;transition:all .3s ease;margin-left:.5rem}.video-icon-wrapper:hover{transform:scale(1.1)}.video-icon-wrapper.active{animation:pulse-icon 1.5s infinite}.video-icon{width:100%;height:100%;fill:#4a6fff;stroke:none;transition:fill .3s ease,transform .3s ease}.video-icon-wrapper:hover .video-icon{fill:#fc0;transform:scale(1.1)}.video-icon-wrapper.active .video-icon{fill:#f55}.video-container{position:relative;width:100%;height:300px;background:#000;display:flex;flex-direction:column;border:1px solid var(--accent-color);border-radius:8px;margin:.5rem;overflow:hidden}.local-video{position:absolute;top:10px;right:10px;width:120px;height:90px;border-radius:4px;border:2px solid #fff;z-index:10}.local-video,.remote-video{-o-object-fit:cover;object-fit:cover}.remote-video{flex:1;width:100%;height:100%;background:#000}.video-controls{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:1rem;z-index:20}.video-control-button{width:50px;height:50px;border-radius:50%;background:hsla(0,0%,100%,.2);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.video-control-button:hover{background:hsla(0,0%,100%,.3);transform:scale(1.1)}.video-control-button svg{fill:#fff}.end-call-button{background:#f55}.end-call-button:hover{background:#f33}.connection-status-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;text-align:center;z-index:15;background:rgba(0,0,0,.7);padding:1rem;border-radius:8px}.spinner{border:3px solid hsla(0,0%,100%,.3);border-radius:50%;border-top:3px solid #fff;width:20px;height:20px;animation:spin 1s linear infinite;margin:10px auto}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes pulse-icon{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes messageAppear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.connection-icon-wrapper,.partner-icon-wrapper,.token-icon-wrapper{width:18px;height:18px}.header span{font-size:.9rem}.close-chat-button{width:26px;height:26px;font-size:1.5rem}.chat-container{height:100dvh;width:100%;max-width:100vw;overflow-x:hidden;padding-bottom:calc(80px + env(safe-area-inset-bottom))}.header{padding:.3rem;gap:.3rem}.separator{height:1em}.send-button{height:48px;width:48px;font-size:1.4rem}.search-container{flex-direction:column;gap:.5rem;margin-top:auto}.message-input{position:fixed;left:0;right:0;background:var(--bg-color);width:100%;margin:0;margin-top:.5rem;z-index:1000;display:flex;flex-direction:column;gap:.8rem;bottom:env(safe-area-inset-bottom);padding-bottom:calc(12px + env(safe-area-inset-bottom))}.action-button,.token-input{width:100%;box-sizing:border-box;height:48px;min-height:48px;font-size:1rem}.message-input-text{font-size:1.4rem}.messages{flex:1 1 auto;min-height:0;max-height:none;padding:.5rem;overflow-anchor:auto;-webkit-overflow-scrolling:touch;height:calc(100dvh - var(--header-height) - var(--input-height) - env(safe-area-inset-bottom));padding-bottom:2rem}.chat-active .messages{--header-height:50px;height:calc(100dvh - var(--header-height) - env(safe-area-inset-bottom))}.message{margin:.3rem 0;padding:.8rem;font-size:1.4rem;max-width:85%;border-radius:1.2rem}.message.own-message{margin-right:.3rem;border-bottom-right-radius:.3rem}.message.partner-message{align-self:flex-end;margin-left:.3rem;border-bottom-left-radius:.3rem}.message strong{font-size:.7em}.input-container{flex-direction:row;width:100%}.emoji-button{flex-shrink:0;font-size:1.8em;padding:0 .5rem;height:48px}.emoji-picker{left:10px;right:10px;max-width:none;bottom:80px;width:auto;max-height:200px}.emoji-item{font-size:1.8em}.token-input.message-input-text{flex:1 1 auto;font-size:1.4rem;height:48px;min-height:48px;min-width:0}.confirmation-content,.help-content,.token-info-content{width:90%;padding:1.5rem}.confirmation-buttons{flex-direction:column;gap:.8rem}.cancel-button,.confirm-button{width:100%}.token-item{flex-direction:column;align-items:flex-start;gap:.5rem}.token-item label{flex:none;width:100%}.token-value{width:100%;padding:0}.token-item button{align-self:flex-end}.notifications-container{top:10px;right:10px;left:10px;max-width:none}.notification{padding:12px}.close-popup{top:-10px;right:-10px;width:30px;height:30px;font-size:1.2rem}.help-content{max-height:90vh}.help-scroll-container{max-height:calc(90vh - 4rem)}.video-container{height:200px}.local-video{width:80px;height:60px}.video-control-button{width:40px;height:40px}}@media (max-height:400px){.messages{height:calc(100dvh - 140px)!important}}@supports (-webkit-touch-callout:none){.chat-container{height:-webkit-fill-available}}*{box-sizing:border-box;margin:0;padding:0}body,html{width:100%;height:100%;background:var(--bg-color);overflow:hidden}@supports (-webkit-touch-callout:none){html{height:-webkit-fill-available}}