/*
 * CSP style-src 拿掉 unsafe-inline 專用修正檔。
 * 內容為原本散落在樣板 style="..." 屬性、或 JS .css()/.style. 動態組出的
 * inline style，改用 class 表達後集中收斂於此，方便追蹤與日後回退。
 *
 * chat.jsp 刻意把這個檔案排在 bootstrap.css/bs3.css/custom.css/a11y.css 之後載入，
 * 讓這裡的規則在 specificity 相同時靠載入順序就贏，不用每條都加 !important。
 * 少數規則仍然帶 !important，是因為對方規則的 specificity 本來就比較高（不是靠順序贏
 * 得了的），拿掉順序也贏不了，各條規則旁的註解有寫明原因。
 */

/* ===== 2.4 chat.jsp 防 FOUC/clickjacking 閃爍（原 <style> 內嵌區塊） ===== */
html:not(.frame-guard-ready) {
  display: none;
}

/* ===== 4.2 RatingView.js 星星評分（原 JS 動態組 background:url(...)） ===== */
.rating-item.is-off {
  background: url('../img/star.png') 0% 0% / contain;
}

/* ===== 2.5 siriwave.js 語音輸入波形（原 canvas.style.width/height 動態賦值） ===== */
/* 高度 120 對應 STT2.js _resetWaveform() 傳入的 height:120 常數；寬度交給 #waveform-container 撐滿。
   .siriwave-canvas--cover 對應原本 opt.cover===true 分支（目前站內沒有呼叫端會傳，保留對稱性避免日後
   有人加上 cover:true 時悄悄變成跟非 cover 一樣的固定高度） */
.siriwave-canvas {
  display: block;
  width: 100%;
  height: 120px;
}

.siriwave-canvas.siriwave-canvas--cover {
  height: 100%;
}

/* ===== 2.3 通用顯示/隱藏切換（原 jQuery .hide()/.show()/.toggle()、.css('display',...)、
   el.style.display、Backbone.Stickit 的 visible 綁定預設行為） =====
   不新增 class：直接沿用 bs3.css 既有的 .hide{display:none!important}（本站樣板其他地方
   已經在用，例如 ChatTemplate.htm 的 <label class="hide">），JS 端一律呼叫
   addClass('hide')/removeClass('hide')/toggleClass('hide', ...)，不要再叫 is-hidden。 */

/* ===== 2.3 ChatView.js 初始化根字級（原 document.documentElement.style.fontSize） =====
   !important 必要：bs3.css 也對 html 設定 font-size:10px，specificity 相同，載入順序
   雖然贏了但用 !important 多一層保險，避免日後有人在 bs3.css 之後又插一個等強度的規則。 */
html {
  font-size: 1rem !important;
}

/* ===== 2.3 ChatView.js / TalkingView.js 字級大中小切換（原 .css('fontSize', ...)） ===== */
/* class 加在 <body>（ChatView 的 el），透過後代選擇器套用到所有訊息內容，含日後動態插入的訊息。
   !important 必要：custom.css 的 .message-row.by-user .msg{font-size:1.125rem}（自己發送的
   訊息泡泡）specificity (0,3,0) 比這裡的 (0,2,1) 高，沒有 !important 使用者自己的訊息字級
   切換會失效。 */
body.word-size-big .msg,
body.word-size-big span.question-clickable {
  font-size: 2rem !important;
}

body.word-size-mid .msg,
body.word-size-mid span.question-clickable {
  font-size: 1.125rem !important;
}

body.word-size-small .msg,
body.word-size-small span.question-clickable {
  font-size: 0.75rem !important;
}

/* ===== 2.2 RichMessage.js / TalkingView.js 動態組出的 inline style ===== */
.buttons-message-container--fixed,
.buttons-message-block--fixed {
  width: 500px !important;
}

/* .buttons-message-block ul 預設 margin-top 已是 0（見 custom.css），只有 Messenger
   附件按鈕這個情境需要 5px，其餘沿用預設，不需要額外 class。
   注意：class 不能叫 mt-5——bootstrap.css 已定義 .mt-5{margin-top:3rem !important}
   這個 spacing utility，會直接蓋掉這裡的 5px，所以改用不會撞名的類名。 */
