:root {
  --font-family: sans-serif;
  --bg-color: #f2f2f2;
  --text-color: #555555;

  --primary-color: #32AAC6;
  --primary-hover-color: #2A90A8;

  --red-color: #ee8593;
  --mute-hover-color: #FAF0F3;

  --stop-hover-color: #EAEAEA;

  --restart-hover-color: #E7F6F9;

  --gray-color: #7f7f7f;
  --gray-hover-color: #707070;
  --gray-color2: #b0b0b0;

  --focus-color: #32AAC6;
  --focus-ring: 0 0 0 3px rgba(50, 170, 198, 0.18);

  --border-color: #ccc;
  --chip-bg: rgba(52, 152, 219, 0.1);
  --radius: 5px;
  --btn-radius: 15px;
  --transition: .35s ease;
  --font-size: 14px;

  --header-h: 56px;
  --header-pad: 16px;

  --dock-w: 56px;
  --dock-open-w: min(20vw, 480px);

  --panel-w: 250px;
}

/* ========== Base ========== */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
}

html,
body {
  height: 100%;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body:has(#hero:not(.is-hidden)) {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* ========== Header ========== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: linear-gradient(to right, #32AAC6, #E7F6F9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  z-index: 2001;
  justify-content: space-between;
}

.header .title {
  font-weight: 900;
  font-size: 2.0rem;
  color: #fff;
  margin-left: 20px;
  line-height: 1;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions .actions-group {
  display: flex;
  gap: 8px;
}

/* ===== Acta ブランド（合体ロゴPNG） ===== */
.acta-brand-img {
  height: 1em;
  vertical-align: middle;
  display: inline-block;
}

.login-brand .acta-brand-img {
  height: 1.75em;
}

.app {
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  height: 100%;
}

.app main {
  padding: calc(var(--header-h)) 5px 20px calc(var(--dock-current) + var(--panel-current) + 10px);
  margin-bottom: 10px;
  width: auto;
  transition: padding-left .35s ease;
}

/* ドックの状態変数（開閉で変化） */
body {
  --dock-current: var(--dock-w);
  --panel-current: 0px;
}

body.is-open {
  --dock-current: var(--dock-open-w);
}

body.history-open {
  --panel-current: var(--panel-w);
}

/* ドックはヘッダー下から */
.dock {
  position: fixed;
  left: 0;
  top: var(--header-h);
  bottom: 0;
  width: var(--dock-current);
  background: #ffffff;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: width .25s ease;
  z-index: 1202;
}


/* .dock .handle {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  user-select: none;
}

.dock .label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .12em;
  font-weight: 600;
  color: #444;
} */

.dock-icon-btn {
  width: 100%;
  padding: 14px 0 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-color);
  position: relative;
}

.dock-icon-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  transition: background 0.18s ease;
}

.dock-icon-btn:hover::before {
  background: #E8EBF4;
}

.dock-icon-btn .icon img {
  width: 25px;
  height: 25px;
  fill: currentColor;
}

.dock-icon-btn.recording-locked {
  cursor: not-allowed;
}

.dock-icon-btn.recording-locked::before {
  background: transparent;
}

.dock-icon-btn.recording-locked .icon img {
  opacity: 0.4;
}


.dock-icon-btn .label {
  font-size: 11px;
  margin-top: 0px;
  line-height: 1.1;
}


body.is-open .label {
  display: none;
}


/* ============================================
   履歴パネル（dock の外に出した新しい構造用）
============================================ */
#dock-panel {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  left: var(--dock-w);
  /* ← 固定メニューの右横からスタート */
  width: var(--panel-w);
  background: #fff;
  box-shadow: 4px 0 12px rgba(0, 0, 0, .12);
  padding: 8px;
  overflow: auto;

  transform: translateX(-100%);
  /* ← 初期状態：画面外に隠す */
  opacity: 0;
  pointer-events: none;

  transition: transform .35s ease, opacity .25s ease;
  z-index: 1200;
}

/* 履歴メニューを開いたとき */
body.history-open #dock-panel {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.dock-buttons {
  position: relative;
  z-index: 50;
  /* ← side-panel より必ず前面 */
  flex: 0 0 auto;
}

/* =========================
   Dock 最下部固定（AI道場）
========================= */

.dock-bottom {
  margin-top: auto;
}

.dock-ai-dojo .icon img {
  width: 25px;
  height: 25px;
}


.side-panel h3 {
  margin: 8px 0 12px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #666;
}

#dock-panel .history-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.history-refresh-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: #fff;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.history-refresh-btn:hover {
  background: #f2f4fb;
}

.side-panel .history-search {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#historySearch {
  flex: 1;
  margin: 0;
}

.history-refresh-btn {
  flex-shrink: 0;
}


#historySearch {
  width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  font-size: 12px;
  outline: none;
}

#historySearch:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px rgba(52, 152, 219, .3);
}


.overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  bottom: 0;
  background: rgba(0, 0, 0, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 15;
}


/* ========== Segmented ========== */
.segmented-control {
  display: inline-flex;
  background: var(--border-color);
  border-radius: var(--radius);
  min-width: clamp(120px, 20vw, 180px);
}

.segmented-control .segment {
  flex: 1;
  padding: 0 12px !important;
  font-size: 13px !important;
  background: transparent;
  color: var(--text-color);
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition), color var(--transition), filter var(--transition);
}

.segmented-control .segment:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}

.segmented-control .segment:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ▼ アクティブ状態 */
.segmented-control .segment.active {
  background: #E7F6F9 !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  font-weight: 700;
}

/* ▼ 非アクティブ状態 */
.segmented-control .segment:not(.active) {
  background: #FFFFFF !important;
  color: #7F7F7F !important;
  border: 1px solid #7F7F7F !important;
  font-weight: 700;
  /* 選択時700に対して自然な太さ */
}


/* この発言のみ */
#speakerSaveThisBtn {
  background: #7FCADB !important;
  border-color: #7FCADB !important;
}

#speakerSaveThisBtn:hover {
  background: #48B3CC !important;
  border-color: #48B3CC !important;
  filter: none !important;
}

/* 以降の発言 */
#speakerSaveFromHereBtn {
  background: #32AAC6 !important;
  border-color: #32AAC6 !important;
}

#speakerSaveFromHereBtn:hover {
  background: #2A90A8 !important;
  border-color: #2A90A8 !important;
  filter: none !important;
}

/* すべての発言 */
#speakerSaveBtn {
  background: #17505D !important;
  border-color: #17505D !important;
}

#speakerSaveBtn:hover {
  background: #103740 !important;
  border-color: #103740 !important;
  filter: none !important;
}

.segment:focus,
.form-input:focus {
  outline: none;
  box-shadow: none;
}


.form-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  row-gap: 16px;
}


.form-field label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
  display: block;
}

#tab-import>.form-field label {
  padding-top: 12px;
}

.form-input {
  padding: 8px;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  font-size: .8rem;
}

#meeting-date {
  height: 33px;
}

.form-input[type="text"],
.form-input[type="datetime-local"] {
  height: 33px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1.2;
}

#scenarioEditBtn {
  display: none;
}

.form-input.dept-inline-input,
.form-input.company-inline-input {
  height: 28px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.2;
}

.form-grid.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
}

.form-grid.grid-12 .span2 {
  grid-column: span 2;
}

.form-grid.grid-12 .span3 {
  grid-column: span 3;
}

.form-grid.grid-12 .span6 {
  grid-column: span 6;
}

