/*
 * Stili dedicati ad ARKA Lite.
 * Prima di aggiungere una regola, preferire componenti e utility Bootstrap.
 */
:root {
  /* Colore principale del brand e dei messaggi utente. */
  --arka-primary: #2e7c8c;

  /* Palette del tema scuro. */
  --arka-dark-background: #0d0f10;
  --arka-dark-surface: #16181a;

  /* Palette del tema chiaro. */
  --arka-light-background: #f9fafb;
  --arka-light-surface: #ffffff;

  /* Palette aggiuntive condivise con la versione Flutter. */
  --arka-ocean-background: #e7f4f6;
  --arka-sunset-background: #151026;
}

/* Permette al gradiente neon del composer di ruotare con continuità. */
@property --arka-composer-neon-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Tema scuro predefinito. */
[data-bs-theme='dark'] {
  color-scheme: dark;

  /* Usato da elementi con la classe Bootstrap bg-body. */
  --bs-body-bg: var(--arka-dark-surface);

  /* Usato dal body, che ha la classe bg-body-tertiary. */
  --bs-tertiary-bg: var(--arka-dark-background);

  /* Colore Bootstrap primary: #2e7c8c convertito in RGB. */
  --bs-primary: var(--arka-primary);
  --bs-primary-rgb: 46, 124, 140;

  /* Bordi leggermente visibili sulle superfici scure. */
  --bs-border-color: #2b2e30;
}

/* Palette pronta per un eventuale tema chiaro. */
[data-bs-theme='light'] {
  color-scheme: light;

  --bs-body-bg: var(--arka-light-surface);
  --bs-tertiary-bg: var(--arka-light-background);
  --bs-primary: var(--arka-primary);
  --bs-primary-rgb: 46, 124, 140;
}

.btn-primary {
  --bs-btn-bg: var(--arka-primary);
  --bs-btn-border-color: var(--arka-primary);

  --bs-btn-hover-bg: #286d7b;
  --bs-btn-hover-border-color: #286d7b;

  --bs-btn-active-bg: #246370;
  --bs-btn-active-border-color: #246370;

  --bs-btn-focus-shadow-rgb: 46, 124, 140;
}

html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow: hidden;
}

.chat-page {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--arka-chat-background, var(--arka-dark-background));
  transition: background-color 240ms ease;
}

.navbar {
  position: relative;
  /* La tendina di ricerca deve restare sopra la superficie dei messaggi. */
  z-index: 3;
  --bs-navbar-padding-y: 0.125rem;

  min-height: 0;
  background-color: transparent;
}

.navbar .container-xl,
.navbar-brand {
  min-width: 0;
}

.navbar-brand {
  overflow: hidden;
}

/* La superficie della chat occupa tutto lo spazio rimasto sotto la testata. */
.chat-surface {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background-color: transparent;
}

/* Le classi tema mantengono i colori indipendenti dalla palette Bootstrap. */
:root[data-arka-theme='dark'] .chat-page,
.chat-page.theme-dark,
.chat-surface.theme-dark {
  --arka-chat-background: var(--arka-dark-background);
  --arka-message-user-background: var(--arka-dark-surface);
  --arka-message-text: #f1f3f4;
  --arka-composer-background: #1b1d20;
  --arka-composer-border: #24282b;
  --arka-composer-text: #e9ecef;
  --arka-composer-muted: #9aa0a6;
  --arka-composer-action: #15181a;
}

:root[data-arka-theme='light'] .chat-page,
.chat-page.theme-light,
.chat-surface.theme-light {
  --arka-chat-background: var(--arka-light-background);
  --arka-message-user-background: var(--arka-light-surface);
  --arka-message-text: #0f172a;
  --arka-composer-background: #ffffff;
  --arka-composer-border: #e1e5e8;
  --arka-composer-text: #23272b;
  --arka-composer-muted: #6f767d;
  --arka-composer-action: #f1f3f5;
  --arka-new-chat-border: #b8bec5;
}

:root[data-arka-theme='ocean'] .chat-page,
.chat-page.theme-ocean,
.chat-surface.theme-ocean {
  --arka-chat-background: var(--arka-ocean-background);
  --arka-message-user-background: #f7fcfd;
  --arka-message-text: #063b36;
  --arka-composer-background: #f7fcfd;
  --arka-composer-border: #cbe1e5;
  --arka-composer-text: #17383e;
  --arka-composer-muted: #617b80;
  --arka-composer-action: #e5f2f4;
}

:root[data-arka-theme='sunset'] .chat-page,
.chat-page.theme-sunset,
.chat-surface.theme-sunset {
  --arka-chat-background: var(--arka-sunset-background);
  --arka-message-user-background: #241d3d;
  --arka-message-text: #f0f0f5;
  --arka-composer-background: #211b31;
  --arka-composer-border: #332a49;
  --arka-composer-text: #f0edf7;
  --arka-composer-muted: #a29bad;
  --arka-composer-action: #191425;
}

/* Un solo livello radiale prosegue senza interruzioni dietro navbar e chat. */
.chat-page::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 40%,
    rgb(46 124 140 / 42%) 0%,
    rgb(46 124 140 / 18%) 45%,
    rgb(46 124 140 / 0%) 100%
  );
  opacity: 0;
  transition: opacity 240ms ease;
}

.chat-page.chat-page--empty::before {
  opacity: 1;
}

/* Lo sfondo resta full width, mentre i contenuti conservano una misura leggibile. */
.chat-surface > .messages {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  /* Colonna centrale compatta, come nelle principali interfacce conversazionali. */
  max-width: 52rem;
  margin-right: auto;
  margin-left: auto;
}

/* A chat vuota riprende il rapporto 3:2 tra greeting e spazio inferiore di Flutter. */
.chat-surface.chat-surface--empty {
  display: grid !important;
  grid-template-rows: minmax(0, 3fr) auto minmax(1.5rem, 2fr);
}

.chat-surface--empty > .messages {
  grid-row: 1;
}

.chat-surface--empty > .composer-area {
  grid-row: 2;
}

.brand-mark {
  width: 2rem;
  height: 2rem;
  background-color: var(--arka-primary);
}

.brand-logo {
  width: auto;
  height: 2rem;
  max-width: min(12rem, 45vw);
  object-fit: contain;
}

.brand-logo-frame {
  display: inline-block;
  flex: 0 0 auto;
  width: min(10rem, 42vw);
  height: 2.625rem;
  overflow: hidden;
}

.brand-logo-frame.d-none {
  display: none;
}

.brand-logo-frame .brand-logo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

html[data-bs-theme="light"] .brand-logo-frame .brand-logo {
  filter: brightness(0);
}

.header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.625rem;
}

/* Su desktop le opzioni restano affiancate nell'header. */
.header-mobile-menu,
.header-mobile-menu__panel,
.header-mobile-menu__item {
  display: contents;
}

.header-icon-button.header-mobile-menu__toggle,
.header-mobile-menu__label {
  display: none;
}

.new-chat-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.4375rem 0.75rem;
  gap: 0.375rem;
  color: var(--bs-body-color);
  font-size: 0.8125rem;
  font-weight: 600;
  background-color: transparent;
  border: 1px solid var(--arka-new-chat-border, var(--bs-border-color));
  border-radius: 999px;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.new-chat-button:hover,
.new-chat-button:focus-visible {
  color: var(--arka-primary);
  background-color: rgb(var(--bs-primary-rgb) / 8%);
  border-color: var(--arka-primary);
  outline: 0;
}

