/*
 * Bazzarak's font inside the Chatwoot widget.
 *
 * The widget draws in an iframe served by Chatwoot, on Chatwoot's own origin,
 * so nothing our pages do reaches inside it - which is why the conversation
 * came up in a different typeface from the site around it. The only way in is
 * to give Chatwoot the font itself.
 *
 * Mounted into the container's public directory by docker-compose.support.yml
 * rather than baked into an image, so a `docker compose pull` to a newer
 * Chatwoot keeps it. Nothing here overrides layout or colour - only the
 * typeface - so a Chatwoot redesign will not fight it.
 */

@font-face {
  font-family: "IRANSansX";
  src: url("/bazzarak/IRANSansXVF.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root,
body,
#app,
.woot-widget-holder,
.woot--bubble-holder,
.woot-widget-bubble {
  /* Latin fallbacks stay in the stack: an English word inside a Persian
     sentence should still be drawn by a face that has the glyphs for it. */
  font-family: "IRANSansX", "Vazirmatn", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif !important;
}

/* Persian digits and text sit lower than Latin ones at the same size, so the
   stock line-height crowds descenders. */
.conversation--container,
.conversation-wrap,
.chat-message__content,
.user-message-wrap,
.agent-message-wrap {
  line-height: 1.9;
}

/*
 * The back arrow, pointing the right way.
 *
 * ChatHeader.vue draws its back button with a hard-coded `chevron-left`, and
 * the icon set has no RTL variant. On an English widget that is correct - back
 * is the way you came from, which is left. On ours it points away from where
 * the reader came from, and an arrow that lies about direction is worse than
 * no arrow.
 *
 * Flipped here rather than in the Vue file because the widget ships as a built
 * bundle: mounting a changed .vue would need the whole pack rebuilt inside the
 * container, and a `docker compose pull` would take it away again.
 *
 * Deliberately narrow. `header > div:first-child` is the title block - the
 * close and pop-out buttons are in the second child, and their icons are
 * symmetrical anyway - and `button:first-child` is the back button alone. When
 * there is no back button the first child is the avatar, and nothing matches.
 */
[dir="rtl"] header > div:first-child > button:first-child > svg {
  transform: scaleX(-1);
}