/* ======================================
   ベーススタイル
   ====================================== */
html {
  background-color: #fff;
}

body {
  background-color: white;
  margin-bottom: 116px;
}

/* ======================================
   タイポグラフィ
   ====================================== */
h1 {
  font-size: 250%;
  font-weight: 600;
}

h2 {
  font-size: 225%;
  font-weight: 600;
}

h3 {
  font-size: 200%;
  font-weight: 600;
}

h4 {
  font-size: 175%;
  font-weight: 600;
}

h5 {
  font-size: 150%;
  font-weight: 600;
}

h6 {
  font-size: 125%;
  font-weight: 600;
}

/* メッセージ内の見出し調整 */
.message h1 {
  font-size: 180%;
  font-weight: 800;
}

.message h2 {
  font-size: 160%;
  font-weight: 700;
}

.message h3 {
  font-size: 140%;
  font-weight: 600;
}

.message h4 {
  font-size: 120%;
  font-weight: 500;
}

/* テキスト方向 */
div.rtl {
  text-align: right;
  direction: rtl;
}

/* ======================================
   ユーティリティクラス
   ====================================== */
.mt-3 {
  margin-top: 1rem;
}

/* 非表示ユーティリティ */
.hidden {
  display: none !important;
}

/* ボタン間隔調整 */
.btn-spacing {
  margin-left: 4em;
}

/* 警告通知のカスタムスタイル */
.notification-warning-custom {
  margin-bottom: 0;
  border-radius: 0;
}

/* フォームコントロールの上部マージン */
.control-top-margin {
  margin-top: 1.75rem;
}

/* ======================================
   ロゴ関連
   ====================================== */
.logo img {
  max-height: inherit;
}

.logo {
  padding: 0;
}

/* ======================================
   フォーム要素
   ====================================== */
.container form ul {
  font-size: small;
  padding: 1em;
}

.container form label {
  font-weight: 600;
}

.progress {
  margin-top: 12px;
}

/* 読み取り専用フィールド */
input[readonly],
textarea[readonly] {
  background-color: #f5f5f5;
  border: 1px solid #dbdbdb;
  color: #555;
  cursor: default;
}

/* 無効化されたフォーム */
form[disabled] {
  pointer-events: none;
  opacity: 0.4;
}

/* セレクトボックス用スタイル */
.select-flex-grow {
  flex-grow: 1;
  margin-right: 10px;
}

.select-full-width select {
  width: 100%;
}

/* ======================================
   サムネイル
   ====================================== */
img.thumbnail {
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
}

img.thumbnail:active {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* ======================================
   タブ関連
   ====================================== */
.tabs.is-boxed {
  margin-bottom: 0;
}

.tab_container .box {
  max-height: 0;
  padding: 0;
  position: absolute;
  margin-bottom: 0;
  z-index: 1000;
  overflow: hidden;
  width: 100%;
  transition: max-height 0.2s ease-out;
}

.tab_container .box > * {
  padding: 1em;
}

.tab_container .box.show {
  max-height: 400px;
  transition: max-height 0.2s ease-in;
}

/* ======================================
   ボックスとノーティフィケーション
   ====================================== */
.box > button.delete {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
}

/* ======================================
   フッター
   ====================================== */
.footer {
  position: fixed;
  height: 100px;
  padding: 2rem 1.5rem 1rem;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -9999;
}

/* ======================================
   タグとステータス表示
   ====================================== */
/* Bulmaタグの拡張スタイル */
.tag.is-danger-light {
  background-color: #ffeef0;
  color: #cc0f35;
}

.tag.is-info-light {
  background-color: #e3f2fd;
  color: #1976d2;
}

/* ユーザーロール別のタグスタイル */
.tag.role-admin {
  background-color: #ff3860;
  color: white;
}

.tag.role-manager {
  background-color: #ffdd57;
  color: rgba(0, 0, 0, 0.7);
}

.tag.role-educator {
  background-color: #3273dc;
  color: white;
}

.tag.role-teacher {
  background-color: #00d1b2;
  color: white;
}

.tag.role-assistant {
  background-color: #209cee;
  color: white;
}

.tag.role-student {
  background-color: #48c774;
  color: white;
}

.tag.role-viewer {
  background-color: #f5f5f5;
  color: rgba(0, 0, 0, 0.7);
}

.tag.role-systemadmin {
  background-color: #363636;
  color: white;
}

/* ======================================
   翻訳関連スタイル
   ====================================== */
/* 翻訳列のヘッダーを薄い色にして翻訳であることを示す */
div[id^="translate-"] .message-header {
  opacity: 0.7;
  color: #333;
}

/* 翻訳列全体の視覚的区別 */
div[id^="translate-"] {
  background-color: #f9f9f9;
  border-left: 3px solid #e0e0e0;
}

/* ======================================
   通知フェードアウトアニメーション
   ====================================== */
:root {
  --notification-fadeout-duration: 0.3s;
}

.notification {
  transition:
    opacity var(--notification-fadeout-duration) ease-out,
    transform var(--notification-fadeout-duration) ease-out;
  opacity: 1;
  transform: translateY(0);
}

.notification-fadeout {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
}

/* 通知エリア全体のスタイル調整 */
#notification-area {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 1000;
  max-width: 400px;
  pointer-events: none;
}

