/* PapiGPT Online base stylesheet — build 20260925-012. Legacy papigpt-fix##.css files are obsolete after this update. */
:root{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202123;
  background: #ffffff;
  font-synthesis: none;
  --sidebar: #f7f7f8;
  --surface: #ffffff;
  --surface-soft: #f4f4f5;
  --hover: #ececf1;
  --hover-strong: #e6e6eb;
  --text: #202123;
  --muted: #6e6e80;
  --faint: #8e8ea0;
  --line: #e5e5e5;
  --line-strong: #d9d9e3;
  --accent: #10a37f;
  --accent-hover: #0d8f70;
  --dark: #202123;
  --dark-hover: #343541;
  --danger: #c23b3b;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --papi-sidebar-width: clamp(300px, 20vw, 340px);
}

*{ box-sizing: border-box; }
html, body, #root{ min-width: 320px; min-height: 100%; }
body{ margin: 0; min-height: 100vh; background: var(--surface); color: var(--text); }
button, input, textarea{ font: inherit; }
button{ color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 2px solid rgba(16,163,127,.35); outline-offset: 2px; }
.hidden-input{ display: none; }

.app-shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--papi-sidebar-width) minmax(0, 1fr);
  background: var(--surface);
  transition: grid-template-columns .18s ease;
}
.app-shell.sidebar-collapsed{ grid-template-columns: 58px minmax(0, 1fr); }

.sidebar{
  height: 100vh;
  background: var(--sidebar);
  border-right: 1px solid #efeff1;
  padding: 10px 9px 12px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 30;
  min-width: 0;
  overflow: hidden;
}