.form-grid.grid-12 textarea.form-input {
  min-height: 75px;
  resize: vertical;
  max-width: 100%;
}

.place {
  display: flex;
  align-items: center;
}

@media (max-width:1100px) {
  .form-grid.grid-12 {
    grid-template-columns: 1fr;
  }

  .form-grid.grid-12 .span2,
  .form-grid.grid-12 .span3,
  .form-grid.grid-12 .span6 {
    grid-column: 1 / -1;
  }
}

/* ========== Controls Row ========== */
.controls-section {
  padding: 5px 0 12px 0;
}

.controls-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) auto minmax(120px, auto) minmax(0, 1.5fr);
  gap: 10px;
  align-items: stretch;
}

.controls-row .title-field {
  min-width: 0;
}

.controls-row .title-field .form-input {
  height: 33px;
}

@media (max-width:1100px) {
  .controls-row {
    grid-template-columns: 1fr;
  }
}

.controls-row>* {
  min-width: 0;
}

.aligned-with-input {
  display: flex;
  align-items: center !important;
}

.control-inline-btn,
.segmented-control {
  height: 33px;
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.label-row label {
  font-weight: 600;
}

.char-counter {
  margin-top: 4px;
  font-size: .8rem;
  color: #666;
  text-align: right;
}

.controls-section .control-group>label {
  font-weight: 600;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

.datetime-wrapper {
  font-weight: 600;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

/* ========== Accordion ========== */
.meeting-accordion {
  margin: 8px 0;
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  overflow: visible;
}

#meetingInfoAccordion>.tab-container {
  display: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

#meetingInfoAccordion>.tab-container.is-collapsed {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

.meeting-accordion>summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 15px;
  font-weight: 600;
  display: flex;
  align-items:center; 
  gap: 8px;
}

.meeting-accordion>summary::-webkit-details-marker {
  display: none;
}

.meeting-accordion .summary-hint {
  color: #666;
  list-style: none;
  font-weight: normal;
  font-size: .9rem;
  padding: 5px;
}

#meeting-title {
  width: 400px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  display: inline-block;
}

#meeting-title::placeholder { 
  color: #999; /* 好きな色に変更 */ 
}

.title-edit-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.title-edit-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  object-fit: contain;
  margin-right: 10px;
  pointer-events: none;
  user-select: none;
}

/* ★No135のたいひ
//class削除した
.title-info-icon { 
  width: 22px;
  height: 22px;
  object-fit: contain;
  margin-right: 10px;
  pointer-events: none;
  user-select: none;
}*/




/* ========== Panels/Layout ========== */
.content-panels {
  display: flex;
  gap: 10px;
  height: calc(100dvh - 125px);
  font-size: 15px;
  min-height: 0;
  overflow: visible;
}

@media (max-width:600px) {
  .content-panels {
    flex-direction: column;
    height: auto;
  }
}

.panel {
  background: #fff;
  padding: 10px 15px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.panel-title {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  padding: 0 0 10px 0;
  border-bottom: solid 1px var(--border-color);
}

.panel-title.form-input::placeholder {
  color: #ddd;
}

.panel-title .rec-buttons {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.panel-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: visible;
  min-height: 0;
  padding: 0;
}

.panel-title-text {
  margin-top: 2px;
}

#panel-transcript .panel-header,
#panel-summary .panel-header {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08);
  display: flex;
}

.tab-actions {
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 8px;
}

#panel-summary .panel-body {
  overflow: auto;
  min-height: 0;
}

/* ========== Recording / Transcript ========== */
.recording-controls {
  display: flex;
  gap: 8px;
}

#transcribing {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  padding: 8px 6px;
  background: #fff;
  font-size: .95rem;
  color: var(--primary-color);
  white-space: pre-wrap;
  line-height: 1.4;
  max-height: 40vh;
  overflow: auto;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* #transcribing.blink {
  animation: fadeBlink 2s infinite ease-in-out;
} */

#transcribing .transcribing-text.blink {
  animation: fadeBlink 2s infinite ease-in-out;
}

@keyframes fadeBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

#transcript {
  flex: 1 1 auto;
  padding: 0 0 10px 0;
  overflow: auto;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

#transcript p.segment {
  margin: 5px 0 0;
  padding: 0 8px;
  border-radius: 4px;
}

#transcript p.segment:hover {
  background: #e8eaed;
}

#transcript .speaker-label {
  font-weight: 600;
  margin-right: 2px;
  font-size: 12px;
}

#transcript .segment-text {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 14px;
  padding-left: 5px;
}

/* ========== Timer ========== */
.rec-timer {
  display: none;
  font-variant-numeric: tabular-nums;
  font-weight: bolder;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  vertical-align: middle;
  align-items: center;
  color: var(--gray-color);
}

/* ========== Replace Tool ========== */
.replace-tool {
  margin-top: 12px;
}

.replace-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  overflow-x: auto;
}

.replace-title {
  font-weight: 700;
}

.replace-arrow {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef5ff center/16px no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h10' stroke='%2388bdf7' stroke-width='2' stroke-linecap='round'/><path d='M13 8l4 4-4 4' fill='none' stroke='%2388bdf7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  font-size: 0;
}

.replace-input {
  flex: 1 1 0;
  min-width: 12rem;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
}

/* ========== Summary ========== */
#summary {
  font-size: .95rem;
  line-height: 1.5;
  margin-top: 12px;
}

#summary h1 {
  font-size: 1.3rem;
  margin: 8px 0 6px;
}

#summary h2 {
  font-size: 1.15rem;
  margin: 6px 0 4px;
}

#summary h3 {
  font-size: 1.05rem;
  margin: 4px 0 3px;
}

#summary p {
  margin: 3px 0;
}

#summary ul,
#summary ol {
  margin: 3px 0 6px 1.2em;
  padding: 0;
  font-size: .9rem;
}

#summary li {
  margin: 2px 0;
}

#summary hr {
  margin: 8px 0;
}

.summary-left {
  position: relative;
  display: flex;
  align-items: center;
}

.summary-title {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  border: none;
  outline: none;
}

/* ========== Modal ========== */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal.show {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
}

.modal-dialog {
  position: relative;
  background: #fff;
  width: min(650px, 90vw);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.modal .form-field {
  margin-bottom: 12px;
}

.modal .form-input[type="text"],
.modal .form-input[type="email"] {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1.2;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}

body:has(.modal.show) {
  overflow: hidden;
}

/* ===== Phrase Bulk Modal：縦積みレイアウト＆見た目統一 ===== */


#phraseBulkModal .hint {
  margin: 6px 0 14px;
  font-size: 15px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.6;
}

#phraseBulkModal .small-hint {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 0.5em;
}

#phraseBulkModal .form-row,
#phraseBulkModal .form-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 14px 0;
}


#phraseBulkModal .form-label,
#phraseBulkModal .form-row>.form-label {
  display: block;
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 13px;
  color: #374151;
  letter-spacing: .02em;
}


#phraseBulkModal .form-input {
  width: 100%;
  box-sizing: border-box;

  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;

  font-size: 14px;
  font-weight: 500;
  color: #111827;
  line-height: 1.4;

  background: #fff;
}

#phraseBulkModal input.form-input,
#phraseBulkModal select.form-input {
  height: 44px;
}

#phraseBulkModal .form-input::placeholder {
  font-size: 14px;
  font-weight: 500;
  color: #9ca3af;
  opacity: 1;
}

