/* =====================================================================
   Harf & Esem — n8n chat widget theme
   cssbook/chatbook.css
   MUST be loaded AFTER https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css
   so these declarations win the cascade.

   Selectors deliberately mirror @n8n/chat's own shapes
   (.chat-layout .chat-header, .chat-window-wrapper .chat-window-toggle …)
   and do NOT rely on a .n8n-chat ancestor, so nothing depends on the
   widget's internal wrapper markup.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Design tokens — @n8n/chat declares its defaults on :root, so this
      block (loaded later) overrides them wholesale.
   --------------------------------------------------------------------- */
:root {
  /* ---- Brand ---- */
  --he-yellow:   #f6c71c;
  --he-yellow-d: #e5b708;
  --he-red:      #d22f45;
  --he-navy:     #102030;
  --he-blue:     #1070b0;
  --he-blue-d:   #0d5c92;
  --he-chat-bg:  #eff1f6;
  --he-send:     #5a50c8;

  /* ---- @n8n/chat public API ---- */
  --chat--font-family: "Cairo", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", "Helvetica Neue", sans-serif;

  --chat--color-primary:            #5a50c8;
  --chat--color-primary-shade-50:   #4f46b4;
  --chat--color-primary-shade-100:  #443ca0;
  --chat--color-secondary:          #1070b0;
  --chat--color-secondary-shade-50: #0d5c92;

  --chat--color-white:           #ffffff;
  --chat--color-light:           #eff1f6;
  --chat--color-light-shade-50:  #e4e7ef;
  --chat--color-light-shade-100: #d6dae6;
  --chat--color-medium:          #c3c8d6;
  --chat--color-dark:            #102030;
  --chat--color-disabled:        #9aa1b2;
  --chat--color-typing:          #6e7688;

  --chat--spacing:             1rem;
  --chat--border-radius:       14px;
  --chat--transition-duration: .18s;

  --chat--window--width:  400px;
  --chat--window--height: 620px;

  /* Header — golden band, crimson rule, navy type */
  --chat--header-height:          auto;
  --chat--header--padding:        18px 16px 14px;
  --chat--header--background:     #f6c71c;
  --chat--header--color:          #102030;
  --chat--header--border-top:     none;
  --chat--header--border-bottom:  6px solid #d22f45;
  --chat--header--border-left:    none;
  --chat--header--border-right:   none;
  --chat--heading--font-size:     0;       /* logo replaces the wordmark */
  --chat--subtitle--font-size:    15px;
  --chat--subtitle--line-height:  1.5;
  --chat--close--button--color:       #102030;
  --chat--close--button--color-hover: #d22f45;

  --chat--body--background:   #eff1f6;
  --chat--footer--background: #ffffff;
  --chat--footer--border-top: 1px solid #e4e7ef;

  --chat--message--font-size:        15px;
  --chat--message--padding:          12px 16px;
  --chat--message--border-radius:    14px;
  --chat--message--margin-bottom:    .6rem;
  --chat--message-line-height:       1.7;
  --chat--message--bot--background:  #ffffff;
  --chat--message--bot--color:       #102030;
  --chat--message--bot--border:      none;
  --chat--message--user--background: #1070b0;
  --chat--message--user--color:      #ffffff;
  --chat--message--user--border:     none;
  --chat--message--pre--background:  rgba(16, 32, 48, .05);

  --chat--toggle--background:         #f6c71c;
  --chat--toggle--hover--background:  #e5b708;
  --chat--toggle--active--background: #e5b708;
  --chat--toggle--color:              #102030;
  --chat--toggle--size:               60px;

  --chat--textarea--height: 50px;
}

/* ---------------------------------------------------------------------
   2) Shell + RTL
   --------------------------------------------------------------------- */
#n8n-chat { z-index: 99999; }

.n8n-chat,
.chat-layout {
  direction: rtl;
  text-align: right;
  font-family: var(--chat--font-family);
}

.chat-window-wrapper .chat-window {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(16, 32, 48, .22);
}

/* ---------------------------------------------------------------------
   3) Header — centred logo, subtitle beneath, close button pinned left
   --------------------------------------------------------------------- */
.chat-layout .chat-header {
  gap: 8px;
  text-align: center;
}

/* .chat-heading is a flex row (title + close button) with
   justify-content:space-between — recentre it and float the close button. */
.chat-layout .chat-header .chat-heading {
  position: relative;
  justify-content: center;
  width: 100%;
}

.chat-layout .chat-header .chat-heading .chat-close-button {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--he-navy);
  opacity: .7;
}
.chat-layout .chat-header .chat-heading .chat-close-button:hover { opacity: 1; }

/* Swap the <h1> wordmark for the Arabic logo, sized to fit and centred.
   Text stays in the DOM (hidden) so screen readers still announce it. */
.chat-layout .chat-header h1 {
  display: block;
  width: 100%;
  max-width: 170px;
  height: 84px;
  margin: 0 auto;
  background: url("../imagesbook/logo/logo-ar.png") center center / contain no-repeat;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}

.chat-layout .chat-header p {
  margin: 0;
  color: var(--he-navy);
  font-weight: 700;
  text-align: center;
}

/* ---------------------------------------------------------------------
   4) Body & messages
   --------------------------------------------------------------------- */
.chat-layout .chat-body { background: var(--he-chat-bg); }

.chat-message { text-align: right; }

.chat-message.chat-message-from-bot {
  background-color: var(--chat--message--bot--background);
  box-shadow: 0 1px 3px rgba(16, 32, 48, .08);
  /* RTL: flatten the corner on the right, not the left */
  border-bottom-left-radius: var(--chat--message--border-radius);
  border-bottom-right-radius: 0;
}
.chat-message.chat-message-from-user:not(.chat-message-transparent) {
  border-bottom-right-radius: var(--chat--message--border-radius);
  border-bottom-left-radius: 0;
}

/* ---------------------------------------------------------------------
   5) Composer
   --------------------------------------------------------------------- */
.chat-layout .chat-footer,
.chat-inputs { background: #ffffff; }

.chat-inputs textarea,
.chat-layout textarea {
  direction: rtl;
  text-align: right;
  font-family: var(--chat--font-family);
  font-size: 15px;
  color: var(--he-navy);
}
.chat-inputs textarea::placeholder,
.chat-layout textarea::placeholder { color: #8a92a4; }

.chat-inputs .chat-input-send-button,
.chat-input-send-button { color: var(--he-send); }

/* ---------------------------------------------------------------------
   6) Welcome / get-started screen
   --------------------------------------------------------------------- */
.chat-get-started .chat-button,
.chat-get-started button {
  background: var(--he-blue);
  color: #ffffff;
  border: none;
  border-radius: 980px;
  font-family: var(--chat--font-family);
  font-weight: 700;
}
.chat-get-started .chat-button:hover,
.chat-get-started button:hover { background: var(--he-blue-d); }

/* ---------------------------------------------------------------------
   7) Floating toggle
   --------------------------------------------------------------------- */
.chat-window-wrapper .chat-window-toggle {
  background: var(--he-yellow);
  color: var(--he-navy);
  box-shadow: 0 8px 22px rgba(16, 32, 48, .25);
}
.chat-window-wrapper .chat-window-toggle:hover { background: var(--he-yellow-d); }

/* ---------------------------------------------------------------------
   8) Small screens
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --chat--window--width:  100vw;
    --chat--window--height: 100dvh;
  }
  .chat-layout .chat-header h1 { max-width: 140px; height: 70px; }
}