* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: #e0e0e0;
  background: #1a1a1a;
}

#shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#top-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: #252525;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}

#top-bar .brand {
  font-weight: 700;
}

#top-bar .version {
  color: #888;
  font-size: 12px;
}

#top-bar nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

#top-bar button {
  padding: 0.35rem 0.6rem;
  background: #333;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

#top-bar button:hover {
  background: #404040;
}

#top-bar button[aria-pressed="true"] {
  background: #0a5;
  color: #000;
}

#account-btn {
  margin-left: auto;
}

#auth-indicator {
  color: #888;
  font-size: 12px;
  margin-left: 0.25rem;
}

#terminal-block {
  display: flex;
  flex-direction: column;
  background: #0d0d0d;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
  min-height: 120px;
  max-height: 40vh;
}

#terminal-block.collapsed {
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  border-bottom: none;
}

#output-reel {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

#output-reel .output-spacer {
  height: 1.4em;
  min-height: 1px;
}

#output-reel .output-input {
  color: #0a5;
}

#prompt-line {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-top: 1px solid #333;
  background: #111;
  flex-shrink: 0;
}

#prompt-prefix {
  color: #0a5;
  margin-right: 0.25rem;
}

#cli-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #e0e0e0;
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

#viewport {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.view {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}

.view.active {
  display: flex;
}

.view iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: #1a1a1a;
}

#view-files {
  flex-direction: column;
  padding: 0;
  min-height: 0;
}

.files-tabs-row {
  flex-shrink: 0;
  border-bottom: 1px solid #333;
}

.files-tabs {
  margin-bottom: 0;
}

.files-tabs [role="tab"] {
  padding: 0.5rem 1rem;
  font-size: 13px;
  background: #252525;
  color: #aaa;
  border: 1px solid #333;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
}

.files-tabs [role="tab"][aria-selected="true"] {
  background: #333;
  color: #e0e0e0;
}

.files-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.files-explorer-pane {
  display: flex;
  flex-direction: column;
  min-width: 240px;
  width: 40%;
  max-width: 480px;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0.5rem;
}

.files-editor-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.files-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  margin-right: auto;
}

.files-breadcrumb .files-breadcrumb-sep {
  color: #666;
  pointer-events: none;
}

.files-breadcrumb .files-breadcrumb-part {
  color: #888;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
}

.files-breadcrumb .files-breadcrumb-part:hover {
  background: #333;
  color: #e0e0e0;
}

.files-breadcrumb .files-breadcrumb-part.current {
  color: #e0e0e0;
  cursor: default;
}

.files-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 180px;
  padding: 0.25rem 0;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.files-context-menu.hidden {
  display: none;
}

.files-context-menu [role="menuitem"] {
  display: block;
  width: 100%;
  padding: 0.4rem 1rem;
  text-align: left;
  border: none;
  background: none;
  color: #e0e0e0;
  font-size: 13px;
  cursor: pointer;
}

.files-context-menu [role="menuitem"]:hover {
  background: #0a5;
  color: #000;
}

.files-context-menu [role="menuitem"]:disabled {
  color: #666;
  cursor: default;
}

.files-context-menu [role="menuitem"]:disabled:hover {
  background: transparent;
  color: #666;
}

.files-context-menu .ctx-separator {
  height: 1px;
  margin: 0.25rem 0;
  background: #444;
  padding: 0;
  cursor: default;
}

/* Platform context menu (game, seeds, files-editor, synced with apps) */
.platform-context-menu {
  position: fixed;
  z-index: 10001;
  min-width: 200px;
  padding: 0.25rem 0;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.platform-context-menu.hidden {
  display: none;
}

.platform-context-menu [role="menuitem"] {
  display: block;
  width: 100%;
  padding: 0.4rem 1rem;
  text-align: left;
  border: none;
  background: none;
  color: #e0e0e0;
  font-size: 13px;
  cursor: pointer;
}

.platform-context-menu [role="menuitem"]:hover {
  background: #0a5;
  color: #000;
}

.platform-context-menu .ctx-separator {
  height: 1px;
  margin: 0.25rem 0;
  background: #444;
  padding: 0;
  cursor: default;
}

#files-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

#files-toolbar #files-export + button {
  margin-left: 0.25rem;
  border-left: 1px solid #444;
  padding-left: 0.5rem;
}