.sidebar-head{ height: 38px; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.brand-button{ min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; border: 0; background: transparent; cursor: pointer; padding: 5px 7px; border-radius: 8px; text-align: left; }
.brand-button:hover{ background: var(--hover); }
.brand-button img{ width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.brand-button strong{ font-size: 16px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-search-button{ flex: 0 0 auto; }
.member-search-button[hidden]{ display:none !important; }
.icon-button{ width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: #565869; }
.icon-button:hover{ background: var(--hover); color: var(--text); }
.mobile-close, .mobile-menu{ display: none; }

.sidebar-new-chat, .new-report, .compose-primary-action{
  height: 40px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  margin-bottom: 3px;
}
.sidebar-new-chat:hover, .new-report:hover, .compose-primary-action:hover{ background: var(--hover); }
.sidebar-new-chat span:nth-child(2), .new-report span:nth-child(2), .compose-primary-action span:nth-child(2){ flex: 1; text-align: left; font-weight: 500; }
.new-report-shortcut{ color: var(--faint); font-size: 18px; line-height: 1; }

.primary-nav{ display: grid; gap: 2px; margin-bottom: 8px; }
.primary-nav button, .sidebar-list button, .settings-button{
  width: 100%;
  min-height: 40px;
  height: auto;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  text-align: left;
  font-size: 14.5px;
}
.primary-nav button:hover, .sidebar-list button:hover, .settings-button:hover{ background: var(--hover); }
.primary-nav button.active, .sidebar-list button.active{ background: var(--hover-strong); }
.primary-nav span, .sidebar-list span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-section{ margin-top: 6px; }
.section-heading{ height: 30px; display: flex; align-items: center; gap: 2px; }
.section-toggle{ min-width: 0; flex: 1; height: 30px; border: 0; background: transparent; display: flex; align-items: center; gap: 6px; color: #565869; padding: 0 7px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600; }
.section-toggle:hover, .section-add:hover{ background: var(--hover); }
.section-add{ width: 28px; height: 28px; border: 0; background: transparent; display: grid; place-items: center; border-radius: 7px; cursor: pointer; color: var(--muted); }
.folder-list{ padding-left: 7px; }
.sidebar-list{ display: grid; gap: 1px; }
.sidebar-list button{ height: 38px; font-size: 14.5px; color: #3f414c; }
.sidebar-empty{ font-size: 12.5px; color: var(--faint); padding: 5px 10px 7px 31px; }
.section-label{ color: var(--faint); font-size: 12.5px; font-weight: 600; padding: 8px 8px 5px; }
.recent-section{ margin-top: 12px; }

.recent-chat-list{ gap: 1px; }
.recent-chat-row{ position: relative; min-width: 0; height: 38px; border-radius: 8px; display: flex; align-items: center; }
.recent-chat-row:hover, .recent-chat-row.active{ background: var(--hover); }
.recent-chat-list .recent-chat-open{
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  height: 38px !important;
  padding: 0 5px 0 10px !important;
  gap: 9px !important;
  background: transparent !important;
}
.recent-chat-list .recent-chat-open span{
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pinned-chat-icon{ transform: rotate(-18deg); color: #5f616c; }
.recent-chat-list .recent-chat-more{
  width: 29px;
  min-width: 29px;
  height: 28px;
  padding: 0;
  margin-right: 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #5f616c;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  flex: 0 0 29px;
}
.recent-chat-row:hover .recent-chat-more, .recent-chat-row.active .recent-chat-more, .recent-chat-more:focus-visible{ opacity: 1; }
.recent-chat-more:hover{ background: #dedee3; color: #202123; }

.chat-options-menu{ position: absolute; z-index: 80; top: 31px; right: 1px; width: 200px; padding: 6px; background: #fff; border: 1px solid #e5e5e5; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08); }
.chat-options-menu > button{ width: 100%; min-height: 36px; border: 0; border-radius: 8px; background: transparent; padding: 7px 9px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: #202123; text-align: left; font-size: 13px; }
.chat-options-menu > button:hover{ background: #f2f2f2; }
.chat-options-menu > button:disabled{ color: #aaaab3; cursor: default; }
.chat-options-menu > button:disabled:hover{ background: transparent; }
.chat-options-menu button span{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-separator{ height: 1px; background: #e8e8e8; margin: 5px 4px; }
.chat-options-menu .danger-menu-item{ color: #e02e2e; }
.chat-options-menu .danger-menu-item:hover{ background: #fff1f1; }
.submenu-chevron{ transition: transform .15s ease; }
.submenu-chevron.open{ transform: rotate(90deg); }
.menu-hint{ padding: 2px 10px 6px 35px; color: var(--faint); font-size: 10.5px; }
.sidebar-spacer{ flex: 1; min-height: 16px; }

.sidebar-footer{ padding: 6px 2px 0; }
.daily-usage-summary{
  margin: 0 7px 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
  display: grid;
  gap: 1px;
}
.context-status{ margin: 0 7px 5px; display: flex; gap: 7px; align-items: center; color: var(--faint); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.status-dot{ width: 7px; height: 7px; border-radius: 50%; background: #c8a45d; flex: 0 0 auto; }
.context-status.ready .status-dot{ background: var(--accent); }
.settings-button{ height: 40px; color: #565869; }
.sidebar-footer p{ margin: 7px 8px 0; font-size: 10.5px; line-height: 1.4; color: var(--faint); }

.member-profile-wrap{ position: relative; margin-top: 4px; }
.member-profile-button{
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.member-profile-button:hover, .member-profile-button[aria-expanded="true"]{ background: var(--hover); }
.member-avatar{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #27272a, #555);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.08);
}
.member-avatar.large{ width: 34px; height: 34px; flex-basis: 34px; font-size: 11px; }
.member-profile-identity{ min-width: 0; flex: 1; display: grid; gap: 1px; }
.member-profile-identity strong{
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-profile-identity small{ color: var(--muted); font-size: 10.5px; line-height: 1.25; }
.member-profile-more{ color: var(--muted); flex: 0 0 auto; }

.member-profile-menu{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 7px);
  z-index: 80;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(0,0,0,.14);
  display: grid;
  gap: 1px;
}
.member-profile-menu > button{
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  font-size: 12.5px;
}
.member-profile-menu > button:hover{ background: var(--hover); }
.member-profile-menu-head{ min-height: 48px !important; }
.member-profile-menu-head .member-profile-identity{ padding-right: 3px; }
.member-menu-divider{ height: 1px; background: var(--line); margin: 5px 4px; }
.member-menu-tail{ margin-left: auto; color: var(--muted); }

.sidebar-collapsed .member-profile-button{ padding: 5px; justify-content: center; }
.sidebar-collapsed .member-profile-button .member-profile-identity, .sidebar-collapsed .member-profile-button .member-profile-more{ display: none; }
.sidebar-collapsed .member-profile-menu{ left: 48px; right: auto; bottom: 0; width: 220px; }

.collapsed-actions{ display: grid; justify-content: center; gap: 5px; }
.sidebar-collapsed .sidebar{ padding-left: 8px; padding-right: 8px; }
.sidebar-collapsed .sidebar-head{ justify-content: center; }
.sidebar-collapsed .brand-button{ flex: 0; padding: 5px; }
.sidebar-collapsed .brand-button img{ width: 25px; height: 25px; }

.main-panel{ min-width: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); }
.topbar{ height: 50px; flex: 0 0 50px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); z-index: 20; }
.topbar-title{ font-size: 14px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topbar-spacer{ flex: 1; }
.topbar-expand{ margin-left: -5px; }
.workspace-chip{ max-width: 260px; height: 30px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0 10px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.workspace-chip:hover{ background: var(--surface-soft); }

.topbar-auth{ display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.topbar-login, .topbar-signup{
  height: 32px;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.topbar-login{ border: 1px solid var(--line-strong); background: #fff; color: var(--text); }
.topbar-login:hover{ background: var(--surface-soft); }
.topbar-signup{ border: 1px solid var(--dark); background: var(--dark); color: #fff; }
.topbar-signup:hover{ background: var(--dark-hover); }

.chat-page{ flex: 1; min-height: calc(100vh - 50px); position: relative; overflow-x: hidden; overflow-y: auto; }
.welcome{ width: min(650px, calc(100% - 40px)); position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; }
.welcome-logo{ width: 54px; height: 54px; object-fit: contain; display: block; margin: 0 auto 10px; }
.welcome-brand-lockup{
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 0 auto 24px;
  text-align: center;
}
.welcome-brand-lockup strong{
  font-size: 18px;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.02em;
}
.welcome-brand-lockup span{
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
}
.welcome h1{ margin: 0; font-size: clamp(28px, 3vw, 34px); line-height: 1.12; letter-spacing: -.035em; color: #0d0d0d; }
.welcome > p{ margin: 10px 0 28px; color: var(--muted); font-size: 14px; }
.suggestion-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.suggestion-grid button{ height: 48px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 15px; cursor: pointer; text-align: left; font-size: 13.5px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.suggestion-grid button:hover{ background: var(--surface-soft); border-color: #c9c9d1; }
.suggestion-grid button svg{ color: var(--accent); }

.messages{ width: min(780px, calc(100% - 44px)); margin: 0 auto; padding: 38px 0 190px; min-height: calc(100vh - 50px); }
.message{ margin: 0 0 28px; }
.message.assistant{ display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 13px; align-items: start; }
.message.user{ display: flex; justify-content: flex-end; }
.assistant-mark{ width: 28px; height: 28px; display: grid; place-items: center; }
.assistant-mark img{ width: 26px; height: 26px; object-fit: contain; }
.bubble{ min-width: 0; font-size: 14px; line-height: 1.72; color: #26262d; }
.message.user .bubble{ max-width: min(76%, 620px); background: var(--surface-soft); border-radius: 18px; padding: 9px 14px; }
.bubble p{ margin: 0 0 11px; }
.bubble p:last-child{ margin-bottom: 0; }
.bubble pre{ overflow: auto; background: #f7f7f8; border: 1px solid var(--line); padding: 14px; border-radius: 10px; }
.bubble code{ font-family: "SFMono-Regular", Consolas, monospace; font-size: .94em; }
.typing{ color: var(--muted); }
.typing span{ letter-spacing: 2px; margin-left: 5px; color: var(--faint); }

.composer-dock{ position: fixed; left: calc(var(--papi-sidebar-width) + (100vw - var(--papi-sidebar-width)) / 2); bottom: 8px; transform: translateX(-50%); width: min(820px, calc(100vw - var(--papi-sidebar-width) - 48px)); z-index: 15; transition: left .18s ease, width .18s ease; }
.sidebar-collapsed .composer-dock{ left: calc(58px + (100vw - 58px) / 2); width: min(760px, calc(100vw - 116px)); }
.composer{ position: relative; min-height: 104px; background: #fff; border: 1px solid var(--line-strong); border-radius: 24px; box-shadow: 0 2px 12px rgba(0,0,0,.08); padding: 13px 12px 9px; display: flex; flex-direction: column; }
.composer textarea{ flex: 1; min-height: 46px; max-height: 180px; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); padding: 0 4px; line-height: 1.5; font-size: 14px; }
.composer textarea::placeholder{ color: #8b8b98; }
.composer-toolbar{ display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.composer-tools{ display: flex; gap: 2px; }
.composer-tools button{ width: 34px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #565869; display: grid; place-items: center; cursor: pointer; }
.composer-tools button:hover{ background: var(--hover); }
.composer-tools .report-options-trigger{
  width: auto;
  min-width: 34px;
  padding: 0 8px;
  grid-auto-flow: column;
  gap: 6px;
}
.report-options-trigger span{ font-size: 11.5px; font-weight: 600; }
.report-options-trigger b{ min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--dark); color: #fff; font-size: 9.5px; font-weight: 700; }
.report-options-trigger.active{ background: var(--hover); color: var(--text); }

.report-options-panel{
  position: absolute;
  z-index: 45;
  left: 0;
  bottom: calc(100% + 10px);
  width: min(650px, 100%);
  max-height: min(610px, calc(100vh - 190px));
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,.14), 0 3px 12px rgba(0,0,0,.07);
  padding: 14px;
}
.report-options-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); }
.report-options-head > div{ display: grid; gap: 3px; }
.report-options-head strong{ font-size: 14px; }
.report-options-head span{ color: var(--muted); font-size: 11.5px; }
.report-options-head button{ width: 30px; height: 30px; border: 0; border-radius: 8px; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; }
.report-options-head button:hover{ background: var(--hover); color: var(--text); }
.report-options-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 13px; }
.report-option-group{ min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 11px; background: #fcfcfc; display: grid; gap: 7px; }
.report-option-group > span, .notebook-title-field > span{ font-size: 11.5px; font-weight: 700; color: #373740; }
.report-option-group select{ width: 100%; height: 36px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 9px; background: #fff; color: var(--text); outline: 0; cursor: pointer; font-size: 12.5px; }
.report-number-input{ width: 100%; height: 36px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 10px; background: #fff; color: var(--text); outline: 0; font-size: 12.5px; }
.report-option-group select:focus, .report-number-input:focus, .notebook-title-field input:focus{ border-color: #a9a9b3; box-shadow: 0 0 0 3px rgba(16,163,127,.08); }
.report-option-group small, .notebook-title-field small{ color: var(--faint); font-size: 10.5px; line-height: 1.45; }
.notebook-title-field{ margin-top: 12px; border: 1px solid #d9e8e3; background: #f9fdfb; border-radius: 12px; padding: 11px; display: grid; gap: 7px; }
.notebook-title-field input{ width: 100%; height: 36px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; padding: 0 10px; outline: 0; font-size: 12.5px; }
.report-options-summary{ margin-top: 12px; padding: 10px 11px; border-radius: 10px; background: var(--surface-soft); display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--muted); font-size: 10.5px; }
.report-options-summary strong{ color: var(--text); font-weight: 600; }
.send-button{ width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--dark); color: #fff; cursor: pointer; }
.send-button:hover:not(:disabled){ background: var(--dark-hover); }
.send-button:disabled{ opacity: .28; cursor: not-allowed; }
.main-disclaimer{ text-align: center; margin: 6px 0 0; color: var(--faint); font-size: 10px; }



.write-nav{ margin-top: -1px; margin-bottom: 2px; }
.write-page{ flex: 1; min-height: calc(100vh - 50px); overflow-y: auto; background: var(--surface); }
.write-shell{ width: min(780px, calc(100% - 42px)); margin: 0 auto; padding: 28px 0 70px; }
.write-tabs{ width: 260px; height: 48px; margin: 0 auto; padding: 3px; border-radius: 999px; background: #f1f1f4; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.write-tabs button{ border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; font-size: 14px; }
.write-tabs button.active{ background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.09); }
.write-kind-tabs{ display: flex; justify-content: center; gap: 7px; margin: 18px 0 0; }
.write-kind-tabs button{ height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; }
.write-kind-tabs button:hover{ background: var(--surface-soft); }
.write-kind-tabs button.active{ color: var(--text); border-color: #c7c7cf; background: var(--surface-soft); font-weight: 600; }
.write-intro{ text-align: center; margin: 82px auto 16px; }
.write-intro h1{ margin: 0; font-size: clamp(28px, 3vw, 34px); letter-spacing: -.035em; color: #0d0d0d; }
.write-intro p{ margin: 9px auto 0; max-width: 560px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.write-composer{ border: 1px solid var(--line-strong); border-radius: 22px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08); overflow: hidden; }
.write-composer-head{ height: 42px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-size: 11.5px; }
.write-language{ display: inline-flex; align-items: center; gap: 5px; }
.write-language select, .write-controls select{ border: 0; outline: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 12.5px; }
.write-composer textarea{ width: 100%; min-height: 156px; max-height: 360px; resize: vertical; border: 0; outline: 0; padding: 0 13px 12px; background: transparent; color: var(--text); font-size: 14px; line-height: 1.55; }
.write-composer textarea::placeholder{ color: #8a8b96; }
.write-composer-foot{ min-height: 48px; padding: 7px 10px 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.write-controls{ min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.write-controls label{ display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.write-controls label > span{ color: var(--text); font-weight: 600; }
.write-send{ width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.write-send:hover:not(:disabled){ background: var(--dark-hover); }
.write-send:disabled{ opacity: .25; cursor: default; }
.write-status{ margin: 18px auto 0; width: fit-content; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.write-status img{ width: 20px; height: 20px; object-fit: contain; }
.write-status span{ letter-spacing: 2px; color: var(--faint); }
.write-result-card{ margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.write-result-head{ min-height: 48px; padding: 8px 11px 8px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.write-result-head > div{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.write-result-head img{ width: 22px; height: 22px; object-fit: contain; }
.write-result-head button{ height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; }
.write-result-head button:hover{ background: var(--surface-soft); }
.write-result-body{ padding: 18px 20px 20px; font-size: 14px; line-height: 1.7; color: #25262d; }
.write-result-body p{ margin: 0 0 12px; }
.write-result-body p:last-child{ margin-bottom: 0; }
.write-prompts{ text-align: center; margin-top: 18px; }
.write-prompts > p{ margin: 0 0 10px; color: var(--muted); font-size: 12.5px; }
.write-prompts > div{ display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.write-prompts button{ min-height: 36px; border: 0; border-radius: 9px; background: var(--surface-soft); padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; }
.write-prompts button:hover{ background: var(--hover); }
.prompt-dot{ width: 6px; height: 6px; border-radius: 50%; background: #e0b62e; }
.prompt-dot.dot-1{ background: #93a7ff; }
.prompt-dot.dot-2{ background: #6e9cff; }
.prompt-dot.dot-3{ background: #1fbf98; }


.content-page{ width: min(1050px, calc(100% - 54px)); margin: 0 auto; padding: 44px 0 70px; }
.content-header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.content-header h1{ margin: 3px 0 4px; font-size: 30px; letter-spacing: -.035em; }
.content-header p{ margin: 0; color: var(--muted); font-size: 13px; }
.eyebrow{ color: var(--faint); font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
.title-group{ display: flex; align-items: center; gap: 16px; }
.large-folder-icon{ width: 50px; height: 50px; border-radius: 14px; background: var(--surface-soft); display: grid; place-items: center; color: #565869; }
.header-actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.primary-button, .secondary-button{ height: 36px; border-radius: 9px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; font-weight: 500; }
.primary-button{ border: 1px solid var(--dark); background: var(--dark); color: #fff; }
.primary-button:hover{ background: var(--dark-hover); }
.secondary-button{ border: 1px solid var(--line-strong); background: #fff; }
.secondary-button:hover{ background: var(--surface-soft); }
.danger-icon:hover{ color: var(--danger) !important; background: #fff1f1 !important; }

.panel-card{ border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.panel-title{ height: 44px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); }
.report-list{ display: grid; }
.report-list > button{ min-height: 60px; border: 0; border-bottom: 1px solid var(--line); background: #fff; display: flex; align-items: center; gap: 12px; padding: 8px 14px; cursor: pointer; text-align: left; }
.report-list > button:last-child{ border-bottom: 0; }
.report-list > button:hover{ background: #fafafa; }
.report-icon{ width: 34px; height: 34px; border-radius: 9px; background: var(--surface-soft); display: grid; place-items: center; color: #565869; }
.report-copy{ min-width: 0; flex: 1; display: grid; gap: 3px; }
.report-copy strong{ font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-copy span{ color: var(--faint); font-size: 11.5px; }
.empty-panel{ min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); padding: 35px; }
.empty-panel h3{ margin: 12px 0 5px; color: var(--text); font-size: 15px; }
.empty-panel p{ margin: 0 0 18px; max-width: 390px; font-size: 13px; line-height: 1.5; }
.breadcrumb{ display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.search-box{ width: min(280px, 45%); height: 34px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; padding: 0 9px; color: var(--faint); background: #fff; }
.search-box input{ width: 100%; border: 0; outline: 0; background: transparent; font-size: 12.5px; color: var(--text); }
.file-table{ border: 1px solid var(--line); border-radius: 0 0 12px 12px; overflow: hidden; }
.file-table-head, .file-row{ display: grid; grid-template-columns: minmax(260px, 2fr) minmax(90px, .6fr) minmax(70px, .45fr) minmax(100px, .6fr) 72px; align-items: center; gap: 10px; }
.file-table-head{ height: 36px; background: #fafafa; color: var(--faint); font-size: 11px; font-weight: 600; padding: 0 12px; border-bottom: 1px solid var(--line); }
.file-row{ min-height: 50px; padding: 6px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.file-row:last-child{ border-bottom: 0; }
.file-row:hover{ background: #fcfcfc; }
.file-name{ min-width: 0; border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: 0; text-align: left; cursor: default; color: var(--text); }
button.file-name{ cursor: pointer; }
.file-name strong{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.folder-glyph{ color: #6c6c78; fill: #efeff2; }
.row-actions{ display: flex; justify-content: flex-end; gap: 2px; }
.row-action{ width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.row-action:hover{ background: var(--hover); color: var(--text); }
.compact-empty{ min-height: 260px; grid-column: 1 / -1; }
.storage-note{ color: var(--faint); font-size: 10.5px; margin: 9px 3px 0; }

.modal-backdrop{ position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.30); backdrop-filter: blur(2px); }
.modal{ width: min(430px, 100%); background: #fff; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 18px 55px rgba(0,0,0,.18); padding: 20px; }
.modal h2{ margin: 0 0 7px; font-size: 18px; letter-spacing: -.02em; }
.modal p{ margin: 0 0 17px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.modal code{ font-size: 11.5px; background: var(--surface-soft); padding: 2px 5px; border-radius: 5px; }
.modal input{ width: 100%; height: 40px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 10px; outline: 0; }
.field-label{ display: block; font-size: 12px; margin-bottom: 6px; color: var(--muted); }
.modal-actions{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal-actions button{ height: 35px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 12px; background: #fff; cursor: pointer; }
.modal-actions button:hover{ background: var(--surface-soft); }
.modal-actions .primary{ background: var(--dark); border-color: var(--dark); color: #fff; }
.modal-actions .primary:hover{ background: var(--dark-hover); }
.modal-actions button:disabled{ opacity: .45; cursor: default; }

.toast{ position: fixed; z-index: 90; left: 50%; bottom: 28px; transform: translateX(-50%); background: #202123; color: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: 0 8px 30px rgba(0,0,0,.18); font-size: 12.5px; }
.sidebar-scrim{ display: none; }


@media (max-width: 700px){
  .write-shell{ width: min(100% - 24px, 780px); padding-top: 18px; }
  .write-intro{ margin-top: 54px; }
  .write-tabs{ width: min(260px, 78vw); }
  .write-kind-tabs{ flex-wrap: wrap; }
  .write-composer-foot{ align-items: flex-end; }
  .write-controls{ gap: 7px 12px; }
  .write-controls label{ width: 100%; justify-content: space-between; }
}

@media (max-width: 900px){
  .app-shell, .app-shell.sidebar-collapsed{ grid-template-columns: 1fr; }
  .sidebar{ position: fixed; left: 0; top: 0; width: 270px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 8px 0 30px rgba(0,0,0,.12); }
  .sidebar.open{ transform: translateX(0); }
  .sidebar-collapsed .sidebar{ width: 270px; padding: 10px 9px 12px; }
  .sidebar-collapsed .sidebar-head{ justify-content: initial; }
  .sidebar-collapsed .brand-button{ flex: 1; padding: 5px 7px; }
  .sidebar-collapsed .brand-button strong{ display: inline; }
  .collapsed-actions{ display: none; }
  .desktop-collapse{ display: none; }
  .mobile-close, .mobile-menu{ display: inline-grid; }
  .sidebar-scrim{ display: block; position: fixed; inset: 0; border: 0; background: rgba(0,0,0,.28); z-index: 25; }
  .topbar-expand{ display: none; }
  .composer-dock, .sidebar-collapsed .composer-dock{ left: 50%; width: min(720px, calc(100vw - 32px)); }
  .content-page{ width: min(100% - 34px, 1050px); padding-top: 30px; }
  .file-table-head, .file-row{ grid-template-columns: minmax(180px, 1.5fr) 90px 80px 36px; }
  .file-table-head span:nth-child(3), .file-row > span:nth-child(3){ display: none; }
  .file-table-head span:nth-child(4), .file-row > span:nth-child(4){ display: none; }
  .file-table-head{ grid-template-columns: minmax(180px, 1.5fr) 90px 80px 36px; }
}

@media (max-width: 640px){
  .topbar{ padding: 0 8px; }
  .topbar-auth{ gap: 5px; margin-left: 4px; }
  .topbar-login, .topbar-signup{ height: 30px; padding: 0 10px; font-size: 11.5px; }
  .workspace-chip{ max-width: 150px; }
  .welcome{ top: 39%; width: calc(100% - 28px); }
  .welcome-logo{ margin-bottom: 8px; }
  .welcome-brand-lockup{ margin-bottom: 18px; }
  .welcome h1{ font-size: 27px; }
  .suggestion-grid{ grid-template-columns: 1fr; }
  .messages{ width: calc(100% - 26px); padding-top: 26px; }
  .message.user .bubble{ max-width: 88%; }
  .composer{ min-height: 96px; border-radius: 20px; }
  .content-header{ flex-direction: column; }
  .header-actions{ width: 100%; justify-content: flex-start; }
  .search-box{ width: 100%; }
  .file-table-head{ display: none; }
  .file-row{ grid-template-columns: minmax(0, 1fr) 58px; gap: 8px; padding: 9px 10px; }
  .file-row > span{ display: none !important; }
  .row-actions{ grid-column: 2; grid-row: 1; }
  .file-row > .row-action{ grid-column: 2; grid-row: 1; justify-self: end; }
  .title-group{ align-items: flex-start; }
  .large-folder-icon{ width: 42px; height: 42px; border-radius: 11px; }
  .content-header h1{ font-size: 25px; }
}
.workspace-pin-icon{ flex: 0 0 auto; color: #6b6d78; }
.workspace-options-menu{ top: 31px; right: 1px; width: 205px; }

/* Guest / signed-out sidebar */
.guest-sidebar-content{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.guest-new-report{ background: var(--hover); margin-top: 2px; }
.guest-new-report:hover{ background: var(--hover-strong); }
.guest-nav, .guest-bottom-nav{ display: grid; gap: 2px; }
.guest-nav button, .guest-bottom-nav button{
  width: 100%;
  min-height: 36px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 13.5px;
  color: var(--text);
}
.guest-nav button:hover, .guest-bottom-nav button:hover{ background: var(--hover); }
.guest-nav button span, .guest-bottom-nav button span{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest-sidebar-spacer{ flex: 1; min-height: 24px; }
.guest-bottom-nav{
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.guest-external{ color: var(--faint); margin-left: auto; }
.guest-login-card{
  margin: 10px -9px -12px;
  padding: 15px 18px 16px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.62);
}
.guest-login-card strong{ display: block; font-size: 13px; margin-bottom: 8px; }
.guest-login-card p{ margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.guest-login-button{
  width: 100%;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.guest-login-button:hover{ background: var(--surface-soft); }

.login-modal{ text-align: left; }
.login-logo{ width: 34px; height: 34px; object-fit: contain; display: block; margin: 0 auto 12px; }
.login-modal h2{ text-align: center; }
.login-modal > p{ text-align: center; }
.login-password-label{ margin-top: 12px; }
.login-actions{ justify-content: space-between; }
.demo-auth-note{
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f7f7f8;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.45;
}


/* Guest navigation: keep the original PapiGPT menu style, but only expose New Report + Search Report. */
.guest-sidebar-simple .guest-new-report{ margin-bottom: 4px; }
.guest-nav-simple{ margin-top: 0; }
.guest-simple-footer{
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.guest-auth-buttons{ display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.guest-auth-buttons .guest-login-button, .guest-register-button{
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.guest-auth-buttons .guest-login-button{ border: 1px solid var(--line-strong); background: #fff; color: var(--text); }
.guest-register-button{ border: 1px solid var(--dark); background: var(--dark); color: #fff; }
.guest-register-button:hover{ background: var(--dark-hover); }
.guest-usage-summary{
  margin: 0 0 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11px;
}
.guest-usage-summary strong{ color: var(--text); font-size: 12px; }
.guest-simple-footer p{
  margin: 9px 3px 0;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.45;
}
.guest-recent-section{ margin-top: 10px; }
.auth-switch-link{
  width: 100%;
  margin: 11px 0 0;
  border: 0;
  background: transparent;
  color: #2f6feb;
  cursor: pointer;
  font-size: 12px;
  text-align: center;
}
.auth-switch-link:hover{ text-decoration: underline; }
.register-modal{ max-height: calc(100vh - 40px); overflow-y: auto; }
.report-search-modal{ width: min(560px, 100%); padding: 16px; }
.report-search-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.report-search-head h2{ margin-bottom: 4px; }
.report-search-head p{ margin-bottom: 12px; }
.report-search-input{
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  background: #fff;
}
.report-search-input input{
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  flex: 1;
}
.report-search-results{
  max-height: 330px;
  overflow: auto;
  display: grid;
  gap: 3px;
  margin-top: 10px;
}
.report-search-result{
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.report-search-result:hover{ background: var(--hover); }
.report-search-result > span{ min-width: 0; display: grid; gap: 2px; }
.report-search-result strong{ font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-search-result small{ color: var(--faint); font-size: 11px; }
.report-search-empty, .guest-search-note{ color: var(--faint); font-size: 12px; padding: 15px 8px; }
.guest-search-note{ border-top: 1px solid var(--line); margin-top: 8px; padding-bottom: 2px; }

/* Recent chats remains visible for signed-in members even before the first chat. */
.recent-chat-empty{
  padding: 7px 10px 9px;
  color: var(--text-muted, #8e8ea0);
  font-size: 12px;
}

@media (max-width: 700px){
  .report-options-grid{ grid-template-columns: 1fr; }
  .report-options-panel{ width: 100%; max-height: min(560px, calc(100vh - 175px)); border-radius: 16px; }
  .report-options-trigger span{ display: none; }
  .composer-tools .report-options-trigger{ padding: 0; width: 34px; }
}


/* Settings center */
.settings-backdrop{ position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 14px; background: rgba(0,0,0,.18); backdrop-filter: blur(2px); }
.settings-center{ width: min(820px, calc(100vw - 28px)); height: min(650px, calc(100vh - 28px)); display: grid; grid-template-columns: 230px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 22px 70px rgba(0,0,0,.18); }
.settings-rail{ min-width: 0; border-right: 1px solid var(--line); background: #fbfbfc; display: flex; flex-direction: column; overflow: hidden; }
.settings-rail-top{ padding: 14px 12px 9px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 8px; }
.settings-close{ width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.settings-close:hover{ background: var(--hover); }
.settings-search{ height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--muted); }
.settings-search input{ width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12px; color: var(--text); }
.settings-nav{ overflow-y: auto; padding: 2px 10px 14px; display: grid; align-content: start; gap: 2px; }
.settings-nav button{ width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; display: flex; align-items: center; gap: 10px; color: var(--text); cursor: pointer; text-align: left; font-size: 12.5px; }
.settings-nav button:hover{ background: var(--hover); }
.settings-nav button.active{ background: #ececf0; }
.settings-content{ min-width: 0; display: grid; grid-template-rows: auto 1fr; background: #fff; overflow: hidden; }
.settings-content-head{ min-height: 58px; padding: 19px 22px 13px; border-bottom: 1px solid var(--line); }
.settings-content-head h2{ margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.settings-scroll{ min-height: 0; overflow-y: auto; padding: 8px 22px 24px; }
.settings-section{ display: grid; }
.settings-row, .settings-copy-row, .settings-action-row, .settings-field, .settings-plan-card, .settings-note, .settings-identity{ min-height: 58px; padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; }
.settings-row > span:first-child, .settings-copy-row > span:first-child, .settings-action-row > span:first-child, .settings-field > span:first-child, .settings-plan-card > span:first-child, .settings-note > span:last-child, .settings-identity > span:last-child{ flex: 1; min-width: 0; display: grid; gap: 3px; }
.settings-row strong, .settings-copy-row strong, .settings-action-row strong, .settings-field strong, .settings-plan-card strong, .settings-note strong, .settings-identity strong{ font-size: 12.5px; font-weight: 500; }
.settings-row small, .settings-copy-row small, .settings-action-row small, .settings-field small, .settings-plan-card small, .settings-note small, .settings-identity small, .settings-subtitle small{ color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.settings-row-select select, .settings-copy-row select{ min-width: 120px; height: 34px; border: 0; background: transparent; color: var(--text); font-size: 12px; text-align: right; outline: 0; cursor: pointer; }
.settings-subtitle{ padding: 14px 0 4px; display: grid; gap: 3px; }
.settings-subtitle strong{ font-size: 12.5px; font-weight: 500; }
.settings-row-toggle{ position: relative; }
.settings-row-toggle input{ position: absolute; opacity: 0; pointer-events: none; }
.settings-switch{ width: 31px; height: 19px; padding: 2px; border-radius: 999px; background: #d1d5db; flex: 0 0 auto; transition: .18s ease; }
.settings-switch::after{ content: ''; display: block; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .18s ease; }
.settings-row-toggle input:checked + .settings-switch{ background: #3b82f6; }
.settings-row-toggle input:checked + .settings-switch::after{ transform: translateX(12px); }
.settings-note{ color: var(--text); }
.settings-note > svg{ color: var(--muted); flex: 0 0 auto; }
.settings-plan-card{ min-height: 76px; }
.settings-dark-button{ height: 35px; padding: 0 13px; border: 0; border-radius: 9px; background: var(--dark); color: #fff; cursor: pointer; font-size: 12px; }
.settings-dark-button:hover{ background: var(--dark-hover); }
.settings-action-row button{ height: 33px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; cursor: pointer; font-size: 12px; }
.settings-action-row button:hover{ background: var(--surface-soft); }
.settings-action-row.danger strong, .settings-action-row.danger button{ color: #d00e17; }
.settings-action-row.danger button{ border-color: #efb4b8; }
.settings-field{ align-items: flex-start; flex-direction: column; gap: 9px; }
.settings-field > span:first-child{ width: 100%; }
.settings-field input{ width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 10px; outline: 0; }
.settings-field input:focus{ border-color: #a9a9b3; box-shadow: 0 0 0 3px rgba(16,163,127,.08); }
.settings-security-actions{ display: flex; justify-content: flex-end; padding-top: 14px; }
.usage-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 12px 0 18px; border-bottom: 1px solid var(--line); }
.usage-grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.usage-grid > div{ min-height: 84px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fafafa; display: grid; align-content: center; gap: 4px; }
.usage-grid strong{ font-size: 20px; }
.usage-grid span{ color: var(--muted); font-size: 10.5px; }

.usage-section-title{
  padding-top: 18px;
}

.daily-settings-usage-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 0 16px;
}

.daily-settings-usage-card{
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #fafafa;
  display: grid;
  align-content: center;
  gap: 5px;
}

.daily-settings-usage-card > span{
  color: var(--muted);
  font-size: 10.5px;
}

.daily-settings-usage-card > strong{
  font-size: 22px;
  letter-spacing: -0.02em;
}

.daily-settings-usage-card > small{
  color: var(--muted);
  font-size: 10.5px;
}

.usage-progress-group{
  display: grid;
  gap: 14px;
  padding: 2px 0 18px;
  border-bottom: 1px solid var(--line);
}

.usage-progress-row{
  display: grid;
  gap: 7px;
}

.usage-progress-row > div:first-child{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.usage-progress-row strong{
  font-size: 11.5px;
  font-weight: 500;
}

.usage-progress-row span{
  color: var(--muted);
  font-size: 10.5px;
}

.usage-progress-track{
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: #ececf1;
  overflow: hidden;
}

.usage-progress-track > span{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #202123;
}
.settings-identity{ min-height: 72px; }
@media (max-width: 700px){
  .settings-backdrop{ padding: 0; }
  .settings-center{ width: 100vw; height: 100vh; border-radius: 0; grid-template-columns: 178px 1fr; }
  .settings-rail-top{ grid-template-columns: 32px 1fr; padding: 10px 8px 7px; }
  .settings-nav{ padding-inline: 6px; }
  .settings-nav button{ padding-inline: 8px; font-size: 11.5px; }
  .settings-content-head{ padding-inline: 16px; }
  .settings-scroll{ padding-inline: 16px; }
}
@media (max-width: 520px){
  .settings-center{ grid-template-columns: 58px 1fr; }
  .settings-search{ display: none; }
  .settings-rail-top{ grid-template-columns: 1fr; justify-items: center; }
  .settings-nav button{ justify-content: center; padding: 0; }
  .settings-nav button span{ display: none; }
  .settings-copy-row, .settings-row-select{ align-items: flex-start; flex-direction: column; gap: 7px; }
  .settings-row-select select, .settings-copy-row select{ min-width: 0; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; }
  .usage-grid, .usage-grid.two, .daily-settings-usage-grid{ grid-template-columns: 1fr; }
}

.auth-divider{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 10px;
  color: var(--faint);
  font-size: 11px;
}
.auth-divider::before, .auth-divider::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.google-auth-button{
  width: 100%;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.google-auth-button:hover{ background: var(--surface-soft); }
.google-auth-button:disabled, .login-actions button:disabled{ opacity: .6; cursor: wait; }


.login-password-row{
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.login-password-row .login-password-label{ margin-top: 0; }
.forgot-password-link{
  border: 0;
  background: transparent;
  color: #2f6feb;
  cursor: pointer;
  font-size: 11.5px;
  padding: 0;
}
.forgot-password-link:hover{ text-decoration: underline; }

.dev-reset-box{
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid #f1d38a;
  border-radius: 10px;
  background: #fff9e8;
  color: #5f4b13;
  font-size: 11px;
  line-height: 1.45;
}
.dev-reset-box strong{ display: block; margin-bottom: 4px; color: #40320c; }
.dev-reset-box p{ margin: 0 0 7px; text-align: left; color: #6f5b22; }
.dev-reset-box a{ color: #2f6feb; font-weight: 600; text-decoration: none; }
.dev-reset-box a:hover{ text-decoration: underline; }


.composer-attach-anchor{ position: absolute; left: 12px; bottom: calc(100% + 10px); z-index: 44; }
.composer-attach-panel{
  width: min(460px, calc(100vw - 40px));
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,.14), 0 3px 12px rgba(0,0,0,.07);
  padding: 10px;
  display: grid;
  gap: 6px;
}
.attach-action{
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 14px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}
.attach-action:hover{ background: var(--surface-soft); }
.attach-action-icon{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f4f4f7;
  color: var(--text);
  display: grid;
  place-items: center;
}
.attach-action-copy{ display: grid; gap: 2px; }
.attach-action-copy strong{ font-size: 13.5px; font-weight: 600; color: var(--text); }
.attach-action-copy span{ font-size: 12px; color: var(--muted); }

.report-attachments-strip{
  margin: 6px 2px 8px;
  border-top: 1px solid #f0f0f3;
  padding-top: 9px;
  display: grid;
  gap: 8px;
}
.report-attachments-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.report-attachments-head strong{ font-size: 11.5px; }
.report-attachments-head span{ font-size: 10.5px; color: var(--muted); }
.report-attachments-list{ display: flex; flex-wrap: wrap; gap: 7px; }
.attachment-chip{
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fcfcfe;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  cursor: pointer;
}
.attachment-chip:hover{ background: var(--surface-soft); }
.attachment-chip span{
  max-width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.attachment-chip small{ font-size: 10px; color: var(--muted); }
.attachment-chip b{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}
.attachment-chip b:hover{ background: var(--hover); color: var(--text); }

.attachment-mention-panel{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 78px;
  z-index: 42;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  overflow: hidden;
}
.attachment-mention-head{
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: #fafafb;
}
.attachment-mention-panel button{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}
.attachment-mention-panel button:hover{ background: var(--surface-soft); }
.attachment-mention-panel button span{
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px){
  .composer-attach-panel{ width: min(360px, calc(100vw - 30px)); }
  .report-attachments-head{ align-items: flex-start; flex-direction: column; }
  .attachment-mention-panel{ left: 8px; right: 8px; bottom: 76px; }
}

/* ==========================================================
   PapiGPT Online Production Base 1.0.0 — Native CSS bridge
   Uses the canonical pre-production PapiGPT visual language.
   No Bootstrap dependency.
   ========================================================== */
html, body{width:100%;}
a{color:inherit}.is-hidden{display:none!important}.muted{color:var(--muted)}
.native-link{color:inherit;text-decoration:none}.native-link:hover{text-decoration:none}
.sidebar-brand-link{text-decoration:none}.sidebar-brand-link:hover{text-decoration:none}
.primary-nav a, .sidebar-list a{width:100%;min-height:34px;border:0;background:transparent;border-radius:8px;padding:0 10px;display:flex;align-items:center;gap:9px;cursor:pointer;text-align:left;font-size:13.5px;color:var(--text);text-decoration:none}
.primary-nav a:hover, .sidebar-list a:hover{background:var(--hover)}
.nav-glyph{width:18px;display:inline-grid;place-items:center;color:#565869;flex:0 0 18px}
.sidebar-divider{height:1px;background:var(--line);margin:8px 7px}
.guest-actions{display:grid;gap:7px;padding:8px 7px 0}.guest-actions a{text-decoration:none}
.guest-login, .guest-signup{height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:650}
.guest-login{border:1px solid var(--line-strong);background:#fff}.guest-login:hover{background:var(--surface-soft)}
.guest-signup{border:1px solid var(--dark);background:var(--dark);color:#fff}.guest-signup:hover{background:var(--dark-hover)}
.logout-button{width:100%;height:34px;border:0;border-radius:8px;background:transparent;color:#565869;text-align:left;padding:0 10px;cursor:pointer}.logout-button:hover{background:var(--hover)}
.topbar-version{height:26px;padding:0 9px;border:1px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;color:var(--muted);font-size:10.5px;background:#fff}
.topbar-admin{height:30px;padding:0 11px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;text-decoration:none;display:inline-flex;align-items:center;font-size:12px}.topbar-admin:hover{background:var(--surface-soft)}
.chat-page.has-messages .welcome{display:none}.chat-page.has-messages .messages{display:block}
.messages{display:none}.messages.show{display:block}
.papi-message-meta{font-size:10.5px;color:var(--faint);margin-bottom:5px}.message-error{border:1px solid #f0c9c9;background:#fff7f7;color:#812a2a;border-radius:12px;padding:11px 13px;font-size:13px}
.composer-status{min-height:16px;padding:4px 4px 0;color:var(--faint);font-size:10.5px}
.attachment-strip{display:flex;flex-wrap:wrap;gap:6px;padding:4px 2px 7px}.attachment-strip:empty{display:none}
.attachment-mini{max-width:220px;border:1px solid var(--line);background:#fafafa;border-radius:999px;padding:5px 9px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.suggestion-grid button{color:var(--text)}
.report-option-checkbox{display:flex;align-items:center;gap:8px;min-height:36px}.report-option-checkbox input{width:16px;height:16px;accent-color:var(--dark)}
.report-option-checkbox label{font-size:12.5px;color:#373740;cursor:pointer}
.composer-tools .attach-button{font-size:20px;line-height:1}
.composer-tools .report-options-trigger{display:inline-grid}
.send-button{font-size:16px}
.main-disclaimer a{color:var(--muted)}
.ad-slot{width:min(760px,calc(100% - 32px));margin:18px auto;text-align:center;overflow:hidden}

/* Native auth / setup */
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:28px;background:#f7f7f8}
.auth-card{width:min(480px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 12px 36px rgba(0,0,0,.07)}
.auth-brand{display:grid;justify-items:center;text-align:center;margin-bottom:24px}.auth-brand img{width:48px;height:48px;object-fit:contain;margin-bottom:8px}.auth-brand strong{font-size:20px;letter-spacing:-.025em}.auth-brand span{font-size:11.5px;color:var(--muted);margin-top:2px}
.auth-card h1, .auth-card h2{margin:0 0 6px;letter-spacing:-.02em}.auth-card h1{font-size:24px}.auth-card h2{font-size:18px}.auth-subtitle{margin:0 0 20px;color:var(--muted);font-size:12.5px}
.native-alert{border:1px solid #d9e8e3;background:#f9fdfb;color:#315e51;border-radius:11px;padding:10px 12px;font-size:12px;line-height:1.5;margin:0 0 16px}.native-alert.error{border-color:#f0c9c9;background:#fff7f7;color:#812a2a}
.form-stack{display:grid;gap:13px}.field{display:grid;gap:6px}.field label{font-size:11.5px;font-weight:650;color:#45454d}.field input, .field select, .field textarea{width:100%;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--text);padding:10px 11px;outline:0;font-size:13px}.field input:focus, .field select:focus, .field textarea:focus{border-color:#a9a9b3;box-shadow:0 0 0 3px rgba(16,163,127,.08)}
.native-primary, .native-secondary, .native-google{width:100%;min-height:40px;border-radius:10px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:650;cursor:pointer;text-decoration:none}
.native-primary{border:1px solid var(--dark);background:var(--dark);color:#fff}.native-primary:hover{background:var(--dark-hover)}
.native-secondary, .native-google{border:1px solid var(--line-strong);background:#fff;color:var(--text)}.native-secondary:hover, .native-google:hover{background:var(--surface-soft)}
.auth-divider{height:1px;background:var(--line);margin:20px 0}.auth-section-label{font-size:12px;font-weight:700;color:#45454d;margin-bottom:10px}
.validation-list{margin:0 0 14px;padding:10px 12px 10px 28px;border:1px solid #f0c9c9;background:#fff7f7;border-radius:10px;color:#812a2a;font-size:12px}

/* Native Admin — based on the canonical PapiGPT admin visual language */
.admin-shell{min-height:100vh;background:#f7f7f5;color:#171717}.admin-sidebar{position:fixed;inset:0 auto 0 0;width:240px;background:#fff;border-right:1px solid #e3e3e0;padding:20px 14px;display:flex;flex-direction:column;z-index:30}.admin-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#171717;padding:0 8px 20px}.admin-brand img{width:34px;height:34px;object-fit:contain}.admin-brand-copy{display:grid;gap:1px}.admin-brand-copy strong{font-size:14px}.admin-brand-copy span{font-size:10px;color:#777}
.admin-nav{display:grid;gap:5px}.admin-nav a{border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;color:#555;font-size:13px;text-decoration:none}.admin-nav a:hover, .admin-nav a.active{background:#efefec;color:#171717;font-weight:650}.admin-side-bottom{margin-top:auto;display:grid;gap:8px;padding:8px}.admin-back{color:#555;text-decoration:none;font-size:12px;padding:8px;border-radius:8px}.admin-back:hover{background:#efefec}
.admin-main{margin-left:240px;min-height:100vh}.admin-topbar{display:flex;justify-content:space-between;align-items:center;padding:26px 30px 20px;gap:18px}.admin-topbar h1{margin:0;font-size:27px;letter-spacing:-.025em}.admin-topbar p{margin:4px 0 0;color:#717171;font-size:13px}.admin-status{font-size:11px;padding:5px 9px;border-radius:999px;background:#e7f6ec;color:#216e39}.admin-content{padding:0 30px 40px}.admin-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.admin-card, .admin-panel{background:#fff;border:1px solid #e0e0dc;border-radius:14px}.admin-card{padding:18px}.admin-card .label{font-size:11px;color:#777}.admin-card .value{font-size:26px;font-weight:750;margin-top:6px;letter-spacing:-.02em}.admin-card .note{font-size:11px;color:#8a8a8a;margin-top:3px}.admin-panel{padding:18px;margin-top:16px}.admin-panel h2{font-size:15px;margin:0 0 14px}.admin-panel pre{margin:0;padding:14px;border-radius:10px;background:#f7f7f5;border:1px solid #ecece8;overflow:auto;font-size:11.5px;line-height:1.5}
.admin-grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.admin-table-wrap{overflow:auto;border:1px solid #e4e4e0;border-radius:12px}.admin-table{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff}.admin-table th, .admin-table td{padding:11px 12px;text-align:left;border-bottom:1px solid #ecece8;white-space:nowrap}.admin-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:#777;background:#fafaf8}

/* Small production pages */
.production-page{width:min(1050px,calc(100% - 54px));margin:0 auto;padding:44px 0 80px}.production-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}.production-header h1{margin:0;font-size:28px;letter-spacing:-.035em}.production-header p{margin:5px 0 0;color:var(--muted);font-size:12.5px}

@media(max-width:900px){
 .app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;width:260px;transition:left .2s ease;box-shadow:8px 0 24px rgba(0,0,0,.08)}.app-shell.mobile-sidebar-open .sidebar{left:0}.main-panel{width:100%}.mobile-menu{display:inline-grid}.composer-dock, .sidebar-collapsed .composer-dock{left:50%;width:min(760px,calc(100vw - 24px))}.welcome{top:38%}.report-options-grid{grid-template-columns:1fr}.topbar{padding-left:8px}.admin-sidebar{position:static;width:auto;border-right:0;border-bottom:1px solid #e3e3e0}.admin-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-main{margin-left:0}.admin-cards{grid-template-columns:repeat(2,1fr)}.admin-grid-2{grid-template-columns:1fr}}
@media(max-width:620px){.suggestion-grid{grid-template-columns:1fr}.welcome{width:calc(100% - 28px)}.messages{width:calc(100% - 28px)}.admin-topbar{padding:18px;align-items:flex-start}.admin-content{padding:0 18px 30px}.admin-cards{grid-template-columns:1fr}.admin-nav{grid-template-columns:1fr 1fr}.auth-card{padding:22px}.production-page{width:calc(100% - 30px)}}

/* native compatibility marker */
/* PapiGPT Native Admin Fix 1 */
.admin-summary-list{display:grid;gap:0;border:1px solid #ecece8;border-radius:10px;overflow:hidden;background:#fff}
.admin-summary-list>div{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 12px;border-bottom:1px solid #ecece8;font-size:12px}
.admin-summary-list>div:last-child{border-bottom:0}
.admin-summary-list span{color:#777}
.admin-summary-list strong{font-weight:650;text-align:right;color:#282828}
.admin-body{background:#f7f7f5}


/* 20260925-010 — compact ChatGPT-style composer controls */
.composer{min-height:92px;border-radius:28px;padding:12px 12px 9px;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.composer textarea{min-height:38px;padding:1px 7px 5px;font-size:15px;line-height:1.45}
.composer-toolbar{min-height:38px;gap:10px}
.composer-tools, .composer-actions{display:flex;align-items:center;gap:3px}
.composer-actions{margin-left:auto}
.composer-plus-wrap, .response-mode-wrap{position:relative}
.attach-button, .voice-input-button, .send-button{width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer}
.composer-tools .attach-button{width:38px;height:38px;border-radius:50%;font-size:27px;font-weight:300;line-height:1;color:#252525;background:transparent}
.composer-tools .attach-button:hover, .voice-input-button:hover, .response-mode-button:hover{background:#f2f2f2}
.composer-plus-menu, .response-mode-menu{position:absolute;z-index:70;background:#fff;border:1px solid #dedee3;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.13);padding:6px}
.composer-plus-menu{left:0;bottom:calc(100% + 8px);width:270px}
.composer-plus-menu button, .composer-plus-menu a{width:100%;min-height:50px;border:0;border-radius:11px;background:transparent;color:#25252b;text-decoration:none;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:7px;padding:7px 9px;text-align:left;cursor:pointer}
.composer-plus-menu button:hover, .composer-plus-menu a:hover{background:#f4f4f4}
.composer-plus-menu strong{display:block;font-size:13px;font-weight:600}
.composer-plus-menu small{display:block;margin-top:2px;font-size:10.5px;color:#777781;line-height:1.25}
.composer-menu-icon{width:30px;height:30px;border:1px solid #e4e4e8;border-radius:9px;display:grid;place-items:center;font-size:17px}
.composer-plus-menu .report-options-trigger{height:auto;min-height:50px;padding:7px 9px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:7px}
.composer-plus-menu .report-options-trigger>span:nth-child(2){display:block}
.composer-plus-menu .report-options-trigger b{justify-self:end}
.response-mode-button{height:36px;border:0;border-radius:10px;background:transparent;color:#787878;padding:0 9px;display:flex;align-items:center;gap:5px;cursor:pointer;font-size:14px}
.response-mode-chevron{font-size:14px;transform:translateY(-1px)}
.response-mode-menu{right:0;bottom:calc(100% + 8px);width:220px}
.response-mode-menu button{width:100%;border:0;border-radius:10px;background:transparent;display:grid;gap:2px;padding:9px 10px;text-align:left;cursor:pointer;color:#24242a}
.response-mode-menu button:hover, .response-mode-menu button[aria-checked="true"]{background:#f3f3f3}
.response-mode-menu strong{font-size:13px}.response-mode-menu small{font-size:10.5px;color:#777781}
.voice-input-button{background:transparent;color:#202124;padding:8px}
.voice-input-button svg{width:21px;height:21px;fill:currentColor}
.voice-input-button.listening{background:#eef4ff;color:#2f7cf6;box-shadow:0 0 0 3px rgba(47,124,246,.12)}
.send-button{background:#3b82f6;color:#fff;font-size:21px;line-height:1;transition:transform .12s ease,background .12s ease,opacity .12s ease}
.send-button:hover:not(:disabled){background:#2f72df;transform:scale(1.03)}
.send-button:disabled{background:#d5d7dc;color:#fff;opacity:1;cursor:default}
.composer-status{min-height:0;padding:0 7px;color:#777781;font-size:10.5px}
.composer-status:not(:empty){min-height:16px;padding-top:4px}
@media(max-width:600px){
  .composer{min-height:86px;border-radius:24px;padding:10px 9px 8px}
  .composer textarea{font-size:16px;min-height:36px;padding-left:8px}
  .response-mode-button{padding:0 6px;font-size:13px}
  .composer-plus-menu{width:min(270px,calc(100vw - 30px))}
  .response-mode-menu{right:-45px;width:210px}
  .attach-button, .voice-input-button, .send-button{width:36px;height:36px}
}


/* 20260925-011 — response mode followed by Report Options on the right side */
.composer-actions{gap:3px}
.composer-options-button{height:36px;min-width:0;border:0;border-radius:10px;background:transparent;color:#666a73;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;font:inherit}
.composer-options-button:hover, .composer-options-button.active{background:#f2f2f2;color:#252525}
.composer-actions .composer-options-button span{display:inline!important;font-size:13px;font-weight:500;line-height:1}
.composer-options-button b{min-width:17px;height:17px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#202123;color:#fff;font-size:9.5px;font-weight:700;line-height:1}
@media(max-width:600px){
  .composer-actions{gap:1px}
  .composer-options-button{height:36px;padding:0 4px;gap:4px}
  .composer-actions .composer-options-button span{display:inline!important;font-size:12px}
  .composer-options-button b{min-width:16px;height:16px;padding:0 4px;font-size:9px}
}


/* 20260926-010 — canonical composer AI routing controls */
.composer-tools{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.papi-ai-routing-controls{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.papi-ai-routing-controls.is-empty{display:none}
.papi-runtime-select-wrap{position:relative;display:inline-flex;align-items:center;min-width:0}
.papi-runtime-select-wrap.is-empty{display:none}
.papi-runtime-select{height:34px;max-width:180px;min-width:92px;padding:0 28px 0 11px;border:1px solid var(--line-strong);border-radius:10px;background-color:var(--surface);color:var(--text);font-size:13px;line-height:1;cursor:pointer;outline:0;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 13px) 14px,calc(100% - 9px) 14px;background-size:4px 4px,4px 4px;background-repeat:no-repeat;white-space:nowrap;text-overflow:ellipsis}
.papi-runtime-select:hover{background-color:var(--surface-soft);border-color:#cfcfd7}
.papi-runtime-select:focus-visible{border-color:#9f9faa;box-shadow:0 0 0 2px rgba(16,163,127,.16)}
.papi-runtime-select:disabled{opacity:.55;cursor:not-allowed}
.composer-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.response-mode-button{white-space:nowrap}
@media (max-width:760px){.composer-toolbar{align-items:flex-end}.composer-tools{gap:6px;max-width:calc(100% - 92px)}.papi-ai-routing-controls{gap:5px}.papi-runtime-select{min-width:78px;max-width:130px;height:32px;padding-left:9px;font-size:12px}.composer-actions{flex:0 0 auto}}
@media (max-width:480px){.composer-toolbar{flex-wrap:wrap}.composer-tools{max-width:100%;width:100%}.papi-ai-routing-controls{max-width:100%}.papi-runtime-select{max-width:145px}.composer-actions{width:100%;justify-content:flex-end}}


/* 20260926-011 — unified composer control system */
.composer-toolbar{display:flex;align-items:center;gap:10px}
.composer-tools{display:flex;align-items:center;flex:0 0 auto;gap:4px;min-width:0}
.composer-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-left:auto;min-width:0;flex-wrap:nowrap}
.papi-ai-routing-controls{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;flex-wrap:nowrap}
.papi-runtime-select, .response-mode-button, .composer-options-button{height:36px;min-height:36px;border:1px solid var(--line-strong);border-radius:11px;background-color:var(--surface);color:var(--text);font-size:13px;font-weight:500;line-height:1;padding:0 30px 0 12px;box-sizing:border-box;outline:0;box-shadow:none}
.papi-runtime-select{min-width:92px;max-width:180px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 14px) 15px,calc(100% - 10px) 15px;background-size:4px 4px,4px 4px;background-repeat:no-repeat;white-space:nowrap;text-overflow:ellipsis}
.response-mode-button{min-width:96px;display:inline-flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;padding-right:11px}
.response-mode-chevron{font-size:11px;color:var(--muted)}
.composer-options-button{padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.papi-runtime-select:hover, .response-mode-button:hover, .composer-options-button:hover{background-color:var(--surface-soft);border-color:#cfcfd7}
.papi-runtime-select:focus-visible, .response-mode-button:focus-visible, .composer-options-button:focus-visible{border-color:#9f9faa;box-shadow:0 0 0 2px rgba(16,163,127,.16)}
.voice-input-button, .send-button{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:50%;box-sizing:border-box;display:inline-grid;place-items:center;align-self:center}
.composer-options-button b{flex:0 0 auto}
.write-language select, .write-controls select, .papi-compose-continuation select{height:36px!important;border:1px solid var(--line-strong)!important;border-radius:11px!important;background-color:var(--surface)!important;color:var(--text)!important;font-size:13px!important;font-weight:500!important;padding:0 30px 0 12px!important;box-sizing:border-box!important}
.write-composer-foot, .compose-foot{align-items:center!important}
.write-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-left:auto}
.write-controls label, .write-language, .compose-foot label{display:inline-flex;align-items:center;gap:6px}
@media (max-width:760px){.composer-toolbar{align-items:flex-end}.composer-actions{gap:5px;flex-wrap:wrap;justify-content:flex-end}.papi-ai-routing-controls{gap:5px;flex-wrap:wrap;justify-content:flex-end}.papi-runtime-select, .response-mode-button, .composer-options-button{height:34px;min-height:34px;font-size:12px}.voice-input-button, .send-button{width:34px;height:34px;min-width:34px;min-height:34px}}
@media (max-width:520px){.composer-toolbar{flex-wrap:nowrap}.composer-tools{align-self:flex-end}.composer-actions{max-width:calc(100% - 48px);margin-left:auto}.papi-runtime-select{min-width:74px;max-width:118px}.response-mode-button{min-width:82px}.composer-options-button span{display:none!important}.composer-options-button{width:36px;padding:0}.papi-ai-routing-controls{max-width:100%}}


/* 20260927-001 mobile/responsive + shared attachment/library components */
.report-source-actions{display:flex;gap:8px;flex-wrap:wrap}.report-source-row{display:flex;align-items:center;gap:12px;justify-content:space-between;min-width:0}.report-source-file{min-width:0;flex:1}.report-source-label{width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.report-source-file small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.report-source-row-actions{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.library-picker-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:min(78vh,720px);box-shadow:0 24px 70px rgba(0,0,0,.2)}.library-picker-dialog::backdrop{background:rgba(0,0,0,.35)}.library-picker-shell{display:flex;flex-direction:column;max-height:min(78vh,720px)}.library-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid #e5e5e5}.library-picker-head div{display:grid;gap:4px}.library-picker-head small{color:var(--muted)}.library-picker-head>button{border:0;background:transparent;font-size:24px}.library-picker-search{padding:14px 20px;display:grid;gap:6px}.library-picker-search input{height:42px;border:1px solid #d9d9df;border-radius:10px;padding:0 12px}.library-picker-results{overflow:auto;padding:0 20px 12px;display:grid;gap:8px}.library-picker-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #e1e1e6;border-radius:12px;cursor:pointer}.library-picker-file{display:grid;gap:3px;min-width:0;flex:1}.library-picker-file strong,.library-picker-file small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-picker-file small,.library-picker-row em{color:var(--muted);font-size:12px}.library-picker-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid #e5e5e5}.admin-like-button{border:1px solid #d5d5db;border-radius:10px;background:#fff;padding:9px 14px}.admin-like-button.primary{background:#202123;color:#fff;border-color:#202123}
@media(max-width:760px){
 html,body{min-height:100%;overflow-x:hidden}.app-shell{display:block!important}.topbar{height:var(--papi-mobile-header-height,64px);position:sticky;top:0;background:#fff;z-index:30;border-bottom:1px solid #ececf1;padding:0 var(--papi-mobile-content-padding,20px);display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center}.topbar .mobile-menu{justify-self:start}.topbar-title{justify-self:center;font-weight:700;font-size:20px}.topbar-auth,.topbar-admin{justify-self:end}.topbar-signup{display:none!important}.topbar-login{background:#202123!important;color:#fff!important;border-radius:999px!important;padding:10px 18px!important;text-decoration:none}.sidebar{position:fixed!important;inset:0 auto 0 0!important;width:min(var(--papi-mobile-drawer-width,310px),88vw)!important;transform:translateX(-105%);transition:transform .2s ease;z-index:80;box-shadow:16px 0 50px rgba(0,0,0,.15)}.app-shell.mobile-sidebar-open .sidebar{transform:translateX(0)}.main-panel{min-width:0!important}.chat-page{padding-inline:var(--papi-mobile-content-padding,20px)!important}.welcome{min-height:calc(100svh - 360px);display:flex;flex-direction:column;justify-content:center;transform:translateY(var(--papi-mobile-welcome-offset,0));padding-top:18px!important}.welcome-logo{display:none!important}.welcome h1{font-size:clamp(30px,8vw,42px)!important;text-align:center}.welcome p{text-align:center}.suggestion-grid{grid-template-columns:1fr!important;width:100%}.composer-dock{position:fixed!important;left:var(--papi-mobile-composer-side,20px)!important;right:var(--papi-mobile-composer-side,20px)!important;bottom:calc(var(--papi-mobile-composer-bottom,20px) + env(safe-area-inset-bottom,0px) + var(--papi-mobile-safe-bottom,12px))!important;width:auto!important;transform:none!important;z-index:45}.composer{border-radius:var(--papi-mobile-composer-radius,28px)!important;max-height:var(--papi-mobile-composer-max-height,340px);padding:14px 14px 10px!important;box-shadow:0 8px 34px rgba(0,0,0,.09)}.composer textarea{font-size:var(--papi-mobile-textarea-font,16px)!important;max-height:210px}.composer-toolbar{align-items:flex-end}.composer-actions{gap:8px}.voice-input-button,.send-button{width:var(--papi-mobile-action-size,48px)!important;height:var(--papi-mobile-action-size,48px)!important}.response-mode-wrap,.composer-options-button,[data-papi-provider-selector],[data-papi-model-selector]{max-width:112px}.report-options-panel{position:fixed!important;left:12px!important;right:12px!important;top:calc(var(--papi-mobile-header-height,64px) + 8px)!important;bottom:calc(110px + env(safe-area-inset-bottom,0px))!important;width:auto!important;max-height:none!important;overflow:auto}.report-options-grid{grid-template-columns:1fr!important}.main-disclaimer{display:none}.report-source-row{align-items:flex-start}.report-source-row-actions{flex-wrap:wrap}.library-picker-dialog{width:calc(100vw - 20px);max-height:82svh}.library-picker-shell{max-height:82svh}
}