/**
 * CSS Variables for Chatbot Widget
 * Central configuration for all design tokens
 */

:root {
  /* Icon sizes */
  --mr-chatbot-icon-size: 28px;
  --mr-chatbot-minimized-size: 60px;

  /* Container dimensions */
  --mr-chatbot-box-width: 410px;
  --mr-chatbot-box-height: 710px;
  --mr-chatbot-box-border-radius: 24px;
  --mr-chatbot-box-border-radius-minimized: 50%;

  /* Spacing */
  --mr-chatbot-spacing: 24px;
  --mr-chatbot-climb: 48px;

  /* Colors — reference shared brand tokens from Shared/colors.css */
  --mr-chatbot-color-primary: var(--hemmy-red);
  --mr-chatbot-color-light-gray: var(--hemmy-light);
  --mr-chatbot-color-dark-gray: var(--hemmy-dark);
  --mr-chatbot-color-blush: var(--hemmy-blush);
  --mr-chatbot-color-white: var(--hemmy-white);

  /* Typography */
  --mr-chatbot-font-content: 14px;     /* body text: messages, info, textarea */
  --mr-chatbot-font-title: 18px;       /* widget header title */
  --mr-chatbot-font-button: 12px;      /* action buttons: clear, close */
  --mr-chatbot-font-caption: 10px;     /* smallest text (clear label) */
  --mr-chatbot-font-icon: 20px;        /* control icon size */
  --mr-chatbot-line-height: 20px;      /* base line-height */

  /* Font weights */
  --mr-chatbot-weight-light: 300;
  --mr-chatbot-weight-normal: 400;
  --mr-chatbot-weight-medium: 500;
  --mr-chatbot-weight-semibold: 600;

  /* Spatial layout */
  --mr-chatbot-icon-gap: calc(var(--mr-chatbot-spacing) / 2);
  --mr-chatbot-icon-offset: calc(var(--mr-chatbot-icon-size) + var(--mr-chatbot-icon-gap));
  --mr-chatbot-bubble-radius: calc(var(--mr-chatbot-box-border-radius) * 2 / 3);

  /* Bubble padding — derived from spacing */
  --mr-chatbot-bubble-padding-v: calc(var(--mr-chatbot-spacing) * 7 / 8);
  --mr-chatbot-bubble-padding-h: calc(var(--mr-chatbot-spacing) * 2 / 3);

  /* Form elements */
  --mr-chatbot-input-height: 104px;

  /* Transitions */
  --mr-chatbot-transition: all ease-in-out 475ms;

  /* Keyboard avoidance (mobile) */
  --mr-kb: 0px;
}

/**
 * Font Loading
 */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

@font-face {
  font-family: 'HemmyIcons';
  src: url('../../Fonts/HemmyIcons/HemmyIcons.eot');
  src: url('../../Fonts/HemmyIcons/HemmyIcons.eot?#iefix') format('embedded-opentype'),
       url('../../Fonts/HemmyIcons/HemmyIcons.woff') format('woff'),
       url('../../Fonts/HemmyIcons/HemmyIcons.ttf') format('truetype'),
       url('../../Fonts/HemmyIcons/HemmyIcons.svg#HemmyIcons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.hemmy-icons {
  font-family: 'HemmyIcons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-trash:before { content: "\e900"; }
.icon-cross:before { content: "\e901"; }
.icon-help:before  { content: "\e902"; }
.icon-send:before  { content: "\e903"; }

@font-face {
  font-family: 'Calibre';
  src: url('../Fonts/Calibre/Calibre-Thin.woff2') format('woff2'),
       url('../Fonts/Calibre/Calibre-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Calibre';
  src: url('../Fonts/Calibre/Calibre-Light.woff2') format('woff2'),
       url('../Fonts/Calibre/Calibre-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Calibre';
  src: url('../Fonts/Calibre/Calibre-Regular.woff2') format('woff2'),
       url('../Fonts/Calibre/Calibre-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Calibre';
  src: url('../Fonts/Calibre/Calibre-Medium.woff2') format('woff2'),
       url('../Fonts/Calibre/Calibre-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Calibre';
  src: url('../Fonts/Calibre/Calibre-Semibold.woff2') format('woff2'),
       url('../Fonts/Calibre/Calibre-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Calibre';
  src: url('../Fonts/Calibre/Calibre-Bold.woff2') format('woff2'),
       url('../Fonts/Calibre/Calibre-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Calibre';
  src: url('../Fonts/Calibre/Calibre-Black.woff2') format('woff2'),
       url('../Fonts/Calibre/Calibre-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}