/* ==========================================================================
   UX 2.81: ΠΕΡΙΟΧΗ «VIEWS»
   Ρυθμίσεις, Συνδρομή, Οδηγός, Ρουτίνες, Εξάσκηση, Μέντορας, Αρχεία.
   Χτίζεται πάνω στο σύστημα u- του app.css και στα tokens του :root.
   Όλα τα ονόματα ξεκινούν με uxv- ώστε να μη συγκρούονται με άλλες περιοχές.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ελληνικοί τίτλοι: η Literata ζωγραφίζει τον τόνο ενός κεφαλαίου (Έ, Ά, Ή…)
   μέσα στο κενό πριν από αυτό, και το «Στούντιο Έκθεσης» διαβαζόταν ως μία
   λέξη. Λίγο παραπάνω κενό μεταξύ λέξεων, μόνο στα ελληνικά και μόνο εκεί
   που γράφει η γραμματοσειρά τίτλων. Μόνο στις σελίδες αυτής της περιοχής
   (.uxv-scope): τον ίδιο κανόνα για όλη την εφαρμογή τον αποφασίζει το app.css.
   -------------------------------------------------------------------------- */
:lang(el) .uxv-scope h1, :lang(el) .uxv-scope h2, :lang(el) .uxv-scope h3,
:lang(el) .uxv-scope .block-title, :lang(el) .uxv-scope .u-section-title,
:lang(el) .uxv-scope .md h1, :lang(el) .uxv-scope .md h2, :lang(el) .uxv-scope .md h3, :lang(el) .uxv-scope .md h4 { word-spacing: 0.08em; }
/* Το word-spacing δεν αρκεί: ο τόνος του «Έ» της Literata κάθεται μακριά από
   το γράμμα, κολλημένος στην προηγούμενη λέξη. Λέξη τίτλου που αρχίζει με
   τονισμένο κεφαλαίο παίρνει δικό της κενό από αριστερά (μετρήθηκε σε
   στιγμιότυπο 3x: 0.18em διαβάζεται ως δύο λέξεις). */
.uxv-tonos { margin-left: 0.18em; }

/* --------------------------------------------------------------------------
   Κοινά: η σελίδα πιάνει ΟΛΟ το πλάτος της κύριας περιοχής, όπως το Τεστ.
   Χωρίς όριο πλάτους: σε οθόνη 1920px ένα όριο 780px άφηνε άδειο το μισό
   της οθόνης δεξιά. Όπου το περιεχόμενο είναι στενό από τη φύση του
   (φόρμες, οδηγίες), το μοιράζουμε σε στήλες αντί να το στενεύουμε.
   -------------------------------------------------------------------------- */
.uxv-page { width: 100%; }
.uxv-hint { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }
/* Το app.css μικραίνει το .hint μόνο μέσα σε .field· έξω από αυτό έβγαινε σε
   μέγεθος σώματος (π.χ. «Κάθε τύπος αρχείου…» στις Ρουτίνες). */
.uxv-scope .hint { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }
.uxv-ai { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; margin: 10px 0 0; }

/* --------------------------------------------------------------------------
   Γραμμές που ανοίγουν επί τόπου (Ρυθμίσεις, Οδηγός)
   Κλειστή γραμμή: εικονίδιο, τίτλος, τρέχουσα τιμή, βελάκι. Ανοιχτή: το
   περιεχόμενο από κάτω, στην ίδια κάρτα. Μία λίστα, όχι εννιά κουτιά.
   -------------------------------------------------------------------------- */
