:root{
  /* Light, stable theme to avoid black-screen appearance in Chrome */
  --bg:#f5f6f7;            /* neutral page background */
  --panel:#ffffff;         /* white panels for clarity */
  --glass: rgba(2,6,11,0.04);
  --muted:#6b7280;         /* subdued text */
  --accent:#1f2933;        /* primary text */
  --accent-strong:#0b1220; /* stronger headings */
  --spacegray:#e6e6e6;
  --glass-border: rgba(2,6,11,0.06);
  --card-shadow: 0 6px 18px rgba(16,24,32,0.06);
  --success: #1f9d55;
  /* keep font stack but avoid costly system fallbacks at paint time */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Dark theme overrides applied when documentElement has .dark class */
:root.dark{
  --bg: #0b0f12;           /* dark page background but not pure black */
  --panel: #0f1416;        /* slightly lighter panels */
  --glass: rgba(255,255,255,0.02);
  --muted: #a8b0b6;
  --accent: #e6eef2;
  --accent-strong: #ffffff;
  --spacegray:#111214;
  --glass-border: rgba(255,255,255,0.04);
  --card-shadow: 0 6px 18px rgba(0,0,0,0.6);
  --success: #1f9d55;
}

/* Ensure explicit light class keeps existing look */
:root.light{
  /* no-op: uses default root variables above */
}

*{box-sizing:border-box}
/* Use a single-color stable background to avoid rendering glitches that appear as a black screen */
html,body,#app{height:100%;margin:0;background:var(--bg);color:var(--accent);-webkit-font-smoothing:antialiased}
#app{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

/* Frame sized for mobile-friendly single screen — responsive to viewport height */
.frame{
  width:100%;
  max-width:390px;
  height:100vh; /* fill the mobile viewport */
  max-height:100vh; /* ensure frame never grows beyond viewport */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:18px;
  padding:10px; /* slightly reduced padding to gain vertical space on small screens */
  box-shadow: var(--card-shadow);
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  border:1px solid rgba(255,255,255,0.02);
  margin:0 auto;
  overflow:hidden; /* keep frame contained */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS if inner areas scroll */
}

/* header */
.header{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(8px) saturate(1.05);
}
.brand{display:flex;gap:10px;align-items:center}
.logo{
  width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#e6e6e6,#9f9f9f);display:flex;align-items:center;justify-content:center;color:#071016;font-weight:800;font-size:18px;box-shadow:0 2px 8px rgba(0,0,0,0.4)
}
.title{font-weight:700;color:var(--accent-strong);letter-spacing:0.2px}
.header-actions{display:flex;gap:8px;align-items:center}

/* layout */
.container{
  display:flex;
  gap:12px;
  flex:1;
  min-height:0;
}

/* left nav (folders) - compact icon style */
.sidebar{
  width:96px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  padding-top:6px;
}
.folder{
  width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.002));
  border-radius:14px;
  padding:10px 8px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  cursor:pointer;
  border:1px solid transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transition:all .18s ease;
  min-height:64px;
  justify-content:center;
}
.folder:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,0.45)}
.folder.active{
  color:var(--accent-strong);
  border-color:rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(2,6,11,0.6), inset 0 -4px 12px rgba(255,255,255,0.02);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
}
.folder small{display:block;font-size:11px;color:var(--muted);opacity:0.9}
.folder .icon{
  width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#cfcfcf,#8f8f8f);display:flex;align-items:center;justify-content:center;font-weight:700;color:#071016;font-size:14px;
}

/* main panel */
.main{
  flex:1;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-radius:14px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border:1px solid rgba(255,255,255,0.03);
  min-width:0;
  min-height:0; /* important for flex children to allow inner scrolling */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  overflow:auto; /* ensure internal content scrolls inside frame without pushing outside */
  -webkit-overflow-scrolling: touch;
}

/* lists/cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006));
  border-radius:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.02);
  box-shadow: 0 6px 18px rgba(2,6,11,0.45);
}

.row{display:flex;gap:10px;align-items:center}
.space{flex:1}

/* auth modal / forms */
.form{display:flex;flex-direction:column;gap:10px}
.input{
  background:transparent;border:1px solid rgba(255,255,255,0.04);padding:12px;border-radius:10px;color:var(--accent);outline:none;
}
.input:focus{border-color:rgba(255,255,255,0.08);box-shadow:0 6px 18px rgba(2,6,11,0.35) inset}
.button{
  background:linear-gradient(180deg,#d9d9d9,#9b9b9b);
  color:#071016;padding:12px;border-radius:12px;border:none;font-weight:700;cursor:pointer;min-height:44px;
}
.button.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--accent)}
.small{font-size:12px;color:var(--muted)}

/* teacher list */
.teacher{
  display:flex;gap:12px;align-items:center;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);background:transparent;
}
.avatar{width:52px;height:52px;border-radius:10px;background:linear-gradient(135deg,#e6e6e6,#a0a0a0);display:flex;align-items:center;justify-content:center;font-weight:800;color:#071016;font-size:16px;box-shadow:0 4px 12px rgba(0,0,0,0.45)}
.teacher .meta{display:flex;flex-direction:column}
.meta .name{font-weight:700;color:var(--accent-strong)}
.meta .sub{font-size:12px;color:var(--muted)}

/* chat area */
.chat-area{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;height:100%}
.messages{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:8px;border-radius:10px;min-height:0;-webkit-overflow-scrolling:touch}
.msg{max-width:78%;padding:10px;border-radius:12px}
.msg.me{background:linear-gradient(180deg,#e9e9e9,#cfcfcf);color:#071016;align-self:flex-end;box-shadow:0 6px 18px rgba(0,0,0,0.35)}
.msg.them{background:rgba(255,255,255,0.02);align-self:flex-start;color:var(--accent);border:1px solid rgba(255,255,255,0.02)}
.msg .meta{font-size:11px;color:var(--muted);margin-bottom:6px}
.send-row{display:flex;gap:8px;padding-top:6px;align-items:center}
.search{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--accent)}

/* Telegram-like send button and attachment UI */
.file-input-hidden{display:none}
.file-label{min-width:44px;min-height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:18px;padding:8px}
.file-label:hover{background:rgba(255,255,255,0.02)}
.send-btn{
  min-width:44px;min-height:44px;border-radius:999px;background:linear-gradient(135deg,#2ec4ff,#2aa6d6);color:#021216;border:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 6px 18px rgba(0,120,160,0.18)
}
.send-btn:hover{transform:translateY(-2px)}
.thumb-preview{border:1px solid rgba(255,255,255,0.04);margin-right:6px}

/* profile & portfolio */
.profile-top{display:flex;gap:12px;align-items:center}
.profile-pic{width:80px;height:80px;border-radius:12px;background:linear-gradient(135deg,#e6e6e6,#a0a0a0);display:flex;align-items:center;justify-content:center;font-weight:800;color:#071016;font-size:22px;box-shadow:0 6px 20px rgba(0,0,0,0.45)}
.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.port-item{background:rgba(255,255,255,0.01);padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}

/* admin badge */
.badge{padding:6px 10px;border-radius:999px;background:#2b2b2b;color:var(--accent);font-size:12px;border:1px solid rgba(255,255,255,0.03);font-weight:700}

/* compact footer */
.footer{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}
.small-muted{font-size:12px;color:var(--muted)}

/* tighter, mobile-first adjustments to ensure everything fits on one screen */
.header{height:52px;padding:6px 8px}
.logo{width:38px;height:38px;border-radius:10px;font-size:15px}
.title{font-size:14px}
.sidebar{width:78px;padding-top:4px}
.folder{min-height:56px;padding:8px}
.avatar{width:44px;height:44px;border-radius:10px;font-size:14px}
.profile-pic{width:64px;height:64px;border-radius:10px;font-size:18px}
.teacher .meta .name{font-size:14px}
.messages{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:8px;border-radius:8px;min-height:0}

/* Modal/backdrop styles to replace fixed inline widths so modals scale to viewport */
.modal-backdrop{
  position:fixed; /* keep modal overlay fixed to viewport so it never pushes content out */
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(2,6,11,0.6); /* dim behind modal for clarity */
  padding:10px;
  pointer-events:auto;
  z-index:50;
}
.modal-panel{
  width:calc(100% - 28px);
  max-width:420px;
  background:var(--panel);
  padding:10px;
  border-radius:12px;
  border:1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  max-height: calc(100vh - 40px);
  overflow:auto;
}

/* make buttons and inputs slightly more compact for mobile */
.input{padding:10px;border-radius:10px}
.button{padding:10px;border-radius:10px;min-height:40px}
.button.ghost{min-height:40px}
.send-row .input{flex:1;padding:10px}
.send-btn{min-width:44px;min-height:44px}
.file-label{min-width:40px;min-height:40px}

/* Collapsed sidebar styles: when collapsed, hide labels and give main area full width */
.sidebar.collapsed{width:56px}
.sidebar.collapsed .folder{padding:8px;min-height:56px}
.sidebar.collapsed .folder div:first-child{display:block}
.sidebar.collapsed .folder small{display:none}