/* Inbox-specific layout on top of the shared --aw- tokens (static/css/main.css). */

/* Lightmorphic style, applied to the Inbox screens - see
   docs/lightmorphic-style.md.

   Solid panels with a hairline border and a soft neutral shadow, laid out
   as unequal bento-style blocks. Scoped entirely to this file and to
   :is(.aw-shell, .aw-auth-card), so app/static/css/main.css and its shared
   tokens (also used by real visitors on the public conversation page) are
   untouched. The accent colour is whichever of the 16 the operator picked,
   so nothing here assumes one hardcoded brand colour. */

:is(.aw-shell, body:has(.aw-auth-card)) {
  --aw-panel: #ffffff;
  --aw-panel-border: rgba(24, 24, 40, 0.10);
  --aw-shadow-panel: 0 1px 2px rgba(24, 24, 40, 0.05), 0 8px 24px -16px rgba(24, 24, 40, 0.18);
  --aw-radius: 14px;
  --aw-panel-radius: 22px;
  --aw-elevation-1: var(--aw-shadow-panel);
}
@media (prefers-color-scheme: dark) {
  :is(.aw-shell, body:has(.aw-auth-card)) {
    --aw-panel: #1b1d29;
    --aw-panel-border: rgba(255, 255, 255, 0.09);
    --aw-shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -16px rgba(0, 0, 0, 0.6);
  }
}
/* The manual [data-theme] toggle (app/inbox/static/js/theme.js) overrides
   whatever prefers-color-scheme says - same light/dark panel values as the
   media query above, just keyed off the attribute instead. */
:root[data-theme="dark"]
:is(.aw-shell, body:has(.aw-auth-card)) {
  --aw-panel: #1b1d29;
  --aw-panel-border: rgba(255, 255, 255, 0.09);
  --aw-shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -16px rgba(0, 0, 0, 0.6);
  --aw-radius: 14px;
  --aw-panel-radius: 22px;
  --aw-elevation-1: var(--aw-shadow-panel);
}
:root[data-theme="light"] 
:is(.aw-shell, body:has(.aw-auth-card)) {
  --aw-panel: #ffffff;
  --aw-panel-border: rgba(24, 24, 40, 0.10);
  --aw-shadow-panel: 0 1px 2px rgba(24, 24, 40, 0.05), 0 8px 24px -16px rgba(24, 24, 40, 0.18);
  --aw-radius: 14px;
  --aw-panel-radius: 22px;
  --aw-elevation-1: var(--aw-shadow-panel);
}


/* Every card-like surface becomes a solid panel: a hairline border and
   one soft neutral shadow.
   Higher specificity than main.css's plain .aw-card rule, so no
   !important needed - and it never applies outside the Inbox/auth
   screens, since main.css's own .aw-card rule is the only one the public
   conversation page can ever match. */
:is(.aw-shell, .aw-auth-card) .aw-card, .aw-auth-card.aw-card {
  background: var(--aw-panel);
  border: 1px solid var(--aw-panel-border);
  border-radius: var(--aw-panel-radius);
  box-shadow: var(--aw-shadow-panel);
}

/* "Forgot your password?" under the login form. Same quiet, centred
   treatment as the client portal's .auth-card__aside - one flow, so it
   should look like one flow from either side. */
.aw-auth-aside {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--aw-text-muted);
}

body { padding: 20px; }

/* On anything wider than a tablet, the Inbox was stretching edge-to-edge -
   uncomfortably wide table rows and cards. Centered at 3/4 width fixes
   that without touching phones, where full width is already correct. */
@media (min-width: 900px) {
  body { max-width: 75%; margin: 0 auto; }
}

.aw-auth-card { max-width: 360px; margin: 60px auto; padding: 24px; }
.aw-flash { padding: 10px 14px; border-radius: var(--aw-radius); }
.aw-flash-error { background: var(--aw-error-bg); color: var(--aw-error); }
.aw-flash-info { background: var(--aw-success-bg); color: var(--aw-success); }

/* The persistent sidebar shell itself (aw-shell / aw-sidebar-* / aw-shell-
   main) moved to the shared app/static/css/shell.css when admin and Inbox
   navigation merged into one sidebar - see base/_sidebar.html. Only this
   body-level override stays here: it cancels the pre-login screens'
   padding/centering (above) whenever a logged-in shell page renders,
   and those body rules are Inbox-specific, not shared. */
body:has(.aw-shell) { padding: 0; max-width: none; margin: 0; }

.aw-back-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-bottom: 8px; padding: 0; border-radius: 50%;
  background: transparent; color: var(--aw-primary); box-shadow: none;
}
.aw-back-link:hover { background: var(--aw-primary-container); box-shadow: none; }

.aw-card { padding: 16px; margin-bottom: 16px; }

.aw-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
/* Override the global select{width:100%} - these two should sit side by
   side sized to their own content, not stack full-width (100% + 100% in
   a flex-wrap row forces a wrap onto separate lines). */