.new-chat-button:active {
  transform: scale(0.96);
}

.new-chat-button:disabled {
  cursor: wait;
  opacity: 0.5;
  transform: none;
}

.header-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--bs-body-color);
  background: transparent;
  border: 0;
  border-radius: 50%;
  transition: color 180ms ease, opacity 180ms ease;
}

.header-icon-button:hover:not(:disabled),
.header-icon-button:focus-visible:not(:disabled) {
  color: var(--arka-primary);
  outline: 0;
}

.header-icon-button:disabled {
  cursor: wait;
  opacity: 0.42;
}

/* La condivisione disabilitata mantiene il cursore normale senza mostrare l'attesa. */
#share-chat-action:disabled {
  cursor: default;
}

.header-icon-button svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.header-mobile-menu__toggle svg {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 1024px) {
  .header-actions {
    gap: 0.375rem;
  }

  .new-chat-button {
    width: 2.25rem;
    padding-right: 0;
    padding-left: 0;
  }

  .new-chat-button span {
    display: none;
  }

  .header-mobile-menu {
    position: relative;
    display: block;
  }

  .header-icon-button.header-mobile-menu__toggle {
    display: inline-flex;
  }

  .header-mobile-menu__panel {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 0.6rem);
    right: 0;
    display: none;
    flex-direction: column;
    width: min(15rem, calc(100vw - 1.5rem));
    padding: 0.45rem;
    background: var(--arka-composer-background);
    border: 1px solid var(--arka-composer-border);
    border-radius: 1rem;
    box-shadow: 0 0.85rem 2rem rgb(0 0 0 / 24%);
  }

  .header-mobile-menu__panel.is-open {
    display: flex;
  }

  .header-mobile-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3rem;
    gap: 1rem;
    padding: 0.25rem 0.35rem 0.25rem 0.8rem;
    color: var(--arka-composer-text);
    border-radius: 0.7rem;
  }

  .header-mobile-menu__item:hover {
    background: color-mix(in srgb, var(--arka-composer-text) 7%, transparent);
  }

  .header-mobile-menu__label {
    display: block;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .header-mobile-menu__item .header-icon-button,
  .header-mobile-menu__item .chat-search__toggle {
    flex: 0 0 2.25rem;
  }

  .header-mobile-menu__item .theme-toggle {
    flex: 0 0 auto;
  }

  .header-mobile-menu__item .chat-search {
    flex: 0 0 auto;
  }
}

.new-chat-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Ricerca locale a tendina, collocata tra nuova chat e selettore del tema. */
.chat-search {
  position: relative;
  flex: 0 0 auto;
}

.chat-search__toggle,
.chat-search__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-body-color);
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.chat-search__toggle {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--bs-border-color);
}

.chat-search__toggle:hover,
.chat-search__toggle:focus-visible,
.chat-search__action:hover:not(:disabled),
.chat-search__action:focus-visible {
  color: var(--arka-primary);
  background-color: rgb(var(--bs-primary-rgb) / 10%);
  outline: 0;
}

.chat-search__toggle:active,
.chat-search__action:active:not(:disabled) {
  transform: scale(0.94);
}

.chat-search__toggle:disabled {
  cursor: default;
  opacity: 0.42;
}

.chat-search__toggle svg,
.chat-search__action svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.chat-search__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.625rem);
  right: 0;
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto repeat(3, 2rem);
  align-items: center;
  width: min(27rem, calc(100vw - 1.5rem));
  min-height: 3rem;
  padding: 0.375rem 0.5rem 0.375rem 0.75rem;
  color: var(--arka-message-text);
  background-color: var(--arka-composer-background);
  border: 1px solid var(--arka-composer-border);
  border-radius: 0.875rem;
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 24%);
}

.chat-search__panel[hidden] {
  display: none;
}

.chat-search__input {
  min-width: 0;
  padding: 0.375rem 0;
  color: var(--arka-composer-text);
  font-size: 0.875rem;
  background: transparent;
  border: 0;
  outline: 0;
}

.chat-search__input::placeholder {
  color: var(--arka-composer-muted);
}

.chat-search__input::-webkit-search-cancel-button {
  display: none;
}

.chat-search__count {
  min-width: 3.25rem;
  padding: 0 0.375rem;
  color: var(--arka-composer-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.chat-search__action {
  width: 2rem;
  height: 2rem;
}

.chat-search__action:disabled {
  opacity: 0.32;
}

.chat-search-highlight {
  padding: 0.0625em 0.125em;
  color: inherit;
  background-color: #f6d365;
  border-radius: 0.1875rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.chat-search-highlight--current {
  color: #111318;
  background-color: #ff9f43;
  box-shadow: 0 0 0 2px rgb(255 159 67 / 28%);
}

/* Switch a pillola con sole, luna e cursore scorrevole. */
.theme-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 3.25rem;
  height: 1.75rem;
}

.theme-toggle__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.theme-toggle__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0.3125rem 0.4375rem;
  overflow: hidden;
  cursor: pointer;
  background-color: #111318;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 35%),
    0 2px 6px rgb(0 0 0 / 14%);
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

/* Nel tema chiaro anche la pista dello switch segue la palette della pagina. */
[data-bs-theme='light'] .theme-toggle__label {
  background-color: #e6e9ed;
  border-color: rgb(17 19 24 / 14%);
  box-shadow:
    inset 0 1px 2px rgb(17 19 24 / 10%),
    0 2px 6px rgb(17 19 24 / 10%);
}

.theme-toggle__icon {
  z-index: 1;
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: #f4c542;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: opacity 200ms ease;
}

.theme-toggle__sun {
  order: 1;
  stroke: #f39c12;
}

.theme-toggle__moon {
  order: 2;
  stroke: #f1c40f;
}

.theme-toggle__ball {
  position: absolute;
  z-index: 2;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.375rem;
  height: 1.375rem;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
  transform: translateX(0);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle__checkbox:checked + .theme-toggle__label .theme-toggle__ball {
  transform: translateX(1.5rem);
}

/* Al refresh la posizione segue subito il tema applicato nell'head. */
:root[data-bs-theme='dark'] .theme-toggle__ball {
  transform: translateX(1.5rem);
}

.theme-toggle__label:hover {
  border-color: rgb(255 255 255 / 24%);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 35%),
    0 3px 8px rgb(0 0 0 / 20%);
  transform: translateY(-1px);
}

[data-bs-theme='light'] .theme-toggle__label:hover {
  border-color: rgb(17 19 24 / 24%);
  box-shadow:
    inset 0 1px 2px rgb(17 19 24 / 10%),
    0 3px 8px rgb(17 19 24 / 14%);
}

.theme-toggle__checkbox:focus-visible + .theme-toggle__label {
  border-color: var(--arka-primary);
  box-shadow: 0 0 0 0.2rem rgb(var(--bs-primary-rgb) / 20%);
}

.theme-toggle__label:active {
  transform: scale(0.94);
}

.theme-toggle__checkbox:disabled + .theme-toggle__label {
  cursor: wait;
  opacity: 0.55;
  transform: none;
}

/* La dissolvenza attenua il cambio palette senza coprire l'intera pagina con un'onda. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: theme-soft-out 240ms ease both;
  }

  ::view-transition-new(root) {
    animation: theme-soft-in 320ms ease both;
  }
}

@keyframes theme-soft-out {
  to {
    opacity: 0;
    filter: blur(1px);
  }
}

@keyframes theme-soft-in {
  from {
    opacity: 0.82;
    filter: blur(1.5px);
  }
}

.messages {
  width: 100%;
  min-height: 0;
  /* Lo scroll resta attivo, ma senza mostrare la barra dentro la conversazione. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.messages > [data-role] {
  width: 100%;
  min-width: 0;
}

/* Il turno corrente riserva lo spazio sotto al prompt ancorato in alto. */
.message-turn-response {
  flex-shrink: 0;
}

.messages::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#empty-state {
  animation: empty-state-in 700ms ease-out both;
}

#login-slogan {
  color: var(--arka-composer-text);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01875rem;
}

