/* The same master mark is used by the original app and the passkey preview. */
.logo-icon > img { display: block; width: 100%; height: 100%; }
.howsapp-brand-title { display: flex; align-items: center; gap: 8px; }
.howsapp-brand-title > img { display: block; flex: none; width: 30px; height: 30px; }
.chat-empty > .howsapp-brandmark { width: 80px; height: 80px; margin-bottom: 20px; }
/* Shared mobile control treatment for the preserved original app. */
:root { --accent: #8b7aff; --accent-light: #b6aaff; --bg-secondary: #101625; --bg-tertiary: #192234; --glass-border: #ffffff12; --text-secondary: #a3b0c6; }
button { min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #55d4bf; outline-offset: 3px; }
.btn-primary { min-height: 50px; justify-content: center; border-radius: 15px; background: #8b7aff; color: #101427; box-shadow: none; font-weight: 700; }
.btn-primary:hover { transform: none; box-shadow: none; }
.icon-btn { width: 44px; height: 44px; }
.input-group input { min-height: 48px; font-size: 16px; }
.sidebar-header { padding: 18px 20px; }
.contact-item { min-height: 76px; }
.contact-name { font-weight: 600; }
.chat-header-actions { gap: 2px; }
.message { border-radius: 18px; }
.pair-tabs button { min-height: 48px; }
.modal-content { border-radius: 26px; border-color: #ffffff12; }
@media (max-width: 700px) { .modal-content { width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow-y: auto; } }
@media (prefers-reduced-motion: reduce) { .logo-icon { animation: none; } }