.aw-filters select { width: auto; padding: 6px 10px; border-radius: var(--aw-radius); border: 1px solid var(--aw-outline); background: var(--aw-surface); color: var(--aw-text); }

.aw-table { width: 100%; border-collapse: collapse; }
.aw-table th, .aw-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--aw-outline-variant); }
.aw-table th { color: var(--aw-on-surface-variant); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.aw-status-human_needed { background: var(--aw-warning-bg); }

.aw-flag-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.aw-flag-actions form { display: inline; }
/* "Export as plain Markdown" is a plain GET link (no form to submit),
   but reads as a stray bit of text sitting next to real buttons -
   styled to match them exactly so the whole row reads as one set of
   actions. */
.aw-flag-actions a {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: var(--aw-radius);
  background: var(--aw-primary); color: var(--aw-on-primary);
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.aw-flag-actions a:hover { background: var(--aw-primary-hover); }

/* A secondary, lower-emphasis action sitting next to a primary button
   (e.g. "Remove" next to "Upload") - smaller and paler than the default
   solid-primary button, not competing with it for attention. */
.aw-btn-subtle {
  padding: 6px 12px; font-size: 13px;
  background: var(--aw-surface-variant); color: var(--aw-text-muted);
}

/* The signed-in Account page: two ordinary cards in one consistent column.
   It used to put the password form in .aw-auth-card - the login screen's
   narrow centred card - next to a full-width identity card, so one page
   spoke two layout languages at once. */
.aw-account-card { max-width: 42rem; }
.aw-btn-subtle:hover { background: var(--aw-surface-variant); filter: brightness(0.95); color: var(--aw-text); }

.aw-export-password {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 18px; letter-spacing: 0.04em; text-align: center;
  padding: 12px; border: 1px solid var(--aw-outline-variant); border-radius: var(--aw-radius);
  background: var(--aw-surface-variant); color: var(--aw-text);
  /* A 32-char TOTP secret or a run of backup codes is one unbroken token -
     without this it overflows past the card's edge instead of wrapping. */
  word-break: break-all;
  overflow-wrap: break-word;
}

/* Same bubble shape/color/alignment as the visitor-facing conversation
   page (.aw-turn base rules live in static/css/main.css) - #aw-messages
   just needs to actually be a flex column for align-self: flex-end/
   flex-start to have anything to work against, which the plain .aw-card
   it also carries doesn't provide on its own. */
#aw-messages { display: flex; flex-direction: column; gap: 10px; }
.aw-ts { color: inherit; opacity: 0.7; font-size: 11px; }

/* Reply box, canned-message picker, and Send as ordered flex items (not
   just DOM order) so mobile can reorder the picker above the textarea -
   thumbs need it out of the way of typing there - while it stays with
   Send, sized to its own content, above tablet width. */
.aw-compose-form { display: flex; flex-direction: column; }
#aw-reply-text { order: 1; }
#aw-canned-select { order: 2; margin-top: 10px; width: auto; align-self: flex-end; }
.aw-compose-actions { order: 3; margin-top: 10px; display: flex; justify-content: flex-end; }

@media (max-width: 760px) {
  #aw-canned-select { order: 0; margin-top: 0; margin-bottom: 10px; width: 100%; align-self: stretch; }
}

.aw-field-error { display: block; color: var(--aw-error); font-size: 13px; margin-top: 2px; }

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"], select {
  font: inherit;
  font-size: 0.9375rem;
  min-height: 2.5rem;
  padding: 8px 12px;
  border: 1px solid var(--aw-outline);
  border-radius: var(--aw-radius);
  background: var(--aw-surface);
  color: var(--aw-text);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Single-line inputs are capped: a name or an email in a box the width of
   the whole panel is a caret hunt, not a form (same 30rem cap the admin
   side uses). Textareas keep full width - prose genuinely uses it. */
input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
  max-width: 30rem;
}
textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--aw-primary);
  box-shadow: 0 0 0 2px var(--aw-primary-container);
}
/* select gets its own rule with an explicit outline-color too - some
   browsers/OS themes (particularly native <select> rendering on Linux)
   paint their own focus ring in the system accent color underneath our
   box-shadow, which can show as a stray brownish/amber line around the
   box instead of the app's actual highlight color. */
select:focus, select:focus-visible {
  outline: 2px solid var(--aw-primary);
  outline-offset: 1px;
  border-color: var(--aw-primary);
  box-shadow: 0 0 0 2px var(--aw-primary-container);
}

/* Solid button: softly rounded, flat, no border - not a full-pill
   stadium shape. */
