/* ── Variabili ────────────────────────────────────────────────────────────── */
:root {
     --primary: #ec5b13;
     --primary-10: rgba(236, 91, 19, 0.10);
     --primary-15: rgba(236, 91, 19, 0.15);
     --primary-20: rgba(236, 91, 19, 0.20);
     --bg: #f7f5f4;
     --bg-dark: #1c1009;
     --surface: #ffffff;
     --surface-dark: rgba(22, 30, 44, 0.85);
     --text: #1e293b;
     --text-dark: #f1f5f9;
     --muted: #64748b;
     --muted-dark: #94a3b8;
     --border: #e2e8f0;
     --border-dark: rgba(236, 91, 19, 0.18);
     --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);
     --shadow-lg: 0 20px 40px rgba(0, 0, 0, .10), 0 8px 16px rgba(0, 0, 0, .05);
     --shadow-primary: 0 8px 20px rgba(236, 91, 19, .28);
     --radius-sm: 0.5rem;
     --radius-md: 0.75rem;
     --radius-lg: 1rem;
     --radius-full: 9999px;
     --t: all 0.22s ease;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
     font-family: 'Public Sans', system-ui, sans-serif;
     background-color: var(--bg);
     color: var(--text);
     min-height: 100dvh;
     display: flex;
     flex-direction: column;
     transition: background-color 0.3s ease, color 0.3s ease;
     -webkit-font-smoothing: antialiased;

     &.dark {
          background-color: var(--bg-dark);
          color: var(--text-dark);
     }
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.hidden {
     display: none !important;
}

.material-symbols-outlined {
     font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
     user-select: none;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
     width: 5px;
}

::-webkit-scrollbar-track {
     background: transparent;
}

::-webkit-scrollbar-thumb {
     background: #dde1e7;
     border-radius: var(--radius-full);
}

.dark ::-webkit-scrollbar-thumb {
     background: #2e2118;
}

/* ── Animazioni ───────────────────────────────────────────────────────────── */
@keyframes spin {
     to {
          transform: rotate(360deg);
     }
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: 0.5;
          transform: scale(0.8);
     }
}

.spin {
     display: inline-block;
     animation: spin 0.85s linear infinite;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.875rem 1.5rem;
     background-color: var(--surface);
     border-bottom: 1px solid var(--border);
     position: sticky;
     top: 0;
     z-index: 100;
     transition: var(--t);

     .dark & {
          background-color: var(--surface-dark);
          border-bottom-color: var(--border-dark);
          backdrop-filter: blur(12px);
     }

     &__title {
          font-size: 1.0625rem;
          font-weight: 700;
          letter-spacing: -0.02em;
          color: var(--text);

          .dark & {
               color: var(--text-dark);
          }

          @media (max-width: 480px) {
               font-size: 0.9375rem;
          }
     }
}

.header__left {
     display: flex;
     align-items: center;
     gap: 0.75rem;
}

.header__right {
     display: flex;
     align-items: center;
     gap: 0.75rem;
}


.logo {
     width: 2rem;
     height: 2rem;
     background-color: var(--primary);
     border-radius: var(--radius-sm);
     display: grid;
     place-items: center;
     color: #fff;
     flex-shrink: 0;
     box-shadow: var(--shadow-primary);

     & .material-symbols-outlined {
          font-size: 1.1rem;
     }
}

.privacy-badge {
     display: flex;
     align-items: center;
     gap: 0.3rem;
     font-size: 0.75rem;
     font-weight: 500;
     color: var(--muted);
     background-color: #f1f5f9;
     padding: 0.3rem 0.7rem;
     border-radius: var(--radius-full);
     transition: var(--t);

     .dark & {
          color: var(--muted-dark);
          background-color: var(--primary-10);
     }

     & .material-symbols-outlined {
          font-size: 1rem;
          color: #10b981;
     }

     &__text {
          @media (max-width: 480px) {
               display: none;
          }
     }
}

