/* Solo layout del pannello: aspetto e componenti li dà Web Awesome (tema default, brand blu). */
:root {
  --eo-navy: #06182b;
  --eo-blue: #087ef5;
}

body { margin: 0; min-height: 100vh; background: var(--wa-color-surface-lowered); }

/* Login */
.login { display: grid; place-items: center; min-height: 100vh; padding: var(--wa-space-l); }
.login-card { width: min(420px, 100%); }
.login-logo { display: block; width: 100%; height: auto; }

/* Shell */
.shell { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }
.shell-header {
  display: flex; align-items: center; gap: var(--wa-space-l); flex-wrap: wrap;
  padding: var(--wa-space-s) var(--wa-space-l);
  background: var(--wa-color-surface-default); border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}
.shell-brand img { display: block; width: 220px; height: auto; }
.shell-nav { display: flex; gap: var(--wa-space-m); flex: 1; }
.shell-nav a { color: var(--wa-color-text-quiet); text-decoration: none; font-weight: var(--wa-font-weight-semibold); padding: var(--wa-space-2xs) 0; border-bottom: 2px solid transparent; }
.shell-nav a:hover { color: var(--wa-color-text-normal); }
.shell-nav a[aria-current="page"] { color: var(--wa-color-brand-on-quiet); border-bottom-color: var(--wa-color-brand-fill-loud); }
.shell-user { display: flex; align-items: center; gap: var(--wa-space-s); }
.shell-main { width: min(1100px, 100%); margin: 0 auto; padding: var(--wa-space-xl) var(--wa-space-l); box-sizing: border-box; }

/* Assistente AI */
.ai-log:empty { display: none; }
.ai-turn { padding: var(--wa-space-m); border-radius: var(--wa-border-radius-m); white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-turn[data-role="user"] { background: var(--wa-color-brand-fill-quiet); align-self: flex-end; max-width: 80%; }
.ai-turn[data-role="assistant"] { background: var(--wa-color-surface-default); border: var(--wa-border-width-s) solid var(--wa-color-surface-border); }

@media (max-width: 720px) {
  .shell-nav { order: 3; flex-basis: 100%; }
  .shell-brand img { width: 170px; }
}