livechat 0.8.2 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fae79e3391f4f16e1823d4d9b8755061c5ae66a4651d36f19b47448cae320f25
-  data.tar.gz: a65a2fad39a547c6ce06c4b9d6d25cea355868ae848819f155e01038fe6d1ee4
+  metadata.gz: 77c8f578ea3bb8e56ae6e93c3ffc3194bbec65a1952d7e7f3e2152986bc12388
+  data.tar.gz: bb5e62c493d8aef5e20a82884ed43213f2671543bee6e06d2aa1a352a55f9d25
 SHA512:
-  metadata.gz: 812f2d09748da467a8d79d1921520f03b643d3430d1e53b159e3d1801a5fb79e9e64310db905edb2332ce4f8a5b6dfbcdfdaf2a68bb0efc4d4c017df9337c35c
-  data.tar.gz: 0417f271610f0139a39e9b921d16a59c30b6bda3f226563dca618a3d6405b928675755c6a7ece46c677e3cab516dcbe20e8d1b3e3c394592fe901fe7c1cd717a
+  metadata.gz: f77110e02430ef730ac85ad64be4a05f4fd588035c384284e14374ebebbb40b3c5537df63e3d6128d20db2f1891836f54c90f223a087f123fa946893b8ea63d1
+  data.tar.gz: da4da0a2cfa71838e93434cdf3d0d88fd5a6fc15a24754369977d7e3064d5052b28cf6d29055db044b3132acbaf50d832f97a4eb6ef2a565d58edd37e27bbd84

data/AGENTS.md

@@ -176,5 +176,6 @@ Conventions this codebase holds to — follow them rather than the first thing t
 - **The widget is plain ES5-style JS served by the engine**, no build step, no framework, config read from a JSON block so a Turbo visit re-reads the current page's settings.
 - **Visitor scoping is never by conversation id.** The widget's endpoints resolve the thread from the signed-in id or the guest cookie, so no id in a request can address someone else's conversation. Keep it that way.
 - **The dummy app pins `config.active_job.queue_adapter = :test`.** Do not remove it or let it drift back to the `:async` default. Attaching a file enqueues Active Storage's analysis job, and `:async` runs it on a background thread that checks out its own connection — writes no test transaction covers, landing in the middle of whatever runs next. That is a suite that fails order-dependently in a test which never created a row, and it is miserable to trace back.
+- **`lib/livechat/dashboard.css` is half shared.** Everything above the `GEM-SPECIFIC` banner is the design system all five gems in the family ship — the same tokens, the same `.page-head`/`.tabs`/`.filters`/`.card`/`.badge`/`button`, the same `.dashboard-shell` + `.record-row` + `.detail-panel` two-pane dashboard — identical in every repo apart from the `lvc` prefix. Diff it against a sibling before changing it, and carry the change to the other four. Anything only this gem has goes below the banner. New dashboard markup reuses the shared class names rather than inventing a domain-specific one.
 - Every user-facing change bumps `lib/livechat/version.rb` and adds a `CHANGELOG.md` entry that says what it costs, not only what it adds.
 - Commit messages are prose that explains the tradeoff — read `git log` before writing one.

data/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## 0.9.1
+
+- **The conversation heading reads as one block.** The visitor's email and locale
+  moved out of their own row and sit directly under the name, inside a
+  `.panel-titles` wrapper, and the open/resolved switch is pinned to the right
+  edge of the heading row with `margin-left: auto` rather than relying on the
+  row's `space-between` — a long name no longer drags the switch inward. If you
+  targeted `.context-line` as a child of `.detail-panel`, it is now a child of
+  `.panel-head`.
+
+## 0.9.0
+
+- **One design system across the family.** The stylesheet now opens with a
+  shared core — the colour tokens, `.page-head`, `.tabs`, `.filters`, `.card`,
+  `.badge`, buttons and form controls, and the `.dashboard-shell` +
+  `.record-row` + `.detail-panel` two-pane dashboard — identical in all five
+  gems of the family, apart from the `--lvc-` prefix. The five had drifted:
+  sidebars between 380px and 430px, reading columns between 860px and 1020px,
+  two different tab styles and three different button styles. The sidebar is
+  now 330–430px everywhere, a reading page 1020px, a dashboard 1280px.
+  Everything below the `GEM-SPECIFIC` banner is what only this gem has.
+- **The inbox markup uses the shared class names.** `.inbox-shell`,
+  `.inbox-sidebar` and `.inbox-thread` are `.dashboard-shell`,
+  `.dashboard-sidebar` and `.dashboard-detail`; `.conversation-list`,
+  `.conversation-row`, `.conversation-main`, `.conversation-topline`,
+  `.conversation-meta`, `.conversation-time` and `.conversation-side` are
+  `.record-*`, with `.conversation-name` becoming `.record-name` and
+  `.conversation-preview` `.record-copy`; `.conversation-panel` is
+  `.detail-panel` and its `.head-row` is `.panel-head`. The body class on the
+  inbox is `lvc-index` (was `lvc-inbox`) and the polling element is
+  `#lvc-poll` (was `#lvc-index`). A conversation row now reads name, then
+  message preview, then ids — the order the sibling gems use. If you styled or
+  scripted any of those names in a host app, that is the breaking change — no
+  configuration, route or database change is involved.
+- **The narrow-screen rules work again.** The `max-width: 760px` block sat above
+  the component rules it means to override, and CSS nesting adds no specificity,
+  so the desktop grid won every tie: showing one pane at a time on a phone had
+  quietly stopped working. The media query moved to the end of the file.
+- Smaller fixes that came with the shared core: a submit input is styled as a
+  button rather than a full-width field, the filter row keeps its search box and
+  button on one line, and a `code.key` truncates inside a list row instead of
+  wrapping over three lines.
+
 ## 0.8.0
 
 - **`config.agent_layout` now works on its own.** The inbox's stylesheet and

