/* /assets/style.css - тёмная тема */
:root{
  --bg:#050509;
  --panel:#0b0d18;
  --muted:#9aa0c6;
  --accent1: #3f82ff;
  --accent2: #7b3dff;
  --card-border: rgba(68,72,104,0.4);
  --danger:#ff7e7e;
}
*{box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
body{margin:0;background:-webkit-linear-gradient(180deg,#111421 0,#050509 100%);color:#e6e9ff;}
.container{min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:-webkit-linear-gradient(180deg,#111421 0,#050509 100%);}
.layout{display:flex;gap:0;min-height:calc(100vh - 70px)}
.sidebar{width:240px;background:rgba(5,6,16,0.95);padding:18px;border-right:1px solid #181a26}
.main{flex:1;min-width:0;padding:20px}
.logo{font-weight:700;font-size:18px;margin-bottom:14px}
.logo span{background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;color:transparent}
.section-title{font-size:12px;color:#74758a;margin-top:10px;margin-bottom:8px}
.nav-link{display:block;padding:8px;border-radius:8px;color:#d7d7e4;text-decoration:none;margin-bottom:4px}
.nav-link.active{background:linear-gradient(135deg,#242840,#181b30);color:#fff}
.card{background:var(--panel);border-radius:12px;padding:14px;border:1px solid var(--card-border);box-shadow:0 12px 30px rgba(0,0,0,0.6);margin:14px}
.btn-primary{background:linear-gradient(135deg,var(--accent1),var(--accent2));border:none;padding:8px 12px;border-radius:8px;color:#fff;cursor:pointer}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px 10px;border-radius:8px;color:var(--muted);text-decoration:none}
.btn-delete{background:#31141b;border:none;padding:6px 8px;border-radius:8px;color:#ff9ba5;cursor:pointer}
.drop-zone{border:1px dashed #3b3f64;padding:14px;border-radius:10px;text-align:center;color:var(--muted)}
.drop-zone.highlight{border-color:var(--accent1);background:#0f1222}
.table{width:100%;border-collapse:collapse}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #181a27}
.file-link{color:#dfe4ff;text-decoration:none}
.empty-state{padding:12px;text-align:center;color:#777a9d}
.auth-card{width:100%;max-width:420px;margin:80px auto;background:var(--panel);padding:32px;border-radius:16px;border:1px solid var(--card-border)}
.auth-card input, input[type="text"], input[type="password"], select{width:100%;padding:12px;border-radius:8px;border:1px solid #2b2e45;background:var(--bg);color:#e6e9ff;font-size:15px}
.alert{background:#3b1b1b;color:#ffc9c9;padding:8px;border-radius:8px;margin-bottom:8px}
.notice{background:#163b1c;color:#bff2c6;padding:8px;border-radius:8px;margin-bottom:8px}
.card h3{margin:0 0 8px}
input, textarea { font-family: inherit; color: inherit; background: #050509; border: 1px solid #2b2e45; padding:8px; border-radius:8px; }
button { font-family: inherit; }

/* общий базовый класс для ссылок-кнопок */
.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .12s ease, background-color .12s ease;
  color:var(--btn-text);
  border:0;
  line-height:1;
  box-shadow: none;
  vertical-align:middle;
}

/* primary (accent) */
.btn-primary{
  background: linear-gradient(135deg,var(--accent1),var(--accent2));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(59,92,200,0.12), inset 0 -2px 0 rgba(0,0,0,0.15);
  text-decoration:none;
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(59,92,200,0.18);
}

.btn-telegram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #229ED9;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease;
  box-shadow: 0 6px 18px rgba(34, 158, 217, 0.2), inset 0 -2px 0 rgba(0,0,0,0.15);
}
.btn-telegram:hover {
  background: #1d8abf;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(34, 158, 217, 0.3);
}
.btn-primary:focus-visible{ outline: none; box-shadow: var(--focus); }

/* ghost (used for profile/logout/back links) — теперь чётче видна */
.btn-ghost {
  background: var(--btn-ghost-bg);
  color: #e9edf9;
  border: 1px solid var(--btn-ghost-border);
  padding: 8px 10px;
  border-radius: 10px;
  font-weight:600;
  text-decoration:none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .06s ease;
}
.btn-exit {
  background: var(--btn-ghost-bg);
  color: #e9edf9;
  border: 1px solid var(--btn-ghost-border);
  padding: 8px 10px;
  border-radius: 10px;
  border-color:#FF4649;
  font-weight:600;
  text-decoration:none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .06s ease;
}
.btn-profile {
  background: var(--btn-ghost-bg);
  color: #e9edf9;
  border: 1px solid var(--btn-ghost-border);
  padding: 8px 10px;
  border-radius: 10px;
  border-color: #4679FF;
  font-weight:600;
  text-decoration:none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .06s ease;
}
.btn-profile:hover{
  background: linear-gradient(90deg, #4679FF, #572DD2);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.btn-back {
  background: var(--btn-ghost-bg);
  color: #e9edf9;
  border: 1px solid var(--btn-ghost-border);
  padding: 8px 10px;
  border-radius: 10px;
  border-color: #D26817;
  font-weight:600;
  text-decoration:none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .06s ease;
}
.btn-back:hover{
  background: linear-gradient(90deg, #D26817, #C60000);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.btn-exit:hover{
  background: linear-gradient(90deg, #FF4649, #A60003);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.btn-ghost:hover{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.btn-ghost:focus-visible{ outline:none; box-shadow: var(--focus); }

/* delete/danger button */
.btn-delete-file {
   background: rgba(255, 0, 0, 0.9);
  color: #fff;
  border: 1px solid rgba(255,80,80,0.18);
  padding:7px 10px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  height: 30px;
}
.btn-delete-file:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255,77,77,0.12); }
.btn-delete-file:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(255,77,77,0.12); }

.btn-delete-folders {
  background: rgba(255, 0, 0, 0.9);
  color: #fff;
  border: 1px solid rgba(255,80,80,0.18);
  padding:7px 10px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  height: 40px;
}
.pass {
  max-height: 35px;
}
.btn-delete-folders:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255,77,77,0.12); }
.btn-delete-folders:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(255,77,77,0.12); }

.btn-delete:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255,77,77,0.12); }
.btn-delete:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(255,77,77,0.12); }

/* secondary subtle button for small actions */
.btn-subtle {
  background:transparent;
  border:1px solid rgba(255,255,255,0.04);
  color:var(--muted);
  padding:6px 10px;
  border-radius:8px;
}
.btn-subtle:hover{ color:#fff; border-color:rgba(255,255,255,0.08); background:var(--btn-ghost-bg); }

/* small icon-like button */
.btn-sm { padding:6px 8px; font-size:13px; border-radius:8px; }

/* container for the profile/exit group */
.btn-open {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px;
  border-radius:10px;
  background: transparent;
  color:var(--muted);
}
.btn-open .sep { color: rgba(255,255,255,0.14); margin:0 4px; font-weight:600; }
.btn-open a { text-decoration:none; }

/* make links inside topbar more button-like and visible */
.topbar a { color: #e6e9ff; text-decoration:none; }
.topbar a.btn { margin-left:6px; }

/* accessibility helpers */
.btn[role="button"] { -webkit-tap-highlight-color: transparent; }
.btn:focus { outline: none; }

/* --- Responsive / mobile adjustments --- */
/* Touch targets, bigger controls */
:root{
  --mobile-gap: 12px;
  --touch-size: 44px; /* минимальный размер тап-зоны */
  --sidebar-width-mobile: 260px;
  --overlay-bg: rgba(2,6,16,0.6);
  --btn-text: #e6e9ff;
  --btn-ghost-border: rgba(255,255,255,0.06);
  --btn-ghost-bg: transparent;
  --danger-strong: #ff5555;
}

/* Improve accessibility focus */
:focus {
  outline: 3px solid rgba(125, 83, 255, 0.18);
  outline-offset: 2px;
}

/* Make topbar actions more tappable */
.topbar .btn-open a,
.topbar .btn-open button {
  min-height: var(--touch-size);
  padding: 9px 12px;
  font-size: 15px;
}

/* File input full-width on mobile */
input[type="file"] {
  min-height: var(--touch-size);
}

/* Dropzone bigger and finger-friendly */
.dropzone {
  padding: 18px;
  font-size: 15px;
  border-radius: 12px;
  touch-action: manipulation;
}


/* Progress text bigger on small screens */
.progress-wrap #progressText { font-size: 14px; }

/* MOBILE: layout stack, sidebar becomes overlay */
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width-mobile);
    transform: translateX(-110%);
    transition: transform .22s ease;
    z-index: 1200;
    box-shadow: 20px 0 60px rgba(0,0,0,0.6);
    padding: 18px;
    overflow-y: auto;
    border-right: none;
  }
  .sidebar.open { transform: translateX(0); }

  /* overlay to dim page when sidebar open */
  .mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 1100;
  }
  .mobile-overlay.show { display: block; }

  /* Topbar: show hamburger, stack title and actions neatly */
  .topbar { padding: 10px 12px; gap:8px; align-items:center; }
  .topbar .brand { display:flex; align-items:center; gap:8px; }
  .topbar .brand strong { font-size:16px; }
  .topbar #menuToggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; margin-right:6px; }
  #actionsToggle { display:inline-flex !important; align-items:center; justify-content:center; width:40px; height:40px; padding:0; }
  
  /* Force show menu toggle on mobile */
  #menuToggle { display: inline-flex !important; }

  .actions-group { position: relative; }
  .btn-open { 
    display:none; 
    position:absolute; 
    top:100%; 
    right:0; 
    margin-top:10px; 
    background:var(--panel); 
    border:1px solid var(--card-border); 
    flex-direction:column; 
    padding:12px; 
    border-radius:12px; 
    box-shadow:0 10px 30px rgba(0,0,0,0.5); 
    z-index:1200; 
    width:220px; 
    align-items:stretch; 
  }
  .btn-open.show { display:flex; }
  .btn-open .sep { display:none; }
  .btn-open a { justify-content:center; margin:4px 0; }

  /* main content full width and no side margin */
  .main { width:100%; padding:10px; }
  .card { margin:10px 0; border-radius:10px; padding:12px; }

  /* Make file input and controls full-width */
  #uploadForm div { flex-direction:column; align-items:stretch; gap:8px; }
  #uploadForm input[type="file"] { width:100%; }
  #uploadForm button { width:100%; }

  /* Buttons larger for touch */
  .btn, .btn-ghost, .btn-primary, .btn-delete { font-size:15px; padding:10px 14px; border-radius:10px; }

  /* folder cards full width */
  .card > div[style*="display:flex; flex-wrap:wrap; gap:12px;"] { flex-direction:column; gap:10px; }

  /* table scrollable */
  .table { display:block; overflow:auto; white-space:nowrap; }

  /* reduce breadcrumbs clutter */
  .breadcrumb { font-size:13px; overflow:auto; white-space:nowrap; }

  /* ensure summary/children are keyboard friendly */
  .sidebar summary { display:list-item; }
}

/* Mobile auth card adjustments */
@media (max-width: 480px) {
  .auth-card { width:94%; padding:24px; }
  .auth-card input { padding:14px; font-size:16px; }
}

/* Extra small screens: stack more */
@media (max-width: 420px) {
  .auth-card { width:100%; padding:24px; }
  .auth-card input { padding:14px; font-size:16px; }
  :root { --sidebar-width-mobile: 280px; }
  .topbar strong { font-size:15px; }
  .btn { font-size:14px; padding:10px 12px; }
  .dropzone { font-size:14px; padding:16px; }
}

/* Chat specific global tweaks if needed */
.chat-container ::-webkit-scrollbar { width: 6px; }
.chat-container ::-webkit-scrollbar-track { background: transparent; }
.chat-container ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.chat-container ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }