@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');
/* =========================================================
   PRACTISI — UNIFIED GLOBAL HEADER & FOOTER SYSTEM
   Shared across all pages: index, courses, about, blog, etc.
========================================================= */

:root {
  --header-h: 80px;

  --shell:
    min(
      1480px,
      calc(100% - 72px)
    );

  --font:
    "Hanken Grotesk",
    "Helvetica Neue",
    Arial,
    sans-serif;

  --font-serif:
    "Cormorant Garamond",
    "Garamond",
    Georgia,
    serif;

  --text: #171717;
  --muted: #686864;
  --soft: #8C8C86;

  --line: #E6E6E0;

  --surface: #F7F7F5;
  --surface-deep: #EFEFE9;

  --green: #20663E;
  --green-hover: #1A5433;
  --green-dark: #16462B;

  --radius: 4px;
}


/* =========================================================
   GLOBAL MODAL LOCKS
========================================================= */

body.menu-open,
body.cookie-open {
  overflow: hidden;
}


/* =========================================================
   SHELL (CONTAINER)
========================================================= */

.site-shell {
  width: var(--shell);

  margin-inline: auto;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: sticky;

  top: 0;

  z-index: 80;

  height: var(--header-h);

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  backdrop-filter:
    blur(14px);
}


.site-header .header-inner {
  width: var(--shell);
}

.header-inner {
  height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;
}

.header-inner > .brand,
.header-inner > .header-actions {
  align-self: center;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
  min-width: 0;

  min-height: 60px;

  display: inline-flex;

  align-items: center;

  flex: 0 0 auto;
}


.brand img {
  width: auto;

  max-width: 260px;

  max-height: 56px;

  object-fit: contain;

  object-position: left center;
}


.brand-fallback {
  font-size: 20px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: -0.045em;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions {
  display: flex;

  align-items: center;

  gap: 10px;

  flex: 0 0 auto;
}


/* =========================================================
   LOGIN
========================================================= */

.login-button {
  min-height: 44px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 18px;

  border:
    1px solid
    #171717;

  border-radius: var(--radius);

  background: transparent;

  color: var(--text);

  font-size: 14px;

  font-weight: 600;

  transition:
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}


.login-button:hover {
  border-color: var(--green);

  background: transparent;

  color: var(--green);
}


.login-button:active {
  transform: translateY(1px);
}


/* =========================================================
   SHARED BUTTON UTILITIES
========================================================= */

.button {
  min-height: 44px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 18px;

  border: 0;

  border-radius: var(--radius);

  font-family: var(--font);

  font-size: 14px;

  line-height: 1;

  font-weight: 600;

  cursor: pointer;

  transition:
    background-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}


.button:active {
  transform: translateY(1px);
}


.button-primary {
  background: var(--green);

  color: #FFFFFF;
}


.button-primary:hover {
  background: var(--green-hover);
}


.button-soft {
  background: var(--surface);

  color: var(--text);
}


.button-soft:hover {
  background: var(--surface-deep);
}


.button-large {
  min-height: 52px;

  padding-inline: 24px;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  background: #F5F8F4;
}


.footer-main {
  display: grid;

  grid-template-columns:
    minmax(
      260px,
      1.05fr
    )
    minmax(
      620px,
      1.45fr
    );

  gap: 90px;

  padding:
    90px
    0
    0;
}


.footer-brand {
  max-width: 390px;
}


.footer-brand p {
  margin:
    22px
    0
    0;

  color: #343431;

  font-family: var(--font);

  font-size: 15px;

  line-height: 1.6;

  letter-spacing: -0.01em;

  max-width: 245px;
}


.footer-columns {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 44px;
}


.footer-columns section {
  display: grid;

  align-content: start;

  justify-items: start;

  gap: 12px;
}


.footer-columns h3 {
  margin:
    0
    0
    9px;

  font-size: 13px;

  font-weight: 700;
}


.footer-columns a,
.footer-link-button {
  color: var(--muted);

  font-size: 13px;

  transition:
    color
    150ms
    ease;
}


.footer-columns a:hover,
.footer-link-button:hover {
  color: var(--green-dark);
}


.footer-link-button {
  border: 0;

  background: transparent;

  padding: 0;

  text-align: left;

  cursor: pointer;
}


.footer-divider {
  width: 100%;

  height: 1px;

  margin-top: 138px;

  background: var(--line);
}


.footer-bottom {
  min-height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  color: var(--text);

  font-size: 12px;
}


.footer-legal {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 16px;

  row-gap: 8px;

  color: var(--text);
}


.footer-dns-button {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: var(--text);

  font-size: 12px;

  cursor: pointer;

  transition: color 150ms ease;
}


.footer-dns-button:hover,
.footer-link-button.footer-dns-button:hover {
  color: var(--soft);
}


.footer-dns-icon {
  width: 26px;

  height: 13px;

  display: inline-block;

  vertical-align: middle;

  object-fit: contain;
}


/* =========================================================
   FOOTER ACTIONS & LANGUAGE PICKER
========================================================= */

.footer-bottom-actions {
  display: flex;

  align-items: center;

  gap: 20px;
}


.footer-bottom-divider,
.footer-legal-divider {
  color: var(--line);

  user-select: none;
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.social-links {
  display: flex;

  gap: 10px;
}


.social-links a {
  width: 38px;

  height: 38px;

  display: grid;

  place-items: center;

  border: 0;

  border-radius: 50%;

  background: var(--surface);

  transition:
    background-color
    150ms
    ease;
}


.social-links a:hover {
  background: var(--surface-deep);
}


.social-links img {
  width: 17px;

  height: 17px;

  object-fit: contain;
}


/* =========================================================
   COOKIE PREFERENCES MODAL
========================================================= */

.cookie-layer {
  position: fixed;

  inset: 0;

  z-index: 200;
}


.cookie-layer[hidden] {
  display: none;
}


.cookie-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(
      17,
      17,
      16,
      0.56
    );
}


.cookie-modal {
  position: absolute;

  top: 50%;

  left: 50%;

  width:
    min(
      680px,
      calc(
        100% - 34px
      )
    );

  max-height:
    min(
      760px,
      calc(
        100svh - 34px
      )
    );

  overflow: auto;

  transform:
    translate(
      -50%,
      -50%
    );

  border: 0;

  border-radius: var(--radius);

  background: #FFFFFF;
}


.cookie-header {
  padding:
    30px
    56px
    14px
    30px;
}


.cookie-modal h2 {
  margin: 0;

  font-size: 24px;

  line-height: 1.15;

  letter-spacing: -0.025em;

  font-weight: 700;
}


.cookie-intro {
  margin:
    10px
    0
    0;

  padding: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}


.cookie-close {
  position: absolute;

  top: 22px;

  right: 22px;

  z-index: 10;

  width: 32px;

  height: 32px;

  border: 0;

  border-radius: 50%;

  background: transparent;

  cursor: pointer;

  padding: 0;

  display: grid;

  place-items: center;

  transition:
    background-color 150ms ease;
}


.cookie-close:hover {
  background: rgba(23, 23, 23, 0.07);
}


.cookie-close span {
  position: absolute;

  top: 50%;

  left: 50%;

  width: 12px;

  height: 1.5px;

  background: var(--text);

  border-radius: 1px;
}


.cookie-close
span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}


