:root {
  --ink: #49382d;
  --muted: #88786c;
  --line: #f0ddc9;
  --canvas: #fffaf5;
  --panel: #fff;
  --navy: #8a593b;
  --blue: #c47b48;
  --mint: #fff2e5;
  --red: #d84367;
  --amber: #c7833c;
}

body {
  background: radial-gradient(circle at 4% 3%, #fff0df 0, transparent 24rem), radial-gradient(circle at 98% 16%, #fff5e8 0, transparent 30rem), var(--canvas);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Hiragino Sans", sans-serif;
}

.app-shell { max-width: 1740px; padding: 26px; }
.app-header { margin-bottom: 20px; }
.app-header h1 { color: #4a3325; font-size: 27px; letter-spacing: .025em; }
.eyebrow { color: #be7140; font-size: 11px; letter-spacing: .16em; }
.header-actions { gap: 12px; font-weight: 700; }
.connection i { background: #d6a9c0; }
.connection.live i { background: #65b99b; box-shadow: 0 0 0 4px #dff5eb; }

/* 候補一覧を下へ見ている間も、上位3件を画面上に残す。 */
.pinned-candidates {
  position: sticky;
  top: 8px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 13px auto;
  padding: 7px 9px;
  border: 1px solid #bfe2cf;
  border-radius: 14px;
  background: #fafffcf2;
  box-shadow: 0 7px 18px #28634724;
  backdrop-filter: blur(10px);
}
.pinned-candidates[hidden] { display: none; }
.pinned-label { flex: 0 0 auto; color: #3a7b63; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.pinned-candidate-list { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pinned-candidate {
  display: grid;
  grid-template-columns: 15px minmax(0, 190px) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid #d4e9dc;
  border-radius: 9px;
  background: #fff;
  color: #456b5c;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.pinned-candidate:hover { border-color: #58a981; background: #effaf3; }
.pinned-candidate.is-top { border-color: #55aa82; background: #effbf4; }
.pinned-rank { color: #247e5d; font-weight: 900; }
.pinned-info { display: grid; min-width: 0; gap: 2px; text-align: left; }
.pinned-title { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.pinned-name { overflow: hidden; color: #29483b; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.pinned-case { color: #789488; font-size: 9px; }
.pinned-meta { overflow: hidden; color: #678073; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.pinned-score { min-width: 20px; color: #c61f43; font-size: 13px; font-weight: 900; text-align: right; }

.caller-bar { gap: 18px; border-color: #cbe5d6; border-radius: 18px; background: linear-gradient(100deg, #effaf3, #f2fbf7); box-shadow: 0 8px 24px #2c775010; }
.caller-status { color: #2a7059; }
input { border-color: #c8e1d3; border-radius: 10px; background: #fefffe; }
input:focus { border-color: #49ae84; outline-color: #cdeedc; }

.panel { border-color: #d9e9df; border-radius: 20px; box-shadow: 0 8px 22px #2350380d; }
.panel h2 { color: #29483b; font-size: 18px; }
.badge { background: #edf8f1; color: #5e7d6f; }
.badge.accent { background: #dff5e8; color: #218660; }
.role-switch { border-color: #d8ebdf; border-radius: 14px; background: #fbfefa; }
.role { border-color: #cce4d5; border-radius: 9px; color: #547567; }
.role.active, .primary, .speech-entry button { border-color: #277f60; background: linear-gradient(135deg, #35a97d, #237b62); box-shadow: 0 5px 12px #2b8b6530; }
.secondary { border-color: #bfdfce; color: #287557; background: #fbfffc; }
.ghost { border-color: #d1e7d9; color: #477263; background: #fbfffc; }
.audio-actions select { min-width: 185px; border: 1px solid #bfdfce; border-radius: 9px; padding: 9px; background: #fbfffc; color: #396e5b; font: inherit; font-size: 12px; font-weight: 700; }
.primary:hover, .secondary:hover, .ghost:hover, .speech-entry button:hover { transform: translateY(-1px); }

.transcript { padding-right: 8px; }
.chat-keyword-stream { margin-top: 12px; padding: 9px 10px; border: 1px solid #cfe8d9; border-radius: 12px; background: #f3fbf6; }
.chat-keyword-stream p { margin: 0 0 6px; color: #287d5e; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.chat-keywords { display: flex; flex-wrap: wrap; gap: 5px; max-height: 70px; overflow: auto; }
.chat-keyword { padding: 4px 8px; border: 1px solid #f2b9c6; border-radius: 999px; background: #fff6f8; color: #c61f43; font-size: 11px; font-weight: 800; }
.chat-keywords .empty { font-size: 11px; line-height: 1.4; }
.utterance { border-bottom-color: #e3f0e8; }
.speaker { color: #287b5d; }
.interim { color: #98afa4; }
.transcript { display: flex; flex-direction: column; gap: 9px; }
.transcript .chat-message { width: fit-content; max-width: 88%; margin: 0; padding: 10px 13px; border: 1px solid #d6ebdf; border-radius: 17px; box-shadow: 0 3px 8px #3c72500b; }
.transcript .chat-message.customer { align-self: flex-start; border-bottom-left-radius: 5px; background: linear-gradient(135deg, #edf9f1, #fbfefc); }
.transcript .chat-message.operator { align-self: flex-end; border-color: #cce5df; border-bottom-right-radius: 5px; background: linear-gradient(135deg, #edf9f6, #f9fffc); }
.chat-message .utterance-meta { gap: 14px; margin-bottom: 5px; }
.chat-message.operator .utterance-meta { flex-direction: row-reverse; }
.chat-message.operator .speaker { color: #24785f; }
.chat-message .chat-text { color: #29473c; font-size: 14px; line-height: 1.65; }
.chat-message.interim { opacity: .68; }
.ranking-note { color: #698174; }
.candidate { border-color: #d8e9df; border-left-color: #b8d7c5; border-radius: 15px; box-shadow: 0 2px 7px #3d71500a; }
.candidate.top { border-left-color: #2b9c73; background: linear-gradient(100deg, #f4fcf7, #effaf4); }
.candidate-tier-heading { display: flex; align-items: baseline; gap: 9px; margin: 13px 0 7px; padding: 7px 10px; border-radius: 10px; font-size: 12px; }
.candidate-tier-heading strong { font-size: 14px; }
.candidate-tier-heading span { color: #698174; }
.primary-heading { background: #e9f8ef; border: 1px solid #c9ead6; color: #187752; }
.reference-heading { background: #eef5fb; border: 1px solid #d5e4f0; color: #2878a7; }
.reference-candidate { border-left-color: #83b7d5; background: #fbfdff; opacity: .94; }
.reference-mark { font-size: 11px; font-weight: 800; color: #2878a7; background: #e5f1fa; border-radius: 99px; padding: 2px 5px; }
.rank-change { display: flex; align-items: center; gap: 7px; width: fit-content; margin: 6px 0 0 32px; color: #74877d; font-size: 11px; white-space: nowrap; }
.rank-change strong { padding: 3px 8px; border-radius: 99px; background: #edf4ef; color: #617d6e; font-size: 12px; }
.rank-change.up strong { background: #dff5eb; color: #11845b; box-shadow: 0 0 0 3px #eefaf3; }
.rank-change.down strong { background: #fff0e8; color: #c26449; }
.movement b { margin-left: 2px; font-size: 15px; }
.rank-relocating { position: relative; z-index: 2; transition: transform .82s cubic-bezier(.22,.72,.2,1), box-shadow .82s ease, border-color .82s ease; box-shadow: 0 10px 24px #318a5e2b; will-change: transform; }
.candidate .person, .case-id { color: #29483b; }
.candidate-summary, .candidate .details { color: #678073; }
.reason { background: #fff0f3; color: #c61f43; }
.candidate button { color: #1e8963; }
.movement { color: #60ad91; }
.movement.down { color: #db5e79; }
.candidate.rank-up { animation: rank-rise .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--rank-delay); }
.candidate.rank-up.rank-celebrate { animation: rank-rise .7s cubic-bezier(.2,.8,.2,1) both, rank-flash 1.05s ease-in-out 2 both; animation-delay: var(--rank-delay), calc(var(--rank-delay) + 120ms); }
.candidate.rank-down { animation: rank-fall .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--rank-delay); }
.candidate.rank-new { animation: rank-new .48s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--rank-delay); }
.candidate.rank-up .movement, .candidate.rank-down .movement { animation: movement-pulse .65s ease both; animation-delay: var(--rank-delay); }
@keyframes rank-rise { 0% { transform: translateY(42px); border-color: #83c9b2; box-shadow: 0 0 0 7px #dff5eb; } 60% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
@keyframes rank-fall { 0% { transform: translateY(-24px); border-color: #b8d9c7; box-shadow: 0 0 0 5px #edf8f1; } 100% { transform: translateY(0); } }
@keyframes rank-new { 0% { transform: scale(.97); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes movement-pulse { 0%,100% { transform: scale(1); } 45% { transform: scale(1.32); } }
@keyframes rank-flash { 0%,100% { background: linear-gradient(100deg, #f4fcf7, #effaf4); box-shadow: 0 0 0 0 #7ccbb0; } 50% { background: linear-gradient(100deg, #e1f9ec, #f6fffa); box-shadow: 0 0 0 8px #bdeed9; } }

.direct-panel { border-color: #c8e3d2; background: linear-gradient(150deg, #f5fcf7, #edfaf3); }
.search-panel input { background: #fffdfd; }
.signal { border-color: #cde7d8; background: #edf9f1; color: #31755d; }
.signal button { color: #4a9d7c; }
.signals { display: grid; gap: 10px; }
.keyword-category { padding-top: 9px; border-top: 1px solid #dceee3; }
.keyword-category:first-child { padding-top: 0; border-top: 0; }
.keyword-category h3 { margin: 0 0 6px; color: #34785f; font-size: 12px; letter-spacing: .07em; }
.keyword-groups { display: grid; gap: 7px; }
.keyword-group { padding: 8px; border: 1px solid #c9e4d4; border-radius: 10px; background: #f8fdf9; }
.keyword-group-heading { display: flex; align-items: center; justify-content: space-between; color: #2b7358; font-size: 12px; }
.keyword-remove { border: 0; background: transparent; color: #6e9784; font: inherit; font-size: 11px; cursor: pointer; }
.keyword-options { display: grid; gap: 4px; margin: 7px 0; }
.keyword-options label { display: flex; align-items: center; gap: 4px; color: #365a4a; font-size: 12px; cursor: pointer; }
.keyword-options input { width: auto; margin: 0; accent-color: #27966d; }
.keyword-options span { display: inline-grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: #dff3e7; color: #287a5d; font-size: 10px; font-weight: 800; }
.keyword-add-form { display: flex; gap: 5px; }
.keyword-create-form { display: flex; gap: 5px; margin-top: 7px; }
.keyword-add-form input { min-width: 0; padding: 5px 7px; font-size: 11px; }
.keyword-create-form input { min-width: 0; padding: 5px 7px; font-size: 11px; }
.keyword-add-form button, .keyword-create-form button { border: 1px solid #57a983; border-radius: 7px; background: #fff; color: #287a5d; padding: 4px 7px; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.process-panel { border-color: #d7eade; }
.log-row { border-bottom-color: #e4f1e9; }
.log-stage { color: #2b8765; }

.score-meter.cold { color: #2878a7; }
.score-meter.cold .score-track i { background: linear-gradient(90deg, #9ed5eb, #409fc9); }
.score-meter.cool { color: #187d9f; }
.score-meter.cool .score-track i { background: linear-gradient(90deg, #8edbcf, #28a9aa); }
.score-meter.warm { color: #b4781c; }
.score-meter.warm .score-track i { background: linear-gradient(90deg, #f4da76, #e6aa36); }
.score-meter.hot { color: #d86527; }
.score-meter.hot .score-track i { background: linear-gradient(90deg, #f5af58, #e06b31); }
.score-meter.fire { color: #d31f43; }
.score-meter.fire strong, .score-meter.fire .score-label { color: #d31f43; }
.score-meter.fire .score-track i { background: linear-gradient(90deg, #f27661, #d31f43); }
.score-meter.score-attention strong, .score-meter.score-attention .score-track { animation: score-attention .8s ease-in-out infinite; }
@keyframes score-attention { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 #d31f43); } 50% { opacity: .35; filter: drop-shadow(0 0 7px #d31f43); } }

.candidate-hover-detail { top: auto; right: auto; bottom: -4px; left: calc(100% + 14px); border: 2px solid #78be9c; border-radius: 16px; background: #effaf3; box-shadow: 0 18px 42px #28634735; }
.hover-title { color: #287a5c; }
.candidate-hover-detail dl > div { border-top-color: #dceee3; }
/* 緑のカード上でも、照合に使った文字だけは必ず赤で見分けられるようにする。 */
.match-highlight,
.candidate .match-highlight,
.candidate-summary .match-highlight,
.candidate .person .match-highlight,
.candidate-hover-detail .match-highlight,
.memo-entry .match-highlight {
  padding: 0 2px;
  border-radius: 3px;
  background: #fff0f1;
  color: #d31f43;
  font-weight: 800;
}
.keyword-options label:has(input:checked) { color: #c61f43; font-weight: 800; }
.keyword-options label:has(input:checked) span { background: #fff0f3; color: #c61f43; }
.candidate-hover-detail .memo { display: grid; gap: 8px; white-space: normal; }
.memo-entry { padding: 9px 10px; border: 1px solid #cfe6d8; border-left: 4px solid #60ae89; border-radius: 10px; background: #fff; color: #345347; line-height: 1.65; }
.memo-entry-label { display: block; margin-bottom: 4px; color: #27805e; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.speech-correction { display: inline-block; margin-top: 7px; padding: 3px 7px; border: 1px solid #bfe1cf; border-radius: 999px; background: #ebf8f0; color: #287b5d; font-size: 10px; font-weight: 800; }
.chat-message.operator .speech-correction { float: right; }

.view-tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.view-tab { border: 1px solid #cbe4d5; border-radius: 999px; padding: 9px 16px; background: #fbfffc; color: #527565; font: inherit; font-weight: 800; cursor: pointer; }
.view-tab.active { border-color: #2b966f; background: linear-gradient(135deg, #48b889, #237960); color: #fff; box-shadow: 0 5px 12px #2c8b6330; }
.database-view { padding-bottom: 20px; }
.database-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 4px 16px; }
.database-heading h2 { margin: 0; color: #29483b; font-size: 26px; }
.database-heading p:not(.eyebrow) { margin: 6px 0 0; color: #698174; }
.database-filter-panel { padding: 18px; }
.database-filters { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 12px; }
.database-filters label { color: #42705d; font-size: 12px; font-weight: 800; }
.database-filters input { margin-top: 5px; }
.database-filter-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.database-table-panel { margin-top: 16px; padding: 0; overflow: hidden; }
.database-table-wrap { overflow: auto; }
.database-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 12px; }
.database-table th { padding: 12px 14px; background: #eaf7ef; color: #3f765f; text-align: left; white-space: nowrap; }
.database-table td { max-width: 280px; padding: 12px 14px; border-top: 1px solid #e0eee5; color: #345547; vertical-align: top; }
.database-table tbody tr:hover { background: #f5fcf7; }
.database-table .db-case-id { color: #27825f; font-weight: 800; letter-spacing: .03em; }
.database-table .db-content { min-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.database-table .db-detail-button { padding: 6px 9px; font-size: 11px; white-space: nowrap; }
.database-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px; border-top: 1px solid #e0eee5; color: #527565; font-size: 12px; font-weight: 800; }
.database-pagination button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.database-detail-list { margin: 8px 0 0; }
.database-detail-list > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid #e0eee5; }
.database-detail-list dt { color: #547b6a; font-weight: 800; }
.database-detail-list dd { margin: 0; color: #345547; line-height: 1.65; white-space: pre-wrap; }
.database-memo { max-height: 330px; overflow: auto; padding-right: 6px; }

@media (max-width: 720px) {
  .app-shell { padding: 14px; }
  .panel, .caller-bar { border-radius: 16px; }
  .database-heading { align-items: flex-start; flex-direction: column; }
  .database-filters { grid-template-columns: 1fr; }
  .database-detail-list > div { grid-template-columns: 1fr; gap: 3px; }
  .candidate-hover-detail { top: auto; right: 12px; bottom: 12px; left: 12px; }
  .pinned-candidates { width: 100%; margin-bottom: 10px; overflow: auto; }
  .pinned-label { display: none; }
  .pinned-candidate { grid-template-columns: 14px minmax(92px, 1fr) auto; }
  .pinned-case { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .candidate.rank-up, .candidate.rank-down, .candidate.rank-new, .candidate.rank-up .movement, .candidate.rank-down .movement, .score-meter.score-attention strong, .score-meter.score-attention .score-track { animation: none; }
}

/* ファミリアの淡いオレンジ基調。検索一致の赤は意図的にここでは上書きしない。 */
.connection.live i { background: #dd9b68; box-shadow: 0 0 0 4px #ffead7; }
.pinned-candidates { border-color: #efd7c0; background: #fffdf9f2; box-shadow: 0 7px 18px #8a563018; }
.pinned-label, .pinned-rank { color: #a85e32; }
.pinned-candidate { border-color: #f0dfcf; color: #6e503d; }
.pinned-candidate:hover, .pinned-candidate.is-top { border-color: #dfa373; background: #fff7ee; }
.pinned-name { color: #4a382c; }
.pinned-case, .pinned-meta { color: #9a8170; }
.caller-bar { border-color: #f0dac2; background: linear-gradient(100deg, #fff7ee, #fffaf5); box-shadow: 0 8px 24px #a05f2910; }
.caller-status { color: #8a593b; }
input { border-color: #edd7c0; background: #fffefd; }
input:focus { border-color: #db9a66; outline-color: #ffe3c9; }
.panel { border-color: #f0dfd0; box-shadow: 0 8px 22px #7d4c270c; }
.panel h2, .candidate .person, .case-id, .database-heading h2 { color: #4b392d; }
.badge { background: #fff1e4; color: #987762; }
.badge.accent { background: #ffe8d3; color: #a95e32; }
.role-switch { border-color: #f1e0d2; background: #fffdfa; }
.role { border-color: #edd8c4; color: #7a5d49; }
.role.active, .primary, .speech-entry button { border-color: #c77847; background: linear-gradient(135deg, #dea16d, #bd7043); box-shadow: 0 5px 12px #b56c3330; }
.secondary, .ghost { border-color: #e8cfb8; color: #9a5d36; background: #fffdfa; }
.audio-actions select { border-color: #e8cfb8; background: #fffdfa; color: #885e44; }
.chat-keyword-stream { border-color: #f1dbc6; background: #fff8f0; }
.chat-keyword-stream p, .speaker, .chat-message.operator .speaker { color: #ad6539; }
.utterance { border-bottom-color: #f4e5d8; }
.transcript .chat-message { border-color: #f0dfd1; box-shadow: 0 3px 8px #7f4d280b; }
.transcript .chat-message.customer { background: linear-gradient(135deg, #fff6ec, #fffdf9); }
.transcript .chat-message.operator { border-color: #ead8c7; background: linear-gradient(135deg, #fff9f1, #fffefd); }
.chat-message .chat-text { color: #4c3b30; }
.ranking-note, .candidate-summary, .candidate .details, .database-heading p:not(.eyebrow) { color: #8b7667; }
.candidate { border-color: #efdfd3; border-left-color: #e5c6aa; box-shadow: 0 2px 7px #7d4e2b0a; }
.candidate.top { border-left-color: #d68a55; background: linear-gradient(100deg, #fff8f0, #fffdf9); }
.primary-heading { background: #fff1e3; border-color: #f2d8bd; color: #a85e32; }
.reference-heading { background: #fbf6ef; border-color: #eadfce; color: #8d7561; }
.reference-candidate { border-left-color: #d8c1aa; background: #fffefd; }
.reference-mark { color: #9a6b47; background: #fff0df; }
.rank-change { color: #9b8776; }
.rank-change strong { background: #fff0df; color: #9b623f; }
.rank-change.up strong { background: #ffe3cb; color: #b65f2d; box-shadow: 0 0 0 4px #fff5eb; }
.rank-change.down strong { background: #f6ebe1; color: #9c7660; }
.rank-relocating { box-shadow: 0 10px 24px #bd764b2b; }
.candidate button { color: #ad6438; }
.movement { color: #c98b5c; }
.chat-keyword { border-color: #f2b9c6; background: #fff6f8; color: #c61f43; }
.signal { border-color: #f0dac4; background: #fff5ea; color: #916347; }
.signal button { color: #bd7649; }
.keyword-category { border-top-color: #f1e0d1; }
.keyword-category h3, .keyword-group-heading { color: #9d603b; }
.keyword-group { border-color: #efd8c2; background: #fffdf9; }
.keyword-options label { color: #644c3d; }
.keyword-options input { accent-color: #c77847; }
.keyword-options span { background: #ffead6; color: #ae6538; }
.keyword-add-form button, .keyword-create-form button { border-color: #d59463; color: #a15f37; }
.process-panel { border-color: #f0dfd1; }
.log-row { border-bottom-color: #f3e5d9; }
.log-stage { color: #ad6539; }
.direct-panel { border-color: #f1d6ba; background: linear-gradient(150deg, #fff9f2, #fff1e3); }
.candidate-hover-detail { border-color: #dcab7f; background: #fff9f2; box-shadow: 0 18px 42px #9b5c3030; }
.hover-title { color: #a45e35; }
.candidate-hover-detail dl > div { border-top-color: #f0dfd1; }
.memo-entry { border-color: #efd9c5; border-left-color: #d99a69; background: #fffefd; color: #564033; }
.memo-entry-label { color: #ad6539; }
.speech-correction { border-color: #efcfb2; background: #fff2e5; color: #a15f37; }
.view-tab { border-color: #ecd6c0; background: #fffdfa; color: #7b604c; }
.view-tab.active { border-color: #c97947; background: linear-gradient(135deg, #dfa16e, #bd7043); box-shadow: 0 5px 12px #b46a3230; }
.database-filters label { color: #805d45; }
.database-table th { background: #fff0df; color: #95613f; }
.database-table td { border-top-color: #f0e2d5; color: #594437; }
.database-table tbody tr:hover { background: #fff8f0; }
.database-table .db-case-id { color: #ad6539; }