#dashboard-slogan {
  color: var(--arka-composer-muted) !important;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  opacity: 0.72;
}

.message-bubble {
  min-width: 0;
  color: var(--arka-message-text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.message-row--user-actions {
  gap: 0.2rem;
}

/* Comando discreto posizionato sotto e fuori dalla bubble utente. */
.message-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.65rem;
  padding: 0;
  color: var(--arka-composer-muted);
  background: transparent;
  border: 0;
  border-radius: 0.45rem;
  opacity: 0;
  pointer-events: none;
  transition: color 180ms ease, opacity 180ms ease;
}

.message-row--user-actions:hover .message-copy-button,
.message-copy-button:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.message-copy-button:hover,
.message-copy-button:focus-visible {
  color: var(--arka-primary);
  background: transparent;
  outline: 0;
}

.message-copy-button:disabled {
  cursor: default;
  opacity: 0.8;
}

.message-copy-button svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.message-row--assistant-actions {
  gap: 0.2rem;
}

.message-copy-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.message-copy-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.65rem;
  padding: 0;
  color: var(--arka-composer-muted);
  background: transparent;
  border: 0;
  border-radius: 0.45rem;
  opacity: 0;
  pointer-events: none;
  transition: color 180ms ease, opacity 180ms ease;
}

.message-row--assistant-actions:hover .message-copy-menu-toggle,
.message-copy-menu-toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.message-copy-menu-toggle:hover,
.message-copy-menu-toggle:focus-visible {
  color: var(--arka-primary);
  background: transparent;
  outline: 0;
}

.message-copy-menu-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.message-tts-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.65rem;
  padding: 0;
  color: var(--arka-composer-muted);
  background: transparent;
  border: 0;
  border-radius: 0.45rem;
  opacity: 0;
  pointer-events: none;
  transition: color 180ms ease, opacity 180ms ease;
}

.message-row--assistant-actions:hover .message-tts-toggle,
.message-tts-toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.message-tts-toggle:hover,
.message-tts-toggle:focus-visible {
  background: transparent;
  outline: 0;
}

.message-tts-toggle:disabled {
  cursor: default;
  opacity: 0.8;
}

.message-tts-toggle.is-playing {
  color: var(--arka-primary);
}

.message-tts-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.message-tts-toggle[hidden],
.message-tts-toggle.d-none {
  display: none;
}

.message-tts-spinner {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: message-tts-spin 700ms linear infinite;
}

@keyframes message-tts-spin {
  to {
    transform: rotate(360deg);
  }
}

.message-copy-menu {
  position: fixed;
  z-index: 1055;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 17.5rem;
  max-width: calc(100vw - 1.5rem);
  padding: 0.65rem;
  background: var(--arka-composer-background);
  border: 1px solid var(--arka-composer-border);
  border-radius: 1.5rem;
  box-shadow: 0 0.7rem 2rem rgb(0 0 0 / 24%);
}

.message-copy-menu[hidden] {
  display: none;
}

.message-copy-menu__item {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  gap: 0.85rem;
  padding: 0.55rem 0.75rem;
  color: var(--arka-composer-text);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
}

.message-copy-menu__icon {
  display: inline-flex;
  flex: 0 0 1.35rem;
  align-items: center;
  justify-content: center;
  color: var(--arka-composer-text);
}

.message-copy-menu__icon svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.message-copy-menu__label {
  min-width: 0;
}

.message-copy-menu__item:hover,
.message-copy-menu__item:focus-visible {
  color: var(--arka-primary);
  background: color-mix(in srgb, var(--arka-primary) 10%, transparent);
  outline: 0;
}

.message-copy-menu__item:disabled {
  cursor: default;
  opacity: 0.7;
}

.message-copy-menu__item--loading:disabled {
  opacity: 1;
}

/* Lo spinner mantiene visibile l'attività durante le esportazioni più lente. */
.message-copy-menu__spinner {
  width: 1rem;
  height: 1rem;
  border: 0.125rem solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: attachment-upload-spin 700ms linear infinite;
}

.message-copy-menu__item--report,
.message-copy-menu__item--report .message-copy-menu__icon {
  color: #ff5b62;
}

.message-copy-menu__item--report:hover,
.message-copy-menu__item--report:focus-visible {
  color: #ff3f49;
  background: rgb(255 91 98 / 10%);
}

.report-message-dialog {
  max-width: 26rem;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.disclaimer-dialog {
  max-width: 44rem;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.disclaimer-modal__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--bs-primary);
  background: rgb(var(--bs-primary-rgb) / 12%);
  border-radius: 50%;
}

.disclaimer-modal__icon svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.disclaimer-modal__content {
  max-height: min(56vh, 32rem);
  padding: 1rem;
  overflow-y: auto;
  color: var(--report-text);
  background: var(--report-control);
  border: 1px solid var(--report-border);
  border-radius: 0.95rem;
}

@media (max-width: 480px) {
  .disclaimer-dialog {
    margin: 0.75rem;
    padding: 0;
  }

  .disclaimer-modal__content {
    max-height: 52vh;
  }
}

.report-message-modal {
  --report-surface: var(--bs-body-bg);
  --report-border: var(--bs-border-color);
  --report-text: var(--bs-body-color);
  --report-muted: var(--bs-secondary-color);
  --report-control: color-mix(in srgb, var(--report-text) 5%, var(--report-surface));

  color: var(--report-text);
  background: var(--report-surface);
  border: 1px solid var(--report-border);
  border-radius: 1.15rem;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 30%);
}

:root[data-arka-theme='dark'] .report-message-modal {
  --report-surface: var(--arka-dark-surface);
  --report-border: #2b2e30;
  --report-text: #f1f3f4;
  --report-muted: #9aa0a6;
}

:root[data-arka-theme='light'] .report-message-modal {
  --report-surface: var(--arka-light-surface);
  --report-border: #e1e5e8;
  --report-text: #0f172a;
  --report-muted: #6f767d;
}

:root[data-arka-theme='ocean'] .report-message-modal {
  --report-surface: #f7fcfd;
  --report-border: #cbe1e5;
  --report-text: #063b36;
  --report-muted: #617b80;
}

:root[data-arka-theme='sunset'] .report-message-modal {
  --report-surface: #241d3d;
  --report-border: #332a49;
  --report-text: #f0f0f5;
  --report-muted: #a29bad;
}

.report-message-modal__header {
  padding: 1.5rem 1.5rem 0.85rem;
}

.report-message-modal__header .modal-title {
  color: var(--report-text);
  font-size: 1.2rem;
  font-weight: 700;
}

.report-message-modal__close {
  opacity: 0.62;
}

[data-bs-theme='dark'] .report-message-modal__close,
.theme-dark .report-message-modal__close,
.theme-sunset .report-message-modal__close {
  filter: invert(1) grayscale(1) brightness(2);
}