#phraseBulkModal .form-input:focus {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: var(--focus-ring);
}

#phraseBulkModal textarea.form-input {
  min-height: 220px;
  height: 220px;
  resize: vertical;
  padding-top: 12px;
}

#phraseBulkModal select.form-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7280' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}

#phraseBulkModal input.form-input[list] {
  padding-right: 38px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7280' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}

#phraseBulkTypeRow[hidden] {
  display: none !important;
}

/* ===== datalist(input[list]) のネイティブ矢印を消す ===== */

/* Chrome / Edge / Safari */
#phraseBulkModal input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0;
}

/* Firefox（将来対策・保険） */
#phraseBulkModal input[list] {
  appearance: none;
  -moz-appearance: textfield;
}

/* ========== Speaker Modal fine-tune ========== */
#speakerModal h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}

#speakerCurrent {
  font-size: 13px;
  margin: 0 0 6px;
}

#speakerModal .form-field {
  margin-bottom: 8px;
}

#speakerModal .form-field label {
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 2px;
  display: block;
}

#speakerModal .form-input {
  height: 40px;
  line-height: 1.3;
  font-size: 13px;
  padding: 6px 8px;
  margin-bottom: 6px;
}

#speakerModal input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

#speakerModal label[for="smKey"] {
  font-size: 13px;
  font-weight: 400;
  margin-left: 4px;
}

#speakerGroupCandidates,
.candidate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

#speakerCandidates,
.candidate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

#speakerModal .modal-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#speakerModal .modal-actions {
  font-size: 13px;
  padding: 6px 12px;
}


.speaker-field {
  margin-bottom: 10px;
}

.speaker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.speaker-label-text {
  width: 6em;
  text-align: right;
  white-space: nowrap;
}

.speaker-input {
  flex: 1;
}

.speaker-field .candidate-list {
  padding-left: calc(6em + 8px);
  margin-top: 6px;
}



/* =========================
 * 過去会議検索モーダル
 * =======================*/
#pastMeetingModal .past-meeting-modal {
  width: min(720px, 92vw);
  padding: 18px 18px 16px;
}

#pastMeetingModal .modal-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}

#pastMeetingModal .past-meeting-form {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

#pastMeetingModal .pm-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#pastMeetingModal .pm-date-row {
  gap: 8px;
}

#pastMeetingModal .pm-date,
#pastMeetingModal .pm-text {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#pastMeetingModal .pm-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: .75;
}

#pastMeetingModal .pm-sep {
  flex: 0 0 auto;
  color: #9ca3af;
}

#pastMeetingModal .pm-input {
  width: 100%;
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
  background: #fff;
  color: #374151;
}

#pastMeetingModal .pm-input:focus,
#pastMeetingModal select:focus {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: var(--focus-ring);
}

#pastMeetingModal .pm-actions {
  justify-content: flex-end;
  margin-top: 2px;
}

#pastMeetingModal .pm-search-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--primary-color);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 過去会議検索：検索ボタン内アイコン */
#pastMeetingModal #pmSearchBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 検索アイコンサイズ */
#pastMeetingModal .pm-search-icon {
  width: 14px;
  height: 14px;
  display: block;
}

#pastMeetingModal .pm-search-btn:hover {
  background: var(--primary-hover-color);
}

/* クリアボタン */
#pastMeetingModal .pm-clear-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font-weight: 600;
  cursor: pointer;
}

#pastMeetingModal .pm-clear-btn:hover {
  background: #f3f4f6;
}

#pastMeetingModal .past-meeting-results {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

#pastMeetingModal .pm-results-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 700;
  color: #374151;
}

#pastMeetingModal .pm-right {
  text-align: right;
}

#pastMeetingModal .pm-results-list {
  max-height: 280px;
  overflow: auto;
}

/* ★ 追加：検索結果の1行もヘッダーと同じ2列gridにする */
#pastMeetingModal .pm-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  /* .pm-results-head と同じ */
  gap: 12px;
  align-items: center;

  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}

#pastMeetingModal .pm-result-row:last-child {
  border-bottom: none;
}

#pastMeetingModal .pm-result-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

#pastMeetingModal button.pm-result-title.pm-pick {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 1px 0;
  margin: 0;
  width: auto;
  justify-self: start;
  text-align: left;
  cursor: pointer;
  color: var(--primary-color);
  font-weight: 600;
  line-height: 1.4;
}

#pastMeetingModal button.pm-result-title.pm-pick:hover {
  text-decoration: underline;
}

#pastMeetingModal button.pm-result-title.pm-pick:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
  border-radius: 6px;
}

#pastMeetingModal .pm-result-dt {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#pastMeetingModal .pm-empty {
  padding: 12px;
  color: #6b7280;
  font-size: 13px;
}

/* タイトル欄は枠幅を揃えるためアイコン領域だけ確保して非表示にする */
#pastMeetingModal .pm-icon-ghost {
  visibility: hidden;
  /* 幅は残すが見えない */
}

/* =========================
 * 過去会議 反映確認モーダル
 * =======================*/

/* ダイアログ幅（inline style の移行） */
#pastMeetingApplyConfirmModal .past-meeting-apply-confirm-dialog {
  width: min(520px, 92vw);
}

/* 説明テキスト */
#pastMeetingApplyConfirmText {
  margin: 8px 0 14px;
  color: #374151;
  font-size: 14px;
  line-height: 1.5;
}

/* ボタン配置（右寄せ） */
#pastMeetingApplyConfirmModal .past-meeting-apply-confirm-actions {
  justify-content: flex-end;
}

/* ========== Chips ========== */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin: 0 2px 2px 0;
  border-radius: 999px;
  font-size: 1em;
  background: #f5f9ff;
  border: 1px solid #dfe7f7;
  color: #1e2a44;
}

.chip.company {
  background: #eef6ff;
  border-color: #d9e9ff;
}

.chip.department {
  background: #fff6e9;
  border-color: #ffe4bf;
}

.chip.person {
  background: #eefdf3;
  border-color: #cfeede;
}


.chip .remove,
.chip .remove-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 14px;
  margin-left: 6px;
  cursor: pointer;
  padding: 0 2px;
}

.chip .remove:hover,
.chip .remove-btn:hover {
  color: #d00;
}

/* ========== Organization/Participants ========== */
#organizationTree {
  list-style: none;
  padding-left: 0;
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  background: #f9f9f9;
}

.organization-company,
.organization-department,
.organization-person {
  margin-bottom: 8px;
}

.organization-company>.department-list {
  margin-left: 20px;
  margin-top: 4px;
  list-style: none;
  padding-left: 0;
}

.organization-department>.participant-list {
  margin-left: 20px;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
}

.chip.company {
  background: #e3f2fd;
}

.chip.department {
  background: #fff3e0;
}

.chip.person {
  background: #e8f5e9;
}

.company-chip,
.department-chip {
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chip-delete,
.chip-add {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: .9em;
  color: #888;
}

.chip-delete:hover,
.chip-add:hover {
  color: #d00;
}

#organization-manager {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
  min-height: 160px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.input-group {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.participant-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.participant-name {
  cursor: pointer;
}


.pm-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: transparent;
  align-items: flex-start;
}

.pm-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0 0 8px;
  border: none;
  background: transparent;
  width: 100%;
}

.pm-dept-container .pm-groups:empty {
  display: none;
}


/* 部署名編集アイコン（シナリオ編集アイコンと同系統） */
.pm-dept-edit-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.pm-dept-edit-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.pm-dept-edit-btn:hover .pm-dept-edit-icon {
  opacity: 0.85;
}


