/* ============================================================
   Vita Condivisa 5.108.0 · AUDIT GRAFICO COMPLETO
   Ultimo layer: corregge incoerenze accumulate senza cambiare gameplay.
   ============================================================ */

:root{
  --vc-ui-gap:12px;
  --vc-ui-radius:18px;
  --vc-ui-soft-shadow:0 10px 28px rgba(74,55,40,.07);
  --vc-ui-modal-shadow:0 24px 72px rgba(42,31,25,.24);
}

/* 1 · Guardrail globali: nessun figlio deve allargare pagine/card/modali. */
:where(.screen,.card,.modal,.phone-device,.phone-app-screen,.phone-quick-scroll,
       .settings-clean-main,.settings-section,.house-card,.home-plan,
       .relationship-profile-modal,.household-modal,.pet-modal,.finance-modal,
       .grocery-modal,.restaurant-modal,.world-city-modal,.world-travel-modal,
       .furniture-store-modal,.wardrobe-modal,.health-modal,.work-day-modal,
       .city-map-modal,.chronicle-recap-modal,.chronicle-chapter-modal) *{
  min-width:0;
}
:where(.modal,.card,.phone-device,.phone-app-screen,.settings-section,
       .house-card,.relationship-profile-modal,.household-modal,.pet-modal) :where(p,small,strong,em,label,span){
  overflow-wrap:break-word;
  word-break:normal;
}
:where(.modal,.card,.phone-device) img{max-width:100%}
:where(.modal,.card,.phone-device) :where(input,select,textarea){max-width:100%}
:where(.modal,.card) table{max-width:100%}

/* 2 · Finestre: stessa geometria, scroll affidabile, nessun footer irraggiungibile. */
.modal-backdrop{
  overflow:hidden;
  overscroll-behavior:contain;
}
.modal{
  width:min(680px,100%);
  max-width:calc(100vw - 28px);
  max-height:calc(100dvh - 150px);
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  box-shadow:var(--vc-ui-modal-shadow);
  line-height:1.45;
}
.modal:focus{outline:none}
.modal> :first-child{margin-top:0}
.modal> :last-child{margin-bottom:0}
.modal h2{line-height:1.12;margin-top:2px}
.modal h3{line-height:1.2}
.modal .story-text{max-width:78ch;line-height:1.62}
.modal .dialogue{max-width:100%;line-height:1.55}
.modal .divider{margin:16px 0}
.modal .section-head{align-items:flex-start;gap:10px}
.modal .section-head>div{min-width:0}
.modal .section-head h3{margin-bottom:3px}
.modal .section-head p,.modal .section-head small{line-height:1.4}
.modal>.btn-row:last-child{
  position:sticky;
  bottom:-1px;
  z-index:8;
  margin:18px -4px -4px;
  padding:10px 4px 4px;
  background:linear-gradient(to bottom,rgba(255,250,244,0),rgba(255,250,244,.96) 20%,var(--surface) 46%);
}

/* Finestre larghe: larghe solo quando servono, mai oltre viewport. */
:where(.wide-social,.wide-finance,.bank-hub-modal,.city-map-modal,.world-city-modal,
       .world-travel-modal,.furniture-store-modal,.residence-agency-modal,
       .family-care-modal,.family-life-modal,.generation-modal,.generation-guide-modal,
       .formalization-roster-modal,.home-plan-modal,.restaurant-modal,
       .early-childhood-modal,.act6-tracks-modal){
  max-width:calc(100vw - 28px)!important;
}

/* 3 · Pulsanti: dimensioni e testo coerenti in tutte le sottofinestre. */
:where(.btn,.option-btn,.choice,.mini-link,.filter-chip,.text-btn,
       .social-option,.social-activity,.phone-full-app-btn){
  max-width:100%;
  white-space:normal;
  overflow-wrap:break-word;
  line-height:1.3;
}
.btn-row{align-items:stretch}
.btn-row>.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.option-btn{line-height:1.4}
.option-btn .small{white-space:normal}
.section-head>.btn-row{justify-content:flex-end}

/* 4 · Form, filtri e selettori. */
.field input,.field select,.field textarea,
.modal input,.modal select,.modal textarea{
  width:100%;
}
.filter-row,.formal-roster-filters,.wardrobe-contexts,.pet-walk-status-strip{
  max-width:100%;
}
.filter-chip{flex:0 0 auto}