.files-new-wrap {
  position: relative;
}

.files-new-menu {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 2px;
  min-width: 120px;
  padding: 0.25rem 0;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 1000;
}

.files-new-menu.hidden {
  display: none;
}

.files-new-menu [role="menuitem"] {
  display: block;
  width: 100%;
  padding: 0.4rem 1rem;
  text-align: left;
  border: none;
  background: none;
  color: #e0e0e0;
  font-size: 13px;
  cursor: pointer;
}

.files-new-menu [role="menuitem"]:hover {
  background: #0a5;
  color: #000;
}

#files-path.files-path-extra {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #888;
}

#files-container {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 0.25rem;
}

.files-row {
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.files-row:hover {
  background: #2a2a2a;
}

.files-row.selected {
  background: #0a5;
  color: #000;
}

.files-dir .files-name::before {
  content: "📁 ";
}

.files-error {
  color: #f66;
}

.files-size {
  font-size: 12px;
  color: #888;
}

.files-share-path {
  font-size: 12px;
  color: #888;
  margin-bottom: 0.5rem;
}

.files-share-list-wrap {
  margin-top: 0.5rem;
}

.files-share-list-wrap textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.35rem;
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 13px;
}

.files-visibility-badge {
  font-size: 10px;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  margin-left: 0.35rem;
}

.files-visibility-badge.private { background: #333; color: #888; }
.files-visibility-badge.public { background: #0a5; color: #000; }
.files-visibility-badge.shared { background: #05a; color: #fff; }

.hidden {
  display: none !important;
}

/* Phase 2: Apps view */
#view-apps {
  padding: 1rem;
  overflow-y: auto;
}

.bikini-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background: #252525;
  border: 1px solid #444;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  max-width: 90vw;
  font-size: 13px;
}
.bikini-toast[hidden] {
  display: none;
}
.bikini-toast--success { border-left: 4px solid #0a5; }
.bikini-toast--error { border-left: 4px solid #f66; }
.bikini-toast--info { border-left: 4px solid #5af; }

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: #252525;
  border: 1px solid #333;
  border-radius: 6px;
}

.app-card .app-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.app-card .app-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.app-card .app-icon-wrap .app-icon-letter {
  font-size: 1.5rem;
  font-weight: 700;
  color: #888;
}

.app-name {
  font-weight: 600;
}

.app-desc {
  font-size: 12px;
  color: #888;
  flex: 1;
}

.app-open {
  padding: 0.35rem 0.6rem;
  background: #0a5;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.app-open:hover {
  background: #0c6;
}

/* Editor panel (inside Files view) */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: #252525;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}

.editor-toolbar #editor-export + button {
  margin-left: 0.25rem;
  border-left: 1px solid #444;
  padding-left: 0.5rem;
}

.editor-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0.2rem 0.5rem;
  background: #1e1e1e;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
  min-height: 32px;
}

.editor-tab {
  padding: 0.25rem 0.6rem;
  font-size: 12px;
  background: #333;
  color: #aaa;
  border: 1px solid #444;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
}

.editor-tab.active {
  background: #252525;
  color: #e0e0e0;
  border-bottom-color: #252525;
}

.editor-tab.dirty::after {
  content: " •";
  color: #fa0;
}

.editor-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.editor-binary-preview {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 0.5rem;
  background: #1a1a1a;
  color: #888;
}

.editor-codemirror-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-codemirror-wrap .cm-editor {
  height: 100%;
  background: #1a1a1a;
  color: #e0e0e0;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 14px;
}

.editor-codemirror-wrap .cm-scroller {
  overflow: auto;
}

.editor-codemirror-wrap .cm-gutters {
  background: #252525;
  border-right: 1px solid #333;
  color: #888;
}

#editor-code {
  width: 100%;
  height: 100%;
  min-height: 200px;
  margin: 0;
  padding: 0.5rem;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 14px;
  line-height: 1.5;
  background: #1a1a1a;
  color: #e0e0e0;
  border: none;
  resize: none;
  tab-size: 4;
}

