.browser-app {
  --workspace: #f3f6f2;
  --panel: #fff;
  --rule: #dce5dd;
  --accent: #245244;
  font: 15px/1.5 system-ui, Arial, sans-serif;
  background: var(--workspace);
}
.browser-app header {
  justify-content: space-between;
  padding: 10px clamp(12px, 2vw, 24px);
  min-height: 72px;
}
.phone header .header-brand { min-width:0; }
.phone header .browser-brand-mark { display:none; }
.phone.browser-app header .header-brand { display:flex; align-items:center; gap:12px; }
.phone.browser-app header .brand-lockup { flex:0 1 auto; }
.phone.browser-app header .browser-brand-mark {
  display:block; flex:none; width:56px; height:56px;
}
@media (max-width:365px) {
  .phone.browser-app header .header-brand { gap:8px; }
  .phone.browser-app header .browser-brand-mark { width:42px; height:42px; }
}
.browser-app .about-layout {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:clamp(24px,6vw,64px); max-width:690px; padding:20px clamp(16px,4vw,32px);
  background:var(--panel); border:1px solid var(--rule); border-radius:14px;
}
.browser-app .about-copy p { margin:0 0 12px; }
.browser-app .about-copy .about-tagline { color:var(--accent); font-weight:700; }
.browser-app .about-copy ul { margin:0; padding-inline-start:1.35em; }
.browser-app .about-copy li+li { margin-block-start:6px; }
/* Center the printed seal within the whitespace of the supplied image. */
.browser-app .about-layout .approval-seal {
  position:relative; overflow:hidden; width:120px; height:120px;
  justify-self:center; border-radius:50%; background:#fff;
}
.browser-app .about-layout .approval-seal img {
  position:absolute; width:210px; height:auto; max-width:none; top:-80px; left:-44px;
}
@media (max-width:520px) {
  .browser-app .about-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
}
.phone.browser-app header .brand-lockup .brand { font-size: 27px; }
.phone .brand-lockup .browser-tagline,
.phone .brand-lockup .browser-free { display:none; }
.browser-app .brand-lockup .browser-tagline {
  display:block; margin-top:5px; color:#dce7dd; font:600 12px/1.35 system-ui,Arial,sans-serif; white-space:normal;
}
.browser-app .brand-lockup .browser-free {
  display:block; margin-top:3px; color:#f9f8ed; font:700 11px/1.35 system-ui,Arial,sans-serif; white-space:nowrap;
}
.browser-app .keypad-tagline,
.browser-app footer,
.browser-app #sub,
.browser-empty,
#chat-sidebar { display: none; }
.browser-app .browser-tools { display: flex; align-items: center; gap: 8px; }
.browser-app .browser-tools label { margin: 0 2px; font-size: 13px; color: #f0f6f2; }
.browser-app .browser-tools select,
.browser-app #install-app {
  font: inherit;
  font-size: 13px;
  color: #fff;
  background: #245244;
  border: 1px solid #91b7a7;
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 36px;
}
.browser-app .browser-tools select:focus-visible { outline: 2px solid #efd294; outline-offset: 2px; }
.browser-app #install-help {
  margin: 0;
  padding: 10px 18px;
  background: #fff1cf;
}
.browser-app #install-help p { margin:0; }
.browser-app #install-help p:not([hidden])+p:not([hidden]) { margin-block-start:4px; }
.browser-app #browser-chat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 15px;
  background: var(--panel);
  border-block-end: 1px solid var(--rule);
}
.browser-app #browser-chat-bar h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: start;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.browser-app main { padding: 16px; }
.browser-app main h1 { font-size: 24px; }
.browser-app main > form { max-width: 480px; }
.browser-app main > .stack { max-width: 580px; }
.browser-app #view button { text-align: start; }
.browser-app #view :is(.emoji-grid, .player-buttons, .equal-actions) button { text-align: center; }
.browser-app #view input:focus,
.browser-app .inline-composer textarea:focus {
  background: #fff;
  color: var(--ink);
  border-color: #547c6d;
  outline: 2px solid #8eb4a0;
  outline-offset: 1px;
  box-shadow: none;
}
.browser-app #view .stack > button::after { content: none; }
[dir="rtl"] .browser-app #view input[dir="ltr"] { text-align: right; }
[dir="rtl"] .browser-app .inline-composer textarea:placeholder-shown { direction: rtl; text-align: right; }
.browser-app .attachment-options > button,
.browser-app .chat-option-section .stack > button { min-height: 44px; padding: 10px 14px; }
.browser-app .chat-option-section {
  max-width: 540px;
  margin-block: 14px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--panel);
}
.browser-app .chat-option-section h2 { margin: 0 0 8px; }
.browser-app .chat-options-name { color: #52685d; text-align: start; }
.browser-app .chat-block { color: #802f2a; width: 100%; min-height: 44px; }
.browser-app .thread { gap: 9px; }
.browser-app .message { padding: 9px 13px; text-align: start; }
.browser-app .message-text { font-size: 16px; }
.browser-app .message .details,
.browser-app .day-divider { font-size: 12px; }
.browser-app .dock { display: grid; background: var(--panel); padding: 9px 14px; }
.browser-app .dock > button { width: 100%; }
.browser-app .inline-composer {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  width: min(100%, 920px);
  justify-self: center;
}
.browser-app .inline-composer textarea { margin: 0; min-height: 42px; max-height: 128px; padding: 9px 12px; resize: none; }
.browser-app .inline-composer .primary { width: auto; margin: 0; }
.browser-app .composer-tools { display: flex; align-items: center; gap: 7px; }
.browser-app .composer-tools .primary { margin-inline-start: auto; padding-inline: 20px; }
.browser-app .inline-composer p:empty { display: none; }
.browser-app .inline-composer p { margin: 0; }
.browser-app #view video.browser-player {
  margin: 8px auto;
  width: 100%;
  height: clamp(170px, 56vh, 620px);
  max-height: none;
  max-width: 1000px;
  object-fit: contain;
  background: #12241e;
  border-radius: 10px;
}
.browser-app #view audio.browser-player { max-width: 640px; }
.browser-app #chat-sidebar {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 14px;
  padding: 17px 12px 12px;
  background: var(--panel);
}
.browser-app .sidebar-title,
.browser-app .sidebar-search { display: grid; gap: 9px; padding-inline: 4px; }
.browser-app .sidebar-title h2 { margin: 0; font-size: 23px; }
.browser-app #sidebar-actions,
.browser-app #sidebar-account,
.browser-app .sidebar-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.browser-app .sidebar-search input { margin: 0; min-height: 42px; }
.browser-app .sidebar-filters button {
  min-height: 32px;
  border-color: transparent;
  border-radius: 20px;
  padding-inline: 12px;
}
.browser-app .sidebar-filters [aria-pressed="true"] { background: #e1eee6; color: #173b2d; border-color: #bdd3c5; }
.browser-app #sidebar-account { border-block-start: 1px solid var(--rule); padding: 10px 4px 0; }
.browser-app #sidebar-account button { font-size: 12px; }
.browser-app #sidebar-list { flex: 1 1 auto; overflow: auto; align-content: start; }
.browser-app #sidebar-list .chat-button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  min-height: 68px;
  text-align: start;
  padding: 10px 9px;
}
.browser-app #sidebar-list .chat-button:hover { background: #f2f7f3; }
.browser-app #sidebar-list .chat-button::after { content: none; }
.browser-app #sidebar-list .chat-avatar {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: #e5eee8;
  color: #245244;
  font-size: 16px;
  font-weight: 750;
}
.browser-app #sidebar-list .group-avatar { background: #f1e8d4; color: #705a2f; }
.browser-app .group-avatar::before,
.browser-app .group-avatar::after { content: ""; position: absolute; background: currentColor; }
.browser-app .group-avatar::before {
  inset-block-start: 11px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 9px 1px currentColor;
}
.browser-app .group-avatar::after {
  inset-block-start: 20px;
  left: 10px;
  width: 11px;
  height: 8px;
  border-radius: 6px 6px 2px 2px;
  box-shadow: 9px 1px currentColor;
}
.browser-app #sidebar-list :is(.chat-row-heading, .chat-row-preview) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  text-align: start;
}
.browser-app #sidebar-list :is(.sidebar-chat-name, .chat-preview) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.browser-app #sidebar-list .sidebar-chat-name { font-size: 15px; font-weight: 750; }
.browser-app #sidebar-list .chat-preview { font-size: 13px; }
.browser-app #sidebar-list .chat-time { font-size: 11px; white-space: nowrap; }
.browser-app #sidebar-list .chat-unread-status {
  width: 7px;
  height: 7px;
  overflow: hidden;
  border-radius: 50%;
  background: #377253;
  font-size: 0;
}
.browser-app #sidebar-list .chat-unread-status:empty { visibility: hidden; }
.browser-app #sidebar-list [aria-current="true"] {
  background: #e3efe7;
  border-color: #8eb4a0;
  box-shadow: inset 0 0 0 1px #c5dacf;
}
.browser-app #sidebar-list .empty { padding-inline: 8px; }
.browser-app[data-screen="home"] #dock { display: none; }
.browser-app :is(.reply-quote, .welcome) { border-left: 0; border-inline-start: 3px solid #6c9785; }
.browser-app .device-ref,
.browser-app .recovery-code,
.browser-app video,
.browser-app audio { direction: ltr; }
.browser-app .large-text .message-text,
.browser-app.large-text .message-text { font-size: 19px; }

@media (max-width: 759px) {
  .browser-app[data-screen="home"] #chat-sidebar { display: flex; }
  .browser-app[data-screen="home"] #view { display: none; }
  .browser-app .browser-tools label { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
}
@media (max-width: 365px) {
  .browser-app header { gap: 5px; }
  .phone.browser-app header .brand-lockup .brand { font-size: 23px; }
  .browser-app .browser-tools { gap: 5px; }
  .browser-app #install-app { padding-inline: 6px; }
}

@media (min-width: 760px) {
  .browser-app {
    display: grid;
    grid-template-columns: minmax(270px, 325px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "header header"
      "install install"
      "status status"
      "sidebar title"
      "sidebar content"
      "sidebar actions";
  }
  .browser-app header { grid-area: header; }
  .browser-app #install-help { grid-area: install; }
  .browser-app #connection { grid-area: status; }
  .browser-app #browser-chat-bar { grid-area: title; padding-inline: clamp(18px, 3vw, 42px); }
  .browser-app .back-to-chats { display: none; }
  .browser-app main { grid-area: content; padding: 22px clamp(18px, 3vw, 42px); }
  .browser-app .dock { grid-area: actions; padding-inline: clamp(18px, 3vw, 42px); }
  .browser-app:not(.with-sidebar) main,
  .browser-app:not(.with-sidebar) .dock { grid-column: 1 / -1; }
  .browser-app:not(.with-sidebar) main { width: min(100%, 680px); justify-self: center; }
  .browser-app.with-sidebar #chat-sidebar {
    grid-area: sidebar;
    display: flex;
    border-inline-end: 1px solid var(--rule);
  }
  .browser-app[data-screen="home"] #view { display: grid; place-items: center; }
  .browser-app[data-screen="home"] #view > :not(.browser-empty) { display: none; }
  .browser-app[data-screen="home"] .browser-empty {
    display: block;
    max-width: 380px;
    padding: 22px;
    text-align: center;
  }
  .browser-app .browser-empty h2 { margin: 0 0 7px; font-size: 23px; }
  .browser-app .browser-empty p { color: #52685d; margin: 0; }
  .browser-app .thread { max-width: 920px; margin-inline: auto; }
  .browser-app .message { min-width: min(164px, 75%); max-width: 80%; }
  .browser-app .inline-composer { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .browser-app .inline-composer > p { grid-column: 1 / -1; }
  .browser-app #view video.browser-player { height: clamp(260px, 63vh, 680px); }
}
.browser-app .browser-tools select:lang(he), .browser-app .browser-tools select:lang(yi),
.browser-app #install-app:lang(he), .browser-app #install-app:lang(yi) { direction:rtl; }

.browser-app .catch-up-counts,.browser-app .quick-replies,.browser-app .record-actions {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.browser-app .catch-up-counts { justify-content:center; }
.browser-app[data-screen="catch-up"] .catch-up-counts { justify-content:flex-start; margin-bottom:16px; }
.browser-app .catch-up-results button,.browser-app .card-list-item {
  display:block; width:100%; padding:12px; text-align:start;
}
.browser-app .catch-up-snippet,.browser-app .card-list-item small { display:block; margin-top:4px; }
.browser-app .catch-up-results img {
  display:block; max-width:120px; height:auto; margin-top:8px; border-radius:6px;
}
.browser-app .card-kind {
  display:block; margin:0 0 4px; font-weight:700; color:var(--accent);
}
.browser-app .chat-card { padding:16px; border:1px solid var(--rule); border-radius:12px; background:var(--panel); }
.browser-app .chat-card h2 { margin:0 0 12px; font-size:20px; }
.browser-app .chat-card .card-votes { margin:14px 0; }
.browser-app .card-votes button,.browser-app .signup-slot {
  display:flex; align-items:center; gap:8px; justify-content:space-between; text-align:start;
}
.browser-app .card-votes button[aria-pressed="true"] { background:#dfefe5; border-color:#628e78; }
.browser-app .signup-slot,.browser-app .signup-private {
  border:1px solid var(--rule); border-radius:8px; padding:8px 12px;
}
.browser-app .signup-private { margin-top:12px; background:#f1f6ef; }
.browser-app .message-actions { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.browser-app .message-actions > * {
  border:1px solid var(--rule); border-radius:8px; background:var(--panel);
  color:var(--ink); padding:7px 10px; text-align:start; font-size:14px;
}
.browser-app .message-actions bdi { display:block; font-size:12px; font-weight:400; }
.browser-app .inline-composer .quick-replies { grid-column:1/-1; }
.browser-app .record-actions > p { flex-basis:100%; margin:0; }
.browser-app .record-actions > p:empty { display:none; }
.browser-app .player-buttons { max-width:420px; }
.browser-app.large-text .detail-text,.browser-app.large-text textarea { font-size:19px; }
.browser-app .browser-tools { flex-wrap:wrap; justify-content:flex-end; }
.browser-app header > div.browser-tools { white-space:normal; overflow:visible; }
@media (min-width:760px) {
  .browser-app[data-screen="home"] .browser-empty { max-width:570px; }
}
.browser-app .poll-number { color:var(--muted); }
.browser-app .card-message-options { margin-top:10px; }
.browser-app .chat-card-form label { display:block; }
@media (max-width: 400px) {
  .browser-app .composer-tools { flex-wrap:wrap; }
  .browser-app .browser-tools select,.browser-app #install-app { padding-inline:5px; font-size:12px; }
}

.browser-app .message .pinned-plan {
  display:inline-block; padding:2px 7px; border-radius:6px; color:var(--accent); background:var(--sage);
}
.browser-app .attach-card-section { margin-block-start:18px; }
.browser-app .attach-cards > button { min-height:44px; padding:10px 14px; }
.browser-app[data-screen="catch-up"] #dock { min-width:0; }
.browser-app[data-screen="catch-up"] #dock > button { grid-column:1/-1; }
@media(max-width: 759px) {
  .browser-app header { flex-wrap:wrap; gap:7px; }
  .browser-app header .header-brand { flex:1 1 100%; }
  .browser-app header .browser-tools { justify-content:flex-start; }
  .browser-app[data-screen="catch-up"] #chat-sidebar { display:none; }
}
@media(max-width: 480px) {
  .browser-app .inline-composer .primary { padding-inline:12px; }
  .browser-app .composer-tools { flex-wrap:wrap; }
}

/* Shared cards use the chat’s typography and a category accent. */
.browser-app .sharing-recipe { --share-accent:#35624a; --share-wash:#f1f7ed; --share-rule:#c9ddc7; }
.browser-app .sharing-simcha { --share-accent:#795519; --share-wash:#fff8e9; --share-rule:#ead6aa; }
.browser-app .sharing-deal { --share-accent:#275575; --share-wash:#eef6fb; --share-rule:#c7dce8; }
.browser-app .sharing-tiles,
.browser-app .sharing-results {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:10px;
}
.browser-app :is(.sharing-tile,.sharing-result) {
  display:grid; gap:5px; align-content:start; min-width:0; padding:14px;
  border:1px solid var(--share-rule); border-radius:12px; background:var(--share-wash); color:var(--ink);
}
.browser-app .sharing-tile strong { color:var(--share-accent); font-size:1.05em; }
.browser-app .sharing-tile span { font-size:.9em; }
.browser-app :is(.sharing-tile,.sharing-result):not(:disabled):hover {
  border-color:var(--share-accent); background:var(--share-wash);
}
.browser-app .sharing-tile:disabled { opacity:.66; }
.browser-app .sharing-section { max-width:760px; }
.browser-app .sharing-message.bubble {
  width:min(100%,320px); max-width:min(89%,350px); min-width:0;
  background:var(--share-wash); border-color:var(--share-rule); padding:10px 13px;
}
.browser-app .sharing-message.bubble:hover { border-color:var(--share-accent); }
.browser-app .sharing-message .details { color:#43594e; }
.browser-app .sharing-pieces {
  display:grid; gap:5px; width:100%; min-width:0; padding:2px 0; overflow-wrap:anywhere;
}
.browser-app .sharing-pieces img {
  display:block; width:100%; aspect-ratio:16/8; object-fit:cover;
  border-radius:8px; margin:4px 0 6px; max-height:152px;
}
.browser-app .sharing-eyebrow { color:var(--share-accent); font-size:.77em; font-weight:750; }
.browser-app .sharing-simcha .sharing-eyebrow { font-family:Georgia,serif; font-size:1.37em; }
.browser-app .sharing-title { font-size:1.16em; font-weight:750; line-height:1.27; }
.browser-app .sharing-open { color:var(--share-accent); font-size:.87em; font-weight:700; margin-block-start:4px; }
.browser-app .sharing-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.browser-app .sharing-price strong { color:var(--share-accent); font-size:1.25em; }
.browser-app .sharing-price s { color:#4d6271; }
.browser-app .sharing-state {
  justify-self:start; padding:2px 8px; border-radius:12px; background:#fff;
  border:1px solid var(--share-rule); color:#435361; font-size:.83em; font-weight:700;
}
.browser-app .sharing-layout { display:grid; gap:18px; align-items:start; max-width:1000px; }
.browser-app .sharing-form, .browser-app .sharing-preview {
  min-width:0; padding:clamp(12px,2vw,20px); background:var(--panel); border:1px solid var(--rule); border-radius:14px;
}
.browser-app .sharing-form :is(select,textarea,input) { width:100%; font:inherit; min-width:0; }
.browser-app .sharing-form :is(input,select,textarea):focus-visible { outline:2px solid #8eb4a0; outline-offset:1px; }
.browser-app .sharing-form input[type=file] { font-size:.88em; padding:8px; }
.browser-app .sharing-form select {
  display:block; min-height:42px; margin-top:4px; padding:8px;
  background:#fff; color:var(--ink); border:1px solid #879f91; border-radius:8px;
}
.browser-app .sharing-form textarea { resize:vertical; }
.browser-app .sharing-form > p:first-child { margin-top:0; }
.browser-app .sharing-form label { display:block; margin:0; min-width:0; }
.browser-app .sharing-fields,
.browser-app .sharing-simcha-fields,
.browser-app .sharing-fold[open],
.browser-app .sharing-event { display:grid; gap:10px; min-width:0; }
.browser-app .sharing-field-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,105px),1fr)); gap:8px;
}
.browser-app .sharing-event,
.browser-app .sharing-fold {
  margin:0; padding:10px; border:1px solid var(--rule); border-radius:9px; background:#fbfdfb;
}
.browser-app .sharing-event legend,
.browser-app .sharing-fold summary { padding-inline:4px; color:var(--accent); font-weight:700; }
.browser-app .sharing-fold summary { cursor:pointer; }
.browser-app .sharing-preview h2 { font-size:1em; margin:0 0 10px; }
.browser-app .sharing-preview .sharing-pieces,
.browser-app .sharing-detail .sharing-pieces {
  display:grid; gap:7px; padding:16px; background:var(--share-wash);
  border:1px solid var(--share-rule); border-radius:10px;
}
.browser-app .sharing-preview .sharing-body { margin-block-start:12px; max-height:300px; overflow:auto; overflow-wrap:anywhere; }
.browser-app .sharing-detail {
  max-width:790px; min-width:0; padding:clamp(12px,3vw,24px); background:var(--panel);
  border:1px solid var(--rule); border-radius:14px; overflow-wrap:anywhere;
}
.browser-app .sharing-detail .sharing-pieces img { max-height:330px; object-fit:contain; }
.browser-app .sharing-detail .sharing-title { font-size:clamp(1.4rem,3vw,2rem); }
.browser-app .sharing-byline { display:block; color:#455f52; font-size:.82em; }
.browser-app .sharing-detail-actions,.browser-app .sharing-filters {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-block-start:12px;
}
.browser-app .sharing-filters { margin-block-end:14px; }
.browser-app :is(.sharing-detail-actions,.sharing-filters) button { min-height:38px; }
.browser-app :is(.sharing-detail-actions,.sharing-filters) button[aria-pressed=true] {
  background:#e1eee7; border-color:#83a897; color:#17372e;
}
.browser-app .sharing-store-link {
  display:inline-block; background:#245244; color:white; padding:8px 13px; border-radius:8px; font-weight:700;
}
.browser-app .sharing-body section { min-width:0; padding-block:7px; }
.browser-app .sharing-body :is(h3,p,ol,ul) { margin:0 0 8px; }
.browser-app .sharing-body p { white-space:pre-wrap; }
.browser-app .sharing-body h3 { font-size:1em; color:#29493a; }
.browser-app .recipe-columns { display:grid; gap:8px 20px; }
.browser-app .recipe-columns > section { background:#f7faf7; padding:12px; border-radius:9px; }
.browser-app .recipe-columns :is(ol,ul) { padding-inline-start:1.25em; }
.browser-app .recipe-ingredients:has(input) { padding:0; list-style:none; }
.browser-app .recipe-ingredients label { display:flex; gap:8px; align-items:baseline; margin:0 0 6px; }
.browser-app .recipe-ingredients input { width:auto; min-height:0; margin:0; }
.browser-app .recipe-ingredients label:has(:checked) span { text-decoration:line-through; color:#53625a; }
.browser-app .recipe-progress { display:block; font-size:.82em; color:#455f52; margin-block-end:8px; }
.browser-app .recipe-directions li+li { margin-block-start:6px; }
.browser-app .simcha-event-summary { border-block-start:1px solid #ead6aa; }
.browser-app .sharing-code { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
.browser-app .sharing-code bdi { padding:2px 7px; border-radius:6px; background:#eef6fb; font-family:monospace; }
.browser-app .shared-library { max-width:850px; }
.browser-app .shared-library > button { margin-block-start:10px; }
.browser-app .sharing-side-panel {
  padding:14px; border:1px solid var(--rule); border-radius:14px;
  min-width:0; background:var(--panel); align-self:start;
}
.browser-app .sharing-side-panel .sharing-results { grid-template-columns:minmax(0,1fr); }
.browser-app .sharing-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.browser-app .sharing-panel-heading h2 { margin:0; font-size:1.05em; }
@media (min-width:600px) {
  .browser-app .sharing-detail .recipe-columns { grid-template-columns:minmax(0,2fr) minmax(0,3fr); }
}
@media (min-width:1020px) {
  .browser-app .sharing-layout { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
  .browser-app .sharing-preview { position:sticky; top:0; }
}
@media (min-width:1080px) {
  .browser-app #view.with-shared-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,34%); gap:16px; align-items:start; }
  .browser-app #view.with-shared-panel .thread { width:100%; min-width:0; }
  .browser-app .sharing-side-panel { position:sticky; top:0; max-height:calc(100vh - 240px); overflow:auto; }
}
@media (max-width:1079px) {
  .browser-app #browser-chat-bar .shared-panel-trigger { display:none; }
}
.browser-app .preview-card-button { margin-block-start:8px; }
@media (min-width:1020px) {
  .browser-app .preview-card-button { display:none; }
}

.browser-app .sharing-detail .sharing-eyebrow { font-size:.83em; }
.browser-app .sharing-detail.sharing-simcha .sharing-eyebrow { font-size:1.37em; }
.browser-app[data-screen="shared-card"] #view > h1:focus { outline:none; background:transparent; }