/* Client portal (mint theme). Standalone: defines its own tokens, does not depend on naserp.css. RTL first. */
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&display=swap");

:root {
  --portal-shell: #13201f;
  --portal-surface-dark: #1f3230;
  --portal-line-dark: #2d4441;
  --portal-mint: #2fbf98;
  --portal-primary: #14a37f;
  --portal-primary-hover: #0f8a6c;
  --portal-primary-10: #e3f5ef;
  --portal-primary-5: #eef8f5;
  --portal-text: #1d2a2b;
  --portal-text-2: #3d4c4d;
  --portal-muted: #5b6b6c;
  --portal-faint: #7a8a8b;
  --portal-on-dark-muted: #a9b8b6;
  --portal-page: #f4f6f5;
  --portal-card: #ffffff;
  --portal-border: #e3e9e7;
  --portal-field-border: #d5dedc;
  --portal-divider: #eef2f1;
  --portal-red: #ef5a4c;
  --portal-success-bg: #e3f5ef;
  --portal-success-fg: #0f7a60;
  --portal-warning-bg: #fff4e0;
  --portal-warning-fg: #94600f;
  --portal-error-bg: #fdecea;
  --portal-error-fg: #b2392a;
  --portal-contrast-bg: #eef1f1;
  --portal-contrast-fg: #4f5f60;
  --portal-primary-bg: #e3f5ef;
  --portal-primary-fg: #0f7a60;
  --portal-radius-card: 14px;
  --portal-radius-field: 10px;
  --portal-font: Heebo, system-ui, sans-serif;
  --portal-drawer-width: 220px;

  --lumo-font-family: var(--portal-font);
  --lumo-primary-color: var(--portal-primary);
  --lumo-primary-color-50pct: var(--portal-primary-10);
  --lumo-primary-text-color: var(--portal-primary);
  --lumo-body-text-color: var(--portal-text);
  --lumo-secondary-text-color: var(--portal-muted);
  --lumo-error-color: var(--portal-error-fg);
}

html, body { margin: 0; font-family: var(--portal-font); color: var(--portal-text); background: var(--portal-page); }
.portal-ltr { direction: ltr; unicode-bidi: isolate; }
.portal-lucide, .naserp-lucide { display: inline-flex; line-height: 0; flex: none; }

/* tones */
.portal-tone-success { background: var(--portal-success-bg); color: var(--portal-success-fg); }
.portal-tone-warning { background: var(--portal-warning-bg); color: var(--portal-warning-fg); }
.portal-tone-error { background: var(--portal-error-bg); color: var(--portal-error-fg); }
.portal-tone-contrast { background: var(--portal-contrast-bg); color: var(--portal-contrast-fg); }
.portal-tone-primary { background: var(--portal-primary-bg); color: var(--portal-primary-fg); }
.portal-text-success { color: var(--portal-success-fg); }
.portal-text-warning { color: var(--portal-warning-fg); }
.portal-text-error { color: var(--portal-error-fg); }
.portal-text-contrast { color: var(--portal-muted); }
.portal-text-primary { color: var(--portal-primary-fg); }
.portal-text-ai { color: var(--portal-primary-fg); }

/* StatusBadge under the portal theme */
.naserp-status-badge { display: inline-flex; align-items: center; font: 600 11px/1.4 var(--portal-font); padding: 2px 8px; border-radius: 10px; white-space: nowrap;
  background: var(--portal-contrast-bg); color: var(--portal-contrast-fg); }
.naserp-status-badge[theme~="success"] { background: var(--portal-success-bg); color: var(--portal-success-fg); }
.naserp-status-badge[theme~="warning"] { background: var(--portal-warning-bg); color: var(--portal-warning-fg); }
.naserp-status-badge[theme~="error"] { background: var(--portal-error-bg); color: var(--portal-error-fg); }
.naserp-status-badge[theme~="contrast"] { background: var(--portal-contrast-bg); color: var(--portal-contrast-fg); }
.naserp-status-badge[theme~="primary"] { background: var(--portal-primary-bg); color: var(--portal-primary-fg); }
.naserp-status-dot, .portal-thread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--portal-red); }

