/* ============================================================
   GATE AI Chat
   public/ai-chat.css

   공통 사용:
   - student.html
   - teacher.html
   - index.html (추후)

   모든 클래스는 gate-ai-* prefix 사용
   ============================================================ */


/* ============================================================
   Launcher
   ============================================================ */

#gateAiLauncher {
  position: fixed;

  right: 22px;
  bottom: 24px;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #4f46e5
    );

  color: #ffffff;

  box-shadow:
    0 8px 24px
    rgba(15, 23, 42, 0.22);

  cursor: pointer;

  z-index: 9000;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;

  -webkit-tap-highlight-color:
    transparent;

  user-select: none;
}


#gateAiLauncher:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 12px 30px
    rgba(15, 23, 42, 0.28);
}


#gateAiLauncher:active {
  transform:
    scale(0.96);
}


#gateAiLauncher:focus-visible {
  outline:
    3px solid
    rgba(37, 99, 235, 0.28);

  outline-offset:
    3px;
}


/* ============================================================
   Launcher Icon
   ============================================================ */

.gate-ai-launcher-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  font-size: 25px;
  line-height: 1;
}


/* ============================================================
   Small AI Badge
   ============================================================ */

.gate-ai-launcher-badge {
  position: absolute;

  right: -2px;
  top: -3px;

  min-width: 24px;
  height: 18px;

  padding:
    0 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    2px solid #ffffff;

  border-radius:
    999px;

  background:
    #111827;

  color:
    #ffffff;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.04em;
}


/* ============================================================
   Chat Panel
   ============================================================ */

#gateAiPanel {
  position: fixed;

  right: 22px;
  bottom: 94px;

  width:
    min(
      390px,
      calc(100vw - 32px)
    );

  height:
    min(
      620px,
      calc(100vh - 130px)
    );

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    rgba(148, 163, 184, 0.28);

  border-radius:
    22px;

  background:
    #ffffff;

  box-shadow:
    0 22px 60px
    rgba(15, 23, 42, 0.24);

  z-index:
    8999;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(18px)
    scale(0.97);

  transform-origin:
    bottom right;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}


#gateAiPanel.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(0)
    scale(1);
}


/* ============================================================
   Header
   ============================================================ */

.gate-ai-header {
  flex:
    0 0 auto;

  min-height:
    68px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    12px 14px 12px 16px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #4f46e5
    );

  color:
    #ffffff;
}


.gate-ai-header-left {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.gate-ai-avatar {
  flex:
    0 0 auto;

  width:
    42px;

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(255, 255, 255, 0.35);

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, 0.16);

  font-size:
    21px;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.gate-ai-header-text {
  min-width:
    0;
}


.gate-ai-title {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    16px;

  font-weight:
    800;

  line-height:
    1.2;
}


.gate-ai-subtitle {
  margin:
    4px 0 0;

  overflow:
    hidden;

  color:
    rgba(255, 255, 255, 0.82);

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ============================================================
   Close Button
   ============================================================ */

#gateAiClose {
  flex:
    0 0 auto;

  width:
    36px;

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    none;

  border-radius:
    11px;

  background:
    rgba(255, 255, 255, 0.12);

  color:
    #ffffff;

  font-size:
    22px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background 0.15s ease,
    transform 0.15s ease;

  -webkit-tap-highlight-color:
    transparent;
}


#gateAiClose:hover {
  background:
    rgba(255, 255, 255, 0.22);
}


#gateAiClose:active {
  transform:
    scale(0.94);
}


/* ============================================================
   Messages Area
   ============================================================ */

#gateAiMessages {
  flex:
    1 1 auto;

  min-height:
    0;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  padding:
    18px 14px 22px;

  background:
    #f8fafc;

  overscroll-behavior:
    contain;

  scroll-behavior:
    smooth;

  -webkit-overflow-scrolling:
    touch;
}


#gateAiMessages::-webkit-scrollbar {
  width:
    5px;
}