.report-message-modal__body {
  padding: 0.25rem 1.5rem 1.5rem;
}

.report-message-modal__input {
  display: block;
  width: 100%;
  min-height: 7.5rem;
  padding: 1rem 1.1rem;
  resize: vertical;
  color: var(--report-text);
  font-size: 1rem;
  line-height: 1.45;
  background: var(--report-control);
  border: 1px solid transparent;
  border-radius: 0.95rem;
  outline: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.report-message-modal__input::placeholder {
  color: var(--report-muted);
  opacity: 0.9;
}

.report-message-modal__input:focus {
  border-color: var(--report-text);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--report-text) 10%, transparent);
}

.report-message-modal__input:disabled {
  cursor: wait;
  opacity: 0.7;
}

.report-message-modal__counter {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.45rem;
  color: var(--report-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.report-message-modal__status {
  min-height: 1.25rem;
  margin-top: 0.7rem;
  color: var(--report-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.report-message-modal__status--success {
  color: #4bd18b;
}

.report-message-modal__status--error {
  color: #ff6b72;
}

.report-message-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.report-message-modal__cancel,
.report-message-modal__submit {
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 0.65rem;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.report-message-modal__cancel {
  color: var(--report-muted);
  background: transparent;
  border: 1px solid transparent;
}

.report-message-modal__cancel:hover,
.report-message-modal__cancel:focus-visible {
  color: var(--report-text);
  background: color-mix(in srgb, var(--report-text) 7%, transparent);
  outline: 0;
}

.report-message-modal__submit {
  min-width: 8rem;
  color: #fff;
  background: #ff5b62;
  border: 1px solid #ff5b62;
}

.report-message-modal__submit:hover:not(:disabled),
.report-message-modal__submit:focus-visible:not(:disabled) {
  background: #e84b53;
  border-color: #e84b53;
  outline: 0;
}

.report-message-modal__submit:active:not(:disabled) {
  transform: scale(0.97);
}

.report-message-modal__submit:disabled {
  cursor: default;
  opacity: 0.45;
}

@media (max-width: 480px) {
  .report-message-dialog {
    margin: 0.75rem;
  }

  .report-message-modal__header,
  .report-message-modal__body {
    padding-right: 1.1rem;
    padding-left: 1.1rem;
  }
}

.share-chat-dialog {
  max-width: 28rem;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.share-chat-modal {
  --share-chat-surface: var(--bs-body-bg);
  --share-chat-border: var(--bs-border-color);
  --share-chat-text: var(--bs-body-color);
  --share-chat-muted: var(--bs-secondary-color);

  position: relative;
  overflow: hidden;
  color: var(--share-chat-text);
  background: var(--share-chat-surface);
  border: 1px solid var(--share-chat-border);
  border-radius: 1.5rem;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 28%);
}

:root[data-arka-theme='dark'] .share-chat-modal {
  --share-chat-surface: var(--arka-dark-surface);
  --share-chat-border: #2b2e30;
  --share-chat-text: #f1f3f4;
  --share-chat-muted: #9aa0a6;
}

:root[data-arka-theme='light'] .share-chat-modal {
  --share-chat-surface: var(--arka-light-surface);
  --share-chat-border: #e1e5e8;
  --share-chat-text: #0f172a;
  --share-chat-muted: #6f767d;
}

:root[data-arka-theme='ocean'] .share-chat-modal {
  --share-chat-surface: #f7fcfd;
  --share-chat-border: #cbe1e5;
  --share-chat-text: #063b36;
  --share-chat-muted: #617b80;
}

:root[data-arka-theme='sunset'] .share-chat-modal {
  --share-chat-surface: #241d3d;
  --share-chat-border: #332a49;
  --share-chat-text: #f0f0f5;
  --share-chat-muted: #a29bad;
}

.share-chat-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.35rem 0.75rem;
}

.share-chat-modal__title-group {
  min-width: 0;
}

.share-chat-modal__link-icon svg,
.share-chat-modal__copy-button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.share-chat-modal__title-group .modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.share-chat-modal__eyebrow {
  display: block;
  margin-top: 0.2rem;
  color: var(--share-chat-muted);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.share-chat-modal__close {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  opacity: 0.62;
  transition: opacity 180ms ease, transform 180ms ease;
}

.share-chat-modal__close:hover,
.share-chat-modal__close:focus-visible {
  opacity: 1;
  transform: rotate(90deg);
}

[data-bs-theme='dark'] .share-chat-modal__close,
.theme-dark .share-chat-modal__close,
.theme-sunset .share-chat-modal__close {
  filter: invert(1) grayscale(1) brightness(2);
}

.share-chat-modal__body {
  padding: 0.25rem 1.35rem 1.35rem;
}

.share-chat-modal__description,
.share-chat-modal__notice {
  max-width: 26rem;
  color: var(--share-chat-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.share-chat-modal__description {
  margin: 0 0 0.65rem;
}

.share-chat-modal__notice {
  margin: 0 0 1rem;
}

.share-chat-modal__link-box {
  display: flex;
  align-items: center;
  min-height: 3.2rem;
  gap: 0.65rem;
  padding: 0.35rem 0.4rem 0.35rem 0.85rem;
  background: color-mix(in srgb, var(--share-chat-text) 3%, var(--share-chat-surface));
  border: 1px solid color-mix(in srgb, var(--share-chat-text) 24%, var(--share-chat-border));
  border-radius: 0.95rem;
  box-shadow: 0 0.25rem 0.8rem rgb(0 0 0 / 7%);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.share-chat-modal__link-box:focus-within {
  border-color: var(--share-chat-text);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--share-chat-text) 10%, transparent);
}

.share-chat-modal__link-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--share-chat-muted);
}

.share-chat-modal__link-input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
  color: var(--share-chat-text);
  font-size: 0.8rem;
  font-weight: 500;
  background: transparent;
  border: 0;
  outline: 0;
  text-overflow: ellipsis;
}

.share-chat-modal__copy-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  color: var(--share-chat-text);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--share-chat-surface);
  border: 1px solid color-mix(in srgb, var(--share-chat-text) 20%, var(--share-chat-border));
  border-radius: 0.7rem;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.share-chat-modal__copy-button:hover,
.share-chat-modal__copy-button:focus-visible {
  background: color-mix(in srgb, var(--share-chat-text) 8%, var(--share-chat-surface));
  border-color: var(--share-chat-text);
  outline: 0;
}

.share-chat-modal__copy-button:active {
  transform: scale(0.97);
}

.share-chat-modal__copy-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.share-chat-modal__copy-button svg {
  width: 1rem;
  height: 1rem;
}

.share-chat-modal__status {
  margin-top: 0.75rem;
  color: var(--share-chat-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.share-chat-modal__status:empty {
  display: none;
}

@media (max-width: 480px) {
  .share-chat-dialog {
    margin: 0.75rem;
  }

  .share-chat-modal__header,
  .share-chat-modal__body {
    padding-right: 1.1rem;
    padding-left: 1.1rem;
  }

  .share-chat-modal__link-box {
    align-items: stretch;
    flex-wrap: wrap;
    padding: 0.7rem;
  }

  .share-chat-modal__link-icon {
    align-self: center;
  }

  .share-chat-modal__copy-button {
    width: 100%;
  }
}

.shared-chat-page .messages {
  padding-bottom: 1rem;
}

.shared-chat-empty {
  display: flex;
  min-height: 12rem;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--bs-secondary-color);
  text-align: center;
}

.message-content {
  margin: 0;
}

/* Il Markdown dell'assistente usa il flusso normale anche per elementi a blocchi. */
.markdown-content {
  white-space: normal;
}

/* Riduce i titoli Markdown dell'AI senza influenzare i titoli dell'interfaccia. */
.markdown-content h1 {
  font-size: 1.8rem;
}

.markdown-content h2 {
  font-size: 1.35rem;
}

.markdown-content h3 {
  font-size: 1.15rem;
}

.markdown-content > :last-child {
  margin-bottom: 0;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote,
.markdown-content pre,
.markdown-content .table-responsive {
  margin-bottom: 1rem;
}

.markdown-content a {
  color: color-mix(in srgb, var(--arka-primary) 80%, currentColor);
  text-underline-offset: 0.18em;
}

.markdown-content blockquote {
  padding-left: 1rem;
  color: var(--arka-composer-muted);
  border-left: 0.2rem solid var(--arka-primary);
}

.markdown-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.markdown-content th,
.markdown-content td {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bs-border-color);
}

.markdown-content th {
  background-color: color-mix(in srgb, var(--arka-composer-background) 88%, transparent);
}

.markdown-content pre {
  max-width: 100%;
  margin: 0;
  padding: 1rem 1.125rem 1.125rem;
  overflow: auto;
  color: var(--arka-code-text);
  background: var(--arka-code-background);
  border: 0;
  border-radius: 0;
}

.markdown-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.875em;
}

.markdown-content :not(pre) > code {
  padding: 0.15em 0.35em;
  background-color: color-mix(in srgb, var(--arka-composer-background) 82%, transparent);
  border-radius: 0.3rem;
}

/* Card dei blocchi fenced, coerente con Flutter/OpenAI e senza azioni di copia. */
.ai-code-block {
  --arka-code-background: #171717;
  --arka-code-header: #111111;
  --arka-code-border: rgb(255 255 255 / 8%);
  --arka-code-text: #ededed;
  --arka-code-muted: rgb(255 255 255 / 72%);
  --arka-code-comment: #7f848e;
  --arka-code-keyword: #c678dd;
  --arka-code-name: #e06c75;
  --arka-code-literal: #56b6c2;
  --arka-code-string: #98c379;
  --arka-code-number: #d19a66;
  --arka-code-title: #61afef;
  --arka-code-built-in: #e5c07b;

  max-width: 100%;
  margin: 0.875rem 0 1rem;
  overflow: hidden;
  background: var(--arka-code-background);
  border: 1px solid var(--arka-code-border);
  border-radius: 1.125rem;
}

:root[data-bs-theme='light'] .ai-code-block {
  --arka-code-background: #f7f7f8;
  --arka-code-header: #ededed;
  --arka-code-border: #d8d8db;
  --arka-code-text: #1f1f1f;
  --arka-code-muted: #5f5f66;
  --arka-code-comment: #6a737d;
  --arka-code-keyword: #d73a49;
  --arka-code-name: #b31d28;
  --arka-code-literal: #005cc5;
  --arka-code-string: #22863a;
  --arka-code-number: #e36209;
  --arka-code-title: #6f42c1;
  --arka-code-built-in: #005cc5;
}

.ai-code-block__header {
  display: flex;
  min-height: 2.625rem;
  padding: 0.625rem 0.875rem;
  align-items: center;
  background: var(--arka-code-header);
}

.ai-code-block__identity {
  display: inline-flex;
  min-width: 0;
  gap: 0.5rem;
  align-items: center;
  color: var(--arka-code-muted);
}

.ai-code-block__icon {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: -0.08em;
}

.ai-code-block__language {
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-code-block__body code {
  display: block;
  min-width: max-content;
  color: inherit;
  font-size: 0.84375rem;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
}

.ai-code-block .hljs-comment,
.ai-code-block .hljs-quote {
  color: var(--arka-code-comment);
  font-style: italic;
}

.ai-code-block .hljs-keyword,
.ai-code-block .hljs-selector-tag,
.ai-code-block .hljs-doctag,
.ai-code-block .hljs-formula {
  color: var(--arka-code-keyword);
}

.ai-code-block .hljs-section,
.ai-code-block .hljs-name,
.ai-code-block .hljs-tag,
.ai-code-block .hljs-deletion {
  color: var(--arka-code-name);
}

.ai-code-block .hljs-literal {
  color: var(--arka-code-literal);
}

.ai-code-block .hljs-string,
.ai-code-block .hljs-regexp,
.ai-code-block .hljs-addition,
.ai-code-block .hljs-attribute,
.ai-code-block .hljs-meta .hljs-string {
  color: var(--arka-code-string);
}

.ai-code-block .hljs-attr,
.ai-code-block .hljs-variable,
.ai-code-block .hljs-template-variable,
.ai-code-block .hljs-type,
.ai-code-block .hljs-selector-class,
.ai-code-block .hljs-selector-attr,
.ai-code-block .hljs-selector-pseudo,
.ai-code-block .hljs-number {
  color: var(--arka-code-number);
}

.ai-code-block .hljs-symbol,
.ai-code-block .hljs-bullet,
.ai-code-block .hljs-link,
.ai-code-block .hljs-meta,
.ai-code-block .hljs-selector-id,
.ai-code-block .hljs-title {
  color: var(--arka-code-title);
}

.ai-code-block .hljs-built_in,
.ai-code-block .hljs-title.class_,
.ai-code-block .hljs-title.class_.inherited__ {
  color: var(--arka-code-built-in);
}

.ai-code-block .hljs-emphasis {
  font-style: italic;
}

.ai-code-block .hljs-strong {
  font-weight: 700;
}

.ai-image-frame,
.ai-image-placeholder {
  position: relative;
  display: flex;
  width: min(100%, 30rem);
  aspect-ratio: 16 / 9;
  margin: 1rem 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--arka-composer-background) 90%, transparent);
  border: 1px solid var(--arka-composer-border);
  border-radius: 1rem;
}

.ai-image-frame {
  padding: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

.ai-image-frame--portrait {
  width: min(100%, 18rem);
  aspect-ratio: 3 / 4;
}

.ai-image-frame--portrait .ai-image {
  /* Le immagini verticali strette restano interamente visibili senza ritagli. */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 1rem;
}

.ai-image-frame--landscape {
  aspect-ratio: 16 / 9;
}

.ai-image {
  width: 100%;
  height: 100%;
  /* La preview riempie il formato scelto dall'orientamento senza bande grigie. */
  object-fit: cover;
  border-radius: inherit;
}

.ai-image-frame--loading .ai-image {
  opacity: 0;
}

.ai-image-frame--loading::after,
.ai-image-placeholder__glow {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 10%) 48%, transparent 66%);
  transform: translateX(-100%);
  animation: ai-image-shimmer 1.6s ease-in-out infinite;
}