/* 5 · Home / Cosa vuoi fare / card: gerarchia più uniforme. */
.home-clean-layout,.home-layout,.home-layout-balanced,.home-middle-column,.home-side-column,
.home-clean-main,.home-clean-side,.action-browser,.action-list,.rooms-viva{min-width:0}
.action-list{max-width:100%;overflow-x:hidden}
.action{min-width:0}
.action>div{min-width:0}
.action-title,.action-meta{overflow-wrap:break-word}
.action-section-title{margin-top:8px}
.house-card,.home-now-card,.finance-home-card{max-width:100%}
.room,.room-viva,.room-mobile-body{min-width:0}
.room-person-chip{max-width:100%}

/* Casa Viva Canvas: non toccare il renderer, solo il contenitore. */
.home-plan,.hp-map-scroll,.hp-selected,.hp-room-details{max-width:100%}
.hp-header>div,.hp-selection-head>div{min-width:0}
.hp-header h3,.hp-selected strong{overflow-wrap:break-word}

/* 6 · Impostazioni. */
.settings-page-head>div{min-width:0}
.settings-status-strip>span{max-width:100%}
.settings-index{max-width:100%}
.settings-index a{min-width:0}
.settings-index a>div{min-width:0}
.settings-section,.settings-details,.settings-subdetails{max-width:100%}
.setting-row{gap:14px}
.setting-copy{min-width:0}
.setting-copy span{line-height:1.45}
.difficulty-preset>div{min-width:0}
.difficulty-preset small{overflow-wrap:break-word}
.setting-range{max-width:100%}

/* 7 · Telefono: titolo, righe e sotto-app non devono più comprimersi a colonna. */
.phone-device,.phone-device-body,.phone-app-screen{min-width:0;max-width:100%}
.phone-app-header{grid-template-columns:34px minmax(0,1fr) 34px}
.phone-app-header>div{min-width:0;width:auto}
.phone-app-header strong,.phone-app-header small{
  display:block;
  min-width:0;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
  line-height:1.25;
}
.phone-app-header.thread{grid-template-columns:32px 36px minmax(0,1fr) 32px 32px auto}
.phone-quick-scroll,.phone-chat-scroll,.phone-thread-list,.phone-call-list{
  min-width:0;
  overflow-x:hidden;
  scrollbar-gutter:stable;
}
:where(.phone-thread-row,.phone-contact-row,.phone-rel-row,.phone-bank-due,
       .phone-service-booking,.phone-pet-block,.phone-work-block,.phone-agenda-event,
       .phone-notice-row,.phone-health-actions,.phone-bank-open)>*{min-width:0}
.phone-mini-title{gap:8px;min-width:0}
.phone-mini-title>*{min-width:0}
.phone-mini-title span{max-width:55%;white-space:normal;text-align:right;overflow-wrap:break-word}
.phone-full-app-btn{height:auto;padding:10px 12px}
.phone-empty{max-width:100%}
.phone-empty small{line-height:1.45}

/* 8 · Relazioni / NPC / famiglia. */
.social-head>div,.profile-modal-head>div,.portrait-profile-copy,
.relationship-context-copy,.npc-story-head>div,.generation-head>div{min-width:0}
.social-head h2,.profile-modal-head h2,.relationship-context-title{overflow-wrap:break-word}
.social-option>div,.social-activity,.relationship-context-card,.npc-story-card{min-width:0}
.social-option small,.social-activity small{line-height:1.4}
.social-activity-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.relationship-profile-footer,.family-life-footer,.formal-date-footer{gap:8px;flex-wrap:wrap}
.relationship-profile-footer .btn,.family-life-footer .btn,.formal-date-footer .btn{max-width:100%}
.family-home-resident>div,.family-home-city-head div{min-width:0}
.family-home-resident strong,.family-home-resident small{overflow-wrap:break-word}

