/* Messages and Activity presentation. No overrides of the Profile/Musicians card. */ @font-face { font-family: "Azm Cormorant"; src: url("assets/fonts/azm-cormorant-latin.woff2") format("woff2"); font-style: normal; font-weight: 300 700; font-display: swap; } #profilePage.az-profile .azm-surface { flex: 1; min-width: 0; min-height: 0; color: #f5f2e8; font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; } #profilePage.az-profile .azm-surface[hidden], #profilePage.az-profile .azm-surface [hidden], #profilePage.az-profile #azpMessageApprovals[hidden] { display: none !important; } #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azp-brand { display: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azp-topbar { flex-shrink: 0; width: var(--azp-messages-header-width, 100%); margin-bottom: calc(12px - var(--azp-messages-header-pullup, 0px)); transform: scale(var(--azp-messages-header-scale, 1)); transform-origin: top left; } #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azp-top-actions { display: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azp-fit-content, #profilePage.az-profile[data-azp-active-tab="favorites"] .azp-fit-content { min-height: 0; overflow: hidden; } #profilePage.az-profile .azm-list-screen, #profilePage.az-profile .azm-thread-screen { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; gap: 10px; } #profilePage.az-profile .azm-heading { display: flex; align-items: center; gap: 8px; } #profilePage.az-profile .azm-title { flex: 1; margin: 0; color: #f2dfa2; font: 500 clamp(18px,4.3vw,25px)/1.15 Georgia,serif; } #profilePage.az-profile .azm-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 15px; border: 1px solid #b996555c; border-radius: 999px; background: linear-gradient(130deg,#d8b4560b,#d8b45604); color: #f5dfa0; font: 450 13px/1.3 system-ui,sans-serif; cursor: pointer; transition: background .18s,box-shadow .18s,border-color .18s; } #profilePage.az-profile .azm-button:hover, #profilePage.az-profile .azm-button:active { background: #ceac6723; border-color: #efd294; box-shadow: 0 0 16px #e4bc5624; } #profilePage.az-profile .azm-button:disabled { opacity: .5; cursor: wait; } #profilePage.az-profile .azm-button svg, #profilePage.az-profile .azm-icon-button svg, #profilePage.az-profile .azm-tab svg, #profilePage.az-profile .azm-send svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #profilePage.az-profile .azm-online-strip { display: flex; flex-shrink: 0; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 4px 1px 7px; scrollbar-width: none; touch-action: pan-x; } #profilePage.az-profile .azm-online-person { display: flex; flex: 0 0 64px; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 0; background: none; border: 0; color: #f0eee6; cursor: pointer; font: inherit; } #profilePage.az-profile .azm-online-person > span:last-child { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } #profilePage.az-profile .azm-online-empty { margin: 0; color: #9e9f99; font-size: 12px; } #profilePage.az-profile .azm-avatar { display: inline-block; position: relative; width: 58px; height: 58px; flex: 0 0 58px; } #profilePage.az-profile .azm-avatar-photo { position: absolute; width: 72%; height: 72%; left: 14%; top: 14%; border-radius: 50%; object-fit: cover; } #profilePage.az-profile .azm-avatar-ring { position: absolute; width: 100%; height: 100%; inset: 0; pointer-events: none; object-fit: contain; } #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azm-avatar-ring[data-az-ring] { -webkit-mask-image: none; mask-image: none; } #profilePage.az-profile .azm-online-dot { position: absolute; width: 11px; height: 11px; bottom: 4px; right: 3px; border-radius: 50%; background: #38d97a; border: 2px solid #080d0b; } #profilePage.az-profile .azm-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); flex: 0 0 auto; box-sizing: border-box; height: clamp(52px,7.63dvh,72px); min-height: clamp(52px,7.63dvh,72px); padding: 5px 7px; border: 1px solid #c5ab654c; border-radius: 999px; background: #090d0ed9; } #profilePage.az-profile .azm-tab { display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; min-width: 0; min-height: 40px; padding: 4px 2px; border: 0; border-radius: 999px; background: none; color: #e2d3a7; font: 400 11px/1.15 system-ui,sans-serif; cursor: pointer; } #profilePage.az-profile .azm-tab[aria-selected="true"] { color: #ffedb6; background: radial-gradient(ellipse at 50% 120%,#b1792bb3,transparent 85%),#e4b54113; box-shadow: inset 0 0 0 1px #f8d37f85,0 0 13px #e0a51e1a; } #profilePage.az-profile .azm-tab:disabled { opacity: .34; cursor: default; } #profilePage.az-profile .azm-subtitle { display: flex; gap: 14px; align-items: center; margin: 0; flex-shrink: 0; font: 500 20px/1.3 Georgia,serif; color: #efddaa; } #profilePage.az-profile .azm-subtitle::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg,#c4a96866,transparent); } #profilePage.az-profile .azm-status { margin: 0; font-size: 12px; color: #d5c7a9; flex-shrink: 0; overflow-wrap: anywhere; } #profilePage.az-profile .azm-status:empty { display: none; } #profilePage.az-profile .azm-live-status { flex: 0 0 auto; margin: 0 3px; color: #d5c7a9; font: 400 12px/1.4 system-ui,sans-serif; overflow-wrap: anywhere; } #profilePage.az-profile .azm-list, #profilePage.az-profile .azm-history, #profilePage.az-profile .azm-approval-list { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b6a16544 transparent; touch-action: pan-y; } #profilePage.az-profile .azm-list { border: 1px solid #c8ac622e; border-radius: 23px; background: linear-gradient(135deg,#14191673,transparent); } #profilePage.az-profile .azm-chat-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 84px; padding: 12px 10px; margin: 0; border: 0; border-bottom: 1px solid #d7b96f20; background: transparent; color: inherit; text-align: start; cursor: pointer; user-select: none; -webkit-touch-callout: none; font-family: inherit; } #profilePage.az-profile .azm-chat-row:last-child { border-bottom: 0; } #profilePage.az-profile .azm-chat-row:hover, #profilePage.az-profile .azm-chat-row:active { background: #e6c7740a; } #profilePage.az-profile .azm-row-copy { display: flex; flex-direction: column; flex: 1; gap: 6px; min-width: 0; overflow: hidden; } #profilePage.az-profile .azm-row-name { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; } #profilePage.az-profile .azm-plan { padding: 2px 6px; border: 1px solid #bca35b5e; border-radius: 999px; color: #e7ca8a; background: #a77d2317; font-size: 9px; font-weight: 400; } #profilePage.az-profile .azm-preview { font-size: 12px; font-weight: 400; color: #bfc0b8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #profilePage.az-profile .azm-row-details { align-self: stretch; display: flex; align-items: flex-end; justify-content: center; flex-direction: column; gap: 9px; font-size: 10px; color: #e4ce98; flex-shrink: 0; } #profilePage.az-profile .azm-unread { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: #eed08b; color: #15160f; font-size: 11px; } #profilePage.az-profile .azm-empty { padding: 25px 18px; margin: auto; color: #b6b8b1; font-size: 13px; text-align: center; } #profilePage.az-profile .azm-thread-header { display: flex; align-items: center; gap: 8px; flex-shrink: 0; border-bottom: 1px solid #b59b5538; padding-bottom: 8px; } #profilePage.az-profile .azm-thread-person { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; border: 0; background: none; color: #efdfb2; text-align: start; font: 500 16px/1.3 system-ui,sans-serif; } #profilePage.az-profile .azm-thread-person .azm-avatar { width: 42px; height: 42px; flex-basis: 42px; } #profilePage.az-profile .azm-thread-person > span:last-child { overflow-wrap: anywhere; } #profilePage.az-profile .azm-icon-button { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 50%; background: transparent; color: #e7d5a2; cursor: pointer; } #profilePage.az-profile .azm-icon-button:hover { background: #d4ae3e1a; } #profilePage.az-profile .azm-icon-button.is-recording { color: #ff6c6c; background: #b22b2b30; } #profilePage.az-profile .azm-history { padding: 10px 4px; } #profilePage.az-profile .azm-message-list { display: flex; flex-direction: column; gap: 9px; } #profilePage.az-profile .azm-bubble { align-self: flex-start; max-width: 86%; min-width: 50px; padding: 10px 12px 6px; border-radius: 17px 17px 17px 4px; background: #15211fec; border: 1px solid #95afa526; } #profilePage.az-profile .azm-bubble.is-mine { align-self: flex-end; border-radius: 17px 17px 4px 17px; background: #342e1ee8; border-color: #bea96745; } #profilePage.az-profile .azm-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; font-size: 14px; } #profilePage.az-profile .azm-bubble-meta { display: block; text-align: end; margin-top: 4px; color: #b5af96; font-size: 10px; } #profilePage.az-profile .azm-composer { display: flex; align-items: flex-end; gap: 5px; flex-shrink: 0; border: 1px solid #c5ae654a; border-radius: 24px; padding: 5px; background: #101a18; } #profilePage.az-profile .azm-input, #profilePage.az-profile .azm-request-input { display: block; min-width: 0; width: 100%; border: 1px solid #c5ae654a; border-radius: 12px; background: #070e0c; color: #f4f3ed; font: 400 16px/1.5 system-ui,sans-serif; padding: 9px 12px; } #profilePage.az-profile .azm-composer textarea { flex: 1; border: 0; resize: none; min-height: 42px; max-height: 88px; background: none; } #profilePage.az-profile .azm-send { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; background: linear-gradient(135deg,#f0d79b,#aa803f); color: #151810; border: 0; border-radius: 50%; cursor: pointer; } #profilePage.az-profile .azm-send:disabled { opacity: .5; } #profilePage.az-profile .azm-audio, #profilePage.az-profile .azm-voice-preview audio { max-width: 100%; width: 250px; height: 38px; } #profilePage.az-profile .azm-voice-preview { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex-shrink: 0; } #profilePage.az-profile .azm-request-card { padding: 8px 12px 12px; border-bottom: 1px solid #c4a15935; } #profilePage.az-profile .azm-request-card .azm-chat-row { padding: 0; min-height: 60px; border: 0; } #profilePage.az-profile .azm-request-kind { margin: 5px 0; font-size: 11px; color: #d8bd7f; } #profilePage.az-profile .azm-request-body { margin: 7px 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13px/1.5 system-ui,sans-serif; } #profilePage.az-profile .azm-actions { display: flex; gap: 8px; } #profilePage.az-profile .azm-danger { color: #f0a79d; border-color: #dd786c59; } #profilePage.az-profile .azm-dialog { width: min(92vw,390px); max-height: min(85dvh,calc(var(--app-height,100vh) - 24px)); padding: 22px; border: 1px solid #d8bf6c55; border-radius: 25px; background: #101815f5; color: #eeede4; box-shadow: 0 24px 90px #000a; font: 400 14px/1.5 system-ui,sans-serif; overflow-y: auto; overscroll-behavior: contain; } #profilePage.az-profile .azm-dialog::backdrop { background: #040808bf; backdrop-filter: blur(8px); } #profilePage.az-profile .azm-dialog h2 { margin: 0 0 14px; color: #ead49c; font: 500 23px/1.3 Georgia,serif; } #profilePage.az-profile .azm-dialog-body { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } #profilePage.az-profile .azm-dialog-body p { margin: 0; } #profilePage.az-profile .azm-dialog > .azm-button { width: 100%; } #profilePage.az-profile .azm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; } #profilePage.az-profile .azm-toggle-row input { width: 22px; height: 22px; accent-color: #d1b36c; } #profilePage.az-profile .azm-note { color: #afae9f; font-size: 12px; } #profilePage.az-profile .azm-surface :focus-visible, #profilePage.az-profile .azm-dialog :focus-visible, #profilePage.az-profile #azpMessageApprovals :focus-visible { outline: 2px solid #e8cd7e; outline-offset: 2px; } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestination { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 16px; } #profilePage.az-profile #azpMessageApprovals { min-height: 0; margin-top: 15px; font: 400 14px/1.5 system-ui,sans-serif; } #profilePage.az-profile #azpMessageApprovals .azm-approval-list { overflow: visible; } @media (max-height: 700px) { #profilePage.az-profile .azm-online-person .azm-avatar { width: 45px; height: 45px; flex-basis: 45px; } #profilePage.az-profile .azm-tab { min-height: 48px; padding-block: 5px; } #profilePage.az-profile .azm-list-screen { gap: 7px; } } @media (prefers-reduced-motion: reduce) { #profilePage.az-profile .azm-button { transition: none; } } /* Messages canvas, measured from the supplied 1024 × 1536 reference. User, presence, plan, voice and unread values remain server-owned. */ #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) { --azm-unit: min(.09765625vw, max(.41015625px, .065104167dvh)); --azm-cream: #fff7d2; --azm-gold: #cba266; --azm-font: "Azm Roboto", "Segoe UI", Arial, sans-serif; background: #000 !important; } #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azp-shell { container: azm-canvas / inline-size; width: min(100%, max(420px, 66.666667dvh)); min-height: 0; padding: max(calc(14 * var(--azm-unit)), env(safe-area-inset-top)) max(calc(16 * var(--azm-unit)), env(safe-area-inset-right)) max(calc(10 * var(--azm-unit)), env(safe-area-inset-bottom)) max(calc(16 * var(--azm-unit)), env(safe-area-inset-left)); background: #000; } #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azp-shell::before, #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azp-shell::after { content: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azp-topbar { grid-template-columns: calc(60 * var(--azm-unit)) minmax(0, 1fr) calc(150 * var(--azm-unit)); gap: calc(16 * var(--azm-unit)); min-height: calc(64 * var(--azm-unit)); padding-inline: calc(10 * var(--azm-unit)); margin-bottom: calc(30 * var(--azm-unit)); } #profilePage.az-profile .azm-top-actions { display: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-top-actions { display: flex; align-items: center; justify-content: space-between; gap: 0; } #profilePage.az-profile[data-azp-active-tab="messages"] .azp-back, #profilePage.az-profile[data-azp-active-tab="messages"] .azm-top-actions .azm-icon-button { width: calc(60 * var(--azm-unit)); height: calc(64 * var(--azm-unit)); flex: 0 0 calc(60 * var(--azm-unit)); margin: 0; padding: 0; color: var(--azm-cream); } #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azp-back svg { width: calc(42 * var(--azm-unit)); height: calc(42 * var(--azm-unit)); stroke-width: 1.8; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-top-actions svg { width: calc(46 * var(--azm-unit)); height: calc(46 * var(--azm-unit)); stroke-width: 1.9; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-top-actions .azm-icon-button:last-child svg { stroke-width: 4; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-top-actions .azm-icon-button:first-child { flex-basis: calc(96 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-top-actions .azm-icon-button:last-child { flex-basis: calc(44 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azp-musician-search:not([hidden]) { height: calc(64 * var(--azm-unit)); padding-inline: calc(22 * var(--azm-unit)); border: max(.65px, calc(1.2 * var(--azm-unit))) solid #c59a61; color: #f8e4ad; background: linear-gradient(100deg, #17110480, #030301 52%, #2117016b); box-shadow: inset 0 0 calc(12 * var(--azm-unit)) #9f631219, 0 0 calc(13 * var(--azm-unit)) #d88a2948, 0 0 calc(28 * var(--azm-unit)) #b8772426; } #profilePage.az-profile[data-azp-active-tab="messages"] .azp-musician-search > svg { width: calc(32 * var(--azm-unit)); height: calc(32 * var(--azm-unit)); margin-inline-end: calc(14 * var(--azm-unit)); stroke-width: 2; } #profilePage.az-profile[data-azp-active-tab="messages"] .azp-musician-search input { font: 400 calc(26 * var(--azm-unit))/1.2 var(--azm-font); letter-spacing: -.02em; color: var(--azm-cream); } #profilePage.az-profile[data-azp-active-tab="messages"] .azp-musician-search input::placeholder { color: #fff6d8; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-surface { color: #f5f5f2; font-family: var(--azm-font); font-synthesis: none; -webkit-font-smoothing: antialiased; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list-screen { gap: 0; padding-inline: calc(26 * var(--azm-unit)) calc(22 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-heading { flex: 0 0 calc(60 * var(--azm-unit)); min-height: 0; gap: 8px; padding-inline: calc(6 * var(--azm-unit)) calc(12 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-title { margin: 0; color: var(--azm-cream); font: 600 calc(35 * var(--azm-unit))/1.2 "Azm Cormorant", Georgia, serif; letter-spacing: 0; transform: translateY(calc(8 * var(--azm-unit))); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-requests-button { flex: 0 0 auto; min-height: calc(58 * var(--azm-unit)); padding: calc(8 * var(--azm-unit)) calc(20 * var(--azm-unit)); gap: calc(10 * var(--azm-unit)); font: 400 calc(22 * var(--azm-unit))/1.2 var(--azm-font); border: max(.65px, calc(1 * var(--azm-unit))) solid #b89461; color: var(--azm-cream); background: #070602; box-shadow: inset 0 0 calc(12 * var(--azm-unit)) #a3761610, 0 0 calc(15 * var(--azm-unit)) #c4892430; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-requests-button svg { width: calc(32 * var(--azm-unit)); height: calc(32 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-requests-button[aria-pressed="true"] { background: #332207; border-color: #efcf8d; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-strip { flex: 0 0 calc(138 * var(--azm-unit)); gap: 0; margin-top: calc(12 * var(--azm-unit)); margin-bottom: calc(22 * var(--azm-unit)); padding: 0; align-items: flex-start; overscroll-behavior-x: contain; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-person { flex: 0 0 16.666667%; gap: calc(4 * var(--azm-unit)); padding: 0 calc(4 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-person .azm-avatar { width: calc(78 * var(--azm-unit)); height: calc(78 * var(--azm-unit)); flex-basis: calc(78 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-person > .azm-online-name, #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-person > .azm-online-instrument { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #f5f5f2; font: 400 calc(20 * var(--azm-unit))/1.2 var(--azm-font); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-person > .azm-online-instrument { font-size: calc(18 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-empty { align-self: center; margin: 0; padding: 0 calc(6 * var(--azm-unit)); font-size: max(11px, calc(20 * var(--azm-unit))); color: #a4a197; } #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azm-avatar-photo { width: 82%; height: 82%; left: 9%; top: 9%; background: #0b0a06; } #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azm-avatar-ring { -webkit-mask-image: radial-gradient(circle closest-side, transparent 79%, #000 80.5%); mask-image: radial-gradient(circle closest-side, transparent 79%, #000 80.5%); filter: drop-shadow(0 0 calc(4 * var(--azm-unit)) #d6ac4c30); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-dot { width: 23%; height: 23%; right: 7%; bottom: 10%; border: max(1.5px, calc(4 * var(--azm-unit))) solid #000; background: #00ed69; box-shadow: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-person .azm-online-dot { width: 21%; height: 21%; right: 7%; bottom: 9%; border-width: max(1px, calc(3 * var(--azm-unit))); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-tabs { /* Move the tabs and following content up together in the flex layout. */ margin-top: -25px; grid-template-columns: 1.13fr minmax(0, 1.02fr) repeat(2, minmax(0, .99fr)); height: calc(102 * var(--azm-unit)); min-height: 0; padding: calc(6 * var(--azm-unit)); gap: 0; border: max(1px, calc(2.5 * var(--azm-unit))) solid var(--azm-gold); background: linear-gradient(105deg, #0b0b09, #080908); box-shadow: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-tab { min-height: 0; padding: calc(4 * var(--azm-unit)) 0; gap: calc(5 * var(--azm-unit)); border: 0; color: #aaa; font: 400 calc(26 * var(--azm-unit))/1.1 var(--azm-font); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-tab svg { width: calc(38 * var(--azm-unit)); height: calc(38 * var(--azm-unit)); stroke-width: 1.65; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-tab[aria-selected="true"] { color: #090909; background: radial-gradient(ellipse at 36% 20%, #ffffff70, transparent 58%), linear-gradient(125deg, #c9c9c7, #ececeb 54%, #cfcfcd); box-shadow: inset 0 1px 0 #ffffff8a, inset 0 -1px 0 #aaa9; text-shadow: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-tab:disabled { color: #a7a7a5; opacity: 1; cursor: default; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-tab:enabled:not([aria-selected="true"]):hover { background: #ffffff09; color: var(--azm-cream); } #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azm-subtitle { position: relative; margin: calc(18 * var(--azm-unit)) calc(6 * var(--azm-unit)) calc(14 * var(--azm-unit)); min-height: calc(46 * var(--azm-unit)); gap: calc(24 * var(--azm-unit)); color: var(--azm-cream); font: 600 calc(39 * var(--azm-unit))/1.17 "Azm Cormorant", Georgia, serif; letter-spacing: 0; } #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azm-subtitle::after { height: max(.5px, calc(1 * var(--azm-unit))); background: linear-gradient(90deg, #a88c5c8f, #b6a17da8); } #profilePage.az-profile:is([data-azp-active-tab="messages"], [data-azp-active-tab="favorites"]) .azm-subtitle::before { content: ""; order: 2; width: calc(16 * var(--azm-unit)); height: calc(16 * var(--azm-unit)); flex: 0 0 calc(16 * var(--azm-unit)); margin-left: calc(-9 * var(--azm-unit)); margin-right: calc(4 * var(--azm-unit)); border: max(1px, calc(2 * var(--azm-unit))) solid var(--azm-cream); background: var(--azm-cream); box-shadow: inset 0 0 0 calc(3 * var(--azm-unit)) #000; transform: rotate(45deg); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-status:not(:empty) { margin: 0 3px 8px; color: #d9cba9; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding-bottom: calc(22 * var(--azm-unit)); scroll-padding-block: 3px; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list:has(> .azm-empty) { display: flex; flex-direction: column; align-items: center; justify-content: center; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list > .azm-empty { margin: 0; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list > .azm-button { margin-top: 12px; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-empty { margin: auto; max-width: 32rem; color: #b6b2a7; font-size: max(12px, calc(24 * var(--azm-unit))); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list > .azm-chat-row { position: relative; display: grid; grid-template-columns: calc(144 * var(--azm-unit)) minmax(0, 1fr) auto; column-gap: calc(24 * var(--azm-unit)); min-height: calc(142 * var(--azm-unit)); margin-bottom: calc(2 * var(--azm-unit)); padding: calc(7 * var(--azm-unit)) calc(24 * var(--azm-unit)) calc(7 * var(--azm-unit)) calc(8 * var(--azm-unit)); border: 0; border-radius: calc(48 * var(--azm-unit)); background: linear-gradient(110deg, #04040200, #06060365); isolation: isolate; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list > .azm-chat-row::before { content: ""; position: absolute; z-index: -1; inset: 0; border: max(.5px, calc(1 * var(--azm-unit))) solid #9a875d80; border-radius: inherit; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #0003 22%, #000 57%); mask-image: linear-gradient(90deg, transparent, #0003 22%, #000 57%); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list > .azm-chat-row:last-child { margin-bottom: 0; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list > .azm-chat-row:is(:hover, :focus-visible) { background: linear-gradient(105deg, #15100577, #17120766); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list > .azm-chat-row > .azm-avatar { width: calc(128 * var(--azm-unit)); height: calc(128 * var(--azm-unit)); flex-basis: calc(128 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-row-copy { gap: calc(18 * var(--azm-unit)); overflow: hidden; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-row-name { gap: calc(28 * var(--azm-unit)); flex-wrap: nowrap; font: 400 calc(31 * var(--azm-unit))/1.2 var(--azm-font); letter-spacing: -.025em; color: #f5f5f5; } #profilePage.az-profile .azm-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-plan { display: inline-flex; align-items: center; flex: 0 0 auto; gap: calc(6 * var(--azm-unit)); max-width: 45%; padding: calc(3 * var(--azm-unit)) calc(10 * var(--azm-unit)); border: max(.5px, calc(1 * var(--azm-unit))) solid #be975c; border-radius: 999px; color: var(--azm-cream); background: linear-gradient(115deg, #50370f, #71471580 55%, #301d08); box-shadow: inset 0 1px 0 #f6d89221; font: 400 calc(22 * var(--azm-unit))/1.1 var(--azm-font); letter-spacing: -.02em; } #profilePage.az-profile .azm-plan > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #profilePage.az-profile .azm-plan svg { width: 11px; height: 11px; flex: 0 0 11px; fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-plan svg { width: calc(19 * var(--azm-unit)); height: calc(19 * var(--azm-unit)); flex-basis: calc(19 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-preview { min-width: 0; color: #f0f0ed; font: 400 calc(24 * var(--azm-unit))/1.4 var(--azm-font); letter-spacing: -.02em; } #profilePage.az-profile .azm-preview.is-voice { display: flex; align-items: center; gap: 5px; } #profilePage.az-profile .azm-preview.is-voice > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #profilePage.az-profile .azm-preview.is-voice svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-preview.is-voice { gap: calc(10 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-preview.is-voice svg { width: calc(40 * var(--azm-unit)); height: calc(36 * var(--azm-unit)); flex-basis: calc(40 * var(--azm-unit)); color: var(--azm-cream); stroke-width: 1.9; } #profilePage.az-profile .azm-preview.is-voice .azm-voice-duration { flex: 0 0 auto; color: var(--azm-cream, #f5dfa0); font-variant-numeric: tabular-nums; } #profilePage.az-profile .azm-preview.is-voice > .azm-preview-text { flex: 1; margin-left: calc(8 * var(--azm-unit, 1px)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-row-details { justify-content: space-between; align-self: stretch; padding-block: calc(14 * var(--azm-unit)) calc(21 * var(--azm-unit)); gap: calc(20 * var(--azm-unit)); color: var(--azm-cream); font: 400 calc(22 * var(--azm-unit))/1.2 var(--azm-font); white-space: nowrap; letter-spacing: -.02em; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-unread { min-width: calc(40 * var(--azm-unit)); height: calc(40 * var(--azm-unit)); padding: 0 calc(8 * var(--azm-unit)); color: #141106; background: linear-gradient(115deg, #ffe299, #ffd473); border: 0; font-size: calc(25 * var(--azm-unit)); font-weight: 500; box-shadow: inset 0 0 1px #fff4cd; } #profilePage.az-profile .azm-receipt { display: inline-flex; color: #e9d1a6; } #profilePage.az-profile .azm-receipt svg { width: max(18px, calc(36 * var(--azm-unit, .5px))); height: max(18px, calc(32 * var(--azm-unit, .5px))); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list, #profilePage.az-profile[data-azp-active-tab="messages"] .azm-history { scrollbar-width: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-list::-webkit-scrollbar, #profilePage.az-profile[data-azp-active-tab="messages"] .azm-history::-webkit-scrollbar, #profilePage.az-profile .azm-online-strip::-webkit-scrollbar { display: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-screen { padding: calc(18 * var(--azm-unit)) calc(16 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-composer { background: #0b0a07; border-color: #b994535e; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-header { border-color: #b9945340; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-bubble { background: #14130f; border-color: #b9945330; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-bubble.is-mine { background: #302614; border-color: #b9945360; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-surface :focus-visible, #profilePage.az-profile[data-azp-active-tab="messages"] .azm-top-actions :focus-visible { outline: 2px solid #f1cf85; outline-offset: -2px; } /* Keep the reference proportions on phones, with small text legibility floors. */ @container azm-canvas (max-width: 440px) { #profilePage.az-profile[data-azp-active-tab="messages"] .azp-musician-search input { font-size: max(11px, calc(26 * var(--azm-unit))); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-strip { min-height: calc(86 * var(--azm-unit) + 20.4px); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-person > .azm-online-name { font-size: max(9px, calc(20 * var(--azm-unit))); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-person > .azm-online-instrument { font-size: max(8px, calc(18 * var(--azm-unit))); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-row-name { gap: calc(18 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-preview { font-size: max(9px, calc(24 * var(--azm-unit))); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-row-details { font-size: max(9px, calc(22 * var(--azm-unit))); } } /* Keep search results reachable with an on-screen keyboard or short window. */ @media (max-height: 540px) { #profilePage.az-profile[data-azp-active-tab="messages"] .azp-topbar { margin-bottom: 6px; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-heading { flex-basis: 32px; margin-bottom: 8px; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-title { transform: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-online-strip { display: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-tabs { height: 44px; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-subtitle { margin-block: 5px; } } /* Activity shares the Messages canvas and keeps the existing favorites route. */ #profilePage.az-profile .azp-bottom-nav .azp-nav-item { position: relative; } #profilePage.az-profile .aza-nav-badge { position: absolute; top: 1px; left: calc(50% + 6px); z-index: 2; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border: 1.5px solid #080806; border-radius: 99px; color: #fff; background: #d94149; font: 600 10px/1 system-ui,sans-serif; box-shadow: 0 2px 7px #0008; } #profilePage.az-profile .aza-nav-badge[hidden] { display: none; } #profilePage.az-profile .aza-messages-link[hidden] { display: none !important; } #profilePage.az-profile[data-azp-active-tab="favorites"] .azp-topbar { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; min-height: 44px; margin-bottom: clamp(14px, 2dvh, 24px); padding-inline: calc(10 * var(--azm-unit)); } #profilePage.az-profile[data-azp-active-tab="favorites"] .azp-back { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; color: var(--azm-cream); } #profilePage.az-profile[data-azp-active-tab="favorites"] .aza-messages-link { min-height: 44px; color: var(--azm-cream); border-color: #b8946180; background: linear-gradient(110deg, #20160580, #030301); font-family: var(--azm-font); } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestination { display: flex; flex: 1; flex-direction: column; gap: 0; min-height: 0; margin: 0; padding: 0 calc(26 * var(--azm-unit)) 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: start; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #b6a16544 transparent; scrollbar-width: thin; color: #f5f5f2; font-family: var(--azm-font); -webkit-font-smoothing: antialiased; } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestination::before, #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestination::after { content: none; } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestination > * { flex-shrink: 0; } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestinationTitle { margin: 0 0 8px; color: var(--azm-cream); font: 600 clamp(30px, calc(64 * var(--azm-unit)), 40px)/1.1 "Azm Cormorant", Georgia, serif; } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestinationCopy { margin: 0 0 24px; max-width: 36em; color: #aaa69b; font: 400 13px/1.6 var(--azm-font); } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpMessageApprovals { order: 1; margin: 0; font-family: var(--azm-font); } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestinationItems { order: 2; margin-top: 28px; } #profilePage.az-profile[data-azp-active-tab="favorites"] .azm-subtitle { margin: 0 0 16px; min-height: 28px; font-size: clamp(21px, calc(39 * var(--azm-unit)), 27px); } #profilePage.az-profile[data-azp-active-tab="favorites"] .azm-request-card { margin-bottom: 12px; padding: 14px; border: 1px solid #9a875d66; border-radius: 22px; background: linear-gradient(110deg, #16100560, #07060440); text-align: start; } #profilePage.az-profile[data-azp-active-tab="favorites"] .azm-chat-row { gap: 12px; color: #f5f5f2; font-family: var(--azm-font); } #profilePage.az-profile[data-azp-active-tab="favorites"] .azm-avatar { width: 58px; height: 58px; flex-basis: 58px; } #profilePage.az-profile[data-azp-active-tab="favorites"] .azm-row-name { font-size: 15px; font-weight: 500; } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestination .azm-request-kind { margin: 10px 0 6px; color: #e1c28b; font: 400 12px/1.5 var(--azm-font); } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestination .azm-request-body { margin: 0 0 16px; color: #d1cec5; font: 400 14px/1.6 var(--azm-font); } #profilePage.az-profile[data-azp-active-tab="favorites"] .azm-actions { flex-wrap: wrap; gap: 10px; } #profilePage.az-profile[data-azp-active-tab="favorites"] .azm-actions .azm-button { flex: 1; min-height: 44px; } #profilePage.az-profile[data-azp-active-tab="favorites"] .azm-actions .azm-button:not(.azm-danger) { color: #fff1c8; border-color: #c6a06a99; background: linear-gradient(110deg, #69481666, #251a08); } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestination .azm-empty { margin: 0; padding: 24px 18px; border: 1px solid #9a875d40; border-radius: 20px; color: #aaa69b; background: #ffffff02; font: 400 13px/1.6 var(--azm-font); text-align: center; } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestination .azm-note { margin: -6px 0 14px; color: #aaa69b; font: 400 12px/1.5 var(--azm-font); } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestinationItems > .azp-settings-button { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid #9a875d66; border-radius: 18px; background: #16100560; text-align: start; color: #fff7d2; } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpMessageApprovals > .azm-button { margin-top: 12px; } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestinationItems[hidden] { display: none; } #profilePage.az-profile[data-azp-active-tab="favorites"] .aza-section { margin: 0 0 30px; } #profilePage.az-profile[data-azp-active-tab="favorites"] .aza-section:last-child { margin-bottom: 0; } #profilePage.az-profile[data-azp-active-tab="favorites"] .aza-section .azm-subtitle { gap: 10px; font-size: clamp(20px, calc(42 * var(--azm-unit)), 27px); } #profilePage.az-profile[data-azp-active-tab="favorites"] .aza-section .azm-subtitle > svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.5; } #profilePage.az-profile[data-azp-active-tab="favorites"] .aza-section .azm-subtitle::before { display: none; } #profilePage.az-profile[data-azp-active-tab="favorites"] .aza-card-top { display: flex; align-items: center; gap: 4px; } #profilePage.az-profile .aza-person { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; border: 0; padding: 0; color: #f5f5f2; background: none; text-align: start; cursor: pointer; } #profilePage.az-profile .aza-person-copy { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; } #profilePage.az-profile .aza-person-name { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font: 500 15px/1.4 var(--azm-font); overflow-wrap: anywhere; } #profilePage.az-profile .aza-person .azm-plan { flex-shrink: 0; color: #ffe3aa; font-size: 10px; } #profilePage.az-profile .aza-instrument { color: #aaa69b; font: 400 12px/1.5 var(--azm-font); overflow-wrap: anywhere; } #profilePage.az-profile .aza-options { width: 44px; height: 44px; flex-basis: 44px; align-self: flex-start; } #profilePage.az-profile[data-azp-active-tab="favorites"] .azm-actions .azm-button.aza-delete { border-color: #ffffff25; color: #c9c9c5; background: #ffffff09; } #profilePage.az-profile[data-azp-active-tab="favorites"] .azm-actions .azm-button.aza-accept { border-color: #eac77d; color: #211604; background: linear-gradient(110deg,#efd391,#c3994c); font-weight: 600; } #profilePage.az-profile .aza-request.is-unread { border-color: #cba266b3; } #profilePage.az-profile .aza-empty { display: flex; align-items: center; flex-direction: column; gap: 9px; padding: 22px 16px; border: 1px solid #9a875d33; border-radius: 22px; background: linear-gradient(135deg,#18120755,transparent); text-align: center; } #profilePage.az-profile .aza-empty-icon, #profilePage.az-profile .aza-event-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; color: #d7bd82; background: #b7955012; border: 1px solid #b7955033; border-radius: 50%; } #profilePage.az-profile .aza-empty svg, #profilePage.az-profile .aza-event svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; } #profilePage.az-profile .aza-empty strong { color: #efe4c4; font: 500 14px/1.5 var(--azm-font); } #profilePage.az-profile[data-azp-active-tab="favorites"] .aza-empty p { margin: 0; max-width: 32em; color: #aaa69b; font: 400 12px/1.6 var(--azm-font); } #profilePage.az-profile .aza-event { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid #b7955026; background: transparent; color: #ddd8ca; text-align: start; cursor: pointer; } #profilePage.az-profile .aza-event-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font: 400 13px/1.55 var(--azm-font); overflow-wrap: anywhere; } #profilePage.az-profile .aza-event time { color: #99958b; font-size: 11px; } #profilePage.az-profile .aza-event.is-unread::after { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #e0bf7c; } #profilePage.az-profile .aza-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; margin-bottom: 12px; border: 1px solid #9a875d44; border-radius: 22px; background: linear-gradient(110deg,#16100560,transparent); } #profilePage.az-profile .aza-suggestion .aza-person { flex-basis: calc(100% - 90px); } #profilePage.az-profile .aza-suggestion .aza-match { flex-basis: 100%; order: 2; margin: 0; padding-inline-start: 70px; font-size: 11px; color: #c4af80; } #profilePage.az-profile .aza-follow { min-height: 44px; padding: 8px 16px; } #profilePage.az-profile .aza-section-body > .azm-button { margin-top: 12px; } #profilePage.az-profile .aza-dialog { background: #100e09; border-color: #b7955066; } #profilePage.az-profile .aza-refresh { display: flex; margin: 0 0 14px auto; min-height: 36px; padding: 6px 14px; font-size: 12px; } #profilePage.az-profile[data-azp-active-tab="favorites"] :is(#azpDestination, .azp-topbar) :focus-visible { outline: 2px solid #f1cf85; outline-offset: -2px; } @media (max-height: 540px) { #profilePage.az-profile[data-azp-active-tab="favorites"] .azp-topbar { margin-bottom: 6px; } #profilePage.az-profile[data-azp-active-tab="favorites"] #azpDestinationCopy { margin-bottom: 14px; } } /* Individual conversations: the reference's floating charcoal controls over a full-height musical wallpaper. Scope keeps the inbox and Activity intact. */ #profilePage.az-profile[data-azp-active-tab="messages"][data-azm-view="thread"] .azp-shell { padding: 0; background: #0b0b0b url("assets/chat-music-wallpaper-v1.png") center / cover no-repeat; } #profilePage.az-profile[data-azp-active-tab="messages"][data-azm-view="thread"] :is(.azp-topbar, .azp-bottom-nav) { display: none !important; } #profilePage.az-profile[data-azp-active-tab="messages"][data-azm-view="thread"] .azp-fit-content { height: 100% !important; width: 100% !important; transform: none; } #profilePage.az-profile[data-azp-active-tab="messages"][data-azm-view="thread"] #azpMessages { height: 100%; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-screen { --azm-control: clamp(44px, 8.6cqw, 88px); --azm-chat-gutter: clamp(12px, 3.3cqw, 34px); --azm-charcoal: rgba(35, 35, 35, .94); position: relative; isolation: isolate; box-sizing: border-box; direction: ltr; gap: 10px; padding: max(18px, env(safe-area-inset-top)) max(var(--azm-chat-gutter), env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(var(--azm-chat-gutter), env(safe-area-inset-left)); color: #f6f6f6; font-family: var(--azm-font); background: transparent; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-header { display: grid; grid-template-columns: auto minmax(0, 1fr) var(--azm-control); align-items: center; gap: clamp(12px, 7cqw, 100px); padding: 0; border: 0; min-height: var(--azm-control); } #profilePage.az-profile .azm-back-capsule, #profilePage.az-profile .azm-thread-person, #profilePage.az-profile .azm-input-capsule, #profilePage.az-profile .azm-composer-action { border: 1px solid #ffffff0d; background: var(--azm-charcoal, #232323); border-radius: 999px; box-shadow: 0 2px 6px #0002; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } #profilePage.az-profile .azm-back-capsule { display: flex; align-items: center; height: var(--azm-control); padding: 0 8px 0 2px; } #profilePage.az-profile .azm-thread-header .azm-thread-back { position: relative; width: max(36px, calc(var(--azm-control) * .58)); height: 100%; flex: 0 0 auto; padding: 0; color: #fff; background: transparent; } #profilePage.az-profile .azm-thread-back svg { width: clamp(27px, 3.6cqw, 38px); height: clamp(27px, 3.6cqw, 38px); stroke-width: 2.4; } #profilePage.az-profile .azm-thread-options { display: grid; place-items: center; flex-shrink: 0; width: clamp(28px, 5.2cqw, 54px); height: 100%; padding: 0; border: 0; color: #292929; background: transparent; cursor: pointer; } #profilePage.az-profile .azm-thread-options svg { width: 100%; height: clamp(18px, 3.6cqw, 38px); padding: 3px; border-radius: 999px; background: #f7f7f7; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; } #profilePage.az-profile .azm-thread-unread { position: absolute; top: 1px; left: 1px; min-width: 14px; padding: 2px 4px; border-radius: 999px; color: #222; background: #fff; font: 600 10px/1.1 system-ui,sans-serif; } #profilePage.az-profile .azm-thread-header .azm-thread-person { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; width: 100%; min-width: 0; height: var(--azm-control); padding: 6px 12px; color: #f7f7f7; cursor: pointer; text-align: center; } #profilePage.az-profile .azm-thread-name { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(13px, 2.7cqw, 27px); font-weight: 500; line-height: 1.2; } #profilePage.az-profile .azm-thread-presence { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #aaa; font: 400 clamp(10px, 1.8cqw, 17px)/1.1 var(--azm-font); } #profilePage.az-profile .azm-thread-presence.is-online { color: #c1d9c6; } #profilePage.az-profile .azm-thread-avatar { width: var(--azm-control); height: var(--azm-control); padding: 0; border: 2px solid #ffffff0d; border-radius: 50%; background: #bcbcbc; overflow: hidden; cursor: pointer; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-avatar .azm-avatar { display: block; width: 100%; height: 100%; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-avatar .azm-avatar-photo { width: 100%; height: 100%; top: 0; left: 0; background: #bcbcbc; } #profilePage.az-profile .azm-thread-avatar .azm-avatar-ring { display: none; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-screen .azm-history { display: flex; flex-direction: column; padding: 10px 2px; } #profilePage.az-profile .azm-thread-screen .azm-message-list { flex: 1 0 auto; justify-content: flex-end; } #profilePage.az-profile .azm-thread-screen .azm-message-list:has(> .azm-empty) { justify-content: center; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-screen .azm-empty { flex: 0 0 auto; align-self: center; width: fit-content; max-width: 100%; margin: auto; padding: 8px 13px; color: #f6f6f6; border-radius: 999px; background: #292929e8; box-shadow: 0 2px 8px #0002; font: 400 clamp(13px, 3cqw, 30px)/1.25 var(--azm-font); overflow-wrap: anywhere; backdrop-filter: blur(10px); } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-screen .azm-bubble { background: #252525ed; border-color: #ffffff0c; color: #f5f5f5; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-screen .azm-bubble.is-mine { background: #39372feb; border-color: #ffffff0b; } #profilePage.az-profile .azm-thread-screen .azm-bubble-meta { color: #b0aea6; } #profilePage.az-profile .azm-bubble.is-sticker > p { font-size: 64px; line-height: 1.25; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-screen .azm-bubble.is-sticker { background: #1e1e1e80; } #profilePage.az-profile[data-azp-active-tab="messages"] .azm-composer { display: flex; align-items: flex-end; gap: clamp(8px, 1.6cqw, 17px); min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } #profilePage.az-profile .azm-input-capsule { display: flex; flex: 1 1 auto; align-items: flex-end; min-width: 0; min-height: var(--azm-control); padding: 0 5px; } #profilePage.az-profile .azm-composer .azm-icon-button { flex: 0 0 var(--azm-control); width: var(--azm-control); height: var(--azm-control); padding: 8px; color: #f5f5f5; background: transparent; } #profilePage.az-profile .azm-composer .azm-emoji-toggle { color: #a4a4a4; } #profilePage.az-profile .azm-composer .azm-icon-button svg { width: clamp(25px, 4.5cqw, 46px); height: clamp(25px, 4.5cqw, 46px); stroke-width: 1.7; } #profilePage.az-profile .azm-composer .azm-emoji-toggle svg { width: clamp(24px, 4.2cqw, 43px); height: clamp(24px, 4.2cqw, 43px); } #profilePage.az-profile .azm-composer textarea.azm-input { align-self: center; box-sizing: border-box; flex: 1 1 0; width: 0; min-width: 0; min-height: var(--azm-control); max-height: 140px; padding: 10px 3px; margin: 0; border: 0; border-radius: 0; color: #fafafa; background: transparent; font: 400 clamp(16px, 3.5cqw, 35px)/1.3 var(--azm-font); resize: none; scrollbar-width: thin; outline: none; } #profilePage.az-profile .azm-composer textarea::placeholder { color: #999; opacity: 1; } #profilePage.az-profile .azm-input-capsule:focus-within { border-color: #ffffff2b; } #profilePage.az-profile .azm-composer-action { position: relative; flex: 0 0 var(--azm-control); width: var(--azm-control); height: var(--azm-control); } #profilePage.az-profile .azm-composer-action :is(.azm-send, .azm-mic) { position: absolute; inset: 0; width: 100%; height: 100%; padding: 10px; border: 0; color: #fafafa; background: transparent; transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), background 180ms ease; } #profilePage.az-profile .azm-composer-action .azm-send svg { width: clamp(24px, 4.5cqw, 46px); height: clamp(24px, 4.5cqw, 46px); } #profilePage.az-profile .azm-composer[data-mode="send"] .azm-mic, #profilePage.az-profile .azm-composer:not([data-mode="send"]) .azm-send { opacity: 0; transform: scale(.55) rotate(-35deg); pointer-events: none; } #profilePage.az-profile .azm-composer[data-mode="send"] .azm-send, #profilePage.az-profile .azm-composer:not([data-mode="send"]) .azm-mic { opacity: 1; transform: scale(1) rotate(0); } #profilePage.az-profile .azm-composer[data-mode="recording"] .azm-mic { color: #ff7676; background: #a52a2a30; animation: azm-record-pulse 1.5s ease-in-out infinite; } #profilePage.az-profile .azm-composer :is(button:disabled, textarea:disabled) { cursor: default; } #profilePage.az-profile .azm-composer-action button:disabled svg { opacity: .4; } #profilePage.az-profile .azm-thread-screen > :is(.azm-status, .azm-live-status) { align-self: center; max-width: 100%; padding: 6px 12px; margin: 0; color: #ddd; border-radius: 15px; background: #242424ef; font-size: 12px; } #profilePage.az-profile .azm-thread-screen > .azm-status:empty { display: none; } #profilePage.az-profile .azm-thread-screen > .azm-button { align-self: center; color: #eee; background: #242424ef; border-color: #ffffff20; } #profilePage.az-profile .azm-thread-screen :is(.azm-voice-preview, .azm-attachment-preview) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex-shrink: 0; padding: 10px; border: 1px solid #ffffff16; border-radius: 22px; color: #eee; background: #232323f5; } #profilePage.az-profile .azm-voice-preview audio { flex: 1 1 160px; width: 100%; min-width: 0; max-height: 40px; } #profilePage.az-profile .azm-voice-preview .azm-button { min-height: 36px; padding: 6px 12px; color: #eee; border-color: #ffffff20; } #profilePage.az-profile .azm-attachment-preview > img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; } #profilePage.az-profile .azm-attachment-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } #profilePage.az-profile .azm-attachment-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } #profilePage.az-profile .azm-attachment-copy small { color: #b8b8b8; font-size: 11px; } #profilePage.az-profile .azm-file-link { display: flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; color: #fafafa; text-decoration: none; overflow-wrap: anywhere; } #profilePage.az-profile .azm-file-link svg { flex: 0 0 24px; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; } #profilePage.az-profile .azm-file-link small { flex-shrink: 0; color: #bbb; font-size: 10px; } #profilePage.az-profile .azm-emoji-panel { position: relative; flex: 0 1 auto; min-height: 120px; max-height: min(260px, 38dvh); overflow-y: auto; padding: 8px 12px 12px; border: 1px solid #ffffff16; border-radius: 24px; background: #232323fa; scrollbar-width: thin; } #profilePage.az-profile .azm-emoji-tabs { display: flex; gap: 8px; padding-right: 38px; margin-bottom: 8px; } #profilePage.az-profile .azm-emoji-tab { min-height: 40px; padding: 8px 15px; border: 0; border-radius: 999px; font: 500 13px/1.2 var(--azm-font); color: #aaa; background: transparent; cursor: pointer; } #profilePage.az-profile .azm-emoji-tab[aria-selected="true"] { background: #ffffff16; color: #fff; } #profilePage.az-profile .azm-picker-close { position: absolute; top: 8px; right: 8px; color: #ddd; } #profilePage.az-profile .azm-emoji-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(40px,1fr)); gap: 3px; } #profilePage.az-profile .azm-emoji-choice { min-width: 40px; height: 44px; padding: 3px; border: 0; border-radius: 12px; color: #fff; background: transparent; font: 27px/1 system-ui,sans-serif; cursor: pointer; } #profilePage.az-profile .azm-emoji-choice.is-sticker { height: 66px; font-size: 40px; } #profilePage.az-profile .azm-emoji-choice:hover { background: #ffffff12; } #profilePage.az-profile .azm-thread-screen :is(button, a):focus-visible { outline: 2px solid #ddd; outline-offset: -2px; } @keyframes azm-record-pulse { 50% { box-shadow: 0 0 0 5px #ff76761f; } } @media (max-width: 360px) { #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-header { gap: 10px; } } @media (max-height: 540px) { #profilePage.az-profile[data-azp-active-tab="messages"] .azm-thread-screen { gap: 6px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { #profilePage.az-profile .azm-composer-action :is(.azm-send, .azm-mic) { transition: none; animation: none; } #profilePage.az-profile .azm-composer[data-mode="recording"] .azm-mic { animation: none; } }