/* Midna Documentation Assistant Style Sheet */

:root {
  /* Default to Dark/Slate Theme values */
  --cr-midna-bg: rgba(22, 18, 30, 0.85);
  --cr-midna-border: rgba(202, 168, 32, 0.35);
  --cr-midna-border-active: rgba(202, 168, 32, 0.7);
  --cr-cyan: #00f0ff;
  --cr-cyan-dim: rgba(0, 240, 255, 0.4);
  --cr-gold: #caa820;
  --cr-gold-light: #e4c040;
  --cr-midna-glow: rgba(0, 240, 255, 0.55);
  --cr-midna-btn-bg: rgba(255, 255, 255, 0.04);
  --cr-midna-btn-border: rgba(255, 255, 255, 0.08);
  --cr-midna-btn-hover-bg: color-mix(in srgb, var(--cr-gold) 15%, rgba(255, 255, 255, 0.08));
  --cr-midna-hover-bg: rgba(255, 255, 255, 0.05);
}

[data-md-color-scheme="slate"] {
  --cr-midna-bg: rgba(22, 18, 30, 0.85);
  --cr-midna-border: rgba(202, 168, 32, 0.35);
  --cr-midna-border-active: rgba(202, 168, 32, 0.7);
  --cr-cyan: #00f0ff;
  --cr-cyan-dim: rgba(0, 240, 255, 0.4);
  --cr-gold: #caa820;
  --cr-gold-light: #e4c040;
  --cr-midna-glow: rgba(0, 240, 255, 0.55);
  --cr-midna-btn-bg: rgba(255, 255, 255, 0.04);
  --cr-midna-btn-border: rgba(255, 255, 255, 0.08);
  --cr-midna-btn-hover-bg: color-mix(in srgb, var(--cr-gold) 15%, rgba(255, 255, 255, 0.08));
  --cr-midna-hover-bg: rgba(255, 255, 255, 0.05);
}

[data-md-color-scheme="default"] {
  --cr-midna-bg: rgba(242, 238, 248, 0.9);
  --cr-midna-border: rgba(94, 79, 138, 0.25);
  --cr-midna-border-active: rgba(94, 79, 138, 0.5);
  --cr-cyan: #008fa0;
  --cr-cyan-dim: rgba(0, 143, 160, 0.15);
  --cr-gold: #8e6e00;
  --cr-gold-light: #b2920d;
  --cr-midna-glow: rgba(94, 79, 138, 0.3);
  --cr-midna-btn-bg: rgba(0, 0, 0, 0.03);
  --cr-midna-btn-border: rgba(0, 0, 0, 0.07);
  --cr-midna-btn-hover-bg: color-mix(in srgb, var(--cr-gold) 10%, rgba(0, 0, 0, 0.05));
  --cr-midna-hover-bg: rgba(0, 0, 0, 0.05);
}

.cr-midna {
  position: fixed;
  right: 2rem;
  top: 3.2rem;
  z-index: 999;
  font-family: var(--md-text-font-family, sans-serif);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.cr-midna:not(.cr-midna--collapsed):not(.cr-midna--dragging) {
  transition: left 0.35s ease, top 0.35s ease;
}

.cr-midna--left {
  right: auto;
  left: 2rem;
  top: 8rem;
  align-items: flex-start;
}

.cr-midna--left .cr-midna__card {
  transform-origin: top left;
}

.cr-midna--left.cr-midna--collapsed .cr-midna__card {
  transform: scale(0.3) translate(-40px, -40px);
}

/* Trigger Button (Minimized state) */
.cr-midna__trigger {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 2px solid var(--cr-gold);
  background: var(--cr-midna-bg);
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 240, 255, 0.2);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
}

.cr-midna__trigger img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateY(-2px) scale(1.1);
}

.cr-midna__trigger-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 12px var(--cr-cyan);
  opacity: 0.6;
  animation: cr-midna-glow-pulse 2.5s infinite ease-in-out;
  pointer-events: none;
}

.cr-midna__trigger:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(0, 240, 255, 0.5);
}

