/* Full Ondris workspace layout. Keep projects/chats visible on desktop while
   retaining Project Cloud drawers and compact mobile behaviour. */
#chatScreen.active {
  display: flex !important;
  flex-direction: row;
  min-height: 0;
}

#workspaceNav {
  width: 280px;
  min-width: 280px;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  padding: 18px 14px;
  background: #171717;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.workspace-brand {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
}
.workspace-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
}
.workspace-action,
.workspace-item {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-dim);
  border-radius: 10px;
  padding: 10px 11px;
  text-align: left;
  font: inherit;
  font-size: 13px;
}
.workspace-action:hover,
.workspace-item:hover,
.workspace-item.active {
  background: var(--panel-raised);
  color: var(--ink);
  border-color: var(--border);
}
.workspace-search {
  width: 100%;
  padding: 10px 11px;
  border-radius: 10px;
  font-size: 13px;
}
.workspace-section-title {
  margin: 4px 8px 7px;
  color: var(--ink-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.workspace-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.workspace-nav-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

#chatMain {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}
#mobileNavToggle { display: none !important; }
#activeProjectLabel {
  color: var(--ink-dim);
  font-size: 12px;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-plate-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-plate-item {
  width: 100%;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
}
.project-plate-item:hover { border-color: var(--ember-dim); }
.project-plate-item.active { border-color: var(--ember); }
.project-plate-actions { display: flex; gap: 8px; }
.project-plate-actions button { flex: 1; }
.info-disclosure {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.info-disclosure summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  list-style-position: outside;
}
.info-disclosure summary::marker { color: var(--ember); }
.info-copy { margin-top: 10px; }
.info-ask {
  width: 100%;
  margin-top: 4px;
  font-size: 13px;
}

#projectDrawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(590px, 100%);
  z-index: 20;
  background: var(--panel);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform .2s ease;
  overflow-y: auto;
  padding: 22px;
}
#projectDrawer.open { transform: translateX(0); }
.project-drawer-head { display: flex; gap: 10px; align-items: flex-start; }
.project-drawer-head h2 { margin: 0; font-family: 'Fraunces', serif; font-weight: 500; }
.project-drawer-head .spacer { flex: 1; }
.resume-card {
  margin: 18px 0 10px;
  padding: 16px;
  border: 1px solid var(--ember-dim);
  border-radius: 14px;
  background: rgba(227,162,60,.06);
  line-height: 1.55;
}
.next-actions-card {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-raised);
}
.next-actions-card h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.next-actions-card ol { margin: 0; padding-left: 20px; }
.next-actions-card li { margin: 6px 0; font-size: 13px; line-height: 1.45; }
.folder-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.folder-section { margin: 20px 0; }
.folder-section h3 { font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; }
.folder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.folder-row .folder-name { flex: 1; overflow-wrap: anywhere; }
.folder-row button { color: var(--ember); background: none; }
#projectUploadInput { display: none; }
.workspace-empty { color: var(--ink-faint); font-size: 12px; padding: 8px 0; }
.drop-hint { color: var(--ink-faint); font-size: 12px; line-height: 1.45; margin: 0 0 12px; }
#projectDrawer.drag-active, .composer.drag-active {
  outline: 2px dashed var(--ember);
  outline-offset: -8px;
  background-color: rgba(227,162,60,.08);
}

/* Same off-canvas drawer pattern as #projectDrawer - a real, always-
   reachable place of its own rather than another collapsed section in
   the general settings panel. Shared by #profileDrawer, #projectsDrawer,
   #chatsDrawer (the Hub-panel cleanup, 5 Sep 2026) and #createDocumentDrawer/
   #editPhotoDrawer (in-chat document creation and photo editing, same day)
   - each mixes a few different content types (a form, .panel-section
   blocks, a plain list) with no shared margin convention between them, so
   flex+gap on the drawer itself gives consistent spacing instead of every
   child needing its own hand-tuned margin. */
#profileDrawer,
#projectsDrawer,
#chatsDrawer,
#createDocumentDrawer,
#editPhotoDrawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(480px, 100%);
  z-index: 20;
  background: var(--panel);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform .2s ease;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#profileDrawer.open,