.cookie-close
span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}


.cookie-options {
  display: grid;

  gap: 8px;

  padding:
    0
    30px
    24px;
}


.cookie-option {
  min-height: 84px;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 20px;

  align-items: center;

  padding: 14px;

  border: 0;

  border-radius: var(--radius);

  background: var(--surface);
}


.cookie-option strong,
.cookie-option span {
  display: block;
}


.cookie-option strong {
  font-size: 14px;
}


.cookie-option
div > span {
  margin-top: 5px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.45;
}


.always-on {
  color: var(--green-dark);

  font-size: 12px;

  font-weight: 600;
}


.cookie-option-disabled {
  cursor: not-allowed;
}


.cookie-option input:disabled + .switch {
  opacity: 0.55;

  cursor: not-allowed;
}


.cookie-option input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.switch {
  position: relative;

  width: 42px;

  height: 24px;

  border-radius: 99px;

  background: #D8D8D2;

  cursor: pointer;

  transition:
    background-color
    150ms
    ease;
}


.switch::after {
  content: "";

  position: absolute;

  top: 3px;

  left: 3px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: #FFFFFF;

  transition:
    transform
    150ms
    ease;
}


.cookie-option
input:checked +
.switch {
  background: var(--green);
}


.cookie-option
input:checked +
.switch::after {
  transform: translateX(18px);
}


.cookie-modal > footer {
  display: flex;

  justify-content: flex-end;

  gap: 10px;

  padding:
    20px
    30px
    28px;
}


/* =========================================================
   RESPONSIVE — HEADER & FOOTER
========================================================= */

@media (max-width: 1260px) {
  :root {
    --shell: min(1180px, calc(100% - 48px));
  }

  .footer-main {
    grid-template-columns:
      0.8fr
      1.2fr;

    gap: 60px;
  }
}


@media (max-width: 980px) {
  :root {
    --header-h: 70px;

    --shell:
      min(
        920px,
        calc(100% - 34px)
      );
  }

  .header-inner {
    justify-content: space-between;
  }

  .footer-main {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .footer-brand {
    max-width: 520px;
  }
}


@media (max-width: 760px) {
  .site-header .brand {
    transform: translateX(-15px);
  }
}


@media (max-width: 700px) {
  :root {
    --header-h: 66px;

    --shell:
      calc(100% - 28px);
  }

  .brand img {
    max-width: 132px;
  }

  .footer-main {
    padding-top: 70px;
  }

  .footer-columns {
    grid-template-columns:
      1fr
      1fr;

    gap:
      42px
      26px;
  }

  .footer-divider {
    margin-top: 104px;
  }

  .footer-bottom {
    min-height: 68px;

    flex-wrap: wrap;

    gap: 16px;
  }

  .footer-bottom-actions {
    width: 100%;

    justify-content: space-between;
  }

  .cookie-header,
  .cookie-options,
  .cookie-modal > footer {
    padding-left: 20px;

    padding-right: 20px;
  }

  .cookie-header {
    padding-top: 26px;

    padding-right: 50px;
  }

  .cookie-close {
    top: 18px;

    right: 18px;
  }

  .cookie-modal > footer {
    display: grid;

    grid-template-columns: 1fr;
  }
}


@media (max-width: 460px) {
  .footer-columns {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    min-height: 64px;

    flex-direction: column;

    align-items: flex-start;

    gap: 14px;

    padding: 12px 0;
  }

  .footer-bottom-actions {
    flex-wrap: wrap;

    gap: 12px;
  }
}
html[data-theme="dark"]

/* Privacy choices: left panel with independently expandable categories. */
.cookie-modal{top:0;left:0;bottom:0;transform:none;width:min(480px,100%);height:100%;max-height:100svh;display:flex;flex-direction:column;overflow:hidden;border:0;border-radius:4px}
.cookie-header{flex-shrink:0;padding:30px 56px 20px 30px}
.cookie-options{flex:1;min-height:0;overflow-y:auto;align-content:start}
.cookie-modal>footer{flex-shrink:0;margin-top:auto;flex-wrap:wrap;border:0}
.cookie-option.cookie-accordion{display:block;min-height:0;padding:0;border:0;border-radius:4px}
.cookie-category-row{display:flex;align-items:center;gap:14px;padding:18px 14px}
.cookie-disclosure{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:0;border:0;background:transparent;text-align:left;color:var(--text);font:inherit;cursor:pointer}
.cookie-expand-icon{position:relative;flex-shrink:0;width:14px;height:14px}
.cookie-expand-icon::before,.cookie-expand-icon::after{content:"";position:absolute;top:6px;left:1px;width:12px;height:2px;background:currentColor;border-radius:1px}
.cookie-expand-icon::after{transform:rotate(90deg)}
.cookie-disclosure[aria-expanded="true"] .cookie-expand-icon::after{display:none}
.cookie-toggle-label{display:block;flex-shrink:0;cursor:pointer}
.cookie-toggle-label input:focus-visible+.switch{outline:2px solid var(--green);outline-offset:3px}
.cookie-category-description{padding:0 18px 18px 40px;color:var(--muted);font-size:12px;line-height:1.5}
.cookie-category-description[hidden]{display:none}
.cookie-disclosure:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:4px}
@media(max-width:540px){.cookie-header{padding-left:20px}.cookie-options{padding-left:20px;padding-right:20px}.cookie-modal>footer{padding:20px}}

.cookie-layer{z-index:10000}

.cookie-panel-brand{display:flex;align-items:center;flex-shrink:0;min-height:76px;padding:20px 30px;border-bottom:1px solid var(--border);box-sizing:border-box}
.cookie-panel-brand img{display:block;width:128px;height:auto}
.cookie-panel-body{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0;overflow-y:auto;padding:24px 0}
.cookie-panel-body .cookie-header{padding-top:0}
.cookie-panel-body .cookie-options{flex:0 0 auto;overflow:visible;padding-bottom:0}
.cookie-modal>footer{border-top:1px solid var(--border)}
.cookie-modal #rejectOptional{border:0.5px solid var(--text);color:var(--text);background:transparent;box-shadow:none}
.cookie-modal #rejectOptional:hover{border-color:var(--green);color:var(--green);background:transparent}
@media(max-height:650px){.cookie-panel-body{justify-content:flex-start}}
.cookie-modal #rejectOptional{border:0.5px solid #171717!important;color:#171717!important;background:transparent!important}
.cookie-modal #rejectOptional:hover{border-color:var(--green)!important;color:var(--green)!important;background:transparent!important}

.cookie-panel-body{padding:56px 0 24px;scrollbar-width:none;-ms-overflow-style:none}
.cookie-panel-body::-webkit-scrollbar{display:none;width:0;height:0}
@media(max-height:650px){.cookie-panel-body{padding-top:32px}}

/* Keep tall privacy content centered without clipping its scrollable top. */
.cookie-panel-body{justify-content:flex-start;padding:40px 0;box-sizing:border-box}
.cookie-panel-body>.cookie-header{margin-top:auto}
.cookie-panel-body>.cookie-options{margin-bottom:auto}