.editor-output {
  flex-shrink: 0;
  max-height: 180px;
  overflow-y: auto;
  padding: 0.5rem;
  background: #0d0d0d;
  border-top: 1px solid #333;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

.editor-output pre {
  margin: 0 0 0.25rem 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.editor-output .stderr {
  color: #f66;
}

/* Account view (tabs: Sign in, Register, Profile, Manage) */
#view-account {
  flex-direction: column;
  padding: 1rem;
  overflow-y: auto;
}

.account-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 1rem;
  flex-shrink: 0;
  border-bottom: 1px solid #333;
}

.account-tabs [role="tab"] {
  padding: 0.5rem 1rem;
  font-size: 13px;
  background: #252525;
  color: #aaa;
  border: 1px solid #333;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
}

.account-tabs [role="tab"][aria-selected="true"] {
  background: #333;
  color: #e0e0e0;
}

.account-panel {
  max-width: 28rem;
}

.account-form label {
  display: block;
  margin-bottom: 0.75rem;
}

.account-form input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.35rem 0.5rem;
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 14px;
}

.account-form button[type="submit"] {
  padding: 0.5rem 1rem;
  background: #0a5;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.account-form button[type="submit"]:hover {
  background: #0c6;
}

.account-message {
  margin-top: 0.75rem;
  font-size: 13px;
}

.account-dl {
  margin: 0 0 1rem 0;
}

.account-dl dt {
  font-weight: 600;
  color: #888;
  font-size: 12px;
  margin-top: 0.5rem;
}

.account-dl dt:first-of-type { margin-top: 0; }

.account-dl dd {
  margin: 0.15rem 0 0 0;
}

.account-logout {
  padding: 0.35rem 0.75rem;
  background: #444;
  color: #e0e0e0;
  border: 1px solid #555;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.account-logout:hover {
  background: #555;
}

.account-muted {
  color: #888;
  font-size: 13px;
}

.account-action {
  padding: 0.35rem 0.75rem;
  background: #0a5;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.account-action:hover {
  background: #0c6;
}

/* Docs view */
#view-docs {
  flex-direction: column;
  padding: 1rem;
  overflow-y: auto;
}

.docs-inner {
  max-width: 56rem;
}

.docs-inner h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.docs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #333;
}

.docs-link {
  color: #0a5;
  text-decoration: none;
  font-size: 14px;
}

.docs-link:hover {
  text-decoration: underline;
}

.docs-content {
  margin-top: 0.5rem;
}

.docs-section {
  margin-bottom: 1.5rem;
}

.docs-section h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.docs-section code {
  background: #252525;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  font-size: 13px;
}

.docs-section pre {
  white-space: pre-wrap;
  font-size: 12px;
  color: #ccc;
  margin: 0.5rem 0;
}

/* Bikini modal */
.bikini-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.bikini-modal.hidden {
  display: none !important;
}

.bikini-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.bikini-modal-box {
  position: relative;
  background: #252525;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 1.25rem;
  min-width: 280px;
  max-width: 100%;
}

.bikini-modal-box h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
}

.bikini-modal-box label {
  display: block;
  margin-bottom: 0.75rem;
}

.bikini-modal-box input[type="text"],
.bikini-modal-box input[type="email"],
.bikini-modal-box input[type="password"],
.bikini-modal-box select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.35rem 0.5rem;
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 14px;
}

.bikini-modal-box select {
  cursor: pointer;
}

.bikini-modal-box textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.35rem 0.5rem;
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 14px;
  font-family: inherit;
}

.bikini-modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.bikini-modal-actions button {
  padding: 0.4rem 0.8rem;
  background: #333;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.bikini-modal-actions button[type="submit"] {
  background: #0a5;
  color: #000;
  border-color: #0a5;
}

.bikini-modal-actions button:hover {
  background: #404040;
}

.bikini-modal-actions button[type="submit"]:hover {
  background: #0c6;
}

.bikini-modal-actions button#files-share-save,
.bikini-modal-actions button#editor-file-dialog-primary {
  background: #0a5;
  color: #000;
  border-color: #0a5;
}

.bikini-modal-actions button#files-share-save:hover,
.bikini-modal-actions button#editor-file-dialog-primary:hover {
  background: #0c6;
}

.editor-file-dialog-box {
  min-width: 320px;
  max-width: 90vw;
}

.editor-file-dialog-path {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #888;
  margin-bottom: 0.5rem;
}

.editor-file-dialog-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 0.25rem;
  margin-bottom: 0.5rem;
  background: #1a1a1a;
}

.editor-file-dialog-list .file-row {
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.editor-file-dialog-list .file-row:hover {
  background: #2a2a2a;
}

.editor-file-dialog-list .file-row.selected {
  background: #0a5;
  color: #000;
}

.editor-file-dialog-list .file-dir .file-name::before {
  content: "📁 ";
}

.editor-file-dialog-filename-label {
  display: block;
  margin-bottom: 0.5rem;
}

.editor-file-dialog-filename-label input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.35rem 0.5rem;
  background: #111;
  border: 1px solid #333;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 14px;
}

/* Discussions view: main area + bottom toolbar (user, New) */
#view-slack {
  flex-direction: column;
  padding: 0;
  min-height: 0;
}

.discussions-main {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.discussions-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: #252525;
  border-bottom: 1px solid #333;
}

.discussions-main iframe {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  border: none;
}

.discussions-user {
  color: #aaa;
  font-size: 13px;
}

.discussions-toolbar-btn {
  padding: 0.35rem 0.75rem;
  font-size: 13px;
  background: #0a5;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.discussions-toolbar-btn:hover {
  background: #0c6;
}

.discussions-toolbar-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Platform toolbar buttons (same as Discussions) — used in Files and Editor */
.platform-toolbar-btn {
  padding: 0.35rem 0.75rem;
  font-size: 13px;
  background: #0a5;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.platform-toolbar-btn:hover {
  background: #0c6;
}

.platform-toolbar-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.platform-toolbar-btn-secondary {
  padding: 0.35rem 0.75rem;
  font-size: 13px;
  background: #333;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
}

.platform-toolbar-btn-secondary:hover {
  background: #404040;
}

.platform-toolbar-btn-danger {
  padding: 0.35rem 0.75rem;
  font-size: 13px;
  background: #a33;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.platform-toolbar-btn-danger:hover {
  background: #c44;
}

/* Files toolbar: platform button styling */
#files-toolbar button {
  padding: 0.35rem 0.75rem;
  font-size: 13px;
  background: #0a5;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#files-toolbar button:hover {
  background: #0c6;
}

#files-toolbar button#files-delete {
  background: #a33;
  color: #fff;
}

#files-toolbar button#files-delete:hover {
  background: #c44;
}

/* Editor toolbar (inside Files): platform button styling */
.editor-toolbar button {
  padding: 0.35rem 0.75rem;
  font-size: 13px;
  background: #0a5;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.editor-toolbar button:hover {
  background: #0c6;
}

.editor-toolbar button#editor-close {
  background: #333;
  color: #e0e0e0;
  border: 1px solid #444;
}

.editor-toolbar button#editor-close:hover {
  background: #404040;
}