/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* navbarが固定表示の場合、コンテンツが隠れないようにpadding-topを設定 */
body.has-navbar-fixed-top .column.is-9-desktop {
  padding-top: 0.5rem; /* navbarの高さ分の余白 */
  margin-top: 0.5rem;
}

/* navbar の表示の優先順位を指定（サイドバーより下になるように） */
.navbar.is-9 {
  z-index: 100;
}

/* サイドバーを固定表示 */
.submenu.column.is-3 {
  position: fixed;
  /*
  このコメントを解除すると、サイドバーの位置が上にくる。( https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/position )
  top: 0;
  left: 0;
  right: 0;
  */
  overflow-y: auto;
  z-index: 1000;
}

/* サイドバーが固定されている場合、メインコンテンツの左マージンを調整（デスクトップ表示時のみ） */
@media screen and (min-width: 1024px) {
  body.has-navbar-fixed-top .column.is-9-desktop {
    margin-left: 25%; /* サイドバーの幅分（is-3 = 25%） */
  }
}

.assistant-message .box {
  margin-bottom: 0;
  width: fit-content; /* コンテンツに合わせた幅 */
  margin-right: 6em;
  background-color: #efefef;
}

.assistant-message .copy {
  margin-right: 6em;
  margin-bottom: 3em;
}

.user-message .box {
  margin-bottom: 0;
  width: fit-content; /* コンテンツに合わせた幅 */
  margin-left: 4em;
  margin-right: 1em;
  background-color: #c3f69d;
}

.user-message .copy {
  margin-left: 4em;
  margin-right: 1em;
  margin-bottom: 1em;
}

.notification {
  margin-right: 1em;
}

.message-content-input {
  /* max-width: 70%; *//* 最大幅を設定 */
  margin-right: 1em;
}

.sidebar-message-thread-link.selected {
  font-weight: bold;
}

.sidebar-user-link.selected {
  font-weight: bold;
}

.sidebar-gpt-model-link.selected {
  font-weight: bold;
}

/* モバイル表示時のナビゲーションメニューのスタイル */
@media screen and (max-width: 1023px) {
  /* モバイル表示時、navbar-menuはデフォルトで非表示（is-activeクラスがある場合のみ表示） */
  .navbar-menu {
    display: none;
  }

  .navbar-menu.is-active {
    display: block;
  }

  /* モバイル表示時、サイドバーを非表示（ハンバーガーメニューに表示されるため） */
  .submenu.column.is-3 {
    display: none;
  }

  /* モバイル表示時、メインコンテンツは全幅表示（is-9-desktopが適用されないため自動的に全幅になる） */

  /* ハンバーガーメニュー内のサイドバーコンテンツのスタイル */
  .navbar-menu .navbar-item .box {
    margin: 0;
    padding: 0.75rem;
  }

  /* ハンバーガーメニュー内ではスクロールせず全表示 */
  .navbar-menu .scrollable-sidebar {
    max-height: none;
    overflow: visible;
  }
}

.login-form {
  width: 480px;
}

.scrollable-sidebar {
  max-height: 90vh;
  overflow-y: auto;
}

.table-container thead tr {
  background-color: #f0f0f0;
}