.uxv-list {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.uxv-list + .uxv-list { margin-top: 16px; }
.uxv-row { border-top: 1px solid var(--line-soft); }
.uxv-row:first-child { border-top: none; }
.uxv-row > summary {
  display: flex; align-items: center; gap: 13px; min-height: 60px; padding: 10px 16px;
  cursor: pointer; list-style: none; user-select: none; transition: background 0.12s;
}
.uxv-row > summary::-webkit-details-marker { display: none; }
.uxv-row > summary:hover { background: #FBFAF7; }
.uxv-row > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.uxv-row > summary .u-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.uxv-row > summary .u-title { font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uxv-row > summary .u-meta { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uxv-row > summary .uxv-val {
  flex: 0 1 auto; min-width: 0; max-width: 46%; font-size: 14px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
}
.uxv-row > summary .uxv-val.on { color: var(--green); font-weight: 600; }
.uxv-row > summary .u-chev { color: var(--ink-faint); flex: none; display: inline-flex; transition: transform 0.2s var(--ease, ease); }
.uxv-row > summary .u-chev svg { width: 16px; height: 16px; }
.uxv-row[open] > summary .u-chev { transform: rotate(90deg); }
.uxv-row[open] > summary { background: transparent; }
.uxv-body { padding: 2px 18px 20px 69px; animation: uxvIn 0.22s var(--ease, ease); }
@keyframes uxvIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.uxv-body > p:first-child { margin-top: 0; }
.uxv-body > .field:last-child { margin-bottom: 0; }
.uxv-lead { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.5; }
.uxv-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.uxv-row.danger > summary .u-title { color: var(--red); }
.uxv-kv { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.uxv-kv:last-child { border-bottom: none; }
.uxv-kv strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uxv-body .u-why { margin-top: 10px; }
.uxv-body details.u-why { display: block; }

/* Γραμμή χρήσης: ΜΟΝΟ ποσοστό, ποτέ ευρώ. */
.uxv-meter { margin: 4px 0 2px; }
.uxv-meter .uxv-track { height: 10px; background: var(--paper-deep); border-radius: 999px; overflow: hidden; }
.uxv-meter .uxv-fill { height: 100%; border-radius: 999px; background: var(--blue); transition: width 0.4s var(--ease, ease); }
.uxv-meter .uxv-fill.warn { background: var(--gold); }
.uxv-meter .uxv-fill.full { background: var(--red); }
.uxv-meter .uxv-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ink-soft); margin-top: 7px; }
/* Το ποσοστό μένει δεξιά στην πρώτη γραμμή· τυλίγεται η ετικέτα, όχι ο αριθμός. */
.uxv-meter .uxv-meta > span { flex: 1; min-width: 0; }
.uxv-meter .uxv-meta > strong { flex: none; }

/* --------------------------------------------------------------------------
   «Η πρόσβασή σου παρέχεται από…»: κάρτα μέλους ιδρύματος
   -------------------------------------------------------------------------- */
.uxv-access {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-sm); margin-bottom: 18px;
}
.uxv-access .u-main { flex: 1; min-width: 0; }
.uxv-access .uxv-who { font-size: 13px; color: var(--ink-faint); margin-bottom: 2px; }
.uxv-access .uxv-inst { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.25; margin-bottom: 12px; overflow-wrap: anywhere; }
.uxv-access .uxv-note { font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; }
.uxv-fold { margin-top: 18px; }
.uxv-fold > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  color: var(--blue); font-weight: 600; font-size: 14.5px; padding: 8px 0; min-height: 40px;
}
.uxv-fold > summary::-webkit-details-marker { display: none; }
.uxv-fold > summary svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease, ease); }
.uxv-fold[open] > summary svg { transform: rotate(90deg); }
.uxv-fold > .uxv-fold-body { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Οδηγός: μία κάρτα ανά λειτουργία, διπλωμένη, ΕΝΑ μέσο ανά κάρτα
   -------------------------------------------------------------------------- */
.uxv-guide .uxv-body { padding-left: 69px; }
.uxv-guide .uxv-intro { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 12px; max-width: 64ch; line-height: 1.55; }
.uxv-guide ol { padding-left: 20px; margin: 0 0 16px; }
.uxv-guide ol li { font-size: 14.5px; padding: 3px 0; line-height: 1.5; }
.uxv-guide .uxv-media { max-width: 640px; }
/* Φαρδιά οθόνη: η εισαγωγή αριστερά, τα βήματα (και το μέσο) δεξιά, αντί για
   μια στενή στήλη κειμένου με άδειο το υπόλοιπο της κάρτας. */
@media (min-width: 1200px) {
  .uxv-guide .uxv-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; }
  .uxv-guide .uxv-body > .uxv-intro { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .uxv-guide .uxv-body > ol, .uxv-guide .uxv-body > .uxv-media { grid-column: 2; }
  .uxv-guide .uxv-body > .uxv-intro:only-child { grid-column: 1 / -1; grid-row: auto; }
}
.uxv-guide .uxv-media video, .uxv-guide .uxv-media img {
  display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line);
  background: var(--paper-deep); aspect-ratio: 16 / 9; object-fit: cover;
}

/* Εικονίδιο γραμμής στη θέση των παλιών emoji: στον τίτλο κάρτας του οδηγού
   (και στην αρχική πριν τη σύνδεση, με το χρώμα του τίτλου), σε chip γρήγορης
   ενέργειας και στον τύπο αρχείου. */
