/* aiducation v2.92.0: ΑΠΛΟΤΗΤΑ.
   Ο ιδρυτής: «δεν θέλω να είναι φορτωμένο και χαοτικό· πειστικό, όχι τεχνικό, λίγες λέξεις».
   Εδώ ζουν: το «Περισσότερα» του μενού, το «Σήμερα για σένα» της Αρχικής, το μήνυμα με
   «Αναίρεση», οι διπλωμένες «Περισσότερες επιλογές» και η ήρεμη κίνηση (περίγραμμα όσο γράφει ο
   Μέντορας, σφαίρα «σκέφτομαι», μετρητής που χτυπά μία φορά). ΜΟΝΟ tokens: το ίδιο αρχείο
   δουλεύει σε φωτεινό και σκοτεινό θέμα χωρίς δεύτερο σετ χρωμάτων. Κανένα όριο πλάτους σελίδας. */

/* --------------------------------------------------------------------------
   Μενού: «Περισσότερα» στην πλαϊνή στήλη
   -------------------------------------------------------------------------- */
.sb-more { display: flex; flex-direction: column; }
.sb-more-btn { color: var(--ink-soft); }
.sb-more-btn .sb-more-chev { margin-left: auto; display: inline-flex; transition: transform 0.2s var(--ease); }
.sb-more-btn .sb-more-chev svg { width: 15px; height: 15px; }
.sb-more.open .sb-more-chev { transform: rotate(90deg); }
.sb-more-list { display: flex; flex-direction: column; animation: fadeUp 0.2s ease; }
.sb-more-list[hidden] { display: none; }
.sb-more-list .nav-item { padding-left: 22px; }

/* Η θέση του «Παίξε την παρουσίαση»: όσο είναι άδεια, δεν πιάνει χώρο. */
.u-demo-slot:empty { display: none; }
.u-demo-slot { display: inline-flex; align-items: center; }
.sidebar-top .u-demo-slot { margin-left: auto; }

/* Στο στενό κινητό το «Περισσότερα» (η μεγαλύτερη ετικέτα) χωρά ολόκληρο: η στήλη του παίρνει
   όσο χρειάζεται η λέξη του, οι τέσσερις άλλες μοιράζονται τα υπόλοιπα (ποτέ κάτω από το χάπι
   του εικονιδίου). */
@media (max-width: 880px) {
  .mobile-nav { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(max-content, 1fr); padding-left: 4px; padding-right: 4px; gap: 0; }
  .mobile-nav button { padding-left: 1px; padding-right: 1px; }
  .mobile-nav button[data-act="menu"] .mn-label { letter-spacing: -0.15px; }
}
@media (max-width: 360px) {
  .mobile-nav button { font-size: 11px; }
  .mobile-nav .mn-ico { width: 50px; }
}

/* --------------------------------------------------------------------------
   «Σήμερα για σένα» (Αρχική)
   -------------------------------------------------------------------------- */
.hm-today { margin: 4px 0 22px; }
.hm-today .u-section-title { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.td-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--blue-tint-2); color: var(--blue-deep); font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 700;
}
.td-list {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.td-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), max-height 0.35s var(--ease), padding 0.35s var(--ease);
  max-height: 160px; animation: fadeUp 0.3s ease both;
}
/* v2.92.1: στο κινητό ένας μακρύς τίτλος (τρεις γραμμές, με τη γραμμή από κάτω και το κουμπί σε
   δική του σειρά) ξεπερνούσε τα 160px και το κουμπί έπεφτε πάνω στη διπλανή γραμμή (το έδειξε το
   demo με το «Week 7 pack: ...»). Το όριο υπάρχει μόνο για το απαλό σβήσιμο: μεγαλύτερο, ίδιο εφέ. */
