/* ==========================================================================
   UX 2.81: ΕΡΓΑΣΤΗΡΙ (Workspace)
   Ένα αρχείο μόνο για το Εργαστήρι, πάνω στα tokens του :root και στο
   σύστημα u- του app.css. Στόχος: ένας φοιτητής, ένας διδάσκων και ένας
   Πρύτανης καταλαβαίνουν τον φάκελο σε πέντε δευτερόλεπτα, σε οθόνη και κινητό.
   Κλάσεις με πρόθεμα wsx- για να μη συγκρούονται με τίποτα άλλο.
   ========================================================================== */

/* ---------- Λίστα φακέλων ---------- */
.wsx-folders-title { margin-top: 8px; align-items: center; }
.wsx-folders-title .btn svg { width: 16px; height: 16px; }
.wsx-create { padding: 20px 20px 18px; margin: 0 0 16px; }
.wsx-create .field { margin-bottom: 14px; }
.wsx-create-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wsx-optional { font-weight: 400; color: var(--ink-faint); }
.wsx-optional::before { content: '('; }
.wsx-optional::after { content: ')'; }

.wsx-frow { padding: 0 8px 0 0; gap: 4px; cursor: default; }
.wsx-rowlink {
  display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0;
  padding: 10px 6px 10px 16px; color: inherit; text-decoration: none; min-height: 60px;
}
.wsx-rowlink:hover, .wsx-rowlink:focus-visible { text-decoration: none; }
.wsx-rowlink .u-title { display: block; }
.wsx-star { color: #D9A441; margin-right: 6px; font-size: 13px; }
.wsx-mtime { display: none; }

/* Το «⋯» μιας γραμμής: ορατό πάντα, αλλά ήσυχο. */
.wsx-dots {
  flex: none; width: 36px; height: 36px; border-radius: 10px; border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-faint); cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.wsx-dots svg { width: 18px; height: 18px; }
.wsx-dots:hover, .wsx-dots:focus-visible, .wsx-dots[aria-expanded="true"] { background: var(--paper-deep); color: var(--ink); }
.wsx-dots-sm { width: 30px; height: 30px; border-radius: 8px; opacity: 0.6; }
.wsx-dots-sm svg { width: 16px; height: 16px; }
.ws-file:hover .wsx-dots-sm, .ws-folder:hover .wsx-dots-sm, .wsx-dots-sm:focus-visible, .wsx-dots-sm[aria-expanded="true"] { opacity: 1; }

.wsx-join { margin: 14px 2px 0; }
.wsx-link {
  display: inline-flex; align-items: center; gap: 7px; border: none; background: none; padding: 8px 2px;
  color: var(--blue); font-weight: 600; font-size: 14px; cursor: pointer;
}
.wsx-link svg { width: 16px; height: 16px; }
.wsx-link:hover { color: var(--blue-deep); text-decoration: underline; }

/* ---------- Κεφαλίδα φακέλου: ΜΙΑ γραμμή ---------- */
.doc-head.wsx-head { flex-wrap: nowrap; gap: 8px; margin-bottom: 14px; min-width: 0; }
.wsx-back svg { width: 17px; height: 17px; }
.wsx-title {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; position: relative;
  border: 1px solid transparent; background: transparent; border-radius: 12px; padding: 6px 10px;
  color: var(--ink); cursor: pointer; text-align: left; transition: background 0.12s, border-color 0.12s;
}
.wsx-title:hover, .wsx-title:focus-visible, .wsx-title[aria-expanded="true"] { background: var(--card); border-color: var(--line); }
.wsx-title-ico { flex: none; display: inline-flex; color: #C58B1B; }
.wsx-title-ico svg { width: 19px; height: 19px; }
.wsx-title-name {
  font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.wsx-caret { flex: none; display: inline-flex; color: var(--ink-faint); }
.wsx-caret svg { width: 16px; height: 16px; }
.wsx-dot { position: absolute; top: 6px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--paper); }
.wsx-dot[hidden] { display: none; }
.wsx-head-sp { flex: 1 1 0; min-width: 0; }
.wsx-head .btn { flex: none; }
.wsx-head .btn svg { width: 16px; height: 16px; }
.wsx-files-btn { display: none; }
.wsx-fl-short { display: none; }
.wsx-fl-count { font-variant-numeric: tabular-nums; }

/* ---------- Πάνελ αρχείων ---------- */
.wsx-panel-head { display: none; }
.wsx-panel-back { display: none; }
.ws-panel .wsp-head { gap: 8px; }
.ws-panel .wsp-head > span:first-child { flex: 1; }
.ws-panel .wsp-head .btn { text-transform: none; letter-spacing: 0; font-size: 13px; padding: 5px 10px; }
.ws-panel .wsp-head .btn svg { width: 14px; height: 14px; }

.ws-panel .ws-file, .ws-panel .ws-folder {
  display: flex; align-items: center; gap: 2px; padding: 1px 2px 1px 6px; min-height: 36px;
  border-radius: 9px; font-weight: 600;
}
.ws-panel .wf-name, .ws-panel .wfo-name {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
  border: none; background: none; text-align: left; padding: 6px 2px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.ws-panel .ws-folder .wfo-name { font-weight: 700; }
.wsx-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsx-fi { flex: none; display: inline-flex; color: var(--blue); }
.wsx-fi svg { width: 16px; height: 16px; }
.wsx-fi.folder { color: #C58B1B; }
.wsx-fi.map { color: var(--green); }
.wsx-fi.audio { color: var(--terra); }
.wsx-fi.src { color: #8A6D3B; }
.wsx-rootrow { opacity: 0.72; cursor: default; }
.wsp-target .wt-root { display: inline-flex; align-items: center; justify-content: center; }
.wsp-target .wt-root svg { width: 11px; height: 11px; }
.wsx-where { display: flex !important; align-items: center; gap: 8px; width: 100%; justify-content: flex-start; margin-bottom: 6px; }
.wsx-where svg { width: 15px; height: 15px; color: #C58B1B; }

/* ---------- Γραμμή επιλογών και πλαίσιο γραφής ---------- */
/* ΣΤΕΡΕΟ φόντο: πριν ήταν διαφανές στην κορυφή του, και το κείμενο της
   συζήτησης (ή οι προτάσεις στο κινητό) φαινόταν πίσω από τα chip. Μόνο μια
   λεπτή λωρίδα από πάνω σβήνει ομαλά. */
.doc-composer.wsx-composer {
  position: sticky; bottom: 0; z-index: 6; background: var(--paper);
  padding: 8px 0 12px;
}
.doc-composer.wsx-composer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; pointer-events: none;
  background: linear-gradient(rgba(250, 248, 244, 0), var(--paper));
}
/* ΜΙΑ γραμμή, χωρίς κρυφή κύλιση: τα chip με λέξη κρατούν το μέγεθός τους και
   μικραίνει μόνο το «Για σένα», με «…» (ο πλήρης τίτλος μένει στο title). */
.ws-research-bar.wsx-bar {
  display: flex; flex-wrap: nowrap !important; overflow: hidden; gap: 8px; margin: 0 0 8px; align-items: center;
}
.wsx-bar > * { flex: none; }
.wsx-bar > .personal-chip { flex: 0 1 auto !important; min-width: 90px !important; }
/* Το «Για σένα» έρχεται από το app.js ως ΕΝΑ κείμενο. Με inline-block (όχι
   flex) το text-overflow δουλεύει: στο στενό κινητό γίνεται «Για σένα: Ψυχ…»
   αντί να κόβεται στη μέση μιας λέξης χωρίς σημάδι. */
.wsx-bar .personal-chip {
  background: var(--card) !important; height: 34px; line-height: 32px !important; padding: 0 12px !important;
  display: inline-block !important; vertical-align: middle; box-sizing: border-box;
  max-width: min(100%, 420px) !important;
}
.wsx-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-soft);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.wsx-chip svg { width: 15px; height: 15px; flex: none; }
.wsx-chip:hover, .wsx-chip[aria-expanded="true"] { border-color: var(--blue); color: var(--blue-deep); }
.wsx-chip.on { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-deep); }
.wsx-chip-state { font-weight: 650; }
.wsx-chip[hidden] { display: none; }
.wsx-usage-bar { display: inline-block; width: 40px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; flex: none; }
.wsx-usage-bar > span { display: block; height: 100%; width: 0; }

/* Η ΓΡΑΜΜΗ ΠΡΟΣΑΡΜΟΖΕΤΑΙ ΣΤΟ ΠΛΑΤΟΣ ΤΗΣ ΣΤΗΛΗΣ, όχι της οθόνης: με το πάνελ
   ανοιχτό στα 1020 έως 1280px η στήλη είναι μόλις 410 έως 650px, και το
   «Αυτόνομο, Μέγιστο» μαζί με το «85% χρησιμοποιήθηκε» έβγαιναν έως 320px έξω.
   Δύο σκαλιά: (1) η κατάσταση γίνεται μπλε τελεία και ο μετρητής μένει «85%»,
   (2) το «Για σένα» μπαίνει μέσα στις «Επιλογές», όπως στο κινητό. */
.doc-composer.wsx-composer { container: wsx-composer / inline-size; }
@container wsx-composer (max-width: 759px) {
  .wsx-chip-state { display: none; }
  .wsx-chip.on .wsx-chip-state {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--blue); font-size: 0; line-height: 0; overflow: hidden; flex: none;
  }
  .wsx-usage-word { display: none; }
}
@container wsx-composer (max-width: 519px) {
  .wsx-bar .personal-chip { display: none !important; }
}
/* Με τον μετρητή ορατό, κάτω από 600px το «Για σένα» θα έμενε «For you: He…»:
   κι αυτό πάει στις «Επιλογές». */
@container wsx-composer (max-width: 599px) {
  .wsx-bar:has(#wsUsage:not([hidden])) .personal-chip { display: none !important; }
}

.wsx-mic { background: transparent !important; color: var(--ink-soft) !important; }
.wsx-mic:hover { color: var(--ink) !important; background: var(--paper-deep) !important; }
.wsx-mic svg { width: 19px; height: 19px; }

.wsx-hint { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.wsx-ai { color: var(--ink-faint); }
/* Η πολιτική ακεραιότητας: δική της γραμμή, κανονικό μελάνι, ασπίδα. */
.wsx-integrity {
  display: inline-flex; align-items: flex-start; gap: 7px; max-width: 72ch; text-align: left;
  color: var(--ink); font-size: 12.5px; font-weight: 500; line-height: 1.45;
}
.wsx-integrity svg { width: 15px; height: 15px; flex: none; color: var(--green); margin-top: 1px; }

/* Κλειδωμένο AI: μία ήρεμη γραμμή ΠΡΙΝ γράψεις, όχι έκπληξη μετά την αποστολή. */
.wsx-lock {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px;
  padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--gold-tint); border: 1px solid #EAD9A8;
  font-size: 13.5px; color: var(--ink);
}
.wsx-lock-ico { display: inline-flex; color: #A77712; }
.wsx-lock-ico svg { width: 16px; height: 16px; }
.wsx-lock-text { flex: 1 1 220px; min-width: 0; }

/* ΤΟ ΠΛΑΙΣΙΟ ΓΡΑΦΗΣ ΣΤΟΝ ΠΑΤΟ. Η στήλη της συζήτησης πιάνει όλο το ύψος της
   σελίδας, όπως στη συζήτηση με τον Μέντορα, ώστε το πλαίσιο να κάθεται κάτω
   και όχι να αιωρείται στη μέση με κενό από κάτω του. Το πάνελ κρατά το ύψος
   του περιεχομένου του (και το sticky του). */
#wsLayout { align-items: stretch; }
#wsLayout > .ws-panel { align-self: start; }
#wsLayout > .ws-main { min-height: 0; }

/* ---------- Οθόνη υποδοχής φακέλου ---------- */
.chat-empty.wsx-empty { padding: 28px 8px 18px; }
.wsx-empty p { margin-bottom: 18px; }
.wsx-empty .chip svg, .wsx-suggest .chip svg { width: 16px; height: 16px; flex: none; color: var(--blue); }
.wsx-first { margin: 0 0 14px; }
.wsx-first .btn svg { width: 17px; height: 17px; }
.wsx-next { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wsx-next-from { font-size: 14px; color: var(--ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsx-next-from strong { color: var(--ink); font-weight: 650; }
.wsx-next-row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.wsx-step { font-weight: 600; color: var(--ink); }
.wsx-step:hover { background: var(--blue-tint); }

/* ---------- Ενέργειες του Μέντορα μέσα στη συζήτηση ---------- */
.ws-activity.wsx-act { display: inline-flex; align-items: center; gap: 7px; }
.ws-activity.wsx-act > svg { width: 14px; height: 14px; flex: none; color: var(--blue); }
.wsx-srcchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 10px; text-decoration: none; max-width: 260px; }
.wsx-srcchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsx-srcchip svg { width: 12px; height: 12px; flex: none; }

/* ---------- Κεφαλίδα προβολής αρχείου ή πηγής ---------- */
/* Πίσω · όνομα · οι δύο επόμενες κινήσεις · Επεξεργασία · Λήψη · «⋯». Στο
   κινητό: πρώτη γραμμή πίσω, όνομα, «⋯», δεύτερη γραμμή χάρτης και ηχητική
   περίληψη μοιρασμένα στο πλάτος. Τα υπόλοιπα μπαίνουν στο «⋯». */
.wsx-viewhead .oh-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 80px; order: 0; }
.wsx-viewhead .oh-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wsx-viewhead .btn svg { width: 16px; height: 16px; }
.wsx-vh-break { display: none; }
.mm-tab { min-height: 34px; }

/* ---------- Μενού ενεργειών (αναδυόμενο στον υπολογιστή) ---------- */
.wsx-pop-back { position: fixed; inset: 0; z-index: 118; background: transparent; }
.wsx-pop {
  position: fixed; z-index: 120; min-width: 250px; max-width: min(340px, 92vw); max-height: min(78vh, 560px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 6px; animation: wsxPop 0.14s var(--ease, ease);
}
@keyframes wsxPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.wsx-menu-title {
  padding: 8px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wsx-menu-sec { padding: 8px 10px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.wsx-menu-sep { height: 1px; background: var(--line-soft); margin: 5px 6px; }
.wsx-menu-item {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; padding: 9px 10px;
  border: none; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
}
.wsx-menu-item:hover, .wsx-menu-item:focus-visible { background: var(--paper); outline: none; }
.wsx-mi-ico { flex: none; display: inline-flex; color: var(--ink-soft); margin-top: 1px; }
.wsx-mi-ico svg { width: 18px; height: 18px; }
.wsx-mi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wsx-mi-label { font-weight: 550; line-height: 1.3; overflow-wrap: anywhere; }
.wsx-mi-hint { font-size: 12.5px; color: var(--ink-faint); line-height: 1.35; }
.wsx-mi-check { flex: none; width: 16px; display: inline-flex; color: var(--blue); margin-top: 2px; }
.wsx-mi-check svg { width: 16px; height: 16px; }
.wsx-menu-item.on .wsx-mi-label { font-weight: 650; }
.wsx-menu-item.on .wsx-mi-ico { color: var(--blue); }
.wsx-menu-item.danger, .wsx-menu-item.danger .wsx-mi-ico { color: var(--red); }
.wsx-menu-item.off { opacity: 0.45; cursor: not-allowed; }
.wsx-mi-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-top: 6px; }
.wsx-menu-note { margin-top: 4px; padding: 9px 10px 6px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }

/* Στο κινητό το ίδιο μενού ανοίγει ως φύλλο από κάτω, πάνω από το πάνελ. */
.u-sheet-back.wsx-sheet-back { z-index: 130; }
.u-sheet.wsx-sheet { z-index: 131; }
.wsx-sheet .wsx-menu-item { min-height: 50px; align-items: center; font-size: 15px; padding: 10px 12px; }
.wsx-sheet .wsx-menu-item .wsx-mi-hint { font-size: 13px; }
.wsx-sheet .wsx-menu-title { font-size: 12.5px; padding: 4px 12px 8px; }

/* ---------- Δραστηριότητα (συρτάρι) ---------- */
.wsx-side { position: fixed; inset: 0; z-index: 60; }
.wsx-side-scrim { position: absolute; inset: 0; background: rgba(20, 28, 38, 0.3); }
.wsx-side-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw; overflow-y: auto;
  background: var(--card); border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(20, 28, 38, 0.12);
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); animation: wsxSide 0.2s var(--ease, ease);
}
@keyframes wsxSide { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.wsx-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.wsx-side-head strong { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.wsx-side-head .btn svg { width: 15px; height: 15px; }
.wsx-side-sec { margin: 18px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.wsx-side-line { font-size: 13.5px; color: var(--ink-soft); padding: 3px 0; display: flex; align-items: center; gap: 8px; }
.wsx-faint { font-size: 13px; color: var(--ink-faint); }
.wsx-side-goal { font-size: 14px; color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.wsx-side-goal .wsx-link { padding: 2px 0; font-size: 13px; }
.wsx-meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-bottom: 6px; }
.wsx-meter > span { display: block; height: 100%; }
.wsx-plan-step { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; padding: 3px 0; color: var(--ink); }
.wsx-plan-step.done { color: var(--ink-faint); text-decoration: line-through; }
.wsx-plan-mark { flex: none; display: inline-flex; color: var(--ink-faint); margin-top: 2px; }
.wsx-plan-step.done .wsx-plan-mark { color: var(--green); }
.wsx-plan-mark svg { width: 15px; height: 15px; }
.wsx-live { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; animation: wsxPulse 1.4s ease-in-out infinite; }
@keyframes wsxPulse { 50% { opacity: 0.35; } }

.wsx-sp-ico { display: inline-flex; color: var(--accent, var(--blue)); }
.wsx-sp-ico svg { width: 20px; height: 20px; }

/* ---------- Αφή: στόχοι τουλάχιστον 40px ---------- */
@media (pointer: coarse) {
  .wsx-dots, .wsx-dots-sm { width: 40px; height: 40px; opacity: 1; }
  .ws-panel .ws-file, .ws-panel .ws-folder { min-height: 44px; }
  .wsx-chip { height: 38px; }
  .wsx-bar .personal-chip { height: 38px; line-height: 36px !important; }
}

/* ---------- Tablet και κινητό: το πάνελ γίνεται φύλλο ---------- */
@media (max-width: 1020px) {
  .wsx-files-btn { display: inline-flex; }
  #wsLayout.show-panel .ws-panel {
    display: block; position: fixed; left: 0; right: 0; top: auto; bottom: 0;
    max-height: 82dvh; overflow-y: auto; z-index: 95;
    border-radius: 22px 22px 0 0; border-bottom: none;
    padding: 0 14px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(20, 28, 38, 0.18);
    animation: sheetUp 0.24s var(--ease, ease);
  }
  #wsLayout.show-panel .wsx-panel-back { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(20, 28, 38, 0.32); }
  .wsx-panel-back[hidden] { display: none !important; }
  .wsx-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 3; background: var(--card);
    padding: 14px 2px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft);
  }
  .wsx-panel-head strong { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
  .wsx-panel-head .btn svg { width: 15px; height: 15px; }
  #wsLayout.show-panel .ws-panel .wsp-head { position: static; }
  .wsx-files-btn[aria-expanded="true"] { background: var(--blue-tint-2); }
  /* Το πλαίσιο γραφής ακουμπά σχεδόν την κάτω μπάρα: η γενική εσοχή της
     σελίδας από κάτω εδώ ήταν απλώς μια λωρίδα κενού. */
  .main-inner:has(#wsLayout) { padding-bottom: 0; }
}

/* Το «πάνω πάνω» της εφαρμογής δεν έχει θέση δίπλα στο πλαίσιο γραφής: έπεφτε
   πάνω στη σημείωση για την ΤΝ (υπολογιστής) ή στην καρτέλα «Μενού» (κινητό).
   Σε μια συζήτηση ο χρήστης θέλει το τέλος, όχι την αρχή. Σε ανοιχτό αρχείο
   (χωρίς πλαίσιο γραφής) μένει όπως είναι. */
body:has(.wsx-composer) #toTop { display: none !important; }

@media (max-width: 880px) {
  /* Η κάρτα προόδου χάρτη/ηχητικής και τα μηνύματα κάθονται ΠΑΝΩ από την
     κάτω μπάρα του κινητού, όχι πάνω της. */
  .studio-stack { left: 10px; right: 10px; max-width: none; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  body:has(#wsLayout) .toasts, body:has(#wsList) .toasts, body:has(#studioStack) .toasts { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body:has(#studioStack) #supportBtn { display: none; }
}
/* Όσο γράφεις με το πληκτρολόγιο της οθόνης, η κάτω μπάρα δίνει τη θέση της
   στο κείμενο. ΜΟΝΟ σε αφή: σε στενό παράθυρο με ποντίκι έμενε κρυμμένη. */
@media (max-width: 880px) and (pointer: coarse) {
  .shell:has(.wsx-composer textarea:focus) .mobile-nav { display: none; }
}

@media (max-width: 640px) {
  /* Λίστα: η ώρα πάει κάτω από το όνομα, ώστε το όνομα να έχει όλο το πλάτος. */
  .wsx-frow .u-time { display: none; }
  .wsx-mtime { display: inline; }
  .wsx-rowlink { padding-left: 12px; gap: 11px; }
  .wsx-frow .u-ico { width: 36px; height: 36px; }

  /* Κεφαλίδα φακέλου: πίσω (εικονίδιο), όνομα, Αρχεία · N. Μία γραμμή. */
  .doc-head.wsx-head { gap: 6px; margin-bottom: 6px; padding: 6px 0; }
  .wsx-back { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .wsx-back-label { display: none; }
  .wsx-title { padding: 6px 6px; gap: 6px; }
  .wsx-title-ico { display: none; }
  .wsx-title-name { font-size: 16px; }
  .wsx-class { display: none !important; }
  .wsx-fl-long { display: none; }
  .wsx-fl-short { display: inline; }
  .wsx-files-btn { min-height: 40px; padding: 6px 12px; }

  /* Γραμμή επιλογών: δύο chip σε ΜΙΑ γραμμή. Το «Για σένα» δεν χωρούσε (έβγαινε
     «For y…»), οπότε στο κινητό μπαίνει πρώτο μέσα στις «Επιλογές». */
  .ws-research-bar.wsx-bar { flex-wrap: nowrap !important; overflow: hidden; gap: 8px; }
  .wsx-bar .personal-chip { display: none !important; }
  .wsx-chip { padding: 0 14px; }
  /* Σε μη προεπιλεγμένη κατάσταση το «· Αυτόνομο, Μέγιστο» έσπρωχνε τη γραμμή
     έως 141px έξω από την οθόνη. Εδώ γίνεται μια μικρή μπλε τελεία ανάμεσα στη
     λέξη και στο βελάκι· το κείμενο μένει για τους αναγνώστες οθόνης. */
  .wsx-chip-state { display: none; }
  .wsx-chip.on .wsx-chip-state {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--blue); font-size: 0; line-height: 0; overflow: hidden; flex: none;
  }
  /* Ο μετρητής χρήσης δεν χωρά δίπλα στα δύο chip. Στο κινητό ζει στη σημείωση
     των «Επιλογών» και στη Δραστηριότητα. */
  #wsUsage.wsx-usage { display: none !important; }
  .doc-composer.wsx-composer { padding: 6px 0 8px; }
  .wsx-hint { gap: 3px; }

  /* Οθόνη υποδοχής: χωρίς το μεγάλο «Μ», ώστε όλα να χωρούν πάνω από το πλαίσιο. */
  .chat-empty.wsx-empty { padding: 10px 0 12px; }
  .wsx-empty .ce-mark { display: none; }
  .wsx-empty h2 { font-size: 20px; margin-bottom: 6px; }
  .wsx-empty p { font-size: 14px; margin-bottom: 14px; }
  .wsx-empty .chip { font-size: 13.5px; padding: 8px 12px; }
  .wsx-next-row { gap: 7px; }
  .wsx-first .btn { width: 100%; }

  .wsx-viewhead { gap: 6px; padding: 10px 12px; }
  .wsx-viewhead .oh-title { flex: 1 1 0; order: 1; font-size: 14.5px; }
  .wsx-viewhead .wsx-vh-more { order: 2; }
  .wsx-vh-break { display: block; order: 3; flex-basis: 100%; height: 0; }
  .wsx-vh-step { order: 4; flex: 1 1 0; justify-content: center; min-width: 0; }
  .wsx-vh-wide { display: none !important; }

  /* Στόχοι αφής 40px για ό,τι πατιέται με το δάχτυλο. */
  .wsx-viewhead .btn, .wsx-folders-title .btn, .ws-panel .wsp-head .btn, .wsx-panel-head .btn,
  .wsx-side-head .btn, .wsx-create .btn, .ws-panel .btn-sm, .wsx-lock .btn { min-height: 40px; }
  .ws-panel .ws-chat-row .wc-star, .ws-panel .ws-chat-row .wc-more {
    min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  }
  .ws-panel .ws-chat-row { min-height: 44px; }
  .wsx-chip { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .wsx-pop, .wsx-side-panel, #wsLayout.show-panel .ws-panel { animation: none; }
  .wsx-live { animation: none; }
}

@media print {
  .wsx-composer, .wsx-head, .ws-panel { display: none !important; }
}