/* =================================================================================================
   El chat, un solo juego de estilos (B5 de «un solo chat, responsivo»).

   B2, B3 y B4 dejaron el **marcado** en un sitio; el aspecto seguía escrito dos veces —`app.css` y
   `mobile.css` declaraban los mismos 56 selectores con valores distintos—, que es la misma trampa un piso
   más abajo: nadie se entera de que divergieron hasta que el usuario compara los dos aparatos.

   Cómo se reparte:

   - **La base es la variante de puntero y pantalla ancha** (el escritorio de hoy). Es la que tiene más
     reglas estructurales y la que sirve de punto de partida razonable si una superficie nueva no dice nada.
   - **`@media (max-width: 720px)` es la variante táctil**: turnos como burbujas, altura de dedo en todo lo
     pulsable, y los dos paneles —ajustes e histórico— como **hoja inferior** en vez de anclados. Esa
     colocación es una diferencia **real** y por eso sobrevive: una hoja se alcanza con el pulgar y un panel
     anclado no.

   El corte por **ancho** y no por «es la PWA» es deliberado: el escritorio en una ventana estrecha quiere lo
   mismo que un teléfono, y un teléfono apaisado grande quiere lo de la base.

   **El acento se pide por variable**, `--chat-accent`. Es la única diferencia de color con motivo: en el
   escritorio es el terracota de Claude —la pestaña de Claude se distingue del resto de la aplicación— y en el
   móvil es el color del **contexto**, que es como el teléfono dice en qué proyecto estás. Cada superficie la
   fija donde monta el chat; aquí solo se consume.
   ================================================================================================= */

:root {
    --cc-accent: #d97757;      /* terracota de Claude */
    --cc-accent-soft: #e8a48d;
    --chat-accent: var(--cc-accent);
}

/* --- El armazón ---------------------------------------------------------------------------------- */

.cc { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: .5rem; }

/* El registro se lleva el alto sobrante y **desplaza él**: si desplazara el contenedor entero, el cuadro de
   escritura se iría fuera de la pantalla en cuanto la conversación creciera. */
.cc-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
.cc-compose { flex: 0 0 auto; display: flex; flex-direction: column; gap: .4rem; }