#projectsDrawer.open,
#chatsDrawer.open,
#createDocumentDrawer.open,
#editPhotoDrawer.open { transform: translateX(0); }

@media (max-width: 820px) {
  #workspaceNav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(310px, 88vw);
    min-width: 0;
    transform: translateX(-102%);
    transition: transform .2s ease;
    box-shadow: 16px 0 40px rgba(0,0,0,.35);
  }
  #workspaceNav.open { transform: translateX(0); }
  /* #workspaceNav (above) is a fixed, z-index:30 panel that slides to
     inset 0 auto 0 0 - i.e. it visually covers the topbar's left edge,
     where this button lives, once open. Without its own stacking
     context above that, a second tap on "the hamburger" (a real user's
     natural way to close what they just opened) actually lands on the
     open sidebar underneath instead, doing nothing - the sidebar can
     still be dismissed via the dimmed #overlay, but that's a much less
     discoverable target. Found 6 Sep 2026 testing "the sidebar doesn't
     hide". position+z-index above #workspaceNav's 30 keeps this button
     reachable/clickable the whole time it's open. */
  #mobileNavToggle { display: flex !important; position: relative; z-index: 31; }
  #activeProjectLabel { max-width: 34vw; }
}

@media (max-width: 600px) {
  #chatScreen.active { min-height: 0; height: 100%; }
  #chatMain { width: 100%; min-width: 0; }
  #projectDrawer { width: 100%; }
  #profileDrawer { width: 100%; }
  #projectsDrawer { width: 100%; }
  #chatsDrawer { width: 100%; }
  #createDocumentDrawer { width: 100%; }
  #editPhotoDrawer { width: 100%; }
  #activeProjectLabel { display: none; }

  #chatMain .topbar {
    min-height: 48px;
    padding: 7px 10px;
    gap: 6px;
  }
  #chatMain .topbar .brand-name { font-size: 17px; }
  #chatMain .topbar .icon-btn {
    width: 34px;
    height: 34px;
    padding: 6px;
  }

  #chatMain .thread {
    padding: 12px 10px;
    gap: 10px;
    scroll-padding-bottom: 88px;
  }
  #chatMain .msg-row { max-width: 94%; }
  #chatMain .bubble {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.45;
  }
  #chatMain .reactions { margin-top: 3px; }
  #chatMain .msg-time { font-size: 9px !important; padding: 2px 4px; }

  #chatMain .composer {
    gap: 6px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    align-items: flex-end;
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  #chatMain .composer .orb.small {
    width: 30px;
    height: 30px;
    margin-bottom: 6px;
  }
  #chatMain .composer textarea {
    min-width: 0;
    min-height: 42px;
    max-height: 120px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.35;
  }
  #chatMain #micBtn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin-bottom: 3px;
  }
  #chatMain #sendBtn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    margin-bottom: 0;
  }
}


/* Unified chat composer: one familiar rounded bar, with actions contained. */
#chatMain .composer {
  width: min(860px, calc(100% - 32px));
  margin: 10px auto 18px;
  padding: 7px;
  gap: 4px;
  align-items: flex-end;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
#chatMain .composer .orb.small { display: none; }
#chatMain .composer textarea {
  min-width: 0;
  min-height: 44px;
  padding: 11px 12px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
}
#chatMain .composer textarea:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}
#chatMain .composer .icon-btn,
#chatMain .composer .send-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: 2px 0;
  border-radius: 50%;
}
#chatMain .composer .composer-plus {
  border: 1px solid var(--border);
  font-size: 27px;
  font-weight: 300;
  line-height: 1;
}
#chatMain .composer .composer-plus:hover {
  background: var(--panel-raised);
}
#chatMain .composer .send-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
}

@media (max-width: 600px) {
  #chatMain .composer {
    width: calc(100% - 16px);
    margin: 8px auto calc(8px + env(safe-area-inset-bottom));
    padding: 5px;
    gap: 2px;
    border-radius: 24px;
  }
  #chatMain .composer textarea {
    min-height: 40px;
    max-height: 120px;
    padding: 9px 10px;
    border-radius: 18px;
  }
  #chatMain .composer .icon-btn,
  #chatMain .composer #micBtn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 2px 0;
  }
  #chatMain .composer #sendBtn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin: 0;
    border-radius: 50%;
  }
}