/* CSOM V8.6 — Csomzinho roxo flutuante, arrastável e removível. */
:host {
  all: initial;
  --csz-width: 66px;
  --csz-height: 56px;
  --csz-right: 82px;
  --csz-bottom: 14px;
  --csz-thought-left: 8px;
  --csz-thought-top: 8px;
  --csz-thought-tail-left: 24px;
  --csz-panel-left: 8px;
  --csz-panel-top: 8px;
  --csz-purple: #6649e6;
  --csz-purple-dark: #5034c2;
  --csz-ink: #29262e;
  --csz-muted: #716b79;
  --csz-line: #ded9ea;
  --csz-paper: #ffffff;
  --csz-font: Arial, Helvetica, sans-serif;
  color-scheme: light;
  font-family: var(--csz-font);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.launcher {
  all: unset;
  box-sizing: border-box;
  position: fixed;
  right: var(--csz-right);
  bottom: var(--csz-bottom);
  z-index: 2147483001;
  display: grid;
  place-items: center;
  width: var(--csz-width);
  height: var(--csz-height);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 8px 9px rgba(20, 10, 44, .42));
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .18s ease, filter .18s ease;
}

.launcher:hover {
  transform: translateY(-2px) scale(1.025);
  filter: drop-shadow(0 11px 12px rgba(20, 10, 44, .5));
}

.launcher[data-drag-ready="true"] { cursor: grab; }
.launcher[data-dragging="true"] {
  cursor: grabbing;
  transform: scale(1.035);
  filter: drop-shadow(0 13px 15px rgba(20, 10, 44, .54));
  transition: none;
}

.launcher:focus-visible,
.remove:focus-visible,
.thought button:focus-visible,
.panel button:focus-visible,
.panel a:focus-visible,
.panel input:focus-visible {
  outline: 3px solid #cfc5ff;
  outline-offset: 3px;
}

.remove {
  position: fixed;
  right: calc(var(--csz-right) - 5px);
  bottom: calc(var(--csz-bottom) + var(--csz-height) - 10px);
  z-index: 2147483003;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2a2037;
  color: #fff;
  box-shadow: 0 5px 12px rgba(20, 10, 44, .35);
  font: 700 17px/1 var(--csz-font);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}

.remove:hover { background: #4f36bd; transform: scale(1.07); }

.mascot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1368 / 1149;
  flex: 0 0 auto;
  overflow: visible;
  isolation: isolate;
}

.mascot > img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border: 0;
  image-rendering: auto;
  transform: translateZ(0);
}

.launcher .mascot { animation: csz-bob 3.4s ease-in-out infinite; }

.pupil {
  position: absolute;
  z-index: 3;
  display: block;
  width: 4.55%;
  height: 5.98%;
  border-radius: 50%;
  background: #24113d;
  animation: csz-look 4.8s ease-in-out infinite;
  will-change: transform;
}

.pupil--left { left: 43.30%; top: 11.08%; }
.pupil--right { left: 59.63%; top: 12.13%; }

@keyframes csz-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px) rotate(-.7deg); }
}

@keyframes csz-look {
  0%, 14%, 86%, 100% { transform: translateX(0); }
  25%, 40% { transform: translateX(-34%); }
  56%, 72% { transform: translateX(34%); }
}

.thought {
  position: fixed;
  left: var(--csz-thought-left);
  top: var(--csz-thought-top);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  min-height: 36px;
  max-width: min(210px, calc(100vw - 24px));
  border: 1px solid var(--csz-line);
  border-radius: 14px 14px 4px 14px;
  background: var(--csz-paper);
  color: var(--csz-ink);
  box-shadow: 0 10px 28px rgba(35, 26, 54, .18);
  opacity: 0;
  transform: translateY(6px) scale(.97);
  animation: csz-thought-in .28s .65s ease forwards;
  transition: opacity .18s ease, transform .18s ease;
}

.thought::after {
  content: "";
  position: absolute;
  left: var(--csz-thought-tail-left);
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--csz-line);
  border-bottom: 1px solid var(--csz-line);
  background: var(--csz-paper);
  transform: rotate(45deg);
}

.thought[data-side="below"]::after {
  top: -6px;
  bottom: auto;
  border: 0;
  border-top: 1px solid var(--csz-line);
  border-left: 1px solid var(--csz-line);
}