#gateAiMessages::-webkit-scrollbar-track {
  background:
    transparent;
}


#gateAiMessages::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(100, 116, 139, 0.3);
}


/* ============================================================
   Message Row
   ============================================================ */

.gate-ai-message {
  width:
    100%;

  display:
    flex;

  margin-bottom:
    12px;
}


.gate-ai-message:last-child {
  margin-bottom:
    0;
}


.gate-ai-message-user {
  justify-content:
    flex-end;
}


.gate-ai-message-assistant {
  justify-content:
    flex-start;
}


.gate-ai-message-system {
  justify-content:
    center;
}


/* ============================================================
   Message Bubble
   ============================================================ */

.gate-ai-message-bubble {
  max-width:
    82%;

  padding:
    10px 13px;

  border-radius:
    16px;

  font-size:
    14px;

  line-height:
    1.55;

  overflow-wrap:
    anywhere;

  word-break:
    break-word;
}


.gate-ai-message-user
.gate-ai-message-bubble {
  border-bottom-right-radius:
    5px;

  background:
    #2563eb;

  color:
    #ffffff;

  box-shadow:
    0 3px 10px
    rgba(37, 99, 235, 0.16);
}


.gate-ai-message-assistant
.gate-ai-message-bubble {
  border:
    1px solid
    #e2e8f0;

  border-bottom-left-radius:
    5px;

  background:
    #ffffff;

  color:
    #1e293b;

  box-shadow:
    0 2px 8px
    rgba(15, 23, 42, 0.05);
}


.gate-ai-message-system
.gate-ai-message-bubble {
  max-width:
    92%;

  padding:
    7px 11px;

  border:
    1px solid
    #e2e8f0;

  border-radius:
    10px;

  background:
    #f1f5f9;

  color:
    #64748b;

  font-size:
    11px;

  line-height:
    1.4;

  text-align:
    center;
}


/* ============================================================
   Typing Indicator
   ============================================================ */

.gate-ai-typing {
  min-width:
    56px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  padding-top:
    14px;

  padding-bottom:
    14px;
}


.gate-ai-typing span {
  width:
    6px;

  height:
    6px;

  display:
    block;

  border-radius:
    50%;

  background:
    #94a3b8;

  animation:
    gateAiTypingBounce
    1.2s
    infinite ease-in-out;
}


.gate-ai-typing span:nth-child(2) {
  animation-delay:
    0.15s;
}


.gate-ai-typing span:nth-child(3) {
  animation-delay:
    0.3s;
}


@keyframes gateAiTypingBounce {

  0%,
  60%,
  100% {
    transform:
      translateY(0);

    opacity:
      0.45;
  }

  30% {
    transform:
      translateY(-4px);

    opacity:
      1;
  }

}


/* ============================================================
   Status
   ============================================================ */

#gateAiStatus {
  flex:
    0 0 auto;

  min-height:
    18px;

  padding:
    3px 16px 1px;

  background:
    #ffffff;

  color:
    #64748b;

  font-size:
    10px;

  line-height:
    1.4;
}


#gateAiStatus:empty {
  min-height:
    0;

  padding-top:
    0;

  padding-bottom:
    0;
}


#gateAiStatus[data-type="loading"] {
  color:
    #64748b;
}


#gateAiStatus[data-type="error"] {
  color:
    #dc2626;
}


/* ============================================================
   Composer
   ============================================================ */

.gate-ai-composer {
  flex:
    0 0 auto;

  padding:
    10px 12px 11px;

  border-top:
    1px solid
    #e2e8f0;

  background:
    #ffffff;
}


.gate-ai-input-row {
  display:
    flex;

  align-items:
    flex-end;

  gap:
    8px;
}