.pm-dept-inline-input {
  height: 24.67px;
  padding: 2px 6px;
}




#pm-external-companies.pm-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pm-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: #fff;
  height: auto;
}

.pm-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #edf0f6;
}

.pm-group-header .remove {
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: #777;
  cursor: pointer;
}

.pm-group-header .remove:hover {
  color: #c7354e;
  background-color: transparent;
  border: none;
}

.pm-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  /* min-height: 32px; */
}

.pm-chip {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #F5FCFD !important;
  border: 1px solid #D9D9D9 !important;
}

.pm-chip .pm-chip-key {
  font-weight: 700;
}

.pm-chip .pm-chip-del {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  color: #666;
}

.chip.participant {
  transition: transform 150ms ease, opacity 150ms ease;
}

.chip.participant.dragging {
  opacity: 0.4;
}

.chip.participant.drop-target {
  border: 2px dashed #32AAC6 !important;
}


.pm-person {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border: none;
  background: transparent;
}

.pm-person .pm-km {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-box .form-input,
.pm-person input,
.pm-person select {
  height: 36px;
  border-radius: 8px;
}

.pm-del {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #e6e8ee;
  background: #fff;
  color: #666;
}

.pm-del:hover {
  background: #ffecef;
  border-color: #ffd2da;
  color: #c7354e;
}

.pm-box {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
}

#pm-internal[hidden],
#pm-external[hidden] {
  display: none !important;
}

#pm-internal:not([hidden]),
#pm-external:not([hidden]) {
  display: flex !important;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
}

#pm-internal-depts,
#pm-external-companies {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1 1 auto;
  align-items: stretch;
  padding-right: 12px;
}

.pm-groups .pm-group:first-child {
  margin-left: 0;
}

.pm-groups .pm-group:not(:first-child) {
  margin-left: 25px;
}

.pm-dept-container,
.pm-company-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  width: 100%;
}

#pm-add-dept,
#pm-add-company {
  order: 999;
  flex: 0 0 auto;
  height: 36px;
  white-space: nowrap;
  margin: 0;
  align-self: flex-start;
}

#pm-add-group {
  align-self: flex-start;
}

/* -- headers unify -- */
.pm-group-header {
  border-bottom: 1px solid #edf0f6;
}

.pm-group-title {
  line-height: 2;
}

/* 「＋参加者を追加」ボタンの幅を固定 */
#pm-internal-self-add,
#pm-external-self-add {
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 万が一親要素がflexでも影響を受けないように */
.pm-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.pm-people {
  width: 100%;
  /* 人名エリアは広がってOK */
}


/* Participant modal buttons */
#participantModal .form-field label,
#participantEditModal .form-field label {
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 2px;
  display: block;
}

#participantModal .modal-actions,
#participantEditModal .modal-actions,
#participantModal .modal-actions,
#participantEditModal .modal-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 14px;
  line-height: 1;
  border-radius: 8px;
}

#participantModal .modal-actions,
#participantEditModal .modal-actions {
  font-size: 13px;
  border-radius: 8px;
  line-height: 1.2;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

#participantModal .modal-actions,
#participantEditModal .modal-actions {
  gap: 8px;
}

/* Panel header / indicators */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-header .recording-controls,
.panel-header .summary-controls {
  transform: none !important;
}


.source-indicators {
  text-align: right;
  display: flex;
  gap: 12px;
  align-items: center;
}

.status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #666;
}

.status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bbb;
}

.status.on {
  color: #000;
}

.status.on .dot {
  background: var(--danger-color);
  animation: blink 1.5s infinite ease-in-out;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

/* Capacity */
#capacityMsg {
  display: none;
}

#capacityMsg.over {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-left: 8px;
  font-size: 12px;
  color: var(--danger-color);
  font-weight: 600;
  white-space: nowrap;
}

/* ========== Utilities/Responsive/Print ========== */
.form-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.m-0 {
  margin: 0;
}

#smParticipantFields {
  display: none;
}

.segment {
  position: relative;
}

.segment-actions {
  position: absolute;
  top: 4px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.segment:hover .segment-actions {
  opacity: 1;
}

.segment-merge-up,
.segment-split {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 1;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

/* 統合 */
.segment-merge-up {
  background: url("アイコン/merge.png") no-repeat center;
  background-size: contain;
}

/* 分割 */
.segment-split {
  background: url("アイコン/split.png") no-repeat center;
  background-size: contain;
}

.segment-merge-up:hover,
.segment-split:hover,
.split-cut:hover {
  opacity: 0.7;
}

/* ===== 文中「分割」表示：ハサミアイコン ===== */
.split-cut {
  font-size: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0 4px;
  background: url("アイコン/scissors.png") no-repeat center;
  background-size: contain;
  border: none;
  vertical-align: middle;
  cursor: pointer;
}



/* a11y motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* responsive tweaks */
@media (max-width:600px) {
  .panel {
    height: auto;
  }
}

/* print */
@media print {

  .app-header,
  .meeting-accordion,
  .recording-controls,
  .save-row,
  #replaceTool,
  #activeCountBadge {
    display: none !important;
  }

  body {
    background: #fff;
    padding: 0;
  }

  .panel {
    box-shadow: none;
    border: none;
  }
}


/* == Hero ===================================================== */
.hero {
  position: fixed;
  inset: auto 0 0 0;
  top: var(--header-h, 56px);
  min-height: calc(100dvh - var(--header-h, 56px));
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 40% at 50% 30%, rgba(80, 120, 255, .12), transparent 60%),
    linear-gradient(#f7f9fc, #eef2f8);
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 1100;
}

/* Hero 表示中はアイコン類の透け防止 */
body:has(#hero:not(.is-hidden)) .summary-actions,
body:has(#hero:not(.is-hidden)) #uploadAudioBtn {
  visibility: hidden !important;
}

.hero__inner {
  text-align: center;
  padding: 24px 20px;
}

.hero__title {
  margin: 0 0 16px;
  font-size: clamp(45px, 3vw, 28px);
  font-weight: 700;
  color: var(--text-color);
}

.hero__cta {
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* 閉じる時の状態 */
.hero.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none;
}


/* == Tabs ====================================== */
.tab-container {
  padding: 0 25px 12px;
}

.tab-buttons {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 12px;
}


.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.scenario-editor {
  display: flex;
  flex: 1;
  gap: 16px;
  align-items: stretch;
}

.scenario-tabs {
  display: flex;
  flex-direction: column;
  width: 200px;
  max-height: 320px;
  padding: 4px 0;
  margin: 0;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 6px;
  background: #f7f8fb;
  overflow-y: auto;
  flex-shrink: 0;
}

.scenario-tab {
  border: none;
  background: transparent;
  padding: 6px 12px;
  width: 100%;
  text-align: left;
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
}

.scenario-tab+.scenario-tab {
  margin-top: 2px;
}

.scenario-tab.active {
  background: #ffffff;
  color: #32AAC6;
  font-weight: 600;
}

.scenario-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scenario-editor textarea {
  flex: 1;
  min-height: 260px;
}


.scenario-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 12px;
  width: 100%;
  box-sizing: border-box;
  gap: 12px;
}

.title-input {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

.scenario-title-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 会議情報 summary 行の左右に並べる */
.meeting-accordion>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* 会議情報右側のボタン群 */
.summary-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* =============================
   小アイコンボタン（tool-btn）
   画像アイコン用
============================= */
.tool-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center !important;
}

.tool-btn .tool-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

.tool-btn {
  position: relative;
}

.tool-btn::before {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: background 0.18s ease;
}

.tool-btn:hover::before {
  background: #E8EBF4;
}


/* ===========================================
   Tooltip：アイコンの「上」に説明を表示
   =========================================== */
.tooltip-parent {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tooltip {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
  transform-origin: bottom center;
}


.tooltip-parent:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* =======================
   プロフィールアイコン
======================= */
.profile-icon-btn {
  width: 54px;
  height: 54px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.profile-icon-btn img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

/* =======================
   ドロップダウンメニュー
======================= */
.profile-dropdown {
  position: absolute;
  top: calc(var(--header-h) - 4px);
  right: 10px;
  width: 280px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  padding: 12px;
  z-index: 3000;
}

.profile-info {
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.profile-icon-large img {
  width: 50px;
  height: 50px;
  margin: 8px 0 0 0;
}


.logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
}

.logout-btn svg {
  fill: #555;
}

.logout-btn:hover {
  background: #f2f2f2;
}





.btn-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 2px;
}

.scenario-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.scenario-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  margin-right: 10px;
}

/*★元のタイトルCSS
#meeting-title {
  width: 100%;
}*/

/*★BK
.control-group.title-wide {
  grid-column: span 2;
}
*/

.control-group.detail-datetime-group {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 日付を少し広め、開始・終了は同じ幅 */
.control-group.detail-datetime-group .detail-date {
  flex: 1.4;
}

.control-group.detail-datetime-group .detail-time {
  flex: 1;
}

.pm-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-group-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.pm-box {
  position: relative;
}

.pm-box-icon {
  position: absolute;
  top: -18px;
  /* ← もっと上に */
  left: -4px;
  /* ← 左にはみ出す量を減らす */
  width: 24px;
  /* 少し大きくして存在感アップ（お好みで可変） */
  height: 24px;
  object-fit: contain;
  z-index: 10;
}

/* pm-box を scenario-wrapper と同じ構造に */
.pm-box-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  width: 100%;
}


.pm-box-left-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  margin-right: 10px;
}