/* ── Main & Container ─────────────────────────────────────────────────────── */
.main {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     padding: 1.75rem 1rem 3rem;

     @media (max-width: 768px) {
          padding: 1rem 0.75rem 2rem;
     }

     @media (max-width: 480px) {
          padding: 0.75rem 0.5rem 1.5rem;
     }
}

.container {
     display: flex;
     width: 100%;
     max-width: 72rem;
     gap: 1.25rem;
     align-items: flex-start;

     @media (max-width: 1024px) {
          flex-direction: column;
     }
}

/* ── Workspace Card ───────────────────────────────────────────────────────── */
.workspace-card {
     flex: 1;
     min-width: 0;
     background-color: var(--surface);
     border-radius: var(--radius-lg);
     border: 1px solid var(--border);
     box-shadow: var(--shadow-lg);
     display: flex;
     flex-direction: column;
     min-height: clamp(480px, 70vh, 700px);
     overflow: hidden;
     transition: var(--t);
     width: 100%;

     .dark & {
          background-color: var(--surface-dark);
          border-color: var(--border-dark);
          backdrop-filter: blur(12px);
     }
}

/* ── Tab ──────────────────────────────────────────────────────────────────── */
.tabs {
     display: flex;
     border-bottom: 1px solid var(--border);
     flex-shrink: 0;

     .dark & {
          border-bottom-color: var(--border-dark);
     }
}

.tab {
     flex: 1;
     padding: 0.9rem 1rem;
     font-size: 0.8125rem;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.4rem;
     color: var(--muted);
     background: none;
     border: none;
     border-bottom: 2px solid transparent;
     margin-bottom: -1px;
     cursor: pointer;
     white-space: nowrap;
     transition: color 0.2s ease, border-color 0.2s ease;

     .dark & {
          color: var(--muted-dark);
     }

     & .material-symbols-outlined {
          font-size: 1.1rem;

          @media (max-width: 380px) {
               display: none;
          }
     }

     &:hover {
          color: var(--primary);
     }

     &.active {
          color: var(--primary);
          border-bottom-color: var(--primary);
     }
}

/* ── Pannello (base condivisa compose + output) ───────────────────────────── */
.panel {
     flex: 1;
     display: flex;
     flex-direction: column;
     padding: 1.25rem 1.5rem 1.25rem;
     gap: 0;
     overflow: hidden;

     @media (max-width: 480px) {
          padding: 1rem;
     }
}

/* ── Campo Oggetto ────────────────────────────────────────────────────────── */
.subject-field {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 0 0.625rem;

     &__icon {
          color: #9ca3af;
          font-size: 1.2rem;
          flex-shrink: 0;
     }

     &__input {
          flex: 1;
          border: none;
          outline: none;
          font-family: inherit;
          font-size: 0.9375rem;
          font-weight: 500;
          color: var(--text);
          background: transparent;
          min-width: 0;

          .dark & {
               color: var(--text-dark);
          }

          &::placeholder {
               color: #9ca3af;
               font-weight: 400;
          }
     }
}

/* ── Divisore ─────────────────────────────────────────────────────────────── */
.divider {
     height: 1px;
     background-color: var(--border);
     margin-bottom: 0.75rem;
     flex-shrink: 0;

     .dark & {
          background-color: var(--border-dark);
     }
}

/* ── Textarea ─────────────────────────────────────────────────────────────── */
.textarea,
.subject-field__input {
     flex: 1;
     width: 100%;
     resize: none;
     border: none;
     outline: none;
     font-family: inherit;
     font-size: 1rem;
     line-height: 1.7;
     color: var(--text);
     background: transparent;
     min-height: 0;

     .dark & {
          color: var(--text-dark);
     }

     &::placeholder {
          color: #9ca3af;
     }
}

/* ── Action Bar ───────────────────────────────────────────────────────────── */
.action-bar {
     display: flex;
     align-items: center;
     justify-content: end;
     gap: 0.75rem;
     padding-top: 1rem;
     margin-top: 0.75rem;
     border-top: 1px solid var(--border);
     flex-shrink: 0;

     .dark & {
          border-top-color: var(--border-dark);
     }

     &__right {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          margin-left: auto;
     }
}

/* ── Bottoni icona generici ───────────────────────────────────────────────── */
.icon-btn {
     display: grid;
     place-items: center;
     padding: 0.4rem;
     color: #9ca3af;
     background: none;
     border: none;
     border-radius: var(--radius-sm);
     cursor: pointer;
     transition: var(--t);

     & .material-symbols-outlined {
          font-size: 1.25rem;
     }

     &:hover {
          color: var(--primary);
          background-color: var(--primary-10);
     }
}

/* ── Contatore parole ─────────────────────────────────────────────────────── */
.word-count {
     font-size: 0.75rem;
     color: #9ca3af;
     white-space: nowrap;
     margin-right: 0.5rem;
}

/* ── Genera bozza ─────────────────────────────────────────────────────────── */
.generate-btn {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     padding: 0.6rem 1.375rem;
     background-color: var(--primary);
     color: #fff;
     font-family: inherit;
     font-size: 0.875rem;
     font-weight: 700;
     border: none;
     border-radius: var(--radius-md);
     cursor: pointer;
     box-shadow: var(--shadow-primary);
     transition: var(--t);
     white-space: nowrap;

     &:hover:not(:disabled) {
          background-color: #d44e0c;
          box-shadow: 0 10px 24px rgba(236, 91, 19, .38);
          transform: translateY(-1px);
     }

     &:active:not(:disabled) {
          transform: translateY(0);
     }

     &:disabled {
          opacity: 0.65;
          cursor: not-allowed;
     }

     &__label {
          @media (max-width: 380px) {
               display: none;
          }
     }
}

/* ── Output: Oggetto ──────────────────────────────────────────────────────── */
.output-subject {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.7rem 0.875rem;
     background-color: var(--primary-10);
     border: 1px solid var(--primary-15);
     border-radius: var(--radius-sm);
     margin-bottom: 1rem;
     flex-shrink: 0;

     &__icon {
          color: var(--primary);
          font-size: 1.1rem;
          flex-shrink: 0;
     }

     &__label {
          font-size: 0.65rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.07em;
          color: var(--primary);
          white-space: nowrap;
     }

     &__text {
          flex: 1;
          font-size: 0.9375rem;
          font-weight: 600;
          color: var(--text);
          min-width: 0;

          .dark & {
               color: var(--text-dark);
          }
     }
}

/* ── Output: Corpo ────────────────────────────────────────────────────────── */
.output-body {
     flex: 1;
     overflow-y: auto;
     padding-right: 0.25rem;
}

.output-text {
     font-size: 0.9375rem;
     line-height: 1.8;
     color: var(--text);
     white-space: pre-wrap;
     word-break: break-word;

     .dark & {
          color: var(--text-dark);
     }
}

.output-error {
     color: #ef4444;
     font-size: 0.9rem;
     display: flex;
     align-items: center;
     gap: 0.375rem;
}

/* ── Output: Azioni ───────────────────────────────────────────────────────── */
.output-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 0.625rem;
     padding-top: 1rem;
     margin-top: 0.75rem;
     border-top: 1px solid var(--border);
     flex-shrink: 0;

     .dark & {
          border-top-color: var(--border-dark);
     }
}

.output-btn {
     display: inline-flex;
     align-items: center;
     gap: 0.375rem;
     padding: 0.5rem 0.9375rem;
     font-family: inherit;
     font-size: 0.8125rem;
     font-weight: 600;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     background: var(--surface);
     color: var(--muted);
     cursor: pointer;
     transition: var(--t);

     .dark & {
          border-color: var(--border-dark);
          background: transparent;
          color: var(--muted-dark);
     }

     &:hover:not(:disabled) {
          border-color: var(--primary);
          color: var(--primary);
     }

     &:disabled {
          opacity: 0.65;
          cursor: not-allowed;
     }

     &--primary {
          background-color: var(--primary);
          border-color: var(--primary);
          color: #fff;
          box-shadow: 0 3px 10px rgba(236, 91, 19, .25);

          &:hover:not(:disabled) {
               background-color: #d44e0c;
               color: #fff;
          }
     }

     & .material-symbols-outlined {
          font-size: 1rem;
     }
}

