/* ============ Viste del gestionale ============ */
:root { --chart-a: #E2571F; --chart-b: #7B57F5; }
[data-theme="dark"] { --chart-a: #E0602A; --chart-b: #8A6BF0; }

/* ---------- barra strumenti / filtri ---------- */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .input-icon { flex: 1; min-width: 220px; max-width: 420px; }
.toolbar .pick-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.toolbar .pick-chip { padding: 7px 12px; font-size: 13px; flex: none; }
.toolbar .pick-chip .emoji { font-size: 17px; }
.view-toggle { margin-left: auto; }
.count-line { color: var(--muted); font-weight: 700; font-size: 13px; margin: -6px 0 12px; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; gap: 14px; align-items: center; background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none !important; border: 2px solid var(--line); transition: transform .18s, box-shadow .18s; position: relative; overflow: hidden; }
a.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kpi::after { content: ''; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: var(--c); opacity: .09; }
.kpi-ic { width: 52px; height: 52px; min-width: 52px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; background: color-mix(in srgb, var(--c) 16%, var(--card)); }
.kpi small { display: block; color: var(--ink-2); font-weight: 800; font-size: 12.5px; }
.kpi b { display: block; font: 600 26px/1.15 var(--font-display); }
@media (max-width: 520px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .kpi-ic { width: 38px; height: 38px; min-width: 38px; font-size: 20px; border-radius: 13px; }
  .kpi b { font-size: 20px; }
}

/* ---------- griglia dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.dash-today { grid-column: span 7; grid-row: span 2; }
.dash-todo { grid-column: span 5; }
.dash-chart { grid-column: span 5; }
.dash-species { grid-column: span 4; }
.dash-vax { grid-column: span 4; }
.dash-reviews { grid-column: span 4; }
@media (max-width: 1200px) { .dash-today, .dash-todo, .dash-chart { grid-column: span 12; grid-row: auto; } .dash-species, .dash-vax, .dash-reviews { grid-column: span 6; } .dash-reviews { grid-column: span 12; } }
@media (max-width: 760px) { .dash-species, .dash-vax { grid-column: span 12; } }

.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 58px 18px minmax(0, 1fr); gap: 10px; align-items: stretch; cursor: pointer; }
.tl-time { text-align: right; padding-top: 12px; }
.tl-time b { display: block; font: 600 16px var(--font-display); }
.tl-time small { color: var(--muted); font-weight: 700; font-size: 11.5px; }
.tl-dot { position: relative; }
.tl-dot::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: var(--line); }
.tl-dot::after { content: ''; position: absolute; left: 50%; top: 16px; width: 14px; height: 14px; border-radius: 50%; transform: translateX(-50%); background: var(--c); box-shadow: 0 0 0 4px var(--card); }
.tl-item:first-child .tl-dot::before { top: 16px; }
.tl-item:last-child .tl-dot::before { bottom: calc(100% - 20px); }
.tl-body { display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin: 4px 0; border-radius: 16px; background: var(--card-2); border: 2px solid var(--line); border-left: 5px solid var(--c); transition: transform .15s, background .15s; }
.tl-item:hover .tl-body { transform: translateX(3px); background: var(--bg-2); }
.tl-item.past .tl-body { opacity: .62; }
.tl-item.live .tl-body { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.tl-item.live .tl-dot::after { animation: pulse 1.6s infinite; }

.todo-list { display: flex; flex-direction: column; gap: 8px; }
.todo { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; color: var(--ink); text-decoration: none !important; background: var(--bg-2); transition: transform .15s; font-size: 14px; }
.todo:hover { transform: translateX(4px); }
.todo .emoji { font-size: 22px; }
.todo svg { width: 18px; height: 18px; color: var(--muted); }
.todo.sun { background: var(--sun-soft); } .todo.grape { background: var(--grape-soft); } .todo.sky { background: var(--sky-soft); }
.todo.brand { background: var(--brand-soft); } .todo.red { background: var(--red-soft); }

.vax-list { display: flex; flex-direction: column; gap: 8px; }
.vax-row { display: flex; gap: 10px; align-items: center; }
.vax-row .grow { min-width: 0; }
.rep-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.rep-num { font: 700 40px/1 var(--font-display); }
.mini-review { padding: 10px 0; border-top: 2px dashed var(--line); }
.mini-review p { margin: 4px 0; }

/* ---------- grafici ---------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .base { stroke: var(--line-2); stroke-width: 1; }
.chart .axis { fill: var(--muted); font: 700 11px var(--font); }
.chart .axis.x { fill: var(--ink-2); text-transform: capitalize; }
.chart .val { fill: var(--ink); font: 700 12px var(--font); }
.chart .mark { fill: var(--chart-a); opacity: .55; transition: opacity .15s; }
.chart .col.last .mark { opacity: 1; }
.chart .hit { fill: transparent; }
.chart .col:hover .mark { opacity: 1; }
.chart .col:hover .hit { fill: var(--bg-2); opacity: .5; }
.small-seg { padding: 3px; }
.small-seg button { padding: 5px 10px; font-size: 12px; }
.chart-tip { position: fixed; z-index: 3000; pointer-events: none; background: #2A2140; color: #fff; padding: 6px 10px; border-radius: 10px; font: 700 12.5px var(--font); box-shadow: var(--shadow); white-space: nowrap; }
.barlist { display: flex; flex-direction: column; gap: 10px; }
.bl-row { display: grid; grid-template-columns: minmax(110px, 40%) 1fr 34px; gap: 10px; align-items: center; font-size: 13.5px; }
.bl-label { display: flex; gap: 6px; align-items: center; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-label .emoji { font-size: 18px; }
.bl-track { height: 14px; border-radius: 0 4px 4px 0; position: relative; }
.bl-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--chart-b); border-radius: 0 4px 4px 0; min-width: 2px; transition: width .6s cubic-bezier(.2, .8, .3, 1); }
.bl-row:hover .bl-bar { filter: brightness(1.1); }
.bl-val { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.mini-table { font-size: 13px; }

/* ---------- selezione in form ---------- */
.picked { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 16px; background: var(--bg-2); border: 2px solid var(--line-2); }
.ac-dd { left: 0; right: 0; max-height: 300px; overflow: auto; }
.cf-state .chip { font-size: 11px; padding: 2px 8px; }
details.more summary { cursor: pointer; font: 600 14px var(--font-display); color: var(--ink-2); padding: 8px 0; }
details.more summary::marker { color: var(--brand); }

/* ---------- firma e informativa ---------- */
.inf-scroll { max-height: 220px; overflow: auto; background: var(--card-2); border: 2px solid var(--line); border-radius: 16px; padding: 14px 16px; font-size: 13px; line-height: 1.5; }
.informativa h4 { font-size: 15px; }
.informativa p { margin: 0 0 .7em; }
.consents { display: flex; flex-direction: column; gap: 10px; }
.sig-box { position: relative; height: 180px; border-radius: 18px; border: 3px dashed var(--line-2); background: #fff; margin-top: 8px; touch-action: none; }
.sig-box canvas { width: 100%; height: 100%; display: block; border-radius: 16px; cursor: crosshair; touch-action: none; }
.sig-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #B8AFCC; font: 600 15px var(--font-display); pointer-events: none; transition: opacity .2s; white-space: nowrap; }
.sig-box.signed .sig-hint { opacity: 0; }
.sig-box.signed { border-color: var(--mint); border-style: solid; }
.sig-clear { position: absolute; right: 8px; top: 8px; }
.sig-img { max-width: 260px; max-height: 110px; background: #fff; border-radius: 12px; border: 2px solid var(--line); padding: 4px; }
.waiting { font: 600 15px var(--font-display); color: var(--ink-2); display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 99px; background: var(--bg-2); }
.waiting.done { background: var(--mint-soft); color: var(--ink); }

/* ---------- pazienti ---------- */
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 16px; }
.pet-card {
  background: var(--card); border-radius: var(--radius); padding: 18px 16px 16px; text-align: center; color: var(--ink); text-decoration: none !important;
  box-shadow: var(--shadow-sm); border: 2px solid var(--line); transition: transform .18s, box-shadow .18s, border-color .18s; position: relative; overflow: hidden;
}
.pet-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 64px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, transparent), transparent); }
.pet-card:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 50%, var(--line)); }
.pet-card.deceased { opacity: .7; filter: grayscale(.4); }
.pc-top { position: relative; display: inline-block; margin-bottom: 8px; }
.pc-sex { position: absolute; right: -6px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-sm); display: grid; place-items: center; font-weight: 800; color: var(--ink-2); }
.pet-card h3 { margin: 0 0 2px; font-size: 19px; }
.pc-owner { margin: 8px 0; font-weight: 700; color: var(--ink-2); }
.pc-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; min-height: 26px; }
.pc-chips .chip { font-size: 11.5px; }
.pick-chip .count { background: var(--line); border-radius: 99px; padding: 0 7px; font-size: 12px; }