/* Main Speech Card */
.cr-midna__card {
  width: 22rem; /* Give a bit more width for dialogue text column */
  max-width: calc(100vw - 4rem);
  background: var(--cr-midna-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--cr-midna-border);
  border-radius: 1rem;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 15px rgba(0, 240, 255, 0.1);
  pointer-events: auto;
  transform-origin: top right;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  position: relative;
  margin-top: 1rem; /* Sits nicely in layout */
}

.cr-midna--collapsed .cr-midna__card {
  transform: scale(0.3) translate(40px, -40px);
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.cr-midna--collapsed .cr-midna__trigger {
  display: flex;
}

.cr-midna:not(.cr-midna--collapsed) .cr-midna__trigger {
  display: none;
}

.cr-midna__speech-wrap {
  position: relative;
  min-height: 7.2rem; /* Ensure card has height to center Midna next to the text */
  display: flex;
  align-items: center; /* Vertically center the text column! */
  width: 100%;
}

.cr-midna__avatar-wrap {
  position: absolute;
  top: 50%;
  left: -0.2rem;
  width: 6.2rem;
  height: 7.2rem;
  transform: translateY(-50%);
  overflow: visible;
  z-index: 5;
  pointer-events: none;
  animation: cr-midna-hover-bob 4s infinite ease-in-out;
}

.cr-midna__avatar {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 10px rgba(0, 240, 255, 0.35));
}

.cr-midna__avatar-glow {
  position: absolute;
  top: 15%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cr-midna-glow) 0%, transparent 70%);
  filter: blur(10px);
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
  animation: cr-midna-glow-pulse 3s infinite ease-in-out;
}

.cr-midna__minimize {
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  background: transparent;
  border: none;
  color: var(--md-default-fg-color--light);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  transition: color 0.2s, background-color 0.2s;
  z-index: 10;
}

.cr-midna__minimize:hover {
  color: var(--cr-gold);
  background: var(--cr-midna-hover-bg);
}

/* Speech Text Container */
.cr-midna__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cr-midna__speech {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--md-default-fg-color);
  padding-left: 6.4rem; /* Push the text column to the right of Midna's body */
  padding-right: 0.8rem; /* Avoid overlapping the minimize button */
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  min-width: 0;
}

.cr-midna__speech p {
  margin: 0 0 0.5rem 0;
}
.cr-midna__speech p:last-child {
  margin-bottom: 0;
}

.cr-midna__speech em {
  color: var(--cr-cyan);
  font-style: normal;
  text-shadow: 0 0 4px rgba(0, 240, 255, 0.2);
}

.cr-midna__speech strong {
  color: var(--cr-gold-light);
}

/* Guide Options */
.cr-midna__guide-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-top: 1px solid var(--cr-midna-btn-border);
  padding-top: 0.5rem;
}

.cr-midna__btn {
  background: var(--cr-midna-btn-bg);
  border: 1px solid var(--cr-midna-btn-border);
  border-radius: 0.35rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cr-midna__btn::after {
  content: "→";
  opacity: 0.4;
  transition: transform 0.2s;
}

.cr-midna__btn:hover {
  background: var(--cr-midna-btn-hover-bg);
  border-color: var(--cr-gold);
  color: var(--md-default-fg-color);
}

.cr-midna__btn:hover::after {
  opacity: 1;
  transform: translateX(2px);
}

.cr-midna__btn--active {
  background: color-mix(in srgb, var(--cr-cyan) 12%, var(--cr-midna-btn-bg));
  border-color: var(--cr-cyan);
  color: var(--md-default-fg-color);
  font-weight: 600;
}

.cr-midna__btn--active::after {
  content: "●";
  color: var(--cr-cyan);
  opacity: 1;
}

.cr-midna__btn--docs {
  border-color: var(--cr-gold) !important;
  color: var(--cr-gold-light) !important;
  font-weight: 600;
}

.cr-midna__btn--docs::after {
  content: "↗" !important;
  opacity: 0.6;
}

.cr-midna__btn--docs:hover {
  background: var(--cr-midna-btn-hover-bg) !important;
  border-color: var(--cr-gold-light) !important;
  color: var(--cr-gold-light) !important;
}

.cr-midna__btn--docs:hover::after {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* Animations */
@keyframes cr-midna-glow-pulse {
  0% { opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { opacity: 0.4; }
}

@keyframes cr-midna-target-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 240, 255, 0.6);
    outline: 2px solid rgba(0, 240, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(202, 168, 32, 0.4);
    outline: 2px solid rgba(202, 168, 32, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(0, 240, 255, 0);
    outline: 2px solid rgba(0, 240, 255, 0);
  }
}

@keyframes cr-midna-hover-bob {
  0% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 6px)); }
  100% { transform: translateY(-50%); }
}