.guide-card .uxv-gc-ico { display: inline-flex; width: 22px; height: 22px; margin-right: 8px; vertical-align: -3px; color: inherit; }
.guide-card .uxv-gc-ico svg { width: 100%; height: 100%; }
.uxv-ci { display: inline-flex; flex: none; width: 15px; height: 15px; vertical-align: -2px; }
.uxv-ci svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Μέντορας: κεφαλίδα της λίστας συζητήσεων που τυλίγεται αντί να κόβει το
   «Νέα», και composer κινητού με περισσότερο χώρο για το κείμενο.
   -------------------------------------------------------------------------- */
.uxv-scope .convo-panel .cp-head { flex-wrap: wrap; gap: 8px 10px; padding: 0 4px 14px; }
.uxv-scope .convo-panel .cp-head h2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uxv-scope .convo-panel .cp-head .uxv-new { width: 100%; justify-content: center; order: 3; }
/* Ο τίτλος και ο υπότιτλος είναι <span> (inline): χωρίς block, το ellipsis
   και ο χώρος για αστέρι και κάδο δεν ίσχυαν και ένας μακρύς τίτλος περνούσε
   κάτω από το αστέρι. */
.uxv-scope .convo-item .ci-title, .uxv-scope .convo-item .ci-sub { display: block; }
@media (max-width: 640px) {
  .uxv-scope .chat-composer { padding: 8px 10px 10px; }
  .uxv-scope .chat-composer .composer-box { padding: 4px 4px 4px 6px; gap: 2px; border-radius: 14px; }
  .uxv-scope .chat-composer .composer-box textarea { padding: 9px 4px; min-width: 0; }
  .uxv-scope .chat-composer .composer-hint { margin-top: 6px; font-size: 11.5px; line-height: 1.4; padding: 0 44px 0 4px; text-align: left; }
}

/* --------------------------------------------------------------------------
   Ρουτίνες: το κουμπί ημερολογίου τυλίγεται αντί να σπρώχνει τη σελίδα
   -------------------------------------------------------------------------- */
.uxv-calbtn { white-space: normal; text-align: center; height: auto; max-width: 100%; }
.uxv-bu-row { display: flex; gap: 8px; align-items: flex-end; }
.uxv-bu-row textarea { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .uxv-scope .page-head .btn, .uxv-scope .u-head .btn { white-space: normal; text-align: center; }
  /* Βοηθός ρουτίνας: το πεδίο σε όλο το πλάτος, το «Στείλε» από κάτω, ώστε
     το παράδειγμα του placeholder να διαβάζεται ολόκληρο. */
  .uxv-bu-row { flex-direction: column; align-items: stretch; }
  /* Δίχτυ ασφαλείας: clip, όχι hidden, ώστε να μη σπάνε τα sticky. */
  .main-inner:has(.uxv-routines) { overflow-x: clip; }
}

/* --------------------------------------------------------------------------
   Διαγωνίσματα: πριν υπάρξει γραπτό, ΔΕΝ κρατάμε άδειο κουτί 470px με
   ανενεργά κουμπιά. Η φόρμα στέκεται μόνη της, σε όλο το πλάτος (τα πεδία
   σε δύο στήλες στη φαρδιά οθόνη, κανόνας στο app.css)· το πάνελ
   εμφανίζεται μόλις ξεκινήσει γραπτό ή ανοίξει ένα από τα αποθηκευμένα.
   -------------------------------------------------------------------------- */
.tool-layout.uxv-nopaper { grid-template-columns: minmax(0, 1fr); }
.tool-layout.uxv-nopaper .output-panel { display: none; }

/* --------------------------------------------------------------------------
   Κινητό: οι γραμμές και οι κάρτες αναπνέουν λιγότερο στο πλάτος
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Στόχοι αφής τουλάχιστον 40px στο κινητό. Το «Γιατί;» μένει μέσα στη
     φράση: μεγαλώνει μόνο η περιοχή που πιάνει το δάχτυλο, όχι η γραμμή. */
  .uxv-scope .btn-sm { min-height: 40px; }
  .uxv-scope details.u-why > summary { padding: 12px 8px; margin: -12px -8px; }
  .uxv-page { padding-bottom: 24px; }
  .uxv-row > summary { padding: 10px 12px; gap: 11px; }
  .uxv-body, .uxv-guide .uxv-body { padding: 2px 14px 18px 14px; }
  .uxv-row > summary .uxv-val { max-width: 42%; font-size: 13.5px; }
  .uxv-access { padding: 18px 16px; gap: 12px; }
  .uxv-access .uxv-inst { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .uxv-body { animation: none; }
  .uxv-row > summary .u-chev, .uxv-fold > summary svg { transition: none; }
}