/* ---------- scheda paziente ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font: 600 14px var(--font-display); margin: 4px 0 12px; text-decoration: none !important; }
.back-link svg { width: 16px; height: 16px; }
.back-link:hover { color: var(--brand); }
.pet-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) 260px; gap: 24px; align-items: start; overflow: hidden;
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--c) 20%, transparent), transparent 55%), var(--card); }
.ph-art { position: relative; }
.ph-art .pet-av.xl { --s: 124px; font-size: 70px; animation: float 5s ease-in-out infinite; }
.rainbow { position: absolute; top: -10px; right: -14px; font-size: 30px; }
.ph-main h1 { font-size: clamp(28px, 3.4vw, 42px); margin: 0 6px 0 0; }
.ph-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin-top: 14px; }
.ph-facts small { display: block; color: var(--muted); font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.ph-facts b { font-weight: 800; overflow-wrap: anywhere; }
.ph-facts .tiny { display: block; }
.ph-owner { background: var(--bg-2); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.owner-mini { display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none !important; }
.owner-mini:hover b { color: var(--brand); }
button.chip { border: 0; cursor: pointer; }
@media (max-width: 1100px) { .pet-hero { grid-template-columns: auto minmax(0, 1fr); } .ph-owner { grid-column: 1 / -1; } }
@media (max-width: 620px) { .pet-hero { grid-template-columns: minmax(0, 1fr); text-align: left; } .ph-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ph-art .pet-av.xl { --s: 92px; font-size: 52px; } }
.action-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.action-bar .btn { padding: 10px 16px; min-height: 42px; font-size: 14.5px; }
.records { display: flex; flex-direction: column; gap: 12px; }
.record { display: flex; gap: 14px; background: var(--card); border-radius: 20px; padding: 16px; box-shadow: var(--shadow-sm); border: 2px solid var(--line); border-left: 6px solid var(--c); animation: rise .4s ease both; }
.record h4 { margin: 0; font-size: 16.5px; }
.record p { margin: 6px 0 0; }
.rec-ic { width: 44px; height: 44px; min-width: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, var(--c) 16%, var(--card)); }
.rec-chips { margin-top: 10px; gap: 6px; }
.share-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
@media (max-width: 620px) { .share-grid { grid-template-columns: minmax(0, 1fr); } }
.big-switch { font-size: 16px; margin-top: 8px; }
.line-chart .line { fill: none; stroke: var(--chart-b); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-chart .area { fill: var(--chart-b); opacity: .1; }
.line-chart .dot { fill: var(--chart-b); stroke: var(--card); stroke-width: 2; }
.line-chart .hit { fill: transparent; }
.line-chart .pt:hover .dot { r: 6; }

/* ---------- agenda ---------- */
.requests { background: var(--sun-soft); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; border: 2px dashed var(--sun); }
.req-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.req-card { display: flex; gap: 12px; align-items: center; background: var(--card); border-radius: 18px; padding: 12px; box-shadow: var(--shadow-sm); min-width: 0; }
.req-card .grow { min-width: 0; }
.move-card { flex-wrap: wrap; align-items: flex-start; }
.move-card .grow { flex: 1 1 180px; }
.move-line { margin: 2px 0; }
.move-line s { text-decoration-thickness: 2px; }
.move-arrow { color: var(--grape); font-weight: 800; margin: 0 2px; }
.req-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; width: 100%; flex-wrap: wrap; }
.warn-t { color: var(--sun-dark); font-weight: 800; margin-top: 3px; }
.ok-t { color: var(--mint-dark); font-weight: 800; margin-top: 3px; }
.reason-chips { display: flex; flex-direction: column; gap: 6px; }
.reason-chip { text-align: left; border: 2px solid var(--line-2); background: var(--card); border-radius: 12px; padding: 8px 12px; font: 700 13px var(--font); color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s; }
.reason-chip:hover { border-color: var(--grape); }
.reason-chip.on { border-color: var(--grape); background: var(--grape-soft); color: var(--ink); }
.move-hero { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.move-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.move-compare .mc { border-radius: 16px; padding: 10px 12px; text-align: center; line-height: 1.25; }
.move-compare .mc small { display: block; font-weight: 800; text-transform: uppercase; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.move-compare .mc b { display: block; font: 600 14px var(--font-display); text-transform: capitalize; }
.move-compare .mc span { display: block; font: 700 24px var(--font-display); }
.move-compare .mc.old { background: var(--bg-2); color: var(--ink-2); }
.move-compare .mc.old span { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .7; }
.move-compare .mc.new { background: var(--grape-soft); box-shadow: inset 0 0 0 2px var(--grape); }
.mc-arrow { font-size: 22px; color: var(--grape); }
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-label { font: 600 18px var(--font-display); margin-left: 6px; text-transform: capitalize; }
.vet-chips .pick-chip { padding: 6px 12px; font-size: 13px; }
/* niente padding in alto e a sinistra: intestazione e orari restano attaccati al bordo mentre si scorre */
.cal.card { overflow: auto; max-height: calc(100vh - 230px); min-height: 420px; padding: 0 8px 8px 0; }
.cal-grid { display: grid; grid-template-columns: 56px var(--tpl); position: relative; }
.cal-corner, .cal-dayhead { position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 2px solid var(--line); }
.cal-corner { left: 0; z-index: 8; }
.cal-dayhead { text-align: center; padding: 6px 0 8px; line-height: 1.1; }
.cal-dayhead small { display: block; color: var(--muted); font-weight: 800; font-size: 11.5px; text-transform: uppercase; }
.cal-dayhead b { font: 600 20px var(--font-display); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.cal-dayhead.past > * { opacity: .5; }
/* oggi: colonna più larga, fascia arancione in testa, etichetta "oggi" e sfondo caldo */
.cal-dayhead.today { background: linear-gradient(180deg, var(--brand-soft), var(--card)); box-shadow: inset 0 4px 0 var(--brand); }
.cal-dayhead.today small { color: var(--brand-dark); }
.cal-dayhead.today b { background: var(--brand); color: #fff; box-shadow: 0 3px 0 var(--brand-dark); }
.today-tag { display: inline-block; margin-left: 7px; padding: 3px 9px; border-radius: 99px; background: var(--brand); color: #fff; font: 800 10.5px var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .06em; vertical-align: 7px; box-shadow: 0 2px 0 var(--brand-dark); }
.cal-hours { grid-row: 2; grid-column: 1; position: sticky; left: 0; z-index: 6; background: var(--card); }
.cal-hour { height: var(--hour); position: relative; }
.cal-hour span { position: absolute; top: -8px; right: 8px; font: 700 11px var(--font); color: var(--muted); }
.cal-hour:first-child span { top: 2px; }
.cal-col { grid-row: 2; position: relative; border-left: 1px solid var(--line); }
.cal-col.past { background: color-mix(in srgb, var(--ink) 3%, var(--card)); }
.cal-col.today { background: color-mix(in srgb, var(--brand) 7%, var(--card)); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--brand) 45%, transparent), inset -2px 0 0 color-mix(in srgb, var(--brand) 45%, transparent); }
.cal-col.today + .cal-col { border-left-color: transparent; }
.cal-past-shade { position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--ink) 5%, transparent) 7px 9px); }
.cal-slot { height: calc(var(--hour) / 2); border-top: 1px solid var(--line); }
.cal-slot.half { border-top: 1px dashed color-mix(in srgb, var(--line) 60%, transparent); }
.cal-slot:hover { background: var(--bg-2); cursor: copy; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 4; pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.cal-now.faint { height: 1px; background: color-mix(in srgb, var(--red) 35%, transparent); z-index: 1; }
.cal-now.faint::before { display: none; }
.cal-now-label { position: absolute; right: 3px; transform: translateY(-50%); background: var(--red); color: #fff; font: 800 10.5px var(--font); padding: 2px 5px; border-radius: 7px; z-index: 2; pointer-events: none; }
.appt {
  position: absolute; border-radius: 10px; padding: 3px 7px; background: color-mix(in srgb, var(--c) 20%, var(--card)); border-left: 4px solid var(--c);
  font-size: 12px; line-height: 1.25; overflow: hidden; cursor: grab; box-shadow: var(--shadow-sm); z-index: 2; transition: box-shadow .15s, transform .15s, opacity .15s; user-select: none; touch-action: pan-y;
}
.appt.past:not(:hover):not(.dragging):not(.resizing) { opacity: .55; }
.appt-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; touch-action: none; }
.appt-resize::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 20px; height: 3px; margin-left: -10px; border-radius: 3px; background: color-mix(in srgb, var(--c) 70%, var(--ink)); opacity: 0; transition: opacity .15s; }
.appt:hover .appt-resize::after, .appt.resizing .appt-resize::after { opacity: .8; }
@media (pointer: coarse) { .appt-resize { height: 14px; } .appt-resize::after { opacity: .5; } }
.appt-move-badge { position: absolute; right: 16px; top: 2px; font-size: 11px; line-height: 1; }
.appt.has-move { outline: 2px dashed var(--grape); outline-offset: -2px; }
.appt.ghost { background: repeating-linear-gradient(-45deg, var(--grape-soft) 0 6px, var(--card) 6px 12px); border: 2px dashed var(--grape); border-left-width: 4px; box-shadow: none; cursor: pointer; z-index: 3; }
.appt.ghost .appt-top b { color: var(--grape-dark); }
.appt.ghost:hover { box-shadow: 0 0 0 3px var(--grape-soft), var(--shadow); }
.appt.focus { animation: apptFlash 1.1s ease 3; z-index: 6; }
@keyframes apptFlash { 50% { box-shadow: 0 0 0 5px var(--grape), var(--shadow-lg); transform: scale(1.04); } }
.appt.armed { transform: scale(1.05); box-shadow: 0 0 0 3px var(--grape), var(--shadow-lg); z-index: 20; }
.appt.clash { box-shadow: 0 0 0 3px var(--red), var(--shadow-lg) !important; }
.appt:hover { box-shadow: var(--shadow); transform: scale(1.02); z-index: 3; }
.appt-top { display: flex; gap: 4px; align-items: center; }
.appt-top .emoji { font-size: 14px; }
.appt-top b { font-size: 12.5px; }
.appt-top .appt-owner { font-weight: 700; color: var(--ink-2); opacity: .8; }
.appt-sub { font-size: 11px; }
.appt-vet { position: absolute; right: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; }
.appt.st-completato { filter: saturate(.55); }
.appt.st-completato .appt-top b::after { content: ' ✓'; color: var(--mint-dark); }
.appt.st-annullato, .appt.st-rifiutato { opacity: .45; text-decoration: line-through; }
.appt.st-richiesta { background: repeating-linear-gradient(-45deg, var(--sun-soft), var(--sun-soft) 6px, var(--card) 6px, var(--card) 12px); border: 2px dashed var(--sun-dark); border-left-width: 4px; }
.appt.dragging { opacity: .9; box-shadow: var(--shadow-lg); z-index: 20; cursor: grabbing; transform: scale(1.04) rotate(-1deg); }
.appt.resizing { box-shadow: var(--shadow-lg); z-index: 20; cursor: ns-resize; overflow: visible; }
.appt.dragging::after, .appt.resizing::after { content: attr(data-drag-label); position: absolute; right: 4px; bottom: 3px; background: #2A2140; color: #fff; font: 700 11px var(--font); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.appt.resizing::after { bottom: -22px; }
body.no-select { user-select: none; cursor: grabbing; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.cal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
.cal-legend i.dash { border: 2px dashed var(--sun-dark); background: var(--sun-soft); }
.cal-legend i.dash.grape { border-color: var(--grape); background: var(--grape-soft); }
@media (max-width: 760px) { .cal-grid { grid-template-columns: 46px var(--tpl); } .cal.card { max-height: none; } }

/* ---------- fatture ---------- */
button.kpi { text-align: left; cursor: pointer; width: 100%; font: inherit; color: var(--ink); }
button.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.inv-editor { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sticky-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; }
.inv-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 1100px) { .inv-editor { grid-template-columns: minmax(0, 1fr); } .sticky-side { position: static; } }
.price-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 196px; overflow: auto; padding: 2px; }
.price-chip { display: inline-flex; gap: 6px; align-items: center; text-align: left; padding: 6px 10px; border-radius: 99px; border: 2px solid var(--line-2); background: var(--card); font-size: 12.5px; font-weight: 700; color: var(--ink-2); transition: all .15s; max-width: 100%; }
.price-chip > span:not(.emoji) { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-chip:hover { border-color: var(--mint); transform: translateY(-2px); color: var(--ink); }
.price-chip.bump { animation: pop .35s ease; border-color: var(--mint); background: var(--mint-soft); }
.price-chip .emoji { font-size: 18px; }
.price-chip b { color: var(--ink); white-space: nowrap; }
.line-head, .line-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 92px 80px 42px; gap: 6px; align-items: center; }
.line-head { font: 800 11px var(--font); text-transform: uppercase; color: var(--muted); padding: 0 4px 6px; letter-spacing: .04em; }
.line-row { margin-bottom: 6px; }
.line-row .input, .line-row .select { min-height: 40px; padding: 8px 10px; font-size: 14px; }
.line-row .select { padding-right: 26px; background-position: right 8px center; }
@media (max-width: 560px) { .line-head { display: none; } .line-row { grid-template-columns: 1fr 1fr 1fr 42px; } .line-row input[data-k=desc] { grid-column: 1 / -1; } }