.cr-midna-target-highlight {
  animation: cr-midna-target-pulse 1.8s infinite ease-in-out !important;
  outline-offset: 2px !important;
  z-index: 10 !important;
  border-color: var(--cr-cyan) !important;
}

/* Page responsiveness overrides */
@media screen and (max-width: 76.234375em) {
  .cr-midna {
    left: auto;
    bottom: auto;
    right: 1rem;
    top: 3rem;
  }
  .cr-midna--left {
    right: auto;
    left: 1rem;
    top: 8rem;
  }
  .cr-midna__card {
    width: 17rem;
    padding: 0.8rem;
    gap: 0.5rem;
  }
  .cr-midna__speech-wrap {
    min-height: 4.8rem;
  }
  .cr-midna__avatar-wrap {
    width: 4rem;
    height: 4.6rem;
    left: 0;
  }
  .cr-midna__speech {
    padding-left: 4.2rem;
    padding-right: 0.2rem;
    font-size: 0.78rem;
  }
  .cr-midna__guide-options {
    gap: 0.25rem;
    padding-top: 0.4rem;
  }
  .cr-midna__btn {
    font-size: 0.7rem;
    padding: 0.3rem 0.45rem;
  }
}

/* Dragging cursor states */
.cr-midna__card,
.cr-midna__trigger {
  cursor: grab;
}

.cr-midna--dragging .cr-midna__card,
.cr-midna--dragging .cr-midna__trigger {
  cursor: grabbing !important;
}

/* Prevent native image dragging and selection */
.cr-midna img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Dismiss Widget Button (hover to show) */
.cr-midna__dismiss-widget {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: rgba(220, 50, 50, 0.9);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
  z-index: 1001;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  padding: 0;
  line-height: 1;
}

.cr-midna__trigger:hover .cr-midna__dismiss-widget--trigger,
.cr-midna__card:hover .cr-midna__dismiss-widget--card {
  opacity: 1;
  pointer-events: auto;
}

.cr-midna__dismiss-widget:hover {
  background: rgba(255, 50, 50, 1);
  transform: scale(1.1);
}

/* Position when collapsed */
.cr-midna__dismiss-widget--trigger {
  top: -4px;
  right: -4px;
}
.cr-midna--left .cr-midna__dismiss-widget--trigger {
  right: auto;
  left: -4px;
}

/* Position when expanded */
.cr-midna__dismiss-widget--card {
  top: 0.6rem;
  left: 0.6rem;
  right: auto;
}
.cr-midna--left .cr-midna__dismiss-widget--card {
  left: 0.6rem;
  right: auto;
}

/* First-time Hint Bubble */
.cr-midna__hint {
  position: absolute;
  top: 1rem;
  background: var(--cr-midna-bg);
  border: 1.5px solid var(--cr-midna-border);
  border-radius: 0.5rem;
  padding: 0.45rem 0.75rem;
  color: var(--md-default-fg-color);
  font-size: 0.72rem;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 240, 255, 0.15);
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0;
  transform: translateY(4px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cr-midna:not(.cr-midna--left) .cr-midna__hint {
  right: 5rem;
}
.cr-midna--left .cr-midna__hint {
  left: 5rem;
}

.cr-midna__hint.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Always display dismiss widgets on touch-only devices */
@media (hover: none) {
  .cr-midna__dismiss-widget--trigger,
  .cr-midna__dismiss-widget--card {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}