.pm-box-icon {
  display: none;
}

.pm-add-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0 38px;
  font-size: 12px;
  color: var(--primary-color);
  cursor: pointer;
}

.member-add-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--primary-color);
  cursor: pointer;
}

.pm-add-btn:hover,
.pm-add-btn:hover {
  color: var(--primary-hover-color);
}

.tab-button {
  background: transparent;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 15px 4px;
  color: #555;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  font-size: 13px;
}

.tab-button:hover {
  opacity: 0.8;
}

.tab-button.active {
  color: var(--primary-color) !important;
}

.tab-button.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background-color: #32AAC6;
  border-radius: 2px;
}

/* アイコン（mic/app と同じ大きさ＆位置） */
.panel-title .source-indicator {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  cursor: default !important;
}



#uploadAudioBtn .upload-icon {
  width: 22px;
  height: 22px;
  /* margin-left: 8px; */
  vertical-align: middle;
}

#uploadAudioBtn {
  /* padding: 0;
  height: 22px; */
  padding: 4px;
  height: auto;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* ▼ uploadAudioBtn 専用（位置はそのまま、ホバー時の丸背景だけ共通化） */
#uploadAudioBtn {
  position: relative;
}

#uploadAudioBtn::before {
  content: "";
  position: absolute;
  width: 38px;
  /* 転送・外部連携・その他と同じ */
  height: 38px;
  border-radius: 50%;
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: background 0.18s ease;
}

#uploadAudioBtn:hover::before {
  background: #E8EBF4;
  /* 転送などと同じ色 */
}





.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon .input-left-icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  flex-shrink: 0;
  object-fit: contain;
}

/* ===============================
   Custom Time Picker（手入力対応版）
   =============================== */

.time-picker {
  position: relative;
  width: 100%;
}

/* ▼ 手入力できるように input に変更 */
/* ▼ 開始時刻・終了時刻を日付入力と完全に同じ見た目へ */
.time-display-input {
  width: 100%;
  height: 33px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: #fff;
  font-size: 13px;
  line-height: 1.2;
  cursor: text;
}

.time-display-input:focus {
  outline: none;
  box-shadow: none;
  /* 日付と同じフォーカス挙動 */
  border-color: var(--primary-color);
}



/* ▼ ドロップダウン */
.time-dropdown {
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 50;
  padding: 6px 0;
}

/* ▼ 選択肢 */
.time-option {
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
}

.time-option:hover {
  background: #F2F5FA;
}

.time-option.selected {
  background: #E8F0FE;
  font-weight: 700;
}

/* ===============================
   Scenario Editor Modal
=============================== */
.scenario-editor-dialog {
  width: 900px;
  max-width: 90vw;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* ▼ ヘッダー */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-header h3 {
  font-size: 20px;
  margin: 0;
  font-weight: 700;
}

/* ▼ 2カラム本体 */
.scenario-editor-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  min-height: 420px;
}

.scenario-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.history-item {
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: solid 1px var(--border-color);
  transition: transform 0.25s ease;
  position: relative;
}


.history-item.active {
  background: #E8EBF4 !important;
}

.history-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.history-item:hover {
  background: #f2f4fb;
}

#historyList.recording-locked .history-item {
  cursor: not-allowed;
  opacity: 0.6;
}

#historyList.recording-locked .history-item:hover {
  background: #fff;
}

.history-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-date {
  display: block;
  font-size: 11px;
  color: #666;
}

.history-pin-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  pointer-events: none;
}

.history-pin-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
}



.history-context-menu {
  position: fixed;
  z-index: 2000;
  min-width: 140px;
  padding: 4px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 13px;
}

.history-context-menu[hidden] {
  display: none;
}

.history-context-menu__item {
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.history-context-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-context-menu__item .context-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}


.history-context-menu__item:hover {
  background: #E8EBF4;
}

.history-context-menu__item--danger {
  color: #d11a2a;
}


.history-item.pin-animate {
  animation: history-pin-move 0.3s ease-out;
}

@keyframes history-pin-move {
  0% {
    transform: translateY(-6px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  }

  100% {
    transform: translateY(0);
    box-shadow: none;
  }
}



.scenario-list li {
  padding: 12px 14px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scenario-list li:last-child {
  border-bottom: none;
}

/* 選択中 */
.scenario-list li.active {
  background: #E7F1FF;
}

.scenario-list li .edit-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

/* ▼ 右側：本文エリア */
.scenario-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.scenario-content {
  flex: 1 1 auto;
  min-height: 300px;
  resize: vertical;
  font-size: 14px;
  padding: 10px;
  border-radius: 8px;
}

/* ▼ アクションボタン（右下に揃える） */
.scenario-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

/* ▼ icon-only tool buttons */
.tool-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  position: relative;
}

.tool-btn .tool-icon {
  width: 22px;
  height: 22px;
}

/* .tooltip {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  padding: 4px 8px;
  color: #fff;
  font-size: 11px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
} */

.tooltip-parent:hover .tooltip {
  opacity: 1;
}

/* ▼ 保存ボタン */
#scenarioSaveBtn {
  width: 86px
}

/* ============ Scenario */
.scenario-body {
  display: flex;
  gap: 16px;
}

.scenario-list {
  width: 220px;
  flex: 0 0 220px;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  padding: 4px 0;
}

