/* Yappy Typography v30 — configurable cross-device typography. */
:root{
  --yappy-font-scale:1;
  --yappy-font-weight:400;
  --yappy-font-default:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",Helvetica,Arial,sans-serif;
  --yappy-font-system:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html[data-yappy-font="yappy"] body,
html[data-yappy-font="yappy"] button,
html[data-yappy-font="yappy"] input,
html[data-yappy-font="yappy"] textarea,
html[data-yappy-font="yappy"] select{font-family:var(--yappy-font-default)!important}
html[data-yappy-font="system"] body,
html[data-yappy-font="system"] button,
html[data-yappy-font="system"] input,
html[data-yappy-font="system"] textarea,
html[data-yappy-font="system"] select{font-family:var(--yappy-font-system)!important}
html[data-yappy-font="inter"] body,
html[data-yappy-font="inter"] button,
html[data-yappy-font="inter"] input,
html[data-yappy-font="inter"] textarea,
html[data-yappy-font="inter"] select{font-family:"Inter",Arial,sans-serif!important}
html[data-yappy-font="roboto"] body,
html[data-yappy-font="roboto"] button,
html[data-yappy-font="roboto"] input,
html[data-yappy-font="roboto"] textarea,
html[data-yappy-font="roboto"] select{font-family:"Roboto",Arial,sans-serif!important}
html[data-yappy-font="noto"] body,
html[data-yappy-font="noto"] button,
html[data-yappy-font="noto"] input,
html[data-yappy-font="noto"] textarea,
html[data-yappy-font="noto"] select{font-family:"Noto Sans",Arial,sans-serif!important}
/* Scale text without changing tap targets, spacing primitives, avatars, media, or icons. */
html[data-yappy-scale="small"]{--yappy-font-scale:.90}
html[data-yappy-scale="default"]{--yappy-font-scale:1}
html[data-yappy-scale="large"]{--yappy-font-scale:1.10}
html[data-yappy-scale="xlarge"]{--yappy-font-scale:1.20}

html[data-yappy-scale] .row-name{font-size:calc(18px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .row-preview{font-size:calc(16px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .row-time{font-size:calc(15px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .chat-header-name{font-size:calc(16px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .chat-header-sub{font-size:calc(12.5px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .bubble{font-size:calc(16px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .bubble .sender-name{font-size:calc(13px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .bubble-meta-inline{font-size:calc(11px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .composer-field-wrap textarea{font-size:calc(16px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .settings-item .si-label{font-size:calc(16px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .settings-item .si-sub{font-size:calc(13px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .navbar-title{font-size:calc(17px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .navbar-large-title{font-size:calc(33px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .tab-btn{font-size:calc(10.5px * var(--yappy-font-scale))!important}

html[data-yappy-scale] .im-bubble{font-size:calc(17px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .im-sender{font-size:calc(12.5px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .im-receipt,
html[data-yappy-scale] .im-system{font-size:calc(12.5px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .im-date{font-size:calc(13px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .imessage-v19 #cv-input{font-size:calc(17px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .imessage-list-screen .row-name{font-size:calc(16.5px * var(--yappy-font-scale))!important}
html[data-yappy-scale] .imessage-list-screen .row-preview,
html[data-yappy-scale] .imessage-list-screen .row-time{font-size:calc(14px * var(--yappy-font-scale))!important}

.typography-choice{display:flex;align-items:center;gap:10px}
.typography-choice select{
  min-height:36px;
  border:0;
  background:transparent;
  color:var(--text-sub);
  font:inherit;
  text-align:right;
  outline:none;
}


/* Global reading weight. Keep status-bar typography untouched; this applies to app content. */
html[data-yappy-weight="regular"]{--yappy-font-weight:400}
html[data-yappy-weight="semibold"]{--yappy-font-weight:600}
html[data-yappy-weight="bold"]{--yappy-font-weight:700}
html[data-yappy-weight] #app-root{font-weight:var(--yappy-font-weight)}
html[data-yappy-weight] #app-root button,
html[data-yappy-weight] #app-root input,
html[data-yappy-weight] #app-root textarea,
html[data-yappy-weight] #app-root select{font-weight:inherit}