.ai-image-placeholder__icon {
  width: 2.5rem;
  color: var(--arka-composer-muted);
  opacity: 0.7;
}

.ai-image-placeholder__icon svg {
  display: block;
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.ai-image-unavailable {
  color: var(--arka-composer-muted);
  font-size: 0.875rem;
}

.image-viewer {
  color: #fff;
  background: rgb(5 7 8 / 97%);
}

.image-viewer__toolbar {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  justify-content: space-between;
  background: linear-gradient(rgb(0 0 0 / 72%), transparent);
}

.image-viewer__stage {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.image-viewer__stage--zoomed {
  cursor: grab;
}

.image-viewer__stage--zoomed:active {
  cursor: grabbing;
}

.image-viewer__image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center;
  transition: transform 120ms ease-out;
  user-select: none;
}

/* Gli aggiornamenti di stato restano discreti ma visibili durante l'attesa. */
.message-status {
  color: var(--arka-composer-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .message-status {
    color: transparent;
    background-image: linear-gradient(
      100deg,
      var(--arka-composer-muted) 20%,
      color-mix(
        in srgb,
        var(--arka-composer-muted) 55%,
        var(--arka-composer-text)
      ) 48%,
      var(--arka-composer-muted) 76%
    );
    background-position: 125% 50%;
    background-size: 220% 100%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: message-status-shimmer 1.65s linear infinite;
  }
}

/* Come in Flutter, solo il messaggio utente ha una superficie visibile. */
.message-bubble--user {
  max-width: min(45%, 48rem);
  background-color: var(--arka-message-user-background);
  border-radius: 1.25rem 1.25rem 0.375rem 1.25rem;
}

.message-bubble--assistant {
  /* La risposta può estendersi sotto la porzione laterale riservata all'utente. */
  max-width: min(75%, 48rem);
  background-color: transparent;
}

/* Nasconde la selezione dei messaggi quando la configurazione vieta la copia. */
.clipboard-copy-disabled .message-content,
.clipboard-copy-disabled .message-content *,
.clipboard-copy-disabled .message-attachments,
.clipboard-copy-disabled .message-attachments * {
  -webkit-user-select: none;
  user-select: none;
}

.composer-area {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: 62.5rem;
  margin-right: auto;
  margin-left: auto;
  animation: composer-in 520ms ease-out both;
}

.chat-surface:not(.chat-surface--empty) > .composer-area {
  margin-top: 0.75rem;
}

.composer {
  position: relative;
  overflow: hidden;
  color: var(--arka-composer-text);
  background-color: var(--arka-composer-background);
  border: 1px solid var(--arka-composer-border);
  border-radius: 1.75rem;
  box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 14%);
  transition:
    color 240ms ease,
    background-color 240ms ease,
    border-color 240ms ease;
}

.composer:focus-within {
  border-color: color-mix(in srgb, var(--arka-primary) 55%, var(--arka-composer-border));
}

/* Evidenzia soltanto il perimetro del composer durante il trascinamento dei file. */
.composer--dragging {
  border-color: var(--arka-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--arka-primary) 18%, transparent);
}

