:root, :host { --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-xs: 20rem; --container-sm: 24rem; --container-lg: 32rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --tracking-tight: -0.025em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-xs: 0.125rem; --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --aspect-video: 16 / 9; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: "Urbanist", Arial, sans-serif; --default-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace; --color-border: var(--border); }
.op-app .grid { display: grid; }
.op-app .size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); }
.op-app .shrink-0 { flex-shrink: 0; }
.op-app .place-content-center { place-content: center; }
.op-app .rounded-\[4px\] { border-radius: 4px; }
.op-app .border { border-style: var(--tw-border-style); border-width: 1px; }
.op-app .border-input { border-color: var(--input); }
.op-app .text-current { color: currentcolor; }
.op-app .shadow-xs { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.op-app .transition-shadow { transition-property: box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); }
.op-app .transition-none { transition-property: none; }
.op-app .outline-none { --tw-outline-style: none; outline-style: none; }
.op-app .focus-visible\:border-ring {
  &:focus-visible { border-color: var(--ring); }
}
.op-app .focus-visible\:ring-\[3px\] {
  &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
}
.op-app .focus-visible\:ring-ring\/50 {
  &:focus-visible {
  --tw-ring-color: var(--ring);
  @supports (color: color-mix(in lab, red, red)) {
  --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
}
}
}
.op-app .disabled\:cursor-not-allowed {
  &:disabled { cursor: not-allowed; }
}
.op-app .disabled\:opacity-50 {
  &:disabled { opacity: 0.5; }
}
.op-app .aria-invalid\:border-destructive {
  &[aria-invalid="true"] { border-color: var(--destructive); }
}
.op-app .aria-invalid\:ring-destructive\/20 {
  &[aria-invalid="true"] {
  --tw-ring-color: var(--destructive);
  @supports (color: color-mix(in lab, red, red)) {
  --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
}
}
}
.op-app .data-\[state\=checked\]\:border-primary {
  &[data-state="checked"] { border-color: var(--primary); }
}
.op-app .data-\[state\=checked\]\:bg-primary {
  &[data-state="checked"] { background-color: var(--primary); }
}
.op-app .data-\[state\=checked\]\:text-primary-foreground {
  &[data-state="checked"] { color: var(--primary-foreground); }
}
.op-app .dark\:bg-input\/30 {
  @media (prefers-color-scheme: dark) {
  background-color: var(--input);
  @supports (color: color-mix(in lab, red, red)) {
  background-color: color-mix(in oklab, var(--input) 30%, transparent);
}
}
}
.op-app .dark\:aria-invalid\:ring-destructive\/40 {
  @media (prefers-color-scheme: dark) {
  &[aria-invalid="true"] {
  --tw-ring-color: var(--destructive);
  @supports (color: color-mix(in lab, red, red)) {
  --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
}
}
}
}
.op-app .dark\:data-\[state\=checked\]\:bg-primary {
  @media (prefers-color-scheme: dark) {
  &[data-state="checked"] { background-color: var(--primary); }
}
}
:root { --background: #ffffff; --foreground: #171717; --card: #ffffff; --card-foreground: #171717; --popover: #ffffff; --popover-foreground: #171717; --primary: #171717; --primary-foreground: #fafafa; --secondary: #f5f5f5; --secondary-foreground: #171717; --muted: #f5f5f5; --muted-foreground: #737373; --accent: #f5f5f5; --accent-foreground: #171717; --destructive: #e7000b; --border: #e5e5e5; --input: #e5e5e5; --ring: #a1a1a1; --chart-1: #f54900; --chart-2: #009689; --chart-3: #104e64; --chart-4: #ffb900; --chart-5: #fe9a00; --radius: 0.625rem; --sidebar: #fafafa; --sidebar-foreground: #171717; --sidebar-primary: #171717; --sidebar-primary-foreground: #fafafa; --sidebar-accent: #f5f5f5; --sidebar-accent-foreground: #171717; --sidebar-border: #e5e5e5; --sidebar-ring: #a1a1a1; }
:root { --background: #fffdfa; --foreground: #3e383f; --popover: #fffdfa; --popover-foreground: #3e383f; --primary: #7b64bb; --primary-foreground: #fff; --accent: #f0eafb; --accent-foreground: #55427c; --border: #e8dfdd; --input: #e1d9df; --ring: #b394d4; --muted-foreground: #898088; --radius: 1rem; --font-sans: "Urbanist", Arial, sans-serif; --coral: #b7462d; --coral-soft: #f8ded0; --ink: #3e383f; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
:root { --foreground: #39383e; --primary: #666650; --accent: #f1eee8; --accent-foreground: #474440; --ring: #b7a895; --coral: #514a42; }
.op-app .photo-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(234, 220, 209); flex-shrink: 0; overflow: hidden; vertical-align: middle; }
.op-app .photo-avatar > span { font-size: 12px; color: rgb(129, 101, 83); }
.op-app .photo-avatar img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.op-app .photo-small { width: 29px; height: 29px; }
.op-app .user-avatar .photo-avatar { width: 100%; height: 100%; }
.op-app .integration-logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; background: rgb(255, 255, 255); border: 1px solid rgb(239, 235, 230); border-radius: 10px; box-shadow: rgba(64, 51, 43, 0.01) 0px 1px 3px; }
.op-app .integration-logo img { width: 22px; height: 22px; object-fit: contain; }
.op-app .integration-logo.logo-small { width: 18px; height: 18px; border-radius: 4px; border: 0px; box-shadow: none; background: transparent; }
.op-app .integration-logo.logo-small img { width: 15px; height: 15px; }
.op-app .summary-card, .op-app .original-card, .op-app .detailed-action { background: rgba(255, 253, 251, 0.94); border: 1px solid rgb(255, 255, 255); border-radius: 21px; box-shadow: rgba(87, 70, 51, 0.02) 0px 3px 5px, rgba(87, 70, 51, 0.01) 0px 12px 36px; overflow: hidden; }
.op-app .original-card { padding: 23px 28px 18px; }
.op-app .original-card-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.op-app .original-card-heading > span:first-child { display: flex; align-items: center; gap: 7px; font-size: 11px; color: rgb(155, 146, 148); }
.op-app .original-status { font-size: 9px; color: rgb(183, 174, 176); }
.op-app .original-card h2 { font-size: 17px; font-weight: 500; letter-spacing: -0.35px; color: rgb(99, 88, 91); margin-bottom: 21px; }
.op-app .source-body { font-size: 13px; line-height: 1.95; color: rgb(144, 132, 137); white-space: pre-line; margin: 21px 0px 25px; overflow-wrap: anywhere; }
.op-app .action-recipient .photo-avatar { width: 21px; height: 21px; }
.op-app .source-body { color: rgb(124, 112, 119); }
.op-app .original-card h2 { color: rgb(87, 78, 82); }
.op-app .original-card-heading > span:first-child { color: rgb(138, 123, 133); }
@media (min-width: 1440px) {
.op-app .source-body { font-size: 14px; }
}
@media (min-width: 1440px) {
.op-app .original-card { padding: 26px 31px 22px; }
}
@media (max-width: 900px) {
.op-app .original-card { padding: 21px 24px; }
}
@media (max-width: 900px) {
.op-app .source-body { font-size: 13px; }
}
@media (max-width: 740px) {
.op-app .summary-person .photo-avatar { width: 41px; height: 41px; }
}
@media (max-width: 740px) {
.op-app .summary-person .logo-small { width: 16px; }
}
@media (max-width: 740px) {
.op-app .original-card { padding: 22px 23px; border-radius: 18px; }
}
@media (max-width: 740px) {
.op-app .original-card-heading { margin-bottom: 16px; }
}
@media (max-width: 740px) {
.op-app .original-card h2 { font-size: 17px; line-height: 1.5; }
}
@media (max-width: 740px) {
.op-app .source-body { font-size: 14px; line-height: 1.85; margin-top: 21px; }
}
@media (max-width: 380px) {
.op-app .summary-card, .op-app .original-card { padding: 21px; }
}
@media (max-width: 380px) {
.op-app .source-body { font-size: 13px; }
}
.op-app .action-card-header h3, .op-app .original-card h2 { font-weight: 600; }
@media (max-width: 740px) {
.op-app .source-body { font-size: 15px; }
}
:root, :host { --shimmer-angle: 20deg; }
:root { --canvas: #f5f5f5; --surface: rgb(255 255 255 / 80%); --surface-alt: rgb(240 241 237 / 80%); --ink-strong: #303234; --ink-body: #616467; --ink-muted: #828689; --line-strong: #d8dbdc; --brand: #2ccea5; --brand-hover: #25bc96; --on-brand: #103c31; --shadow-card: 0 5px 18px #42332d08, 0 1px 3px #42332d06; --danger: #b42318; --danger-soft: #fef3f2; --danger-line: #fecdca; --warning: #93370d; --warning-soft: #fffaeb; --warning-line: #fedf89; --info: #1d5fb8; --info-soft: #eff6ff; --info-line: #c9dcf7; --success: #0f7a5f; --success-soft: #e8faf4; --shadow-popover: 0 8px 24px rgb(0 0 0 / 12%); --radius-card: 10px; --radius-control: 5px; --motion-fast: 150ms; }
.op-app .summary-card, .op-app .original-card, .op-app .detailed-action { background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); }
.op-app .original-card-heading > span:first-child { font-size: 13px; color: var(--ink-muted); }
.op-app .original-status { font-size: 12px; color: var(--ink-muted); }
.op-app .original-card h2 { font-size: 20px; color: var(--ink-strong); line-height: 1.5; }
.op-app .source-body { font-size: 15px; color: var(--ink-body); line-height: 1.85; }
@media (max-width: 740px) {
.op-app .summary-card > p, .op-app .source-body, .op-app .exact-action-content { font-size: 16px; }
}
@media (max-width: 740px) {
.op-app .original-card h2 { font-size: 19px; }
}
@media (max-width: 360px) {
.op-app .summary-card, .op-app .original-card { padding: 20px; }
}
:root { --primary: #2ccea5; --primary-foreground: #103c31; --ring: #2ccea5; --accent: #e4f5ef; --accent-foreground: #194c3e; }
.op-app .summary-card, .op-app .original-card, .op-app .detailed-action, .op-app .learning-card, .op-app .history-list, .op-app .settings-card, .op-app .connection-card { backdrop-filter: blur(12px); }
:root { --control-bg: #000; --control-fg: #fff; --control-hover: #242424; }
:root { --control-bg: #fff; --control-fg: #303234; --control-hover: #f7f7f7; }
.op-app .summary-card, .op-app .original-card, .op-app .detailed-action, .op-app .learning-card, .op-app .history-list, .op-app .settings-card, .op-app .connection-card, .op-app .focus-dialog { border-radius: 10px; }
.op-app .op-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: rgb(255, 255, 255); color: var(--ink-strong); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 15px; font-weight: 600; letter-spacing: inherit; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.op-app .op-button svg { flex: 0 0 auto; }
.op-app .op-button:hover, .op-app .op-button.is-hover { background: rgb(244, 245, 245); }
.op-app .op-button:focus-visible, .op-app .op-button.is-focus { outline: none; box-shadow: rgba(44, 206, 165, 0.45) 0px 0px 0px 3px; }
.op-app .op-button:active, .op-app .op-button.is-pressed { transform: translateY(1px); }
.op-app .op-button.is-primary { background: var(--brand); border-color: var(--brand); color: rgb(255, 255, 255); font-weight: 800; }
.op-app .op-button.is-primary:hover, .op-app .op-button.is-primary.is-hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.op-app .op-button.is-large { min-height: 56px; padding: 14px 18px; font-size: 16px; }
.op-app .op-button.is-quiet { border-color: transparent; background: transparent; color: var(--ink-body); padding-inline: 10px; }
.op-app .op-button.is-quiet:hover, .op-app .op-button.is-quiet.is-hover { background: rgba(28, 38, 34, 0.05); color: var(--ink-strong); }
.op-app .op-button.is-destructive { background: rgb(255, 255, 255); border-color: var(--danger-line); color: var(--danger); }
.op-app .op-button.is-destructive:hover, .op-app .op-button.is-destructive.is-hover { background: var(--danger-soft); }
.op-app .op-button.is-destructive.is-solid { background: var(--danger); border-color: var(--danger); color: rgb(255, 255, 255); }
.op-app .op-button:disabled, .op-app .op-button.is-disabled { opacity: 0.45; cursor: default; transform: none; }
.op-app .op-button.is-small { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.op-app .op-icon-button { min-width: 52px; min-height: 56px; padding: 14px; gap: 0px; }
.op-app .op-icon-button .op-reveal { max-width: 0px; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 200ms ease, opacity var(--motion-fast) ease, margin 200ms ease; }
.op-app .op-icon-button:hover .op-reveal, .op-app .op-icon-button:focus-visible .op-reveal, .op-app .op-icon-button.is-hover .op-reveal { max-width: 90px; opacity: 1; margin-left: 8px; }
@media (hover: none) {
.op-app .op-icon-button .op-reveal { max-width: 90px; opacity: 1; margin-left: 8px; }
}
.op-app .op-field { display: grid; gap: 6px; min-width: 0px; }
.op-app .op-field > label, .op-app .op-field-label { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.op-app .op-field-help { font-size: 13px; color: var(--ink-muted); line-height: 1.5; margin: 0px; }
.op-app .op-input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; letter-spacing: inherit; color: var(--ink-strong); background: rgb(255, 255, 255); border: 1px solid var(--line-strong); border-radius: 8px; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.op-app .op-input:focus, .op-app .op-input.is-focus { outline: none; border-color: var(--brand); box-shadow: rgba(44, 206, 165, 0.25) 0px 0px 0px 3px; }
.op-app textarea.op-input { min-height: 96px; resize: vertical; line-height: 1.6; }
.op-app select.op-input { appearance: none; padding-inline-end: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.op-app .op-link { font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13px; color: var(--ink-strong); background: none; border: 0px; padding: 0px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.op-app .op-check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 15px; color: var(--ink-strong); }
@media (hover: none) {
.op-app .op-button { transition: transform var(--motion-fast) ease, background-color var(--motion-fast) ease; }
}
@media (hover: none) {
.op-app .op-button.is-primary:active { background: var(--brand-hover); }
}
.op-app .op-datetime > .op-field { min-width: 0px; }
.op-app .op-datetime .op-input { min-width: 0px; max-width: 100%; }
.op-app .op-section-label { display: flex; align-items: center; gap: 6px; margin: 0px; font-size: 12px; letter-spacing: 0.075em; text-transform: uppercase; color: rgb(155, 125, 159); }
.op-app .op-entity { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgb(255, 255, 255); border: 1px solid var(--line-strong); max-width: 100%; vertical-align: middle; }
.op-app .op-entity .photo-avatar { width: 34px; height: 34px; }
.op-app .op-entity-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
.op-app .op-entity-icon.is-organisation { background: rgb(238, 242, 251); color: rgb(59, 91, 171); }
.op-app .op-entity-icon.is-project { background: rgb(253, 243, 230); color: rgb(161, 92, 7); }
.op-app .op-entity-icon.is-subject { background: rgb(243, 238, 251); color: rgb(107, 75, 179); }
.op-app .op-entity-text { display: grid; min-width: 0px; line-height: 1.3; }
.op-app .op-entity-name { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.op-app .op-entity-meta { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-app .op-entity-picture { position: relative; display: inline-flex; flex: 0 0 auto; }
.op-app .op-entity.is-probable { border-style: dashed; border-color: rgb(185, 191, 193); }
.op-app .op-entity.is-probable .op-entity-picture > :first-child { opacity: 0.85; }
.op-app .op-entity.is-muted { opacity: 0.75; }
.op-app .op-priority { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 13px; background: rgb(255, 255, 255); border: 1px solid var(--line-strong); color: var(--ink-body); white-space: nowrap; }
.op-app .op-priority strong { font-weight: 700; color: var(--ink-strong); }
.op-app .op-priority-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(184, 189, 191); flex: 0 0 auto; }
.op-app .op-priority.is-urgent { background: var(--danger-soft); border-color: var(--danger-line); }
.op-app .op-priority.is-urgent strong { color: var(--danger); }
.op-app .op-priority.is-urgent .op-priority-dot, .op-app .op-priority-dot.is-urgent { background: var(--danger); }
.op-app .op-priority.is-high { background: var(--warning-soft); border-color: var(--warning-line); }
.op-app .op-priority.is-high strong { color: var(--warning); }
.op-app .op-priority.is-high .op-priority-dot, .op-app .op-priority-dot.is-high { background: rgb(247, 144, 9); }
.op-app .op-priority.is-normal .op-priority-dot, .op-app .op-priority-dot.is-normal { background: var(--brand); }
.op-app .op-priority.is-low { color: var(--ink-muted); }
.op-app .op-priority.is-low .op-priority-dot, .op-app .op-priority-dot.is-low { background: rgb(208, 212, 214); }
.op-app .op-priority-button { font: inherit; background: none; border: 0px; padding: 0px; cursor: pointer; border-radius: 99px; }
.op-app .op-menu-item .op-kbd-group { opacity: 0.8; }
.op-app .op-priority-menu > .op-button { margin: 0px 8px 6px; }
.op-app .op-kbd-group { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-muted); }
.op-app .op-key { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0px 6px; box-sizing: border-box; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; font-weight: 700; color: var(--ink-body); background: rgb(255, 255, 255); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom-width: 2px; border-radius: 5px; }
@media (hover: none) {
.op-app .op-kbd-group { display: none; }
}
.op-app .op-summary { display: grid; gap: 10px; padding: 24px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); }
.op-app .op-summary h2 { margin: 0px; font-size: 26px; font-weight: 400; color: var(--ink-strong); line-height: 1.3; }
.op-app .op-summary-text, .op-app .op-summary-needs { margin: 0px; font-size: 16px; line-height: 1.8; color: var(--ink-body); }
.op-app .op-summary-meeting { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin: 4px 0px 0px; padding: 5px 10px; border-radius: 8px; background: var(--success-soft); color: var(--success); font-size: 13px; font-weight: 600; }
.op-app .op-transcript-line .photo-avatar { width: 28px; height: 28px; }
.op-app .op-voice > .op-button { justify-self: start; }
.op-app .op-attachment-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255, 255, 255, 0.7); max-width: 100%; }
.op-app .op-attachment .op-attachment-chip { justify-self: start; }
.op-app .op-attachment-open { display: flex; align-items: center; gap: 10px; min-width: 0px; font: inherit; text-align: start; background: none; border: 0px; padding: 4px 8px 4px 4px; border-radius: 6px; cursor: pointer; color: inherit; }
.op-app .op-attachment-open > span:last-child { display: grid; min-width: 0px; }
.op-app .op-attachment-open strong { font-size: 13px; font-weight: 600; color: var(--ink-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-app .op-attachment-open small { font-size: 12px; color: var(--ink-muted); }
.op-app .op-attachment-download { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 6px; color: var(--ink-muted); }
.op-app .op-attachment-icon { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 6px; background: rgb(253, 236, 234); color: rgb(194, 65, 12); }
.op-app .op-attachment-icon.is-image { background: rgb(232, 241, 253); color: rgb(29, 95, 184); }
.op-app .op-attachment-icon.is-spreadsheet { background: rgb(231, 246, 236); color: rgb(31, 122, 63); }
.op-app .op-attachment-icon.is-calendar { background: rgb(238, 242, 251); color: rgb(59, 91, 171); }
.op-app .op-attachment-icon.is-other { background: rgb(238, 240, 240); color: var(--ink-body); }
.op-app .op-recipients { display: grid; gap: 6px; }
.op-app .op-recipients-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0px; border-bottom: 1px solid rgb(236, 238, 238); }
.op-app .op-recipients-label { width: 34px; flex: 0 0 auto; padding-top: 7px; font-size: 13px; color: var(--ink-muted); }
.op-app .op-recipients-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 0%; min-width: 0px; }
.op-app .op-recipient { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 2px; border-radius: 99px; background: rgb(242, 244, 244); font-size: 13px; color: var(--ink-strong); max-width: 100%; }
.op-app .op-recipient .photo-avatar { width: 24px; height: 24px; }
.op-app .op-recipient.is-new { background: var(--warning-soft); box-shadow: inset 0 0 0 1px var(--warning-line); }
.op-app .op-recipient button { display: grid; place-items: center; width: 22px; height: 22px; border: 0px; border-radius: 50%; background: none; color: var(--ink-muted); cursor: pointer; }
.op-app .op-recipient button:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink-strong); }
.op-app .op-recipients-input { flex: 1 1 120px; min-width: 100px; min-height: 32px; border: 0px; background: transparent; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 15px; color: var(--ink-strong); outline: none; }
.op-app .op-recipients-row { transition: border-color var(--motion-fast) ease; }
.op-app .op-recipients-add { display: flex; gap: 10px; padding-top: 7px; }
.op-app .op-mass .op-check { font-size: 14px; min-height: 32px; }
.op-app .op-receipt.is-done .op-receipt-status svg { color: var(--success); }
.op-app .op-menu-other .op-input { min-height: 40px; font-size: 15px; }
.op-app .op-sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
.op-app .op-invite-guests .photo-avatar { width: 24px; height: 24px; }
.op-app .op-invite-file .op-attachment-download { margin-inline-start: auto; }
.op-app .email-copy.is-primary { background: var(--brand); border-color: var(--brand); color: rgb(255, 255, 255); }
.op-app .op-recipients-combo { display: flex; flex: 1 1 120px; min-width: 100px; }
.op-app .op-recipients-row { position: relative; }
.op-app .op-recipients-combo .op-recipients-input { flex: 1 1 0%; }
.op-app .op-suggestions .photo-avatar { width: 30px; height: 30px; }
.op-app .op-field-change-edit .op-input { min-height: 40px; padding-block: 6px; font-size: 15px; }
.op-app .op-key { gap: 3px; grid-auto-flow: column; }
.op-app .op-key > span { display: inline-flex; align-items: center; gap: 3px; }
.op-app .op-key-plus { font-size: 9px; font-weight: 600; color: var(--ink-muted); line-height: 1; }
.op-app .op-card { display: grid; gap: 14px; padding: 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); min-width: 0px; }
.op-app .op-card h3 { margin: 0px; font-size: 18px; font-weight: 600; color: var(--ink-strong); line-height: 1.35; }
.op-app .op-card > p { margin: 0px; font-size: 15px; line-height: 1.65; color: var(--ink-body); }
.op-app .op-item-header { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 22px 18px 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); }
.op-app .op-item-app { position: absolute; top: -14px; left: -14px; }
.op-app .op-item-app .integration-logo { width: 36px; height: 36px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 10px; }
.op-app .op-item-app .integration-logo img { width: 21px; height: 21px; }
.op-app .op-item-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 1 1 200px; font-size: 13px; color: var(--ink-muted); }
.op-app .op-item-source { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-body); }
.op-app .op-people-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.op-app .op-people-list .op-entity .op-entity-picture > * { width: 20px; height: 20px; }
.op-app .op-people-list .op-entity { padding: 4px 8px; }
.op-app .op-people-list .op-entity-name { font-size: 12px; }
.op-app .op-people-list .op-entity-meta { font-size: 11px; }
.op-app .op-action { gap: 12px; }
.op-app .op-action-head { display: flex; align-items: center; gap: 10px; }
.op-app .op-action-title { display: grid; gap: 2px; flex: 1 1 0%; min-width: 0px; }
.op-app .op-action-title h3 { font-size: 15px; font-weight: 600; }
.op-app .op-action-title span { font-size: 12px; color: var(--ink-muted); }
.op-app .op-action-step { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.op-app .op-action-toggle { position: relative; display: grid; place-items: center; width: 36px; height: 36px; cursor: pointer; flex: 0 0 auto; }
.op-app .op-action-toggle input { position: absolute; opacity: 0; inset: 0px; margin: 0px; cursor: pointer; }
.op-app .op-toggle-box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-strong); background: rgb(255, 255, 255); color: rgb(255, 255, 255); }
.op-app .op-action-toggle input:checked + .op-toggle-box { background: var(--brand); border-color: var(--brand); }
.op-app .op-action-toggle input:focus-visible + .op-toggle-box { box-shadow: rgba(44, 206, 165, 0.45) 0px 0px 0px 3px; }
.op-app .op-action.is-deselected { opacity: 0.6; box-shadow: none; background: rgba(255, 255, 255, 0.45); }
.op-app .op-card > p.op-action-foot { margin: 0px; padding-top: 9px; border-top: 1px solid rgb(236, 238, 238); font-size: 11px; line-height: 1.45; color: var(--ink-muted); }
.op-app .op-action-subject { display: flex; gap: 12px; margin: 0px; font-size: 14px; color: var(--ink-strong); }
.op-app .op-action-subject span { width: 34px; color: var(--ink-muted); font-size: 13px; }
.op-app .op-draft { display: grid; gap: 6px; padding: 12px 14px; border-radius: 8px; background: rgb(251, 251, 250); border: 1px solid rgb(236, 238, 238); }
.op-app .op-draft-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 0.075em; text-transform: uppercase; color: var(--ink-muted); }
.op-app .op-draft-head .op-link { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0px; }
.op-app .op-draft p { margin: 0px; font-size: 15px; line-height: 1.7; color: var(--ink-strong); white-space: pre-wrap; }
.op-app .op-action-attachment { display: grid; gap: 6px; justify-items: start; }
.op-app .op-file-line { display: flex; align-items: flex-start; gap: 8px; margin: 0px; font-size: 15px; color: var(--ink-strong); }
.op-app .op-file-line > span { flex: 1 1 0%; min-width: 0px; overflow-wrap: anywhere; }
.op-app .op-file-line svg { flex: 0 0 auto; margin-top: 2px; color: var(--ink-muted); }
.op-app .op-file-edit-trigger { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.op-app .op-file-edit .op-input { min-width: 0px; width: 100%; box-sizing: border-box; }
.op-app .op-label-search .op-input { border: 0px; padding-inline-start: 0px; box-shadow: none; }
.op-app .op-drive-editor > .op-section-label { margin: 0px; }
.op-app .op-field-label small { font-weight: 400; color: var(--ink-muted); }
.op-app .op-proposed { display: grid; gap: 12px; }
.op-app .op-proposed-head { display: flex; align-items: center; gap: 8px; margin: 0px; font-size: 15px; font-weight: 500; color: var(--ink-body); }
.op-app .op-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0px 6px; box-sizing: border-box; border-radius: 99px; background: var(--brand); color: rgb(255, 255, 255); font-size: 13px; font-weight: 700; }
.op-app .op-button.is-quiet.op-add-action { justify-self: start; border-color: rgb(223, 227, 227); }
.op-app .op-decision-wrap { display: grid; gap: 8px; justify-items: center; }
.op-app .op-decision { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 6px; border-radius: 10px; background: rgba(196, 202, 199, 0.3); border: 1px solid rgba(255, 255, 255, 0.6); }
.op-app .op-decision.is-floating { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; }
.op-app .op-approve { flex: 1 1 0%; min-width: 0px; }
.op-app .op-approve .op-kbd-group { margin-inline-start: 4px; }
.op-app .op-approve .op-key { background: transparent; color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.6); }
.op-app .op-approve .op-key-plus { color: rgba(255, 255, 255, 0.8); }
.op-app .design-phone-frame .op-decision-wrap { justify-items: stretch; }
.op-app .design-phone-frame .op-decision { width: 100%; box-sizing: border-box; }
.op-app .op-dialog-actions .op-button .op-kbd-group { margin-inline-start: 4px; }
.op-app .op-dialog-actions .is-primary .op-key { background: transparent; color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.6); }
.op-app .op-option-list .op-kbd-group { grid-area: 1 / 2 / span 2; align-self: center; }
.op-app .op-register select.op-input { min-height: 34px; padding-block: 4px; font-size: 13px; width: auto; }
.op-app .op-question-label { display: inline-flex; align-items: center; gap: 6px; margin: 0px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--info); }
.op-app .op-question-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.op-app .op-question-actions .op-button .op-kbd-group { margin-inline-start: 4px; }
.op-app .op-question-actions .is-primary .op-key { background: transparent; color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.6); }
.op-app .op-list-values .op-kbd-group { display: none; }
.op-app .op-offer { border-color: rgb(191, 238, 224); background: linear-gradient(180deg, #effbf7 0, var(--surface) 100px); }
.op-app .op-offer .op-question-label { color: var(--success); }
.op-app .op-offer-track { display: flex; gap: 3px; }
.op-app .op-offer-track span { flex: 1 1 0%; height: 8px; max-width: 14px; border-radius: 2px; background: var(--brand); }
.op-app .op-offer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.op-app .op-offer-columns > div { padding: 12px; border-radius: 8px; background: rgb(255, 255, 255); border: 1px solid rgb(236, 238, 238); }
.op-app .op-offer-columns ul { margin: 6px 0px 0px; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-strong); }
.op-app .op-inline-input .op-input { width: 90px; min-height: 32px; padding: 2px 8px; font-size: 14px; }
.op-app .op-offer.is-accepted .op-question-label { color: var(--success); }
.op-app .op-surge .op-question-label { color: rgb(146, 64, 14); }
.op-app .op-surge-list .photo-avatar { width: 30px; height: 30px; }
.op-app .op-surge-list li > span:not(.photo-avatar) { display: grid; gap: 1px; flex: 1 1 0%; min-width: 0px; font-size: 14px; }
.op-app .op-surge-list .photo-avatar { flex: 0 0 auto; }
.op-app .op-surge .op-question-actions a { text-decoration: none; }
.op-app .op-surge .op-question-actions button:disabled { opacity: 1; border-color: rgb(191, 238, 224); background: rgb(239, 251, 247); color: var(--success); }
.op-app .op-failed .op-question-label { color: var(--danger); }
.op-app .op-failed.is-uncertain .op-question-label { color: var(--warning); }
.op-app .op-steps .integration-logo { flex: 0 0 auto; }
.op-app .op-steps li.is-done > svg { color: var(--success); }
.op-app .op-decision .op-icon-button { user-select: none; }
.op-app .op-decision .op-icon-button.is-touch-revealed { position: relative; }
.op-app .op-decision .op-icon-button.is-touch-revealed .op-reveal { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); max-width: none; overflow: visible; margin: 0px; padding: 6px 9px; border-radius: 6px; background: var(--ink-strong); color: rgb(255, 255, 255); box-shadow: var(--shadow-popover); font-size: 12px; line-height: 1; opacity: 1; pointer-events: none; }
@media (hover: none) {
.op-app .op-decision .op-reveal { max-width: 0px; opacity: 0; margin-left: 0px; }
}
@media (hover: none) {
.op-app .op-decision .op-icon-button.is-touch-revealed .op-reveal { max-width: none; opacity: 1; margin: 0px; }
}
.op-app .op-approve { white-space: nowrap; }
.op-app .design-pin.is-active { outline: rgba(44, 206, 165, 0.45) solid 3px; }
.op-app .design-btn.is-primary { background: var(--brand); border-color: var(--brand); color: rgb(255, 255, 255); }
.op-app .op-settings-nav button.is-active { background: rgb(255, 255, 255); color: var(--ink-strong); box-shadow: rgba(35, 42, 39, 0.07) 0px 2px 9px; }
.op-app .op-settings-nav button.is-active svg { color: rgb(168, 121, 144); }
.op-app .op-activity-controls button.is-active { background: rgb(255, 255, 255); color: var(--ink-strong); box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 5px; }
.op-app .design-row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.op-app .design-lang .op-button { white-space: normal; }
.op-app .design-fieldset { border: 0px; margin: 0px; padding: 0px; display: grid; gap: 2px; }
.op-app .op-screen-original .email-message { margin: 0px; }
.op-app .op-screen-actions > .op-proposed { padding: 0px; border: 0px; background: transparent; }
.op-app .op-screen-actions > .op-decision-wrap { position: sticky; bottom: 16px; z-index: 2; }
.op-app .op-message-intro, .op-app .op-message-source { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-card); }
.op-app .op-message-intro > .op-item-header, .op-app .op-message-intro > .op-summary { border: 0px; border-radius: 0px; background: transparent; box-shadow: none; }
.op-app .op-message-intro > .op-item-header { padding: 22px 18px 18px; }
.op-app .op-message-intro > .op-summary { margin: 0px 18px; padding: 22px 6px 24px; border-top: 1px solid rgb(227, 231, 231); }
.op-app .op-message-intro > .op-flag { margin: -8px 24px 24px; }
.op-app .op-message-source .op-screen-original .original-card { border: 0px; border-radius: 0px; background: transparent; box-shadow: none; }
.op-app .op-people { margin: 0px 0px 20px; padding: 0px; border: 0px; border-radius: 0px; background: transparent; box-shadow: none; }
.op-app .op-people .op-section-label { display: none; }
.op-app .design-variant:target .op-message-decision .op-decision { width: 100%; }
.op-app .op-message-decision .op-decision { flex-wrap: wrap; justify-content: center; }
.op-app .op-ask-conversation { width: min(760px, 100%); display: grid; gap: 22px; margin: 0px auto; align-self: start; }
.op-app .op-ask-request { display: grid; gap: 5px; justify-self: end; width: min(560px, 88%); padding: 16px 18px; border-radius: 14px 14px 3px; background: rgb(48, 50, 52); color: rgb(255, 255, 255); }
.op-app .op-ask-request > span, .op-app .op-ask-question > span, .op-app .op-ask-superseded > span { font-size: 10px; letter-spacing: 0.12em; opacity: 0.7; }
.op-app .op-ask-request p { margin: 0px; font-size: 16px; line-height: 1.55; }
.op-app .op-ask-request small { display: flex; align-items: center; gap: 5px; opacity: 0.72; }
.op-app .op-ask-thinking, .op-app .op-ask-response { display: flex; align-items: flex-start; gap: 12px; padding: 17px 18px; border: 1px solid rgb(223, 227, 227); border-radius: 12px; background: rgba(255, 255, 255, 0.72); color: var(--ink-body); }
.op-app .op-ask-thinking > svg { flex: 0 0 auto; color: var(--brand); animation: 1.4s linear 0s infinite normal none running op-ask-spin; }
.op-app .op-ask-thinking > div { display: grid; gap: 10px; }
.op-app .op-ask-thinking strong, .op-app .op-ask-response strong { color: var(--ink-strong); }
.op-app .op-ask-thinking ol { display: grid; gap: 8px; margin: 0px; padding: 0px; list-style: none; font-size: 13px; }
.op-app .op-ask-thinking li { display: flex; align-items: center; gap: 7px; color: var(--ink-muted); }
.op-app .op-ask-thinking li.is-done { color: rgb(19, 117, 94); }
.op-app .op-ask-thinking li.is-active { color: var(--ink-strong); font-weight: 600; }
.op-app .op-ask-question button.is-quiet { min-height: 38px; display: block; border: 0px; color: var(--ink-muted); }
.op-app .op-ask-response.is-done { border-color: rgba(44, 206, 165, 0.45); background: rgba(232, 250, 244, 0.74); }
.op-app .op-ask-response.is-done > svg { color: var(--success); }
.op-app .op-ask-followup-composer { position: sticky; z-index: 3; bottom: 14px; display: grid; grid-template-columns: minmax(0px, 1fr) repeat(3, auto); align-items: end; gap: 7px; padding: 9px; border: 1px solid rgb(217, 221, 220); border-radius: 12px; background: rgb(255, 255, 255); box-shadow: rgba(35, 42, 39, 0.12) 0px 14px 34px; }
.op-app .op-ask-followup-composer textarea { min-height: 43px; max-height: 116px; padding: 10px 9px; border: 0px; resize: none; outline: 0px; color: var(--ink-strong); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 14px; line-height: 1.5; }
.op-app .op-ask-followup-composer button { width: 43px; height: 43px; display: grid; place-items: center; padding: 0px; border: 1px solid rgb(223, 227, 227); border-radius: 8px; background: rgb(255, 255, 255); color: var(--ink-body); }
.op-app .op-ask-followup-composer button:last-child { border-color: var(--ink-strong); background: var(--ink-strong); color: rgb(255, 255, 255); }
.op-app .op-ask-followup-composer button:disabled { border-color: rgb(217, 221, 220); background: rgb(233, 235, 234); color: rgb(165, 170, 168); }
.op-app .op-history-running { overflow: hidden; border: 1px solid rgb(236, 217, 145); border-radius: 11px; background: rgba(255, 251, 235, 0.88); }
.op-app .op-history-running > header { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding: 17px 18px; border-bottom: 1px solid rgba(185, 145, 24, 0.16); }
.op-app .op-history-running > header > div { display: flex; align-items: center; gap: 12px; }
.op-app .op-history-running > header > div > span { width: 38px; height: 38px; position: relative; display: grid; place-items: center; border-radius: 50%; background: rgb(255, 255, 255); color: rgb(152, 114, 15); }
.op-app .op-history-running > header b { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 99px; background: var(--ink-strong); color: rgb(255, 255, 255); font-size: 9px; }
.op-app .op-history-running h3, .op-app .op-history-running p { margin: 0px; }
.op-app .op-history-running h3 { color: var(--ink-strong); font-size: 17px; }
.op-app .op-history-running p, .op-app .op-history-running > header small { color: rgb(128, 111, 60); font-size: 11px; }
.op-app .op-running-row { display: grid; grid-template-columns: auto minmax(0px, 1fr) auto auto; align-items: center; gap: 12px; padding: 13px 18px; }
.op-app .op-running-row + .op-running-row { border-top: 1px solid rgba(185, 145, 24, 0.14); }
.op-app .op-running-row > div { display: grid; gap: 2px; }
.op-app .op-running-row strong { color: var(--ink-strong); font-size: 13px; }
.op-app .op-running-row span { color: rgb(128, 111, 60); font-size: 10px; }
.op-app .op-running-row time { color: rgb(138, 102, 16); font-size: 13px; font-variant-numeric: tabular-nums; }
.op-app .op-running-row button { min-height: 34px; padding: 6px 10px; border: 1px solid rgb(219, 197, 111); border-radius: 6px; background: rgb(255, 255, 255); color: rgb(111, 85, 17); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 11px; }
.op-app .op-history-kind button.is-active { border-bottom-color: var(--brand); color: var(--ink-strong); }
.op-app .op-kb-nav button.is-active { background: rgb(255, 255, 255); color: var(--ink-strong); box-shadow: rgba(35, 42, 39, 0.07) 0px 2px 9px; }
.op-app .op-kb-nav button.is-active svg { color: rgb(168, 121, 144); }
.op-app .op-kb-priority-row.is-normal { border-left-color: rgb(44, 206, 165); }
.op-app .op-kb-app-tabs button.is-active { border-color: rgb(168, 220, 204); color: var(--ink-strong); box-shadow: inset 0 -2px var(--brand); }
.op-app .op-kb-doc-workspace nav button.is-active { background: rgb(255, 255, 255); box-shadow: rgba(35, 42, 39, 0.07) 0px 3px 11px; }
.op-app .op-entity-types button.is-active { border-bottom-color: var(--brand); color: var(--ink-strong); }
.op-app .op-entity-type-icon.is-organisation { background: rgb(237, 240, 251); color: rgb(101, 117, 166); }
.op-app .op-entity-type-icon.is-project { background: rgb(255, 241, 228); color: rgb(184, 123, 64); }
.op-app .op-app-connection-tabs button.is-active { border-bottom-color: var(--brand); color: var(--ink-strong); font-weight: 600; }
.op-app .op-custom-tabs button.is-active { border-bottom-color: var(--brand); color: var(--ink-strong); }
.op-app .op-account-avatar .photo-avatar { width: 100%; height: 100%; border: 3px solid rgb(255, 255, 255); box-sizing: border-box; }
.op-app .op-account-panel button.is-primary { border-color: var(--brand); background: var(--brand); color: rgb(255, 255, 255); }
.op-app .op-onboarding-avatar .photo-avatar { width: 40px; height: 40px; }
.op-app .op-onboarding-progress li.is-done, .op-app .op-onboarding-progress li.is-current { border-bottom-color: var(--brand); }
.op-app .op-onboarding-progress li.is-done > span, .op-app .op-onboarding-progress li.is-current > span { border-color: var(--brand); background: var(--brand); color: rgb(255, 255, 255); }
.op-app .op-onboarding-intro li.is-active { color: var(--ink-strong); font-weight: 650; }
.op-app .op-onboarding-intro li.is-active > span { border-color: rgb(139, 221, 200); background: rgb(233, 250, 245); color: rgb(19, 120, 96); }
.op-app .op-onboarding-card button.is-primary { display: flex; align-items: center; gap: 6px; border-color: var(--brand); background: var(--brand); color: rgb(255, 255, 255); font-weight: 700; }
@media (max-width: 820px) {
.op-app .op-screen-actions > .op-decision-wrap { position: static; }
}
@media (max-width: 820px) {
.op-app .op-screen-actions .op-decision { width: 100%; }
}
@media (max-width: 820px) {
.op-app .op-screen-actions .op-approve .op-kbd-group { display: none; }
}
@media (max-width: 820px) {
.op-app .op-message-intro > .op-summary { margin-inline: 14px; padding-inline: 3px; }
}
@media (max-width: 820px) {
.op-app .op-ask-request, .op-app .op-ask-user-followup { width: 92%; }
}
@media (max-width: 820px) {
.op-app .op-ask-proposal .op-decision { width: 100%; }
}
@media (max-width: 820px) {
.op-app .op-ask-proposal .op-approve .op-kbd-group { display: none; }
}
@media (max-width: 820px) {
.op-app .op-running-row { grid-template-columns: auto minmax(0px, 1fr) auto; padding-inline: 13px; }
}
@media (max-width: 820px) {
.op-app .op-running-row time { grid-column: 2; }
}
@media (max-width: 820px) {
.op-app .op-running-row button { grid-area: 1 / 3 / span 2; }
}
.op-app .email-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; margin-block: 14px 18px; border-bottom: 1px solid rgb(227, 231, 231); padding-bottom: 14px; }
.op-app .email-head-text { min-width: 0px; display: grid; gap: 4px; }
.op-app .email-from { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.op-app .email-from strong { font-size: 14px; color: var(--ink-strong); }
.op-app .email-from span { font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }
.op-app .email-recipients { margin: 0px; display: grid; gap: 2px; }
.op-app .email-recipients-row { display: grid; grid-template-columns: 34px 1fr; gap: 6px; font-size: 12px; line-height: 1.6; }
.op-app .email-recipients-row dt { color: var(--ink-muted); }
.op-app .email-recipients-row dd { margin: 0px; color: var(--ink-body); display: flex; flex-wrap: wrap; column-gap: 5px; min-width: 0px; }
.op-app .email-recipient { overflow-wrap: anywhere; }
.op-app .email-date { font-size: 12px; color: var(--ink-muted); white-space: nowrap; padding-top: 2px; }
.op-app .email-message.is-outgoing { border-inline-start: 3px solid var(--brand); }
.op-app .email-message .original-card-heading { padding-bottom: 14px; border-bottom: 1px solid rgb(227, 231, 231); }
.op-app .email-message .original-card-heading + h2 { margin-top: 18px; }
@media (max-width: 600px) {
.op-app .email-head { grid-template-columns: auto 1fr; }
}
@media (max-width: 600px) {
.op-app .email-date { grid-column: 2; padding-top: 0px; }
}
.op-app .email-date { font-weight: 600; color: var(--ink-strong); }
.op-app .email-person { font: inherit; color: inherit; background: none; border: 0px; padding: 0px; cursor: pointer; text-align: start; border-radius: 3px; }
.op-app .email-heading-end { display: inline-flex; align-items: center; gap: 12px; }
.op-app .email-open-app { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-strong); text-decoration: none; border: 1px solid var(--line-strong); border-radius: 5px; padding: 3px 8px; background: rgb(255, 255, 255); }