@media (max-width: 560px) {
  .td-item { max-height: 360px; }
}
.td-item + .td-item { border-top: 1px solid var(--line-soft); }
.td-item .u-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-item .u-title { font-weight: 650; font-size: 15.5px; color: var(--ink); overflow-wrap: anywhere; }
.td-item .u-meta { font-size: 13.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.td-item .btn { flex: none; min-height: 40px; }
.td-item.td-done { opacity: 0; transform: translateX(12px); max-height: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; }
.td-item .td-check { color: var(--green); display: none; }
.td-item.td-ticked .td-check { display: inline-flex; }
.td-item.td-ticked .u-ico { display: none; }
.td-empty {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.td-empty .u-main { flex: 1; min-width: 0; }
.td-empty .u-title { font-weight: 650; color: var(--ink); }
.td-next { display: flex; flex-wrap: wrap; gap: 8px; }
.td-next .btn { min-height: 40px; }
@media (max-width: 560px) {
  .td-item { flex-wrap: wrap; gap: 4px 14px; padding: 13px 14px; }
  .td-item .u-main { flex: 1 1 calc(100% - 64px); }
  .td-item .btn { margin-left: 54px; }
  .td-empty { flex-wrap: wrap; }
  .td-empty .u-main { flex: 1 1 calc(100% - 64px); }
  .td-next { width: 100%; padding-left: 54px; }
}

/* Αρχική εκπαιδευτικού: τρεις ήρεμες αφετηρίες, μόνο τίτλος (χωρίς δεύτερη γραμμή). */
.hm-starts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.hm-starts .u-tile { min-height: 0; padding: 14px 16px; align-items: center; }
.hm-starts .u-tile .u-main { flex: 1; min-width: 0; }
.hm-starts .u-tile .u-title { font-size: 15.5px; }
.hm-starts .u-tile .u-chev { margin-left: auto; color: var(--ink-faint); display: inline-flex; }
@media (max-width: 700px) { .hm-starts { grid-template-columns: 1fr; gap: 8px; } }

/* Εργαλεία: χωρίς δεύτερη γραμμή, ο τίτλος κάθεται στη μέση του εικονιδίου. */
.tl-grid .u-tile { align-items: center; }
/* Ο μετρητής του «Περιμένει εσένα» κάθεται δίπλα στον τίτλο, όπως στην Αρχική. */
.msn-page #msnWaiting > .u-section-title { justify-content: flex-start; gap: 8px; }

/* --------------------------------------------------------------------------
   Μήνυμα με «Αναίρεση»
   -------------------------------------------------------------------------- */
.toast.toast-undo {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  padding: 9px 10px 9px 20px;
}
.toast-undo .toast-text { min-width: 0; }
.toast-undo .toast-act {
  flex: none; min-height: 34px; padding: 4px 14px; border-radius: 999px; border: 1px solid currentColor;
  background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
}
.toast-undo .toast-act:hover, .toast-undo .toast-act:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.toast-undo .toast-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: 0.35;
  transform-origin: left center; animation: toastBar linear forwards;
}
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast.toast-out { opacity: 0; transform: translateY(6px); transition: opacity 0.24s ease, transform 0.24s ease; }

/* --------------------------------------------------------------------------
   «Περισσότερες επιλογές»
   -------------------------------------------------------------------------- */
details.u-moreopts { margin: 4px 0 10px; }
details.u-moreopts > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none;
  color: var(--blue); font-weight: 600; font-size: 14px;
}
details.u-moreopts > summary::-webkit-details-marker { display: none; }
details.u-moreopts > summary svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
details.u-moreopts[open] > summary svg { transform: rotate(90deg); }
details.u-moreopts > .u-moreopts-body { padding: 6px 0 2px; animation: fadeUp 0.2s ease; }
/* Μέσα σε φόρμες με δύο στήλες (Τεστ, εργαλεία): όλο το πλάτος, και τα πεδία του πάλι σε στήλες. */
.quiz-setup > details.u-moreopts { grid-column: 1 / -1; }
.quiz-setup > details.u-moreopts > .u-moreopts-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 30px; align-items: start;
}
@media (min-width: 1200px) {
  .tool-layout.uxv-nopaper > .tool-form > details.u-moreopts > .u-moreopts-body,
  .tool-layout.tt-idle > .tool-form > details.u-moreopts > .u-moreopts-body {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start;
  }
  .tool-form > details.u-moreopts > .u-moreopts-body > .tt-pair { display: contents; }
}

/* --------------------------------------------------------------------------
   Ήρεμη κίνηση
   -------------------------------------------------------------------------- */
/* Ο μετρητής που άλλαξε χτυπά μία φορά. */
.u-pulse { animation: uPulse 0.6s var(--ease); }
@keyframes uPulse { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* Η σφαίρα «σκέφτομαι» στη θέση των τριών τελειών. */
.ai-orb {
  flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--card) 0%, var(--blue) 45%, var(--teal) 100%);
  box-shadow: 0 0 0 0 var(--blue-tint-2);
  animation: orbBreath 1.8s ease-in-out infinite;
}
@keyframes orbBreath {
  0%, 100% { transform: scale(0.85); box-shadow: 0 0 0 0 var(--blue-tint-2); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 6px var(--blue-tint); }
}

/* Το πλαίσιο γραφής όσο δουλεύει ο Μέντορας: ένα απαλό κινούμενο χρωματιστό περίγραμμα. */
.is-ai-working .composer-box,
.mentor-bar.is-ai-working {
  border-color: transparent !important;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(90deg, var(--blue), var(--teal), var(--gold), var(--blue)) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: aiBorder 3.2s linear infinite;
}
@keyframes aiBorder { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 300% 0; } }

/* Οι κάρτες και οι γραμμές που μπαίνουν γλιστρούν απαλά (ήδη .fade-in), και οι ενότητες της
   Αρχικής μπαίνουν με μικρή καθυστέρηση η μία μετά την άλλη. */
.hm-page > .fade-in:nth-child(2) { animation-delay: 0.04s; }
.hm-page > .fade-in:nth-child(3) { animation-delay: 0.08s; }
.hm-page > .fade-in:nth-child(4) { animation-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  .u-pulse, .ai-orb, .td-item, .sb-more-list, details.u-moreopts > .u-moreopts-body,
  .is-ai-working .composer-box, .mentor-bar.is-ai-working, .toast-undo .toast-bar { animation: none !important; }
  .td-item, .toast.toast-out, .sb-more-btn .sb-more-chev { transition: none; }
  .toast-undo .toast-bar { display: none; }
}

/* «Ρουτίνα ή αποστολή;» (v2.92.4): δύο ήσυχες γραμμές στην κορυφή των Ρουτινών και των Αποστολών,
   μόνο για όσους βλέπουν Αποστολές (views-today.js, V.routineOrMission). Δίπλα δίπλα όπου χωρούν,
   η μία κάτω από την άλλη στο κινητό. */
.rm-explain { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.rm-title { margin: 0 0 8px; font: 650 14px/1.3 var(--font-ui); color: var(--ink); }
.rm-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.rm-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.rm-row .u-ico { width: 28px; height: 28px; border-radius: 9px; }
.rm-row .u-ico svg { width: 15px; height: 15px; }
.rm-row p { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: break-word; }
.rm-row b { font-weight: 650; color: var(--ink); }
.rm-row a { font-weight: 650; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.rm-row a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 760px) { .rm-rows { grid-template-columns: minmax(0, 1fr); } }