/* ── Selezione lingua ─────────────────────────────────────────────────────── */
.select-wrapper {
     position: relative;
}

.select-wrapper__chevron {
     position: absolute;
     right: 0.5rem;
     top: 50%;
     transform: translateY(-50%);
     font-size: 1.1rem;
     color: var(--muted);
     pointer-events: none;
     transition: color 0.2s ease;
}

.language-select {
     width: 100%;
     appearance: none;
     -webkit-appearance: none;
     padding: 0.5rem 2.25rem 0.5rem 0.75rem;
     font-family: inherit;
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--text);
     background-color: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     cursor: pointer;
     outline: none;
     transition: var(--t);

     .dark & {
          background-color: #151f2e;
          border-color: var(--border-dark);
          color: var(--text-dark);
     }

     &:hover {
          border-color: rgba(236, 91, 19, .45);

          &~.select-wrapper__chevron {
               color: var(--primary);
          }
     }

     &:focus {
          border-color: var(--primary);
          box-shadow: 0 0 0 3px var(--primary-10);
     }
}

/* ── Settings Panel ───────────────────────────────────────────────────────── */
.settings-panel {
     width: 19rem;
     flex-shrink: 0;
     background-color: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 1.375rem;
     display: flex;
     flex-direction: column;
     gap: 1.625rem;
     box-shadow: var(--shadow-md);
     position: sticky;
     top: 5.5rem;
     max-height: calc(100vh - 7rem);
     overflow-y: auto;
     transition: var(--t);

     .dark & {
          background-color: var(--surface-dark);
          border-color: var(--border-dark);
          backdrop-filter: blur(12px);
     }

     &__header {
          display: flex;
          align-items: center;
          justify-content: space-between;
     }

     &__title {
          font-size: 0.9375rem;
          font-weight: 700;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: var(--text);

          .dark & {
               color: var(--text-dark);
          }

          & .material-symbols-outlined {
               font-size: 1.15rem;
               color: var(--primary);
          }
     }

     @media (max-width: 1024px) {
          width: 100%;
          position: static;
          max-height: none;
     }
}

/* ── Settings Group ───────────────────────────────────────────────────────── */
.settings-group {
     display: flex;
     flex-direction: column;
     gap: 0.625rem;

     &__label {
          display: block;
          font-size: 0.6875rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          color: var(--muted);
     }
}

/* ── Tone Grid ────────────────────────────────────────────────────────────── */
.tone-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0.4rem;
}

.tone-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.375rem;
     padding: 0.5rem 0.375rem;
     font-family: inherit;
     font-size: 0.8125rem;
     font-weight: 500;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     background: none;
     color: #475569;
     cursor: pointer;
     transition: var(--t);

     .dark & {
          border-color: var(--border-dark);
          color: #cbd5e1;
     }

     & .material-symbols-outlined {
          font-size: 1rem;
     }

     &:hover:not(.active) {
          border-color: rgba(236, 91, 19, .45);
          color: var(--primary);
     }

     &.active {
          border-color: var(--primary);
          background-color: var(--primary-10);
          color: var(--primary);
          font-weight: 600;
     }
}

/* ── Length Selector ──────────────────────────────────────────────────────── */
.length-selector {
     display: flex;
     gap: 0.25rem;
     background-color: #f1f5f9;
     padding: 0.25rem;
     border-radius: var(--radius-md);

     .dark & {
          background-color: var(--primary-10);
     }
}

.length-btn {
     flex: 1;
     padding: 0.375rem;
     font-family: inherit;
     font-size: 0.75rem;
     font-weight: 600;
     border: 1px solid transparent;
     border-radius: var(--radius-sm);
     background: none;
     color: var(--muted);
     cursor: pointer;
     transition: var(--t);

     &:hover:not(.active) {
          background-color: rgba(255, 255, 255, .6);
     }

     &.active {
          background-color: #fff;
          border-color: var(--border);
          color: var(--text);
          box-shadow: var(--shadow-sm);

          .dark & {
               background-color: #1e2d3d;
               border-color: var(--border-dark);
               color: var(--text-dark);
          }
     }
}