/* 9 · Storia / Cronaca / guide. */
.guide-intro-list>div,.chronicle-chapter,.chronicle-recap-people,
.story-skill-choice,.act6-clue-grid>div,.act6-evidence{min-width:0}
.guide-intro-list>div>div,.chronicle-recap-people>div{min-width:0}
.chronicle-chapter small,.chronicle-recap-people small,.story-skill-choice small{line-height:1.45}
.act6-clue-grid,.act6-evidence-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* 10 · Negozi / supermercato / ristoranti / guardaroba. */
.grocery-modal,.furniture-store-modal,.wardrobe-shop-modal,.pet-store-modal,.restaurant-modal{overflow-x:hidden}
.grocery-cart,.grocery-cart-actions,.grocery-recipe-strip,.recipe-card-head,
.pet-shop-item,.furniture-shop-card,.wardrobe-item{min-width:0;max-width:100%}
.grocery-cart strong,.recipe-card-head strong,.pet-shop-item strong{overflow-wrap:break-word}
.grocery-cart-actions,.furniture-buy-actions,.wardrobe-shop-buy-actions{display:flex;flex-wrap:wrap;gap:8px}
.pet-shop-grid,.furniture-shop-grid{min-width:0}
.restaurant-receipt>*{min-width:0}

/* 11 · Banca / lavoro / calendario / salute / istruzione. */
.bank-hub-modal,.finance-modal,.work-day-modal,.health-modal,.education-modal{overflow-x:hidden}
.bank-contract-grid,.bank-offer-grid,.work-stats-grid,.education-program-grid{min-width:0}
.bank-contract-grid>*,.bank-offer-grid>*,.work-stats-grid>*,.education-program-card{min-width:0}
.bank-moves,.phone-bank-transactions{max-width:100%}
.finance-action-footer,.card-footer-actions{display:flex;flex-wrap:wrap;gap:8px}
.finance-action-footer .btn,.card-footer-actions .btn{max-width:100%}

/* 12 · Animali: tutte le Fasi 1–6. */
.pet-profile-head>div,.pet-dominant-mood>div,.pet-behavior-now>div,
.pet-rel-person,.pet-training-row>div,.pet-animal-friend-row>div,
.pet-memorial-card>div,.pet-vet-services article,.pet-care-services-modal article{min-width:0}
.pet-traits,.pet-behavior-habits,.pet-training-preview{max-width:100%}
.pet-rel-list{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.pet-training-row{max-width:100%}
.pet-training-row button{max-width:100%;white-space:normal}
.pet-vet-services{min-width:0}
.pet-vet-services article>.btn,.pet-vet-services article>button{max-width:100%}
.pet-memorial-card strong,.pet-memorial-card small,.pet-behavior-recent strong{overflow-wrap:break-word}

/* 13 · Mappe / viaggi / città. */
.city-map-modal,.world-city-modal,.world-travel-modal,.transport-network-modal,.transport-route-modal{overflow-x:hidden}
.city-map-head,.city-map-foot,.world-city-explore-head{min-width:0}
.city-map-head p,.city-map-foot>span,.world-place-action .small{max-width:100%;overflow-wrap:break-word}
.city-map-foot{gap:8px;flex-wrap:wrap}
.city-map-foot .btn{max-width:100%}

/* 14 · Toast / notifiche: mai tutta pagina. */
.toast-root{pointer-events:none}
.toast{max-width:min(440px,calc(100vw - 24px));max-height:min(42dvh,360px);overflow:auto;pointer-events:auto}
.mobile-important-notice,.important-notice-modal{max-width:calc(100vw - 24px)}

/* 15 · Tablet: griglie dense diventano elastiche. */
@media(max-width:900px){
  .modal{max-width:calc(100vw - 16px);max-height:calc(100dvh - 136px)}
  .modal>.btn-row:last-child{margin-left:-2px;margin-right:-2px}
  .grid.two,.grid.three,.settings-clean-layout,.phone-dashboard{grid-template-columns:1fr}
  .difficulty-presets,.settings-save-grid,.social-bond-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .invite-step-grid,.act6-clue-grid,.act6-evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .furniture-shop-grid,.pet-shop-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  .phone-app-header{grid-template-columns:40px minmax(0,1fr) 40px}
  .phone-app-header.thread{grid-template-columns:40px 40px minmax(0,1fr) 40px 40px auto}
}

/* 16 · Mobile: bottom-sheet leggibile, azioni raggiungibili, zero overflow. */
@media(max-width:620px){
  .modal-backdrop{padding-left:0;padding-right:0;padding-bottom:0}
  .modal{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - max(8px,env(safe-area-inset-top)))!important;
    border-radius:24px 24px 0 0!important;
    padding:16px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .modal>.btn-row:last-child{
    margin:16px -4px calc(-10px - env(safe-area-inset-bottom));
    padding:12px 4px calc(10px + env(safe-area-inset-bottom));
  }
  .modal>.btn-row:last-child>.btn{flex:1 1 100%}
  .modal h2{font-size:clamp(22px,7vw,27px)}
  .modal .story-text{line-height:1.55}
  .dialogue{border-left-width:3px}
  .section-head{align-items:flex-start}
  .section-head>.btn,.section-head>.text-btn{width:100%}
  .difficulty-presets,.settings-save-grid,.social-bond-summary,
  .invite-step-grid,.act6-clue-grid,.act6-evidence-grid,
  .pet-walk-result-grid,.pet-senior-grid{grid-template-columns:1fr}
  .settings-status-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-status-strip>span:last-child:nth-child(odd){grid-column:1/-1}
  .settings-section-head,.settings-zone-title{grid-template-columns:36px minmax(0,1fr)}
  .setting-row{align-items:flex-start}
  .phone-app-header{grid-template-columns:40px minmax(0,1fr) 40px!important}
  .phone-app-header.thread{grid-template-columns:36px 36px minmax(0,1fr) 36px 36px auto!important}
  .phone-mini-title{align-items:flex-start}
  .phone-mini-title span{max-width:48%;font-size:var(--vc-fs-9,9px)}
  .social-head{grid-template-columns:58px minmax(0,1fr)}
  .social-activity-grid{grid-template-columns:1fr}
  .pet-training-row{grid-template-columns:32px minmax(0,1fr) auto}
  .pet-training-row>button.ghost{grid-column:2/-1;width:100%}
  .family-home-resident{grid-template-columns:46px minmax(0,1fr)}
  .family-home-resident>b{grid-column:2;white-space:normal}
  .city-map-foot,.finance-action-footer,.card-footer-actions{display:grid;grid-template-columns:1fr;width:100%}
  .city-map-foot .btn,.finance-action-footer .btn,.card-footer-actions .btn{width:100%}
}

/* 17 · Telefoni stretti e caratteri grandi. */
@media(max-width:390px){
  .modal{padding-left:12px;padding-right:12px}
  .card{max-width:100%}
  .phone-app-header.thread{grid-template-columns:34px 34px minmax(0,1fr) 34px 34px auto!important;gap:3px}
  .phone-app-header.thread>button{width:34px;height:34px}
  .phone-app-header.thread img{width:34px;height:34px}
  .phone-app-header strong{font-size:var(--vc-fs-14,14px)}
  .phone-app-header small{font-size:var(--vc-fs-9,9px)}
  .btn-row>.btn{flex:1 1 100%}
  .pet-memorial-card{grid-template-columns:40px minmax(0,1fr) auto}
}

/* 18 · Focus coerente, senza cambiare la palette del gioco. */
:where(.btn,.icon-btn,.option-btn,.choice,.filter-chip,.text-btn,.mini-link,
       .social-option,.phone-full-app-btn,.phone-app-header button):focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 34%,transparent);
  outline-offset:2px;
}