/* shared bar */
.portal-bar { height: 4px; border-radius: 2px; background: var(--portal-divider); overflow: hidden; width: 100%; }
.portal-bar-fill { height: 100%; background: var(--portal-mint); border-radius: 2px; }
.portal-icon-tile { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.portal-clickable { cursor: pointer; }

/* ===== PortalShell ===== */
.portal-shell { display: flex; min-height: 100vh; background: var(--portal-page); font-family: var(--portal-font); color: var(--portal-text); }
.portal-drawer { width: var(--portal-drawer-width); flex: none; background: var(--portal-shell); color: #fff; display: flex; flex-direction: column; padding: 16px 12px; box-sizing: border-box;
  position: sticky; top: 0; height: 100vh; }
.portal-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; }
.portal-brand-tile { width: 36px; height: 36px; border-radius: 10px; background: var(--portal-mint); color: var(--portal-shell); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.portal-brand-text { min-width: 0; }
.portal-brand-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-brand-sub { font-size: 11px; color: var(--portal-on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.portal-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--portal-radius-field); color: var(--portal-on-dark-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.portal-nav-item:hover { color: #fff; }
.portal-nav-item.portal-active { background: var(--portal-surface-dark); color: var(--portal-mint); font-weight: 600; }
.portal-nav-item-label { flex: 1; }
.portal-nav-badge { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--portal-red); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.portal-userbox { display: flex; align-items: center; gap: 8px; padding: 10px 6px 0; border-top: 1px solid var(--portal-line-dark); }
.portal-userbox vaadin-avatar { --vaadin-avatar-size: 32px; flex: none; }
.portal-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.portal-user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-user-company { font-size: 11px; color: var(--portal-on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-logout { color: var(--portal-on-dark-muted); cursor: pointer; }
.portal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.portal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 0 24px; background: var(--portal-card); border-bottom: 1px solid var(--portal-border); box-sizing: border-box; }
.portal-topbar-title { margin: 0; font-size: 20px; font-weight: 700; }
.portal-topbar-end, .portal-topbar-actions { display: flex; align-items: center; gap: 10px; }
.portal-upload-button { background: var(--portal-primary); color: #fff; font-weight: 600; border-radius: var(--portal-radius-field); cursor: pointer; }
.portal-upload-button:hover { background: var(--portal-primary-hover); }
.portal-shell-bell { position: relative; display: inline-flex; color: var(--portal-text-2); }
.portal-bell-pill { min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--portal-red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.portal-shell-bell .portal-bell-pill { position: absolute; top: -6px; inset-inline-end: -8px; }
.portal-scroll { flex: 1; overflow: auto; }
.portal-content { background: var(--portal-page); padding: 24px; max-width: 1240px; margin-inline: auto; box-sizing: border-box; width: 100%; }
.portal-mobile-header, .portal-bottombar { display: none; }

@media (max-width: 767.98px) {
  .portal-drawer, .portal-topbar { display: none; }
  .portal-mobile-header { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: var(--portal-shell); color: #fff; }
  .portal-mobile-header .portal-shell-bell { color: #fff; }
  .portal-mobile-title { font-size: 17px; font-weight: 700; }
  .portal-content { padding: 16px; padding-block-end: 96px; }
  .portal-bottombar { display: flex; align-items: flex-start; justify-content: space-around; position: fixed; inset-inline: 0; bottom: 0; z-index: 10; height: 76px; padding-top: 10px; box-sizing: border-box;
    background: var(--portal-card); border-top: 1px solid var(--portal-border); }
  .portal-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--portal-faint); text-decoration: none; font-size: 11px; }
  .portal-tab.portal-active { color: var(--portal-primary); font-weight: 600; }
  .portal-tab .portal-nav-badge { position: absolute; top: -4px; inset-inline-start: calc(50% + 6px); min-width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 4px; }
  .portal-plus-button { flex: none; width: 54px; height: 54px; min-width: 54px; padding: 0; margin-top: -26px; border-radius: 50%; background: var(--portal-primary); color: #fff;
    box-shadow: 0 6px 16px rgba(20, 163, 127, .4); cursor: pointer; }
  .portal-plus-button:hover { background: var(--portal-primary-hover); }
}
@media (min-width: 768px) {
  .portal-bottombar, .portal-mobile-header { display: none; }
}

/* ===== StatCard ===== */
.portal-stat-card { background: var(--portal-card); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-card); padding: 16px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; }
.portal-stat-label { font-size: 13px; color: var(--portal-muted); font-weight: 500; }
.portal-stat-row { display: flex; align-items: baseline; gap: 6px; }
.portal-stat-value { font-size: 28px; font-weight: 700; color: var(--portal-text); line-height: 1.1; }
.portal-stat-unit { font-size: 13px; color: var(--portal-faint); }
.portal-stat-footnote { font-size: 12px; font-weight: 500; }
.portal-stat-progress-slot:empty, .portal-stat-foot:empty, .portal-stat-link-slot:empty { display: none; }
.portal-stat-link { font-size: 13px; font-weight: 600; color: var(--portal-primary); cursor: pointer; }
.portal-stat-link:hover { color: var(--portal-primary-hover); }
.portal-stat-card--highlight { background: var(--portal-surface-dark); border-color: var(--portal-line-dark); }
.portal-stat-card--highlight .portal-stat-label, .portal-stat-card--highlight .portal-stat-unit { color: var(--portal-on-dark-muted); }
.portal-stat-card--highlight .portal-stat-value { color: #fff; }
.portal-stat-card--highlight .portal-stat-link { color: var(--portal-mint); }
.portal-stat-card--highlight .portal-bar { background: var(--portal-line-dark); }

/* ===== FilterChips ===== */
.portal-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.portal-chips::-webkit-scrollbar { display: none; }
.portal-chip { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; box-sizing: border-box; border-radius: 16px; border: 1px solid var(--portal-field-border);
  background: var(--portal-card); color: var(--portal-text-2); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; white-space: nowrap; }
.portal-chip:focus-visible { outline: 2px solid var(--portal-mint); outline-offset: 2px; }
.portal-chip--selected { background: var(--portal-shell); border-color: var(--portal-shell); color: #fff; }

/* ===== RequestRow ===== */
.portal-request-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--portal-card); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-card); cursor: pointer; }
.portal-request-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.portal-request-title { font-size: 14px; font-weight: 700; }
.portal-request-due { font-size: 12px; color: var(--portal-muted); }
.portal-request-row--overdue .portal-request-due { color: var(--portal-error-fg); }
.portal-request-action { background: var(--portal-primary); color: #fff; font-weight: 600; cursor: pointer; }
.portal-request-chevron { display: none; color: var(--portal-faint); }
@media (max-width: 767.98px) { .portal-request-action { display: none; } .portal-request-chevron { display: inline-flex; } }

/* ===== ThreadListItem ===== */
.portal-thread { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-inline-start: 3px solid transparent; border-bottom: 1px solid var(--portal-divider); background: var(--portal-card); cursor: pointer; }
.portal-thread:hover { background: var(--portal-primary-5); }
.portal-thread vaadin-avatar { --vaadin-avatar-size: 40px; flex: none; }
.portal-thread-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.portal-thread-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.portal-thread-name { font-size: 14px; font-weight: 700; }
.portal-thread-time { font-size: 11px; color: var(--portal-faint); flex: none; }
.portal-thread-topic { font-size: 12px; color: var(--portal-primary-fg); font-weight: 500; }
.portal-thread-preview { font-size: 13px; color: var(--portal-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-thread--unread .portal-thread-preview { color: var(--portal-text); font-weight: 600; }
.portal-thread--selected { border-inline-start-color: var(--portal-primary); background: var(--portal-primary-5); }
.portal-thread--compact { padding: 8px 12px; gap: 8px; }
.portal-thread--compact vaadin-avatar { --vaadin-avatar-size: 32px; }
.portal-thread--compact .portal-thread-topic { display: none; }

/* ===== Chat ===== */
.portal-chat { display: flex; flex-direction: column; gap: 8px; }
.portal-bubble { max-width: 78%; padding: 10px 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; }
.portal-bubble--client { align-self: flex-start; background: var(--portal-primary); color: #fff; border-radius: 16px 16px 4px 16px; }
.portal-bubble--office { align-self: flex-end; background: var(--portal-card); color: var(--portal-text); border: 1px solid var(--portal-border); border-radius: 16px 16px 16px 4px; }
.portal-bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-bubble-attachment { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--portal-page); color: var(--portal-text-2); font-size: 12px; max-width: 100%; }
.portal-bubble-time { font-size: 11px; opacity: .75; align-self: flex-end; }
.portal-chat-day { align-self: center; padding: 2px 12px; border-radius: 10px; background: var(--portal-border); color: var(--portal-muted); font-size: 11px; }

/* ===== UploadFileRow ===== */
.portal-upload-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--portal-card); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-field); }
.portal-upload-thumb { width: 34px; height: 40px; border-radius: 6px; background: var(--portal-contrast-bg); color: var(--portal-contrast-fg); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.portal-upload-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.portal-upload-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-upload-status { display: flex; align-items: center; gap: 8px; }
.portal-upload-text { font-size: 12px; color: var(--portal-muted); }
.portal-upload-actions { display: flex; align-items: center; flex: none; }
.portal-upload-done { color: var(--portal-primary); }
.portal-upload-remove { color: var(--portal-faint); cursor: pointer; }

/* ===== OtpInput ===== */
.portal-otp-wrap { position: relative; display: inline-block; direction: ltr; }
.portal-otp-boxes { display: flex; gap: 8px; }
.portal-otp-box { width: 44px; height: 52px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--portal-field-border); border-radius: 10px;
  background: var(--portal-card); font-size: 20px; font-weight: 600; color: var(--portal-text); }
.portal-otp:focus-within .portal-otp-box--active { border: 2px solid var(--portal-mint); }
.portal-otp--invalid .portal-otp-box { border-color: var(--portal-error-fg); }
.portal-otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 20px; letter-spacing: 40px; direction: ltr; cursor: text; }

/* ===== MonthProgressCard / DocumentRow ===== */
.portal-month-card { background: var(--portal-surface-dark); color: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.portal-month-label { font-size: 13px; color: var(--portal-on-dark-muted); }
.portal-month-number { font-size: 32px; font-weight: 700; line-height: 1.1; }
.portal-month-text { font-size: 12px; color: var(--portal-on-dark-muted); }
.portal-month-card .portal-bar { background: var(--portal-line-dark); }
.portal-doc-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--portal-divider); }
.portal-doc-thumb { width: 38px; height: 46px; border-radius: 6px; background: var(--portal-contrast-bg); color: var(--portal-contrast-fg); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.portal-doc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.portal-doc-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-doc-meta { font-size: 12px; color: var(--portal-muted); }
.portal-doc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.portal-doc-amount { font-size: 14px; font-weight: 700; }

/* ===== NotificationBell ===== */
.portal-bell { position: relative; display: inline-flex; }
.portal-bell .portal-bell-pill { position: absolute; top: -4px; inset-inline-end: -4px; pointer-events: none; }
.portal-bell-list { display: flex; flex-direction: column; min-width: 260px; max-width: 340px; }
.portal-bell-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--portal-divider); cursor: pointer; }
.portal-bell-item:hover { background: var(--portal-primary-5); }
.portal-bell-title { font-size: 13px; font-weight: 600; }
.portal-bell-sub { font-size: 12px; color: var(--portal-muted); }
.portal-bell-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--portal-muted); }

