.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px;margin-bottom:12px;border:1px solid #ccc;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px #0000000d}
.toolbar button{border:none;background:#f5f5f5;padding:6px 10px;border-radius:6px;cursor:pointer;transition:background .2s ease,transform .1s ease}
.toolbar button:hover{background:#e6e6e6}
.toolbar button:active{transform:scale(.95)}
.toolbar button.active{background:#cce5ff}
.dp-container{display:flex;align-items:center;gap:6px}
.dp-container img{width:20px;height:20px}select{border:1px solid #ccc;border-radius:6px;padding:4px 6px;cursor:pointer}
.color-container{display:flex;align-items:center;gap:10px}.color-label{display:flex;align-items:center;gap:4px;cursor:pointer}
.color-label img{width:22px;height:22px}
.color-label input[type=color]{border:none;background:transparent;width:24px;height:24px;cursor:pointer;padding:0}
.editor{border:1px solid #ccc;border-radius:8px;background:#fff;min-height:150px;line-height:1.5;box-shadow:0 2px 6px #0000000d}
.editor:focus-within{/*outline:2px solid #007bff */}
.editor h1{font-size:1.8em;font-weight:700;margin-bottom:.4em}.editor h2{font-size:1.6em;font-weight:700;margin-bottom:.4em}.editor h3{font-size:1.4em;font-weight:700;margin-bottom:.4em}
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.toolbar button{background:#f9f9f9;border:1px solid #ccc;border-radius:6px;cursor:pointer;padding:5px 8px;font-size:14px}
.toolbar select,.toolbar input[type=color]{cursor:pointer}


.bulletList, .orderedList {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent !important;
	border: none !important;
}

.bulletList img, .orderedList img{
 	position: absolute;
 	width: 20px;
}

.color-container {
     border-left: 1px solid rgba(211, 211, 211, 1);
     border-right: 1px solid rgba(211, 211, 211, 1);
     display: flex;
    justify-content: center;
    padding: 0 5px;
}



.color-label img {
    
    width: 20px;
}

.dp-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    border-left: 1px solid rgba(211, 211, 211, 1);
    border-right: 1px solid rgba(211, 211, 211, 1);
}

.dp-container:first-child {
    border-left: 1px solid rgba(211, 211, 211, 1);
}

.dp-container img {
    width: 18px;
    height: 28px;
}

.dp-container select {
    height: 40px;
    text-align: center;
}

.dp-container select,
select#heading-dropdown {
    text-align: center; /* centers the text */
  text-align-last: center; /* centers the selected value in Chrome & Firefox */
  -webkit-appearance: none; /* removes Safari’s native dropdown styling */
  -moz-appearance: none;    /* for Firefox */
  appearance: none;         /* standard property */

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

  padding: 5px 5px;        /* consistent padding */
  font-size: 14px;
  line-height: 1.4;

  height: 30px;             /* fixes Safari height issue */
  box-sizing: border-box;
  cursor: pointer;
  
  text-align: center;
}



#editor textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; /* ensures padding doesn't add extra width */
  line-height: 1;
}




#editorContainer {
  height: 100%; /* make the container fill the page */
  display: flex;
  flex-direction: column;
}

#editor {
  flex: 1; /* let the editor take all available space */
  display: flex;
  flex-direction: column;
  padding: 0;
}

.ProseMirror {
  flex: 1; /* this makes the editable area grow */
  height: calc(100% - 85px);
  min-height: 150px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  overflow-y: auto;
  line-height: 1.5; 
}

/* Optional: focus style */
.ProseMirror-focused {
  border-color: #007bff;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);
}

.ProseMirror p {
  margin: 0;          /* removes browser default spacing */
  padding: 0;         /* removes padding (if any added by reset.css) */
  line-height: 1.5;   /* consistent line spacing */
}

.ProseMirror ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 40px;
}

.ProseMirror ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 40px;
}

.ProseMirror li {
  display: list-item;
  text-align: match-parent;
}

.emoji-container {
    position: relative;
}

/* keep this */
.btn { margin: 8px 0; padding: 6px 10px; border:1px solid #ccc; border-radius: 8px; background:#fff; cursor:pointer; }
/* keep this */
.search { width:100%; padding:8px; border:1px solid #ddd; border-radius:8px; margin-bottom:8px; }
/* keep this */
.emoji-item {
  display:grid; place-items:center; aspect-ratio:1/1;
  font-size:22px; line-height:1; cursor:pointer; padding:6px; border-radius:8px; user-select:none;
}
.emoji-item:focus, .emoji-item:hover { background:#f2f2f2; outline:none; }
/* keep this */
.tiptap.ProseMirror {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial,
               "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", sans-serif;
}

/* 🔁 REPLACE your .emoji-hub block with this overlay version */
.emoji-hub{
  position: fixed;             /* overlay */
  z-index: 999999;
  top: 0; left: 0;
  transform: translate(-9999px, -9999px); /* hide off-screen by default */
  background:#fff; border:1px solid #ddd; border-radius:10px; padding:8px;
  width:340px; max-width:calc(100vw - 20px);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  transition: opacity .15s ease, transform .1s ease;
}
.emoji-hub[hidden]{   /* keeps layout unaffected while hidden */
  display:block; opacity:0; pointer-events:none;
  transform: translate(-9999px, -9999px);
}
.emoji-hub.visible{ opacity:1; }

/* 🔁 REPLACE your .grid block (remove position:absolute; top:0) */
.emoji-hub .grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
  gap:6px;
  max-height:220px;
  overflow-y:auto;
  overflow-x:hidden; /* vertical-only scroll */
}