/* 19 · Preferenze di movimento: niente animazioni decorative se ridotte. */
@media(prefers-reduced-motion:reduce){
  .modal,.card,.btn,.option-btn,.choice,.social-option,.pet-walk-mode{scroll-behavior:auto!important}
}

/* 5.111.4 · Telefono — thread vuoti compatti.
   Evita che “Inizia la conversazione” galleggi nel mezzo di un grande spazio vuoto. */
.phone-thread-screen .phone-chat-scroll.is-empty{
  min-height:0!important;
  padding:8px 10px 4px!important;
}
.phone-thread-screen .phone-chat-scroll.is-empty .phone-empty.compact{
  margin:0 auto!important;
  padding:10px 12px 8px!important;
  min-height:0;
}
.phone-thread-screen .phone-chat-scroll.is-empty .phone-empty.compact>span{
  font-size:22px;
}
.phone-thread-screen .phone-chat-scroll.is-empty .phone-empty.compact strong{
  margin-top:1px;
}
@media(max-width:560px){
  .phone-thread-screen .phone-chat-scroll.is-empty{
    padding:6px 8px 2px!important;
  }
  .phone-thread-screen .phone-chat-scroll.is-empty .phone-empty.compact{
    padding:8px 10px 6px!important;
  }
}


/* 5.111.5 · Telefono — thread vuoto strutturalmente compatto.
   Non usa più .phone-chat-scroll: nessuna area flessibile può crescere tra header e composer. */
