/* Icons from /icons.js, shared by the chat page and Notes. An icon is 1em square and
   takes the text colour, so a button's font-size and color decide how it looks. */
:root{
  /* The sizes that actually repeat. 14/15/17/19px appear once or twice each and look
     hand-fitted to their button, so they are left alone rather than rounded into these. */
  --ico-sm:16px;
  --ico-md:18px;
  --ico-lg:22px;
  --ico-xl:24px;
  /* Was a hardcoded 1.9, which reads chunky at 16-18px. One dial for the whole set. */
  --ico-stroke:1.75;
}
.ico{display:inline-block;width:1em;height:1em;line-height:0;flex:0 0 auto;vertical-align:middle}
/* inherit, not 100%: while a menu works out its width, a percentage-sized <svg> counts as 300 px,
   which stretched the chat message menu across the screen. */
.ico svg{display:block;width:inherit;height:inherit;overflow:visible;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.ico path{
  fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round;stroke-linejoin:round;
  transform-box:fill-box;transform-origin:center;
  transition:transform .3s cubic-bezier(.3,1.5,.5,1),fill .2s,opacity .2s;
}
.ico .p-dots,.ico .p-dot{stroke-width:3}

/* ---- chat page ---- */
/* Sizes: these buttons were sized for emoji and text glyphs. */
.account-icon-btn>.ico{width:var(--ico-md);height:var(--ico-md)}
.login-sessions-btn>.ico{width:17px;height:17px;flex:0 0 17px}
/* Login sessions, Notes and Ping admin: each icon on its own soft colour tile */
#loginSessionsBtn{--tint:#38bdf8}
#notesBtn{--tint:#f5a524}
#nudgeBtn{--tint:#e879f9}
#newChatBtn{--tint:#34d399}
/* Icons only, all in one line; the words are in each button's title and aria-label */
.account-utility-row{flex-wrap:nowrap;position:relative}
.account-utility-row .login-sessions-btn{
  position:relative;flex:0 0 auto;width:auto;max-width:none;padding:0;border:0;background:transparent;border-radius:12px;
}
/* #chatView outranks app-themes.css, which paints these buttons with !important */
#chatView .account-utility-row .login-sessions-btn,#chatView .account-utility-row .login-sessions-btn:hover{background:transparent!important;border:0!important;box-shadow:none}
#chatView .account-utility-row .login-sessions-btn.has-note-updates>.ico{box-shadow:0 0 0 2px var(--tint)}
.account-utility-row .login-sessions-btn>.ico{
  box-sizing:content-box;width:var(--ico-md);height:var(--ico-md);flex:0 0 18px;padding:9px;border-radius:12px;
  color:var(--tint);background:color-mix(in srgb,var(--tint) 17%,transparent);
  transition:background .2s,transform .25s cubic-bezier(.3,1.6,.5,1);
}
.account-utility-row .login-sessions-btn:hover>.ico,#newChatBtn[aria-expanded="true"]>.ico{background:color-mix(in srgb,var(--tint) 30%,transparent);transform:scale(1.06)}
.account-utility-row .login-sessions-btn:focus-visible{outline:2px solid var(--tint);outline-offset:2px}
.account-utility-row .notes-update-badge{position:absolute;top:-5px;right:-5px}
#newChatBtn:hover .ico-chatPlus .p-cross,#newChatBtn[aria-expanded="true"] .ico-chatPlus .p-cross{transform:rotate(90deg)}
/* "Open a discussion", opened from #newChatBtn: floats over the chat list just below the icons */
.new-chat-popover{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;margin:0!important;box-shadow:0 18px 44px rgba(0,0,0,.35)!important}
.iphone-page-icon>.ico{width:var(--ico-sm);height:var(--ico-sm);display:inline-block!important}   /* styles.css hides "span:last-child" in that button on narrow screens */
.mobile-back>.ico{width:var(--ico-xl);height:var(--ico-xl)}
.header-menu-btn>.ico,.close-tab-btn>.ico{width:var(--ico-lg);height:var(--ico-lg)}
#pinnedMessageCloseBtn>.ico,#pinnedMessagesCloseBtn>.ico,#cancelReplyBtn>.ico,.nudge-close>.ico,.emoji-picker-close>.ico,.call-device-close>.ico,#chatThemeCloseBtn>.ico,#loginSessionsCloseBtn>.ico,.photo-preview-close>.ico,.user-profile-close>.ico{width:var(--ico-md);height:var(--ico-md)}
.message-menu button>.ico,.clear-menu button>.ico,.conversation-menu button>.ico{
  --tint:currentColor;box-sizing:content-box;width:15px;height:15px;padding:5px;margin-right:10px;border-radius:8px;vertical-align:middle;
  color:var(--tint);background:color-mix(in srgb,var(--tint) 16%,transparent);
  transition:background .2s,transform .25s cubic-bezier(.3,1.6,.5,1);
}
.message-menu button:hover>.ico,.clear-menu button:hover>.ico,.conversation-menu button:hover>.ico{background:color-mix(in srgb,var(--tint) 28%,transparent);transform:scale(1.06)}
/* Each action is its own full-width row. Left as inline buttons, their widths added up while the
   menu measured itself, so it opened as wide as the screen. */
.message-menu,.clear-menu,.conversation-menu{width:max-content;max-width:calc(100vw - 16px)}
.message-menu button,.clear-menu button,.conversation-menu button{display:flex;align-items:center;white-space:nowrap}
.message-menu button.hidden{display:none!important}
/* One colour per action, on a soft tile: calm, but easy to find at a glance */
#replyAction>.ico{--tint:#38bdf8}
#pinMessageAction>.ico{--tint:#f5a524}
#copyTextAction>.ico{--tint:#a78bfa}
#reactAction>.ico{--tint:#facc15}
#saveStickerAction>.ico{--tint:#fbbf24}
#editAction>.ico{--tint:#2dd4bf}
#selectAction>.ico{--tint:#34d399}
#messageInfoAction>.ico{--tint:#60a5fa}
#deleteAction>.ico,#deleteConversationForMeAction>.ico{--tint:#f87171}
#unsendAction>.ico,#clearBothAction>.ico,#deleteConversationForBothAction>.ico{--tint:#ef4444}
#themeWallpaperAction>.ico{--tint:#e879f9}
#clearAllAction>.ico{--tint:#fb923c}
.import-sticker-btn>.ico{width:14px;height:14px;margin-right:4px;vertical-align:-2px}

/* Movement on hover and tap */
.home-refresh-btn:hover .ico-refresh svg{transform:rotate(200deg)}
.home-refresh-btn:active .ico-refresh svg{transform:rotate(360deg)}
.account-settings-btn:hover .ico-settings .p-knoba{transform:translateX(-4px)}
.account-settings-btn:hover .ico-settings .p-knobb{transform:translateX(4px)}
:is(.account-logout-btn,.header-logout-btn):hover .ico-logout .p-arrow{transform:translateX(2.5px)}
.ico-clock .p-hand{transform-box:view-box;transform-origin:12px 12px}
#loginSessionsBtn:hover .ico-clock .p-hand{transform:rotate(360deg);transition-duration:.9s}
#notesBtn:hover .ico-notes .p-lines{transform:translateX(1.5px)}
#nudgeBtn:hover .ico-bell svg{animation:icoRing .7s ease-in-out}
.ico-bell svg{transform-origin:50% 12%}
@keyframes icoRing{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-13deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
.iphone-page-icon:hover .ico-phone svg{transform:rotate(-12deg) scale(1.08)}
.mobile-back:hover .ico-back .p-arrow{transform:translateX(-3px)}
.header-menu-btn:hover .ico-moreVertical .p-dots{transform:scaleY(1.18)}
:is(#pinnedMessageCloseBtn,#pinnedMessagesCloseBtn,#cancelReplyBtn,.nudge-close,.emoji-picker-close,.call-device-close,#chatThemeCloseBtn,#loginSessionsCloseBtn,.photo-preview-close,.user-profile-close):hover .ico-close .p-cross{transform:rotate(90deg)}
.message-menu button:hover .ico-reply .p-arrow{transform:translateX(-2px)}
.message-menu button:hover .ico-pin svg{transform:rotate(-14deg)}
.message-menu button:hover .ico-copy .p-back{transform:translate(-1px,-1px)}
.message-menu button:hover .ico-smile .p-mouth{transform:scale(1.2) translateY(.5px)}
.message-menu button:hover .ico-star .p-star{transform:rotate(72deg) scale(1.08);fill:color-mix(in srgb,currentColor 25%,transparent)}
.message-menu button:hover .ico-pencil .p-pen{animation:icoWrite .6s ease-in-out}
.message-menu button:hover .ico-select .p-tick{animation:icoWrite .5s ease-in-out}
.message-menu button:hover .ico-info .p-dot{transform:translateY(-1px)}
.message-menu button:hover .ico-trash .p-lid,.clear-menu button:hover .ico-trash .p-lid,.conversation-menu button:hover .ico-trash .p-lid{transform-origin:bottom left;transform:translateY(-1px) rotate(-12deg)}
.message-menu button:hover .ico-unsend svg{transform:rotate(-45deg)}
.clear-menu button:hover .ico-palette svg{transform:rotate(-15deg)}
:is(.clear-menu,.conversation-menu) button:hover .ico-eraser .p-rub{transform:translateX(-2px)}
.import-sticker-btn:hover .ico-plus .p-cross{transform:rotate(90deg)}
@keyframes icoWrite{0%,100%{transform:none}30%{transform:translate(-1px,1px) rotate(-8deg)}65%{transform:translate(1px,-.5px) rotate(6deg)}}

/* The SVG buttons that were already drawn (call, video, composer, call controls) get the same feel. */
.header-call-btn svg,.composer-icon-btn svg,.call-btn svg,.call-diag-btn svg{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.header-call-btn:not(:disabled):hover svg,.composer-icon-btn:not(:disabled):hover svg,.call-btn:hover svg{transform:scale(1.12)}
.header-call-btn:not(:disabled):active svg,.composer-icon-btn:not(:disabled):active svg,.call-btn:active svg{transform:scale(.9)}
#callBtn:not(:disabled):hover svg{animation:icoRing .6s ease-in-out}
.send-btn:not(:disabled):hover svg{transform:translateX(2px) rotate(-8deg)}

@media (prefers-reduced-motion: reduce){
  .ico svg,.ico path,.header-call-btn svg,.composer-icon-btn svg,.call-btn svg{transition:none!important;animation:none!important}
}
.settings-refresh-icon>.ico{width:19px;height:19px}
.settings-refresh-btn:hover .ico-refresh svg{transform:rotate(200deg)}