@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
  100% { transform: scale(0.8); }
}

.faq-ai {
  font-family:'Noto Sans JP', sans-serif;

  .faq-ai-icon,.container {
      z-index: 9000;
  }

  /* FAQ AI Icon */
  .faq-ai-icon {
      position: fixed;
      bottom: 10px;
      right: 10px;
      width: 64px;
      height: 64px;
      background-color: #ffffff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: background-color 0.3s;
      pointer-events: auto;
      /* shadow-lg */
      box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .faq-ai-icon-lottie {
    width: 40px;
    height: 40px;
  }

  .faq-ai-icon-lottie svg {
    width: 24px !important;
    height: 24px !important;
  }

  .faq-ai-icon svg {
    width: 32px;
    height: 32px;
    fill: #0061FF;
  }

  .faq-ai-icon:hover {
      background-color: #E2E4EB;
  }

  /* Fade-in animation */
  .fade-in {
      animation: fadeIn 0.2s;
  }

  /* Tooltip */
  .faq-ai-icon .tooltip {
      position: absolute;
      bottom:calc(100% + 16px);
      right: 16px;
      background-color: #202531;
      color: white;
      padding: 8px;
      border-radius: 4px;
      font-size: 10px;
      white-space: nowrap;
      /* shadow-md */
      box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
      transition: opacity 0.3s;
      opacity: 0;
      pointer-events: none;
  }
  .faq-ai-icon .tooltip::after {
      content:"";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
      border-top: 8px solid #202531;
      border-bottom: 0;
      bottom: -8px;
      right: 10px;
  }

  .faq-ai-icon:hover .tooltip {
      opacity: 1;
  }

  /* Container */
  .container {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 400px;
      height: 640px;
      background-color: #ffffff;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      /* shadow-xl */
      box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
      display: none;
      box-sizing: border-box;
      border: 1px solid #F0F2F7;
  }

  @media (max-width: 400px) {
      .container {
          width: 100%;
          height: 100%;
          right: 0;
          bottom: 0;
          top: 0;
      }
  }

  /* Header */
  .header {
      background-color: #ffffff;
      color: #000000;
      padding: 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #F0F2F7;
  }

  .header-title {
      display: flex;
      align-items: center;
  }

  .header-main {
      font-size: 14px;
      font-weight: bold;
      line-height: 21px;
      margin-right: 8px;
      color: #202531;
  }

  .header-icons {
      display: flex;
      align-items: center;
  }

  .header-icon {
      cursor: pointer;
      font-size: 20px;
      margin-left: 15px;
      color: #62687F;
      z-index: 100;
  }

  .header-icon svg {
    width: 16px;
    height: 16px;
    fill: #62687F;
  }

  .header .new-chat-icon {
      position: relative;
  }

  .header .new-chat-icon .tooltip {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background-color: #202531;
      color: white;
      padding: 8px;
      border-radius: 4px;
      font-size: 10px;
      white-space: nowrap;
      display: none;
      /* shadow-md */
      box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .header .new-chat-icon .tooltip::after {
      content:"";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
      border-bottom: 8px solid #202531;
      border-top: 0;
      top: -8px;
      right: calc(50% - 8px);
  }

  .header .new-chat-icon:hover .tooltip {
      display: block;
  }

  /* Scrollable Content */
  .scrollable-content, .chat-scrollable-content {
      flex-grow: 1;
      overflow-y: auto;
      position: relative;
  }

  .content-wrapper, .chat-content-wrapper {
      padding: 24px;
  }

  .chat-content-wrapper {
      display: flex;
      flex-direction: column;
      gap: 48px;
  }

  .fade-overlay {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    margin-top: -100px;
  }

  /* Warning Section */
  .warning {
      background-color: #FFEFEC;
      border-radius: 4px;
      padding: 24px;
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .warning-title-wrapper {
      display: flex;
      align-items: center;
  }

  .warning-title-wrapper .warning-icon {
      display: flex;
      align-items: center;
      width: 24px;
      height: 24px;
  }

  .warning-title-wrapper .warning-icon svg {
    width: 20px;
    height: 20px;
    fill: #d32f2f;
  }

  .warning-title-wrapper .warning-title-text {
      color: #CF251F;
      font-weight: bold;
      font-size: 16px;
      line-height: 24px;
      margin: 0;
  }

  .warning-message {
      font-size: 12px;
      line-height: 18px;
      color: #202531;
      margin: 0;
  }

  .warning-message-wrapper {
      display: flex;
      flex-direction: column;
      gap: 4px;
  }

  .service-guide-link {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      color: #0061FF;
  }

  .service-guide-link .link-text {
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
      text-align: left;
      margin-right: 4px;
  }
  .service-guide-link:hover{
      color: #0039B3;
  }
  .service-guide-link:hover svg{
      fill: #0039B3;
  }

  /* Guidelines */
  .guidelines {
      display: flex;
      flex-direction: column;
      gap: 12px;
      color: #202531;
  }

  .guidelines ul {
      list-style: disc outside none;
  }

  .guide-title, .guide-text {
      margin: 0;
      font-size: 14px;
      line-height: 21px;
  }

  .guide-title {
      font-weight: bold;
  }

  .guide-text-group {
      margin: 0;
      padding-left: 20px;
  }

  /* Footer */
  .footer {
      background-color: #ffffff;
      padding: 0 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      text-align: start;
  }

  .checkbox-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .custom-checkbox-container {
      position: relative;
      display: inline-flex;
      align-items: center;
  }

  .custom-checkbox-container .custom-checkbox {
      width: 16px;
      height: 16px;
      opacity: 0;
      margin: 0;
  }

  .custom-checkbox-container .custom-checkbox-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 16px;
      height: 16px;
      box-sizing: border-box;
      border-width: 1px;
      border: 1px solid #C6CAD8;
      background-color: white;
      border-radius: 0.125rem;
  }

  .custom-checkbox:checked + .custom-checkbox-box {
      border-color: #0061FF; 
      background-color: #0061FF;
  }

  .custom-checkbox:checked:disabled + .custom-checkbox-box {
      border-color: #C6CAD8;
      background-color: #e2e8f0;
  }

  .custom-checkbox:disabled + .custom-checkbox-box {
      background-color: #f9fafb;
  }

  .custom-checkbox-container .custom-checkbox-icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 16px;
      height: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: transparent;
  }

  .custom-checkbox-container .custom-checkbox-icon svg {
    width: 12px;
    height: 12px;
    fill: white;
  }

  .custom-checkbox:checked + .custom-checkbox-box + .custom-checkbox-icon {
      color: white;
  }

  .custom-checkbox-label {
      font-size: 12px;
      font-weight: 400;
      margin-left: 4px;
      color: #202531;
      line-height: 18px;
  }

  .custom-checkbox:disabled + .custom-checkbox-box + .custom-checkbox-icon + .custom-checkbox-label {
      color: #C6CAD8;
  }


  .error-message {
      color: #CF251F;
      font-size: 12px;
      line-height: 18px;
  }

  .start-btn {
      border: none;
      padding: 12px 24px;
      text-align: center;
      text-decoration: none;
      display: block;
      width: 100%;
      font-size: 14px;
      line-height: 21px;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s;
      color: white;
      /* shadow */
      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  }

  .start-btn:disabled {
      background-color: #D3D5D6;
      color: #929394;
      cursor: not-allowed;
      pointer-events: none;
  }

  .start-btn:not(:disabled) {
      background-color: #0061FF;
      color: white;
  }
  .start-btn:hover{
      background-color: #0039B3;
  }    

  /* Chat Initial Content */
  .chat-examples-container {
      display: flex;
      flex-direction: column;
      gap: 24px;
  }

  .chat-instruction {
      text-align: center;
      color: #777F98;
      font-size: 12px;
      line-height: 18px;
  }

  .chat-messages {
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .message-example {
      background-color: #E6EDEC;
      border-radius: 8px;
      padding: 12px;
      color: #202531;
      font-size: 14px;
      line-height: 21px;
      align-self: flex-start;
      letter-spacing: normal;
      position: relative;
      min-height: 52px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
  }

  .message-example:hover {
      background-color: #C6D7D3;
  }

  .message-example .chat-example-submit-icon {
      background-color: white;
      border: none;
      padding: 0;
      cursor: pointer;
      position: absolute;
      right: 12px;
      bottom: 12px;
      width: 28px;
      height: 28px;
      padding: 6px;
      border-radius: 4px;
      box-sizing: border-box;
      display: none;
  }

  .message-example:hover .chat-example-submit-icon {
      display: block;
  }

  .message-example .chat-example-submit-icon svg {
      width: 16px;
      height: 16px;
      fill: #62687F;
  }

  .message-example .chat-example-submit-icon .tooltip {
    position: absolute;
    bottom:calc(100% + 14px);
    right: 0;
    background-color: #202531;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    display: none;
    /* shadow-md */
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .message-example .chat-example-submit-icon .tooltip::after {
      content:"";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
      border-top: 8px solid #202531;
      border-bottom: 0;
      bottom: -8px;
      right: 10px;
  }

  .message-example .chat-example-submit-icon:hover .tooltip {
      display: block;
  }

  /* Input Area */
  .textarea-container {
      padding: 8px 8px 8px 16px;
      border-radius: 4px;
      border: 1px solid #C6CAD8;
      color: white;
      display: flex;
      flex-direction: column;
  }

  .textarea-container textarea {
      flex-grow: 1;
      border: none;
      font-size: 14px;
      line-height: 21px;
      resize: none;
      max-height: 320px;
      overflow-y: hidden;
      color: #202531;
      font-weight: 400;
  }

  .textarea-container textarea::placeholder {
      color: #A9B0C5;
  }

  .textarea-container textarea:focus {
      outline: none;
  }

  .send-button-area {
      padding: 8px 0 0;
      background-color: white;
      display: flex;
      justify-content: flex-end;
  }

  .send-button {
      background-color: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
  }

  .send-button svg {
      width: 16px;
      height: 16px;
      fill: #0061FF;
  }

  /* Message Group */
  .message-group {
      display: flex;
      flex-direction: column;
      gap: 24px;
  }

  .message-group .timestamp {
      font-size: 12px;
      line-height: 18px;
      text-align: center;
      color: #777F98;
  }

  .message-group .user-input {
      background-color: #F7F9FA;
      border-radius: 8px;
      padding: 12px;
      font-size: 14px;
      line-height: 21px;
      color: #202531;
  }

  .message-group .ai-output {
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .message-group .ai-output .icon-area {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .message-group .ai-output .icon-area .progress-dot {
      display: flex;
      align-items: center;
  }

  .message-group .ai-output .icon-area .progress-dot .dot {
      width: 20px;
      height: 20px;
      margin: 2px;
      background-color: #0061FF;
      border-radius: 50%;
      animation: pulse 1.5s infinite;
  }

  .message-group .ai-output .chat-response-icon {
      width: 34px;
      height: 34px;
      background-color: #ffffff;
      border-radius: 50%;
      border: 1px solid #F0F2F7;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .message-group .ai-output .chat-response-icon svg {
    width: 20px;
    height: 20px;
    fill: #0061FF;
  }

  .message-group .ai-output .response-message-area {
      border-radius: 8px;
      padding: 12px;
      font-size: 14px;
      line-height: 21px;
      color: #202531;
      position: relative;
  }

  .message-group .ai-output .response-message-area:hover {
      background-color: #F0F2F7;
  }

  .message-group .ai-output .response-message-area .response-message {
      box-sizing: content-box;
  }

  .message-group .ai-output .response-message-area .actions {
      position: absolute;
      bottom: 10px;
      right: 10px;
      display: none;
      background-color: #ffffff;
      border-radius: 8px;
      padding: 4px;
      gap: 4px;
  }

  .message-group .ai-output .response-message-area:hover .actions{
      display: flex;
  }

  .message-group .ai-output .response-message-area .actions .icon {
      width: 16px;
      height: 16px;
      cursor: pointer;
      position: relative;
      padding: 6px;
      color: #62687F;
      border-radius: 4px;
      box-sizing: content-box;
  }

  .message-group .ai-output .response-message-area .actions .icon:hover {
      background-color: #E2E4EB;
  }

  .message-group .ai-output .response-message-area .actions .icon.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
      background-color: #D3D5D6;
  }

  .message-group .ai-output .response-message-area .actions .icon .tooltip {
      position: absolute;
      bottom:calc(100% + 14px);
      right: 0;
      background-color: #202531;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      display: none;
      /* shadow-md */
      box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .message-group .ai-output .response-message-area .actions .icon .tooltip::after {
      content:"";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
      border-top: 8px solid #202531;
      border-bottom: 0;
      bottom: -8px;
      right: 10px;
  }

  .message-group .ai-output .response-message-area .actions .icon:hover .tooltip {
      display: block;
  }

  .message-group .ai-output .reference {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
  }

  .message-group .ai-output .reference .reference-head {
      font-size: 12px;
      line-height: 18px;
      color: #777F98;
  }

  .message-group .ai-output .reference .reference-link {
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #0061FF;
      border: 1px solid #0061FF;
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 12px;
      line-height: 18px;
      max-width: 100%;
      text-decoration: none;
  }

  .message-group .ai-output .reference .reference-link:hover {
      color: #0039B3;
      border: 1px solid #0039B3;
  }

  .message-group .ai-output .contact-button-area {
      align-self: flex-start;
  }

  .message-group .ai-output .contact-button-area .contact-button {
      display: inline-flex;
      background-color: #0061FF;
      border-radius: 4px;
      padding: 8px 20px;
      box-shadow: 0px 1px 3px 0px #0000001A;
      font-size: 12px;
      line-height: 18px;
      color: white;
      text-decoration: none;
  }

  .message-group .ai-output .contact-button-area .contact-button:hover{
      background-color: #0039B3;
  }

  .message-group .ai-output .feedback-container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 246px;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    border-radius: 6px;
    border: 1px solid #C6CAD8;
  }

  .message-group .ai-output .feedback-container .feedback-icon-container {
    display: flex;
    gap: 12px;
    align-items: center;
    white-space: nowrap;
  }

  .message-group .ai-output .feedback-container .feedback-icon-container .feedback-title {
    font-size: 12px;
    line-height: 21px;
    color: #202531;
    font-weight: 400;
    white-space: nowrap;
  }

  .message-group .ai-output .feedback-container .feedback-icon-container .feedback-icon {
    padding: 6px;
    border-radius: 4px;
    background-color: #E4F0FB;
    cursor: pointer;
    position: relative;
  }

  .message-group .ai-output .feedback-container .feedback-icon-container .feedback-icon:hover {
    background-color: #DCE2E8;
  }

  .message-group .ai-output .feedback-container .feedback-icon-container .feedback-icon .tooltip {
    position: absolute;
    bottom:calc(100% + 14px);
    right: 0;
    background-color: #202531;
    color: white;
    padding: 8px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 15px;
    white-space: nowrap;
    display: none;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .message-group .ai-output .feedback-container .feedback-icon-container .feedback-icon .tooltip::after {
    content:"";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 8px solid #202531;
    border-bottom: 0;
    bottom: -8px;
    right: 10px;
  }

  .message-group .ai-output .feedback-container .feedback-icon-container .feedback-icon:hover .tooltip {
    display: block;
  }

  .message-group .ai-output .feedback-container .feedback-icon-container .feedback-icon svg {
    width: 16px;
    height: 16px;
    fill: #0061FF;
    display: block;
  }

  .message-group .ai-output .feedback-container .feedback-detail-subtitle {
    font-size: 12px;
    line-height: 18px;
    color: #777F98;
  }

  .message-group .ai-output .feedback-container .feedback-detail-form {
    display: flex;
    gap: 12px;
    flex-direction: column;
  }

  .message-group .ai-output .feedback-container .feedback-detail-form .feedback-detail-select {
    padding: 8px 8px 8px 12px;
    border: 1px solid #C6CAD8;
    border-radius: 4px;
    font-size: 12px;
    line-height: 18px;
    height: 34px;
    box-sizing: border-box;
    appearance: none;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 9L12 17L19 9H5Z" fill="%2362687F"/></svg>') no-repeat right 8px center;
    background-size: 16px 16px;
  }

  .message-group .ai-output .feedback-container .feedback-detail-form .feedback-detail-textarea {
    padding: 16px;
    border: 1px solid #C6CAD8;
    border-radius: 4px;
    font-size: 12px;
    line-height: 18px;
    resize: none;
    height: 80px;
    box-sizing: border-box;
    font-weight: 500;
  }

  .message-group .ai-output .feedback-container .feedback-detail-form .feedback-detail-textarea::placeholder {
    color: #A9B0C5;
  }

  .message-group .ai-output .feedback-container .feedback-detail-form .feedback-detail-submit {
    background-color: #0061FF;
    border: none;
    width: 48px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 18px;
    color: white;
    cursor: pointer;
    margin: 0 0 0 auto;
    transition: background-color 0.3s ease; 
  }

  .message-group .ai-output .feedback-container .feedback-detail-form .feedback-detail-submit:hover {
    background-color: #0039B3;
  }

  .message-group .ai-output .feedback-container .feedback-detail-form .feedback-detail-submit:disabled {
    background-color: #D3D5D6;
    color: #929394;
    cursor: not-allowed;
  }
}