.paper { background: #fff; color: #2A2140; border-radius: 18px; padding: 26px 26px 20px; box-shadow: var(--shadow-lg); font-size: 13px; position: relative; overflow: hidden; }
.paper::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, var(--sun), var(--brand), var(--pink), var(--grape)); }
.paper-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.paper-brand { font: 600 17px var(--font-display); margin-bottom: 4px; }
.paper-doc { text-align: right; }
.paper-doc b { font: 700 22px var(--font-display); letter-spacing: .04em; color: #E2571F; }
.paper-to { background: #FFF7EE; border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; }
.paper-to small { display: block; color: #8C84A3; font-weight: 800; font-size: 10.5px; text-transform: uppercase; }
.paper-lines { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.paper-lines th { text-align: left; font-size: 10.5px; text-transform: uppercase; color: #8C84A3; border-bottom: 2px solid #F1E4D3; padding: 6px 4px; }
.paper-lines td { padding: 7px 4px; border-bottom: 1px dashed #F1E4D3; vertical-align: top; }
.paper-lines .num { text-align: right; white-space: nowrap; }
.paper-totals { margin-left: auto; width: min(290px, 100%); display: flex; flex-direction: column; gap: 3px; }
.paper-totals > div { display: flex; justify-content: space-between; gap: 10px; }
.paper-totals .grand { margin-top: 6px; padding-top: 8px; border-top: 2px solid #2A2140; font-size: 16px; }
.paper-totals .grand b { font: 700 19px var(--font-display); }
.paper-foot { margin-top: 16px; color: #8C84A3; }
.paper .tiny { color: #6B6485; }
.paper .muted { color: #8C84A3; }

.steps-flow { display: flex; flex-direction: column; gap: 8px; }
.flow-step { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); opacity: .55; transition: all .3s; font-weight: 700; }
.flow-step .fs-ic { font-size: 22px; }
.flow-step.doing { opacity: 1; background: var(--sky-soft); transform: scale(1.02); }
.flow-step.done { opacity: 1; background: var(--mint-soft); }
.flow-step.fail { opacity: 1; background: var(--red-soft); }
.sdi-timeline { display: flex; flex-direction: column; gap: 4px; position: relative; }
.sdi-ev { display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; font-size: 13.5px; }
.sdi-ev .emoji { font-size: 18px; width: 32px; height: 32px; min-width: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); }
.sdi-ev.consegnata, .sdi-ev.disponibile { background: var(--mint-soft); }
.sdi-ev.scartata { background: var(--red-soft); }
.sdi-ev.waiting { background: var(--sky-soft); align-items: center; }
.xml-view { background: #1E1836; color: #E9E3FF; padding: 16px; border-radius: 14px; font: 12px/1.5 ui-monospace, Consolas, monospace; overflow: auto; max-height: 60vh; white-space: pre; }
.pets-inline { font-size: 18px; letter-spacing: 2px; }
.owner-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .owner-grid { grid-template-columns: minmax(0, 1fr); } }
.owner-av { font-size: 34px; width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--sky-soft); }
.owner-card h1 { font-size: 28px; }
.privacy-card.pv-ok { background: linear-gradient(180deg, var(--mint-soft), var(--card) 120px); }
.privacy-card.pv-todo { background: linear-gradient(180deg, var(--sun-soft), var(--card) 120px); }
.consent-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }

/* ---------- Sistema TS ---------- */
.big-check { width: 20px; height: 20px; accent-color: var(--sky); }
.table tr.sel td { background: var(--sky-soft); border-color: color-mix(in srgb, var(--sky) 40%, var(--line)); }
.sts-send { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: var(--sky-soft); }

/* ---------- REV ---------- */
.rev-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 20px; }
.rev-head h1 { font-size: clamp(24px, 3vw, 34px); margin: 0; }
.stopwatch { display: flex; align-items: center; gap: 10px; background: #2A2140; color: #fff; padding: 10px 18px; border-radius: 22px; box-shadow: var(--shadow); }
.stopwatch .emoji { font-size: 24px; animation: wiggle 1s ease-in-out infinite; }
.stopwatch b { font: 700 30px var(--font-display); font-variant-numeric: tabular-nums; min-width: 86px; }
.stopwatch small { font-weight: 700; opacity: .75; font-size: 12px; }
.stopwatch.warn { background: var(--sun-dark); }
.stopwatch.over { background: var(--red-dark); }
.rev-form { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.step-card { padding-left: 70px; }
.step-n { position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; font: 700 17px var(--font-display); box-shadow: 0 3px 0 var(--pink-dark); }
@media (max-width: 620px) { .step-card { padding-left: 22px; padding-top: 60px; } }
.rx-pcard { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--bg-2); }
.rx-items { display: flex; flex-direction: column; gap: 10px; }
.rx-item { border: 2px solid var(--line-2); border-radius: 18px; padding: 12px 14px; background: var(--card-2); animation: pop .3s ease; }
.rx-item-head { display: flex; gap: 10px; align-items: center; }
.rx-item-head > .emoji { font-size: 24px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border-radius: 12px; padding: 3px; box-shadow: inset 0 0 0 2px var(--line-2); }
.stepper button { width: 30px; height: 30px; border: 0; border-radius: 9px; background: var(--bg-2); font: 700 18px var(--font); }
.stepper b { min-width: 26px; text-align: center; }
.rev-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(min(260px, 100%), 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .rev-layout { grid-template-columns: minmax(0, 1fr); } }
.rx-paper { background: #fff; color: #2A2140; border-radius: 18px; padding: 24px; box-shadow: var(--shadow-lg); font-size: 13px; position: relative; overflow: hidden; border-top: 8px solid #FF6FA8; }
.rx-paper .tiny { color: #6B6485; }
.rx-top { display: flex; justify-content: space-between; gap: 12px; }
.rx-badge { font: 700 26px var(--font-display); color: #FF6FA8; border: 3px solid #FF6FA8; border-radius: 14px; padding: 2px 12px; height: fit-content; transform: rotate(4deg); }
.rx-numbers { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; margin: 18px 0; padding: 14px; border-radius: 14px; background: #FFF2F7; }
.rx-numbers small, .rx-grid small { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: #8C84A3; letter-spacing: .04em; }
.rx-numbers b { font-size: 20px; letter-spacing: .04em; }
.rx-qr { width: 84px; height: 84px; background: #fff; border-radius: 8px; }
.rx-qr svg { width: 84px; height: 84px; }
.rx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-bottom: 14px; }
.rx-grid b { display: block; }
.rx-grid .tiny { display: block; }
.rx-foot { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #F1E4D3; }
.rx-paper.void { opacity: .75; }
.void-stamp { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-18deg); font: 700 54px var(--font-display); color: rgba(217, 52, 79, .55); border: 6px solid rgba(217, 52, 79, .55); padding: 4px 22px; border-radius: 16px; pointer-events: none; }

/* ---------- privacy, recensioni ---------- */
.pv-list { display: flex; flex-direction: column; gap: 6px; }
.pv-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--card-2); border: 2px solid var(--line); color: var(--ink); text-decoration: none !important; }
.pv-row.link:hover { background: var(--bg-2); }
.consent-icons { font-size: 15px; letter-spacing: 2px; }
.rev-summary { display: grid; grid-template-columns: auto 1fr 1fr; gap: 24px; align-items: center; }
@media (max-width: 860px) { .rev-summary { grid-template-columns: minmax(0, 1fr); } }
.rev-tip { display: flex; gap: 10px; background: var(--bg-2); padding: 12px 14px; border-radius: 16px; }
.rev-tip p { margin: 0; }
.rv-list { display: flex; flex-direction: column; gap: 12px; }
.rv-card p { margin-bottom: 0; }
.reply-box { margin-top: 12px; padding-top: 12px; border-top: 2px dashed var(--line); }
.reply-box .toggle-chip { font-size: 12px; padding: 5px 10px; }

/* ---------- strutture ---------- */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 18px; }
.st-card { border-top: 7px solid var(--c); }
.st-card.current { box-shadow: 0 0 0 3px var(--c), var(--shadow); }
.st-here { position: absolute; top: -14px; right: 18px; background: var(--c); color: #fff; font: 600 12px var(--font-display); padding: 4px 12px; border-radius: 99px; }
.st-emoji { font-size: 30px; width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, var(--card)); }
.st-card h3 { margin: 0 0 2px; }
.st-stats { display: flex; gap: 8px; margin-top: 14px; }
.st-stats > div { flex: 1; text-align: center; background: var(--bg-2); border-radius: 14px; padding: 8px 4px; }
.st-stats b { display: block; font: 600 20px var(--font-display); }
.st-stats small { color: var(--muted); font-weight: 700; font-size: 11.5px; }
.st-add { border: 3px dashed var(--line-2); background: transparent; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 260px; color: var(--ink-2); transition: all .2s; }
.st-add:hover { border-color: var(--brand); color: var(--ink); transform: translateY(-3px); }
.st-add .emoji { font-size: 40px; }
.st-add b { font: 600 18px var(--font-display); }
.st-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .st-form { grid-template-columns: minmax(0, 1fr); } }
.swatches { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.swatch { width: 32px; height: 32px; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); transition: transform .15s; }
.swatch input { display: none; }
.swatch.on { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--c); transform: scale(1.05); }
.mini-map { height: 220px; border-radius: 16px; overflow: hidden; background: var(--bg-2); border: 2px solid var(--line); }

/* ---------- postazioni ---------- */
.dev-hero { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; background: radial-gradient(circle at 0 0, var(--mint-soft), transparent 60%), var(--card); }
.dev-count { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 20px; }
.dev-count b { font: 700 84px/1 var(--font-display); color: var(--mint); }
.dev-count span { font-weight: 800; color: var(--ink-2); }
.dev-connect { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.dev-connect .qr svg { width: 150px; height: 150px; }
.dev-connect h3 { margin-bottom: 6px; }
.dev-steps { margin: 0 0 10px; padding-left: 18px; }
@media (max-width: 860px) { .dev-hero { grid-template-columns: minmax(0, 1fr); } }
.dev-grid { display: flex; flex-direction: column; gap: 10px; }
.dev-card { display: flex; gap: 14px; align-items: center; background: var(--card); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-sm); border: 2px solid var(--line); animation: pop .4s ease; }
.dev-card.me { border-color: var(--brand); }
.dev-ic { font-size: 30px; width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--bg-2); }
.xs-av { width: 22px; height: 22px; font-size: 13px; border-radius: 7px; display: inline-grid; vertical-align: -5px; }
.online-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mint); animation: pulse 1.8s infinite; box-shadow: 0 0 0 0 rgba(37, 180, 114, .5); }
.act-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; }
.act-row { display: grid; grid-template-columns: 44px 1fr; gap: 8px; font-size: 13.5px; padding: 8px 10px; border-radius: 12px; background: var(--grape-soft); animation: rise .3s ease; }
.act-row.mine { background: var(--bg-2); }

/* ---------- impostazioni ---------- */
.price-edit { display: flex; flex-direction: column; gap: 6px; }
.pe-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 90px 110px 130px 42px; gap: 6px; align-items: center; }
.pe-row .input, .pe-row .select { min-height: 40px; padding: 8px 10px; font-size: 14px; }
.pe-emoji { text-align: center; font-size: 18px !important; }
@media (max-width: 760px) { .pe-row { grid-template-columns: 50px 1fr 42px; } .pe-row > :nth-child(3), .pe-row > :nth-child(4), .pe-row > :nth-child(5) { grid-column: span 1; } }
.mail-list { display: flex; flex-direction: column; gap: 8px; }
.mail { border: 2px solid var(--line); border-radius: 16px; padding: 10px 14px; background: var(--card-2); }
.mail summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; }
.mail summary::-webkit-details-marker { display: none; }
.mail summary .emoji { font-size: 22px; }
.mail p { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-2); }

