/* chat-markup.css — estilos del tooltip de markup para chat-input.
   Tooltip flotante con botones markdown (B/I/S/U) + dropdown fancy text.
   Aparece encima de la selección del user. Único scope: input/textarea del chat. */

.cm-tooltip {
    position: fixed;
    z-index: 99998;
    display: flex;
    gap: 4px;
    background: var(--drawer-bg, #1a1a1a);
    border: 1px solid var(--border-clr, rgba(255,255,255,.1));
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease-out, transform .12s ease-out;
    pointer-events: none;
}

.cm-tooltip.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cm-btn {
    background: transparent;
    border: 0;
    color: var(--text, #fff);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cm-btn:hover { background: rgba(255, 255, 255, .08); }
.cm-btn:active { background: rgba(255, 255, 255, .14); }

.cm-btn-bold      { font-weight: 900; }
.cm-btn-italic    { font-style: italic; font-weight: 700; }
.cm-btn-strike    { text-decoration: line-through; }
.cm-btn-underline { text-decoration: underline; }

.cm-sep {
    width: 1px;
    background: var(--border-clr, rgba(255,255,255,.1));
    margin: 4px 2px;
}

.cm-fancy-wrap { position: relative; }

.cm-fancy-menu {
    position: absolute;
    right: 0;
    background: var(--drawer-bg, #1a1a1a);
    border: 1px solid var(--border-clr, rgba(255,255,255,.1));
    border-radius: 10px;
    padding: 4px;
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    display: none;
}

.cm-fancy-menu.open { display: block; }

/* Dirección: default arriba (tooltip suele estar arriba del input). JS le
   agrega .down si hay más espacio abajo. */
.cm-fancy-menu          { bottom: calc(100% + 4px); }
.cm-fancy-menu.down     { bottom: auto; top: calc(100% + 4px); }

.cm-fancy-item {
    background: transparent;
    border: 0;
    color: var(--text, #fff);
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: block;
}

.cm-fancy-item:hover { background: rgba(255, 255, 255, .08); }

.cm-fancy-item-label {
    font-size: 11px;
    color: var(--text-muted, #aaa);
    margin-bottom: 1px;
}

/* ── Bottom sheet de fancy (mobile) ────────────────────────────────────
   Se renderea dentro del .sheet-body de pushDynamicSheet. Cada row es un
   <button> ancho completo con label arriba y preview Unicode abajo.
   Touch-friendly: 60px altura mínima. */
.cm-sheet-fancy-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-clr, rgba(255,255,255,.08));
    color: var(--text, #fff);
    padding: 14px 18px;
    text-align: left;
    cursor: pointer;
    min-height: 60px;
}
.cm-sheet-fancy-row:last-child { border-bottom: 0; }
.cm-sheet-fancy-row:active,
.cm-sheet-fancy-row:hover {
    background: color-mix(in srgb, var(--text, #fff) 5%, transparent);
}
.cm-sheet-fancy-label {
    font-size: 11px;
    color: var(--text-muted, #aaa);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.cm-sheet-fancy-preview {
    font-size: 16px;
    color: var(--text, #fff);
}