#notification-area .notification {
  margin-bottom: 10px;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ======================================
   チャットフォーム固定配置
   ====================================== */
.chat-log-wrapper {
  position: relative;
}

.chat-log-container {
  padding: 24px 8px;
  /* スクロール性能最適化 */
  scroll-behavior: smooth;
  will-change: scroll-position;
  contain: layout style paint;
}

.chat-form-fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-top: 1px solid #dbdbdb;
  padding: 1rem 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 50;
}

.chat-form-fixed-container .container {
  max-width: 1200px;
}

/* ======================================
   スクロールボタン
   ====================================== */
.scroll-button {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #3273dc;
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    opacity 0.3s ease,
    transform 0.2s ease,
    background-color 0.2s ease;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.scroll-button:hover {
  transform: scale(1.1);
  background-color: #2366d1;
}

.scroll-button:active {
  transform: scale(0.95);
}

.scroll-to-top {
  top: 60px;
  right: 10px;
}

.scroll-to-bottom {
  bottom: 240px;
  right: 10px;
}

/* ======================================
   無限スクロール関連
   ====================================== */
/* センチネル要素（通常は透明、デバッグ用に表示可能） */
#history-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
  min-height: 1px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.history-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
  min-height: 1px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#history-sentinel[data-debug="true"],
.history-sentinel[data-debug="true"] {
  background-color: rgba(255, 0, 0, 0.3);
  border: 2px dashed red;
  height: 15px;
  min-height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  /* デバッグ時はより目立つように */
}

/* Bottom sentinel specific styles */
#bottom-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
  min-height: 1px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.bottom-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
  min-height: 1px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#bottom-sentinel[data-debug="true"],
.bottom-sentinel[data-debug="true"] {
  background-color: rgba(0, 255, 0, 0.3);
  border: 2px dashed green;
  height: 15px;
  min-height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: green;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}

/* ======================================
   音声入力ボタンスタイル
   ====================================== */
.control.has-addons {
  display: flex;
  align-items: stretch;
}

.textarea-container {
  position: relative;
  flex: 1;
}

.control.has-addons .textarea {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  width: 100%;
}

.interim-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem;
  pointer-events: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.speech-button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
  min-height: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  transition: all 0.2s ease;
}

.speech-button:hover {
  background-color: #f5f5f5;
  border-color: #dbdbdb;
}

.speech-button.is-danger {
  background-color: #ff3860;
  border-color: #ff3860;
  color: white;
  animation: pulse 1.5s infinite;
}

.speech-button.is-danger:hover {
  background-color: #ff1443;
  border-color: #ff1443;
}

/* 音声入力・AI推敲ボタンの縦並び用 */
.speech-button-container {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  align-items: center;
  justify-content: center;
  margin-left: 0.5em;
}

.speech-button {
  min-width: 2.5em;
  min-height: 2.5em;
  padding: 0.5em 0.7em;
  font-size: 1.2em;
}

.speech-button[disabled],
.speech-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.speech-button .fa-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 56, 96, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 56, 96, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 56, 96, 0);
  }
}

/* モバイル対応 */
@media (max-width: 768px) {
  .chat-log-container {
    padding: 16px 4px;
  }

  .scroll-button {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }

  .scroll-to-top {
    top: 60px;
    /* モバイルでヘッダーと重ならないよう調整 */
    right: 5px;
  }

  .scroll-to-bottom {
    bottom: 120px;
    /* モバイルで固定フォームと重ならないよう調整 */
    right: 5px;
  }

  .speech-button {
    padding: 0 8px;
    min-width: 40px;
  }

  .speech-button .icon {
    font-size: 14px;
  }
}

#chat-message-input,
#interim-text-overlay {
  padding: 10px;
  margin: 0 4px;
}