/* ---------- abbonamento ---------- */
.sub-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr); gap: 24px; align-items: center; border-top: 7px solid var(--c); background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--c) 16%, transparent), transparent 55%), var(--card); }
.sub-plan { display: flex; gap: 16px; align-items: center; }
.sub-plan h2 { margin: 0; font-size: 32px; }
.sub-plan p { margin: 0; }
.sub-price b { font: 700 40px/1 var(--font-display); }
.sub-price span { font-weight: 800; color: var(--muted); }
@media (max-width: 900px) { .sub-hero { grid-template-columns: minmax(0, 1fr); } }
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; margin-top: 16px; }
.meter-card { background: var(--card); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow-sm); border: 2px solid var(--line); }
.meter { height: 10px; border-radius: 99px; margin-top: 10px; overflow: hidden; background: var(--mint-soft); }
.meter > span { display: block; height: 100%; border-radius: 99px; background: var(--mint); }
.meter.warn { background: var(--sun-soft); } .meter.warn > span { background: var(--sun-dark); }
.meter.danger { background: var(--red-soft); } .meter.danger > span { background: var(--red); }
.meter-val { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.meter-val b { font: 600 26px/1 var(--font-display); }

/* ---------- foto degli animali ---------- */
.pet-av.photo { padding: 0; overflow: hidden; background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 45%, var(--card)); }
.pet-av.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
*:hover > .pet-av.photo, .pet-av.photo:hover { animation: none; transform: scale(1.04); }
.ph-art { position: relative; display: inline-block; }
.photo-btn { position: absolute; right: -6px; bottom: -6px; width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--card); background: var(--brand); color: #fff; font-size: 18px; display: grid; place-items: center; box-shadow: var(--shadow); transition: transform .15s; cursor: pointer; }
.photo-btn:hover { transform: scale(1.12) rotate(-8deg); }
.photo-note { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap; font: 700 11px var(--font); color: var(--muted); }
.photo-pick { display: flex; gap: 16px; align-items: center; padding: 12px; border-radius: 18px; background: var(--bg-2); }
.appt-photo { width: 18px; height: 18px; border-radius: 6px; object-fit: cover; flex: none; }