.thought[data-hiding="true"] { opacity: 0; transform: translateY(5px) scale(.97); }
.thought-open, .thought-close { border: 0; background: transparent; cursor: pointer; }
.thought-open { min-height: 34px; padding: 8px 5px 8px 12px; color: var(--csz-ink); font: 700 12px/1.15 var(--csz-font); }
.thought-close { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 34px; padding: 0; color: #77717f; font: 400 18px/1 var(--csz-font); }

@keyframes csz-thought-in { to { opacity: 1; transform: none; } }

.panel {
  position: fixed;
  left: var(--csz-panel-left);
  top: var(--csz-panel-top);
  z-index: 2147483002;
  display: flex;
  flex-direction: column;
  width: min(338px, calc(100vw - 20px));
  max-height: min(510px, calc(100dvh - 16px));
  overflow: hidden;
  border: 1px solid #d9d2ef;
  border-radius: 18px;
  background: #fff;
  color: var(--csz-ink);
  box-shadow: 0 24px 70px rgba(23, 18, 31, .28);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .18s ease, transform .18s ease;
}

.panel[data-state="open"] { opacity: 1; transform: none; }

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 7px 9px;
  background: linear-gradient(135deg, #26202f, #17151c 70%, #34245e);
  color: #fff;
}

.avatar { display: grid; place-items: center; width: 49px; height: 42px; flex: 0 0 49px; }
.identity { min-width: 0; display: grid; gap: 2px; }
.identity strong { font: 800 14px/1.15 var(--csz-font); }
.identity span { color: #d8ceff; font: 700 9px/1.15 var(--csz-font); letter-spacing: .06em; text-transform: uppercase; }
.close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font: 300 21px/1 var(--csz-font);
  cursor: pointer;
}

.conversation {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 322px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 11px 10px 10px;
  background: linear-gradient(#faf9fd, #fff);
  scrollbar-width: thin;
  scrollbar-color: #c9bcff transparent;
}

.row { display: flex; align-items: flex-end; gap: 7px; margin: 0 0 8px; }
.row p { max-width: 250px; margin: 0; padding: 8px 10px; border-radius: 13px; font: 400 12px/1.38 var(--csz-font); }
.row--bot p { border: 1px solid #e2dff0; border-bottom-left-radius: 4px; background: #fff; color: #343730; }
.row--user { justify-content: flex-end; }
.row--user p { border-bottom-right-radius: 4px; background: var(--csz-purple); color: #fff; }
.mini-avatar { display: grid; place-items: center; width: 31px; height: 27px; flex: 0 0 31px; }

.event-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 2px 34px; }
.event {
  min-height: 35px;
  padding: 6px 8px;
  border: 1px solid #d8d3e9;
  border-radius: 10px;
  background: #f7f5fd;
  color: #3b3547;
  font: 700 11px/1.15 var(--csz-font);
  text-align: left;
  cursor: pointer;
}
.event:hover { border-color: #7558e9; background: #eee9ff; color: var(--csz-purple-dark); }

.date-card { margin: 4px 0 3px 34px; padding: 9px; border: 1px solid #ded8f2; border-radius: 12px; background: #f7f5fd; }
.date-card label { display: grid; gap: 6px; color: #494450; font: 800 11px/1.2 var(--csz-font); }
.date-card input {
  width: 100%;
  height: 38px;
  padding: 0 9px;
  border: 1px solid #c8c1df;
  border-radius: 9px;
  background: #fff;
  color: var(--csz-ink);
  font: 600 14px/1 var(--csz-font);
}
.date-card > button, .result > button { margin-top: 7px; padding: 0; border: 0; background: transparent; color: #5e48bd; font: 700 10px/1.2 var(--csz-font); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.result { margin: 5px 0 3px 34px; text-align: center; }
.result > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--csz-purple);
  color: #fff;
  font: 800 11px/1.2 var(--csz-font);
  text-decoration: none;
}
.result > a:hover { background: var(--csz-purple-dark); }
.result svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; fill: currentColor; }

.composer { display: grid; grid-template-columns: 1fr 38px; gap: 6px; min-height: 54px; padding: 8px; border-top: 1px solid #e7e3ef; background: #fff; }
.composer input {
  min-width: 0;
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #d7d4dd;
  border-radius: 999px;
  background: #f7f7f6;
  color: var(--csz-ink);
  font: 400 12px/1 var(--csz-font);
}
.composer input:focus { border-color: #785ceb; background: #fff; box-shadow: 0 0 0 3px rgba(102, 73, 230, .08); outline: 0; }
.composer button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--csz-purple); color: #fff; cursor: pointer; }
.composer svg { display: block; width: 19px; height: 19px; fill: currentColor; }

@media (max-width: 760px) {
  :host { --csz-width: 48px; --csz-height: 41px; }
  .thought,
  .remove { display: none !important; }
  .launcher {
    top: max(5px, env(safe-area-inset-top, 0px));
    right: calc(50vw - 24px);
    bottom: auto;
    left: auto;
    width: var(--csz-width);
    height: var(--csz-height);
    touch-action: manipulation;
  }
  .panel { width: min(310px, calc(100vw - 16px)); border-radius: 16px; }
  .identity strong { font-size: 13px; }
  .row p { font-size: 11.5px; }
}

@media (max-width: 350px), (max-height: 590px) {
  .panel { width: min(304px, calc(100vw - 16px)); border-radius: 14px; }
  .header { min-height: 52px; padding: 5px 7px; }
  .avatar { width: 45px; height: 38px; flex-basis: 45px; }
  .conversation { padding: 8px; }
  .event-options { gap: 5px; margin-left: 31px; }
  .event { min-height: 32px; padding: 5px 7px; font-size: 10.5px; }
  .composer { min-height: 50px; padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .launcher, .remove, .thought, .panel { transition: none !important; }
  .thought { animation: none; opacity: 1; transform: none; }
  .launcher .mascot, .pupil { animation: none; }
}