/* Ciaoly — design system originale (docs/UI_DESIGN.md) */
:root {
  --primary: #0F5C6E; --primary-600: #0B4A59; --primary-50: #E7F2F4;
  --ai: #E86A4A; --ai-50: #FDEEE9;
  --ok: #1E7F4F; --ok-50: #E5F4EC; --warn: #9A5B00; --warn-50: #FFF4DC; --err: #B42318; --err-50: #FDECEA;
  --bg: #F6F5F2; --card: #FFFFFF; --line: #E3E0DA; --text: #1D2327; --muted: #5E666C;
  --chat-bg: #ECE5DD; --bubble-in: #FFFFFF; --bubble-out: #D9FDD3;
  --r: 12px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text); background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.45; }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; } h2 { font-size: 1.15rem; margin: 0 0 .75rem; } h3 { font-size: 1rem; margin: 0 0 .5rem; }
p { margin: .25rem 0 .75rem; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid #F4B400; outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 99; }
.boot { padding: 2rem; color: var(--muted); }
.muted { color: var(--muted); } .small { font-size: .85rem; } .right { text-align: right; } .nowrap { white-space: nowrap; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; } .grow { flex: 1; }
.stack > * + * { margin-top: .75rem; }
.grid { display: grid; gap: 1rem; } .g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .g4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Layout */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side { background: var(--primary); color: #fff; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .25rem; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; padding: .25rem .5rem 1rem; }
.brand img { width: 32px; height: 32px; }
.brand small { display: block; font-weight: 400; opacity: .8; font-size: .75rem; }
.nav a { display: flex; align-items: center; gap: .6rem; color: #E8F3F5; text-decoration: none; padding: .55rem .7rem; border-radius: 9px; font-size: .95rem; }
.nav a:hover { background: rgba(255,255,255,.1); }
.nav a[aria-current="page"] { background: #fff; color: var(--primary); font-weight: 600; }
.nav .ico { width: 1.3rem; text-align: center; }
.side .foot { margin-top: auto; font-size: .82rem; opacity: .9; padding: .5rem; }
.side .foot button { margin-top: .4rem; }
main { padding: 1.25rem 1.5rem 5rem; max-width: 1280px; width: 100%; min-width: 0; }
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.bottomnav { display: none; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  main { padding: 1rem .8rem 5.5rem; }
  .bottomnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); z-index: 20; }
  .bottomnav a { text-align: center; text-decoration: none; color: var(--muted); font-size: .72rem; padding: .45rem 0 .55rem; }
  .bottomnav a .ico { display: block; font-size: 1.2rem; }
  .bottomnav a[aria-current="page"], .bottomnav .morebtn[aria-current="page"] { color: var(--primary); font-weight: 700; }
  .bottomnav .morebtn { display: flex; flex-direction: column; align-items: center; background: none; border: 0; color: var(--muted); font: inherit; font-size: .72rem; padding: .45rem 0 .55rem; cursor: pointer; }
  .bottomnav .morebtn .ico { display: block; font-size: 1.2rem; }
  .moresheet { position: fixed; left: 0; right: 0; bottom: 3.6rem; max-height: 70vh; overflow-y: auto; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(0,0,0,.15); z-index: 21; padding: .5rem .75rem 1rem; }
  .moresheet[hidden] { display: none; }
  .moresheet .nav a { display: flex; gap: .6rem; align-items: center; padding: .7rem .5rem; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
  .moresheet .nav a[aria-current="page"] { color: var(--primary); font-weight: 700; }
  .moresheet .foot { display: flex; justify-content: space-between; align-items: center; padding-top: .75rem; color: var(--muted); }
}

/* Componenti */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.kpi .v { font-size: 1.7rem; font-weight: 700; } .kpi .l { color: var(--muted); font-size: .85rem; }
button, .btn { font: inherit; border: 1px solid transparent; border-radius: 9px; padding: .55rem .95rem; cursor: pointer; background: var(--primary); color: #fff; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; }
button:hover { background: var(--primary-600); }
button.secondary { background: #fff; color: var(--primary); border-color: var(--primary); }
button.ghost { background: transparent; color: var(--primary); border-color: transparent; }
button.ai { background: var(--ai); } button.ai:hover { background: #cf583a; }
button.danger { background: #fff; color: var(--err); border-color: var(--err); }
button.small { padding: .3rem .6rem; min-height: 32px; font-size: .85rem; }
button:disabled { opacity: .55; cursor: not-allowed; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
input, select, textarea { font: inherit; width: 100%; padding: .55rem .7rem; border: 1px solid #C9C4BB; border-radius: 9px; background: #fff; color: var(--text); }
textarea { min-height: 90px; resize: vertical; }
.field { margin-bottom: .85rem; } .field .hint { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.field .err { font-size: .82rem; color: var(--err); margin-top: .2rem; }
.check { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; } .check input { width: auto; margin-top: .25rem; }
.badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: .12rem .5rem; border-radius: 99px; background: var(--primary-50); color: var(--primary); }
.badge.ai { background: var(--ai-50); color: #A43E22; } .badge.ok { background: var(--ok-50); color: var(--ok); }
.badge.warn { background: var(--warn-50); color: var(--warn); } .badge.err { background: var(--err-50); color: var(--err); }
.banner { border-radius: var(--r); padding: .75rem 1rem; margin-bottom: 1rem; border: 1px solid; }
.banner.warn { background: var(--warn-50); border-color: #F2D49A; color: #6B4100; } .banner.err { background: var(--err-50); border-color: #F3B8B2; color: var(--err); }
.banner.info { background: var(--primary-50); border-color: #B9DAE0; color: var(--primary-600); }
table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs button { background: #fff; color: var(--text); border: 1px solid var(--line); font-weight: 500; border-radius: 99px; min-height: 34px; padding: .3rem .85rem; }
.tabs button[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
#toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 50; }
#toast .t { background: #1D2327; color: #fff; padding: .6rem 1rem; border-radius: 10px; margin-top: .4rem; box-shadow: var(--shadow); }
#toast .t.err { background: var(--err); }
.switch { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.switch button { border-radius: 0; background: #fff; color: var(--text); border: 0; font-weight: 500; }
.switch button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.switch button.pause[aria-pressed="true"] { background: var(--warn); }

/* Auth */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: linear-gradient(135deg, #0F5C6E 0%, #134e5e 55%, #E86A4A 160%); }
.auth .card { width: 100%; max-width: 440px; padding: 1.6rem; }
.auth .brand { color: var(--primary); padding: 0 0 1rem; }

/* Wizard */
.steps { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.steps button { background: #fff; color: var(--muted); border: 1px solid var(--line); font-weight: 500; font-size: .85rem; min-height: 32px; padding: .25rem .6rem; }
.steps button.done { color: var(--ok); border-color: #A9D8BE; }
.steps button[aria-current="step"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.svc-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: .5rem; align-items: end; margin-bottom: .5rem; }
.hours-row { display: grid; grid-template-columns: 110px 1fr 1fr 1fr 1fr 90px; gap: .4rem; align-items: center; margin-bottom: .4rem; }
@media (max-width: 640px) { .svc-row { grid-template-columns: 1fr 1fr; } .hours-row { grid-template-columns: 1fr 1fr; } }

/* Inbox */
.inbox { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; min-height: 70vh; }
.convlist { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.convlist .filters { padding: .75rem; border-bottom: 1px solid var(--line); }
.convlist ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 70vh; }
.convlist li button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: .7rem .85rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.convlist li button:hover, .convlist li button[aria-current="true"] { background: var(--primary-50); }
.convlist .name { font-weight: 600; } .convlist .last { color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .inbox { grid-template-columns: 1fr; } .inbox.detail .convlist { display: none; } .inbox:not(.detail) .thread { display: none; } }

/* Chat */
.chat { background: var(--chat-bg); border-radius: var(--r); padding: .9rem; display: flex; flex-direction: column; gap: .45rem; min-height: 280px; max-height: 58vh; overflow-y: auto; }
.bubble { max-width: 82%; padding: .45rem .7rem .3rem; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.08); white-space: pre-wrap; word-wrap: break-word; }
.bubble.in { background: var(--bubble-in); align-self: flex-start; border-top-left-radius: 2px; }
.bubble.out { background: var(--bubble-out); align-self: flex-end; border-top-right-radius: 2px; }
.bubble .meta { font-size: .7rem; color: var(--muted); text-align: right; margin-top: .15rem; }
.bubble.out.ai .who { color: #A43E22; } .bubble .who { font-size: .72rem; font-weight: 700; color: var(--primary); }
.draft { border: 2px dashed var(--ai); background: var(--ai-50); border-radius: var(--r); padding: .85rem; }
.draft .body { white-space: pre-wrap; background: #fff; border-radius: 9px; padding: .6rem .75rem; border: 1px solid #F4C7B9; }
.why { font-size: .85rem; } .why ul { margin: .2rem 0 .4rem 1.1rem; padding: 0; }
.composer { display: flex; gap: .5rem; margin-top: .6rem; } .composer textarea { min-height: 44px; height: 44px; }

/* Simulatore */
.sim { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 1rem; align-items: start; }
.phone { background: #111; border-radius: 34px; padding: 12px; box-shadow: var(--shadow); }
.phone .screen { background: var(--chat-bg); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; height: 620px; }
.phone .bar { background: #075E54; color: #fff; padding: .7rem 1rem; font-weight: 600; display: flex; gap: .6rem; align-items: center; }
.phone .bar .av { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.phone .bar .av img { width: 26px; }
.phone .chat { border-radius: 0; flex: 1; max-height: none; }
.phone form { display: flex; gap: .4rem; padding: .5rem; background: #F0F0F0; }
.phone form input { border-radius: 99px; }
.phone form button { border-radius: 99px; background: #00A884; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips button { background: #fff; color: var(--text); border: 1px solid var(--line); font-weight: 500; font-size: .82rem; min-height: 30px; padding: .2rem .6rem; border-radius: 99px; }
@media (max-width: 860px) { .sim { grid-template-columns: 1fr; } .phone .screen { height: 520px; } }

/* Agenda */
.agenda { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: .5rem; overflow-x: auto; }
.agenda .day { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .5rem; min-height: 140px; }
.agenda .day h3 { font-size: .85rem; } .agenda .bk { background: var(--primary-50); border-left: 3px solid var(--primary); padding: .3rem .4rem; border-radius: 6px; font-size: .8rem; margin-bottom: .3rem; }
.agenda .bk.ai { border-left-color: var(--ai); background: var(--ai-50); }
.agenda .bk.busy { border-left-color: var(--muted, #888); background: repeating-linear-gradient(45deg, rgba(127,127,127,.08) 0 6px, transparent 6px 12px); color: var(--muted, #666); }
code { word-break: break-all; font-size: .8rem; background: var(--primary-50); padding: .15rem .35rem; border-radius: 4px; }
.bars .bar { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; } .bars .bar > span { display: block; height: 100%; background: var(--primary); }
.bars .bar.warn > span { background: var(--warn); } .bars .bar.err > span { background: var(--err); }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: .5rem; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .7rem; color: var(--muted); }
.chart .col span.b { width: 100%; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 2px; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; background: #F1EFEA; padding: .1rem .35rem; border-radius: 5px; }
.btn.secondary { background: #fff; color: var(--primary); border-color: var(--primary); }
.scroll { overflow-x: auto; }
.chips button[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.card + .card, .grid + .card, .card + .grid, .tabs + .card { margin-top: 1rem; }
.grid > .card, .grid > .card + .card { margin-top: 0; }
details > summary { cursor: pointer; list-style: none; padding: .15rem 0; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '▸ '; color: var(--muted); }
details[open] > summary::before { content: '▾ '; }
details[open] > summary { margin-bottom: .6rem; }
.faq-item { border-top: 1px solid var(--line); padding: .6rem 0; }
.faq-item:first-of-type { border-top: 0; }
.faq-item p { margin: .2rem 0 0; white-space: pre-wrap; }
.faq-preview { max-height: 380px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
tr.muted td { color: var(--muted); }
.live-on { background: var(--ok-50); border: 1px solid #A9D8BE; border-radius: 9px; padding: .5rem .6rem; }
.tpl { border: 1px solid var(--line); border-radius: 10px; padding: .75rem; background: #fff; }
.err-text { color: var(--err); font-weight: 600; }
/* campi segreti: testo mascherato (non "password") così il gestore password del browser non li riempie con le credenziali di accesso */
input.secret { -webkit-text-security: disc; text-security: disc; font-family: monospace; }
/* Verticale Telecomunicazioni: ticket */
.tk-details { white-space: pre-wrap; margin: 0; background: var(--bg, #f6f7f9); padding: .5rem .6rem; border-radius: 8px; font-family: inherit; }
.row.wrap { flex-wrap: wrap; gap: .5rem; }
.row.wrap input { flex: 1 1 220px; }
.row.wrap select { width: auto; flex: 0 1 190px; }