/* ---------- messaggi ---------- */
.auto-rem { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.auto-rem > .emoji { font-size: 26px; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--sun-soft); }
.chat-layout { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: 16px; height: calc(100vh - 290px); min-height: 460px; }
.chat-layout.client { height: calc(100vh - 250px); }
.chat-list { overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.thread { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; color: var(--ink); text-decoration: none !important; transition: background .15s; }
.thread:hover { background: var(--bg-2); }
.thread.on { background: color-mix(in srgb, var(--brand) 12%, var(--card)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent); }
.th-av { width: 44px; height: 44px; min-width: 44px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; background: var(--bg-2); font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif; }
.th-main { display: flex; flex-direction: column; min-width: 0; }
.th-main b { font: 600 15px var(--font-display); }
.th-main small { font-size: 12.5px; }
.th-pets { display: flex; gap: 3px; margin: 2px 0; }
.th-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.chat-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat-head { display: flex; gap: 10px; align-items: center; padding: 6px 6px 12px; border-bottom: 2px dashed var(--line); flex-wrap: wrap; }
.chat-pets { display: flex; gap: 6px; flex-wrap: wrap; }
.pet-chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px 3px 3px; border-radius: 99px; background: var(--bg-2); font: 700 12.5px var(--font); color: var(--ink); text-decoration: none !important; }
a.pet-chip:hover { background: var(--line); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 14px 6px; display: flex; flex-direction: column; gap: 6px; background: radial-gradient(circle at 100% 0, var(--pink-soft), transparent 40%), radial-gradient(circle at 0 100%, var(--sun-soft), transparent 40%); border-radius: 16px; margin: 10px 0; }
.chat-empty { flex: 1; display: grid; place-content: center; text-align: center; color: var(--muted); padding: 30px; }
.chat-empty .big-emoji { font-size: 54px; display: block; margin-bottom: 8px; }
.chat-day { text-align: center; margin: 10px 0 4px; }
.chat-day span { font: 800 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--card); padding: 3px 10px; border-radius: 99px; box-shadow: var(--shadow-sm); }
.msg { display: flex; flex-direction: column; max-width: min(78%, 560px); animation: pop .25s ease both; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.theirs { align-self: flex-start; align-items: flex-start; }
.msg-author { font: 700 11.5px var(--font); color: var(--muted); margin: 0 10px 2px; }
.msg-bubble { padding: 10px 14px; border-radius: 20px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--shadow-sm); }
.msg.theirs .msg-bubble { background: var(--card); border-bottom-left-radius: 6px; }
.msg.mine .msg-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 6px; }
.msg.mine.auto .msg-bubble { background: color-mix(in srgb, var(--brand) 70%, var(--grape)); }
.msg.theirs.auto .msg-bubble { background: var(--sun-soft); }
.msg time { font: 700 10.5px var(--font); color: var(--muted); margin: 3px 8px 0; }
.msg.system { align-self: center; max-width: 92%; flex-direction: row; gap: 8px; align-items: center; background: var(--card); border: 2px dashed var(--line-2); padding: 8px 12px; border-radius: 16px; font-size: 13px; color: var(--ink-2); }
.msg.system .emoji { font-size: 18px; }
.msg.system time { margin: 0; white-space: nowrap; }
.chat-compose { border-top: 2px dashed var(--line); padding-top: 10px; }
.quick-replies { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.chat-tip { display: block; margin: -2px 0 8px; padding: 7px 12px; border-radius: 12px; background: var(--grape-soft); color: var(--ink-2) !important; font-size: 12.5px; text-decoration: none !important; }
.chat-tip:hover { color: var(--ink) !important; }
.quick-replies .toggle-chip { flex: none; font-size: 12.5px; padding: 6px 12px; }
.compose-row { display: flex; gap: 8px; align-items: flex-end; }
.compose-row textarea { resize: none; min-height: 46px; max-height: 140px; border-radius: 18px; }
.compose-row .btn.icon { width: 48px; min-width: 48px; min-height: 46px; }
.msg-btn { position: relative; }
.msg-btn .nb { position: absolute; top: -8px; right: -8px; box-shadow: 0 0 0 3px var(--card); }
.cm-title { font-size: clamp(26px, 3vw, 36px); }
.only-mobile-flex { display: none !important; }
@media (max-width: 900px) {
  .chat-layout, .chat-layout.client { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .chat-layout.has-active .chat-list { display: none; }
  .chat-layout:not(.has-active) .chat-pane { display: none; }
  .chat-pane { height: calc(100vh - 200px); min-height: 420px; }
  .only-mobile-flex { display: inline-grid !important; }
}
.chat-head .grow { min-width: 150px; }
.chat-head .chat-pets { flex-basis: 100%; order: 5; padding-left: 54px; }
@media (max-width: 900px) { .chat-head .chat-pets { padding-left: 0; } }
.todo.pink { background: var(--pink-soft); }