/* =========================================================
   ASK PRACTISI — INSTITUTIONAL INTELLIGENCE PANEL (LIGHT ONLY)
========================================================= */

.ask-practisi-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: #171717;
  transition: background-color 0.15s ease;
  margin: 0;
}

.ask-practisi-trigger:hover,
.ask-practisi-trigger:focus-visible {
  background-color: #F0F0ED;
}

.ask-practisi-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.ask-practisi-panel-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ask-practisi-website-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  height: 100vh;
  background: #FFFFFF;
  border-left: 1px solid #E6E6E0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none !important;
  font-family: var(--font, "Hanken Grotesk", sans-serif);
  color: #171717;
}

.ask-practisi-website-panel.is-open {
  transform: translateX(0);
}

.ask-practisi-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #E6E6E0;
  min-height: 56px;
  box-sizing: border-box;
}

.ask-practisi-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #171717;
}

.ask-practisi-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ask-practisi-icon-btn {
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 50%;
  color: #686864;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ask-practisi-icon-btn:hover {
  background-color: #F0F0ED;
  color: #171717;
}

.ask-practisi-dialogue-stream {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.ask-practisi-guest-banner {
  padding: 10px 14px;
  background: #F7F7F5;
  border-bottom: 1px solid #E6E6E0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.ask-practisi-starters {
  margin-top: auto;
  margin-bottom: 12px;
}

.ask-practisi-starters p {
  font-size: 14px;
  color: #686864;
  margin-bottom: 14px;
}

.ask-practisi-starter-btn {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #E6E6E0;
  background: #FFFFFF;
  color: #171717;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ask-practisi-starter-btn:hover {
  background: #F7F7F5;
  border-color: #D4D4CE;
}

.ask-practisi-msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ask-practisi-msg-row.user {
  flex-direction: row-reverse;
}

.ask-practisi-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F7F7F5;
  border: 1px solid #E6E6E0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
}

.ask-practisi-msg-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.ask-practisi-msg-row.assistant .ask-practisi-msg-bubble {
  background: #F7F7F5;
  color: #171717;
  border-top-left-radius: 4px;
}

.ask-practisi-msg-row.user .ask-practisi-msg-bubble {
  background: #20663E;
  color: #FFFFFF;
  border-top-right-radius: 4px;
}

.ask-practisi-composer {
  padding: 12px 14px;
  border-top: 1px solid #E6E6E0;
  background: #FFFFFF;
}

.ask-practisi-input-box {
  border: 1px solid #E6E6E0;
  border-radius: 12px;
  background: #FFFFFF;
  overflow: hidden;
  position: relative;
}

.ask-practisi-textarea {
  width: 100%;
  min-height: 48px;
  max-height: 200px;
  padding: 12px 14px;
  border: 0;
  outline: 0;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  box-sizing: border-box;
  background: transparent;
  color: #171717;
}

.ask-practisi-composer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 8px 8px;
}

.ask-practisi-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: #20663E;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.ask-practisi-send-btn:disabled {
  background: #E6E6E0;
  cursor: default;
}