/* ===== PortalAuthLayout ===== */
.portal-auth { min-height: 100vh; box-sizing: border-box; background: var(--portal-shell); display: flex; flex-direction: column; justify-content: space-between; font-family: var(--portal-font); }
.portal-auth-head { padding: 48px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.portal-auth-tile { width: 52px; height: 52px; border-radius: 14px; background: var(--portal-mint); color: var(--portal-shell); display: inline-flex; align-items: center; justify-content: center; }
.portal-auth-title { margin: 6px 0 0; font-size: 26px; font-weight: 700; color: #fff; }
.portal-auth-subtitle { font-size: 15px; color: var(--portal-on-dark-muted); }
.portal-auth-card { background: var(--portal-card); border-radius: 22px 22px 0 0; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 768px) {
  .portal-auth { justify-content: center; align-items: center; gap: 24px; }
  .portal-auth-head { padding: 0; align-items: center; text-align: center; width: 100%; max-width: 420px; }
  .portal-auth-card { width: 100%; max-width: 420px; border-radius: 22px; }
}

/* ===== Portal pages (layout of the client portal screens) ===== */
.portal-page { display: flex; flex-direction: column; gap: 20px; }
.portal-secondary { color: var(--portal-muted); margin: 0; }
.portal-greeting h2 { margin: 0 0 4px; font-size: 26px; font-weight: 700; }
.portal-greeting p { font-size: 14px; }
.portal-strong { font-weight: 600; }
.portal-hint { font-size: 12px; color: var(--portal-muted); }
.portal-label { display: block; font-size: 13px; font-weight: 600; color: var(--portal-text-2); margin-bottom: 6px; }
.portal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.portal-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; align-items: start; }
.portal-card { background: var(--portal-card); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-card); overflow: hidden; }
.portal-card-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: 16px; font-weight: 700; }
.portal-card-title a { font-size: 13px; font-weight: 500; }
.portal-card-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
.portal-list { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.portal-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-quick-tile { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--portal-card); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-card); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--portal-text); }
.portal-quick-tile .naserp-lucide { color: var(--portal-primary); }
.portal-wide-button { width: 100%; }
.portal-mobile-only { display: none !important; }
@media (max-width: 767.98px) {
  .portal-desktop-only { display: none !important; }
  .portal-mobile-only { display: flex !important; }
  .portal-mobile-only.portal-doc-cards { flex-direction: column; }
  .portal-quick.portal-mobile-only { display: grid !important; }
  .portal-greeting { display: none; }
  .portal-card-title { padding: 12px 14px; }
}

