@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap";*{box-sizing:border-box}body{background:#1c1c1f;color:#fafafa;margin:0;font-family:Open Sans,sans-serif;font-size:14px}.logo{display:inline-block;padding-right:10px}.App{display:flex;flex-direction:column;height:100dvh}.app-nav{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#2a2a2f;border-bottom:1px solid #44445a;flex-shrink:0}.app-nav .nav-brand{font-weight:600;font-size:12px;margin-right:auto;display:flex;flex-direction:column;align-items:flex-start}.app-nav .nav-brand .nav-brand-name{margin-left:10px}.app-nav button{background:transparent;border:1px solid transparent;color:#9898b8;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .15s}.app-nav button:hover{color:#fafafa;background:#35353d}.app-nav button.active{color:#5180d6;border-color:#5180d6}.app-main{flex:1;overflow-y:auto;padding:16px;max-width:720px;width:100%;margin:0 auto}button{cursor:pointer;font-family:inherit;font-size:14px;padding:8px 18px;border-radius:6px;border:none;background:#5180d6;color:#fafafa;transition:background .15s;margin:0 3px}button:hover:not(:disabled){background:#5a54c4}button:disabled{opacity:.45;cursor:default}.btn-secondary{background:#35353d;border:1px solid #44445a}.btn-secondary:hover:not(:disabled){background:#44445a}.btn-danger{background:#e05c5c}.btn-danger:hover:not(:disabled){background:#d83131}.btn-small{padding:4px 10px;font-size:12px}.btn-back{background:transparent;border:none;font-size:18px;color:#fafafa;padding:4px 8px}.btn-icon{background:transparent;border:none;color:#9898b8;padding:2px 6px;font-size:14px}.btn-icon:hover{color:#e05c5c}.row{display:flex;gap:8px}.toggle-container{display:flex;align-items:center;gap:8px;font-size:13px;color:#fafafa}.toggle-container label{margin-bottom:0}.toggle{position:relative;display:inline-block;width:40px;height:24px}.toggle input{opacity:0;width:0;height:0}.toggle .slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.toggle .slider:before{position:absolute;content:"";height:20px;width:20px;left:2px;bottom:2px;background-color:#493838;transition:.4s;border-radius:50%}.toggle input:checked+.slider{background-color:#9cd4aa}.toggle input:checked+.slider:before{transform:translate(16px);background-color:#12812e}input,textarea,select{width:100%;background:#35353d;border:1px solid #44445a;border-radius:6px;color:#fafafa;padding:8px 10px;font-size:14px;font-family:inherit;margin-top:4px;transition:border-color .15s}input:focus,textarea:focus,select:focus{outline:none;border-color:#5180d6}input:required:invalid{border-color:#e05c5c}select{cursor:pointer}label{display:block;color:#9898b8;font-size:12px;margin-bottom:12px}.form-grid{display:flex;flex-direction:column;gap:4px}.form-card{background:#2a2a2f;border:1px solid #44445a;border-radius:12px;padding:16px;margin-bottom:16px}.form-card h3{margin:0 0 12px;font-size:15px}.hint{color:#9898b8;font-size:12px;margin:4px 0 8px}.centered{text-align:center}.error{color:#e05c5c;font-size:12px;margin:4px 0}.success{color:#4caf7d;font-size:12px;margin:4px 0}.vault-setup{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px}.vault-card{background:#2a2a2f;border:1px solid #44445a;border-radius:12px;padding:32px 28px;width:100%;max-width:420px}.vault-card h1{margin:0 0 8px;font-size:24px}.vault-card h2{margin:0 0 8px;font-size:20px}.vault-card p{margin:0 0 16px}.vault-card label{margin-bottom:14px}.vault-card button{width:100%;margin-top:8px;padding:10px}.vault-card .back{background:transparent;color:#9898b8;border:1px solid #44445a;margin-top:8px}.vault-card .profile-list{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px}.vault-card .profile-entry{display:flex;align-items:center;gap:14px;background:#35353d;border:1px solid #44445a;border-radius:6px;padding:10px 14px;width:100%;margin-top:0;text-align:left;transition:background .15s,border-color .15s}.vault-card .profile-entry:hover{background:#44445a;border-color:#5180d6}.vault-card .profile-entry .profile-entry-avatar{width:42px;height:42px;border-radius:50%;background:#5180d6;color:#fafafa;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.vault-card .profile-entry .profile-entry-name{font-size:15px;font-weight:600;color:#fafafa}.profile-view .otp-row,.contacts-view .otp-row{align-items:center}.profile-view .otp-row input,.contacts-view .otp-row input{margin-top:0}.profile-view .otp-copy-btn,.contacts-view .otp-copy-btn{height:38px;display:inline-flex;align-items:center;justify-content:center}.profile-view .profile-dl,.contacts-view .profile-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin-bottom:16px}.profile-view .profile-dl dt,.contacts-view .profile-dl dt{color:#9898b8;font-size:12px}.profile-view .profile-dl dd,.contacts-view .profile-dl dd{margin:0}.profile-view .identity-list,.contacts-view .identity-list{list-style:none;padding:0;margin:0}.profile-view .identity-list li,.contacts-view .identity-list li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:#2a2a2f;border:1px solid #44445a;border-radius:6px;margin-bottom:8px}.profile-view .identity-list li .label,.contacts-view .identity-list li .label{font-weight:600;font-size:13px}.profile-view .identity-list li .sub,.contacts-view .identity-list li .sub{color:#9898b8;font-size:11px;word-break:break-all}.profile-view .delete-confirm,.contacts-view .delete-confirm{background:#2a2a2f;border:1px solid #e05c5c;border-radius:6px;padding:16px}.profile-view .delete-confirm .delete-confirm-title,.contacts-view .delete-confirm .delete-confirm-title{font-weight:600;font-size:14px;color:#e05c5c;margin:0 0 8px}.profile-view .delete-confirm label,.contacts-view .delete-confirm label{margin-bottom:8px}.contacts-view .identity-bar,.contacts-view .relay-bar{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px}.contacts-view .identity-bar .label,.contacts-view .relay-bar .label{color:#9898b8;white-space:nowrap}.contacts-view .identity-bar select,.contacts-view .relay-bar select{flex:1}.contacts-view .identity-bar .relay-input,.contacts-view .relay-bar .relay-input{flex:1;font-size:12px;padding:5px 8px;margin-top:0}.contacts-view .my-pubkey{background:#2a2a2f;border:1px solid #44445a;border-radius:6px;padding:10px 12px;margin-bottom:14px;font-size:12px}.contacts-view .my-pubkey summary{cursor:pointer;color:#9898b8}.contacts-view .my-pubkey pre{font-size:10px;background:#35353d;padding:8px;border-radius:6px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;color:#9898b8}.contacts-view .contacts-list{list-style:none;padding:0;margin:0}.contacts-view .contacts-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#2a2a2f;border:1px solid #44445a;border-radius:6px;margin-bottom:8px;cursor:pointer;transition:background .1s}.contacts-view .contacts-list li:hover{background:#35353d}.contacts-view .contacts-list li .contact-icon{width:38px;height:38px;border-radius:50%;background:#5180d6;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;flex-shrink:0}.contacts-view .contacts-list li .contact-info{display:flex;flex-direction:column;gap:2px;flex:1}.contacts-view .contacts-list li .contact-info .name{font-weight:600}.contacts-view .contacts-list li .contact-info .sub{color:#9898b8;font-size:11px}.chat-view{display:flex;flex-direction:column;height:100%}.chat-view .chat-header{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid #44445a;margin-bottom:12px;flex-shrink:0}.chat-view .chat-header .chat-title{font-weight:600;font-size:15px;flex:1}.chat-view .chat-header .connection-badge{font-size:10px;padding:2px 6px;border-radius:99px;text-transform:uppercase;letter-spacing:.5px}.chat-view .chat-header .connection-badge.connected{background:#4caf7d;color:#fff}.chat-view .chat-header .connection-badge.connecting{background:#e0b84c;color:#000}.chat-view .chat-header .connection-badge.disconnected,.chat-view .chat-header .connection-badge.failed,.chat-view .chat-header .connection-badge.idle{background:#35353d;color:#9898b8;border:1px solid #44445a}.chat-view .chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:8px}.chat-view .bubble{max-width:70%;padding:10px 14px;border-radius:12px;position:relative}.chat-view .bubble p{margin:0 0 2px;word-break:break-word}.chat-view .bubble .bubble-time{font-size:10px;color:#9898b8}.chat-view .bubble.mine{align-self:flex-end;background:#5180d6;border-bottom-right-radius:4px}.chat-view .bubble.theirs{align-self:flex-start;background:#2a2a2f;border:1px solid #44445a;border-bottom-left-radius:4px}.chat-view .chat-input{display:flex;gap:8px;padding-top:12px;border-top:1px solid #44445a;flex-shrink:0}.chat-view .chat-input input{flex:1;margin-top:0}.chat-view .chat-input button{flex-shrink:0;padding:8px 16px}.modal-backdrop{position:fixed;inset:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:#2a2a2f;border:1px solid #44445a;border-radius:12px;padding:24px;max-width:480px;width:100%}.modal h2{margin:0 0 8px}.modal p{margin:0 0 12px}.modal .consent-list{list-style:none;padding:0;margin:0 0 12px}.modal .consent-list li{padding:8px 0;border-bottom:1px solid #44445a}.modal .consent-list li:last-child{border:none}.modal .consent-list li.unavailable{opacity:.5}.modal .consent-list li label{display:flex;align-items:center;gap:10px;font-size:13px;color:#fafafa;margin:0;cursor:pointer}.modal .consent-list li label input[type=checkbox]{width:auto;margin:0;accent-color:#5180d6}.modal .consent-list li label .attr-key{font-weight:600;flex:1}.modal .consent-list li label .attr-value{color:#9898b8;font-size:12px}.modal .consent-list li label .attr-missing{color:#e05c5c;font-size:12px}.modal .modal-actions{display:flex;gap:8px;margin-top:12px}