.phone-thread-screen .phone-thread-empty{
  box-sizing:border-box;
  width:100%;
  flex:0 0 auto!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:12px 14px 9px!important;
  display:grid;
  justify-items:center;
  align-content:start;
  gap:4px;
  text-align:center;
  color:var(--muted);
}
.phone-thread-screen .phone-thread-empty>span{font-size:22px;line-height:1}
.phone-thread-screen .phone-thread-empty>strong{font-size:var(--ui-label);line-height:1.25;color:var(--ink)}
.phone-thread-screen .phone-thread-empty>small{max-width:320px;font-size:var(--ui-small);line-height:1.4}
@media(max-width:560px){
  .phone-thread-screen .phone-thread-empty{padding:9px 12px 7px!important;gap:3px}
}


/* 5.111.6 · Telefono — empty thread bilanciato come una vera chat.
   Lo spazio libero appartiene al messaggio iniziale; stato/composer restano in fondo. */
.phone-thread-screen.empty-thread{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  min-height:0;
}
.phone-thread-screen.empty-thread>.phone-app-header{flex:0 0 auto}
.phone-thread-screen.empty-thread>.phone-thread-empty{
  flex:1 1 auto!important;
  min-height:120px!important;
  padding:18px 16px!important;
  align-content:center!important;
  justify-content:center;
}
.phone-thread-screen.empty-thread>.phone-chat-status,
.phone-thread-screen.empty-thread>.phone-home-invite-context,
.phone-thread-screen.empty-thread>.phone-neighbor-context,
.phone-thread-screen.empty-thread>.phone-preset-bar,
.phone-thread-screen.empty-thread>.phone-composer-note{flex:0 0 auto}
.phone-thread-screen.empty-thread>.phone-preset-bar{margin-top:0}
.phone-thread-screen.empty-thread>.phone-composer-note{padding-bottom:max(10px,env(safe-area-inset-bottom))}
@media(max-width:560px){
  .phone-thread-screen.empty-thread>.phone-thread-empty{min-height:96px!important;padding:14px 12px!important}
}

/* 5.113.0 · Prestazioni Fase 5 — Performance Engine & Stress Test */
.performance-settings-card{scroll-margin-top:96px}
.performance-mini-grid,.performance-budget-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.performance-mini-grid>div,.performance-budget{min-width:0;border:1px solid var(--line);background:var(--panel,#fff);border-radius:14px;padding:11px 12px;display:flex;flex-direction:column;gap:3px}
.performance-mini-grid small,.performance-budget small{color:var(--muted);font-size:var(--ui-small)}
.performance-mini-grid strong,.performance-budget strong{font-size:var(--ui-label);overflow-wrap:anywhere}
.performance-budget span{font-size:var(--ui-small);font-weight:700}
.performance-budget.good{border-color:rgba(67,137,91,.35)}
.performance-budget.warn{border-color:rgba(188,133,36,.42)}
.performance-budget.bad{border-color:rgba(180,70,70,.45)}
.performance-budget.unknown{opacity:.78}
.performance-table{display:grid;gap:8px;margin:10px 0 16px}
.performance-table>div{display:grid;grid-template-columns:minmax(120px,1fr) auto;gap:2px 14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.performance-table>div strong{overflow-wrap:anywhere}
.performance-table>div span{font-weight:800;font-variant-numeric:tabular-nums}
.performance-table>div small{grid-column:1/-1;color:var(--muted)}
.performance-stress-result{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:10px 0 16px;background:var(--panel,#fff)}
.performance-stress-result>strong{font-size:1.05em}
.performance-stress-result>span{font-variant-numeric:tabular-nums}
.performance-stress-result>small{color:var(--muted);line-height:1.45}
.modal.performance-modal{width:min(900px,calc(100vw - 32px));max-height:min(88vh,860px);overflow:auto;overscroll-behavior:contain}
@media(max-width:760px){
  .performance-mini-grid,.performance-budget-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal.performance-modal{width:min(94vw,900px);max-height:86dvh;padding-bottom:max(18px,env(safe-area-inset-bottom))}
}
@media(max-width:430px){
  .performance-mini-grid,.performance-budget-grid{grid-template-columns:1fr 1fr;gap:7px}
  .performance-mini-grid>div,.performance-budget{padding:9px 10px;border-radius:12px}
  .performance-table>div{grid-template-columns:1fr;gap:2px}
  .performance-table>div small{grid-column:auto}
}