/* upload */
.portal-upload { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.portal-upload-form { flex: 1.4 1 420px; min-width: 0; }
.portal-upload-files { flex: 1 1 280px; min-width: 0; }
.portal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 575.98px) { .portal-form-row { grid-template-columns: 1fr; } }
vaadin-upload.portal-dropzone { border: 2px dashed #9fd8c7; background: #eef8f5; border-radius: 18px; padding: 14px 16px; text-align: center; }
vaadin-upload.portal-dropzone vaadin-button { background: var(--portal-primary); color: #fff; font-weight: 600; }

/* documents */
.portal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.portal-search { width: 280px; max-width: 100%; }
.portal-doc-name { display: flex; align-items: center; gap: 10px; }
.portal-doc-name .naserp-lucide { color: var(--portal-muted); }
.portal-grid { --vaadin-grid-border-width: 0; }
vaadin-grid::part(portal-ltr) { direction: ltr; unicode-bidi: isolate; }
.portal-month-heading { font-size: 12px; font-weight: 600; color: var(--portal-faint); padding-top: 6px; display: block; }
.portal-doc-cards { display: flex; flex-direction: column; gap: 8px; }
.portal-preview-frame { width: 100%; height: 70vh; border: 0; border-radius: 8px; background: #fff; }
.portal-preview-image { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }
.portal-office-message { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: #fff4e0; color: #94600f; font-size: 13px; }

/* messages */
.portal-messages { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.portal-messages-list { display: flex; flex-direction: column; gap: 12px; }
.portal-thread-list { padding: 0; }
.portal-messages-conversation { display: flex; flex-direction: column; height: calc(100vh - 170px); min-height: 420px; }
.portal-conv-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--portal-border); font-weight: 600; }
.portal-conv-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--portal-page); }
.portal-composer { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--portal-border); background: var(--portal-card); }
.portal-send { border-radius: 50%; width: 44px; height: 44px; padding: 0; flex: none; }
.portal-back { display: none; }
@media (max-width: 767.98px) {
  .portal-messages { grid-template-columns: 1fr; }
  .portal-messages .portal-messages-conversation { display: none; }
  .portal-messages--detail .portal-messages-list { display: none; }
  .portal-messages--detail .portal-messages-conversation { display: flex; height: calc(100vh - 190px); }
  .portal-back { display: inline-flex; }
}

