/* Generated jade-ceramic-button artwork. Labels remain semantic HTML; nine-slice rims adapt to button width. */
:root { --button-art: url("../images/ui/jade-ceramic-button.webp"); }
:is(.profile__start-btn, .app-modal__btn--primary, .custom-alert__btn:not(.custom-alert__btn--cancel), .form-submit, .app__action-btn, .custom-select__trigger, .contact-link, .archerlab-header-link, .chat-top-actions__btn, .app-modal__btn:not(.app-modal__btn--primary), .custom-alert__btn--cancel, .ft-edit-user-btn, .app-modal__close, .modal-close, .image-modal__close, .image-modal__nav, .composer__action-btn, .composer__upload-btn, .ft-action-btn, .ft-upload-btn, .ft-back-btn, .search-bar__back-btn, .search-bar__nav-btn, .scroll-to-bottom, .composer__send, .ft-send-btn) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
:is(.profile__start-btn, .app-modal__btn--primary, .custom-alert__btn:not(.custom-alert__btn--cancel), .form-submit) {
  position: relative;
  isolation: isolate;
  border-radius: 10px;
  border-color: transparent;
  color: #ffffff;
  background: #145b60;
  box-shadow: inset 0 1px 0 #ffffff40, inset 0 -2px 0 #00000035, 0 3px 0 #224b50, 0 6px 14px #00000026;
  text-shadow: 0 1px 1px #00000025;
  font-weight: 650;
}
:is(.profile__start-btn, .app-modal__btn--primary, .custom-alert__btn:not(.custom-alert__btn--cancel), .form-submit)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 0 solid transparent;
  border-image: var(--button-art) 9% 14% fill / 5px 22px / 0 stretch;
  clip-path: inset(0 round 8px);
  border-radius: inherit;
  pointer-events: none;
}
:is(.app__action-btn, .custom-select__trigger, .contact-link, .archerlab-header-link, .chat-top-actions__btn, .app-modal__btn:not(.app-modal__btn--primary), .custom-alert__btn--cancel, .ft-edit-user-btn) {
  color: #315d62;
  border-color: #b7cdcb;
  background: linear-gradient(#eff8f5df, #eff8f5df), var(--button-art) center / 100% 100% no-repeat;
  box-shadow: inset 0 1px 0 #ffffff1f, inset 0 -1px 0 #00000018, 0 2px 3px #0000001a;
  text-shadow: none;
}
:is(.app-modal__close, .modal-close, .image-modal__close, .image-modal__nav, .composer__action-btn, .composer__upload-btn, .ft-action-btn, .ft-upload-btn, .ft-back-btn, .search-bar__back-btn, .search-bar__nav-btn, .scroll-to-bottom) {
  border-radius: 10px;
  color: #315d62;
  border-color: #b7cdcb;
  background: linear-gradient(#eff8f5df, #eff8f5df), var(--button-art) center / auto 100% no-repeat;
  box-shadow: inset 0 0 0 1px #b7cdcb, inset 0 2px 0 #ffffff12, 0 2px 4px #00000020;
}
:is(.profile__start-btn, .app-modal__btn--primary, .custom-alert__btn:not(.custom-alert__btn--cancel), .form-submit, .app__action-btn, .custom-select__trigger, .contact-link, .archerlab-header-link, .chat-top-actions__btn, .app-modal__btn:not(.app-modal__btn--primary), .custom-alert__btn--cancel, .ft-edit-user-btn, .app-modal__close, .modal-close, .image-modal__close, .image-modal__nav, .composer__action-btn, .composer__upload-btn, .ft-action-btn, .ft-upload-btn, .ft-back-btn, .search-bar__back-btn, .search-bar__nav-btn, .scroll-to-bottom, .composer__send, .ft-send-btn):focus-visible {
  outline: 2px solid #2c797e;
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  :is(.profile__start-btn, .app-modal__btn--primary, .custom-alert__btn:not(.custom-alert__btn--cancel), .form-submit, .app__action-btn, .custom-select__trigger, .contact-link, .archerlab-header-link, .chat-top-actions__btn, .app-modal__btn:not(.app-modal__btn--primary), .custom-alert__btn--cancel, .ft-edit-user-btn, .app-modal__close, .modal-close, .image-modal__close, .image-modal__nav, .composer__action-btn, .composer__upload-btn, .ft-action-btn, .ft-upload-btn, .ft-back-btn, .search-bar__back-btn, .search-bar__nav-btn, .scroll-to-bottom, .composer__send, .ft-send-btn):not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(1.12);
    border-color: #8abbba;
  }
}
:is(.profile__start-btn, .app-modal__btn--primary, .custom-alert__btn:not(.custom-alert__btn--cancel), .form-submit, .app__action-btn, .custom-select__trigger, .contact-link, .archerlab-header-link, .chat-top-actions__btn, .app-modal__btn:not(.app-modal__btn--primary), .custom-alert__btn--cancel, .ft-edit-user-btn, .app-modal__close, .modal-close, .image-modal__close, .image-modal__nav, .composer__action-btn, .composer__upload-btn, .ft-action-btn, .ft-upload-btn, .ft-back-btn, .search-bar__back-btn, .search-bar__nav-btn, .scroll-to-bottom, .composer__send, .ft-send-btn):not(:disabled):not([aria-disabled="true"]):active {
  filter: brightness(.93);
  box-shadow: inset 0 2px 5px #00000032, inset 0 0 0 1px #8abbba, 0 1px 0 #ffffff12;
}
:is(.ft-action-btn.active, .composer__action-btn.active) {
  color: #ffffff;
  background: #145b60 var(--button-art) center / cover no-repeat;
  border-color: #8abbba;
  box-shadow: inset 0 1px 0 #ffffff38, inset 0 0 0 1px #8abbba, 0 2px 5px #00000020;
}
:is(.profile__start-btn, .app-modal__btn--primary, .custom-alert__btn:not(.custom-alert__btn--cancel), .form-submit, .app__action-btn, .custom-select__trigger, .contact-link, .archerlab-header-link, .chat-top-actions__btn, .app-modal__btn:not(.app-modal__btn--primary), .custom-alert__btn--cancel, .ft-edit-user-btn, .app-modal__close, .modal-close, .image-modal__close, .image-modal__nav, .composer__action-btn, .composer__upload-btn, .ft-action-btn, .ft-upload-btn, .ft-back-btn, .search-bar__back-btn, .search-bar__nav-btn, .scroll-to-bottom, .composer__send, .ft-send-btn):is(:disabled, [aria-disabled="true"]) {
  filter: saturate(.25);
  box-shadow: inset 0 0 0 1px #88888830;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  :is(.profile__start-btn, .app-modal__btn--primary, .custom-alert__btn:not(.custom-alert__btn--cancel), .form-submit, .app__action-btn, .custom-select__trigger, .contact-link, .archerlab-header-link, .chat-top-actions__btn, .app-modal__btn:not(.app-modal__btn--primary), .custom-alert__btn--cancel, .ft-edit-user-btn, .app-modal__close, .modal-close, .image-modal__close, .image-modal__nav, .composer__action-btn, .composer__upload-btn, .ft-action-btn, .ft-upload-btn, .ft-back-btn, .search-bar__back-btn, .search-bar__nav-btn, .scroll-to-bottom, .composer__send, .ft-send-btn) { transition: none; }
}
:is(.composer__send, .ft-send-btn) {
  color: #ffffff;
  background: #145b60 var(--button-art) center / auto 100% no-repeat;
  border: 1px solid #8abbba;
  box-shadow: inset 0 1px 1px #e0fbf680, inset 0 -2px 2px #00000030, 0 2px 5px #00000025;
}
:is(.composer__send, .ft-send-btn) svg { fill: currentColor; }
:is(.app-modal__btn--danger):is(.app-modal__btn--danger) {
  color: #963f46;
  border-color: #d8b4b4;
  background: linear-gradient(180deg, #fff9f8, #f4e6e4);
}

.ft-style-toggle { border-color: #b7cdcb; background: #edf3f2; box-shadow: inset 0 2px 4px #00000024; }
.ft-style-toggle__thumb { background: #145b60 var(--button-art) center / cover no-repeat; box-shadow: inset 0 1px 0 #e0fbf688, 0 1px 3px #00000030; }
.ft-style-toggle[data-ft-current="vn"] .ft-style-toggle__label[data-mode="vn"],
.ft-style-toggle[data-ft-current="chatbot"] .ft-style-toggle__label[data-mode="chatbot"] { color: #ffffff; }
.ft-style-toggle:focus-visible { outline: 2px solid #2c797e; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ft-style-toggle__thumb, .ft-style-toggle__label { transition: none; } }

/* Keep compact header controls and their existing responsive label behavior. */
.app__action-btn, .custom-select__trigger, .archerlab-header-link { border-radius: 9px; }
.app__action-btn--icon { border-radius: 11px; }
.archerlab-header-link { animation: none; }
.profile__start-btn, .form-submit { min-height: 44px; }
.group-modal__close, .app-modal__close, .modal-close { min-width: 36px; min-height: 36px; border-radius: 10px; }
/* Toggle state remains visible even when hover is unavailable. */
.ft-action-btn.active { box-shadow: inset 0 0 0 1px currentColor, inset 0 1px 0 #ffffff40; }
@media (pointer: coarse), (max-width: 768px) {
  .app__action-btn, .custom-select__trigger, .archerlab-header-link, .contact-link { min-height: 44px; }
  .app__action-btn--icon, .group-modal__close, .app-modal__close, .modal-close { min-width: 44px; min-height: 44px; }
  .ft-send-btn, .composer__send { min-width: 44px; min-height: 44px; }
  .ft-back-btn, .ft-edit-user-btn, .ft-notification-btn, .ft-action-btn, .ft-upload-btn, .ft-tarot-btn { min-width: 44px; min-height: 44px; }
  .ft-style-toggle { min-height: 44px; }
}

/* Compact controls track the device, without stretching with flex/grid rows. */
:is(.profile__start-btn, .form-submit, .group-modal__btn, .app-modal__btn, .custom-alert__btn) {
  min-height: 44px;
  height: auto;
  padding-block: 10px;
  line-height: 1.35;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
:is(.profile__start-btn, .form-submit) { padding-inline: 28px; }
:is(.composer__send, .ft-send-btn, .composer__action-btn, .composer__upload-btn, .ft-action-btn, .ft-upload-btn, .ft-back-btn) {
  box-sizing: border-box;
  flex: 0 0 auto;
  align-self: center;
  width: 40px;
  height: 40px;
  padding: 8px;
}
@media (pointer: coarse), (max-width: 768px) {
  :is(.composer__send, .ft-send-btn, .composer__action-btn, .composer__upload-btn, .ft-action-btn, .ft-upload-btn, .ft-back-btn, .image-modal__close, .image-modal__nav, .scroll-to-bottom) { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  .profile__start-btn { font-size: 14px; }
  .contact-link { padding-block: 8px; }
  .app__actions { gap: 6px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .profile__footer { padding-block: 6px; }
  .ft-header { padding-top: max(4px, env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile__start-btn:hover, .ft-action-btn:hover, .ft-send-btn:hover { transition: none; transform: none; }
}

/* Keep the composer on screen after rotation or a shorter visual viewport. */
.freetalk-overlay { max-height: 100dvh; }
.freetalk-overlay .ft-header {
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.freetalk-overlay .ft-input-area {
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}
/* Mode-specific base themes must keep the same generated button art. */
body .freetalk-overlay .ft-input-area .ft-send-btn,
body .freetalk-overlay .ft-input-area .ft-action-btn.active,
body .freetalk-overlay .ft-header .ft-style-toggle__thumb {
  color: #fff;
  background: #145b60 var(--button-art) center / auto 100% no-repeat;
}
body .freetalk-overlay .ft-header .ft-style-toggle__label { transition: none; }
body .freetalk-overlay .ft-header .ft-style-toggle[data-ft-current="vn"] .ft-style-toggle__label[data-mode="vn"],
body .freetalk-overlay .ft-header .ft-style-toggle[data-ft-current="chatbot"] .ft-style-toggle__label[data-mode="chatbot"] { color: #fff; }
body .freetalk-overlay .ft-header .ft-edit-user-btn {
  color: #315d62;
  background: linear-gradient(#eff8f5df, #eff8f5df), var(--button-art) center / 100% 100% no-repeat;
}
@media (orientation: landscape) and (max-height: 500px) {
  .freetalk-overlay .ft-header { padding-top: max(4px, env(safe-area-inset-top, 0px)); }
}