/* Bloques de código del chat con vista previa (ui/code-card.js) */
.code-card { margin: 10px 0; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; background: #15151e; }
.code-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px 6px 12px; background: #1c1c27; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; }
.code-lang { color: #a5a7bd; font: 600 11.5px ui-monospace, "Cascadia Code", Consolas, monospace; text-transform: lowercase; }
.code-status { color: #a78bfa; font-size: 12px; }
.code-tabs { display: inline-flex; padding: 2px; border-radius: 8px; background: rgba(255,255,255,.05); }
.code-tabs button { border: 0; background: transparent; color: #a5a7bd; font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.code-tabs button[aria-selected="true"] { background: #3b3786; color: #e4e0ff; }
.code-actions { display: inline-flex; gap: 2px; margin-left: auto; }
.code-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #a5a7bd; font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.code-btn:hover { background: rgba(255,255,255,.07); color: #ecebf5; }
.code-pre { margin: 0 !important; padding: 12px 14px !important; max-height: 420px; overflow: auto; background: transparent !important; border: 0 !important; border-radius: 0 !important; font: 12.5px/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; color: #e4e4ee; white-space: pre; }
.code-view { background: #fff; }
.code-frame { display: block; width: 100%; height: 380px; border: 0; background: #fff; }
.code-card.has-preview:not(.show-code) .code-pre { display: none; }
.code-card.has-preview.show-code .code-view { display: none; }
html.cb-full .code-frame { height: 520px; }
@media (max-width: 380px) { .code-btn span { display: none; } }
/* Panel estrecho: cabecera en una sola línea (botones solo con icono; el nombre sale al pasar el ratón) */
html:not(.cb-full) .code-btn span { display: none; }
html:not(.cb-full) .code-head { flex-wrap: nowrap; }
html:not(.cb-full) .code-btn { padding: 6px; }

/* Vista previa del documento dentro de la tarjeta (chat) */
.doc-preview { margin: 4px 14px 2px; max-height: 300px; overflow: auto; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); padding: 12px 14px; font-size: 13px; color: #e4e4ee; line-height: 1.5; }
.doc-pv-h { margin: 10px 0 6px; font-weight: 600; color: #ecebf5; font-size: 14px; }
.doc-pv-h:first-child { margin-top: 0; }
.doc-pv-p { margin: 6px 0; color: #c9c9d6; }
.doc-pv-ul, .doc-pv-ol { margin: 6px 0; padding-left: 20px; color: #c9c9d6; }
.doc-pv-ul li, .doc-pv-ol li { margin: 3px 0; }
.doc-pv-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 8px 0; font-size: 12.5px; border-radius: 10px; overflow: hidden; }
.doc-pv-table th { background: #2a2a3c; color: #c4b5fd; font-weight: 600; text-align: left; padding: 8px 10px; }
.doc-pv-table td { padding: 7px 10px; border-top: 1px solid rgba(255,255,255,.06); color: #dcdce8; }
.doc-pv-table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