#scenarioModal .modal-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scenario-editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#scenarioEditor {
  font-size: 15px;
  width: 100%;
  min-height: 300px;
  resize: vertical;
}

.scenario-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.scenario-list-item {
  padding: 8px 12px;
  margin: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
}

.scenario-list-item:hover {
  background: #f5f7fa;
}

.scenario-list-item.active {
  background: #e2ecf9;
}

.scenario-edit-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.scenario-list-item:hover .scenario-edit-btn {
  display: inline-flex;
}

.scenario-edit-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.scenario-list-pencil {
  font-size: 13px;
  opacity: 0.6;
  margin-left: 8px;
}

.scenario-edit-btn {
  display: none;
  /* 通常時は非表示 */
  border: none;
  background: transparent;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  align-items: center;
}

.scenario-edit-icon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.scenario-list-item:hover .scenario-edit-btn {
  display: inline-flex;
}

.scenario-list-item.editing .scenario-edit-btn {
  display: none;
}

.scenario-title-input {
  flex: 1;
  font-size: 14px;
  padding: 2px 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
}



/* ---------------------------------------
   会議詳細：日時グループと場所グループを左右に分ける
---------------------------------------- */

/*★削除？
#tab-detail .detail-datetime-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 日付を少し広め、開始・終了は同じ幅 
#tab-detail .detail-datetime-group .detail-date {
  flex: 1.4;
}
*/
/*
#tab-detail .detail-datetime-group .detail-date {
  flex: 1;
}

#tab-detail .detail-datetime-group .detail-time {
  flex: 1;
}
*/

/* 場所入力は右側カラムで全幅 */
#tab-detail .detail-location {
  width: 100%;
}

#panel-transcript .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

#panel-transcript .recording-controls {
  margin-left: auto;
}

#panel-summary .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  /* justify-content: space-between; */
}

#panel-summary #btn-summarize {
  margin-left: auto;
  width: 86px;
}

#profileName {
  font-size: 18px;
  width: 100%;
}

#profileEmail {
  font-size: 12px;
  width: 100%;
}

/* ▼ アイコンもツールチップもヘッダーより下にする */
.tooltip-parent,
.tooltip {
  z-index: 1000;
  /* ← ヘッダー(2001)より低くすればOK */
}


/* ▼ プロフィールを開いている間だけ、tooltip を下げる */
body.profile-open .tooltip-parent {
  z-index: 1000 !important;
}

body.profile-open .tooltip {
  z-index: 999 !important;
}

/* ▼ プロフィールドロップダウンは最前面 */
.profile-dropdown {
  z-index: 11000 !important;
  position: absolute;
}

/* === Toast (右下ポップアップ) ====================== */
.toast-container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  min-width: 320px;
  max-width: 480px;
  background: #e9ffe6;
  color: #111827;
  border-radius: 10px;
  border: 1px solid #b7e1b2;
  border-bottom: 6px solid #b7e1b2;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;

  display: flex;
  align-items: center;
  gap: 12px;

  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  animation: toast-in 250ms ease-out forwards;
}

.toast__icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #4caf50;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.toast__icon::before {
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("アイコン/check_white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}



.toast__message {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.toast__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: #6b7280;
  font-size: 18px;
  line-height: 1;
}

.toast__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111827;
}

.toast.toast--out {
  animation: toast-out 150ms ease-in forwards;
}



@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* 履歴タイトルをホバーするとフルタイトルをポップアップ表示 */
.history-item:hover::after {
  content: attr(data-full);
  position: absolute;
  left: 10px;
  top: -12px;
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 2px;
  max-width: 280px;
  white-space: normal;
  word-break: break-all;
  z-index: 3000;
  pointer-events: none;
}

/* .mic-warning {
  color: #EE8593;
  font-size: 14px;
  margin-left: 12px;
} */

/* ▼ マイクOFF トースト */
.mic-off-toast {
  position: fixed;
  top: 80px;
  /* ヘッダー直下 */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(238, 133, 147, 0.95);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  z-index: 3000;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
  white-space: nowrap;
}



/* バッチ文字起こしファイル一覧 */

.tool-btn:disabled,
.tool-btn[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.35 !important;
  filter: grayscale(100%);
  pointer-events: none;
}

/* hover を完全に無効化 */
.tool-btn:disabled:hover,
.tool-btn[aria-disabled="true"]:hover {
  opacity: 0.35 !important;
}

.tool-btn:disabled:hover::before,
.tool-btn[aria-disabled="true"]:hover::before,
#uploadAudioBtn:disabled:hover::before,
#uploadAudioBtn[aria-disabled="true"]:hover::before {
  background: transparent !important;
}

/* tooltip も出さない */
.tool-btn:disabled .tooltip,
.tool-btn[aria-disabled="true"] .tooltip {
  display: none !important;
}


.batch-modal {
  max-width: 640px;
}

.batch-file-list-header {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 96px 120px;
  gap: 8px;
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
}

.batch-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 330px;
  overflow: auto;
  border: 1px solid #cdcdcd;
  border-radius: 8px;
}

.batch-file-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 96px 120px;
  align-items: center;
  padding: 4px 8px;
  border-bottom: 1px solid #cdcdcd;
  font-size: 13px;
}

.batch-file-item:last-child {
  border-bottom: none;
}

.batch-file-order {
  text-align: center;
  color: #666;
}

.batch-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-file-size {
  text-align: right;
  color: #666;
  font-variant-numeric: tabular-nums;
}

.batch-file-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.batch-file-btn {
  min-width: 28px;
  height: 24px;
  border: 1px solid #D0D4E5;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
}

.batch-file-btn:hover {
  background: #F4F6FC;
}

.batch-file-btn-remove {
  color: #c00;
}

.batch-file-list-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

/* シナリオ未保存確認モーダル */
.confirm-text {
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  margin: 20px 0 24px;
}

.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* 未保存確認モーダル：ボタンサイズ統一 */
.confirm-actions {
  min-width: 140px;
  /* 横幅を揃える */
  height: 44px;
  /* 高さを固定 */
  padding: 0 24px;
  /* 横だけ指定 */
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* border分も含めて揃える */
}

#batchRunStatus {
  display: none;
}



/* ===== Batch modal layout ===== */
#batchModal .modal-dialog.batch-modal {
  max-width: 860px;
  height: auto;
  max-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
}

#batchModal .batch-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#batchModal .batch-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex: 1 1 auto;
}

#batchModal .batch-pick-card,
#batchModal .batch-list-card {
  border: 1px solid #c2c2c2;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

#batchModal .batch-pick-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

#batchModal .batch-help {
  margin: 10px 0 6px;
}

#batchModal .batch-status {
  margin: 0;
  min-height: 18px;
  /* メッセージが出たり消えたりしてもガタつかない */
}

#batchModal .batch-empty-hint {
  border: 1px dashed #D0D4E5;
  border-radius: 12px;
  padding: 12px;
  margin: 0;
}

#batchModal .batch-modal-footer {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  padding-top: 12px;
  justify-content: flex-end;
  /* 右寄せ */
}

/* ===== Batch upload main area ===== */
#batchModal .batch-upload-area {
  padding: 20px;
  border: 2px dashed #32AAC6;
  border-radius: 12px;
  background: #E7F6F9;
  text-align: center;
}

/* ===== Batch file list area ===== */
#batchModal .batch-list-area {
  padding: 12px;
}



