/*
 * annotation-video-player-v6의 instruction-ui-v2 / instruction-ui-v3 / non-destructive-test
 * Overlay.svelte 3개(및 quiz-video-player/quiz-v1과 겹치는 일부 규칙)에서 텍스트 그대로
 * 중복돼 있던 <style> 규칙을 모은 파일. legacy-ui/PRPO(그룹 A)는 이 파일을 참조하지 않고
 * 클래스명 일부(.subtask-list-button, .overlay-popup 등)가 겹치므로, 모든 선택자를
 * [data-overlay-family="v5"] 아래로 스코프해 그룹 A로 새어나가지 않도록 한다.
 * (akview-maas의 annotation-popup.css 분리 선례를 구조적으로만 참고 -- 값은 이 프로젝트
 * 자체 값을 그대로 유지, maas의 CSS를 이식하지 않음)
 */

[data-overlay-family="v5"].layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  --seeker-bar-height: 35px;
}

[data-overlay-family="v5"].layers > * {
  position: absolute;
}

[data-overlay-family="v5"] .subtask-list-button {
  position: absolute;
  box-sizing: border-box;
  pointer-events: all;
  cursor: pointer;
  bottom: calc(var(--seeker-bar-height) + 1%);
  top: auto;
  left: 92.5%;
  width: 5.2%;
  height: 9.3%;
  border-radius: 50%;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

[data-overlay-family="v5"] .toggle-mute-button {
  pointer-events: all;
  box-sizing: border-box;
  z-index: 1;

  position: absolute;
  bottom: calc(var(--seeker-bar-height) + 11.5%);
  top: auto;
  left: 86.5%;
  width: 5%;
  height: 8.9%;
  border: 0px solid cyan;
  border-radius: 25px;

  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}

[data-overlay-family="v5"] .toggle-fullscreen-button {
  pointer-events: all;
  box-sizing: border-box;
  z-index: 1;

  position: absolute;
  bottom: calc(var(--seeker-bar-height) + 11.5%);
  top: auto;
  left: 92.5%;
  width: 5%;
  height: 8.9%;
  border: 0px solid cyan;

  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

/* Sits directly above the fullscreen toggle, same column, one row up. */
[data-overlay-family="v5"] .toggle-search-button {
  pointer-events: all;
  box-sizing: border-box;
  z-index: 1;

  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: calc(var(--seeker-bar-height) + 22%);
  top: auto;
  left: 92.5%;
  width: 5%;
  height: 8.9%;
  border: 0px solid cyan;
  color: white;

  cursor: pointer;
}

[data-overlay-family="v5"] .search-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: all;
}

[data-overlay-family="v5"] .search-overlay-panel {
  width: 80%;
  max-width: 80%;
}

[data-overlay-family="v5"] .toggle-instruction-button {
  position: absolute;
  display: block;
  box-sizing: border-box;
  bottom: calc(var(--seeker-bar-height) + 1%);
  top: auto;
  left: 86.5%;
  width: 5.2%;
  height: 9.3%;
  z-index: 10;
  cursor: pointer;
  pointer-events: all;
  border: 0px solid cyan;
  border-radius: 50%;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

[data-overlay-family="v5"] .overlay-tag {
  pointer-events: all;
  cursor: pointer;

  stroke: rgba(175, 224, 231, 1);
  fill: url(#overlay-tag-gradient);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  rx: 5px;
  ry: 5px;

  &:active,
  &:focus,
  &:hover {
    stroke: rgba(127, 127, 127, 1);
    fill: rgba(64, 132, 255, 1);
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

[data-overlay-family="v5"] .overlay-tag-text {
  font-family: "Liberation Sans", sans-serif;
  font-weight: normal;
  font-size: 20px;
  stroke-width: 0.2px;
  stroke: white;
  fill: white;
}

[data-overlay-family="v5"] .overlay-tag-anchor-line {
  stroke-width: 5px;
  stroke: rgba(131, 185, 185, 0.7);
  stroke-linecap: round;
}

/* Empty annotation -- instruction-ui-v2/v3 전용 (quiz-v1은 "empty" 타입을 쓰지 않아 매칭 대상 없음) */
[data-overlay-family="v5"] .overlay-tag.empty {
  --stroke-color: #aaa;
  --fill-color: #eaeaea;

  stroke: var(--stroke-color);
  fill: var(--fill-color);

  cursor: default;

  &:hover {
    stroke: var(--stroke-color);
    fill: var(--fill-color);
  }
}

[data-overlay-family="v5"] .overlay-tag-text.empty {
  stroke: #aaa;
  fill: #555;
}

[data-overlay-family="v5"] .overlay-tag-anchor-line.empty {
  stroke: rgba(170, 170, 170, 0.7);
}

/* instruction overlay -- instruction-ui-v2/v3/non-destructive-test 전용
   (quiz-v1은 위치/크기 값이 달라 자기 파일에 로컬로 남김) */
@property --instruction-text-size {
  syntax: '<length>';
  inherits: false;
  initial-value: 1vw;
}

[data-overlay-family="v5"] .instruction-overlay {
  position: absolute;
  top: auto;
  left: 15%;
  width: 70%;
  bottom: calc(var(--seeker-bar-height) + 2%);
  height: 20%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
  padding: 0;
  overflow: visible;
  border: clamp(1px, 0.3cqw, 3px) solid rgba(87, 248, 255, 1);
  border-radius: 5px;
  pointer-events: all;

  &.hidden {
    opacity: 0;
    pointer-events: none;
  }

  &.expanded {
    top: 16%;
    height: auto;
  }

  & > * {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    color: white;
    text-align: left;
    margin: 0;
    padding: 0;
  }
}

/* instruction-text -- {@html instructionHTML}로 삽입되는 콘텐츠 스타일링 */
@property --instruction-text-size {
  syntax: '<length>';
  inherits: false;
  initial-value: 16px;
}

[data-overlay-family="v5"] .instruction-overlay .instruction-text {
  --instruction-text-size: min(1.5vw, 24px);
  --instruction-indent-size: 2ch;
  --text-color: white;
  --dimmed-text-color: color-mix(in srgb, var(--text-color) 30%, transparent);
  font-family: "Liberation Sans", sans-serif;
  font-weight: 300;
  font-size: var(--instruction-text-size);
  line-height: 1.4em;
  scrollbar-width: thin;
  scrollbar-color: var(--dimmed-text-color) transparent;
  scrollbar-gutter: stable;

  /* default as dimmed color */
  color: var(--dimmed-text-color);

  & > h1 {
    all: unset;
    display: block;
    font-size: 1.0em;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
  }

  & > h2 {
    all: unset;
    display: block;
    font-size: 1.0em;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
  }

  ul {
    list-style-type: none;
    text-indent: 0ch;
    margin: 0;
    padding: 0;
  }

  li {
    margin-left: var(--instruction-indent-size, 2ch);
  }

  .highlight, .highlight * {
    color: var(--text-color);
  }

  .highlight, .clickable.highlight {
    background-color: rgba(200, 207, 243, 0.5);
  }

  .clickable {
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--text-color);
      background-color: rgba(228, 255, 73, 0.5);
    }
  }

  a {
    color: white;
    font-weight: bold;
    text-decoration: underline;

    &:hover {
      color: rgb(252, 92, 0);
    }
  }
}

/* minimap -- instruction-ui-v2/v3/non-destructive-test 전용 위치/크기.
   img 사이징 규칙만 quiz-v1의 자체 .minimap과도 공유(아래 별도 규칙). */
[data-overlay-family="v5"] .minimap {
  position: absolute;
  bottom: calc(var(--seeker-bar-height) + 2%);
  top: auto;
  left: 1%;
  width: 12%;
  height: 20%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
  padding: 0;
  overflow: hidden;
  border: clamp(1px, 0.3cqw, 3px) solid rgba(87, 248, 255, 1);
  border-radius: 5px;
  pointer-events: all;

  .layers {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* quiz-v1의 .minimap(bottom-bar 안에 위치, 별도 크기 규칙)에도 그대로 적용되는
   이미지 채움 규칙 -- 두 레이아웃이 완전히 동일하게 쓰던 부분만 공유 */
[data-overlay-family="v5"] .minimap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@property --progress {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

/* task-header -- instruction-ui-v2/v3/non-destructive-test 전용 구조.
   --border-color 기본값은 instruction-ui-v2/non-destructive-test 기준(instruction-ui-v3는
   자기 파일에서 디버그용으로 로컬 override). quiz-v1은 구조 자체가 달라 별도 유지. */
[data-overlay-family="v5"] .task-header {
  position: absolute;
  top: 10px;
  left: 0%;
  width: 100%;
  height: 3em;
  z-index: 10;
  pointer-events: none;
  font-family: "Arial", sans-serif;
  font-size: 1.5vw;
  --border-color: rgb(59,187,227);
  --text-color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;

  & > * {
    color: var(--text-color);
    text-align: center;
  }

  .left-pad, .right-pad {
    flex: 0 1 15%;
    height: 100%;
    display: flex;
    align-items: center;

    hr {
      display: block;
      flex: 1;
      border: none;
      border: 2px solid var(--border-color);
      border-radius: 99px;
    }
  }

  .edit-button {
    flex-shrink: 0;
    pointer-events: all;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.12em 0.55em;
    margin-left: 0.5em;
    border: 2px solid var(--border-color);
    border-radius: 5px;
    color: var(--border-color);
    background: transparent;
    font-family: "Arial", sans-serif;
    font-size: 0.65em;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;

    &:hover {
      background-color: rgba(59, 187, 227, 0.7);
      color: white;
    }
  }

  .left-decoration, .right-decoration {
    flex: 0 0 2%;
    height: 100%;
    border: 2px solid var(--border-color);
    box-sizing: border-box;
  }

  .left-decoration {
    border-radius: 15px 0 0 15px;
    margin: 15px 0.5vw 15px 0.2vw; /* top right bottom left */
  }

  .right-decoration {
    border-radius: 0 15px 15px 0;
    margin: 15px 0.2vw 15px 0.5vw; /* top right bottom left */
  }

  .center {
    flex: 4 1 auto;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    overflow: clip;
    container-type: size;
  }

  h2 {
    margin: 0;
    padding: 0;
    font-size: 1em;
    line-height: 1.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  h3 {
    margin: 0;
    padding: 0;
    font-size: 1em;
    line-height: 1.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--progress);
    height: 100%;
    background-color: rgba(151, 151, 151, 0.7);
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* model-name ("Return to list" 타이틀) -- instruction-ui-v2/v3/non-destructive-test 전용.
   quiz-v1은 이 블록 자체가 없음(자체 model-title + adjustModelTitleFontSize 이진탐색 방식). */
[data-overlay-family="v5"] .model-name {
  pointer-events: none;
  max-width: 15cqw;
  font-size: 10cqb;
  position: absolute;
  top: 0;
  margin-left: 5px;

  /* Fluid title sizing: font-size shrinks as --model-char-count grows so the title
     keeps fitting inside the 15cqw slot instead of overflowing it, while staying
     capped at --model-title-max-font (height-limited) for short titles. 0.58 is an
     approximate average glyph-width-to-font-size ratio for the Roboto family. */
  --model-title-min-font: 2.2cqb;
  --model-title-max-font: 5cqb;

  h3 {
    font-family: "Roboto", sans-serif;
    font-size: clamp(
      var(--model-title-min-font),
      calc(15cqw / (max(var(--model-char-count), 1) * 0.64)),
      var(--model-title-max-font)
    );
    line-height: 1.2em;
    color: white;
    margin: 0;
    padding: 0;
    pointer-events: all;
    width: fit-content;
    max-width: 15cqw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    a {
      position: relative;
      color: white;
      text-decoration: none;
    }

    a[data-title]::after {
      content: attr(data-title);
      opacity: 0;
      position: absolute;
      top: 100%;
      left: 0%;
      width: max-content;
      height: max-content;
      padding: 0.3rem 1rem;
      border: 1px solid black;
      border-radius: 5px;
      background-color: white;
      color: black;
      text-decoration: none;
      font-weight: normal;
      text-align: center;
      z-index: 20;
      pointer-events: none;
      font-size: 0.5em;
      line-height: 1em;
    }

    a[data-title]:hover::after {
      opacity: 1;
    }
  }

  /* Past MODEL_TITLE_WRAP_THRESHOLD chars the clamp() above has already bottomed out at
     --model-title-min-font; wrap onto a second line instead of continuing to shrink into
     unreadable text. */
  &.wrap-two-lines h3 {
    font-size: var(--model-title-min-font);
    width: 15cqw;
    white-space: normal;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

[data-overlay-family="v5"] .overlay-popup-window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 30;

  .overlay-popup {
    pointer-events: all;
  }
}

[data-overlay-family="v5"] .subtask-list-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* subtask-list의 bottom 위치는 seeker bar 유무에 따라 달라 로컬에서 override 가능하도록
   기본값만 지정(instruction-ui-v2/v3/non-destructive-test 전용, --seeker-bar-height 기준) */
[data-overlay-family="v5"] .subtask-list {
  position: absolute;
  bottom: var(--seeker-bar-height);
  right: 0;
  font-size: 16px;
  width: max-content;
  height: 50%;
  pointer-events: all;
  z-index: 50;
}

/* Animation Effects -- instruction-ui-v2/v3/non-destructive-test/quiz-v1 공통 */
@keyframes v5-overlay-blink {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

[data-overlay-family="v5"] .blinking {
  animation: v5-overlay-blink 1s infinite;
}