.cc-head { display: flex; align-items: baseline; gap: .8rem; }
.cc-brand {
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    font-family: Georgia, "Times New Roman", serif; font-size: .9rem; color: var(--text);
}
.cc-ver { font-family: inherit; font-size: .68rem; color: var(--muted); font-weight: normal; }
.cc-where { color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.cc-meta { color: var(--muted); font-size: .72rem; white-space: nowrap; display: flex; gap: .6rem; margin-left: auto; }
.cc-busy { color: var(--chat-accent); }
.cc-unavailable { padding: .5rem 0; }
.cc-toggle { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; user-select: none; }
.cc-toggle input { margin: 0; cursor: pointer; }
.cc-link {
    background: none; border: 0; padding: 0; font: inherit; font-size: .72rem;
    color: var(--chat-accent); cursor: pointer; text-decoration: underline;
}
/* Pastilla que avisa de que a la sesión se le pasó el estado del Context. */
.cc-badge {
    font-size: .66rem; color: var(--chat-accent); border: 1px solid var(--chat-accent);
    border-radius: 999px; padding: .05rem .45rem; white-space: nowrap;
}

/* El asterisco de Claude. Baila mientras piensa —gira y late a la vez— y está quieto el resto del tiempo. */
.cc-star { color: var(--chat-accent); font-size: 1rem; display: inline-block; }
.cc-star.is-thinking { animation: cc-spin 1.4s linear infinite, cc-pulse 1.4s ease-in-out infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
@keyframes cc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* «Pensando» es **solo el asterisco**, a la izquierda y en la línea de la conversación: el texto al lado no
   añadía nada que el asterisco girando no dijera, y en la cabecera queda fuera de la vista justo cuando se está
   mirando el final del registro, que es donde se espera la respuesta. */
.cc-thinking { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; opacity: .9; }

/* --- Los turnos ---------------------------------------------------------------------------------- */

.cc-entry { display: flex; flex-direction: column; gap: .15rem; font-size: .85rem; }
.cc-entry .cc-text { overflow-wrap: anywhere; }
.cc-text pre { overflow-x: auto; background: #0b0e13; padding: .5rem; border-radius: 8px; }
/* Relleno **a la mitad**: en un chat el texto es lo que se lee, y el aire alrededor de cada turno se estaba
   comiendo líneas de conversación en una ventana que no crece. */
.cc-user .cc-text {
    background: rgba(217, 119, 87, .1); border-left: 2px solid var(--chat-accent);
    padding: .18rem .25rem; white-space: pre-wrap;
}
.cc-system .cc-text, .cc-tool .cc-text { color: var(--muted); font-size: .75rem; }
.cc-divider { color: var(--muted); font-size: .8rem; text-align: center; }
.cc-hint { color: var(--muted); font-size: .9rem; padding: .6rem .2rem; }
.cc-entry.is-streaming .cc-text { white-space: pre-wrap; opacity: .85; }
.cc-error .cc-text { color: var(--danger, #e06c75); font-size: .8rem; white-space: pre-wrap; }
/* Separador entre la conversación retomada y lo que se escriba ahora. */
.cc-resume .cc-text {
    color: var(--chat-accent); font-size: .72rem; text-align: center;
    border-top: 1px dashed var(--border); padding-top: .5rem; margin-top: .3rem;
}
/* Historia trasladada de otro PC: atenuada, y bajo una raya que marca la costura. */
.cc-entry.is-dimmed { opacity: .45; }
.cc-relocated .cc-text {
    color: #dcc57f; font-size: .72rem; text-align: center; font-variant: small-caps; letter-spacing: .02em;
    border-top: 2px solid #6b5a2f; padding-top: .5rem; margin-top: .4rem;
}

/* La herramienta: **la cabecera en una línea** —etiqueta (READ, BASH…), comando, contador y chevrón— y el cuerpo
   **debajo** cuando se expande.

   El contenedor va en **columna**, y esto no es un detalle de estilo: cuando estaba en fila —heredado de cuando la
   herramienta era una etiqueta y un texto y nada más—, el cuerpo expandido entraba como un hermano más de la
   cabecera y se colocaba **a su derecha**, en una segunda columna. Es lo que se veía al expandir un comando. */
.cc-tool { flex-direction: column; align-items: stretch; gap: .15rem; }
.cc-tool .cc-label { flex: 0 0 auto; }
.cc-label { color: var(--chat-accent); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.cc-tool-head {
    display: flex; align-items: center; gap: .4rem; width: 100%;
    background: none; border: none; color: inherit; font: inherit;
    padding: .15rem 0; cursor: pointer; text-align: left;
}
.cc-tool-sum { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El contador de los que quedan detrás: de una racha de comandos se muestra **solo el último** con un «+3». */
.cc-tool-more {
    flex: 0 0 auto; font-size: .68rem; padding: 0 .3rem; border-radius: 999px;
    border: 1px solid var(--border); color: var(--muted);
}
.cc-tool-caret { flex: 0 0 auto; transition: transform .12s ease; }
.cc-tool-head.is-open .cc-tool-caret { transform: rotate(90deg); }
.cc-tool-body { white-space: pre-wrap; font-size: .8rem; opacity: .9; }

.cc-imgs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.cc-img { max-width: 100%; max-height: 22rem; border-radius: 8px; border: 1px solid var(--border); }

/* --- Las preguntas de Claude --------------------------------------------------------------------- */

/* Se destaca con el acento y un borde a la izquierda, como el turno del usuario pero al otro color: es un
   momento en el que la conversación **te toca a ti**, y tiene que distinguirse de un párrafo más de respuesta. */
.cc-ask {
    border-left: 2px solid var(--chat-accent); background: rgba(217, 119, 87, .07);
    padding: .25rem .3rem; display: flex; flex-direction: column; gap: .6rem;
}
.cc-ask-q { display: flex; flex-direction: column; gap: .25rem; }
.cc-ask-head {
    align-self: flex-start; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--chat-accent); border: 1px solid var(--chat-accent); border-radius: .6rem; padding: 0 .35rem;
}
.cc-ask-text { font-size: .85rem; }
/* Las opciones a lo ancho y envolviendo: cuatro cortas caben en una fila, y una larga se lleva la suya. */
.cc-ask-opts { display: flex; flex-wrap: wrap; gap: .35rem; }
.cc-ask-opt {
    flex: 0 1 auto; max-width: 100%; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: .1rem;
    background: var(--panel-2); color: inherit;
    border: 1px solid var(--border); border-radius: .35rem; padding: .3rem .5rem;
}
.cc-ask-opt:hover { border-color: var(--chat-accent); }
.cc-ask-on { border-color: var(--chat-accent); background: rgba(217, 119, 87, .18); }
/* «Otra…»: punteada, para que se lea como la salida y no como una opción más de las que propuso el modelo.
   Sin ella, una pregunta cuya respuesta no está en la lista **no se podía contestar**. */
.cc-ask-other { border-style: dashed; color: var(--muted); }
.cc-ask-label { font-size: .8rem; }
.cc-ask-desc { font-size: .68rem; color: var(--muted); overflow-wrap: anywhere; }
/* Lo elegido, cuando ya se contestó: en el sitio que ocupaban los botones, para que la conversación se lea
   igual de arriba abajo. */
.cc-ask-picked { font-size: .8rem; color: var(--chat-accent); }
.cc-ask-otherbox { display: flex; gap: .4rem; align-items: center; }
.cc-ask-otherinput {
    flex: 1 1 auto; min-width: 0; font: inherit; font-size: .85rem;
    background: var(--panel); color: var(--text); border: 1px solid var(--chat-accent);
    border-radius: 8px; padding: .35rem .5rem;
}
.cc-ask-send {
    align-self: flex-start; cursor: pointer; font-size: .78rem; padding: .25rem .7rem;
    border: 1px solid var(--chat-accent); border-radius: .35rem;
    background: var(--chat-accent); color: #1b1e23;
}
.cc-ask-send:disabled { opacity: .45; cursor: default; }

/* --- El compositor ------------------------------------------------------------------------------- */

.cc-box { display: flex; flex-direction: column; gap: .4rem; }
.cc-input {
    width: 100%; resize: vertical; font: inherit; font-size: .85rem;
    background: #101317; color: var(--text); border: 1px solid var(--border);
    border-radius: .3rem; padding: .45rem .55rem;
}
.cc-input::placeholder { color: var(--muted); }
.cc-input:focus { outline: none; border-color: var(--chat-accent); }
.cc-actions { display: flex; align-items: flex-end; gap: .7rem; }
.cc-ctrl { display: flex; flex-direction: column; gap: .15rem; color: var(--muted); font-size: .68rem; }
.cc-send { margin-left: auto; }
/* El botón de enviar dice «Enviar» donde hay ancho, y es una flecha donde no lo hay. */
.cc-btn-text { display: inline; }
.cc-btn-icon { display: none; }
.cc-primary { background: var(--chat-accent); border: 1px solid var(--chat-accent); color: #fff; }
.cc-primary:hover:not(:disabled) { background: #c96545; }
.cc-primary:disabled { opacity: .5; }
.cc-stop { border-color: var(--danger, #e06c75); color: var(--danger, #e06c75); }

.cc-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.cc-chip {
    display: inline-flex; align-items: center; gap: .25rem; background: var(--panel-2);
    border: 1px solid var(--border); border-radius: 999px; padding: .15rem .5rem; font-size: .78rem;
}
.cc-chip-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .9rem; line-height: 1; }
/* El clip: un botón con el 📎, no el `<input type=file>` nativo, que va oculto. */
.cc-attach {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    width: 2rem; height: 2rem; border-radius: 6px; font-size: 1.05rem; color: var(--muted);
    border: 1px solid var(--border); background: var(--panel-2);
}
.cc-attach:hover { color: var(--text); border-color: var(--accent); }

/* --- El medidor de contexto ---------------------------------------------------------------------- */

/* Tres niveles y no un degradado: lo que hay que saber es «vas bien», «ojo» y «ya toca abrir otro». */
.cc-meter { display: inline-block; width: 1.4rem; height: 1.4rem; flex: 0 0 auto; }
.cc-meter svg { width: 100%; height: 100%; display: block; }
.cc-meter-track { stroke: var(--border); }
.cc-meter-fill { transition: stroke-dasharray .35s ease, stroke .35s ease; }
.cc-meter.is-ok   .cc-meter-fill { stroke: #7bd88f; }
.cc-meter.is-high .cc-meter-fill { stroke: #d9a441; }
.cc-meter.is-full .cc-meter-fill { stroke: #e08585; }

/* --- Los ajustes: pastilla y panel ---------------------------------------------------------------- */

.cc-settings { position: relative; }
/* La pastilla dice el **permiso**, que es el ajuste con consecuencias: el modelo y el esfuerzo cambian lo que
   cuesta y lo que tarda, pero el permiso cambia lo que Claude puede hacerle a tu disco. */
.cc-pill {
    display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; white-space: nowrap;
    background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px;
    font: inherit; font-size: .78rem; padding: .3rem .7rem; cursor: pointer;
}
.cc-pill.is-set { border-color: var(--chat-accent); color: var(--chat-accent); }
.cc-pill:disabled { opacity: .55; cursor: default; }

.cc-settings-back { position: fixed; inset: 0; z-index: 39; background: transparent; }
.cc-settings-panel {
    position: absolute; bottom: calc(100% + .5rem); left: 0; z-index: 40; width: 20rem; max-width: 80vw;
    background: var(--panel); border: 1px solid var(--border); border-radius: .5rem; padding: .8rem;
    display: flex; flex-direction: column; gap: .7rem; box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.5);
}
.cc-settings-group { display: flex; flex-direction: column; gap: .35rem; }
.cc-settings-label { color: var(--muted); font-size: .74rem; }
/* **Un solo «Aplicar»** para los tres: cambiarlos de uno en uno reiniciaba el CLI tres veces seguidas. */
.cc-settings-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.cc-settings-apply { align-self: flex-end; }

/* Control segmentado (Modelo, Permisos): botones unidos en una fila, una sola elección. También se usa fuera
   del chat —«Cuentas de Claude», la bienvenida—, y por eso el acento vive en la raíz y no dentro de `.cc`. */
.seg { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-item {
    flex: 1 1 0; background: var(--panel-2); border: none; border-left: 1px solid var(--border);
    color: var(--text); font: inherit; font-size: .76rem; padding: .3rem .4rem; cursor: pointer;
    text-align: center; line-height: 1.15;
}
.seg-item:first-child { border-left: none; }
.seg-item:hover { background: var(--panel); }
/* El elegido va con el acento **y** con peso: solo color no basta para quien no distingue bien los tonos, y
   además el borde interior lo separa del resto de la tira. */
.seg-item.is-sel {
    background: var(--chat-accent); color: #fff; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.seg-item.is-sel:hover { background: var(--chat-accent); }

/* Deslizante segmentado (Esfuerzo): es ordinal, así que un rango con las marcas etiquetadas debajo. */
.seg-slider { display: flex; flex-direction: column; gap: .25rem; }
.seg-slider input[type=range] { width: 100%; accent-color: var(--chat-accent); margin: 0; }
.seg-ticks { display: flex; justify-content: space-between; gap: .15rem; }
.seg-tick { flex: 1 1 0; text-align: center; color: var(--muted); font-size: .62rem; }
.seg-tick.is-sel { color: var(--chat-accent); font-weight: 600; }

/* --- El histórico -------------------------------------------------------------------------------- */

.cc-history { position: relative; }
.cc-history-panel {
    position: absolute; top: calc(100% + .4rem); right: 0; z-index: 40; width: 22rem; max-width: 85vw;
    background: var(--panel); border: 1px solid var(--border); border-radius: .5rem; padding: .7rem;
    display: flex; flex-direction: column; gap: .4rem; max-height: 26rem; overflow-y: auto;
    box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.5);
}
.cc-history-group-label { color: var(--muted); font-size: .72rem; }
.cc-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.cc-history-item {
    display: flex; align-items: stretch; gap: .2rem;
    border: 1px solid transparent; border-radius: .35rem;
}
.cc-history-item:hover { border-color: var(--border); background: var(--panel-2); }
.cc-history-item.is-sel { border-color: var(--chat-accent); }
.cc-history-open {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .05rem; text-align: left;
    background: none; border: none; color: var(--text); font: inherit; padding: .3rem .4rem; cursor: pointer;
}
.cc-history-name { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-history-date { font-size: .68rem; color: var(--muted); }
/* Archivar vive en la **máquina dueña**: lo que se archive aquí desaparece también de la lista del otro
   aparato, y por eso el grupo dice cuántas hay en vez de esconderlas sin más. */
.cc-history-act {
    flex: 0 0 auto; background: none; border: none; color: var(--muted);
    font-size: .9rem; padding: 0 .45rem; cursor: pointer;
}
.cc-history-act:hover { color: var(--text); }
.cc-history-group {
    background: none; border: none; color: var(--muted); font: inherit; font-size: .74rem;
    padding: .3rem .1rem; text-align: left; cursor: pointer;
}
.cc-note { color: var(--muted); font-size: .78rem; margin: 0; }

/* =================================================================================================
   Táctil y estrecho. El corte es por **ancho**, no por «es la PWA»: el escritorio en una ventana estrecha
   quiere exactamente esto, y no hay motivo para negárselo.
   ================================================================================================= */
@media (max-width: 720px) {

    /* Los turnos, como **burbujas**: en una columna estrecha, el borde a la izquierda del turno del usuario no
       llega a separar nada y el fondo sí. */
    .cc-log { padding: .2rem; -webkit-overflow-scrolling: touch; }
    .cc-entry {
        gap: .2rem; margin: .3rem 0; padding: .3rem .4rem; border-radius: 12px;
        font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere;
    }
    .cc-user { background: #223052; margin-left: 2rem; }
    .cc-user .cc-text { white-space: pre-wrap; background: none; border: none; padding: 0; }
    .cc-assistant { background: var(--panel); }
    .cc-system { color: var(--muted); font-size: .85rem; }
    .cc-system .cc-text, .cc-tool .cc-text { font-size: inherit; }
    .cc-divider { background: none; }
    .cc-thinking { background: none; padding: .2rem .15rem; }
    .cc-star { font-size: 1.4rem; font-weight: 800; }

    .cc-tool { background: #1f2a1f; color: #bcd; font-family: var(--mono, monospace); font-size: .85rem; }
    .cc-tool .cc-label { color: #7bd88f; font-weight: 700; }
    .cc-tool-head { min-height: 2rem; }
    .cc-img { max-height: 40vh; }

    /* Las opciones de una pregunta, **apiladas y con altura de dedo**: una fila de botoncitos como la de la
       base se falla con el pulgar. */
    .cc-ask { background: none; border: none; padding: 0; gap: .7rem; }
    .cc-ask-head { font-size: .68rem; border-radius: 999px; padding: .05rem .5rem; }
    .cc-ask-text { font-size: .95rem; line-height: 1.35; }
    .cc-ask-opts { flex-direction: column; flex-wrap: nowrap; gap: .4rem; }
    .cc-ask-opt {
        width: 100%; border-radius: 10px; background: var(--panel-2);
        padding: .6rem .7rem; min-height: 2.6rem;
    }
    .cc-ask-on { background: #223052; }
    .cc-ask-label { font-size: .95rem; }
    .cc-ask-desc { font-size: .8rem; line-height: 1.3; }
    .cc-ask-picked { font-size: .9rem; }
    .cc-ask-otherinput { font-size: .95rem; padding: .5rem .6rem; }
    .cc-ask-send {
        border: none; border-radius: 10px; color: #fff; padding: .55rem .9rem; min-height: 2.4rem;
    }

    /* El compositor pegado abajo, respetando el borde curvo del teléfono. */
    .cc-compose {
        padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border); background: var(--bg, transparent);
    }
    .cc-box { gap: .3rem; }
    .cc-input {
        background: var(--panel); border-radius: 12px; font-size: 1rem; padding: .6rem .7rem;
        resize: none; max-height: 40vh;
    }
    .cc-actions { align-items: center; gap: .4rem; }
    .cc-settings { flex: 1 1 auto; min-width: 0; }
    .cc-pill { font-size: .82rem; padding: .35rem .7rem; min-height: 2.2rem; }
    .cc-meter { width: 1.5rem; height: 1.5rem; }

    /* Clip y enviar, cuadrados y con área de toque. Y el botón de enviar pasa a **icono**: en un teléfono la
       palabra «Enviar» gasta ancho que necesita el cuadro de texto. */
    .cc-attach { width: 2.4rem; height: 2.4rem; border: none; background: none; font-size: 1.15rem; }
    .cc-send { margin-left: 0; flex: 0 0 auto; }
    .cc-send .btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 10px; font-size: 1.1rem;
    }
    .cc-btn-text { display: none; }
    .cc-btn-icon { display: inline; }

    /* Los dos paneles, como **hoja inferior**. Es la diferencia que sobrevive a la convergencia, y es real: una
       hoja se alcanza con el pulgar y un panel anclado a un botón de la cabecera no. Mismo marcado, otro sitio. */
    .cc-settings-back { background: rgba(0,0,0,.45); z-index: 20; }
    .cc-settings-panel,
    .cc-history-panel {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 21;
        width: auto; max-width: none; max-height: 80vh;
        background: var(--panel-2); border: none; border-top: 1px solid var(--border);
        border-radius: 18px 18px 0 0; box-shadow: none;
        padding: .9rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
    .cc-settings-panel { gap: .9rem; }
    .cc-settings-label { font-size: .8rem; }
    .cc-settings-actions { justify-content: stretch; }
    .cc-settings-actions .btn { flex: 1 1 0; min-height: 2.6rem; border-radius: 10px; }

    .seg { border-radius: 10px; }
    .seg-item { background: var(--panel); font-size: .82rem; padding: .5rem .3rem; min-height: 40px; }
    .seg-slider { gap: .35rem; }
    .seg-slider input[type=range] { min-height: 28px; }
    .seg-tick { font-size: .68rem; }

    .cc-history-panel { gap: .5rem; }
    .cc-history-group-label { font-size: .78rem; }
    .cc-history-list { gap: .3rem; }
    .cc-history-item { border-color: var(--border); background: var(--panel); border-radius: 10px; }
    .cc-history-open { font-size: inherit; gap: .1rem; padding: .6rem .7rem; min-height: 2.8rem; }
    .cc-history-name { font-size: .95rem; }
    .cc-history-date { font-size: .78rem; }
    .cc-history-act { font-size: 1.05rem; padding: 0 .7rem; min-width: 2.6rem; }
    .cc-history-group { font-size: .82rem; padding: .5rem .1rem; }
    .cc-note { font-size: .88rem; }
}