data/README.md

@@ -316,16 +316,6 @@ bundle exec rake test
 bundle exec rubocop
 ```
 
-## Also by the same author
-
-- [testimonials](https://github.com/yshmarov/testimonials) — testimonials,
-  reviews and NPS for Rails.
-- [ideasbugs](https://github.com/yshmarov/ideasbugs) — in-app bug reports and
-  feature requests.
-- [i18n_proofreading](https://github.com/yshmarov/i18n_proofreading) — in-context
-  translation proofreading.
-- [SupeRails](https://superails.com) — Rails screencasts.
-
 ## One family
 
 Five Rails engines built on the same backbone, so adopting a second one is
@@ -341,9 +331,9 @@ mostly muscle memory:
 
 They share the install shape (`generate <gem>:install`, mount, one initializer),
 the same host hooks (`base_controller_class` to inherit your admin's controller,
-`agent_layout` for just the shell), a dashboard stylesheet scoped so it
-cannot touch your own CSS, and migrations that follow your app's
-`primary_key_type`.
+`agent_layout` for just the shell), one dashboard design system — the same
+two-pane layout, colour tokens and components in all five, scoped so it cannot
+touch your own CSS — and migrations that follow your app's `primary_key_type`.
 
 ## License
 

data/app/views/livechat/conversations/_thread_panel.html.erb

@@ -1,6 +1,17 @@
-<div class="conversation-panel">
-  <div class="head-row">
-    <h1><%= conversation.display_name %> <span class="case-id">#<%= conversation.id %></span></h1>
+<div class="detail-panel">
+  <div class="panel-head">
+    <%# The name with the visitor's context directly under it, so the status
+        toggle on the right of the row clears both. %>
+    <div class="panel-titles">
+      <h1><%= conversation.display_name %> <span class="case-id">#<%= conversation.id %></span></h1>
+      <%# One quiet line of live context: who the visitor is and the language to answer in. %>
+      <p class="muted context-line">
+        <% context = [] %>
+        <% context << conversation.visitor_email if conversation.visitor_email.present? %>
+        <% context << conversation.locale if conversation.locale.present? %>
+        <%= safe_join(context, ' · ') %>
+      </p>
+    </div>
     <% if conversation.open? %>
       <%= button_to resolve_conversation_path(conversation), method: :post,
                     form_class: 'status-toggle-form',
@@ -20,14 +31,6 @@
     <% end %>
   </div>
 
-  <%# One quiet line of live context: who the visitor is and the language to answer in. %>
-  <p class="muted context-line">
-    <% context = [] %>
-    <% context << conversation.visitor_email if conversation.visitor_email.present? %>
-    <% context << conversation.locale if conversation.locale.present? %>
-    <%= safe_join(context, ' · ') %>
-  </p>
-
   <div class="card">
     <% last = messages.last %>
     <% cable = livechat_cable_data("livechat:conversation:#{conversation.id}") %>

data/app/views/livechat/conversations/index.html.erb

@@ -1,10 +1,12 @@
-<% content_for :body_class, 'lvc-inbox' %>
+<% content_for :body_class, 'lvc-index' %>
 
 <%= render layout: 'livechat/shared/dashboard' do %>
-  <h1><%= t('livechat.dashboard.title', default: 'LiveChat') %></h1>
+  <div class="page-head">
+    <h1><%= t('livechat.dashboard.title', default: 'LiveChat') %></h1>
+  </div>
 
-  <div class="inbox-shell <%= 'has-selected' if @selected_conversation %>">
-    <aside class="inbox-sidebar" aria-label="<%= t('livechat.dashboard.conversations', default: 'Conversations') %>">
+  <div class="dashboard-shell <%= 'has-selected' if @selected_conversation %>">
+    <aside class="dashboard-sidebar" aria-label="<%= t('livechat.dashboard.conversations', default: 'Conversations') %>">
       <div class="tabs">
         <% Livechat::Conversation::STATUSES.each do |status| %>
           <%= link_to conversations_path(status: status, q: @query), class: ('active' if @status == status) do %>
@@ -25,12 +27,12 @@
       <%# The list keeps itself fresh (dashboard.js reloads when the token moves) —
           unless the agent is mid-search or mid-reply, whose typing must never be eaten. %>
       <% cable = livechat_cable_data('livechat:inbox') %>
-      <div id="lvc-index" data-poll-url="<%= poll_conversations_path %>"
+      <div id="lvc-poll" data-poll-url="<%= poll_conversations_path %>"
            data-token="<%= [Livechat::Message.maximum(:id).to_i, Livechat::Conversation.count,
                             @counts.fetch('open', 0)].join('-') %>"
            <%= tag.attributes(data: cable) if cable.any? %>></div>
 
-      <div class="conversation-list">
+      <div class="record-list">
         <% if @conversations.empty? %>
           <p class="empty"><%= t('livechat.dashboard.empty',
                                  default: 'Nothing here. When a visitor writes, the conversation lands on this page.') %></p>
@@ -39,27 +41,29 @@
             <% unread = @unread.fetch(conversation.id, 0) %>
             <%= link_to conversations_path(status: @status, q: @query, offset: @offset,
                                            conversation_id: conversation.id),
-                        class: ['conversation-row',
+                        class: ['record-row',
                                 ('active' if @selected_conversation&.id == conversation.id),
                                 ('unread' if unread.positive?)].compact do %>
-              <span class="conversation-main">
-                <span class="conversation-topline">
-                  <span class="conversation-name"><%= conversation.display_name %></span>
-                  <span class="muted conversation-time">
+              <span class="record-main">
+                <span class="record-topline">
+                  <span class="record-name"><%= conversation.display_name %></span>
+                  <span class="muted record-time">
                     <% if conversation.last_activity_at %>
                       <%= time_ago_in_words(conversation.last_activity_at) %>
                     <% end %>
                   </span>
                 </span>
-                <span class="muted conversation-meta">
+                <%# Same row shape as the sibling gems: the name and time on top,
+                    the copy that identifies the record, then the muted ids. %>
+                <span class="muted record-copy"><%= conversation.last_message_preview %></span>
+                <span class="muted record-meta">
                   <span class="case-id">#<%= conversation.id %></span>
                   <% if conversation.visitor_email.present? && conversation.visitor_email != conversation.display_name %>
                     <span><%= conversation.visitor_email %></span>
                   <% end %>
                 </span>
-                <span class="muted conversation-preview"><%= conversation.last_message_preview %></span>
               </span>
-              <span class="conversation-side">
+              <span class="record-side">
                 <% if unread.positive? %>
                   <span class="badge unread-count"><%= unread %></span>
                 <% end %>
@@ -88,7 +92,7 @@
       </div>
     </aside>
 
-    <main class="inbox-thread" aria-label="<%= t('livechat.dashboard.current_chat', default: 'Current chat') %>">
+    <main class="dashboard-detail" aria-label="<%= t('livechat.dashboard.current_chat', default: 'Current chat') %>">
       <% if @selected_conversation %>
         <p class="mobile-back">
           <%= link_to "← #{t('livechat.dashboard.back', default: 'All conversations')}",

data/lib/livechat/dashboard.css

@@ -4,51 +4,56 @@
  *
  *   :root            custom properties, all `--lvc-` prefixed so they can
  *                    neither overwrite a host's nor be overwritten by them.
- *   .lvc-page         the page frame (was bare html/body). Only the gem's own
+ *   .lvc-page        the page frame (was bare html/body). Only the gem's own
  *                    layout puts this class on <body>, so inside a host admin
  *                    these rules simply do not apply.
- *   .lvc-dashboard    everything else, nested. Names like .container, .card
+ *   .lvc-dashboard   everything else, nested. Names like .container, .card
  *                    and .tabs are confined to the dashboard's own markup, so
  *                    loading this file inside a host cannot restyle its chrome.
  *
  * Nothing here styles a bare `body`, `a`, `table` or `*` at the top level.
+ *
+ * Two sections follow: the design system shared by the whole gem family,
+ * then what only this gem has. A rule that belongs in the shared section
+ * belongs in all five copies of it.
+ *
+ * Order inside a section matters — components, then the page frame, then the
+ * narrow-screen overrides. Nesting adds no specificity, so the last rule
+ * wins the ties, and an override placed before the rule it means to beat
+ * silently does nothing.
  */
 
+/* ---------------------------------------------------------------------------
+ * SHARED CORE — identical in testimonials, ideasbugs, livechat, product_tours
+ * and i18n_proofreading apart from the prefix. Diff it against a sibling gem
+ * before you change it, and carry the change to all five.
+ * ------------------------------------------------------------------------- */
 
 :root {
-      color-scheme: light dark;
-      --lvc-bg: #f6f7f9; --lvc-surface: #fff; --lvc-text: #1c2024; --lvc-muted: #6b7280;
-      --lvc-border: #e5e7eb; --lvc-accent: #2563eb; --lvc-accent-text: #fff;
-      --lvc-open: #16a34a; --lvc-resolved: #6b7280; --lvc-danger: #dc2626;
+  color-scheme: light dark;
+  --lvc-bg: #f6f7f9;
+  --lvc-surface: #fff;
+  --lvc-text: #1c2024;
+  --lvc-muted: #6b7280;
+  --lvc-border: #e5e7eb;
+  --lvc-accent: #2563eb;
+  --lvc-accent-text: #fff;
+  --lvc-code: #f0f1f3;
+  /* The four semantic states every gem in the family badges something with. */
+  --lvc-success: #16a34a;
+  --lvc-warning: #d97706;
+  --lvc-danger: #dc2626;
+  --lvc-neutral: #6b7280;
 }
 @media (prefers-color-scheme: dark) {
   :root {
-        --lvc-bg: #111418; --lvc-surface: #1a1f26; --lvc-text: #e6e8ea; --lvc-muted: #9aa2ab;
-        --lvc-border: #2a313a; --lvc-accent: #3b82f6;
-}
-}
-@media (max-width: 760px) {
-  .lvc-page { font-size: 14px; }
-  .lvc-inbox { overflow: auto; }
-  .lvc-inbox, .lvc-inbox .container { min-height: 100vh; height: auto; }
-  .lvc-inbox .container { padding-bottom: 10px; }
-  .lvc-dashboard {
-  & .container { padding: 14px 10px 24px; }
-  & .inbox-shell { display: block; min-height: calc(100vh - 62px); }
-  & .inbox-sidebar,
-  & .inbox-thread { min-height: calc(100vh - 62px); }
-  & .inbox-shell.has-selected .inbox-sidebar { display: none; }
-  & .inbox-shell:not(.has-selected) .inbox-thread { display: none; }
-  & .conversation-list { overflow: visible; }
-  & .conversation-row { padding: 12px; }
-  & .conversation-meta { display: none; }
-  & .conversation-panel { min-height: calc(100vh - 64px); }
-  & .inbox-thread .conversation-panel { padding: 0; }
-  & .mobile-back { display: block; flex: 0 0 auto; margin: 10px 10px 0; font-size: 13px; }
-  & .conversation-panel .head-row h1 { font-size: 18px; }
-  & .status-toggle { width: 152px; min-height: 34px; }
-  & .status-toggle span { padding: 0 7px; font-size: 12px; }
-  & .thread .msg { max-width: 88%; }
+    --lvc-bg: #111418;
+    --lvc-surface: #1a1f26;
+    --lvc-text: #e6e8ea;
+    --lvc-muted: #9aa2ab;
+    --lvc-border: #2a313a;
+    --lvc-accent: #3b82f6;
+    --lvc-code: #232a33;
   }
 }
 
@@ -61,37 +66,239 @@
   & * { box-sizing: border-box; }
   & a { color: var(--lvc-accent); text-decoration: none; }
   & a:hover { text-decoration: underline; }
-  & .container { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
-  & h1 { font-size: 22px; margin: 0 0 16px; }
-  & .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lvc-border); margin-bottom: 16px; flex-wrap: wrap; }
-  & .tabs a { padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--lvc-muted); }
-  & .tabs a.active { color: var(--lvc-text); font-weight: 600; border: 1px solid var(--lvc-border); border-bottom: 2px solid var(--lvc-surface); background: var(--lvc-surface); margin-bottom: -1px; }
-  & .tabs a:hover { text-decoration: none; color: var(--lvc-text); }
-  & .count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--lvc-border); font-size: 12px; text-align: center; }
-  & .filters { margin-bottom: 16px; display: flex; gap: 8px; }
-  & .filters input[type=search] { flex: 1; max-width: 320px; padding: 6px 10px; border: 1px solid var(--lvc-border); border-radius: 8px; background: var(--lvc-surface); color: var(--lvc-text); font: inherit; }
-  & .card { background: var(--lvc-surface); border: 1px solid var(--lvc-border); border-radius: 12px; overflow: hidden; }
-  & .card.pad { padding: 16px; }
+  & :focus-visible { outline: 2px solid var(--lvc-accent); outline-offset: 2px; }
+
+  /* Page furniture. `.container` is the reading width; an index page widens it
+     to 1280px in the page frame below. */
+  & .container { max-width: 1020px; margin: 0 auto; padding: 24px 16px 64px; }
+  & h1 { margin: 0 0 16px; font-size: 22px; }
+  & h2 { margin: 0 0 12px; font-size: 16px; }
+  & .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
+  & .page-head h1 { margin: 0; }
+  & .lede { margin: 4px 0 0; color: var(--lvc-muted); }
+  & .breadcrumb { margin: 0 0 12px; font-size: 13px; }
+  & .muted { color: var(--lvc-muted); font-size: 13px; }
+  & .case-id { color: var(--lvc-muted); font-weight: 400; font-size: 15px; }
+  & .spacer { flex: 1; }
+  & .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+
+  /* Section switcher: the pills above the dashboard when a gem has more than
+     one section. Lives on the page, so a host `admin_layout` can drop it. */
+  & .nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
+  & .nav a { padding: 6px 16px; border: 1px solid var(--lvc-border); border-radius: 999px; background: var(--lvc-surface); color: var(--lvc-muted); font-weight: 600; }
+  & .nav a:hover { text-decoration: none; color: var(--lvc-text); }
+  & .nav a.active { border-color: var(--lvc-accent); background: var(--lvc-accent); color: var(--lvc-accent-text); }
+  & .nav a.active:hover { color: var(--lvc-accent-text); }
+
+  /* Tabs: one system for the whole family — an underlined row of equal-width
+     tabs, sized to sit at the top of the sidebar. */
+  & .tabs { display: flex; gap: 6px; }
+  & .tabs a { position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 10px 8px; border-radius: 8px; color: var(--lvc-muted); font-weight: 600; }
+  & .tabs a:hover { background: var(--lvc-bg); color: var(--lvc-text); text-decoration: none; }
+  & .tabs a.active { color: var(--lvc-text); }
+  & .tabs a.active::after { content: ""; position: absolute; right: 20px; bottom: 0; left: 20px; height: 2px; border-radius: 999px; background: var(--lvc-accent); }
+  & .count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--lvc-muted) 14%, transparent); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
+  & .tabs a.active .count { background: var(--lvc-border); }
+
+  /* Filter row under the tabs: a full-width select over a search + submit row,
+     however many of the three a gem actually has. */
+  & .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px; border-bottom: 1px solid var(--lvc-border); }
+  & .filters label { flex: 1 1 100%; color: var(--lvc-muted); font-size: 13px; }
+  & .filters select { flex: 1 1 100%; }
+  /* Basis 0, not auto: the controls below are `width: 100%`, which would
+     otherwise push the submit button onto its own row. */
+  & .filters input[type="search"] { flex: 1 1 0; min-width: 0; }
+  & .filters button,
+  & .filters input[type="submit"] { flex: 0 0 auto; }
+
+  /* Form controls. 16px so iOS does not zoom the page on focus. */
+  & input,
+  & select,
+  & textarea { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--lvc-border); border-radius: 8px; background: var(--lvc-surface); color: var(--lvc-text); font: inherit; font-size: 16px; letter-spacing: 0; }
+  & textarea { resize: vertical; }
+  & input[type="checkbox"],
+  & input[type="radio"] { width: auto; min-width: 0; min-height: 0; }
+  & input:focus,
+  & select:focus,
+  & textarea:focus { border-color: var(--lvc-accent); outline: 2px solid color-mix(in srgb, var(--lvc-accent) 22%, transparent); outline-offset: 0; }
+  & .field { margin-bottom: 16px; }
+  & .field label { display: block; margin-bottom: 5px; font-weight: 600; }
+  & .field small { display: block; margin-top: 5px; color: var(--lvc-muted); }
+
+  /* A submit input is a button, whatever the markup says. */
+  & button,
+  & .button,
+  & input[type="submit"] { display: inline-flex; width: auto; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border: 1px solid var(--lvc-border); border-radius: 8px; background: var(--lvc-surface); color: var(--lvc-text); font: inherit; cursor: pointer; }
+  & button:hover,
+  & .button:hover,
+  & input[type="submit"]:hover { border-color: var(--lvc-muted); text-decoration: none; }
+  & button.primary,
+  & .button.primary,
+  & input[type="submit"].primary { border-color: var(--lvc-accent); background: var(--lvc-accent); color: var(--lvc-accent-text); }
+  & button.danger,
+  & .button.danger { color: var(--lvc-danger); }
+  & button.small,
+  & .button.small { min-height: 32px; padding: 4px 10px; font-size: 13px; }
+  & .actions,
+  & .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+  & .actions form { display: inline; }
+  & .form-actions { padding-top: 12px; }
+
+  & .card { overflow: hidden; border: 1px solid var(--lvc-border); border-radius: 12px; background: var(--lvc-surface); }
+  & .card.pad { padding: 16px; overflow: visible; }
   & table { width: 100%; border-collapse: collapse; }
   & th,
   & td { padding: 10px 14px; text-align: left; vertical-align: top; }
   & th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--lvc-muted); border-bottom: 1px solid var(--lvc-border); }
   & tr + tr td { border-top: 1px solid var(--lvc-border); }
-  & tr.unread td { font-weight: 600; }
-  & .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; }
+  & td.row-actions { white-space: nowrap; text-align: right; }
+  & td.row-actions form { display: inline-block; }
+  & td.row-actions form + form { margin-left: 6px; }
+
+  & .badge { display: inline-flex; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
+  & .badge.locale { border: 1px solid var(--lvc-border); background: transparent; color: var(--lvc-muted); }
+  & code.key { max-width: 100%; padding: 2px 7px; border-radius: 6px; background: var(--lvc-code); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
+
+  & .flash,
+  & .errors { margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--lvc-border); border-radius: 8px; background: var(--lvc-surface); }
+  & .flash.notice { border-color: var(--lvc-success); }
+  & .flash.alert,
+  & .errors { border-color: var(--lvc-danger); }
+  & .errors ul { margin-bottom: 0; }
+
+  & dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
+  & dt { color: var(--lvc-muted); }
+  & dd { margin: 0; overflow-wrap: anywhere; }
+  & .message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+
+  & .empty { padding: 48px 16px; color: var(--lvc-muted); text-align: center; }
+  & .empty-state { max-width: 320px; margin: auto; padding: 24px; text-align: center; }
+  & .empty-state h2 { margin: 0 0 6px; font-size: 18px; }
+  & .empty-state p { margin: 0; }
+
+  /* The two-pane dashboard: the queue on the left, the selected record on the
+     right, each pane owning its own scroll. */
+  & .dashboard-shell { display: grid; flex: 1 1 auto; grid-template-columns: minmax(330px, 430px) 1fr; gap: 16px; min-height: 0; }
+  & .dashboard-sidebar { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--lvc-border); border-radius: 8px; background: var(--lvc-surface); }
+  & .dashboard-sidebar .tabs { flex: 0 0 auto; margin: 12px 12px 0; }
+  & .dashboard-sidebar .filters { flex: 0 0 auto; }
+
+  /* One row shape for every gem: a topline of badges and a timestamp, the copy
+     that identifies the record, then a muted line of ids and authors. */
+  & .record-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+  & .record-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--lvc-border); color: var(--lvc-text); }
+  & .record-row:hover { background: var(--lvc-bg); text-decoration: none; }
+  & .record-row.active { background: color-mix(in srgb, var(--lvc-accent) 9%, var(--lvc-surface)); box-shadow: inset 3px 0 0 var(--lvc-accent); }
+  & .record-main { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
+  & .record-topline,
+  & .record-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
+  & .record-name,
+  & .record-copy,
+  & .record-meta span,
+  /* A key is `overflow-wrap: anywhere` in prose; in a row it truncates. */
+  & .record-topline code.key,
+  & .record-meta code.key { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .record-name { font-weight: 600; }
+  & .record-copy { display: block; font-weight: 600; }
+  & .record-time { margin-left: auto; white-space: nowrap; }
+  & .record-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 1px; }
+  & .pager { display: flex; flex: 0 0 auto; justify-content: space-between; gap: 16px; min-height: 42px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--lvc-border); }
+
+  /* The selected record. `.detail-scroll` is the only part that scrolls, so the
+     panel heading and its actions stay put. */
+  & .dashboard-detail { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
+  & .dashboard-detail .detail-panel { flex: 1 1 auto; min-height: 0; }
+  & .dashboard-detail .detail-scroll { flex: 1 1 auto; overflow-y: auto; padding-right: 2px; }
+  & .dashboard-detail .actions { margin-bottom: 0; }
+  & .detail-panel { display: flex; min-width: 0; flex-direction: column; }
+  /* The panel's own heading row: the title on the left, whatever acts on the
+     whole record on the right. */
+  & .panel-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
+  & .panel-head h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
+  & .detail-scroll { display: flex; min-height: 0; flex-direction: column; gap: 12px; }
+  & .mobile-back { display: none; }
+}
+
+/* Page frame — the gem's own layout only. After the components, so it wins the
+   specificity ties against them. */
+.lvc-page { margin: 0; min-height: 100vh; background: var(--lvc-bg); color: var(--lvc-text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; }
+/* An index page is the dashboard: it fills the viewport and never scrolls
+   itself, because the queue and the detail pane each scroll on their own. */
+.lvc-index, .lvc-index .container { height: 100vh; height: 100dvh; }
+.lvc-index { overflow: hidden; }
+.lvc-index .container { display: flex; max-width: 1280px; flex-direction: column; padding-bottom: 16px; }
+.lvc-index .nav,
+.lvc-index .page-head { flex: 0 0 auto; }
+/* Standalone show pages keep normal page scrolling. */
+.lvc-show { min-height: 100vh; overflow: auto; }
+.lvc-show .detail-panel { width: 100%; }
+.lvc-show .detail-scroll { overflow: visible; }
+
+/* Narrow screens: one pane at a time, the queue until a record is picked.
+   Last in the file, so these overrides actually reach the rules above. */
+@media (max-width: 760px) {
+  .lvc-page { font-size: 14px; }
+  .lvc-index, .lvc-show { overflow-x: hidden; }
+  .lvc-index { overflow-y: auto; }
+  .lvc-index, .lvc-index .container { min-height: 100vh; height: auto; }
+  .lvc-index .container { padding-bottom: 10px; }
+  .lvc-dashboard {
+    & .container { padding: 14px 10px 24px; }
+    & .page-head { margin-bottom: 12px; }
+    & .detail-panel,
+    & .detail-scroll,
+    & .card,
+    & dl,
+    & dd { min-width: 0; max-width: 100%; }
+    & .dashboard-detail .card { width: 100%; }
+    & .message,
+    & .lede,
+    & dd,
+    & .muted { overflow-wrap: anywhere; }
+    & .dashboard-shell { display: block; min-height: calc(100vh - 62px); }
+    & .dashboard-sidebar,
+    & .dashboard-detail { min-height: calc(100vh - 62px); }
+    & .dashboard-shell.has-selected .dashboard-sidebar { display: none; }
+    & .dashboard-shell:not(.has-selected) .dashboard-detail { display: none; }
+    & .record-list { overflow: visible; }
+    & .record-row { padding: 12px; }
+    & .record-meta { display: none; }
+    & .dashboard-detail .detail-panel { min-height: calc(100vh - 64px); }
+    & .mobile-back { display: block; flex: 0 0 auto; margin: 4px 0 10px; font-size: 13px; }
+    & .panel-head h1 { font-size: 18px; }
+    & dl { grid-template-columns: 1fr; gap: 3px; }
+    & dd { margin-bottom: 8px; }
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * GEM-SPECIFIC — livechat only: the open/resolved toggle, agent avatars, the
+ * message thread, and the composer.
+ * ------------------------------------------------------------------------- */
+
+:root {
+  --lvc-open: var(--lvc-success);
+  --lvc-resolved: var(--lvc-neutral);
+}
+
+.lvc-dashboard {
   & .badge.status-open { background: var(--lvc-open); }
   & .badge.status-resolved { background: var(--lvc-resolved); }
   & .badge.unread-count { background: var(--lvc-danger); }
-  & .muted { color: var(--lvc-muted); font-size: 13px; }
-  & .pager { margin-top: 16px; display: flex; gap: 16px; }
-  & .empty { padding: 48px 16px; text-align: center; color: var(--lvc-muted); }
-  & .breadcrumb { margin-bottom: 12px; font-size: 13px; }
-  & .flash { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--lvc-border); background: var(--lvc-surface); }
-  & .flash.alert { color: var(--lvc-danger); border-color: var(--lvc-danger); }
-  & .head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
-  & .head-row h1 { margin: 0; flex: 1; }
-  & .head-row form { display: inline; }
-  & .status-toggle-form { flex: 0 0 auto; }
+  & tr.unread td { font-weight: 600; }
+  & .record-row.unread .record-name,
+  & .record-row.unread .record-copy { font-weight: 700; }
+  & .record-side .avatars { min-height: 26px; }
+
+  /* The panel heading: the name with the visitor's context directly under it,
+     and the switch pushed to the far right of the row whatever the name's
+     length. `margin-left: auto` rather than the row's `space-between`, so a
+     third element in the row could never pull the switch back in. */
+  & .panel-titles { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
+  & .context-line { margin: 0; overflow-wrap: anywhere; }
+
+  /* One switch reading open|resolved, sliding to the side it is on. */
+  & .status-toggle-form { flex: 0 0 auto; margin-left: auto; }
   & .status-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 176px; min-height: 36px; padding: 3px; border-radius: 999px; border: 1px solid var(--lvc-border); background: var(--lvc-bg); color: var(--lvc-muted); overflow: hidden; }
   & .status-toggle::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--lvc-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); transition: left .16s ease; }
   & .status-toggle.is-open::before { left: 3px; }
@@ -100,10 +307,7 @@
   & .status-toggle.is-open span:first-child { color: var(--lvc-open); }
   & .status-toggle.is-resolved span:last-child { color: var(--lvc-text); }
   & .status-toggle:hover { text-decoration: none; color: var(--lvc-text); }
-  & button,
-  & .button { padding: 8px 14px; border: 1px solid var(--lvc-border); border-radius: 8px; cursor: pointer; background: var(--lvc-surface); color: var(--lvc-text); font: inherit; }
-  & button.primary { background: var(--lvc-accent); border-color: var(--lvc-accent); color: var(--lvc-accent-text); }
-  & .case-id { color: var(--lvc-muted); font-weight: 400; font-size: 15px; }
+
   & .avatars { display: inline-flex; }
   & .avatars .avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; border: 2px solid var(--lvc-surface); cursor: default; }
   & .avatars .avatar + .avatar { margin-left: -8px; }
@@ -113,7 +317,8 @@
   & .avatar.color-3 { background: #dc2626; }
   & .avatar.color-4 { background: #7c3aed; }
   & .avatar.color-5 { background: #0891b2; }
-  & .context-line { margin: -6px 0 16px; overflow-wrap: anywhere; }
+
+  /* The thread: the visitor on the left, agents on the right. */
   & .thread { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
   & .thread .who { font-size: 12px; color: var(--lvc-muted); margin: 10px 4px 2px; }
   & .thread .who.visitor { text-align: left; }
@@ -126,94 +331,64 @@
   & .thread .msg .atts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
   & .thread .msg .att-img img { max-width: 100%; max-height: 240px; border-radius: 8px; display: block; }
   & .thread .msg .att-audio { display: block; width: 280px; max-width: 100%; height: 36px; }
-  & .thread .msg .att-file { display: inline-block; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.06); color: inherit; font-size: 13px; overflow-wrap: anywhere; }
-  & .thread .msg.agent .att-file { background: rgba(255,255,255,.2); }
+  & .thread .msg .att-file { display: inline-block; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .06); color: inherit; font-size: 13px; overflow-wrap: anywhere; }
+  & .thread .msg.agent .att-file { background: rgba(255, 255, 255, .2); }
   & #new-messages { margin: 12px 0 0; }
   & #new-messages a { font-weight: 600; }
-  /* Unified composer box (matches the visitor widget): the reply on top, a toolbar row below (tools left, send right), all inside one bordered box that lights up on focus. */
+
+  /* Unified composer box (matches the visitor widget): the reply on top, a
+     toolbar row below (tools left, send right), all inside one bordered box
+     that lights up on focus. */
   & .reply { display: flex; flex-direction: column; gap: 6px; margin: 10px 12px; padding: 8px 10px; border: 1px solid var(--lvc-border); border-radius: 14px; background: var(--lvc-bg); }
   & .reply:focus-within { border-color: var(--lvc-accent); }
-  & .reply textarea { -webkit-appearance: none; appearance: none; border: none; background: none; resize: none; outline: none; font: inherit; color: var(--lvc-text); padding: 4px 4px 0; min-height: 40px; max-height: 160px; overflow-y: auto; }
-  & .reply input[type=file].reply-file { font-size: 12px; color: var(--lvc-muted); }
+  & .reply textarea { -webkit-appearance: none; appearance: none; min-height: 40px; max-height: 160px; padding: 4px 4px 0; border: none; background: none; resize: none; outline: none; font: inherit; color: var(--lvc-text); overflow-y: auto; }
+  & .reply input[type="file"].reply-file { min-height: 0; padding: 0; border: 0; background: none; font-size: 12px; color: var(--lvc-muted); }
   & .reply-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
   & .reply-tools { display: flex; align-items: center; gap: 2px; }
-  & .reply .attach { width: 32px; height: 32px; padding: 0; border: none; background: none; color: var(--lvc-muted); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+  & .reply .attach { width: 32px; min-height: 32px; height: 32px; padding: 0; border: none; background: none; color: var(--lvc-muted); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
   & .reply .attach:hover { background: var(--lvc-border); color: var(--lvc-text); }
   & .reply .attach.recording-on { color: var(--lvc-danger); }
   & .reply.is-recording .attach { display: none; }
   & .reply .chips { display: flex; flex-wrap: wrap; gap: 6px; }
   & .reply .chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border: 1px solid var(--lvc-border); border-radius: 999px; background: var(--lvc-surface); font-size: 12px; }
   & .reply .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
-  & .reply .chip-x { padding: 0 2px; border: none; background: none; color: var(--lvc-muted); font-size: 16px; line-height: 1; cursor: pointer; }
+  & .reply .chip-x { min-height: 0; padding: 0 2px; border: none; background: none; color: var(--lvc-muted); font-size: 16px; line-height: 1; cursor: pointer; }
   & .reply .chip-x:hover { color: var(--lvc-text); }
   & .reply .recording { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 8px; border: 1px solid var(--lvc-border); border-radius: 999px; background: var(--lvc-surface); color: var(--lvc-muted); font-size: 12px; white-space: nowrap; }
   & .reply .recording[hidden] { display: none; }
   & .reply .recording-status { display: inline-grid; grid-template-columns: 8px 24px 34px; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
-  & .reply .recording-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lvc-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
+  & .reply .recording-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lvc-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
   & .reply .recording-rec { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--lvc-danger); }
   & .reply .recording-actions { display: flex; align-items: center; gap: 4px; }
-  & .reply .recording-actions button { width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--lvc-muted); display: flex; align-items: center; justify-content: center; }
+  & .reply .recording-actions button { width: 24px; height: 24px; min-height: 24px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--lvc-muted); display: flex; align-items: center; justify-content: center; }
   & .reply .recording-actions button:hover { background: var(--lvc-border); color: var(--lvc-text); }
   & .reply .recording-actions .stop-recording { background: var(--lvc-danger); color: #fff; }
   & .reply .recording-actions .stop-recording:hover { background: #b91c1c; color: #fff; }
-  & .reply .send { width: 32px; min-width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: var(--lvc-accent); color: var(--lvc-accent-text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
-  & .inbox-shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(320px, 380px) 1fr; gap: 16px; }
-  & .inbox-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--lvc-surface); border: 1px solid var(--lvc-border); border-radius: 8px; overflow: hidden; }
-  & .inbox-sidebar .tabs { flex: 0 0 auto; margin: 12px 12px 0; padding: 0; background: transparent; border: 0; border-radius: 0; gap: 6px; flex-wrap: nowrap; }
-  & .inbox-sidebar .tabs a { flex: 1 1 0; position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 12px 8px; border-radius: 8px; color: var(--lvc-muted); font-weight: 600; }
-  & .inbox-sidebar .tabs a.active { color: var(--lvc-text); border: 0; background: transparent; box-shadow: none; margin: 0; }
-  & .inbox-sidebar .tabs a.active::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; border-radius: 999px; background: var(--lvc-accent); }
-  & .inbox-sidebar .tabs a:not(.active):hover { text-decoration: none; color: var(--lvc-text); background: var(--lvc-bg); }
-  & .inbox-sidebar .tabs .count { margin-left: 0; background: color-mix(in srgb, var(--lvc-muted) 14%, transparent); }
-  & .inbox-sidebar .tabs a.active .count { background: var(--lvc-border); }
-  & .inbox-sidebar .filters { flex: 0 0 auto; margin: 0; padding: 12px; border-bottom: 1px solid var(--lvc-border); }
-  & .inbox-sidebar .filters input[type=search] { max-width: none; }
-  & .conversation-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
-  & .conversation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px; color: var(--lvc-text); border-bottom: 1px solid var(--lvc-border); }
-  & .conversation-row:hover { text-decoration: none; background: var(--lvc-bg); }
-  & .conversation-row.active { background: color-mix(in srgb, var(--lvc-accent) 9%, var(--lvc-surface)); box-shadow: inset 3px 0 0 var(--lvc-accent); }
-  & .conversation-row.unread .conversation-name,
-  & .conversation-row.unread .conversation-preview { font-weight: 700; }
-  & .conversation-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
-  & .conversation-topline,
-  & .conversation-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
-  & .conversation-name,
-  & .conversation-preview,
-  & .conversation-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .conversation-name { font-weight: 600; }
-  & .conversation-time { margin-left: auto; white-space: nowrap; }
-  & .conversation-preview { display: block; }
-  & .conversation-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 1px; }
-  & .conversation-side .avatars { min-height: 26px; }
-  & .inbox-sidebar .pager { flex: 0 0 auto; margin: 0; padding: 10px 12px; border-top: 1px solid var(--lvc-border); }
-  & .inbox-thread { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
-  & .inbox-thread .conversation-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }
-  & .conversation-panel .head-row,
-  & .conversation-panel .context-line { flex: 0 0 auto; }
-  & .conversation-panel .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 8px; }
-  & .conversation-panel .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
-  & .conversation-panel .reply { flex: 0 0 auto; }
-  & .empty-state { margin: auto; max-width: 320px; padding: 24px; text-align: center; }
-  & .empty-state h2 { margin: 0 0 6px; font-size: 18px; }
-  & .empty-state p { margin: 0; }
-  & .mobile-back { display: none; }
+  & .reply .send { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border: none; border-radius: 50%; background: var(--lvc-accent); color: var(--lvc-accent-text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
+
+  /* Inside the thread pane only the messages scroll, so a reply never jumps the
+     page and the composer stays put. */
+  & .detail-panel .panel-head { flex: 0 0 auto; }
+  & .detail-panel .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 8px; }
+  & .detail-panel .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+  & .detail-panel .reply { flex: 0 0 auto; }
 }
 
-/* Page frame — the gem's own layout only. Last, so it wins the
-   specificity ties against the component layer above. */
-.lvc-page { margin: 0; background: var(--lvc-bg); color: var(--lvc-text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
-/* Desktop inbox: a durable conversation list on the left and the active thread on the right, with each pane owning its own scroll. */
-.lvc-inbox, .lvc-inbox .container { height: 100vh; height: 100dvh; }
-.lvc-inbox { overflow: hidden; }
-.lvc-inbox .container { max-width: 1280px; display: flex; flex-direction: column; padding-bottom: 16px; }
-.lvc-inbox .container h1 { flex: 0 0 auto; margin-bottom: 14px; }
-/* Conversation page: fill the viewport and scroll the THREAD, not the page — so a reply never jumps the page, and the composer stays put. */
+/* The conversation page: same thread, its own page. Fills the viewport and
+   scrolls the thread rather than the page. */
 .lvc-convo, .lvc-convo .container { height: 100vh; height: 100dvh; }
 .lvc-convo { overflow: hidden; }
 .lvc-convo .container { display: flex; flex-direction: column; padding-bottom: 16px; }
-.lvc-convo .breadcrumb, .lvc-convo .head-row, .lvc-convo .context-line,
-    .lvc-convo .flash { flex: 0 0 auto; }
-.lvc-convo .conversation-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
-.lvc-convo .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
-.lvc-convo .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
-.lvc-convo .reply { flex: 0 0 auto; }
+.lvc-convo .breadcrumb,
+.lvc-convo .panel-head,
+.lvc-convo .flash { flex: 0 0 auto; }
+.lvc-convo .detail-panel { flex: 1 1 auto; min-height: 0; }
+
+@media (max-width: 760px) {
+  .lvc-dashboard {
+    & .detail-panel .panel-head h1 { font-size: 18px; }
+    & .status-toggle { width: 152px; min-height: 34px; }
+    & .status-toggle span { padding: 0 7px; font-size: 12px; }
+    & .thread .msg { max-width: 88%; }
+  }
+}

data/lib/livechat/dashboard.js

@@ -295,7 +295,7 @@
   // (new message, new thread, resolve/reopen), just reload — unless the
   // agent is mid-search, whose typing must never be eaten.
   function watchIndex() {
-    var index = document.getElementById("lvc-index");
+    var index = document.getElementById("lvc-poll");
     if (!index) return;
 
     var token = index.getAttribute("data-token");

data/lib/livechat/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Livechat
-  VERSION = '0.8.2'
+  VERSION = '0.9.1'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: livechat
 version: !ruby/object:Gem::Version
-  version: 0.8.2
+  version: 0.9.1
 platform: ruby
 authors:
 - Yaroslav Shmarov