.buttons-message-block ul.rm-actions-mt5 {
  margin-top: 5px;
}

.swiper-control-button.qr-nav {
  top: calc(90% - 54px);
}

.swiper-container--quickreply {
  clear: both;
  margin-top: 10px;
}

.rich-message-box {
  border-radius: 0 12px 12px 12px;
  background-color: #eeffe8;
  color: #4C4C4C;
  padding: 10px 20px;
  line-height: 1.5em;
  word-break: break-word;
  word-wrap: break-word;
  border: 0px solid #1a8601;
  margin-bottom: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  white-space: normal;
}

.rich-message-file-link {
  width: 100%;
}

/* !important 必要：custom.css 的 .message-row .msg img{max-width:100%} specificity
   (0,2,1) 高於這個單一 class，沒有 !important 縮圖會被撐到訊息泡泡寬度
    */
.rich-message-thumbnail {
  height: auto;
  width: auto;
  max-height: 120px !important;
  max-width: 120px !important;
}

/* !important：custom.css 的 .message-row{margin-bottom:40px} specificity 相同 */
.message-row--tight-datetime {
  margin-bottom: -12px !important;
}

/* ===== 2.1 ChatTemplate.htm 樣板內寫死的 style="..." ===== */
.exit-content {
  margin: 30px 0px;
}

.a11y-badge-link {
  margin-right: 8px;
}

#announce {
  vertical-align: middle;
}

.chat-controls-row {
  margin-bottom: 6px;
}

/* !important：bs3.css 的 .btn{font-size:14px} specificity 相同 */
.big-word {
  font-size: 1.25rem !important;
}

.mid-word {
  font-size: 1rem !important;
}

.small-word {
  font-size: 0.75rem !important;
}

/* 共用工具 class：優先直接沿用 bootstrap.css 既有的 .text-center/.text-left/.w-100
   （都已經是 !important，比自己重新定義一個較弱的版本安全），這裡只放沒有現成 utility
   可用、或需要精確控制數值的少量 class。 */
.u-list-cjk {
  list-style-type: cjk-ideographic;
}

.u-color-red {
  color: red;
}

.u-color-blueviolet {
  color: blueviolet;
}

/* !important：custom.css 的 .help-block{color:red} specificity 相同 */
.u-color-error {
  color: #d32f2f !important;
}

.u-w-10 {
  width: 10px;
}

/* !important 必要：custom.css 的 .modal .modal-content .form-group.inline label 規則
   specificity 遠高於這個單一 class，沒有 !important 完全蓋不過去 */
.u-minw-auto {
  min-width: auto !important;
}

/* !important 必要：custom.css 的
   .modal .modal-content .form-group input:not([type=radio]):not([type=checkbox])
   規則 specificity (0,5,1) 遠高於這個單一 class，會把 4 個信用卡卡號輸入框撐成滿版
    */
.card-number-input {
  width: calc(25% - 11px) !important;
  min-width: 70px;
}

/* ===== 2.1 OpenEndedTemplate.htm / SurveyTemplate.htm / RatingTemplate.htm ===== */
#question {
  text-align: center;
  font-size: 16px;
}

#answer {
  resize: none;
  width: 100%;
}

/* ===== 2.1 TalkingTemplate.htm ===== */
#username {
  text-align: center;
}

/* ===== Bootstrap Modal（assets/js/intumit-bs4.js）開關機制不需要另外補 CSS =====
 * CSP style-src 只擋 style 屬性本身（HTML 標記寫死的 style="..." 或
 * el.setAttribute('style', ...)），不擋透過 CSSOM 設定樣式（el.style.x = ...、
 * .style.setProperty()、.style.cssText =；jQuery .css() 也是走這條路），所以
 * Bootstrap 用 this._element.style.display 開關 Modal 的機制不受影響。
 * 另外 bs3.css 已有全域 .show{display:block!important} 工具 class（見該檔 responsive
 * utilities 區塊），Modal 顯示時本來就會 classList.add('show')，這條規則本身也足以
 * 讓 Modal 顯示，雙重保險下這裡不需要額外補 .modal.show 規則。
 */