.gate-ai-input-wrap {
  flex:
    1 1 auto;

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid
    #cbd5e1;

  border-radius:
    16px;

  background:
    #f8fafc;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}


.gate-ai-input-wrap:focus-within {
  border-color:
    #3b82f6;

  background:
    #ffffff;

  box-shadow:
    0 0 0 3px
    rgba(59, 130, 246, 0.10);
}


/* ============================================================
   Textarea
   ============================================================ */

#gateAiInput {
  width:
    100%;

  min-height:
    42px;

  max-height:
    120px;

  display:
    block;

  resize:
    none;

  overflow-y:
    auto;

  padding:
    10px 12px 4px;

  border:
    none;

  outline:
    none;

  background:
    transparent;

  color:
    #0f172a;

  font-family:
    inherit;

  font-size:
    14px;

  line-height:
    1.45;
}


#gateAiInput::placeholder {
  color:
    #94a3b8;
}


#gateAiInput:disabled {
  cursor:
    wait;

  opacity:
    0.65;
}


/* ============================================================
   Counter
   ============================================================ */

.gate-ai-input-meta {
  min-height:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  padding:
    0 10px 5px;
}


#gateAiCounter {
  color:
    #94a3b8;

  font-size:
    9px;

  line-height:
    1;
}


/* ============================================================
   Send Button
   ============================================================ */

#gateAiSend {
  flex:
    0 0 auto;

  width:
    44px;

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    none;

  border-radius:
    14px;

  background:
    #2563eb;

  color:
    #ffffff;

  font-size:
    19px;

  font-weight:
    700;

  cursor:
    pointer;

  box-shadow:
    0 4px 12px
    rgba(37, 99, 235, 0.22);

  transition:
    background 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;

  -webkit-tap-highlight-color:
    transparent;
}


#gateAiSend:hover:not(:disabled) {
  background:
    #1d4ed8;
}


#gateAiSend:active:not(:disabled) {
  transform:
    scale(0.95);
}


#gateAiSend:disabled {
  cursor:
    wait;

  opacity:
    0.45;

  box-shadow:
    none;
}


/* ============================================================
   Footer Note
   ============================================================ */

.gate-ai-footer-note {
  margin:
    7px 3px 0;

  color:
    #94a3b8;

  font-size:
    9px;

  line-height:
    1.3;

  text-align:
    center;
}


/* ============================================================
   Tablet
   ============================================================ */

@media (
  max-width: 900px
) {

  #gateAiLauncher {
    right:
      18px;

    bottom:
      82px;
  }


  #gateAiPanel {
    right:
      16px;

    bottom:
      150px;

    height:
      min(
        600px,
        calc(100vh - 175px)
      );
  }

}


/* ============================================================
   Mobile
   ============================================================ */

@media (
  max-width: 640px
) {

  #gateAiLauncher {
    right:
      16px;

    /*
      student.html의 모바일 하단 메뉴와 겹치지 않도록
      충분히 위에 배치.
    */
    bottom:
      calc(
        78px +
        env(safe-area-inset-bottom)
      );

    width:
      54px;

    height:
      54px;
  }


  #gateAiPanel {
    /*
      모바일에서는 floating card보다
      화면 대부분을 사용하는 sheet 형태.
    */

    top:
      max(
        10px,
        env(safe-area-inset-top)
      );

    right:
      8px;

    bottom:
      calc(
        72px +
        env(safe-area-inset-bottom)
      );

    left:
      8px;

    width:
      auto;

    height:
      auto;

    max-height:
      none;

    border-radius:
      18px;

    transform-origin:
      bottom center;
  }


  .gate-ai-header {
    min-height:
      62px;

    padding:
      10px 12px 10px 14px;
  }


  .gate-ai-avatar {
    width:
      38px;

    height:
      38px;

    border-radius:
      12px;

    font-size:
      19px;
  }


  .gate-ai-title {
    font-size:
      15px;
  }


  .gate-ai-subtitle {
    font-size:
      10px;
  }


  #gateAiMessages {
    padding:
      15px 11px 18px;
  }


  .gate-ai-message-bubble {
    max-width:
      86%;

    padding:
      9px 11px;

    font-size:
      13px;
  }


  .gate-ai-composer {
    padding:
      8px 9px
      calc(
        9px +
        env(safe-area-inset-bottom) * 0
      );
  }


  #gateAiInput {
    /*
      iOS에서 input focus 시 자동 zoom을 막기 위해
      모바일에서는 16px 사용.
    */
    font-size:
      16px;
  }


  #gateAiSend {
    width:
      43px;

    height:
      43px;
  }

}


