* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Yu Gothic", "Meiryo", system-ui, sans-serif;
  background: linear-gradient(135deg, #eaf5ff, #ffffff);
  color: #17324d;
}

.app {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 760px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(30, 94, 150, 0.18);
  overflow: hidden;
  border: 1px solid #d8ecff;
}

.header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px;
  background: linear-gradient(135deg, #1d7ed0, #54b7ff);
  color: white;
}

.tena-img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  background: white;
  border-radius: 24px;
  padding: 8px;
}

.header h1 {
  margin: 0 0 2px;
  font-size: 30px;
  line-height: 1;
}

.header p {
  margin: 0;
  opacity: 0.95;
  line-height: 1.08;
}

.welcome {
  padding: 24px 28px 10px;
  font-size: 17px;
}

.hello {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 8px;
}

.chat {
  padding: 12px 28px;
  max-height: 380px;
  overflow-y: auto;
}

.form {
  display: flex;
  gap: 12px;
  padding: 18px 28px 24px;
  border-top: 1px solid #e5f2ff;
}

textarea {
  flex: 1;
  resize: vertical;
  min-height: 72px;
  border: 1px solid #b8d9f4;
  border-radius: 16px;
  padding: 14px;
  font-size: 16px;
  font-family: inherit;
}

button {
  width: 130px;
  border: none;
  border-radius: 16px;
  background: #1d7ed0;
  color: white;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s;
}

button:hover {
  background: #1469af;
}

button:disabled {
  background: #9fbdd5;
  cursor: wait;
}

.note {
  margin: 0;
  padding: 0 28px 24px;
  font-size: 13px;
  color: #5c7184;
}

@media (max-width: 640px) {
  .app {
    padding: 12px;
    align-items: stretch;
  }

  .card {
    border-radius: 20px;
  }

  .header {
    padding: 20px;
  }

  .tena-img {
    width: 72px;
    height: 72px;
  }

  .header h1 {
    font-size: 24px;
  }

  .form {
    flex-direction: column;
  }

  button {
    width: 100%;
    height: 48px;
  }
}

.message-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 2px solid #b8d8ff;
}

.message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
}

.message.tena {
  justify-content: flex-start;
}

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

.bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}

.bubble p {
  margin: 0;
  line-height: 1.2;
  white-space: pre-line;
}

.bubble strong {
  display: block;
  margin: 0 0 2px;
  line-height: 1.2;
}

/* p要素を使わない準備完了メッセージなどの \n だけを改行表示する */
.bubble:not(:has(p)):not(:has(strong)) {
  white-space: pre-line;
}

.message.tena .bubble {
  background: #eef6ff;
  border: 1px solid #c8e0ff;
  position: relative;
  cursor: pointer;
  padding-bottom: 27px;
}

/* 右側はログとして通常1行だけ表示。クリック時に全文を開く */
.message.tena .bubble > p {
  display: block !important;
  max-height: 1.2em;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis;
}

.message.tena .bubble::after {
  /* CSSの文字コード指定に左右されないUnicode表記 */
  content: "\30AF\30EA\30C3\30AF\3067\5168\6587\3092\898B\308B\0020\25BC";
  position: absolute;
  left: 14px;
  bottom: 7px;
  color: #3976b8;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.message.tena .bubble.is-expanded > p {
  display: block !important;
  max-height: none;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip;
}

.message.tena .bubble.is-expanded::after {
  content: "\30AF\30EA\30C3\30AF\3067\9589\3058\308B\0020\25B2";
}

/* TENAの吹き出し左側に「話している」ようなとげを付ける */
.message.tena .bubble {
  position: relative;
}

.message.tena .bubble::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 10px solid #c8e0ff;
}

.message.tena .bubble::after {
  /* 既存の折りたたみ表示はそのまま利用 */
}

/* とげの内側。吹き出し本体と同じ色を重ねて枠線だけ見せる */
.message.tena .bubble > strong::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 19px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 9px solid #eef6ff;
  pointer-events: none;
}

/* 最新の回答 */
.message.tena-current .bubble {
  border-color: #c8e0ff;
}

/* 教職員モードの吹き出し色に合わせる */
body.staff-mode .message.tena .bubble::before {
  border-right-color: #ffc7c7;
}

body.staff-mode .message.tena .bubble > strong::before {
  border-right-color: #fff1f1;
}

