/* The owner sizes #case-companion in the open scene space. Neither a cat nor
   its speech belongs inside the parchment drawer. Transparent art is displayed
   in full: no clipping, masks, cropping, or animated floating feet. */
.cat-narrator {
  --narrator-width: 180px;
  --narrator-height: 235px;
  --narrator-left: 12px;
  --narrator-ground-offset: 6px;
  --speech-left: 174px;
  --speech-bottom: 100px;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  isolation: isolate;
  pointer-events: none;
}

.cat-narrator__figure {
  position: absolute;
  left: var(--narrator-left);
  bottom: 0;
  width: var(--narrator-width);
  height: var(--narrator-height);
  max-height: 100%;
  pointer-events: none;
}

.cat-narrator__figure::before {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: var(--narrator-ground-offset);
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #02080b87 0%, #02080b4d 38%, #02080b00 73%);
}

.cat-narrator__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(2px 3px 3px #07101547);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.cat-narrator__bubble {
  position: absolute;
  left: var(--speech-left);
  right: 14px;
  bottom: var(--speech-bottom);
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 310px;
  max-height: min(165px, calc(100% - 12px));
  padding: 11px 13px 12px;
  border: 1px solid #d6b7799c;
  border-radius: 13px 13px 13px 3px;
  background: #111b20ed;
  box-shadow: inset 0 0 18px #d8b97406, 0 5px 20px #02060840;
  color: #f4e6cb;
  pointer-events: auto;
}

.cat-narrator__bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  bottom: 20px;
  width: 13px;
  height: 13px;
  border-left: 1px solid #d6b7799c;
  border-bottom: 1px solid #d6b7799c;
  background: #111b20;
  transform: rotate(45deg);
  z-index: -1;
}

.cat-narrator__speaker {
  display: block;
  flex: 0 0 auto;
  margin-bottom: 5px;
  font-family: var(--text, 'Manrope', sans-serif);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #dfbc7b;
}

.cat-narrator__speech {
  min-height: 0;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ad8d58 transparent;
  font-family: var(--display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.17;
  text-wrap: pretty;
  color: #f4e6cb;
}

.cat-narrator--inspect,
.cat-narrator--solved {
  --narrator-width: 155px;
  --narrator-height: 215px;
  --narrator-left: 10px;
  --narrator-ground-offset: 5px;
  --speech-left: 160px;
  --speech-bottom: 70px;
}

.cat-narrator--inspect .cat-narrator__bubble,
.cat-narrator--solved .cat-narrator__bubble {
  max-height: min(132px, calc(100% - 10px));
  padding: 10px 12px 11px;
}

.cat-narrator--inspect .cat-narrator__speech,
.cat-narrator--solved .cat-narrator__speech {
  font-size: 18px;
  line-height: 1.17;
}

.cat-narrator--envelope {
  --narrator-width: 132px;
  --narrator-height: 175px;
  --speech-left: 133px;
  --speech-bottom: 78px;
}

.cat-narrator--hint .cat-narrator__bubble { border-color: #e2c182; }
.cat-narrator--hint .cat-narrator__speech { padding-right: 3px; }
.cat-narrator--solved .cat-narrator__bubble { max-height: min(190px, calc(100% - 80px)); }

@media (max-width: 360px) {
  /* Leave the whole clock/chart above the conversation available to touch. */
  .case-companion[data-world-control="true"] .cat-narrator { --speech-bottom: 0px; }
  .cat-narrator {
    --narrator-width: 115px;
    --narrator-height: 150px;
    --narrator-left: 8px;
    --narrator-ground-offset: 6px;
    --speech-left: 116px;
    --speech-bottom: 64px;
  }
  .cat-narrator__bubble {
    right: 10px;
    max-height: min(135px, calc(100% - 10px));
    padding: 9px 10px 10px;
  }
  .cat-narrator__speech { font-size: 19px; }
  .cat-narrator--inspect,
  .cat-narrator--solved {
    --narrator-width: 90px;
    --narrator-height: 125px;
    --speech-left: 99px;
    --speech-bottom: 54px;
  }
  .cat-narrator--inspect .cat-narrator__bubble,
  .cat-narrator--solved .cat-narrator__bubble {
    max-height: min(115px, calc(100% - 8px));
    padding: 9px 10px 10px;
  }
  .cat-narrator--inspect .cat-narrator__speech,
  .cat-narrator--solved .cat-narrator__speech { font-size: 18px; }
  .cat-narrator--solved .cat-narrator__bubble { max-height: min(180px, calc(100% - 60px)); }
  .cat-narrator--envelope {
    --narrator-width: 108px;
    --narrator-height: 145px;
    --speech-left: 108px;
    --speech-bottom: 63px;
  }
}