.composer--uploading {
  cursor: progress;
}

/* Durante lo streaming replica il bordo neon rotante del composer Flutter. */
.composer--waiting {
  border-color: transparent;
}

.composer--waiting::before {
  position: absolute;
  z-index: 1;
  inset: -1px;
  padding: 1px;
  pointer-events: none;
  content: '';
  background: conic-gradient(
    from var(--arka-composer-neon-angle),
    transparent 0deg,
    var(--arka-primary) 100deg,
    #4ea8de 180deg,
    #48b982 260deg,
    transparent 360deg
  );
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: composer-neon-spin 2s linear infinite;
}

.composer--waiting > * {
  position: relative;
  z-index: 2;
}

.composer__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: calc((1.4rem * 2) + 1rem);
  min-height: calc((1.4rem * 2) + 1rem);
  max-height: calc((1.4rem * 2) + 1rem);
  padding: 0.5rem 1.5rem;
  overflow-y: auto;
  color: var(--arka-composer-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4rem;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
}

.composer__input::placeholder {
  color: var(--arka-composer-muted);
  opacity: 1;
}

.composer__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0 1.25rem 0.25rem;
}

.composer__attachment-chip,
.message-attachment {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 15rem;
  padding: 0.375rem 0.625rem;
  color: var(--arka-composer-text);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--arka-composer-action);
  border: 1px solid var(--arka-composer-border);
  border-radius: 0.75rem;
}

.composer__attachment-name,
.message-attachment__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-type-icon,
.attachment-status-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.attachment-type-icon {
  min-width: 1.75rem;
  height: 1.25rem;
  margin-right: 0.4rem;
  padding: 0 0.25rem;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: #64748b;
  border-radius: 0.35rem;
}

.attachment-type-icon--image {
  background: #2563eb;
}

.attachment-type-icon--pdf {
  background: #dc2626;
}

.attachment-type-icon--document {
  background: #1d4ed8;
}

.attachment-type-icon--spreadsheet {
  background: #15803d;
}

.attachment-type-icon--presentation {
  background: #c2410c;
}

.attachment-type-icon--json {
  color: #422006;
  background: #facc15;
}

.attachment-type-icon--archive {
  background: #475569;
}

.attachment-type-icon--markdown {
  background: #7c3aed;
}

.attachment-status-icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.4rem;
  color: #22a06b;
  font-size: 0.75rem;
  font-weight: 800;
}

.attachment-status-icon--uploading {
  border: 2px solid color-mix(in srgb, var(--arka-primary) 24%, transparent);
  border-top-color: var(--arka-primary);
  border-radius: 50%;
  animation: attachment-upload-spin 700ms linear infinite;
}

.composer__attachment-chip--uploading {
  opacity: 0.78;
}

.composer__attachment-remove {
  flex: 0 0 auto;
  padding: 0 0 0 0.4rem;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  background: transparent;
  border: 0;
}

.composer__attachment-remove:not(:disabled) {
  cursor: pointer;
}

.composer__attachment-status {
  padding: 0 1.5rem 0.25rem;
  color: var(--arka-composer-muted);
  font-size: 0.75rem;
}

.composer__toolbar,
.composer__tools {
  display: flex;
  align-items: center;
}

.composer__toolbar {
  min-height: 3.25rem;
  padding: 0.25rem 0.75rem 0.5rem;
}

.composer__tools {
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.375rem;
}

.composer__action,
.composer__voice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--arka-composer-text);
  background: transparent;
  border: 0;
}

.composer__action-tooltip {
  display: inline-flex;
}

/* Il comando allegati resta secondario e più compatto del pulsante principale. */
.composer__action:disabled,
.composer__voice:disabled {
  color: var(--arka-composer-text);
  cursor: default;
  opacity: 1;
}

.composer__action.composer__action--disabled {
  cursor: default;
  opacity: 0.38;
  pointer-events: none;
}

.message-attachments {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.message-attachment {
  max-width: 13rem;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-color: color-mix(in srgb, currentColor 18%, transparent);
}

/* I file prodotti dall'AI hanno card riconoscibili e scaricabili. */
.ai-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.875rem;
}

.ai-attachment-card {
  color: var(--arka-composer-text);
  background: var(--arka-composer-background);
  border: 1px solid var(--arka-composer-border);
  border-radius: 1rem;
  box-shadow: 0 0.25rem 0.9rem rgb(0 0 0 / 10%);
}

.ai-attachment-card--document {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: min(21rem, 100%);
  min-height: 4.5rem;
  padding: 0.75rem;
  gap: 0.75rem;
}

.ai-attachment-card--image {
  width: min(13rem, 100%);
  overflow: hidden;
}

.ai-attachment-card__preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--arka-composer-action) 70%, transparent);
  border: 0;
}

.ai-attachment-card__preview:not(:disabled) {
  cursor: zoom-in;
}

.ai-attachment-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-attachment-card__loading {
  position: absolute;
  inset: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: auto;
  border: 2px solid color-mix(in srgb, var(--arka-primary) 22%, transparent);
  border-top-color: var(--arka-primary);
  border-radius: 50%;
  animation: attachment-upload-spin 700ms linear infinite;
}