/* ===============================
   シナリオ未保存アラート：変更を破棄
=============================== */
#scenarioCloseDiscard {
  background: #F2F2F2;
  /* 薄いグレー背景 */
  color: #7F7F7F;
  /* 文字色 */
  border: 2px solid #BFBFBF;
  /* 枠線 */
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

/* hover */
#scenarioCloseDiscard:hover {
  background: #EAEAEA;
  border-color: #A6A6A6;
}





button {
  align-items: center;
  padding: 2px 8px 0 8px;
  font-size: 14px;
  border-radius: var(--btn-radius);
}

.btn-main:hover {
  background-color: var(--primary-hover-color);
  border: 2px solid var(--primary-hover-color);
}

.btn-main {
  background-color: var(--primary-color);
  color: white;
  border: 2px solid var(--primary-color);
  font-weight: 550;
  height: 30px
}

.btn-mute {
  background-color: white;
  border: 2px solid var(--red-color);
  color: var(--red-color);
  font-weight: 550;
  height: 30px
}

.btn-mute:hover {
  background-color: var(--mute-hover-color);
}

.btn-restart {
  border: 2px solid var(--primary-color);
  background-color: white;
  color: var(--primary-color);
  font-weight: 550;
  height: 30px
}

.btn-restart:hover {
  background-color: var(--restart-hover-color);
}

.btn-stop {
  background-color: white;
  border: 2px solid var(--gray-color);
  color: var(--gray-color);
  font-weight: 550;
  height: 30px
}

.btn-stop:hover {
  background-color: var(--stop-hover-color);
}

.btn-gray {
  background-color: var(--gray-color2);
  border: 2px solid var(--gray-color2);
  color: white;
  font-weight: 550;
  height: 30px
}

.btn-clear {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 550;
  height: 30px
}


.btn-right {
  margin-left: auto;
}

/* ========== インポート（ファイル + 会議情報に反映） ========== */
#tab-import .import-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 10px;
}

#tab-import #apply-import {
  margin-left: auto;
}

/* 「ファイル」ボタン（会議情報に反映 btn-clear と同じ見た目/高さに） */
#tab-import #importFileBtn.import-file-link,
#tab-import #pastMeetingBtn.import-file-link {
  background-color: transparent;
  border: 2px solid var(--gray-color);
  color: var(--gray-color);
  font-weight: 550;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--btn-radius);

  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

#tab-import #importFileBtn.import-file-link:hover,
#tab-import #pastMeetingBtn.import-file-link:hover {
  background-color: var(--stop-hover-color);
}

/* 「会議情報に反映」ボタン：中身（アイコン+文字）の縦位置ズレ防止 */
#tab-import #apply-import.btn-clear {
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ファイルアイコン */
#tab-import .import-file-icon {
  width: 16px;
  height: 16px;
  display: block;
}

#tab-import #apply-import .btn-icon {
  margin-top: 0;
}

.scenarioXbutton {
  margin-left: auto;
}

.btn-icon {
  margin-top: -3px;
}

.transcript-header {
  display: flex;
  justify-content: space-between;
}

.member-add-btn:hover {
  color: var(--primary-hover-color);
}

.btn-gray:hover {
  background-color: var(--gray-hover-color);
  border: 2px solid var(--gray-hover-color);
}

.btn-clear:hover {
  background-color: var(--stop-hover-color);
  border: 2px solid var(--primary-color);
}

#toggleRecBtn:disabled,
#btn-summarize:disabled,
#btnSave:disabled {
  background-color: var(--gray-color2);
  border: 2px solid var(--gray-color2);
  color: var(--text-color);
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

#btnSave {
  width: 86px
}

#toggleRecBtn,
#resumeBtn,
#stopBtn,
#pauseBtn {
  width: 86px
}


.btn-hero {
  width: 160px;
  height: 40px;
  font-size: 18px;
  border-radius: 50px;
}



#meetingInfoAccordion>.accordionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
}


#meetingInfoAccordion>.accordionHeader>summary {
  flex: 1;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

#meetingInfoAccordion>.accordionHeader>.summary-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}



.meeting-title-compact {
  display: none;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-color);
}

#meetingInfoAccordion.is-collapsed .meeting-title-compact {
  display: inline-block;
}



body.phrase-open {
  --panel-current: var(--panel-w);
}

#phrase-panel {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  left: var(--dock-current);
  right: 0;
  width: auto;
  background: #fff;
  box-shadow: 4px 0 12px rgba(0, 0, 0, .12);
  padding: 10px;
  overflow: auto;
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s ease, opacity .25s ease;
  z-index: 1200;
}

body.phrase-open #phrase-panel {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.phrase-panel-actions {
  display: flex;
  gap: 8px;
}

/* =========================
 * フレーズ：上部アクションバーを1列で高さ統一
 * =======================*/
#phrase-panel .phrase-panel-actions {
  display: flex;
  align-items: center;
  height: 30px;
}

#phrase-panel .phrase-panel-left {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}

/* 選択中件数（例：〇件を選択中） */
#phrase-panel .phrase-selected-count {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  height: 100%;
  line-height: 30px;
}

.phrase-bulk-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phrase-panel-search {
  flex: 1 1 300px;
  max-width: 45vw;
  min-width: 260px;
}

.phrase-panel-search input[type="search"] {
  width: 100%;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  font-size: 12px;
  outline: none;
  background: #fff;
  opacity: 0.6;
  line-height: 30px;
}

.phrase-table {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
}

.phrase-table th {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #ddd;
  font-weight: 600;
  font-size: 12px;
}

/* =========================
 * フレーズ：上部アクションバーの下線
 * =======================*/
#phrase-panel .phrase-panel-header {
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

/* =========================
 * フレーズ：見出し直下「＋新規追加」は下線なし
 * =======================*/
#phrase-panel .phrase-table thead tr.phrase-add-row th {
  border-bottom: none !important;
}

/* ====== フレーズ表：ソート見出し ====== */
#phrase-panel .phrase-table th.is-sortable {
  user-select: none;
}

#phrase-panel .phrase-table .th-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

#phrase-panel .phrase-table .sort-icon {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgba(0, 0, 0, .35);
  transform: translateY(1px);
}

#phrase-panel .phrase-table th.is-sortable.is-active .sort-icon {
  border-top-color: rgba(0, 0, 0, .65);
  border-bottom-color: rgba(0, 0, 0, .65);
}

/* 昇順：上向き */
#phrase-panel .phrase-table th.is-sortable[data-sort-dir="asc"] .sort-icon {
  border-top: 0;
  border-bottom: 7px solid rgba(0, 0, 0, .65);
}

/* 降順：下向き */
#phrase-panel .phrase-table th.is-sortable[data-sort-dir="desc"] .sort-icon {
  border-bottom: 0;
  border-top: 7px solid rgba(0, 0, 0, .65);
}

.phrase-table td {
  vertical-align: middle;
  padding: 8px;
  max-width: 300px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================
 * アクション列（編集 / 削除）
 *  - 行ホバー時だけ表示
 * =======================*/
#phrase-panel .phrase-table th.phrase-col-action,
#phrase-panel .phrase-table td.phrase-col-action {
  width: 74px;
  text-align: center;
  white-space: nowrap;
  padding: 8px;
}

#phrase-panel .phrase-table .phrase-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* 行ホバー or 行チェック済みのときだけ表示 */
#phrase-panel .phrase-table tbody tr:hover .phrase-row-actions {
  opacity: 1;
  pointer-events: auto;
}

