<!-- ===========================
  COLOR PICKER
=========================== -->

<div id="colorPicker">

  <div class="cpHeader">

  <span>🎨 ფერის არჩევა</span>

  <button type="button" id="cpClose">
  დახურვა
  </button>

  </div>

  <div class="cpBody">

  <span class="cp" data-color="#ff0000" style="background:#ff0000"></span>
  <span class="cp" data-color="#ff6666" style="background:#ff6666"></span>
  <span class="cp" data-color="#cc0000" style="background:#cc0000"></span>

  <span class="cp" data-color="#ff9900" style="background:#ff9900"></span>
  <span class="cp" data-color="#ffcc00" style="background:#ffcc00"></span>
  <span class="cp" data-color="#fff59d" style="background:#fff59d"></span>

  <span class="cp" data-color="#00aa00" style="background:#00aa00"></span>
  <span class="cp" data-color="#44cc44" style="background:#44cc44"></span>
  <span class="cp" data-color="#008000" style="background:#008000"></span>

  <span class="cp" data-color="#00a2ff" style="background:#00a2ff"></span>
  <span class="cp" data-color="#0066ff" style="background:#0066ff"></span>
  <span class="cp" data-color="#0033cc" style="background:#0033cc"></span>

  <span class="cp" data-color="#9933ff" style="background:#9933ff"></span>
  <span class="cp" data-color="#7a2fb8" style="background:#7a2fb8"></span>

  <span class="cp" data-color="#ff3399" style="background:#ff3399"></span>
  <span class="cp" data-color="#ff80ab" style="background:#ff80ab"></span>

  <span class="cp" data-color="#555555" style="background:#555555"></span>
  <span class="cp" data-color="#999999" style="background:#999999"></span>
  <span class="cp" data-color="#000000" style="background:#000000"></span>

  </div>

</div>

<!-- ===========================
  MESSAGE POPUP
=========================== -->

<div id="msgOverlay"></div>

<div id="msgPopup">

  <div class="msgHeader">

  ⚠️ ტექსტის ინფორმაცია

  </div>

  <div class="msgContent">

  <img
  src="https://cdn-icons-png.flaticon.com/512/595/595067.png"
  alt="warning"
  >

  <div class="msgText">
  ჯერ მონიშნეთ ტექსტი  
  </div>

  </div>

  <div class="msgFooter">

  <button type="button" id="msgOk">
  გასაგებია
  </button>

  </div>

</div>
<style>
  /* ===========================
  COLOR PICKER
=========================== */

#colorPicker{
display:none;
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:270px;
background:#fff;
border:1px solid #333;
border-radius:5px;
box-shadow:0 10px 25px rgba(0,0,0,.35);
overflow:hidden;
z-index:999999;
font-family:Arial,sans-serif;
}

.cpHeader{
height:38px;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 8px;
font-size:13px;
font-weight:bold;
}

#cpClose{
background:#d61f1f;
color:#fff;
border:0;
padding:4px 10px;
font-size:12px;
font-weight:bold;
border-radius:3px;
cursor:pointer;
}

#cpClose:hover{
background:#b30000;
}

.cpBody{
padding:10px;
display:grid;
grid-template-columns:repeat(6,1fr);
gap:6px;
}

.cp{
width:24px;
height:24px;
border:1px solid #999;
border-radius:3px;
cursor:pointer;
transition:.15s;
}

.cp:hover{
transform:scale(1.1);
border-color:#000;
box-shadow:0 0 5px rgba(0,0,0,.35);
}

/* ===========================
  MESSAGE POPUP
=========================== */

#msgOverlay{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.35);
z-index:999998;
}

#msgPopup{
display:none;
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:290px;
background:#fff;
border:1px solid #333;
border-radius:5px;
box-shadow:0 10px 25px rgba(0,0,0,.35);
overflow:hidden;
z-index:999999;
font-family:Arial,sans-serif;
}

.msgHeader{
height:38px;
background:#111;
color:#fff;
display:flex;
align-items:center;
padding:0 10px;
font-size:13px;
font-weight:bold;
}

.msgContent{
display:flex;
align-items:center;
gap:10px;
padding:15px;
font-size:13px;
line-height:18px;
}

.msgContent img{
width:34px;
height:34px;
}

.msgFooter{
padding:10px;
text-align:right;
border-top:1px solid #eee;
}

#msgOk{
background:#444;
color:#fff;
border:0;
padding:5px 16px;
font-size:12px;
font-weight:bold;
border-radius:3px;
cursor:pointer;
}

#msgOk:hover{
background:#222;
}
</style>

<script>
$(function(){

  /* ===== 🎨 ღილაკის დამატება ===== */

  if($("#openColorPicker").length===0){

  $(".ucf-bb").append(
  '<span id="openColorPicker" class="codeButtons" title="ფერის არჩევა" style="cursor:pointer;margin-left:3px;">🎨</span>'
  );

  }

  /* ===== ფერების ფანჯრის გახსნა ===== */

  $(document).on("click","#openColorPicker",function(e){

  e.preventDefault();
  e.stopPropagation();

  $("#msgPopup").hide();
  $("#msgOverlay").hide();

  $("#colorPicker").fadeToggle(150);

  });

  /* ===== დახურვა ===== */

  $(document).on("click","#cpClose",function(){

  $("#colorPicker").fadeOut(150);

  });

  /* ===== გარეთ დაჭერისას დახურვა ===== */

  $(document).on("mouseup",function(e){

  if(
  !$(e.target).closest("#colorPicker").length &&
  !$(e.target).closest("#openColorPicker").length
  ){

  $("#colorPicker").fadeOut(150);

  }

  });

  /* ===== ფერის არჩევა ===== */

  $(document).on("click",".cp",function(){

  var textarea=document.getElementById("message");

  if(!textarea)return;

  var start=textarea.selectionStart;
  var end=textarea.selectionEnd;

  var text=textarea.value.substring(start,end);

  if(text===""){

  $("#colorPicker").hide();

  $("#msgOverlay").fadeIn(120);
  $("#msgPopup").fadeIn(120);

  return;

  }

  var color=$(this).data("color");

  textarea.setRangeText(
  "[color="+color+"]"+text+"[/color]",
  start,
  end,
  "end"
  );

  textarea.focus();

  $("#colorPicker").fadeOut(150);

  });

  /* ===== Popup დახურვა ===== */

  $(document).on("click","#msgOk,#msgOverlay",function(e){

  e.preventDefault();

  $("#msgPopup").fadeOut(120);
  $("#msgOverlay").fadeOut(120);

  return false;

  });

});
</script>