.ai-attachment-card__loading--error {
  width: auto;
  height: auto;
  color: var(--arka-composer-muted);
  font-size: 0.7rem;
  white-space: nowrap;
  border: 0;
  animation: none;
}

.ai-attachment-card__footer {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  gap: 0.5rem;
}

.ai-attachment-card__type {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  border-radius: 0.7rem;
}

.ai-attachment-card__type-image {
  display: block;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
}

.ai-attachment-card__details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.ai-attachment-card__name {
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-attachment-card__metadata {
  margin-top: 0.15rem;
  color: var(--arka-composer-muted);
  font-size: 0.68rem;
}

.ai-attachment-card__download {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--arka-primary);
  background: var(--arka-composer-action);
  border: 0;
  border-radius: 50%;
}

.ai-attachment-card__download:not(:disabled) {
  cursor: pointer;
}

.ai-attachment-card__download svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ai-attachment-card__download--loading svg {
  animation: attachment-upload-spin 700ms linear infinite;
}

.ai-attachment-card__download--error {
  color: var(--bs-danger);
}

.ai-attachment-card__error {
  display: block;
  grid-column: 1 / -1;
  padding: 0 0.75rem 0.65rem;
  color: var(--bs-danger);
  font-size: 0.68rem;
}

.composer__assistant-label {
  display: block;
  min-width: 0;
  max-width: min(15rem, 45vw);
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  overflow: hidden;
  color: var(--arka-composer-muted);
  font-size: 0.875rem;
  font-weight: 300;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer__action,
.composer__voice {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--arka-composer-action);
  border-radius: 1.125rem;
}

.composer__action svg,
.composer__voice svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Il comando allegati resta secondario e più compatto del pulsante principale. */
.composer__action {
  width: 2rem;
  height: 2rem;
  border-radius: 0.875rem;
}

.composer__action svg {
  width: 1rem;
  height: 1rem;
}

.composer__voice {
  position: relative;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--arka-primary) !important;
  border-radius: 50%;
  box-shadow: 0 0.125rem 0.5rem rgb(46 124 140 / 18%);
}

.composer__voice svg {
  width: 1.375rem;
  height: 1.375rem;
}

.composer__voice:not(:disabled) {
  cursor: pointer;
}

.composer__voice:focus-visible {
  outline: 2px solid var(--arka-primary);
  outline-offset: 2px;
}

.composer__voice--send {
  color: var(--arka-primary) !important;
  background-color: var(--arka-composer-action);
}

.composer__voice--stop {
  color: var(--arka-primary) !important;
  background-color: var(--arka-composer-action);
}

.composer__voice.composer__voice--recording {
  color: var(--arka-primary) !important;
  background-color: var(--arka-composer-action);
  box-shadow: 0 0.125rem 0.5rem rgb(46 124 140 / 18%);
}

.composer__voice.composer__voice--recording .composer__stop-icon {
  color: #c86b70;
}

.composer__voice--stop:disabled {
  opacity: 0.55;
}

.composer__voice--stopping {
  opacity: 0.65;
}

.composer__stop-icon {
  overflow: visible;
}

.composer__voice .composer__stop-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.composer__stop-icon .composer__stop-ring {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 42 24;
  stroke-linecap: round;
  stroke-width: 1.4;
  transform-origin: center;
  animation: composer-stop-spin 950ms linear infinite;
}

.composer__stop-icon .composer__stop-square {
  fill: currentColor;
  stroke: none;
}

.composer-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.5rem 0 0;
  color: var(--arka-composer-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
}