@keyframes tenaBubblePop {
  from {
    opacity: 0;
    transform: translateX(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.message.user .bubble {
  background: #1d63c8;
  color: #fff;
}

.message.user .bubble strong {
  color: #fff;
}

/* ===== TENA Avatar / Vidu motion area ===== */
.tena-stage {
  position: relative;
  height: 220px;
  margin: 18px 28px 6px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #f4fbff, #ffffff);
  border: 1px solid #d7ecff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* てなー本人が話す、最大5行の発話エリア */
.tena-speech {
  position: absolute;
  z-index: 20;
  top: 18px;
  left: 8px;
  right: 8px;
  min-height: 132px;
  padding: 11px 10px 12px;
  border: 1px solid #91c6f8;
  border-radius: 17px;
  background: rgba(238, 246, 255, 0.96);
  box-shadow: 0 9px 24px rgba(30, 94, 150, 0.14);
  color: #17324d;
  pointer-events: auto;
  animation: tenaStageBubblePop .25s ease-out both;
}

.tena-speech::before,
.tena-speech::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  transform: translateX(-50%);
}

.tena-speech::before {
  bottom: -15px;
  border-width: 15px 12px 0;
  border-color: #91c6f8 transparent transparent;
}

.tena-speech::after {
  bottom: -13px;
  border-width: 14px 11px 0;
  border-color: rgba(238, 246, 255, 0.96) transparent transparent;
}

.tena-speech strong {
  display: block;
  margin-bottom: 0;
  color: #1d63c8;
  font-size: 13px;
  line-height: 1.15;
}

.tena-speech p {
  margin: 0;
  max-height: 76px;
  padding-right: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: normal;
  word-break: auto-phrase;
  line-break: strict;
  scrollbar-width: thin;
  scrollbar-color: #78aee0 rgba(255, 255, 255, 0.55);
}

.tena-speech p::-webkit-scrollbar { width: 7px; }
.tena-speech p::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
}
.tena-speech p::-webkit-scrollbar-thumb {
  background: #78aee0;
  border-radius: 999px;
}

.tena-audio-controls {
  position: absolute;
  z-index: 25;
  left: 14px;
  right: 14px;
  bottom: 51px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 回答履歴側には音声ボタンを置かず、左側の最新回答用だけを表示 */
.message .tena-answer-button { display: none !important; }
#tenaAudioControls .tena-answer-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: min(200px, 80%);
  min-height: 34px;
  height: auto;
  margin: 0 !important;
  padding: 7px 14px !important;
  font-size: 13px;
  pointer-events: auto;
}

.tena-speech.is-updating {
  animation: tenaSpeechChange .18s ease-out both;
}

@keyframes tenaStageBubblePop {
  from { opacity: 0; transform: translateY(-7px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tenaSpeechChange {
  from { opacity: .55; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}









.tena-status {
  position: absolute;
  right: 16px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(29, 126, 208, 0.10);
  color: #1d63c8;
  font-size: 13px;
  font-weight: bold;
}

/* ===== 教職員モード ===== */
body.staff-mode {
  background: linear-gradient(135deg, #fff0f0, #ffffff);
  color: #4a1f1f;
}

body.staff-mode .card {
  border-color: #ffd0d0;
  box-shadow: 0 18px 50px rgba(180, 50, 50, 0.18);
}

body.staff-mode .header {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
}

body.staff-mode .tena-stage {
  background: linear-gradient(135deg, #fff5f5, #ffffff);
  border-color: #ffd0d0;
}

body.staff-mode .tena-status {
  background: rgba(185, 28, 28, 0.10);
  color: #b91c1c;
}

body.staff-mode .tena-speech {
  border-color: #efaaaa;
  background: rgba(255, 241, 241, 0.97);
}

body.staff-mode .tena-speech strong { color: #b91c1c; }
body.staff-mode .tena-speech::before { border-top-color: #efaaaa; }
body.staff-mode .tena-speech::after { border-top-color: rgba(255, 241, 241, 0.97); }
body.staff-mode .tena-speech p {
  scrollbar-color: #d47b7b rgba(255, 255, 255, 0.55);
}
body.staff-mode .tena-speech p::-webkit-scrollbar-thumb { background:#d47b7b; }

body.staff-mode .message.tena .bubble {
  background: #fff1f1;
  border-color: #ffc7c7;
}

body.staff-mode .message.user .bubble {
  background: #b91c1c;
}

body.staff-mode button {
  background: #b91c1c;
}

body.staff-mode button:hover {
  background: #991b1b;
}

body.staff-mode textarea {
  border-color: #f3b4b4;
}





@media (max-width: 640px) {
  .tena-stage {
    height: 180px;
    margin: 14px 18px 4px;
  }
}

/* ==========================
   ヘッダー
========================== */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 124px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-brand > div {
  line-height: 1;
}

/* ==========================
   Microsoft 365 アカウント
========================== */

.microsoft-account {
  min-width: 230px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  text-align: right;
  box-shadow: 0 4px 12px rgba(0, 70, 140, 0.12);
}

.microsoft-account-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: #475467;
  font-size: 13px;
  font-weight: 700;
}

.microsoft-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #98a2b3;
  flex-shrink: 0;
}

.microsoft-account.is-connected .microsoft-status-dot {
  background: #22a447;
}

.microsoft-account.is-connected .microsoft-account-status {
  color: #16743a;
}

.microsoft-account-button {
  display: inline-block;
  margin-top: 9px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.2);
}

.microsoft-account-user {
  margin-top: 7px;
}

.microsoft-account-user strong {
  display: block;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
}

.microsoft-account-user span {
  display: block;
  margin-top: 2px;
  color: #667085;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.microsoft-account.is-connected {
  background: rgba(255, 255, 255, 0.95);
}

.microsoft-account.is-connected .microsoft-account-status {
  color: #15803d;
}

.microsoft-account-button.is-logout {
  background: #2563eb;
  color: #ffffff;
}

/* 教職員モード：Microsoft 365のログアウトボタンも赤色に統一 */
body.staff-mode .microsoft-account-button[data-action="logout"] {
  background: #b91c1c !important;
  box-shadow: 0 2px 5px rgba(185, 28, 28, 0.22);
}

body.staff-mode .microsoft-account-button[data-action="logout"]:hover {
  background: #991b1b !important;
}

/* 「もう一度聞く」はJavaScriptの直接指定より教職員カラーを優先 */
body.staff-mode .tena-answer-button {
  background: #b91c1c !important;
}

body.staff-mode .tena-answer-button:hover {
  background: #991b1b !important;
}

/* ==========================
   スマートフォン
========================== */

@media (max-width: 700px) {
  .header {
    align-items: flex-start;
    flex-direction: column;
  }

  .microsoft-account {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }

  .microsoft-account-status {
    justify-content: flex-start;
  }
}

.reference-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.reference-heading {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: bold;
  color: #555;
}

.reference-link {
  display: block;
  width: fit-content;
  margin-top: 6px;
  color: #1769aa;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.reference-link:hover {
  text-decoration: underline;
}

/* PC版：回答音声ボタンと歌の操作ボタンのサイズを統一 */
@media (min-width: 801px) {
  .tena-answer-button,
  .tena-song-button,
  .tena-teams-waiting-song-button {
    width: 200px;
    box-sizing: border-box;
    font-size: 13px;
  }
}


/* ===== TENA Ver.7 UI override ===== */
.card { max-width: 1180px; min-height: min(820px, calc(100vh - 48px)); display:flex; flex-direction:column; }
.header { padding:18px 24px; min-height:auto; }
.tena-img { width:62px; height:62px; border-radius:18px; }
.header h1 { font-size:clamp(23px,2.5vw,30px); }
.microsoft-account { min-width:0; max-width:480px; display:flex; align-items:center; gap:12px; padding:9px 10px 9px 13px; text-align:left; }
.microsoft-account-status { justify-content:flex-start; }
.microsoft-account-button { margin-top:0; flex:0 0 auto; }
.microsoft-account.is-logged-in .microsoft-status-dot { background:#22a447; }
.microsoft-account.is-error .microsoft-status-dot { background:#dc2626; }
.workspace { min-height:0; flex:1; display:grid; grid-template-columns:minmax(250px,32%) minmax(0,1fr); gap:18px; padding:18px 22px; background:linear-gradient(180deg,#f9fcff 0%,#fff 100%); }
.character-panel,.conversation-panel { min-width:0; min-height:0; }
.character-panel { display:flex; flex-direction:column; }
.tena-stage { min-height:390px; height:auto; margin:0; flex:1; border-radius:22px; }
@keyframes tenaBubblePopMobile {
  from { opacity:0; transform:translateY(-8px) scale(.98); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@media (max-width: 480px) {
  .header { align-items:center; flex-direction:row; }
  .microsoft-account { max-width:50%; }
  .microsoft-account-status { font-size:10px; }
  .microsoft-account-user strong { font-size:11px; }
  .chat { height:calc(100vh - 370px); }
}


/* ===== TENA Ver10: Vidu motion video layer ===== */
.tena-motion-video {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.tena-stage.tena-video-active .tena-motion-video {
  opacity: 1;
}


#live2dCanvas,


/* ===== TENA Ver10: 9:16 Vidu motion tuning ===== */
.tena-motion-video {
  object-fit: contain;
  object-position: center center;
}

.tena-stage.tena-video-active {
  background: #ffffff;
}

/* PC: 9:16の全身動画を少し大きく見せる */
@media (min-width: 801px) {
  .character-panel {
    min-width: 300px;
  }

  .tena-stage {
    min-height: 520px;
  }

  .tena-motion-video {
    width: 100%;
    height: 100%;
    padding: 4px 0;
  }
}

/* スマホ: 会話欄を圧迫しすぎない範囲で縦動画を大きく表示 */
@media (max-width: 800px) {
  .tena-stage {
    min-height: 360px;
    height: 360px;
  }

  .tena-motion-video {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .chat {
    height: calc(100vh - 475px);
    min-height: 210px;
  }
}

@media (max-width: 480px) {
  .tena-stage {
    min-height: 330px;
    height: 330px;
  }

  .chat {
    height: calc(100vh - 445px);
  }
}


/* ===== TENA Ver10.1: 会話表示を右側へ統一 ===== */

/* 9:16動画の上に重なるため、左側の大きな発話吹き出しは非表示 */
.tena-speech {
  display: none !important;
}

/* 最新のTENA回答は右側で全文表示 */
.message.tena-current .bubble > p {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: pre-line !important;
  text-overflow: clip !important;
}

/* 最新回答には「クリックで全文を見る」を出さない */
.message.tena-current .bubble::after {
  content: none !important;
}

/* 最新回答はクリック対象ではないことが分かるよう通常カーソル */
.message.tena-current .bubble {
  cursor: default;
  padding-bottom: 10px;
}

/* 過去のTENA回答だけを1行に折りたたむ */
.message.tena:not(.tena-current) .bubble {
  cursor: pointer;
  padding-bottom: 27px;
}

.message.tena:not(.tena-current) .bubble > p {
  display: block !important;
  max-height: 1.2em;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis;
}

/* 過去回答をクリックしたときだけ全文を開く */
.message.tena:not(.tena-current) .bubble.is-expanded > p {
  max-height: none !important;
  overflow: visible !important;
  white-space: pre-line !important;
  text-overflow: clip !important;
}

/* 吹き出しを消した分、てなーを上から隠さない */

/* 音声ボタンは動画下部に残す */
.tena-audio-controls {
  bottom: 18px;
}

/* スマホでも同じルール */
@media (max-width: 800px) {
  .tena-audio-controls {
    bottom: 12px;
  }

  .message.tena-current .bubble {
    padding-bottom: 10px;
  }
}


/* =========================================================
   TENA Ver10.2 完成版上書き
   - 動画背景は白
   - 動画は必ずキャラクター枠内
   - 1動画方式で安全にフェード切り替え
   - 待機中ステータス非表示
========================================================= */

.tena-stage,
.tena-stage.tena-video-active {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* ヘッダーのTENA画像サイズを必ず維持 */
.header .tena-img {
  width: 62px !important;
  height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  object-fit: contain !important;
}

#tenaMotionVideo.tena-motion-video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #ffffff !important;
  opacity: 1;
  pointer-events: none !important;
  transition: opacity .22s ease-in-out !important;
}

#tenaMotionVideo.tena-motion-video.tena-motion-switching {
  opacity: 0 !important;
}


.tena-status {
  display: none !important;
}

/* スマートフォン */
@media (max-width: 800px) {
  .header .tena-img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }

  #tenaMotionVideo.tena-motion-video {
    width: 100% !important;
    height: 100% !important;
  }
}


/* =========================================================
   TENA Ver10.3 Mobile Immersive UI
   スマホ版のみ：
   - てなーを画面の主役として大きく表示
   - 会話履歴を半透明オーバーレイ
   - 入力欄とボタンを画面下へ半透明表示
   - ほぼ1画面内で完結
========================================================= */

@media (max-width: 800px) {

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    background: #ffffff;
  }

  .app {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0 !important;
    overflow: hidden;
  }

  .card {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh !important;
    border: 0;
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: none;
    background: #ffffff;
  }

  /* ---------- ヘッダーをコンパクト化 ---------- */

  .header {
    position: relative;
    z-index: 60;
    height: 66px;
    min-height: 66px !important;
    padding: 8px 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .header-brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 7px;
  }

  .header .tena-img {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    padding: 4px;
    border-radius: 12px;
  }

  .header h1 {
    margin: 0;
    font-size: 20px !important;
    line-height: 1;
  }

  .header p {
    margin-top: 2px;
    font-size: 9px !important;
    line-height: 1.05;
  }

  .microsoft-account {
    flex: 0 0 auto;
    width: auto !important;
    max-width: 52% !important;
    min-width: 0 !important;
    padding: 6px 7px !important;
    gap: 5px !important;
    border-radius: 10px;
    flex-wrap: wrap;
  }

  .microsoft-account-status {
    gap: 4px;
    font-size: 9px !important;
    white-space: nowrap;
  }

  .microsoft-status-dot {
    width: 7px;
    height: 7px;
  }

  .microsoft-account-user {
    display: none !important;
  }

  .microsoft-account-button {
    margin: 0 !important;
    padding: 5px 7px !important;
    border-radius: 7px;
    font-size: 9px !important;
    line-height: 1.15;
  }

  /* ---------- メインを1枚のキャンバス化 ---------- */

  .workspace {
    position: absolute !important;
    z-index: 1;
    top: 66px;
    left: 0;
    right: 0;
    bottom: 0;
    display: block !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: hidden;
  }

  .character-panel {
    position: absolute;
    inset: 0;
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .tena-stage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  /* てなーをスマホでは大きく見せる */
  #tenaMotionVideo.tena-motion-video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
  }

  /* ---------- 会話を半透明オーバーレイ ---------- */

  .conversation-panel {
    position: absolute !important;
    z-index: 30;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 38%;
    min-height: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.42) !important;
    box-shadow: 0 5px 22px rgba(30, 94, 150, 0.10) !important;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }

  .chat {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 9px 9px 14px !important;
    overflow-y: auto !important;
    background: transparent !important;
    scrollbar-width: thin;
  }

  /* スマホでは直近3メッセージだけ画面上に残す */
  .chat .message:nth-last-child(n+4) {
    display: none !important;
  }

  .message {
    gap: 5px !important;
    margin: 6px 0 !important;
  }

  .bubble {
    max-width: 88% !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    box-shadow: 0 2px 10px rgba(0, 65, 120, 0.08);
  }

  .bubble strong {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  .bubble p {
    font-size: 12px !important;
    line-height: 1.32 !important;
  }

  .message.tena .bubble {
    background: rgba(238, 246, 255, 0.82) !important;
    border-color: rgba(145, 198, 248, 0.82) !important;
  }

  .message.user .bubble {
    background: rgba(29, 99, 200, 0.88) !important;
  }

  .message.tena:not(.tena-current) .bubble {
    padding-bottom: 22px !important;
  }

  .message.tena:not(.tena-current) .bubble::after {
    bottom: 5px !important;
    font-size: 9px !important;
  }

  /* ---------- 音声ボタンをてなー上に小さく配置 ---------- */

  .tena-audio-controls {
    z-index: 45 !important;
    left: 50% !important;
    right: auto !important;
    bottom: 132px !important;
    width: min(210px, 58vw) !important;
    min-height: 30px !important;
    transform: translateX(-50%);
  }

  #tenaAudioControls .tena-answer-button {
    width: 100% !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    background: rgba(11, 92, 171, 0.90) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* ---------- 入力UIを画面下へオーバーレイ ---------- */

  .form {
    position: absolute !important;
    z-index: 50;
    left: 10px;
    right: 10px;
    bottom: 24px;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    padding: 8px !important;
    border: 1px solid rgba(184, 217, 244, 0.86) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 7px 24px rgba(30, 94, 150, 0.14);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
  }

  .form textarea {
    grid-column: 1 / -1 !important;
    width: 100%;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 70px !important;
    padding: 8px 10px !important;
    resize: none !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.82);
    font-size: 11px !important;
    line-height: 1.25;
  }

  .form button {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  .note {
    display: none !important;
  }

  /* ---------- 教職員モードも半透明化 ---------- */

  body.staff-mode .workspace {
    background: #ffffff !important;
  }

  body.staff-mode .conversation-panel {
    background: rgba(255, 248, 248, 0.44) !important;
  }

  body.staff-mode .message.tena .bubble {
    background: rgba(255, 241, 241, 0.84) !important;
    border-color: rgba(239, 170, 170, 0.85) !important;
  }

  body.staff-mode .form {
    background: rgba(255, 248, 248, 0.74) !important;
    border-color: rgba(243, 180, 180, 0.86) !important;
  }
}

/* 小さいスマホ用 */
@media (max-width: 480px) {

  .header {
    height: 62px;
    min-height: 62px !important;
    padding: 7px 9px !important;
  }

  .workspace {
    top: 62px;
  }

  .header h1 {
    font-size: 18px !important;
  }

  .header p {
    font-size: 8px !important;
  }

  .microsoft-account {
    max-width: 54% !important;
  }

  .conversation-panel {
    top: 8px;
    left: 8px;
    right: 8px;
    height: 36%;
  }

  .bubble,
  .bubble p {
    font-size: 11px !important;
  }

  .form {
    left: 8px;
    right: 8px;
    bottom: 18px;
  }

  .tena-audio-controls {
    bottom: 124px !important;
  }
}


/* =========================================================
   TENA Ver10.4 Mobile Transparent Chat
   スマホ版：会話エリアとTENA吹き出し枠を透明化
========================================================= */
@media (max-width: 800px) {

  /* 会話エリアそのものの白い半透明パネルを消す */
  .conversation-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .chat {
    background: transparent !important;
  }

  /* TENA回答：背景・枠・影を完全に透明化 */
  .message.tena .bubble,
  .message.tena-current .bubble,
  .message.tena:not(.tena-current) .bubble {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* TENA吹き出し左側の「とげ」も消す */
  .message.tena .bubble::before,
  .message.tena .bubble > strong::before {
    display: none !important;
    content: none !important;
  }

  /* 文字は動画上でも読みやすいように、ごく薄い白影だけ残す */
  .message.tena .bubble,
  .message.tena .bubble strong,
  .message.tena .bubble p {
    text-shadow:
      0 1px 2px rgba(255,255,255,.95),
      0 0 5px rgba(255,255,255,.90);
  }

  /* ユーザーの発言は識別しやすいよう青い吹き出しを維持 */
  .message.user .bubble {
    background: rgba(29, 99, 200, 0.88) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,65,120,.10) !important;
    text-shadow: none !important;
  }

  /* 教職員モードでもTENA回答は透明 */
  body.staff-mode .conversation-panel,
  body.staff-mode .message.tena .bubble {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

/* TENA Ver10.5 Mobile Chat Height */
@media (max-width: 800px) {
  .conversation-panel {
    top: 10px !important;
    bottom: 172px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .chat {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
}
@media (max-width: 480px) {
  .conversation-panel {
    top: 8px !important;
    bottom: 164px !important;
    height: auto !important;
  }
}


/* =========================================================
   TENA Ver10.6 iPhone Chrome / Safari 入力時ズーム対策
   iOS WebKitは入力欄が16px未満だとフォーカス時に自動ズームするため、
   スマホ版の質問入力欄のみ16pxを確保する。
========================================================= */
@media (max-width: 800px) {
  .form textarea,
  textarea#question {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 480px) {
  .form textarea,
  textarea#question {
    font-size: 16px !important;
  }
}

/* ===== TENA Ver10.7: Vidu-only =====
   キャラクター表示はVidu動画のみ。Live2D関連は撤去済み。
*/


/* =========================================================
   TENA Ver10.8 PC Chat Full Height
   PC版：右側チャットエリアを左側キャラクター枠と同じ高さまで広げる
========================================================= */
@media (min-width: 801px) {
  /* グリッド内の左右パネルを同じ高さにそろえる */
  .workspace {
    align-items: stretch;
  }

  .character-panel,
  .conversation-panel {
    min-height: 0;
  }

  /* 右側パネルを縦方向のFlexコンテナにする */
  .conversation-panel {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
  }

  /* 既存のmax-height: 380pxを解除し、パネル全体を使用する */
  .conversation-panel > .chat {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

/* =========================================================
   TENA Ver10.9 PC Fixed Workspace + Chat Scroll
   PC版：初期画面のキャラクター枠サイズを維持し、
   会話が増えてもワークスペース自体は縦に伸ばさない。
   右側チャットだけを内部スクロールさせる。
========================================================= */
@media (min-width: 801px) {
  :root {
    /* 現在の初期画面（約520px）を上限に、低い画面では少し縮める */
    --tena-pc-workspace-height: clamp(430px, 58vh, 520px);
  }

  /* 会話量によってグリッドの高さが増えないよう固定 */
  .workspace {
    flex: 0 0 var(--tena-pc-workspace-height) !important;
    width: 100%;
    height: var(--tena-pc-workspace-height) !important;
    min-height: 0 !important;
    max-height: var(--tena-pc-workspace-height) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  /* 左右ともワークスペースの高さを超えない */
  .character-panel,
  .conversation-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  /* てなー表示枠も初期サイズ内に固定 */
  .character-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  .character-panel > .tena-stage,
  .tena-stage {
    flex: 1 1 auto !important;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  /* 右側は固定高の中でチャットだけスクロール */
  .conversation-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  .conversation-panel > .chat,
  .chat {
    flex: 1 1 auto !important;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}
/* =========================================================
   TENA Ver10.10 Header Social Links
   ヘッダーのTENAタイトル横に公式SNSリンクを表示
========================================================= */

.header-brand-info {
  min-width: 0;
}

.header-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tena-social-links {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.tena-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  text-decoration: none;
  line-height: 1;
  transition:
    transform .16s ease,
    background-color .16s ease,
    box-shadow .16s ease;
}

.tena-social-link:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 70, 140, 0.16);
}

.tena-social-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.tena-social-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tena-social-link svg path[d^="M10 9.5"] {
  fill: currentColor;
  stroke: none;
}

.tena-social-link-x span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

/* 教職員モードでもヘッダー上のSNSリンクは白基調で統一 */
body.staff-mode .tena-social-link {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

body.staff-mode .tena-social-link:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* スマートフォンではヘッダー高を変えず、アイコンだけ少し小さくする */
@media (max-width: 800px) {
  .header-title-row {
    gap: 6px;
  }

  .tena-social-links {
    gap: 3px;
  }

  .tena-social-link {
    width: 19px;
    height: 19px;
    border-width: 1px;
  }

  .tena-social-link svg {
    width: 11px;
    height: 11px;
    stroke-width: 1.9;
  }

  .tena-social-link-x span {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .header-title-row {
    gap: 4px;
  }

  .tena-social-links {
    gap: 2px;
  }

  .tena-social-link {
    width: 17px;
    height: 17px;
  }

  .tena-social-link svg {
    width: 10px;
    height: 10px;
  }

  .tena-social-link-x span {
    font-size: 9px;
  }
}

/* =========================================================
   TENA Ver10.11 Pre-release Feedback
   プレ公開案内 + Microsoft Forms ご意見・要望リンク
========================================================= */

.preview-feedback {
  flex: 1 1 380px;
  max-width: 500px;
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 12px rgba(0, 70, 140, 0.10);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.preview-feedback-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.preview-feedback-copy strong {
  font-size: 14px;
  color: #ffffff;
}

.preview-feedback-copy span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.96);
}

.preview-feedback-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #1769aa;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(0, 70, 140, 0.14);
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.preview-feedback-button:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 70, 140, 0.18);
}

.preview-feedback-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

body.staff-mode .preview-feedback-button {
  color: #b91c1c;
}

@media (max-width: 1180px) and (min-width: 801px) {
  .header { gap: 12px; }

  .preview-feedback {
    flex-basis: 330px;
    min-width: 270px;
    padding: 9px 10px;
    gap: 9px;
  }

  .preview-feedback-copy span { font-size: 9px; }

  .preview-feedback-button {
    padding: 7px 9px;
    font-size: 10px;
  }
}

@media (max-width: 800px) {
  .preview-feedback {
    position: absolute;
    z-index: 65;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    width: auto;
    min-width: 0;
    max-width: calc(100vw - 150px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .preview-feedback-copy { display: none; }

  .preview-feedback-button {
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid rgba(29, 126, 208, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #1769aa;
    font-size: 9px;
    box-shadow: 0 2px 7px rgba(30, 94, 150, 0.12);
  }

  body.staff-mode .preview-feedback-button {
    border-color: rgba(185, 28, 28, 0.22);
    color: #b91c1c;
  }

  .workspace { top: 92px !important; }
}

@media (max-width: 480px) {
  .preview-feedback {
    bottom: -26px;
    max-width: calc(100vw - 125px);
  }

  .preview-feedback-button {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 8px;
  }

  .workspace { top: 88px !important; }
}

/* =========================================================
   TENA Ver10.12 SNS Links 2 Rows
   SNSアイコンを2列×2段で表示してヘッダー横幅を節約
========================================================= */

.tena-social-links {
  display: grid !important;
  grid-template-columns: repeat(2, 26px);
  grid-template-rows: repeat(2, 26px);
  gap: 4px !important;
  flex: 0 0 auto;
}

.header-title-row {
  align-items: center;
}

/* スマートフォンも2列×2段のままコンパクト表示 */
@media (max-width: 800px) {
  .tena-social-links {
    grid-template-columns: repeat(2, 19px);
    grid-template-rows: repeat(2, 19px);
    gap: 3px !important;
  }
}

@media (max-width: 380px) {
  .tena-social-links {
    grid-template-columns: repeat(2, 17px);
    grid-template-rows: repeat(2, 17px);
    gap: 2px !important;
  }
}

/* =========================================================
   TENA Ver10.13 Header Brand Balance
   TENA名・サブタイトル・SNS 2x2 の配置バランス調整
========================================================= */

/* ブランド情報を「TENA＋説明」「SNS」の2列構成にする */
.header-brand-info {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
}

/* 既存のラッパーをレイアウト上だけ解除して、
   h1 と SNS をそれぞれグリッドへ配置 */
.header-title-row {
  display: contents;
}

.header-brand-info h1 {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}

.header-brand-info > p {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.tena-social-links {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: start;
  display: grid !important;
  grid-template-columns: repeat(2, 22px) !important;
  grid-template-rows: repeat(2, 22px) !important;
  gap: 4px !important;
  margin-left: 2px;
}

.tena-social-link {
  width: 22px !important;
  height: 22px !important;
}

.tena-social-link svg {
  width: 12px !important;
  height: 12px !important;
}

.tena-social-link-x span {
  font-size: 11px !important;
}

/* ロゴと文字ブロックの間隔も少し整える */
.header-brand {
  gap: 10px !important;
}

/* スマートフォン */
@media (max-width: 800px) {
  .header-brand-info {
    column-gap: 6px;
    row-gap: 2px;
  }

  .tena-social-links {
    grid-template-columns: repeat(2, 17px) !important;
    grid-template-rows: repeat(2, 17px) !important;
    gap: 3px !important;
    margin-left: 0;
  }

  .tena-social-link {
    width: 17px !important;
    height: 17px !important;
  }

  .tena-social-link svg {
    width: 9px !important;
    height: 9px !important;
  }

  .tena-social-link-x span {
    font-size: 8px !important;
  }
}

/* =========================================================
   TENA Ver10.14 SNS Large Centered Grid
   SNS 4アイコンを大きくし、青ヘッダー内で上下中央に均等配置
========================================================= */

.header-brand {
  align-items: center !important;
}

.header-brand-info {
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 14px !important;
  row-gap: 2px !important;
  align-items: center !important;
}

.header-title-row {
  display: contents !important;
}

.header-brand-info h1 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
}

.header-brand-info > p {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
}

.tena-social-links {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;

  display: grid !important;
  grid-template-columns: repeat(2, 28px) !important;
  grid-template-rows: repeat(2, 28px) !important;
  gap: 6px !important;

  align-self: center !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tena-social-link {
  width: 28px !important;
  height: 28px !important;
  border-width: 1px !important;
}

.tena-social-link svg {
  width: 16px !important;
  height: 16px !important;
}

.tena-social-link-x span {
  font-size: 14px !important;
}

/* スマートフォンではヘッダー幅を圧迫しないよう少し小さく */
@media (max-width: 800px) {
  .header-brand-info {
    column-gap: 7px !important;
  }

  .tena-social-links {
    grid-template-columns: repeat(2, 19px) !important;
    grid-template-rows: repeat(2, 19px) !important;
    gap: 3px !important;
  }

  .tena-social-link {
    width: 19px !important;
    height: 19px !important;
  }

  .tena-social-link svg {
    width: 11px !important;
    height: 11px !important;
  }

  .tena-social-link-x span {
    font-size: 9px !important;
  }
}

/* =========================================================
   TENA Ver10.15 SNS Extra Large Grid
   PC版のSNS 4アイコンをさらに大きくして見やすく調整
========================================================= */

@media (min-width: 801px) {
  .tena-social-links {
    grid-template-columns: repeat(2, 34px) !important;
    grid-template-rows: repeat(2, 34px) !important;
    gap: 6px !important;
  }

  .tena-social-link {
    width: 34px !important;
    height: 34px !important;
  }

  .tena-social-link svg {
    width: 18px !important;
    height: 18px !important;
  }

  .tena-social-link-x span {
    font-size: 15px !important;
  }
}