/* Ask Practisi follows Clare's panel and composer geometry. */
.ask-practisi-panel,.ask-practisi-website-panel { --chat-surface:#f7f7f5; --chat-raised:#fff; --chat-text:#171717; --chat-muted:#6b6b68; background:var(--chat-surface) !important; color:var(--chat-text); width:min(380px,100vw) !important; padding:0 !important; border:0 !important; box-shadow:none !important; overflow:hidden; }
html[data-theme="dark"] .ask-practisi-panel,html[data-theme="dark"] .ask-practisi-website-panel { --chat-surface:#1f1f1e; --chat-raised:#30302e; --chat-text:#f2f2ef; --chat-muted:#a1a19b; }
.ask-practisi-panel .clare-panel-header,.ask-practisi-panel-header { height:var(--ask-header-height,80px); min-height:var(--ask-header-height,80px) !important; padding:0 20px !important; border:0 !important; background:var(--chat-surface) !important; flex-shrink:0; }
.ask-practisi-panel .clare-panel-header strong,.ask-practisi-header-title { font-size:15px !important; font-weight:600; color:var(--chat-text); }
.ask-practisi-header-title { gap:10px; }
.ask-practisi-sparkle { display:block; width:24px; height:24px; flex-shrink:0; object-fit:contain; background:transparent; mask:none; -webkit-mask:none; filter:none !important; }
.ask-practisi-panel .clare-dialogue-stream,.ask-practisi-dialogue-stream { min-height:0; padding:20px !important; }
.ask-practisi-panel .clare-composer,.ask-practisi-composer { padding:0 20px 20px !important; border:0 !important; background:var(--chat-surface) !important; flex-shrink:0; }
.ask-practisi-panel .prompt-editor,.ask-practisi-input-box { border:0 !important; border-radius:4px !important; box-shadow:none !important; background:var(--chat-raised) !important; position:relative; overflow:hidden; }
.ask-practisi-panel textarea.clare-message-input,.ask-practisi-textarea { display:block; width:100%; min-height:48px !important; max-height:240px; padding:12px 14px !important; border:0 !important; outline:0; resize:none; font:inherit; font-size:14px; line-height:24px; background:transparent !important; color:var(--chat-text); box-sizing:border-box; }
.ask-practisi-panel .prompt-editor footer,.ask-practisi-composer-footer { position:static !important; inset:auto !important; transform:none !important; display:flex !important; justify-content:flex-end !important; align-items:center; gap:8px; width:100% !important; padding:0 8px 8px !important; border:0 !important; background:transparent !important; }
.ask-practisi-panel .prompt-editor:has(textarea:placeholder-shown) textarea,.ask-practisi-input-box:not(.has-draft) textarea { padding-right:88px !important; }
.ask-practisi-panel .prompt-editor:has(textarea:placeholder-shown) footer,.ask-practisi-input-box:not(.has-draft) .ask-practisi-composer-footer { position:absolute !important; top:50% !important; right:8px !important; left:auto !important; width:auto !important; transform:translateY(-50%) !important; padding:0 !important; }
.ask-practisi-panel .clare-starter-button,.ask-practisi-starter-btn { border:0 !important; border-radius:4px !important; background:var(--chat-raised) !important; color:var(--chat-text) !important; box-shadow:none; }
.ask-practisi-panel .clare-starter-button:hover,.ask-practisi-starter-btn:hover { background:color-mix(in srgb,var(--chat-raised) 90%,#20663e) !important; }
.ask-practisi-panel .clare-disclaimer,.ask-practisi-website-panel .clare-disclaimer { margin:20px 0 0; padding:0; text-align:center; font-size:11px; line-height:1.5; color:var(--chat-muted); border:0; }
.clare-disclaimer a { color:inherit; text-decoration:underline; }
.ask-practisi-panel [hidden],.ask-practisi-website-panel [hidden],.ask-practisi-voice[hidden],.ask-practisi-history[hidden],.ask-practisi-audio-status[hidden],.clare-dictation-waveform[hidden] { display:none !important; }
.ask-practisi-send-icon { width:14px; height:14px; display:inline-block; background:currentColor; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M8 12.5V3.5M8 3.5L3.5 8M8 3.5L12.5 8' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M8 12.5V3.5M8 3.5L3.5 8M8 3.5L12.5 8' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.ask-practisi-send-btn,.ask-practisi-dictate-btn { width:28px; height:28px; min-height:28px; min-width:28px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:#20663e; color:#fff; }
.ask-practisi-dictate-btn { background:transparent; color:var(--chat-text); }
.clare-control-icon { display:inline-block; flex-shrink:0; background:currentColor; }
.ask-practisi-panel .clare-history-panel,.ask-practisi-history { padding:20px; background:#eeeee9; flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
html[data-theme="dark"] .ask-practisi-panel .clare-history-panel,html[data-theme="dark"] .ask-practisi-history { background:#171716; }
.ask-practisi-history header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:20px; }
.ask-practisi-history input { min-width:0; width:120px; border:0; border-radius:4px; padding:8px; background:var(--chat-raised); color:var(--chat-text); }
.ask-practisi-history-results { flex:1; overflow:auto; }
.ask-practisi-history-results button { display:block; width:100%; text-align:left; border:0; background:transparent; color:inherit; padding:12px 8px; border-radius:4px; }
.ask-practisi-history footer { margin-top:auto; padding-top:20px; border:0; }
.ask-practisi-history-new { display:flex; align-items:center; gap:8px; padding:10px 14px; border:0; border-radius:4px; background:var(--chat-raised); color:var(--chat-text); }
.ask-practisi-voice { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:20px; }
.ask-practisi-voice p { text-align:center; font-size:13px; }
.ask-practisi-icon-btn { color:var(--chat-muted); }

.ask-practisi-website-panel.ask-history-open .ask-practisi-history { position:absolute; top:var(--ask-header-height,80px); bottom:0; left:0; width:65%; z-index:2; box-sizing:border-box; }
.ask-practisi-website-panel.ask-history-open .ask-practisi-dialogue-stream,.ask-practisi-website-panel.ask-history-open .ask-practisi-composer { position:relative; left:65%; width:100%; box-sizing:border-box; }
.ask-practisi-message-utilities { display:flex; gap:8px; margin-top:8px; }
.ask-practisi-message-utilities button { border:0; background:transparent; color:var(--chat-muted); padding:0 !important; margin:0 !important; width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; max-width:28px !important; max-height:28px !important; flex:0 0 28px !important; aspect-ratio:1 / 1 !important; border-radius:50% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; overflow:hidden !important; line-height:1 !important; cursor:pointer; }
.ask-practisi-msg-avatar { border:0; background:var(--chat-raised); }
.ask-practisi-msg-row.assistant .ask-practisi-msg-bubble { background:var(--chat-raised); color:var(--chat-text); }
.ask-practisi-welcome { width: 100%; margin: auto 0 !important; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ask-practisi-welcome-title { margin: 0 auto; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; color: var(--chat-text, #171717); text-align: center; max-width: 320px; white-space: pre-line; word-wrap: break-word; }
html[data-theme="dark"] .ask-practisi-welcome-title { color: var(--chat-text, #f2f2ef); }

.ask-practisi-website-panel { font-family:Onest,Inter,ui-sans-serif,system-ui,sans-serif; font-size:14px; }
.ask-practisi-website-panel button,.ask-practisi-website-panel input,.ask-practisi-website-panel textarea { font-family:inherit; }
.ask-practisi-history-row { position:relative; display:flex; align-items:center; }
.ask-practisi-history-row > button:first-child { min-width:0; flex:1; }
.ask-practisi-history-results .ask-practisi-history-more { flex:0 0 28px; width:28px; padding:6px; }
.ask-practisi-history-menu { position:absolute; top:100%; right:0; width:174px; z-index:3; padding:6px; background:var(--chat-raised); border-radius:4px; }
.ask-practisi-history-results .ask-practisi-history-menu button { display:flex; align-items:center; gap:8px; padding:8px; font-size:13px; }
.ask-practisi-trash { display:inline-block; width:16px; height:16px; background:currentColor; mask:url('../../assets/icons/delete.svg') center / contain no-repeat; -webkit-mask:url('../../assets/icons/delete.svg') center / contain no-repeat; }

.ask-practisi-panel,.ask-practisi-website-panel { gap:0 !important; box-sizing:border-box; }

.clare-history-results,.ask-practisi-history-results { position:relative; }
.clare-history-loading { position:absolute; inset:0; display:grid; place-items:center; }
.clare-history-loading-icon { display:block; width:28px; height:28px; background:currentColor; mask:url('/icons/loading-svgrepo-com.svg') center / contain no-repeat; -webkit-mask:url('/icons/loading-svgrepo-com.svg') center / contain no-repeat; animation:app-loading-spin .9s linear infinite; }
.ask-practisi-panel .prompt-editor.clare-is-dictating footer { position:static !important; inset:auto !important; transform:none !important; width:100% !important; padding:0 8px 8px !important; }
.ask-practisi-panel .clare-composer-controls { gap:8px; }
.ask-practisi-panel .clare-dictation-waveform { flex:1 1 0; min-width:0; width:0; height:28px; color:var(--muted); }
.ask-practisi-panel .prompt-editor.clare-voice-ready textarea { padding-bottom:52px !important; }
.ask-practisi-panel .prompt-editor.clare-voice-ready footer { position:absolute !important; top:auto !important; bottom:8px !important; transform:none !important; }

.ask-practisi-website-panel .clare-history-loading-icon { mask-image:url('/assets/icons/loading-svgrepo-com.svg'); -webkit-mask-image:url('/assets/icons/loading-svgrepo-com.svg'); animation:ask-history-spin .9s linear infinite; }
@keyframes ask-history-spin { to { transform:rotate(360deg); } }
.ask-practisi-trigger .ask-practisi-sparkle { display:block !important; width:28px !important; height:28px !important; opacity:1 !important; visibility:visible !important; filter:none !important; }
.ask-practisi-website-panel .clare-composer-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; margin-left:auto; }
.ask-practisi-website-panel .clare-dictation-waveform { flex:1 1 0; min-width:0; width:0; height:28px; color:var(--chat-muted); }
.ask-practisi-website-panel .ask-practisi-input-box.clare-is-dictating .ask-practisi-composer-footer { position:static !important; inset:auto !important; transform:none !important; width:100% !important; padding:0 8px 8px !important; }
.ask-practisi-website-panel .ask-practisi-audio-status { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; line-height:20px; padding:10px 14px 6px; color:var(--chat-text); }
.ask-practisi-website-panel .ask-practisi-audio-status.is-error { color:#b13a2c; }
.ask-practisi-website-panel .ask-practisi-voice { min-height:0; padding:16px 14px 8px; }
.ask-practisi-website-panel .clare-voice-center { flex:1; min-height:200px; display:flex; align-items:center; justify-content:center; }
.ask-practisi-website-panel .ask-practisi-voice canvas { width:160px; height:160px; }
.ask-practisi-website-panel .ask-practisi-input-box.clare-voice-ready textarea { padding-bottom:52px !important; }
.ask-practisi-website-panel .ask-practisi-input-box.clare-voice-ready .ask-practisi-composer-footer { top:auto !important; bottom:8px !important; transform:none !important; }
.ask-practisi-website-panel .ask-practisi-dictate-btn.is-muted { color:#dc2626; }

.clare-history-panel { position:relative; }
.clare-history-results:has(.clare-history-loading),.ask-practisi-history-results:has(.clare-history-loading) { position:static; }

/* Center the empty chat and keep response branding compact. */
.ask-practisi-welcome,.ask-practisi-starters { width:100%; margin:auto 0 !important; text-align:center; }
.ask-practisi-welcome .clare-starter-button,.ask-practisi-starter-btn { text-align:center !important; }
.ask-practisi-reply-logo { display:block; width:20px !important; height:20px !important; max-width:20px; object-fit:contain; border-radius:0 !important; background:transparent !important; filter:none !important; }
.ask-practisi-panel .clare-user-message-actions { max-height:0; opacity:0; overflow:hidden; margin:0; justify-content:flex-end; }
.ask-practisi-panel .clare-message-row.user:hover .clare-user-message-actions,.ask-practisi-panel .clare-message-row.user:focus-within .clare-user-message-actions { max-height:32px; opacity:1; margin-top:8px; }
.ask-practisi-panel .clare-response-actions button:hover,.ask-practisi-panel .clare-user-message-actions button:hover { color:#171717 !important; }
html[data-theme="dark"] .ask-practisi-panel .clare-response-actions button:hover,html[data-theme="dark"] .ask-practisi-panel .clare-user-message-actions button:hover { color:#fff !important; }
.ask-practisi-panel.ask-history-open { background:#eeeee9 !important; }
.ask-practisi-panel.ask-history-open .clare-panel-header { background:#eeeee9 !important; z-index:4; }
.ask-practisi-panel.ask-history-open .clare-panel-header > div:last-child { display:none; }
.ask-practisi-panel.ask-history-open .clare-history-header { justify-content:flex-end; }
html[data-theme="dark"] .ask-practisi-panel.ask-history-open,html[data-theme="dark"] .ask-practisi-panel.ask-history-open .clare-panel-header { background:#171716 !important; }
@media (hover:none) { .ask-practisi-panel .clare-user-message-actions { max-height:32px; opacity:1; margin-top:8px; } }

.ask-practisi-msg-row.assistant { flex-direction:column; gap:8px; }
.ask-practisi-msg-row.assistant .ask-practisi-msg-avatar { width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; border-radius:50% !important; background:transparent !important; border:0 !important; display:grid !important; place-items:center !important; flex:0 0 28px !important; padding:0 !important; margin:0 !important; }
.ask-practisi-msg-row.assistant .ask-practisi-msg-bubble { max-width:100%; padding:0; background:transparent; }
.ask-practisi-message-utilities button { width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; max-width:28px !important; max-height:28px !important; flex:0 0 28px !important; aspect-ratio:1 / 1 !important; padding:0 !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; border-radius:50% !important; overflow:hidden !important; line-height:1 !important; }
.ask-practisi-message-utilities button:hover { color:#171717; background:#e9e9e6; }
html[data-theme="dark"] .ask-practisi-message-utilities button:hover { color:#fff; background:#30302e; }
.ask-practisi-msg-row.user .clare-user-message-actions { max-height:0; opacity:0; overflow:hidden; margin:0; justify-content:flex-end; }
.ask-practisi-msg-row.user:hover .clare-user-message-actions,.ask-practisi-msg-row.user:focus-within .clare-user-message-actions { max-height:32px; opacity:1; margin-top:8px; }
.ask-practisi-edit-backdrop { position:fixed; inset:0; z-index:100001; background:#0006; display:grid; place-items:center; padding:20px; }
.ask-practisi-edit-dialog { width:min(400px,100%); padding:24px; border-radius:4px; background:var(--surface,#f7f7f5); color:var(--text,#171717); }
.ask-practisi-edit-dialog textarea { width:100%; min-height:120px; resize:vertical; font:inherit; padding:12px; border:0; border-radius:4px; }
.ask-practisi-edit-dialog button { margin:12px 8px 0 0; padding:9px 12px; border:0; border-radius:4px; cursor:pointer; }
@media (hover:none) { .ask-practisi-msg-row.user .clare-user-message-actions { max-height:32px; opacity:1; margin-top:8px; } }

/* History remains distinct from the chat exposed beside it. */
.ask-practisi-panel.ask-history-open { background:var(--chat-surface) !important; }
.ask-practisi-panel.ask-history-open .clare-panel-header { background:linear-gradient(to right,#eeeee9 65%,var(--chat-surface) 65%) !important; }
.ask-practisi-panel.ask-history-open .clare-dialogue-stream { background:var(--chat-surface) !important; }
html[data-theme="dark"] .ask-practisi-panel.ask-history-open { background:var(--chat-surface) !important; }
html[data-theme="dark"] .ask-practisi-panel.ask-history-open .clare-panel-header { background:linear-gradient(to right,#171716 65%,var(--chat-surface) 65%) !important; }
.clare-history-recent { margin:0 8px 6px; color:var(--muted,#6b6b68); font-size:12px; font-weight:400; line-height:20px; flex-shrink:0; }
.clare-history-panel .clare-history-header { margin-bottom:10px; }
.ask-practisi-guest-avatar { display:grid; place-items:center; background:#20663e !important; color:#fff; border-radius:50%; width:28px; height:28px; flex:0 0 28px; }
.ask-practisi-guest-icon { display:block; width:17px; height:17px; background:#fff; mask:url('/icons/user-svgrepo-com.svg') center / contain no-repeat; -webkit-mask:url('/icons/user-svgrepo-com.svg') center / contain no-repeat; }
.ask-practisi-reply-brand,
.ask-practisi-website-panel .ask-practisi-reply-brand,
html[data-theme="dark"] .ask-practisi-reply-brand,
html[data-theme="dark"] .ask-practisi-website-panel .ask-practisi-reply-brand,
html[data-theme="dark"] .ask-practisi-panel .ask-practisi-reply-brand {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}
.ask-practisi-reply-logo,
.ask-practisi-website-panel .ask-practisi-reply-logo {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: none !important;
}
.ask-practisi-panel .prompt-editor.clare-voice-ready textarea { padding:12px 88px 12px 14px !important; }
.ask-practisi-panel .prompt-editor.clare-voice-ready footer { position:absolute !important; top:50% !important; bottom:auto !important; right:8px !important; left:auto !important; transform:translateY(-50%) !important; width:auto !important; padding:0 !important; }

.ask-practisi-website-panel.ask-history-open { background:var(--chat-surface) !important; }
.ask-practisi-website-panel.ask-history-open .ask-practisi-panel-header { background:linear-gradient(to right,#eeeee9 65%,var(--chat-surface) 65%) !important; position:relative !important; z-index:4 !important; }
.ask-practisi-website-panel.ask-history-open .ask-practisi-dialogue-stream { background:var(--chat-surface) !important; }
html[data-theme="dark"] .ask-practisi-website-panel.ask-history-open { background:var(--chat-surface) !important; }
html[data-theme="dark"] .ask-practisi-website-panel.ask-history-open .ask-practisi-panel-header { background:linear-gradient(to right,#171716 65%,var(--chat-surface) 65%) !important; }
.ask-practisi-history header { margin-bottom:10px; }
.ask-practisi-website-panel .ask-practisi-guest-icon { mask-image:url('/assets/icons/clare/user-svgrepo-com.svg'); -webkit-mask-image:url('/assets/icons/clare/user-svgrepo-com.svg'); }
.ask-practisi-website-panel .ask-practisi-msg-row.assistant .ask-practisi-msg-avatar { width:28px; height:28px; }

.ask-practisi-website-panel.ask-history-open .ask-practisi-history { position:absolute !important; top:var(--ask-header-height,80px) !important; bottom:0 !important; left:0 !important; width:65% !important; z-index:2 !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; padding:20px !important; background:#eeeee9 !important; overflow:hidden !important; }
html[data-theme="dark"] .ask-practisi-website-panel.ask-history-open .ask-practisi-history { background:#171716 !important; }
.ask-practisi-website-panel.ask-history-open .ask-practisi-history-results { flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; display:flex !important; flex-direction:column !important; }
.ask-practisi-website-panel.ask-history-open .ask-practisi-history footer { margin-top:auto !important; padding-top:16px !important; border:0 !important; flex-shrink:0 !important; }
.ask-practisi-website-panel .ask-practisi-history-new { display:inline-flex !important; align-items:center !important; gap:8px !important; padding:10px 14px !important; border:0 !important; border-radius:4px !important; background:var(--chat-raised,#fff) !important; color:var(--chat-text,#171717) !important; font-size:13px !important; font-weight:500 !important; cursor:pointer !important; box-shadow:none !important; width:auto !important; }
.ask-practisi-website-panel .ask-practisi-history-new:hover { background:color-mix(in srgb,var(--chat-raised) 90%,#20663e) !important; }

.ask-practisi-website-panel.ask-history-open:not(.ask-search-open) .ask-practisi-header-actions { display:flex !important; position:absolute !important; right:calc(35% + 16px) !important; left:auto !important; }
.ask-practisi-website-panel.ask-history-open:not(.ask-search-open) .ask-practisi-header-actions > button { display:none !important; }
.ask-practisi-website-panel.ask-history-open:not(.ask-search-open) .ask-practisi-header-actions > .ask-history-search { display:grid !important; place-items:center !important; }
.ask-practisi-website-panel.ask-history-open:not(.ask-search-open) .ask-practisi-header-actions > .ask-history-search svg { display:block !important; width:18px !important; height:18px !important; }
.ask-practisi-website-panel.ask-history-open .ask-practisi-dialogue-stream,.ask-practisi-website-panel.ask-history-open .ask-practisi-composer { position:relative !important; left:65% !important; width:100% !important; box-sizing:border-box !important; }

/* Horizontal alignment of textarea default text with dictate & send buttons */
.ask-practisi-website-panel .ask-practisi-input-box { border:0 !important; border-radius:4px !important; box-shadow:none !important; background:var(--chat-raised) !important; position:relative !important; overflow:hidden !important; min-height:48px !important; }
.ask-practisi-website-panel .ask-practisi-textarea { display:block !important; width:100% !important; min-height:48px !important; max-height:240px !important; padding:12px 14px !important; border:0 !important; outline:0 !important; resize:none !important; font-family:inherit !important; font-size:14px !important; line-height:24px !important; background:transparent !important; color:var(--chat-text) !important; box-sizing:border-box !important; }
.ask-practisi-website-panel .ask-practisi-input-box:not(.has-draft) .ask-practisi-textarea,
.ask-practisi-website-panel .ask-practisi-textarea:placeholder-shown { height:48px !important; min-height:48px !important; line-height:24px !important; padding:12px 88px 12px 14px !important; margin:0 !important; }
.ask-practisi-website-panel .ask-practisi-input-box:not(.has-draft) .ask-practisi-composer-footer,
.ask-practisi-website-panel .ask-practisi-input-box:has(.ask-practisi-textarea:placeholder-shown) .ask-practisi-composer-footer { position:absolute !important; top:50% !important; right:8px !important; left:auto !important; width:auto !important; transform:translateY(-50%) !important; padding:0 !important; margin:0 !important; display:flex !important; align-items:center !important; z-index:2 !important; }
.ask-practisi-website-panel .clare-composer-controls { display:flex !important; align-items:center !important; gap:8px !important; margin:0 !important; padding:0 !important; }
.ask-practisi-website-panel .ask-practisi-dictate-btn,
.ask-practisi-website-panel .ask-practisi-send-btn { width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; padding:0 !important; border:0 !important; border-radius:50% !important; display:grid !important; place-items:center !important; cursor:pointer !important; margin:0 !important; box-sizing:border-box !important; }
.ask-practisi-website-panel .ask-practisi-dictate-btn { background:transparent !important; color:var(--chat-text) !important; }
.ask-practisi-website-panel .ask-practisi-send-btn { background:#20663e !important; color:#fff !important; }

.ask-practisi-reply-brand { background:#fff !important; }
html[data-theme="dark"] .ask-practisi-website-panel .ask-practisi-reply-brand { background:#fff !important; }

/* Ask Practisi Thinking Indicator & Orb */
.ask-practisi-thinking-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  min-height: 24px !important;
}
.ask-practisi-thinking-row canvas.thinking-orb {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex-shrink: 0 !important;
  display: block !important;
  border-radius: 50% !important;
}
.ask-practisi-thinking-label {
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--chat-muted, #8C8C86) !important;
  user-select: none !important;
}
.thinking-orb-gravity-cursor {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.clare-history-panel .clare-history-results { display:block !important; padding-top:0; }

.ask-practisi-panel.ask-history-open .clare-panel-header > div:last-child { display:flex; position:absolute; right:calc(35% + 20px); }
.ask-practisi-panel.ask-history-open [aria-label="Close Ask Practisi"] { display:none; }
.ask-practisi-panel .clare-history-row,.ask-practisi-panel .clare-history-row.active { background:transparent; }
.ask-practisi-panel .clare-history-row:hover { background:rgba(0,0,0,.025); }
html[data-theme="dark"] .ask-practisi-panel .clare-history-row:hover { background:rgba(255,255,255,.025); }

.ask-history-search { display:none; }
.ask-practisi-history header[hidden] { display:none; }
.ask-practisi-history-row,.ask-practisi-history-row > button { background:transparent; }
.ask-practisi-website-panel .ask-practisi-msg-row.user .ask-practisi-msg-bubble { background:#fff !important; color:#171717 !important; border-radius:12px 4px 12px 12px !important; box-shadow:none !important; }
.ask-practisi-website-panel .ask-practisi-msg-row.user .ask-practisi-msg-avatar { background:#20663e !important; color:#fff !important; border-radius:50% !important; width:28px !important; height:28px !important; display:grid !important; place-items:center !important; flex:0 0 28px !important; font-size:11px !important; font-weight:600 !important; line-height:1 !important; user-select:none; cursor:default; }
.ask-practisi-website-panel .ask-practisi-msg-avatar { cursor:default; }
.ask-practisi-website-panel .ask-practisi-msg-avatar img,.ask-practisi-website-panel .ask-practisi-msg-avatar span { pointer-events:none; }
.ask-practisi-website-panel .ask-practisi-msg-row.user .clare-user-message-actions button { background:#eeeee9 !important; color:#737373 !important; border-radius:50% !important; width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; max-width:28px !important; max-height:28px !important; flex:0 0 28px !important; aspect-ratio:1 / 1 !important; padding:0 !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; overflow:hidden !important; line-height:1 !important; border:0 !important; cursor:pointer; }
.ask-practisi-website-panel .ask-practisi-msg-row.user .clare-user-message-actions button:hover { background:#e4e4df !important; color:#171717 !important; }
.ask-practisi-history-results .ask-practisi-history-row { margin-bottom:2px !important; border-radius:4px !important; display:flex !important; align-items:center !important; }
.ask-practisi-history-results .ask-practisi-history-row > button:first-child { padding:6px 8px !important; font-size:13px !important; line-height:1.35 !important; min-height:28px !important; border:0 !important; background:transparent !important; color:inherit !important; text-align:left !important; }
.ask-practisi-history-results .ask-practisi-history-row:hover { background:rgba(0,0,0,.035) !important; }
.ask-practisi-history-results .ask-practisi-history-more { flex:0 0 24px !important; width:24px !important; height:24px !important; min-height:24px !important; padding:0 !important; display:grid !important; place-items:center !important; border:0 !important; background:transparent !important; }

.ask-practisi-history-return { display:none; }
.ask-practisi-website-panel.ask-history-open:not(.ask-search-open) .ask-practisi-history-return { display:block !important; position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; width:35% !important; border:0 !important; background:transparent !important; z-index:100 !important; cursor:pointer !important; }
/* Ask Practisi Dedicated Search Mode */
.ask-practisi-website-panel.ask-search-open .ask-practisi-panel-header,
.ask-practisi-website-panel.ask-search-open .ask-practisi-header-actions,
.ask-practisi-website-panel.ask-search-open .ask-history-search {
  display: none !important;
}
.ask-practisi-website-panel.ask-search-open .ask-practisi-history,
.ask-practisi-website-panel.ask-search-open .ask-practisi-history-return,
.ask-practisi-website-panel.ask-search-open .ask-practisi-dialogue-stream,
.ask-practisi-website-panel.ask-search-open .ask-practisi-composer {
  display: none !important;
}
.ask-practisi-search-panel {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  background: var(--chat-surface, #f7f7f5);
  box-sizing: border-box;
}
.ask-practisi-website-panel.ask-search-open .ask-practisi-search-panel {
  display: flex !important;
}
.ask-practisi-search-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.ask-practisi-search-empty {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.ask-practisi-search-empty-icon {
  color: #8c8c86;
  display: block;
}
.ask-practisi-search-empty-text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #8c8c86;
}
.ask-practisi-search-results {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.ask-practisi-search-result-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--chat-text, #171717);
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ask-practisi-search-result-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.ask-practisi-search-no-results {
  margin: auto 0;
  text-align: center;
  color: var(--chat-muted, #8c8c86);
  font-size: 13px;
  padding: 24px;
}
.ask-practisi-search-footer {
  padding: 16px 20px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: transparent;
}
.ask-practisi-search-box {
  flex: 1;
  min-width: 0;
  height: 44px;
  background: var(--chat-raised, #ffffff);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  box-sizing: border-box;
}
.ask-practisi-search-input-icon {
  color: var(--chat-muted, #737373);
  flex-shrink: 0;
  display: block;
}
.ask-practisi-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--chat-text, #171717) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.ask-practisi-search-input::placeholder {
  color: var(--chat-muted, #737373);
  opacity: 1;
}
.ask-practisi-search-close-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: var(--chat-raised, #ffffff);
  border: 0 !important;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  color: var(--chat-text, #171717);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: background 0.15s ease;
  box-sizing: border-box;
}
.ask-practisi-search-close-btn:hover {
  background: color-mix(in srgb, var(--chat-raised, #ffffff) 92%, #000) !important;
}
html[data-theme="dark"] .ask-practisi-search-panel {
  background: var(--chat-surface, #1f1f1e) !important;
}
html[data-theme="dark"] .ask-practisi-search-empty-icon,
html[data-theme="dark"] .ask-practisi-search-empty-text {
  color: var(--chat-muted, #a1a19b) !important;
}
html[data-theme="dark"] .ask-practisi-search-box,
html[data-theme="dark"] .ask-practisi-search-close-btn {
  background: var(--chat-raised, #30302e) !important;
  color: var(--chat-text, #f2f2ef) !important;
}
html[data-theme="dark"] .ask-practisi-search-input {
  color: var(--chat-text, #f2f2ef) !important;
}
html[data-theme="dark"] .ask-practisi-search-close-btn:hover {
  background: color-mix(in srgb, var(--chat-raised, #30302e) 85%, #fff) !important;
}
html[data-theme="dark"] .ask-practisi-search-result-item {
  color: var(--chat-text, #f2f2ef);
}
html[data-theme="dark"] .ask-practisi-search-result-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.ask-practisi-website-panel .ask-practisi-guest-icon { mask-image:url('../../assets/icons/clare/user-svgrepo-com.svg'); -webkit-mask-image:url('../../assets/icons/clare/user-svgrepo-com.svg'); }
.ask-practisi-edit-dialog input { width:100%; box-sizing:border-box; padding:12px; margin:16px 0; border:0; border-radius:4px; background:#f0f0ed; color:inherit; }

.ask-practisi-message-utilities button { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; }
.ask-practisi-history-menu button:hover { background:rgba(0,0,0,.035); }
.ask-practisi-history-menu { box-shadow:none !important; }

/* Full-scale edit view */
.ask-practisi-edit-view {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--chat-surface, #f7f7f5) !important;
  color: var(--chat-text, #171717);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none !important;
}
.ask-practisi-edit-header {
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  flex-shrink: 0;
}
.ask-practisi-dismiss-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 4px !important;
  border: 0 !important;
  background: var(--chat-raised, #e9e9e6) !important;
  color: var(--chat-text, #171717) !important;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none !important;
}
.ask-practisi-edit-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}
.ask-practisi-edit-textarea {
  flex: 1;
  width: 100%;
  min-height: 100%;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--chat-text, #171717) !important;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
.ask-practisi-edit-footer {
  flex-shrink: 0;
  padding: 12px 20px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0 !important;
}

.ask-practisi-history-results .ask-practisi-history-menu button.danger { color:#c0392b; }
.ask-practisi-history-results .ask-practisi-history-menu button.danger:hover { background:rgba(192,57,43,.06); }
.ask-practisi-history-menu .ask-practisi-trash { flex:0 0 16px; }

html:not([data-theme="dark"]) .ask-practisi-website-panel .ask-practisi-msg-row.user .clare-user-message-actions button:not(:hover) { background:transparent !important; }

.ask-practisi-website-panel .ask-practisi-edit-send-btn { background:#20663e !important; color:#fff !important; border-radius:50% !important; width:28px; height:28px; display:grid; place-items:center; }
.ask-practisi-website-panel .ask-practisi-edit-send-btn .ask-practisi-send-icon { color:#fff !important; background:#fff !important; }
.ask-practisi-input-box > .ask-practisi-audio-status:not([hidden]) { position:absolute; left:14px; bottom:8px; height:28px; padding:0 !important; margin:0; display:flex; align-items:center; gap:8px; z-index:2; }
.ask-practisi-website-panel .ask-practisi-input-box:has(.ask-practisi-audio-status:not([hidden])) .ask-practisi-composer-footer { position:static !important; inset:auto !important; transform:none !important; width:100% !important; min-height:36px; padding:0 8px 8px !important; }
.ask-practisi-edit-view { position:relative; }
.ask-practisi-edit-dictation:not([hidden]) { position:absolute; left:20px; bottom:20px; height:28px; padding:0 !important; margin:0; display:flex; align-items:center; gap:8px; }

/* Editing uses one full-height shaded input, with actions inside its bottom edge. */
.clare-edit-view,.ask-practisi-edit-view { position:absolute !important; inset:0 !important; display:flex; flex-direction:column; }
.clare-edit-body,.ask-practisi-edit-body { position:relative; flex:1; min-height:0; margin:0 20px 20px; padding:0 !important; border-radius:4px; overflow:hidden; background:var(--chat-raised,#fff); }
.clare-edit-textarea,.ask-practisi-edit-textarea { min-height:0 !important; height:100%; width:100%; flex:1; padding:14px 14px 60px !important; background:transparent !important; box-sizing:border-box; }
.clare-edit-footer,.ask-practisi-edit-footer { position:absolute !important; bottom:28px; right:28px; padding:0 !important; margin:0; z-index:2; display:flex; align-items:center; gap:8px; }
.clare-edit-body > .clare-dictation-in-composer,.ask-practisi-edit-body > .clare-dictation-in-composer { left:14px; bottom:8px; }
.clare-edit-footer .ai-send-btn,.ask-practisi-edit-footer .ai-send-btn { background:#20663e !important; color:#fff !important; border-radius:50%; width:28px; height:28px; display:grid; place-items:center; }

.ask-practisi-edit-dictation:not([hidden]) { left:14px; bottom:8px; }
.ask-practisi-website-panel:has(.ask-practisi-edit-view) > .ask-practisi-composer { display:none !important; }

.clare-edit-body > .clare-edit-footer,.ask-practisi-edit-body > .ask-practisi-edit-footer { bottom:8px; right:8px; }

.ask-practisi-website-panel .ask-practisi-audio-status:not(.is-error),.ask-practisi-website-panel .ask-practisi-edit-dictation { font-size:12px !important; font-weight:400 !important; line-height:20px !important; color:var(--chat-muted,#737373) !important; }

/* Hide the header trigger while Ask Practisi is open. */
body:has(.ask-practisi-website-panel.is-open) .site-header .ask-practisi-trigger { display:none !important; }

.ask-practisi-returning .ask-practisi-sparkle { animation:ask-practisi-return-spin 500ms cubic-bezier(.22,1,.36,1) both; }
@keyframes ask-practisi-return-spin {
  from { opacity:0; transform:rotate(-180deg) scale(.75); }
  to { opacity:1; transform:rotate(0) scale(1); }
}
@media (prefers-reduced-motion:reduce) {
  .ask-practisi-returning .ask-practisi-sparkle { animation:none; }
}

/* Match the header icon return when its panel counterpart arrives. */
.ask-practisi-website-panel.is-open .ask-practisi-header-title .ask-practisi-sparkle { animation:ask-practisi-return-spin 500ms cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion:reduce) {
  .ask-practisi-website-panel.is-open .ask-practisi-header-title .ask-practisi-sparkle { animation:none; }
}

.ask-practisi-website-panel .ask-practisi-header-title .ask-practisi-sparkle { width:28px; height:28px; }

/* The legal row returns to the page surface across the full width. */
.footer-divider { height:0; background:transparent; }
.footer-bottom { position:relative; isolation:isolate; border:0; background:var(--bg, #fff); }
.footer-bottom::before { content:""; position:absolute; z-index:-1; inset:0; left:calc(50% - 50vw); width:100vw; background:var(--bg, #fff); pointer-events:none; }

/* Keep the original heading-to-link spacing while aligning the logo row. */
@media (min-width:981px) {
  .footer-columns { padding-top:20px; }
}

/* Ask Practisi occupies the visible mobile viewport; only its content scrolls. */
@media(max-width:760px) {
  html.ask-practisi-mobile-open { overflow:hidden!important; overscroll-behavior:none; }
  body.ask-practisi-mobile-open { overflow:hidden!important; overscroll-behavior:none; }
  .ask-practisi-website-panel {
    left:0!important;
    right:0!important;
    top:var(--ask-mobile-top,0px)!important;
    bottom:auto!important;
    width:100%!important;
    max-width:none!important;
    height:var(--ask-mobile-height,100dvh)!important;
    max-height:var(--ask-mobile-height,100dvh)!important;
    margin:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  .ask-practisi-website-panel > .ask-practisi-panel-header { flex:0 0 auto; }
  .ask-practisi-website-panel > .ask-practisi-dialogue-stream {
    flex:1 1 0!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scroll-padding-bottom:20px;
  }
  .ask-practisi-dialogue-stream > * { flex-shrink:0!important; min-width:0; }
  .ask-practisi-website-panel > .ask-practisi-composer {
    flex:0 0 auto!important;
    padding-bottom:max(16px,env(safe-area-inset-bottom))!important;
  }
  .ask-practisi-website-panel .ask-practisi-textarea { max-height: min(160px,25dvh)!important; overflow-y:auto; }
}

/* Prevent iOS input auto-zoom and horizontal overflow while the keyboard is open. */
@media(max-width:760px) {
  html.ask-practisi-mobile-open,
  body.ask-practisi-mobile-open {
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .ask-practisi-website-panel {
    width:var(--ask-mobile-width,100vw)!important;
    max-width:var(--ask-mobile-width,100vw)!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overscroll-behavior:none;
    touch-action:pan-y pinch-zoom;
  }
  .ask-practisi-website-panel > *,
  .ask-practisi-website-panel .ask-practisi-input-box,
  .ask-practisi-website-panel .ask-practisi-msg-row,
  .ask-practisi-website-panel .ask-practisi-msg-bubble {
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .ask-practisi-website-panel > .ask-practisi-composer,
  .ask-practisi-website-panel > .ask-practisi-panel-header {
    width:100%!important;
  }
  .ask-practisi-website-panel input,
  .ask-practisi-website-panel textarea,
  .ask-practisi-website-panel .ask-practisi-textarea {
    font-size:16px!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .ask-practisi-website-panel .clare-disclaimer,
  .ask-practisi-website-panel .ask-practisi-msg-bubble {
    overflow-wrap:anywhere;
    white-space:normal;
  }
  .ask-practisi-website-panel .ask-practisi-msg-bubble pre {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    max-width:100%;
  }
}