.composer-hint svg {
  width: 0.875rem;
  height: 0.875rem;
  margin-left: 0.375rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.composer-disclaimer {
  margin: 0.375rem 0 0;
  padding: 0 0.75rem;
  color: var(--arka-composer-muted);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  opacity: 0.82;
}

/* Scelta iniziale obbligatoria quando il token espone piu' assistenti. */
.chat-type-dialog {
  background-color: rgb(0 0 0 / 58%);
  backdrop-filter: blur(0.375rem);
}

.chat-type-dialog__panel {
  width: min(100%, 48rem);
  max-height: min(80dvh, 42rem);
  padding: 1.25rem;
  overflow-y: auto;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 1.5rem;
  box-shadow: 0 1.25rem 4rem rgb(0 0 0 / 32%);
}

.chat-type-dialog__heading {
  margin-bottom: 1rem;
}

.chat-type-dialog__eyebrow {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--arka-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat-type-dialog__heading h1 {
  margin: 0 0 0.375rem;
  font-size: 1.375rem;
  font-weight: 650;
}

.chat-type-dialog__heading p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

/* Conferma esplicita prima di abbandonare la conversazione corrente. */
.new-chat-confirm-dialog {
  background-color: rgb(0 0 0 / 58%);
  backdrop-filter: blur(0.375rem);
}

.new-chat-confirm-dialog__panel {
  width: min(100%, 32rem);
  padding: 1.5rem;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 1.25rem;
  box-shadow: 0 1.25rem 4rem rgb(0 0 0 / 32%);
}

.new-chat-confirm-dialog__heading {
  margin-bottom: 1.5rem;
}

.new-chat-confirm-dialog__eyebrow {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--arka-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.new-chat-confirm-dialog__heading h2 {
  margin: 0 0 0.625rem;
  font-size: 1.35rem;
  font-weight: 650;
}

.new-chat-confirm-dialog__heading p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.new-chat-confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
}

.new-chat-confirm-dialog__cancel,
.new-chat-confirm-dialog__confirm {
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 650;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.new-chat-confirm-dialog__cancel {
  color: #fff;
  background-color: var(--arka-primary);
  border-color: var(--arka-primary);
}

.new-chat-confirm-dialog__cancel:hover,
.new-chat-confirm-dialog__cancel:focus-visible {
  background-color: #286d7b;
  border-color: #286d7b;
  outline: 0;
}

.new-chat-confirm-dialog__confirm {
  color: var(--bs-body-color);
  background-color: transparent;
  border-color: var(--bs-border-color);
}

.new-chat-confirm-dialog__confirm:hover,
.new-chat-confirm-dialog__confirm:focus-visible {
  color: var(--arka-primary);
  background-color: color-mix(in srgb, var(--arka-primary) 10%, transparent);
  border-color: var(--arka-primary);
  outline: 0;
}

.new-chat-confirm-dialog__cancel:active,
.new-chat-confirm-dialog__confirm:active {
  transform: scale(0.97);
}

.new-chat-confirm-dialog__cancel:disabled,
.new-chat-confirm-dialog__confirm:disabled {
  cursor: wait;
  opacity: 0.55;
  transform: none;
}

.chat-type-dialog__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.chat-type-option {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 4.5rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.chat-type-option:hover,
.chat-type-option:focus-within {
  background-color: color-mix(in srgb, var(--arka-primary) 10%, var(--bs-tertiary-bg));
  border-color: var(--arka-primary);
  box-shadow: 0 0 0 0.2rem rgb(var(--bs-primary-rgb) / 16%);
  transform: translateY(-1px);
}

.chat-type-option__select {
  display: flex;
  flex: 1;
  min-width: 0;
  padding: 0.75rem 2.75rem 0.75rem 0.875rem;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: inherit;
}

.chat-type-option__select:focus-visible,
.chat-type-option__pin:focus-visible {
  outline: 2px solid var(--arka-primary);
  outline-offset: -2px;
}

.chat-type-option__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-type-option__pin {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--bs-secondary-color);
  font-size: 1.25rem;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.chat-type-option__pin:hover {
  color: #f59e0b;
  background-color: rgb(245 158 11 / 12%);
}

.chat-type-option__pin--active {
  color: #f59e0b;
}

.chat-type-option__pin:disabled {
  cursor: wait;
  opacity: 0.55;
}

.chat-type-option__title {
  font-size: 0.875rem;
  font-weight: 700;
}

.chat-type-option__description {
  display: -webkit-box;
  margin-top: 0.125rem;
  overflow: hidden;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.chat-type-dialog__status:empty {
  display: none;
}

@keyframes empty-state-in {
  from {
    opacity: 0;
  }
}

@keyframes composer-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}

@keyframes message-status-shimmer {
  to {
    background-position: -125% 50%;
  }
}

@keyframes ai-image-shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes composer-stop-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes composer-neon-spin {
  to {
    --arka-composer-neon-angle: 360deg;
  }
}

@keyframes attachment-upload-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1024px) {
  /* Sui dispositivi touch i tre puntini non possono dipendere dall'hover. */
  .message-row--assistant-actions .message-copy-menu-toggle {
    opacity: 1;
    pointer-events: auto;
  }

  /* Anche il pulsante TTS resta sempre visibile su touch. */
  .message-row--assistant-actions .message-tts-toggle {
    opacity: 1;
    pointer-events: auto;
  }

  .message-bubble--user,
  .message-bubble--assistant {
    max-width: 85%;
  }

  .chat-surface.chat-surface--empty {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  /* Negli iframe medi il composer occupa meno spazio orizzontale e verticale. */
  .composer-area {
    width: min(88vw, 44rem);
  }

  .composer__input {
    height: calc(1.4rem + 0.6rem);
    min-height: calc(1.4rem + 0.6rem);
    max-height: calc((1.4rem * 3) + 0.6rem);
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .composer__input::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .composer__toolbar {
    min-height: 3rem;
  }

  .composer-hint {
    display: none;
  }
}

@media (min-width: 1025px) and (max-width: 1366px) {
  .composer-area {
    width: min(78vw, 54rem);
  }

  .composer__input {
    padding-right: 1.375rem;
    padding-left: 1.375rem;
  }
}

/* Su desktop il composer diventa una singola pillola in stile OpenAI. */
@media (min-width: 1025px) {
  .composer-area {
    max-width: 60rem;
  }

  .composer {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto 2.5rem;
    min-height: 3.5rem;
    padding: 0.25rem 0.375rem;
    overflow: visible;
    align-items: center;
    border-radius: 1.75rem;
  }

  .composer__input {
    grid-row: 3;
    grid-column: 2;
    align-self: center;
    height: calc(1.4rem + 0.6rem);
    min-height: calc(1.4rem + 0.6rem);
    max-height: calc((1.4rem * 3) + 0.6rem);
    padding: 0.3rem 0.5rem;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .composer__input::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .composer__toolbar,
  .composer__tools {
    display: contents;
  }

  .composer__attachments {
    grid-row: 1;
    grid-column: 1 / -1;
    padding-top: 0.375rem;
  }

  .composer__attachment-status {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .composer__action-tooltip {
    grid-row: 3;
    grid-column: 1;
    align-self: center;
    justify-self: center;
  }

  .composer__action {
    align-self: center;
    justify-self: center;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    border-radius: 50%;
  }

  .composer__action svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .composer__assistant-label {
    grid-row: 3;
    grid-column: 3;
    align-self: center;
    max-width: 13rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.9375rem;
    font-weight: 300;
  }

  .composer__voice {
    grid-row: 3;
    grid-column: 4;
    align-self: center;
    justify-self: center;
    margin-left: 0;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--arka-composer-muted) !important;
    background: transparent;
    box-shadow: none;
  }

  .composer__voice svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .composer__voice--send,
  .composer__voice--stop {
    color: var(--arka-primary) !important;
    background-color: var(--arka-composer-action);
  }

  .composer-hint {
    display: none;
  }
}

@media (max-width: 600px) {
  /* Su smartphone l'azione di copia sotto il prompt non serve. */
  .message-row--user-actions .message-copy-button {
    display: none;
  }

  .navbar .container-xl {
    gap: 0.5rem;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .brand-logo-frame {
    width: min(8.5rem, 38vw);
    height: 2.25rem;
  }

  .header-actions {
    gap: 0.375rem;
    margin-left: 0 !important;
  }

  .chat-search__panel {
    position: fixed;
    top: 3.25rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }

  .chat-surface {
    padding-right: 0.75rem !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    padding-left: 0.75rem !important;
  }

  .message-bubble--user {
    max-width: 88%;
  }

  .message-bubble--assistant {
    max-width: 100%;
  }

  #login-slogan {
    font-size: 1.5rem;
  }

  #dashboard-slogan {
    font-size: 1rem;
  }

  .composer {
    border-radius: 1.5rem;
  }

  .composer-area {
    width: 100%;
  }

  .composer-disclaimer {
    padding: 0 0.375rem;
    font-size: 0.625rem;
  }

  /* Dopo il primo invio recuperiamo spazio verticale soltanto su smartphone. */
  .chat-surface:not(.chat-surface--empty) .composer-disclaimer {
    display: none;
  }

  .composer__input {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .composer__toolbar {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .composer__assistant-label {
    max-width: 42vw;
    padding-left: 0.5rem;
  }

  .chat-type-dialog__panel {
    width: 100%;
    max-height: calc(100dvh - 1.5rem);
    padding: 1.125rem;
    border-radius: 1.25rem;
  }

  .chat-type-dialog__options {
    grid-template-columns: 1fr;
  }

  .new-chat-button {
    width: 2.25rem;
    padding-right: 0;
    padding-left: 0;
  }

  .new-chat-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 360px) {
  .navbar .container-xl {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .brand-logo-frame {
    width: min(6.75rem, 34vw);
    height: 2rem;
  }

  .theme-toggle {
    width: 3rem;
  }

  .chat-search__panel {
    right: 0.5rem;
    left: 0.5rem;
    grid-template-columns: minmax(5rem, 1fr) auto repeat(3, 1.875rem);
    padding-left: 0.625rem;
  }

  .theme-toggle__checkbox:checked + .theme-toggle__label .theme-toggle__ball,
  :root[data-bs-theme='dark'] .theme-toggle__ball {
    transform: translateX(1.25rem);
  }

  .chat-surface {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .composer__assistant-label {
    max-width: 34vw;
  }
}

/* Un iframe basso richiede soprattutto una riduzione dell'altezza del composer. */
@media (max-height: 700px) {
  .chat-surface {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }

  .composer__input {
    padding-right: 1.125rem;
    padding-left: 1.125rem;
  }

  .composer__toolbar {
    min-height: 2.75rem;
    padding-bottom: 0.375rem;
  }

  .composer__action {
    width: 2.25rem;
    height: 2.25rem;
  }

  .composer__voice {
    width: 2.75rem;
    height: 2.75rem;
  }

  .composer-hint {
    margin-top: 0.375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #empty-state,
  .composer-area {
    animation: none;
  }

  .message-status {
    background-position: 50% 50%;
    animation: none;
  }

  .composer__stop-icon .composer__stop-ring {
    animation: none;
  }

  .composer--waiting::before {
    animation: none;
  }

  .ai-image-frame--loading::after,
  .ai-image-placeholder__glow {
    animation: none;
  }
}