@font-face{font-family:'Noto Sans Cham';src:url('https://fonts.gstatic.com/s/notosanscham/v18/raxvHi5eM2uS65uH5-EIB8rX.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
.icham-new-wrap{--icham-border:#dde6f0;--icham-text:#243244;--icham-muted:#667085;--icham-card:#fff;--icham-btn:#fff;--icham-btn-hover:#f7f8fa;--icham-active:#eef3f8;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;width:100%;max-width:760px;margin:14px auto;padding:0 10px;box-sizing:border-box;color:var(--icham-text)}
.icham-new-card{background:var(--icham-card);border:1px solid var(--icham-border);border-radius:18px;box-shadow:0 10px 28px rgba(23,55,93,.08);overflow:hidden}
.icham-new-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 10px;border-bottom:1px solid #edf1f5;background:#fff!important}
.icham-new-title{font-size:16px;font-weight:750;letter-spacing:.01em;color:#263646;display:flex;align-items:center;gap:8px;min-width:0}.icham-new-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icham-new-badge{font-size:12px;font-weight:700;color:#44556b;background:#fff!important;border:1px solid #e0e6ee;border-radius:999px;padding:4px 8px;white-space:nowrap}
.icham-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;background:#fff!important}.icham-btn-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.icham-new-wrap button.icham-btn,.icham-new-wrap .icham-btn{appearance:none!important;-webkit-appearance:none!important;border:1px solid #dbe2ea!important;background:#fff!important;background-color:#fff!important;background-image:none!important;color:#263646!important;border-radius:12px!important;min-height:34px!important;padding:7px 10px!important;font-size:13px!important;font-weight:700!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;cursor:pointer!important;box-shadow:0 1px 2px rgba(16,24,40,.04)!important;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease!important;-webkit-tap-highlight-color:transparent!important;text-shadow:none!important}
.icham-new-wrap button.icham-btn:hover,.icham-new-wrap .icham-btn:hover{background:#f7f8fa!important;background-color:#f7f8fa!important;border-color:#cbd5e1!important;box-shadow:0 3px 8px rgba(15,23,42,.08)!important;color:#1f2a37!important}
.icham-new-wrap button.icham-btn:active,.icham-new-wrap .icham-btn:active{transform:translateY(1px)!important;box-shadow:none!important;background:#f1f5f9!important}.icham-new-wrap button.icham-btn:focus,.icham-new-wrap .icham-btn:focus{outline:2px solid rgba(100,116,139,.22)!important;outline-offset:2px!important}.icham-new-wrap .icham-btn svg{width:15px!important;height:15px!important;stroke-width:2!important;flex:0 0 auto!important;color:currentColor!important;stroke:currentColor!important;fill:none!important}
.icham-new-wrap .icham-mode-chip{border-color:#cbd5e1!important;background:#fff!important;color:#263646!important}.icham-new-wrap .icham-mode-chip.is-active{background:#eef3f8!important;border-color:#94a3b8!important;color:#1f2937!important;box-shadow:inset 0 0 0 1px rgba(148,163,184,.15)!important}.icham-status{font-size:12px;color:var(--icham-muted);padding:0 14px 8px;text-align:right}
.icham-textarea-wrap{padding:0 12px 12px}.icham-new-wrap #txtCham{width:100%;min-height:245px;height:245px;font-family:'Noto Sans Cham',Arial,sans-serif!important;font-size:18px;line-height:1.55;padding:15px;border:1.5px solid #cbd5e1!important;border-radius:14px;box-sizing:border-box;resize:vertical;background:#fff!important;color:#152334!important;box-shadow:inset 0 1px 2px rgba(16,24,40,.03);transition:border-color .2s,box-shadow .2s,background .2s}.icham-new-wrap #txtCham:focus{outline:none;border-color:#94a3b8!important;box-shadow:0 0 0 4px rgba(148,163,184,.16),inset 0 1px 2px rgba(16,24,40,.03)!important}.icham-new-wrap #txtCham::placeholder{color:#8da0b5}
.icham-new-wrap .icham-mode-note{font-size:12px;color:#667085;margin-left:auto;padding:0 4px}.icham-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(18px);background:#182638;color:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:999999}.icham-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.icham-new-wrap.icham-dark{--icham-text:#eef6ff;--icham-muted:#a9bed5;--icham-card:#132033;--icham-border:#243b59;color:var(--icham-text)}.icham-new-wrap.icham-dark .icham-new-card{background:#132033;border-color:#243b59}.icham-new-wrap.icham-dark .icham-new-head,.icham-new-wrap.icham-dark .icham-toolbar{background:#132033!important;border-color:#263f60}.icham-new-wrap.icham-dark button.icham-btn,.icham-new-wrap.icham-dark .icham-btn{background:#182a43!important;border-color:#2c4768!important;color:#edf6ff!important}.icham-new-wrap.icham-dark button.icham-btn:hover,.icham-new-wrap.icham-dark .icham-btn:hover{background:#203856!important;border-color:#4d78a8!important}.icham-new-wrap.icham-dark #txtCham{background:#0f1b2b!important;color:#f7fbff!important;border-color:#345477!important}.icham-new-wrap.icham-dark #txtCham::placeholder{color:#8198b3}.icham-new-wrap.icham-dark .icham-new-badge,.icham-new-wrap.icham-dark .icham-mode-chip{background:#172b45!important;border-color:#345477!important;color:#d8eaff!important}.icham-new-wrap.icham-dark .icham-mode-chip.is-active{background:#203044!important;border-color:#7c93ad!important;color:#fff!important}
@media(max-width:520px){.icham-new-wrap{padding:0 6px;margin:8px auto}.icham-new-head{padding:12px 10px}.icham-new-title{font-size:14px}.icham-toolbar{padding:9px 10px;gap:8px}.icham-btn-group{gap:6px}.icham-new-wrap button.icham-btn,.icham-new-wrap .icham-btn{min-height:32px!important;padding:7px 8px!important;font-size:12px!important;border-radius:10px!important}.icham-textarea-wrap{padding:0 10px 10px}.icham-new-wrap #txtCham{min-height:230px;height:230px;font-size:17px;padding:13px}}

/* v1.0.3 refinements: no top title, one A± button, bottom metadata line */
.icham-new-card{padding-top:0!important}
.icham-new-head,.icham-new-title{display:none!important}
.icham-bottom-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px 12px;flex-wrap:wrap;background:#fff!important}
.icham-bottom-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.icham-bottom-meta .icham-new-badge{font-size:11px!important;padding:4px 8px!important;background:#fff!important;color:#44556b!important;border-color:#e0e6ee!important}
.icham-bottom-meta .icham-mode-note{font-size:12px!important;color:#667085!important;margin:0!important;padding:0!important;white-space:nowrap}
.icham-bottom-meta .icham-status{padding:0!important;text-align:right!important;margin-left:auto!important;white-space:nowrap}
.icham-font-wrap{position:relative;display:inline-flex}.icham-font-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid #dbe2ea;border-radius:12px;box-shadow:0 10px 24px rgba(16,24,40,.14);padding:5px;z-index:99;gap:4px}.icham-font-wrap.is-open .icham-font-menu{display:flex}.icham-font-choice{appearance:none!important;-webkit-appearance:none!important;border:1px solid #dbe2ea!important;background:#fff!important;color:#263646!important;border-radius:9px!important;min-width:46px!important;min-height:30px!important;font-size:12px!important;font-weight:800!important;cursor:pointer!important}.icham-font-choice:hover{background:#f7f8fa!important}
.icham-new-wrap.icham-dark .icham-bottom-meta{background:#132033!important}.icham-new-wrap.icham-dark .icham-font-menu{background:#132033;border-color:#2c4768}.icham-new-wrap.icham-dark .icham-font-choice{background:#182a43!important;border-color:#2c4768!important;color:#edf6ff!important}.icham-new-wrap.icham-dark .icham-bottom-meta .icham-new-badge{background:#172b45!important;border-color:#345477!important;color:#d8eaff!important}.icham-new-wrap.icham-dark .icham-bottom-meta .icham-mode-note{color:#a9bed5!important}
@media(max-width:520px){.icham-bottom-meta{padding:0 10px 10px}.icham-bottom-meta .icham-status{font-size:11px}.icham-bottom-meta .icham-new-badge,.icham-bottom-meta .icham-mode-note{font-size:11px!important}}

/* v1.0.8 compact top utility buttons + modals */
.icham-top-row{width:100%;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:nowrap!important}
.icham-left-tools,.icham-right-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.icham-right-tools{margin-left:auto;justify-content:flex-end}.icham-new-wrap .icham-icon-btn{width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;border-radius:10px!important}.icham-new-wrap .icham-icon-btn svg{width:14px!important;height:14px!important}.icham-new-wrap .icham-btn svg{fill:none!important;stroke:currentColor!important}.icham-new-wrap button.icham-btn,.icham-new-wrap .icham-btn{background:#fff!important;background-color:#fff!important;color:#2f3a48!important}.icham-new-wrap .icham-bottom-toolbar .icham-btn{min-height:31px!important;padding:6px 8px!important;font-size:12px!important}.icham-new-wrap .icham-bottom-toolbar .icham-btn svg{width:13px!important;height:13px!important}.icham-modal{position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:999999;display:flex;align-items:center;justify-content:center;padding:16px}.icham-modal-box{position:relative;width:min(860px,96vw);max-height:86vh;overflow:auto;background:#fff;color:#263646;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 22px 60px rgba(15,23,42,.22);padding:18px}.icham-modal-box h3{font-size:18px;margin:0 44px 14px 0}.icham-modal-body{font-size:14px;line-height:1.55}.icham-modal-x{position:absolute;right:10px;top:8px;width:30px;height:30px;border:1px solid #e2e8f0!important;background:#fff!important;border-radius:999px!important;font-size:20px;line-height:1;cursor:pointer;color:#475569!important}.icham-guide-link{display:inline-flex;padding:7px 10px;border:1px solid #dbe2ea;border-radius:10px;text-decoration:none;font-weight:700;color:#263646;background:#fff}.icham-sample{font-family:'Noto Sans Cham',Arial,sans-serif}.icham-phrase-add{display:flex;gap:8px;margin-bottom:12px}.icham-phrase-add input{flex:1;min-width:0;border:1px solid #dbe2ea;border-radius:10px;padding:9px 10px;font-size:14px;background:#fff!important}.icham-phrase-list{display:grid;gap:7px}.icham-phrase-item{display:flex;gap:6px;align-items:center}.icham-phrase-item button:first-child{flex:1;text-align:left;border:1px solid #e2e8f0;background:#fff!important;border-radius:10px;padding:8px 10px;cursor:pointer;color:#263646}.icham-phrase-del{width:30px;height:30px;border:1px solid #e2e8f0!important;background:#fff!important;border-radius:999px!important;color:#64748b!important;cursor:pointer}.icham-empty{color:#667085;margin:6px 0}.icham-new-wrap.icham-dark .icham-modal-box{background:#132033;color:#eef6ff;border-color:#243b59}.icham-new-wrap.icham-dark .icham-modal-x,.icham-new-wrap.icham-dark .icham-guide-link,.icham-new-wrap.icham-dark .icham-phrase-add input,.icham-new-wrap.icham-dark .icham-phrase-item button:first-child,.icham-new-wrap.icham-dark .icham-phrase-del{background:#182a43!important;border-color:#2c4768!important;color:#edf6ff!important}
@media(max-width:520px){.icham-top-row{gap:6px!important}.icham-left-tools,.icham-right-tools{gap:5px}.icham-new-wrap .icham-icon-btn{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important}.icham-new-wrap .icham-mode-chip{min-height:30px!important;padding:6px 7px!important;font-size:11px!important}.icham-new-wrap .icham-bottom-toolbar .icham-btn{padding:6px 6px!important;font-size:11px!important;gap:3px!important}.icham-new-wrap .icham-bottom-toolbar .icham-btn svg{width:12px!important;height:12px!important}.icham-bottom-meta{font-size:11px;padding:0 10px 10px!important}.icham-modal{padding:10px}.icham-modal-box{padding:15px;border-radius:16px}}


/* v1.0.9 Help + compact top tools */
.icham-new-wrap .icham-font-main{font-size:12px!important;font-weight:800!important;letter-spacing:-.02em!important}
.icham-help-panel{position:relative;overflow:hidden;border-radius:14px;padding:4px 2px 8px;background:#fff}
.icham-help-panel:before{content:"";position:absolute;right:-160px;top:18px;width:720px;height:720px;background:#f1f1f1;border-radius:50%;z-index:0;pointer-events:none}
.icham-help-panel>*{position:relative;z-index:1}.icham-help-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;flex-wrap:wrap}.icham-lang-pills{display:flex;gap:8px}.icham-lang-pills a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:34px;border-radius:999px;background:#fff!important;border:1px solid #dbe2ea;color:#253040;text-decoration:none;font-weight:800;font-size:13px}.icham-help-section{margin:0 0 22px;padding:0 4px}.icham-help-section h2{font-size:22px;line-height:1.2;margin:0 0 18px;color:#182333}.icham-help-section h4{font-size:15px;line-height:1.35;margin:18px 0 10px;color:#182333}.icham-help-section ul{margin:0 0 12px 20px;padding-left:18px}.icham-help-section li{font-size:15px;line-height:1.55;margin:5px 0}.icham-help-section code{font-size:15px;background:#f4f4f5;border:1px solid #e5e7eb;border-radius:6px;padding:1px 5px;color:#666}.icham-guide-link{background:#fff!important}.icham-modal-help .icham-modal-x{width:34px!important;height:34px!important;background:#fff!important;border-color:#dbe2ea!important;color:#253040!important}.icham-new-wrap.icham-dark .icham-help-panel{background:#132033}.icham-new-wrap.icham-dark .icham-help-panel:before{background:#1a2b42}.icham-new-wrap.icham-dark .icham-help-section h2,.icham-new-wrap.icham-dark .icham-help-section h4{color:#f2f7ff}.icham-new-wrap.icham-dark .icham-lang-pills a,.icham-new-wrap.icham-dark .icham-help-section code{background:#182a43!important;border-color:#2c4768!important;color:#edf6ff!important}
@media(max-width:620px){.icham-modal-box{width:96vw!important;padding:13px!important}.icham-help-panel:before{right:-280px;top:80px;width:620px;height:620px}.icham-help-section h2{font-size:18px}.icham-help-section h4{font-size:14px}.icham-help-section li{font-size:14px}.icham-help-top{align-items:flex-start}.icham-guide-link{font-size:13px;padding:7px 9px!important}.icham-lang-pills a{min-width:38px;height:31px;font-size:12px}}

<style>

/* === Phrase modal ultra layout v1.0.10 === */
.icham-phrase-modal,
#ichamPhraseModal,
.cham-phrase-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(2px);
}
.icham-phrase-modal.is-open,
#ichamPhraseModal.is-open,
.cham-phrase-modal.is-open {
  display: flex;
}
.icham-phrase-box,
#ichamPhraseBox,
.cham-phrase-box {
  width: min(940px, calc(100vw - 24px));
  max-height: min(82vh, 720px);
  overflow: auto;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 24px;
  padding: 26px 30px 30px;
  box-shadow: 0 24px 70px rgba(15,23,42,.22);
  box-sizing: border-box;
  position: relative;
}
.icham-phrase-title,
.cham-phrase-title {
  margin: 0 60px 24px 0;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 800;
  color: #116fc8;
}
.icham-phrase-close,
.cham-phrase-close,
#ichamPhraseClose {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #dbeafe;
  background: #fff;
  color: #1f2937;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
}
.icham-phrase-tools,
.cham-phrase-tools {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}
.icham-phrase-search-wrap,
.cham-phrase-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 56px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: 0 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
  box-sizing: border-box;
}
.icham-phrase-search-icon {
  font-size: 20px;
  color: #64748b;
  flex: 0 0 auto;
}
.icham-phrase-search,
.cham-phrase-search,
#ichamPhraseSearch {
  width: 100%;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 18px;
  color: #111827;
}
.icham-phrase-search::placeholder,
#ichamPhraseSearch::placeholder {
  color: #777;
}
.icham-phrase-search-btn,
.cham-phrase-search-btn,
#ichamPhraseSearchBtn,
.icham-phrase-add,
.cham-phrase-add,
#ichamPhraseAddBtn {
  height: 56px;
  border-radius: 18px;
  padding: 0 22px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.icham-phrase-search-btn,
#ichamPhraseSearchBtn {
  border: 1px solid #2fa7f2;
  background: #35aaf3;
  color: #fff;
}
.icham-phrase-add,
#ichamPhraseAddBtn {
  border: 1px solid #dbeafe;
  background: #fff;
  color: #111827;
}
.icham-phrase-grid,
.cham-phrase-grid,
#ichamPhraseGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.icham-phrase-card,
.cham-phrase-card {
  min-height: 58px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: #fff;
  padding: 15px 50px 15px 16px;
  box-sizing: border-box;
  position: relative;
  font-size: 18px;
  line-height: 1.35;
  color: #111827;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15,23,42,.035);
  word-break: break-word;
}
.icham-phrase-card:hover,
.cham-phrase-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 9px 24px rgba(15,23,42,.07);
}
.icham-phrase-card .phrase-cham,
.cham-phrase-card .phrase-cham {
  font-family: 'Noto Sans Cham', Arial, sans-serif;
}
.icham-phrase-card .phrase-remove,
.cham-phrase-card .phrase-remove {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 20px;
  line-height: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icham-phrase-card[data-fixed="true"] .phrase-remove,
.cham-phrase-card[data-fixed="true"] .phrase-remove {
  display: none !important;
}
.icham-add-row {
  grid-column: 1 / -1;
  display: none;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  margin-bottom: 4px;
}
.icham-add-row.is-open {
  display: grid;
}
.icham-add-row input {
  height: 48px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 0 14px;
  font-size: 16px;
  outline: 0;
}
.icham-add-row button {
  height: 48px;
  border-radius: 14px;
  border: 1px solid #2fa7f2;
  background: #35aaf3;
  color: #fff;
  font-weight: 800;
  padding: 0 18px;
  cursor: pointer;
}
@media (max-width: 640px) {
  .icham-phrase-box,
  #ichamPhraseBox,
  .cham-phrase-box {
    width: calc(100vw - 16px);
    padding: 20px 14px 18px;
    border-radius: 18px;
  }
  .icham-phrase-title,
  .cham-phrase-title {
    font-size: 21px;
    margin-bottom: 18px;
  }
  .icham-phrase-close,
  .cham-phrase-close,
  #ichamPhraseClose {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
  .icham-phrase-tools,
  .cham-phrase-tools {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .icham-phrase-search-wrap,
  .cham-phrase-search-wrap,
  .icham-phrase-search-btn,
  .cham-phrase-search-btn,
  #ichamPhraseSearchBtn,
  .icham-phrase-add,
  .cham-phrase-add,
  #ichamPhraseAddBtn {
    height: 46px;
    border-radius: 14px;
    font-size: 15px;
  }
  .icham-phrase-grid,
  .cham-phrase-grid,
  #ichamPhraseGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .icham-phrase-card,
  .cham-phrase-card {
    min-height: 52px;
    font-size: 16px;
    border-radius: 14px;
    padding: 13px 44px 13px 14px;
  }
  .icham-add-row,
  .icham-add-row.is-open {
    grid-template-columns: 1fr;
  }
}

</style>

<script>

/* === Phrase modal ultra behavior v1.0.10 === */
(function(){
  if (window.__ichamPhraseUltraPatch1010) return;
  window.__ichamPhraseUltraPatch1010 = true;

  const FIXED = [
    { latin: "urang", cham: "ꨂꨣꩃ", fixed: true },
    { latin: "ramawan", cham: "ꨣꨟꨥꩆ", fixed: true },
    { latin: "cam", cham: "ꨌꩌ", fixed: true },
    { latin: "adei kamei cam drei", cham: "", fixed: true }
  ];

  const STORE_KEY = "icham_user_phrases_v1010";

  function loadUserPhrases(){
    try { return JSON.parse(localStorage.getItem(STORE_KEY) || "[]"); }
    catch(e){ return []; }
  }
  function saveUserPhrases(list){
    try { localStorage.setItem(STORE_KEY, JSON.stringify(list)); } catch(e){}
  }
  function getTextarea(){
    return document.querySelector("#txtCham, .icham-textarea, textarea");
  }
  function insertPhrase(p){
    const ta = getTextarea();
    if (!ta) return;
    const text = p.cham ? (p.latin + " / " + p.cham) : p.latin;
    const start = ta.selectionStart || 0;
    const end = ta.selectionEnd || 0;
    const before = ta.value.slice(0, start);
    const after = ta.value.slice(end);
    const addSpaceBefore = before && !/\s$/.test(before) ? " " : "";
    const addSpaceAfter = after && !/^\s/.test(after) ? " " : "";
    ta.value = before + addSpaceBefore + text + addSpaceAfter + after;
    const pos = (before + addSpaceBefore + text + addSpaceAfter).length;
    ta.focus();
    try { ta.setSelectionRange(pos, pos); } catch(e){}
    ta.dispatchEvent(new Event("input", {bubbles:true}));
  }
  function ensureModal(){
    let modal = document.querySelector("#ichamPhraseModal");
    if (modal) return modal;

    modal = document.createElement("div");
    modal.id = "ichamPhraseModal";
    modal.className = "icham-phrase-modal";
    modal.innerHTML = `
      <div id="ichamPhraseBox" class="icham-phrase-box" role="dialog" aria-modal="true" aria-label="Phrase">
        <button id="ichamPhraseClose" class="icham-phrase-close" type="button" aria-label="Close">×</button>
        <h2 class="icham-phrase-title">Phrase / Cụm từ</h2>

        <div class="icham-phrase-tools">
          <label class="icham-phrase-search-wrap">
            <span class="icham-phrase-search-icon">⌕</span>
            <input id="ichamPhraseSearch" class="icham-phrase-search" type="search" placeholder="Search phrase..." />
          </label>
          <button id="ichamPhraseSearchBtn" class="icham-phrase-search-btn" type="button">Search</button>
          <button id="ichamPhraseAddBtn" class="icham-phrase-add" type="button">+ Add Phrase</button>
        </div>

        <div id="ichamAddRow" class="icham-add-row">
          <input id="ichamAddLatin" type="text" placeholder="Latin phrase" />
          <input id="ichamAddCham" type="text" placeholder="Cham Unicode (optional)" />
          <button id="ichamSavePhrase" type="button">Add</button>
        </div>

        <div id="ichamPhraseGrid" class="icham-phrase-grid"></div>
      </div>
    `;
    document.body.appendChild(modal);
    return modal;
  }
  function cardHTML(p, index, fixed){
    const cham = p.cham ? ` / <span class="phrase-cham">${p.cham}</span>` : "";
    return `<div class="icham-phrase-card" data-index="${index}" data-fixed="${fixed ? "true":"false"}">
      <span>${p.latin}${cham}</span>
      ${fixed ? "" : `<button type="button" class="phrase-remove" aria-label="Delete phrase">×</button>`}
    </div>`;
  }
  function render(){
    const modal = ensureModal();
    const grid = modal.querySelector("#ichamPhraseGrid");
    const q = (modal.querySelector("#ichamPhraseSearch").value || "").trim().toLowerCase();
    const user = loadUserPhrases();
    const all = FIXED.concat(user.map(x => ({...x, fixed:false})));
    const filtered = all.filter(p => !q || (p.latin + " " + (p.cham || "")).toLowerCase().includes(q));
    grid.innerHTML = filtered.map((p, i) => cardHTML(p, i, !!p.fixed)).join("");
    grid.querySelectorAll(".icham-phrase-card").forEach((card, i) => {
      const p = filtered[i];
      card.addEventListener("click", (ev) => {
        if (ev.target && ev.target.classList.contains("phrase-remove")) return;
        insertPhrase(p);
      });
      const del = card.querySelector(".phrase-remove");
      if (del) {
        del.addEventListener("click", (ev) => {
          ev.stopPropagation();
          const users = loadUserPhrases();
          const idx = users.findIndex(x => x.latin === p.latin && (x.cham || "") === (p.cham || ""));
          if (idx >= 0) {
            users.splice(idx, 1);
            saveUserPhrases(users);
            render();
          }
        });
      }
    });
  }
  function openPhrase(){
    const modal = ensureModal();
    render();
    modal.classList.add("is-open");
    setTimeout(()=> modal.querySelector("#ichamPhraseSearch")?.focus(), 50);
  }
  function closePhrase(){
    const modal = document.querySelector("#ichamPhraseModal");
    if (modal) modal.classList.remove("is-open");
  }

  document.addEventListener("click", function(e){
    const phraseBtn = e.target.closest("[data-action='phrase'], .icham-btn-phrase, #ichamPhraseBtn, .phrase-btn, button[title='Phrase'], button[aria-label='Phrase']");
    if (phraseBtn) {
      e.preventDefault();
      openPhrase();
    }
    if (e.target.closest("#ichamPhraseClose")) closePhrase();
    if (e.target.id === "ichamPhraseModal") closePhrase();
    if (e.target.closest("#ichamPhraseAddBtn")) {
      const row = document.querySelector("#ichamAddRow");
      row?.classList.toggle("is-open");
      if (row?.classList.contains("is-open")) row.querySelector("input")?.focus();
    }
    if (e.target.closest("#ichamSavePhrase")) {
      const latin = document.querySelector("#ichamAddLatin")?.value.trim() || "";
      const cham = document.querySelector("#ichamAddCham")?.value.trim() || "";
      if (!latin && !cham) return;
      const users = loadUserPhrases();
      users.push({ latin, cham });
      saveUserPhrases(users);
      document.querySelector("#ichamAddLatin").value = "";
      document.querySelector("#ichamAddCham").value = "";
      document.querySelector("#ichamAddRow")?.classList.remove("is-open");
      render();
    }
    if (e.target.closest("#ichamPhraseSearchBtn")) render();
  });

  document.addEventListener("input", function(e){
    if (e.target && e.target.id === "ichamPhraseSearch") render();
  });
  document.addEventListener("keydown", function(e){
    if (e.key === "Escape") closePhrase();
  });

  window.ichamOpenPhraseModal = openPhrase;
})();

</script>


/* === Phrase Pro v1.0.11 === */
.icham-modal .icham-modal-box{width:min(940px,calc(100vw - 24px));max-height:min(84vh,740px);overflow:auto;border-radius:24px;border:1px solid #dbeafe;box-shadow:0 24px 70px rgba(15,23,42,.22)}
.icham-modal .icham-modal-title{font-size:25px;font-weight:800;color:#116fc8}
.icham-phrase-pro{padding:2px 0 4px}
.icham-phrase-tools{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;margin:14px 0 18px}
.icham-phrase-search-wrap{display:flex;align-items:center;gap:10px;height:54px;border:1px solid #dbeafe;border-radius:18px;padding:0 16px;background:#fff;box-sizing:border-box;box-shadow:0 8px 22px rgba(15,23,42,.04)}
.icham-phrase-search-icon{font-size:20px;color:#64748b}
.icham-phrase-search-wrap input{width:100%;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font-size:18px;color:#111827}
.icham-phrase-search-btn,.icham-phrase-add-btn{height:54px;border-radius:18px;padding:0 22px;font-size:17px;font-weight:800;cursor:pointer;white-space:nowrap}
.icham-phrase-search-btn{border:1px solid #2fa7f2;background:#35aaf3;color:#fff}
.icham-phrase-add-btn{border:1px solid #dbeafe;background:#fff;color:#111827}
.icham-phrase-add-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin:0 0 14px}
.icham-phrase-add-row[hidden]{display:none!important}
.icham-phrase-add-row input{height:48px;border:1px solid #dbeafe;border-radius:14px;padding:0 14px;font-size:16px;outline:0}
.icham-phrase-add-row button{height:48px;border-radius:14px;border:1px solid #2fa7f2;background:#35aaf3;color:#fff;font-weight:800;padding:0 18px;cursor:pointer}
.icham-phrase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.icham-phrase-card{min-height:58px;border:1px solid #dbeafe;border-radius:16px;background:#fff;padding:15px 16px;box-sizing:border-box;font-size:18px;line-height:1.35;color:#111827;text-align:left;text-decoration:none;box-shadow:0 6px 18px rgba(15,23,42,.035);word-break:break-word;cursor:pointer}
.icham-phrase-card:hover{border-color:#bfdbfe;box-shadow:0 9px 24px rgba(15,23,42,.07)}
.icham-phrase-card .phrase-cham{font-family:'Noto Sans Cham',Arial,sans-serif}
.icham-phrase-link{display:flex;align-items:center;font-weight:750;color:#116fc8}
.icham-phrase-user{display:grid;grid-template-columns:1fr 30px;gap:8px;align-items:start;padding:0}
.icham-phrase-insert{border:0;background:transparent;text-align:left;font:inherit;color:inherit;padding:15px 0 15px 16px;cursor:pointer}
.icham-phrase-del{width:30px;height:30px;margin:12px 12px 0 0;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#64748b;font-size:20px;line-height:24px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:640px){
  .icham-modal .icham-modal-box{width:calc(100vw - 16px);border-radius:18px}
  .icham-modal .icham-modal-title{font-size:21px}
  .icham-phrase-tools{grid-template-columns:1fr;gap:9px}
  .icham-phrase-search-wrap,.icham-phrase-search-btn,.icham-phrase-add-btn{height:46px;border-radius:14px;font-size:15px}
  .icham-phrase-grid{grid-template-columns:1fr;gap:10px}
  .icham-phrase-card{min-height:52px;font-size:16px;border-radius:14px;padding:13px 14px}
  .icham-phrase-add-row{grid-template-columns:1fr}
  .icham-phrase-insert{padding:13px 0 13px 14px}
}


/* === Phrase Ultra Clean v2 === */
/* Clean white cards, no blue background/pre-flash */
.icham-phrase-pro .icham-phrase-card,
.icham-phrase-pro .icham-phrase-link,
.icham-phrase-pro .icham-phrase-user {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #dbeafe !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.035) !important;
}

/* First 4 default phrases: locked, clean, no delete X */
.icham-phrase-pro .icham-phrase-card[data-phrase-fixed] {
  background: #ffffff !important;
  color: #111827 !important;
  font-weight: 500 !important;
}

/* Cham Alphabet / Typing / Converter link cards */
.icham-phrase-pro .icham-phrase-link {
  color: #0f172a !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

/* Soft hover only */
.icham-phrase-pro .icham-phrase-card:hover,
.icham-phrase-pro .icham-phrase-link:hover,
.icham-phrase-pro .icham-phrase-user:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.055) !important;
}

/* Smaller Search / Add Phrase buttons */
.icham-phrase-pro .icham-phrase-search-btn,
.icham-phrase-pro .icham-phrase-add-btn {
  height: 44px !important;
  min-height: 44px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 16px !important;
  border-radius: 13px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

/* Search button remains blue but smaller and cleaner */
.icham-phrase-pro .icham-phrase-search-btn {
  background: #0fb8cf !important;
  color: #ffffff !important;
  border-color: #0ea5b7 !important;
}

/* Add Phrase clean outline */
.icham-phrase-pro .icham-phrase-add-btn {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #dbeafe !important;
}

/* Smaller search input */
.icham-phrase-pro .icham-phrase-search-wrap {
  height: 44px !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}

.icham-phrase-pro .icham-phrase-search-wrap input {
  font-size: 15px !important;
}

/* User phrase inner insert button should not add background */
.icham-phrase-pro .icham-phrase-insert {
  background: transparent !important;
  color: #111827 !important;
}

/* Delete X only for user-added phrases */
.icham-phrase-pro .icham-phrase-del {
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

/* Tighter modal spacing */
.icham-phrase-pro .icham-phrase-tools {
  gap: 10px !important;
  margin: 12px 0 16px !important;
}

.icham-phrase-pro .icham-phrase-grid {
  gap: 12px !important;
}

.icham-phrase-pro .icham-phrase-card {
  min-height: 52px !important;
  border-radius: 15px !important;
  font-size: 16px !important;
  padding: 13px 15px !important;
}

/* Mobile compact */
@media (max-width: 640px) {
  .icham-phrase-pro .icham-phrase-tools {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .icham-phrase-pro .icham-phrase-search-btn,
  .icham-phrase-pro .icham-phrase-add-btn,
  .icham-phrase-pro .icham-phrase-search-wrap {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }

  .icham-phrase-pro .icham-phrase-card {
    min-height: 48px !important;
    font-size: 15px !important;
    padding: 12px 13px !important;
  }
}


/* === Phrase v1.0.13: remove link rows/cards completely from Phrase modal === */
.icham-phrase-pro .icham-phrase-link {
  display: none !important;
}


/* === v1.0.17 Bottom Buttons Overlap Fix === */
/* Strong reset: do NOT make every .icham-btn font-size:0 */
.icham-toolbar .icham-btn,
.icham-bottom .icham-btn,
.icham-footer .icham-btn {
  font-size: 13px !important;
}

/* Bottom row only */
.icham-bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin-top: 8px !important;
  overflow: visible !important;
}

/* Bottom icon buttons: stable square shape */
.icham-bottom .icham-bottom-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex: 0 0 38px !important;
  line-height: 1 !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Hide only label text, not the whole button */
.icham-bottom .icham-bottom-btn .icham-btn-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Icons stay centered */
.icham-bottom .icham-bottom-btn svg {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  margin: 0 !important;
  display: block !important;
  flex: 0 0 17px !important;
  position: static !important;
}

/* Prevent the status line from colliding with buttons */
.icham-meta-row,
.icham-status-row,
.icham-new-foot {
  clear: both !important;
}

/* Mobile compact */
@media (max-width: 700px) {
  .icham-bottom {
    gap: 5px !important;
    justify-content: center !important;
    margin-top: 7px !important;
  }

  .icham-bottom .icham-bottom-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    flex-basis: 34px !important;
    border-radius: 10px !important;
  }

  .icham-bottom .icham-bottom-btn svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    flex-basis: 15px !important;
  }
}

/* Very small phone */
@media (max-width: 390px) {
  .icham-bottom {
    gap: 4px !important;
  }

  .icham-bottom .icham-bottom-btn {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    flex-basis: 31px !important;
  }
}


/* === v1.0.18 Mobile Icons Pro Max - built in === */
@media (max-width: 600px) {

  /* Native-app style bottom toolbar */
  .icham-bottom {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;

    gap: 6px !important;
    padding: 8px 10px !important;
    margin-top: 8px !important;

    background: rgba(255,255,255,0.94) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    border-top: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }

  .icham-bottom::-webkit-scrollbar {
    display: none !important;
  }

  /* Icon-only buttons on phone */
  .icham-bottom .icham-btn,
  .icham-bottom .icham-bottom-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    flex: 0 0 36px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }

  /* Hide text label only on mobile */
  .icham-bottom .icham-btn-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  /* Icon size */
  .icham-bottom .icham-btn svg,
  .icham-bottom .icham-bottom-btn svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    margin: 0 !important;
    display: block !important;
    flex: 0 0 16px !important;
  }

  /* Tap feedback */
  .icham-bottom .icham-btn:active,
  .icham-bottom .icham-bottom-btn:active {
    transform: scale(0.92) !important;
    background: #f1f5f9 !important;
  }

  /* Hold/tap label tooltip */
  .icham-bottom .icham-btn::after,
  .icham-bottom .icham-bottom-btn::after {
    content: attr(aria-label);
    position: absolute !important;
    bottom: 46px !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.85) !important;

    background: #111827 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1 !important;
    padding: 5px 8px !important;
    border-radius: 7px !important;

    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .15s ease, transform .15s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.18) !important;
  }

  .icham-bottom .icham-btn:active::after,
  .icham-bottom .icham-bottom-btn:active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
  }
}

/* Very small phones */
@media (max-width: 390px) {
  .icham-bottom {
    gap: 5px !important;
    padding: 7px 8px !important;
  }

  .icham-bottom .icham-btn,
  .icham-bottom .icham-bottom-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    flex-basis: 34px !important;
  }

  .icham-bottom .icham-btn svg,
  .icham-bottom .icham-bottom-btn svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
  }
}


/* === v1.0.19 Bottom Icons Perfect Center === */
/* True icon-only bottom toolbar. Text is removed in JS; this centers icons perfectly. */
.icham-bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 8px auto 0 !important;
  padding: 4px 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Bottom icon buttons only */
.icham-bottom .icham-bottom-btn,
.icham-bottom .icham-btn[data-act] {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  flex: 0 0 38px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;

  border-radius: 11px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  font-size: 0 !important;
}

/* SVG icon centered */
.icham-bottom .icham-bottom-btn svg,
.icham-bottom .icham-btn[data-act] svg {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  flex: 0 0 17px !important;

  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
}

/* Remove any leftover label span if browser cache loads old HTML */
.icham-bottom .icham-btn-label {
  display: none !important;
}

/* Press effect */
.icham-bottom .icham-bottom-btn:active,
.icham-bottom .icham-btn[data-act]:active {
  transform: scale(.94) !important;
}

/* Mobile: one clean centered line, scroll only if very small */
@media (max-width: 700px) {
  .icham-bottom {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .icham-bottom::-webkit-scrollbar {
    display: none !important;
  }

  .icham-bottom .icham-bottom-btn,
  .icham-bottom .icham-btn[data-act] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    flex-basis: 34px !important;
    border-radius: 10px !important;
  }

  .icham-bottom .icham-bottom-btn svg,
  .icham-bottom .icham-btn[data-act] svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    flex-basis: 15px !important;
  }
}

/* Very small phone */
@media (max-width: 390px) {
  .icham-bottom {
    gap: 4px !important;
    justify-content: flex-start !important;
  }

  .icham-bottom .icham-bottom-btn,
  .icham-bottom .icham-btn[data-act] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex-basis: 32px !important;
  }

  .icham-bottom .icham-bottom-btn svg,
  .icham-bottom .icham-btn[data-act] svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    flex-basis: 14px !important;
  }
}


/* === v1.0.20 Phrase UI Pro Layout - CSS only, no JS/code logic changes === */

/* Phrase modal: cleaner spacing */
.icham-phrase-pro {
  padding: 0 !important;
}

/* Top tools: compact and professional */
.icham-phrase-pro .icham-phrase-tools {
  gap: 8px !important;
  margin: 10px 0 14px !important;
  align-items: center !important;
}

/* Search input box */
.icham-phrase-pro .icham-phrase-search-wrap {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 13px !important;
  padding: 0 12px !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

/* Search input text */
.icham-phrase-pro .icham-phrase-search-wrap input {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Search and Add buttons smaller */
.icham-phrase-pro .icham-phrase-search-btn,
.icham-phrase-pro .icham-phrase-add-btn {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 13px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Light blue Search */
.icham-phrase-pro .icham-phrase-search-btn {
  background: #7dd3fc !important;
  border-color: #7dd3fc !important;
  color: #0f172a !important;
}

.icham-phrase-pro .icham-phrase-search-btn:hover {
  background: #67c9f4 !important;
  border-color: #67c9f4 !important;
}

/* Clean Add Phrase */
.icham-phrase-pro .icham-phrase-add-btn {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #dbeafe !important;
}

/* Add row compact */
.icham-phrase-pro .icham-phrase-add-row {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.icham-phrase-pro .icham-phrase-add-row input,
.icham-phrase-pro .icham-phrase-add-row button {
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}

/* Phrase cards: smaller, cleaner */
.icham-phrase-pro .icham-phrase-grid {
  gap: 10px !important;
}

.icham-phrase-pro .icham-phrase-card,
.icham-phrase-pro .icham-phrase-insert {
  font-size: 14px !important;
  line-height: 1.32 !important;
  min-height: 46px !important;
  padding: 11px 13px !important;
  border-radius: 13px !important;
  font-weight: 500 !important;
}

/* Cham text inside phrase */
.icham-phrase-pro .phrase-cham {
  font-size: 14px !important;
  line-height: 1.32 !important;
  font-family: 'Noto Sans Cham', Arial, sans-serif !important;
}

/* User-added phrase card layout */
.icham-phrase-pro .icham-phrase-user {
  min-height: 46px !important;
  border-radius: 13px !important;
}

.icham-phrase-pro .icham-phrase-user .icham-phrase-insert {
  padding: 11px 4px 11px 13px !important;
}

/* Delete X smaller and aligned */
.icham-phrase-pro .icham-phrase-del {
  width: 26px !important;
  height: 26px !important;
  margin: 10px 10px 0 0 !important;
  font-size: 17px !important;
  line-height: 20px !important;
}

/* Mobile: one-column, compact */
@media (max-width: 640px) {
  .icham-phrase-pro .icham-phrase-tools {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .icham-phrase-pro .icham-phrase-search-wrap,
  .icham-phrase-pro .icham-phrase-search-btn,
  .icham-phrase-pro .icham-phrase-add-btn {
    height: 39px !important;
    min-height: 39px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  .icham-phrase-pro .icham-phrase-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .icham-phrase-pro .icham-phrase-card,
  .icham-phrase-pro .icham-phrase-insert,
  .icham-phrase-pro .phrase-cham {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .icham-phrase-pro .icham-phrase-card {
    min-height: 42px !important;
    padding: 10px 12px !important;
  }
}


/* === v1.0.26 Restore bottom icons + Copy after Print === */
.icham-bottom {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  margin-top:8px !important;
  width:100% !important;
}

.icham-bottom .icham-bottom-btn,
.icham-bottom .icham-btn[data-act] {
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:11px !important;
  box-sizing:border-box !important;
  font-size:0 !important;
  line-height:1 !important;
  overflow:hidden !important;
}

.icham-bottom .icham-bottom-btn svg,
.icham-bottom .icham-btn[data-act] svg {
  display:block !important;
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  max-width:17px !important;
  margin:0 !important;
  padding:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  stroke:currentColor !important;
  fill:none !important;
}

.icham-bottom .icham-copy-blue {
  background:#7dd3fc !important;
  border-color:#7dd3fc !important;
  color:#0f172a !important;
}

.icham-bottom .icham-copy-blue:hover,
.icham-bottom .icham-copy-blue:active {
  background:#38bdf8 !important;
  border-color:#38bdf8 !important;
}

@media(max-width:700px){
  .icham-bottom{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:5px !important;
    justify-content:center !important;
    scrollbar-width:none !important;
  }
  .icham-bottom::-webkit-scrollbar{display:none !important;}
  .icham-bottom .icham-bottom-btn,
  .icham-bottom .icham-btn[data-act]{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    flex:0 0 34px !important;
  }
  .icham-bottom .icham-bottom-btn svg,
  .icham-bottom .icham-btn[data-act] svg{
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
    max-width:15px !important;
  }
}


/* === v1.0.29 Safe restore bottom icons === */
.icham-bottom {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  margin-top:8px !important;
  width:100% !important;
}
.icham-bottom .icham-bottom-btn,
.icham-bottom .icham-btn[data-act] {
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:11px !important;
  font-size:0 !important;
  line-height:1 !important;
  overflow:hidden !important;
}
.icham-bottom .icham-bottom-btn svg,
.icham-bottom .icham-btn[data-act] svg {
  display:block !important;
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  max-width:17px !important;
  margin:0 !important;
  padding:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  stroke:currentColor !important;
  fill:none !important;
}
.icham-bottom .icham-copy-blue {
  background:#7dd3fc !important;
  border-color:#7dd3fc !important;
  color:#0f172a !important;
}
@media(max-width:700px){
  .icham-bottom{flex-wrap:nowrap !important; overflow-x:auto !important; gap:5px !important; scrollbar-width:none !important;}
  .icham-bottom::-webkit-scrollbar{display:none !important;}
  .icham-bottom .icham-bottom-btn,.icham-bottom .icham-btn[data-act]{
    width:34px !important;height:34px !important;min-width:34px !important;max-width:34px !important;flex:0 0 34px !important;
  }
  .icham-bottom .icham-bottom-btn svg,.icham-bottom .icham-btn[data-act] svg{
    width:15px !important;height:15px !important;min-width:15px !important;max-width:15px !important;
  }
}