/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/design-system/tokens/fonts.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
/* ── Soul Health Messaging · Webfonts ─────────────────────────────────────────
   Display serif : Newsreader  — warm, editorial headlines (marketing, big numbers)
   UI sans       : Hanken Grotesk — humanist grotesque for product UI + body
   Mono          : JetBrains Mono — timestamps, IDs, code, message metadata
   Loaded from Google Fonts. These are the brand's chosen faces (generated for
   this system), not substitutions. Swap the @import for self-hosted @font-face
   files if you need offline / production hosting. */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..500&family=JetBrains+Mono:wght@400;500;600&display=swap');

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/design-system/tokens/colors.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
/* ── Soul Health Messaging · Colors ───────────────────────────────────────────
   Brand mood: a calm "consultation green" on warm ivory paper. Trustworthy,
   clinical-but-human. Warm neutrals carry a faint brown tint (never cold gray).
   Green nods to health + WhatsApp heritage without copying either. */

:root {
  /* ── Primary · Consultation Green ───────────────────────────────── */
  --green-50:  #ECF6F1;
  --green-100: #D3EBE0;
  --green-200: #A9D8C4;
  --green-300: #74C0A3;
  --green-400: #41A580;
  --green-500: #1F8A66;  /* primary */
  --green-600: #167254;
  --green-700: #135C44;
  --green-800: #114836;
  --green-900: #0D3527;

  /* ── Warm Neutrals · Ivory paper + brown-tinted ink ─────────────── */
  --ivory:     #FAF8F3;  /* app background */
  --paper:     #FFFFFF;  /* raised cards */
  --sand-50:   #F5F2EA;  /* subtle fills, hover surfaces */
  --sand-100:  #EFEBE0;
  --sand-200:  #E5DFD1;  /* hairline borders */
  --sand-300:  #D6CEBC;
  --clay-400:  #B4A98F;  /* disabled / faint */
  --ink-300:   #A39B8B; /* placeholder text */
  --ink-400:   #8C8475;  /* muted text */
  --ink-500:   #6E6657;  /* secondary text */
  --ink-600:   #534C3E;
  --ink-700:   #3A3429;  /* strong body */
  --ink-800:   #292419;  /* headings */
  --ink-900:   #1C1813;  /* near-black, warm */

  /* ── Warm accent · Clay (use sparingly: highlights, marketing) ──── */
  --clay-50:   #FBEFE9;
  --clay-100:  #F4D9CC;
  --clay-400a: #D98E6E;
  --clay-500:  #C26B47;
  --clay-600:  #A4542F;

  /* ── Channel colors (messaging integrations) ────────────────────── */
  --channel-whatsapp: #25D366;
  --channel-whatsapp-ink: #0B7A3B;
  --channel-sms:      #5B8DEF;
  --channel-instagram:#D946A0;

  /* ── Semantic ───────────────────────────────────────────────────── */
  --success:      #1F8A66;
  --success-bg:   #ECF6F1;
  --success-ink:  #135C44;
  --warning:      #C98A1E;
  --warning-bg:   #FBF1DC;
  --warning-ink:  #8A5B0E;
  --danger:       #CB4334;
  --danger-bg:    #FBE7E3;
  --danger-ink:   #8F2A1F;
  --info:         #2F6FB0;
  --info-bg:      #E6EFF8;
  --info-ink:     #1E4D80;

  /* ── Semantic aliases (use these in product UI) ─────────────────── */
  --bg-app:         var(--ivory);
  --surface-card:   var(--paper);
  --surface-sunken: var(--sand-50);
  --surface-hover:  var(--sand-50);
  --surface-active: var(--sand-100);

  --border-subtle:  var(--sand-200);
  --border-strong:  var(--sand-300);
  --border-focus:   var(--green-500);

  --text-heading:   var(--ink-800);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-on-brand:  #FFFFFF;
  --text-link:      var(--green-600);

  --brand:          var(--green-500);
  --brand-hover:    var(--green-600);
  --brand-active:   var(--green-700);
  --brand-soft:     var(--green-50);
  --brand-soft-ink: var(--green-700);

  /* Selection + focus ring */
  --focus-ring:     0 0 0 3px color-mix(in srgb, var(--green-500) 28%, transparent);
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/design-system/tokens/typography.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
/* ── Soul Health Messaging · Typography ───────────────────────────────────────
   Type pairing: Newsreader (serif display) over Hanken Grotesk (UI sans).
   Marketing leans on the serif; the product UI is almost entirely sans.
   Scale is a ~1.2 minor-third, optically tuned. */

:root {
  /* Families */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Font sizes (px-based rem scale, 16px root) */
  --text-2xs:  0.6875rem; /* 11px — micro labels, timestamps */
  --text-xs:   0.75rem;   /* 12px — meta, captions */
  --text-sm:   0.8125rem; /* 13px — dense UI, secondary */
  --text-base: 0.9375rem; /* 15px — body / default UI */
  --text-md:   1rem;      /* 16px — comfortable body */
  --text-lg:   1.125rem;  /* 18px — lead, card titles */
  --text-xl:   1.375rem;  /* 22px — section titles */
  --text-2xl:  1.75rem;   /* 28px — page titles */
  --text-3xl:  2.25rem;   /* 36px — display small */
  --text-4xl:  3rem;      /* 48px — display */
  --text-5xl:  3.75rem;   /* 60px — hero */

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em; /* uppercase eyebrows */

  /* Semantic roles */
  --display-font:  var(--font-serif);
  --heading-font:  var(--font-sans);
  --body-font:     var(--font-sans);
  --mono-font:     var(--font-mono);
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/design-system/tokens/spacing.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
/* ── Soul Health Messaging · Spacing ──────────────────────────────────────────
   4px base grid. Use these for padding, gaps, and margins so rhythm stays
   consistent across product + marketing surfaces. */

:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-7:   2rem;     /* 32 */
  --space-8:   2.5rem;   /* 40 */
  --space-9:   3rem;     /* 48 */
  --space-10:  4rem;     /* 64 */
  --space-11:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 */

  /* Common layout measures */
  --container:    1180px;  /* marketing max width */
  --measure:      62ch;    /* readable prose width */
  --sidebar-w:    264px;   /* app rail */
  --conv-list-w:  340px;   /* inbox conversation column */
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/design-system/tokens/effects.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
/* ── Soul Health Messaging · Effects ──────────────────────────────────────────
   Corner radii, elevation (soft, warm-tinted shadows — never harsh black),
   and motion. The brand reads "light": shadows are low-contrast and diffuse,
   borders do most of the separation work. */

:root {
  /* Radii — rounded but restrained; pills reserved for chips/avatars */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* Elevation — warm shadows tinted toward the ink, low alpha */
  --shadow-xs:  0 1px 2px rgba(41, 36, 25, 0.06);
  --shadow-sm:  0 1px 2px rgba(41, 36, 25, 0.06), 0 2px 6px rgba(41, 36, 25, 0.05);
  --shadow-md:  0 2px 4px rgba(41, 36, 25, 0.05), 0 6px 16px rgba(41, 36, 25, 0.08);
  --shadow-lg:  0 6px 14px rgba(41, 36, 25, 0.07), 0 18px 40px rgba(41, 36, 25, 0.12);
  --shadow-xl:  0 12px 28px rgba(41, 36, 25, 0.10), 0 32px 64px rgba(41, 36, 25, 0.16);

  /* Inset for sunken inputs */
  --shadow-inset: inset 0 1px 2px rgba(41, 36, 25, 0.05);

  /* Focus ring already defined in colors.css as --focus-ring */

  /* Motion — calm, no bounce. Brand never feels springy/playful. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   320ms;  /* @kind other */

  --transition-base: all var(--dur-base) var(--ease-out);
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/design-system/tokens/base.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* ── Soul Health Messaging · Base ─────────────────────────────────────────────
   Light element resets that establish the brand's default reading surface.
   Kept minimal so consumers can opt in. */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-body);
  font-family: var(--body-font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-heading);
  font-family: var(--heading-font);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 2px; }

::selection {
  background: color-mix(in srgb, var(--green-500) 22%, transparent);
}

code, kbd, samp, pre { font-family: var(--mono-font); }

/* Display utility for serif marketing headlines */
.dm-display {
  font-family: var(--display-font);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/design-system/styles.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* ════════════════════════════════════════════════════════════════════════
   Soul Health Messaging (By RSLabs) — Design System
   Single global stylesheet. Consumers link THIS file only.
   Keep this file as @import lines exclusively.
   ════════════════════════════════════════════════════════════════════════ */

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* Global app CSS. O @import do design-system é adicionado na Task 2. */
html, body { height: 100%; }
body { margin: 0; }
#__next, body > div { min-height: 100%; }
/* Scrollbar fina warm (espelha o index.html do design) */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--sand-300, #d6cebc); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

.dm-app-shell { display:flex; height:100dvh; min-height:0; width:100%; overflow:hidden; }
.dm-app-workspace { flex:1 1; min-width:0; min-height:0; display:flex; flex-direction:column; height:100%; }
.dm-route-viewport { flex:1 1; min-width:0; min-height:0; display:flex; overflow:hidden; }
.dm-sidebar-shell,.dm-sidebar-fallback { position:relative; z-index:60; flex:none; width:76px; height:100%; }
.dm-sidebar-panel {
  position:absolute; inset:0 auto 0 0; width:76px; box-sizing:border-box; overflow:hidden;
  display:flex; flex-direction:column; padding:16px 10px; background:var(--surface-card);
  border-right:1px solid var(--border-subtle); box-shadow:none;
  transition:width 160ms var(--ease-out),box-shadow 160ms var(--ease-out);
}
.dm-sidebar-shell:not(.dm-sidebar-shell--drawer):not([data-suppressed="true"]):hover .dm-sidebar-panel,
.dm-sidebar-shell:not(.dm-sidebar-shell--drawer):not([data-suppressed="true"]):focus-within .dm-sidebar-panel {
  width:264px; box-shadow:var(--shadow-xl);
}
.dm-sidebar-brand-row { flex:none; display:flex; align-items:center; min-height:40px; }
.dm-sidebar-brand { position:relative; display:flex; align-items:center; height:38px; width:224px; color:inherit; text-decoration:none; }
.dm-sidebar-brand__mark { flex:none; width:46px; height:18px; object-fit:contain; transition:opacity 120ms; }
.dm-sidebar-brand__wordmark { position:absolute; left:5px; width:214px; height:24px; object-fit:contain; opacity:0; pointer-events:none; transition:opacity 120ms; }
.dm-sidebar-shell:not(.dm-sidebar-shell--drawer):not([data-suppressed="true"]):hover .dm-sidebar-brand__mark,
.dm-sidebar-shell:not(.dm-sidebar-shell--drawer):not([data-suppressed="true"]):focus-within .dm-sidebar-brand__mark { opacity:0; }
.dm-sidebar-shell:not(.dm-sidebar-shell--drawer):not([data-suppressed="true"]):hover .dm-sidebar-brand__wordmark,
.dm-sidebar-shell:not(.dm-sidebar-shell--drawer):not([data-suppressed="true"]):focus-within .dm-sidebar-brand__wordmark { opacity:1; }
.dm-sidebar-nav { display:flex; flex-direction:column; gap:2px; margin-top:12px; }
.dm-sidebar-footer { margin-top:auto; display:flex; flex-direction:column; gap:2px; }
.dm-nav {
  display:flex; align-items:center; gap:13px; width:244px; min-height:42px; box-sizing:border-box; padding:9px 12px;
  border-radius:var(--radius-md); color:var(--text-body); text-decoration:none; font-size:15px; font-weight:500;
}
.dm-nav:hover { background:var(--surface-hover); }
.dm-nav--active { background:var(--brand-soft); color:var(--brand-soft-ink); font-weight:650; }
.dm-nav__icon { width:32px; flex:none; display:flex; justify-content:center; color:var(--text-faint); }
.dm-nav--active .dm-nav__icon { color:var(--brand); }
.dm-nav__label { min-width:0; flex:1 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:0; }
.dm-sidebar-shell:hover .dm-nav__label,.dm-sidebar-shell:focus-within .dm-nav__label,.dm-sidebar-shell--drawer .dm-nav__label { opacity:1; }
.dm-inbox-filters { flex:none; width:224px; min-width:224px; height:100%; min-height:0; box-sizing:border-box; display:flex; flex-direction:column; background:var(--surface-card); border-right:1px solid var(--border-subtle); }
.dm-inbox-filters__header { flex:none; height:68px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--border-subtle); }
.dm-inbox-filters__header h2 { margin:0; font-size:18px; color:var(--text-heading); }
.dm-inbox-filters__body { flex:1 1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:8px 7px 16px; }
.dm-filter-label { display:flex; align-items:center; min-height:36px; border-radius:var(--radius-sm); background:var(--surface-card); }
.dm-filter-label[data-selected] { background:var(--green-100); box-shadow:inset 3px 0 0 var(--green-700); }
.dm-filter-label[data-selected]:hover { background:var(--green-200); }
.dm-filter-label[data-dragging] { position:relative; z-index:2; box-shadow:var(--shadow-md); }
.dm-filter-label__filter { flex:1 1; min-width:0; display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; grid-gap:7px; gap:7px; padding:7px 3px 7px 7px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); cursor:pointer; text-align:left; }
.dm-filter-label__filter:hover { background:var(--brand-soft); color:var(--brand-soft-ink); }
.dm-filter-label__filter[aria-pressed="true"] { background:transparent; color:var(--ink-800); font-weight:700; }
.dm-filter-label[data-selected] .dm-filter-label__handle { color:var(--ink-700); }
.dm-filter-label__filter:focus-visible,.dm-filter-label__handle:focus-visible { position:relative; z-index:1; outline:2px solid var(--green-800); outline-offset:-2px; }
.dm-filter-label__filter span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-filter-label__filter small { font-size:11px; }
.dm-filter-label__dot { width:9px; height:9px; border-radius:50%; }
.dm-filter-label__handle { flex:none; width:28px; height:32px; display:flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--text-faint); cursor:-webkit-grab; cursor:grab; touch-action:none; }
.dm-filter-label__handle:active { cursor:-webkit-grabbing; cursor:grabbing; }
.dm-filter-search { position:relative; display:flex; align-items:center; min-width:0; height:34px; margin:0 1px 7px; color:var(--text-faint); }
.dm-filter-search > svg { position:absolute; left:9px; pointer-events:none; }
.dm-filter-search input { width:100%; min-width:0; height:34px; box-sizing:border-box; padding:6px 31px 6px 30px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); color:var(--text-body); font:inherit; font-size:12px; outline:none; }
.dm-filter-search input:focus { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft); }
.dm-filter-search input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.dm-filter-search button { position:absolute; right:2px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); cursor:pointer; }
.dm-filter-search button:hover { background:var(--surface-hover); }
.dm-filter-clear { width:100%; min-width:0; display:grid; grid-template-columns:14px minmax(0,1fr) 24px; align-items:center; grid-gap:2px; gap:2px; padding:2px 0 2px 4px; border-radius:var(--radius-sm); color:var(--brand); font-weight:600; }
.dm-filter-clear__label,.dm-filter-clear__selection { border:0; background:transparent; color:inherit; cursor:pointer; }
.dm-filter-clear__label { min-width:0; padding:7px 0; overflow:visible; text-align:left; white-space:nowrap; font:inherit; font-weight:inherit; }
.dm-filter-clear__selection { width:24px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); }
.dm-filter-clear__label:hover,.dm-filter-clear__selection:hover { background:var(--brand-soft); }
.dm-filter-state { padding:12px 8px; color:var(--text-muted); font-size:12px; }
.dm-filter-error { margin:5px 2px; padding:8px; border-radius:var(--radius-sm); color:var(--danger-ink); background:var(--danger-bg); font-size:11px; line-height:1.4; }
.dm-selection-error { position:absolute; z-index:5; top:8px; left:50%; max-width:min(420px,calc(100% - 24px)); transform:translateX(-50%); padding:8px 12px; border-radius:var(--radius-md); color:var(--danger-ink); background:var(--danger-bg); box-shadow:var(--shadow-md); font-size:12px; }
.dm-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.dm-overlay-close,.dm-thread-back { flex:none; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:var(--radius-md); background:transparent; color:var(--text-muted); cursor:pointer; }
.dm-overlay-close:hover,.dm-thread-back:hover { background:var(--surface-hover); }
.dm-shell-overlay { position:fixed; z-index:120; inset:0; display:flex; background:rgba(28,24,19,.5); }
.dm-shell-overlay[hidden] { display:none; }
.dm-shell-overlay--right { justify-content:flex-end; }
.dm-sidebar-shell--drawer { width:min(264px,88vw); }
.dm-sidebar-shell--drawer .dm-sidebar-panel { position:relative; width:100%; box-shadow:var(--shadow-xl); }
.dm-sidebar-shell--drawer .dm-sidebar-brand__mark { opacity:0; }
.dm-sidebar-shell--drawer .dm-sidebar-brand__wordmark { opacity:1; }
.dm-inbox-filters--drawer { width:min(320px,88vw); min-width:0; }
.dm-inbox-page { flex:1 1; min-width:0; min-height:0; display:flex; overflow:hidden; }
.dm-thread-back { display:none; }
.dm-topbar-menu-trigger { display:none; }
.dm-topbar-filter-trigger { display:none; }

@media (max-width:1099px) {
  .dm-app-shell > .dm-sidebar-shell,.dm-sidebar-fallback { display:none; }
  .dm-topbar-menu-trigger { display:inline-flex; }
}
@media (max-width:959px) {
  .dm-app-shell > .dm-inbox-filters { display:none; }
  .dm-topbar-filter-trigger { display:inline-flex; }
}
@media (max-width:767px) {
  .dm-app-topbar { height:60px; }
  .dm-inbox-filters__header { height:60px; }
  .dm-inbox-page > .dm-conversation-view,.dm-inbox-page > .dm-inbox-list,.dm-inbox-page > .dm-resizer { display:none!important; }
  .dm-inbox-page:not(.dm-inbox-page--thread) > .dm-inbox-list { display:flex!important; width:100%!important; flex:1 1; }
  .dm-inbox-page--thread > .dm-conversation-view { display:flex!important; min-width:0; }
  .dm-thread-back { display:inline-flex; }
  .dm-conversation-view > div:first-child { min-width:0!important; }
}