/* ── Options ──────────────────────────────────────────────────────────────── */
.options-group {
     padding-top: 1rem;
     border-top: 1px solid var(--border);
     gap: 0.875rem;

     .dark & {
          border-top-color: var(--border-dark);
     }
}

.option {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;

     &__left {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.875rem;
          font-weight: 500;
          color: var(--text);

          .dark & {
               color: var(--text-dark);
          }

          & .material-symbols-outlined {
               font-size: 1.1rem;
               color: var(--muted);
          }
     }

     &--pro {
          & .option__left {
               color: var(--primary);
               font-weight: 600;

               & .material-symbols-outlined {
                    color: var(--primary);
               }
          }
     }
}

.option__left {
     display: flex;
     align-items: center;

     & span:first-child {
          margin-right: 0.25rem;
          font-size: 0.875rem;
     }
}

/* ── Toggle ───────────────────────────────────────────────────────────────── */
.toggle {
     width: 2.5rem;
     height: 1.375rem;
     background-color: #d1d5db;
     border-radius: var(--radius-full);
     display: flex;
     align-items: center;
     padding: 0 0.1875rem;
     cursor: pointer;
     transition: background-color 0.22s ease;
     flex-shrink: 0;

     .dark & {
          background-color: #374151;
     }

     &::after {
          content: '';
          width: 1rem;
          height: 1rem;
          background-color: #fff;
          border-radius: 50%;
          box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
          transition: transform 0.22s ease;
     }

     &.on {
          background-color: var(--primary);

          &::after {
               transform: translateX(1.0625rem);
          }
     }
}

/* ── Pro Badge ────────────────────────────────────────────────────────────── */
.pro-badge {
     font-size: 0.625rem;
     font-weight: 700;
     background-color: var(--primary);
     color: #fff;
     padding: 0.15rem 0.5rem;
     border-radius: var(--radius-full);
     letter-spacing: 0.04em;
}

/* ── Tip ──────────────────────────────────────────────────────────────────── */
.tip {
     margin-top: auto;
     padding: 0.875rem 1rem;
     background-color: var(--primary-10);
     border: 1px solid var(--primary-15);
     border-radius: var(--radius-md);
     display: flex;
     flex-direction: column;
     gap: 0.4rem;

     &__title {
          font-size: 0.75rem;
          font-weight: 700;
          color: var(--primary);
     }

     &__text {
          font-size: 0.8rem;
          color: var(--muted);
          line-height: 1.55;

          .dark & {
               color: var(--muted-dark);
          }
     }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.875rem 1.5rem;
     font-size: 0.6875rem;
     color: #9ca3af;
     border-top: 1px solid var(--border);
     background-color: rgba(255, 255, 255, .6);
     backdrop-filter: blur(8px);
     transition: var(--t);

     .dark & {
          border-top-color: var(--border-dark);
          background-color: transparent;
     }

     &__left {
          display: flex;
          align-items: center;
          gap: 1.25rem;

          & a {
               color: inherit;
               text-decoration: none;
               transition: color 0.2s ease;

               &:hover {
                    color: var(--primary);
               }
          }
     }

     &__right {
          display: flex;
          align-items: center;
          gap: 1rem;
     }

     @media (max-width: 600px) {
          flex-direction: column;
          gap: 0.5rem;
          text-align: center;
          padding: 0.75rem 1rem;
     }
}

/* ── Status ───────────────────────────────────────────────────────────────── */
.status {
     display: flex;
     align-items: center;
     gap: 0.35rem;

     &__dot {
          width: 0.4rem;
          height: 0.4rem;
          background-color: #10b981;
          border-radius: 50%;
          animation: pulse-dot 2.5s ease infinite;
     }
}

.encrypted {
     display: flex;
     align-items: center;
     gap: 0.3rem;

     & .material-symbols-outlined {
          font-size: 0.875rem;
     }
}