/* sign-in */
.portal-field { --vaadin-input-field-border-radius: 10px; }
.portal-login-step { display: flex; flex-direction: column; gap: 14px; }
.portal-login-links { display: flex; justify-content: space-between; font-size: 13px; }
.portal-login-links a { cursor: pointer; }
.portal-login-error { color: var(--portal-error-fg); font-size: 13px; background: var(--portal-error-bg); padding: 8px 12px; border-radius: 10px; }

/* notifications dialog */
.portal-notifications { display: flex; flex-direction: column; min-width: min(360px, 80vw); }
.portal-notification { display: flex; flex-direction: column; gap: 2px; padding: 12px 4px; border-bottom: 1px solid var(--portal-divider); cursor: pointer; }
.portal-notification-title { font-weight: 600; font-size: 14px; }
.portal-notification-sub { font-size: 12px; color: var(--portal-muted); }

/* Vaadin 25 buttons read their colours from --vaadin-button-*; map them to the portal tokens */
vaadin-button[theme~="primary"] { --vaadin-button-background: var(--portal-primary); --vaadin-button-text-color: #fff; --vaadin-button-border-color: transparent; font-weight: 600; }
vaadin-button[theme~="primary"]:hover { --vaadin-button-background: var(--portal-primary-hover); }
vaadin-button:not([theme~="primary"]):not([theme~="tertiary"]) { --vaadin-button-text-color: var(--portal-primary); --vaadin-button-border-color: #d5dedc; }
vaadin-button[theme~="tertiary"] { --vaadin-button-text-color: var(--portal-primary); }
.portal-login-links a, .portal-card-title a, .portal-month-heading a { color: var(--portal-primary); text-decoration: none; }
.portal-login-links a:hover, .portal-card-title a:hover { text-decoration: underline; }

/* chat attachments */
a.portal-bubble-attachment { color: var(--portal-text-2); text-decoration: none; cursor: pointer; }
a.portal-bubble-attachment:hover { text-decoration: underline; }
.portal-bubble-image-link { display: block; line-height: 0; }
.portal-bubble-image { max-width: 220px; max-height: 170px; border-radius: 12px; display: block; object-fit: cover; }
.portal-pending { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; background: var(--portal-card); border-top: 1px solid var(--portal-border); }
.portal-pending-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 16px; background: var(--portal-primary-bg); color: var(--portal-primary-fg); font-size: 12px; max-width: 100%; }
.portal-pending-chip .portal-pending-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.portal-pending-chip vaadin-button { min-width: 0; width: 22px; height: 22px; padding: 0; }
.portal-attach { flex: none; }