/* ============================================================
   Very Small Mobile
   ============================================================ */

@media (
  max-width: 380px
) {

  #gateAiPanel {
    right:
      5px;

    left:
      5px;

    border-radius:
      16px;
  }


  .gate-ai-header {
    padding-left:
      11px;

    padding-right:
      9px;
  }


  .gate-ai-message-bubble {
    max-width:
      90%;
  }

}


/* ============================================================
   Landscape Mobile
   ============================================================ */

@media (
  max-height: 520px
)
and (
  orientation: landscape
) {

  #gateAiLauncher {
    bottom:
      16px;
  }


  #gateAiPanel {
    top:
      6px;

    right:
      8px;

    bottom:
      6px;

    left:
      auto;

    width:
      min(
        390px,
        calc(100vw - 16px)
      );

    height:
      auto;
  }


  .gate-ai-header {
    min-height:
      54px;
  }


  .gate-ai-avatar {
    width:
      34px;

    height:
      34px;
  }

}


/* ============================================================
   Reduced Motion
   ============================================================ */

@media (
  prefers-reduced-motion: reduce
) {

  #gateAiLauncher,
  #gateAiPanel,
  #gateAiClose,
  #gateAiSend {
    transition:
      none;
  }


  .gate-ai-typing span {
    animation:
      none;

    opacity:
      0.7;
  }


  #gateAiMessages {
    scroll-behavior:
      auto;
  }

}
/* ============================================================
   Public Index - Bichon AI Launcher
   index.html only
   ============================================================ */

.gate-ai-public-bichon #gateAiLauncher {
  right: 14px;
  bottom: 14px;

  width: 52px;
  height: 52px;

  padding: 0;

  overflow: visible;

  background: transparent;

  box-shadow:
    0 7px 20px
    rgba(15, 23, 42, 0.22);
}


.gate-ai-public-bichon
#gateAiLauncher:hover {
  transform:
    translateY(-2px)
    scale(1.04);

  box-shadow:
    0 10px 24px
    rgba(15, 23, 42, 0.28);
}


.gate-ai-public-bichon
.gate-ai-launcher-bichon {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 50%;

  pointer-events: none;

  user-select: none;
}


/* Tablet */
@media (
  max-width: 900px
) {

  .gate-ai-public-bichon
  #gateAiLauncher {
    right: 12px;
    bottom: 14px;
  }

}


/* Mobile */
@media (
  max-width: 640px
) {

  .gate-ai-public-bichon
  #gateAiLauncher {
    right:
      10px;

    bottom:
      calc(
        12px +
        env(safe-area-inset-bottom)
      );

    width:
      50px;

    height:
      50px;
  }

}
/* ============================================================
   Public Index - Bichon AI Header Avatar
   index.html only
   ============================================================ */

.gate-ai-public-bichon
.gate-ai-avatar-bichon {
  padding: 0;

  overflow: hidden;

  background: transparent;

  border-radius: 14px;
}


.gate-ai-public-bichon
.gate-ai-avatar-bichon img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: inherit;

  pointer-events: none;
}
/* ============================================================
   GATE AI - Bichon Header Avatar
   Student / Teacher
   ============================================================ */

.gate-ai-avatar.gate-ai-avatar-bichon {
  padding: 0;
  overflow: hidden;
}

.gate-ai-avatar.gate-ai-avatar-bichon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}