/* Tavi assistant: quiet hierarchy, readable type and one active form at a time. */
.global-assistant {
  grid-template-rows: 68px minmax(0,1fr) auto !important;
  background: #f6f6f4 !important;
}
.global-assistant > header {
  grid-template-columns: 36px 1fr 46px !important;
  gap: 10px !important;
  padding: 12px 17px 8px !important;
  border-bottom: 1px solid #e5e5e1 !important;
  background: rgba(250,250,248,.94);
  backdrop-filter: blur(16px);
}
.global-assistant > header button {
  height: 34px !important;
  border-radius: 17px !important;
  background: #eeeeeb !important;
  color: #555552 !important;
  font-size: 9px !important;
}
.global-assistant > header .assistant-force-close {
  min-width: 34px !important;
  min-height: 34px !important;
  font: 300 19px/1 -apple-system, sans-serif !important;
}
.global-assistant > header span {
  color: #aaa9a5 !important;
  font: 500 6px/1 -apple-system, sans-serif !important;
  letter-spacing: .16em !important;
}
.global-assistant > header strong {
  margin-top: 5px !important;
  color: #292927 !important;
  font: 500 15px/1.05 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
}
.assistant-head-identity { min-width: 0; display: flex !important; align-items: center; justify-content: center; gap: 8px; }
.assistant-head-identity > img { width: 31px; height: 31px; flex: 0 0 31px; border-radius: 50%; object-fit: cover; object-position: center 24%; background: #ececea; }
.assistant-head-identity > span { text-align: left; }
.assistant-thread {
  gap: 10px !important;
  padding: 20px 18px 14px !important;
  overscroll-behavior: contain;
}
.assistant-message {
  max-width: 78% !important;
  padding: 10px 12px !important;
  border: 1px solid #e7e7e3;
  border-radius: 15px 15px 15px 5px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.assistant-message.mine {
  border-color: #333330 !important;
  border-radius: 15px 15px 5px 15px !important;
  background: #333330 !important;
}
.assistant-message strong { font: 600 10px/1.35 -apple-system, sans-serif !important; }
.assistant-message p {
  margin: 0 !important;
  font: 400 10px/1.62 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
  white-space: pre-wrap;
}
.assistant-message:not(.mine) { position: relative; margin-left: 30px; }
.assistant-message-avatar { position: absolute; top: 1px; left: -34px; width: 25px; height: 25px; border-radius: 50%; object-fit: cover; object-position: center 22%; background: #ececea; }
.assistant-welcome {
  max-width: 86% !important;
  padding: 12px 14px !important;
  color: #555552;
  background: transparent !important;
  border-color: #ddddda !important;
}
.assistant-composer {
  grid-template-columns: 36px minmax(0,1fr) 38px !important;
  align-items: center !important;
  min-height: 50px !important;
  margin: 0 16px calc(15px + env(safe-area-inset-bottom)) !important;
  padding: 5px !important;
  border: 1px solid #ddddda !important;
  border-radius: 25px !important;
  background: rgba(255,255,253,.97) !important;
  box-shadow: 0 8px 24px rgba(35,35,31,.07) !important;
}
.assistant-composer textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 8px 7px !important;
  color: #292927 !important;
  font: 400 16px/22px -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
  vertical-align: middle !important;
}
.assistant-composer textarea::placeholder { color: #aaa9a5 !important; font-size: 13px !important; }
.assistant-composer > #assistantAddImage {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #777773 !important;
  font: 300 21px/1 -apple-system, sans-serif !important;
}
.assistant-composer > button[type="submit"] {
  align-self: center !important;
  justify-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #383835 !important;
}
.assistant-composer > button[type="submit"]::before {
  display: block !important;
  margin: 0 !important;
  background: #fff !important;
  transform: none !important;
}

/* iOS zooms focused controls whose text is below 16px. Keep the assistant
   inside the phone viewport while the software keyboard is visible. */
@media (max-width: 430px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
  }
  .phone {
    height: 100dvh !important;
    min-height: 0 !important;
  }
  .global-assistant {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
  .assistant-thread { min-height: 0 !important; }
  .assistant-composer {
    width: auto !important;
    margin-right: 12px !important;
    margin-left: 12px !important;
    margin-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
}

/* Tavi desk pet. The image itself stays untouched and can still be replaced in Settings. */
.assistant-pet {
  width: 78px !important;
  height: 100px !important;
  right: 14px;
  bottom: 92px;
  display: grid;
  grid-template-rows: 100px;
  justify-items: center;
  touch-action: none;
  filter: drop-shadow(0 10px 12px rgba(35,35,31,.14));
}
.assistant-pet[hidden] { display: none !important; }
.assistant-pet .pet-face,
.assistant-pet .pet-face.custom-art {
  width: 78px !important;
  height: 100px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.assistant-pet .pet-face::before,
.assistant-pet .pet-face::after { display: none !important; }
.assistant-pet .pet-face img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  pointer-events: none;
}
.assistant-pet small {
  display: none !important;
}
.pet-speech {
  position: absolute;
  z-index: 3;
  right: calc(100% + 8px);
  top: 17px;
  width: max-content;
  max-width: 125px;
  padding: 9px 11px;
  border: 1px solid rgba(40,40,38,.1);
  border-radius: 13px 13px 4px 13px;
  background: rgba(255,255,253,.96);
  color: #555552;
  box-shadow: 0 8px 22px rgba(35,35,31,.1);
  font: 400 8px/1.45 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px) scale(.96);
  transform-origin: right bottom;
  transition: opacity .18s ease, transform .18s ease;
}
.pet-speech::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: 8px;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(40,40,38,.1);
  border-right: 1px solid rgba(40,40,38,.1);
  background: rgba(255,255,253,.96);
  transform: rotate(45deg);
}
.assistant-pet.speaking .pet-speech { opacity: 1; transform: none; }
.assistant-pet.bubble-right .pet-speech { right: auto; left: calc(100% + 8px); border-radius: 13px 13px 13px 4px; transform-origin: left bottom; }
.assistant-pet.bubble-right .pet-speech::after { right: auto; left: -5px; border: 0; border-bottom: 1px solid rgba(40,40,38,.1); border-left: 1px solid rgba(40,40,38,.1); }
.tavi-mini-avatar { overflow: hidden; padding: 0 !important; background: #efefed !important; }
.tavi-mini-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 22%; }
.assistant-island:not(.music-active) {
  width: 146px !important;
  padding: 0 10px !important;
  grid-template-columns: 20px minmax(0,1fr) 22px !important;
  column-gap: 8px !important;
}
.assistant-island:not(.music-active):hover { width: 152px !important; }
.assistant-island .island-pulse { width: 18px !important; height: 18px !important; overflow: hidden; justify-self: start; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; background: #ececea !important; }
.assistant-island .island-pulse::after { display: none !important; }
.assistant-island .island-pulse img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 22%; }
.assistant-island .island-copy { min-width: 0; padding-left: 1px; }
.assistant-island .island-copy strong,
.assistant-island .island-copy small { max-width: 100%; }
.assistant-island .island-wave { justify-self: end; }
.focus-tavi-mark { overflow: hidden; padding: 0 !important; border-radius: 50% !important; background: #ececea !important; }
.focus-tavi-mark img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 22%; }
.assistant-pet:hover .pet-face { transform: translateY(-2px) rotate(-1deg) !important; }
.assistant-pet.pet-poked .pet-face { transform: scale(.94) translateY(3px) !important; }
.assistant-pet.pet-bounce .pet-face { animation: taviBounce .42s ease !important; }
@keyframes taviBounce { 0%,100%{transform:none} 42%{transform:translateY(-7px) rotate(2deg)} 72%{transform:translateY(-2px) rotate(-1deg)} }

.assistant-settings {
  padding: 20px 18px 30px !important;
  background: #f6f6f4 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.assistant-settings > header { margin-bottom: 21px !important; }
.assistant-settings > label > span,
.assistant-form-mode > span,
.pet-artwork-settings > span {
  margin: 16px 0 8px !important;
  color: #8c8c87 !important;
  font: 500 8px/1 -apple-system, sans-serif !important;
  letter-spacing: .08em !important;
}
.assistant-settings input,
.assistant-settings textarea {
  border-color: #deded9 !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #333330;
  font: 400 10px/1.55 -apple-system, sans-serif !important;
}
.assistant-form-mode > div {
  padding: 3px;
  border-radius: 14px;
  background: #e9e9e5;
}
.assistant-form-mode button {
  height: 35px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #777773 !important;
  font-size: 9px !important;
}
.assistant-form-mode button.selected {
  background: #fff !important;
  color: #292927 !important;
  box-shadow: 0 2px 8px rgba(30,30,28,.07);
}
.pet-artwork-preview { background: #fbfbf9 !important; }
.pet-artwork-preview img { width: 60px !important; height: 76px !important; }
.assistant-settings .assistant-form-mode,
.assistant-settings .pet-artwork-settings { display: block !important; }
.assistant-settings [data-assistant-mode="pet"] { display: block !important; visibility: visible !important; opacity: 1 !important; }
.assistant-pet:not([hidden]) { display: grid !important; }
.assistant-form-mode > div { grid-template-columns: 1fr 1fr !important; }
.pet-artwork-settings { margin-top: 5px; padding: 13px; border: 1px solid #deded9; border-radius: 15px; background: #fff; }
.pet-artwork-preview { height: 104px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; }
.pet-artwork-preview img { object-fit: contain; object-position: center bottom; }
.pet-artwork-settings > div:nth-of-type(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.pet-artwork-settings button { min-height: 35px; border: 1px solid #deded9; border-radius: 11px; background: #f6f6f4; color: #4b4b48; font: 500 8px/1 -apple-system, sans-serif; }
.pet-artwork-settings small { display: block; margin-top: 9px; color: #aaa9a5; font: 400 7px/1.5 -apple-system, sans-serif; }