#phrase-panel .phrase-table .phrase-action-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;

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

#phrase-panel .phrase-table .phrase-action-btn:hover {
  background: rgba(0, 0, 0, .06);
}

#phrase-panel .phrase-table .phrase-action-btn img {
  width: 16px;
  height: 16px;
  display: block;
}

#phrase-panel .phrase-table tbody tr:hover {
  background: #E8EBF4;
}

#phrase-panel .phrase-table tbody tr.is-checked {
  background: #E8EBF4;
}

#phrase-panel .phrase-table td.phrase-opcell,
#phrase-panel .phrase-table th.phrase-opcell {
  width: 34px;
  padding-left: 8px;
  padding-right: 8px;
}

/* =========================
 * チェック列（新設）：幅固定＆中央揃え
 * =======================*/
#phrase-panel .phrase-table th.phrase-th-check,
#phrase-panel .phrase-table td.phrase-td-check {
  width: 34px;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}

/* =========================
 * チェックボックス（画像チェック：完全カスタム）
 *  - 背景：#32AAC6
 *  - hover背景：#2A90A8
 *  - チェック画像：アイコン/check_white.png
 * =======================*/
#phrase-panel .phrase-table #phraseCheckAll,
#phrase-panel .phrase-table .phrase-row-check {
  appearance: none;
  -webkit-appearance: none;

  width: 18px;
  height: 18px;
  margin: 0;
  display: inline-block;
  vertical-align: middle;

  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;

  cursor: pointer;
}

/* ON */
#phrase-panel .phrase-table #phraseCheckAll:checked,
#phrase-panel .phrase-table .phrase-row-check:checked {
  background-color: #32AAC6;
  border-color: #32AAC6;

  background-image: url("アイコン/check_white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* ON + hover */
#phrase-panel .phrase-table #phraseCheckAll:checked:hover,
#phrase-panel .phrase-table .phrase-row-check:checked:hover {
  background-color: #2A90A8;
  border-color: #2A90A8;
}

body.phrase-open {
  --panel-current: 100%;
}

/* 種別バッジ 共通 */
.phrase-type-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* 共通フレーズ（グレー枠） */
.phrase-type-badge.is-common {
  color: #7f7f7f;
  background: #fff;
  border-color: #7f7f7f;
}

/* マイフレーズ（水色枠＋薄水色背景） */
.phrase-type-badge.is-my {
  color: #32AAC6;
  background: #E7F6F9;
  border-color: #32AAC6;
}

/* オフ行：文字をグレー（背景は変えない） */
#phrase-panel .phrase-table tbody tr.is-off td {
  color: #BFBFBF;
}

/* オフ時の「マイフレーズ」バッジ：文字色を#65D6E5、枠線なし（背景はそのまま） */
#phrase-panel .phrase-table tbody tr.is-off .phrase-type-badge.is-my {
  color: #65D6E5;
  border-color: transparent;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  margin-right: 6px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  border-radius: 22px;
  transition: .3s;
}

.slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: .3s;
}

.toggle-switch input:checked+.slider {
  background-color: #32AAC6;
}

.toggle-switch input:checked+.slider::before {
  transform: translateX(20px);
}

.toggle-text {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  height: 22px;
  line-height: 22px;
  white-space: nowrap;
}

.phrase-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.toggle-spacer {
  width: 48px;
  height: 22px;
  flex: 0 0 48px;
  display: inline-block;
}

/* =========================
 * チェックボックス：常時表示
 * =======================*/
#phrase-panel .phrase-table #phraseCheckAll,
#phrase-panel .phrase-table .phrase-row-check {
  opacity: 1;
  pointer-events: auto;
}

/* =========================
 * Maintenance Screen
 * =======================*/
.maintenance-screen {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  /* ヘッダーの下から全画面 */
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(60% 40% at 50% 30%, rgba(50, 170, 198, .16), transparent 60%),
    linear-gradient(#f7f9fc, #eef2f8);
  z-index: 9999;
}

.maintenance-card {
  width: min(720px, 92vw);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
  padding: 22px 22px 18px;
  border: 1px solid #e6eef2;
}

.maintenance-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  color: #17505D;
  background: #E7F6F9;
  border: 1px solid #7FCADB;
}

.maintenance-title {
  margin: 12px 0 8px;
  font-size: 22px;
  color: #111827;
  text-align: center;
}

.maintenance-text {
  margin: 0 0 14px;
  color: #374151;
  line-height: 1.7;
  text-align: center;
}

#maintenanceMessage {
  white-space: pre-line;
}


.maintenance-updatedAt {
  margin-top: 10px;
  font-size: 12px;
  color: #6b7280;
}

.maintenance-meta {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #edf0f6;
  color: #6b7280;
  font-size: 13px;
}

.maintenance-meta-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
}

.maintenance-meta-row .k {
  color: #6b7280;
}

.maintenance-meta-row .v {
  color: #111827;
  font-weight: 600;
}

/* メンテ中はアプリ本体を触れなくする（表示はしてもいいが、完全に隠すなら display:none にしてOK） */
body.maintenance-mode .app,
body.maintenance-mode #hero,
body.maintenance-mode #dock,
body.maintenance-mode #dock-panel,
body.maintenance-mode #overlay {
  display: none !important;
}

/* hidden 属性は必ず非表示にする（display 指定より強くする） */
.maintenance-screen[hidden] {
  display: none !important;
}

/* ===============================
   初期描画のチラ見え防止
   =============================== */

/* メンテ判定が終わるまでアプリ本体を隠す */
html.booting body .app {
  visibility: hidden;
}

/* メンテナンス中は常にアプリ本体を非表示 */
body.maintenance-mode .app {
  display: none;
}

.phrase-add-row td {
  padding: 8px 12px;
  background: #fff;
}

.phrase-add-btn {
  background: none;
  border: none;
  color: #0a6cff;
  font-size: 14px;
  cursor: pointer;
}

.phrase-add-btn:hover {
  text-decoration: underline;
}

/* =========================
 * フレーズ：リンク風ボタン
 * =======================*/
#phrase-panel .phrase-link-btn {
  appearance: none;
  -webkit-appearance: none;

  background: transparent;
  border: none;
  padding: 0;

  display: inline-flex;
  align-items: center;
  gap: 4px;

  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);

  cursor: pointer;
  height: 30px;
  line-height: 30px;
}

#phrase-panel .phrase-link-btn:hover {
  color: var(--primary-hover-color);
}

#phrase-panel .phrase-link-btn .btn-icon {
  width: 16px;
  height: 16px;
  opacity: 0.75;
}

#phrase-panel .phrase-link-btn:hover .btn-icon {
  opacity: 1;
}

#phrase-panel .btn-main {
  height: 30px;
  line-height: 30px;
  padding: 0 14px;
  white-space: nowrap;
}

#phrase-panel .btn-main:disabled {
  background-color: var(--gray-color2);
  border: 2px solid var(--gray-color2);
  color: var(--text-color);
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* =========================
 * フレーズ：カテゴリドロップダウン（見た目をモーダルと統一）
 * =======================*/
#phrase-panel .phrase-bulk-select {
  appearance: none;
  -webkit-appearance: none;
  height: 30px;
  padding: 0 34px 0 10px;
  line-height: 30px;
  /* 非フォーカス時は薄い枠*/
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background-color: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%236b7280' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}

#phrase-panel .phrase-bulk-select:focus {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: var(--focus-ring);
}

#phrase-panel [hidden] {
  display: none !important;
}