button, input[type="submit"] {
  min-height: 2.5rem;
  padding: 0 1rem;
  border: none;
  border-radius: var(--aw-radius);
  background: var(--aw-primary);
  color: var(--aw-on-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
/* One control height across the whole backend (matches the admin side's
   --sm-control-height) - deliberately smaller variants opt back out below. */
.aw-icon-btn, .aw-back-link, .aw-code-copy, .aw-settings-tab { min-height: 0; }
.aw-btn-subtle { min-height: 2rem; }
button:hover, input[type="submit"]:hover { background: var(--aw-primary-hover); }
button:focus-visible, input[type="submit"]:focus-visible { outline: 2px solid var(--aw-primary); outline-offset: 2px; }

/* Conversation list row actions: small icon buttons, and an inline (not a
   native confirm() popup) delete confirmation - clicking the trash icon
   swaps it in place for a checkmark that submits the delete on a second
   click. The confirm button reuses .aw-icon-btn's exact size, so nothing
   in the row reflows or shifts position between the two clicks; clicking
   anywhere outside an open confirmation cancels it back to the trash icon
   (see inbox.js) rather than needing a separate cancel button that would
   widen the row again. */
.aw-row-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.aw-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  background: transparent; color: var(--aw-on-surface-variant);
  border: none; cursor: pointer; text-decoration: none;
}
.aw-icon-btn:hover { background: var(--aw-surface-variant); color: var(--aw-text); box-shadow: none; }
.aw-delete-wrap { position: relative; display: inline-flex; align-items: center; }
.aw-delete-confirm { display: none; margin: 0; }
.aw-delete-wrap.aw-confirming .aw-delete-trigger { display: none; }
.aw-delete-wrap.aw-confirming .aw-delete-confirm { display: block; }
.aw-delete-yes { background: var(--aw-error-bg); color: var(--aw-error); }
.aw-delete-yes:hover { background: var(--aw-error-bg); filter: brightness(0.92); color: var(--aw-error); box-shadow: none; }

/* Appearance picker (light/dark/auto + 16 highlight colours) - fixed so it
   appears consistently in the same spot on every Inbox page regardless of
   that page's own layout. See app/inbox/static/js/theme.js. */
/* The appearance picker's own styles moved to the shared
   static/css/shell.css when it stopped being Inbox-only and became the
   one control for the whole product, anchored in the sidebar. */

/* Settings: left-hand menu, one section shown at a time on the right -
   see app/inbox/static/js/settings.js. */
/* A second bento pair, this time within the content panel itself: a small
   nav tile next to the larger section tile, echoing the sidebar/main-
   content pairing at the page level. */
.aw-settings { display: flex; gap: 20px; align-items: flex-start; }
.aw-settings-nav {
  flex-shrink: 0; width: 200px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 12px;
  background: var(--aw-panel);
  border: 1px solid var(--aw-panel-border); border-radius: var(--aw-panel-radius); box-shadow: var(--aw-shadow-panel);
  padding: 10px;
  box-sizing: border-box;
}
.aw-settings-tab {
  text-align: left; padding: 10px 14px; border-radius: var(--aw-radius);
  background: transparent; color: var(--aw-text); font-weight: 500;
}
.aw-settings-tab:hover { background: var(--aw-surface-variant); box-shadow: none; }
.aw-settings-tab.aw-active { background: var(--aw-primary-container); color: var(--aw-on-primary-container); }
.aw-settings-content { flex: 1; min-width: 0; }
.aw-settings-section h1 { margin-top: 0; }

@media (max-width: 760px) {
  .aw-settings { flex-direction: column; }
  .aw-settings-nav { width: 100%; flex-direction: row; flex-wrap: wrap; position: static; }
}

/* A field whose current "is something already saved here" state isn't
   obvious just from a blank-looking password/API-key input (a placeholder
   alone reads as empty at a glance) - one explicit line above the form
   removes the guesswork instead of making the operator infer it. */
.aw-status-line { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; margin: 0 0 12px; }
.aw-status-set { color: var(--aw-success); }
.aw-status-unset { color: var(--aw-text-muted); }

/* Site detail (read-only) screen. */
.aw-detail-list { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; margin: 16px 0; }
.aw-detail-list dt { color: var(--aw-text-muted); font-size: 13px; font-weight: 500; }
.aw-detail-list dd { margin: 0; }
@media (max-width: 600px) {
  .aw-detail-list { grid-template-columns: 1fr; gap: 2px 0; }
  .aw-detail-list dt { margin-top: 8px; }
}

/* Embed snippet - a code block with a copy button pinned to its own
   top-right corner rather than sitting in the normal button-row flow,
   since it acts on the code directly above/around it rather than being
   one more action among several. */
.aw-code-box { position: relative; }
.aw-code-box pre {
  margin: 0; padding: 16px 90px 16px 16px; border-radius: var(--aw-radius);
  background: var(--aw-surface-variant); overflow-x: auto;
}
.aw-code-box code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px; color: var(--aw-text); white-space: pre-wrap; word-break: break-all;
}
.aw-code-copy {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 12px; font-weight: 500;
  background: var(--aw-surface); color: var(--aw-text-muted); box-shadow: var(--aw-elevation-1);
}
.aw-code-copy:hover { background: var(--aw-surface); color: var(--aw-text); box-shadow: var(--aw-elevation-1); }