/* =================================================================
* b2b.zone — Phone Responsive Layer
* =================================================================
*
* Targets: phones ONLY (≤ 640px)
* Strategy: Drop in once via main layout, no per-page edits required.
*
* Approach:
* 1. Root-level CSS variables for mobile-specific values
* 2. Sidebar → off-canvas drawer triggered by hamburger
* 3. Topbar → mobile-optimized
* 4. Tables → horizontal scroll wrapper
* 5. Cards/grids → single column
* 6. Forms → full-width inputs with bigger touch targets
* 7. Modals → fit small screens
*
* IMPORTANT: This file uses !important on layout/structural rules only,
* because most existing pages have inline styles that would otherwise
* win the cascade. We're explicit about WHY each !important exists.
*
* Deploy:
* 1. Save as: public/css/b2b-responsive.css
* 2. Include in your main layout AFTER existing CSS:
*
* 3. Add the hamburger toggle JS (see b2b-responsive.js)
* ================================================================= */
/* ════════════════════════════════════════════════════════════════
* 1. PHONE BREAKPOINT — everything below scoped to ≤ 640px
* ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* ────────────────────────────────────────────────────────────
* 2. RESET & BASE
* Prevent horizontal scroll & cap base font for mobile.
* ──────────────────────────────────────────────────────────── */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
body {
font-size: 14px;
}
/* ────────────────────────────────────────────────────────────
* 3. SIDEBAR → OFF-CANVAS DRAWER
* Existing sidebar is fixed 280px-ish. Make it slide in/out
* triggered by the hamburger button (added to topbar).
* Targets common sidebar class names — adjust if yours differs.
* ──────────────────────────────────────────────────────────── */
.sidebar,
.app-sidebar,
.sb,
[class*="sidebar"][class*="left"],
aside.sidebar,
aside[role="navigation"] {
position: fixed !important;
top: 0 !important;
left: 0 !important;
height: 100vh !important;
width: 280px !important;
max-width: 85vw !important;
z-index: 9999 !important;
transform: translateX(-100%);
transition: transform 0.25s ease-out;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
overflow-y: auto;
}
/* RTL: drawer slides in from the right */
[dir="rtl"] .sidebar,
[dir="rtl"] .app-sidebar,
[dir="rtl"] .sb,
[dir="rtl"] aside.sidebar {
left: auto !important;
right: 0 !important;
transform: translateX(100%);
}
/* When body has .sidebar-open class, drawer is visible */
body.sidebar-open .sidebar,
body.sidebar-open .app-sidebar,
body.sidebar-open .sb,
body.sidebar-open [class*="sidebar"][class*="left"],
body.sidebar-open aside.sidebar {
transform: translateX(0) !important;
}
/* Backdrop overlay when sidebar is open */
body.sidebar-open::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
animation: b2b-fade-in 0.2s ease-out;
}
@keyframes b2b-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Lock body scroll when drawer open */
body.sidebar-open {
overflow: hidden !important;
}
/* ────────────────────────────────────────────────────────────
* 4. MAIN CONTENT AREA
* Existing layouts assume sidebar is always visible (margin-left).
* On mobile, content takes full width.
* ──────────────────────────────────────────────────────────── */
.main-content,
.app-main,
.content-area,
main.app-main,
[class*="main-content"] {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 16px !important;
padding-right: 16px !important;
width: 100% !important;
max-width: 100% !important;
}
/* ────────────────────────────────────────────────────────────
* 5. TOPBAR / HEADER
* Compress horizontal padding, hide non-essential items,
* make hamburger button visible.
* ──────────────────────────────────────────────────────────── */
.topbar,
.app-topbar,
.header,
header.app-header {
padding: 10px 14px !important;
gap: 8px !important;
flex-wrap: nowrap !important;
}
/* Hamburger button — show only on mobile.
Add markup to your layout: */
.b2b-hamburger {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: transparent;
border: 0px solid var(--gray-200, #E4E4E7);
border-radius: var(--radius-md, 8px);
cursor: pointer;
font-size: 18px;
color: var(--brand-primary, #0a0a0a);
flex-shrink: 0;
}
.b2b-hamburger:hover {
background: var(--gray-50, #FAFAFA);
}
/* Hidden by default on desktop */
.b2b-hamburger {
display: none;
}
@media (max-width: 640px) {
.b2b-hamburger {
display: inline-flex !important;
}
}
/* Hide the desktop logo text in topbar (sidebar shows it instead) */
.topbar .brand-text-desktop,
.topbar-brand-extra,
.header-brand-tagline {
display: none !important;
}
/* Topbar inner items: scale down language switcher / user pill */
.lang-switch,
.user-pill,
.topbar .nav-pill {
font-size: 11px !important;
padding: 5px 10px !important;
}
/* ────────────────────────────────────────────────────────────
* 6. PAGE LAYOUT GRIDS
* Anything that's a multi-column grid on desktop becomes
* single-column on mobile.
* ──────────────────────────────────────────────────────────── */
.grid-2,
.grid-3,
.grid-4,
.row-2,
.row-3,
.row-4,
.stats-grid,
.summary-grid,
.meta-grid,
.kpi-grid,
.card-grid,
[class*="grid-cols"],
.dashboard-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Two-column dashboard layouts (main + sidebar widget) */
.dashboard-layout,
.layout-with-sidebar {
grid-template-columns: 1fr !important;
}
/* ────────────────────────────────────────────────────────────
* 7. CARDS
* Tighten padding, full width.
* ──────────────────────────────────────────────────────────── */
.card,
.stat-card,
.summary-card,
.info-card,
.invoice-card,
.party-card,
.table-card,
.quick-actions{
padding: 14px 16px !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 12px !important;
}
/* Card headers that use flex with absolute right-side actions */
.card-head,
.card-header {
flex-wrap: wrap !important;
gap: 8px !important;
}
/* ────────────────────────────────────────────────────────────
* 8. TABLES — horizontal scroll wrapper
* Tables are inherently wide. Wrap each table in horizontal scroll.
* This works automatically because we set .table-card overflow.
* ──────────────────────────────────────────────────────────── */
.table-card,
.table-wrap,
.data-table-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
.table-card table,
.table-wrap table,
.data-table-wrap table {
min-width: 600px; /* preserve column legibility */
}
table th,
table td {
padding: 10px 12px !important;
font-size: 12px !important;
white-space: nowrap;
}
/* Hint scrollability with subtle fade on right edge */
.table-card,
.table-wrap {
position: relative;
}
/* ────────────────────────────────────────────────────────────
* 9. FORMS
* Full-width inputs, larger touch targets, stacked labels.
* ──────────────────────────────────────────────────────────── */
.form-row,
.form-grid,
.form-2col,
.input-row {
grid-template-columns: 1fr !important;
flex-direction: column !important;
gap: 12px !important;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="url"],
select,
textarea,
.form-input,
.form-input-new,
.form-control {
width: 100% !important;
font-size: 16px !important; /* prevents iOS zoom on focus */
padding: 12px 14px !important;
box-sizing: border-box;
}
/* Buttons */
.btn,
.button,
button[type="submit"],
.btn-primary,
.btn-secondary,
.btn-auth,
.btn-primary-new {
font-size: 14px !important;
padding: 12px 18px !important;
min-height: 44px; /* touch target */
}
/* Full-width buttons in forms */
form .btn,
form .button,
form button[type="submit"] {
width: 100% !important;
}
/* Action button rows — wrap & stack */
.form-actions,
.action-row,
.button-row,
.invoice-actions,
.actions {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.form-actions > *,
.action-row > *,
.button-row > *,
.invoice-actions > *,
.actions > * {
width: 100% !important;
justify-content: center !important;
}
/* ────────────────────────────────────────────────────────────
* 10. AUTH PAGES (login / register)
* The 2-panel layout (left brand panel + right form) collapses
* to a stacked single column. Brand panel becomes a compact header.
* ──────────────────────────────────────────────────────────── */
.auth-shell,
.auth-layout,
[class*="auth-shell"] {
flex-direction: column !important;
min-height: 100vh !important;
}
.brand-panel,
.auth-brand-panel,
[class*="brand-panel"] {
flex: 0 0 auto !important;
width: 100% !important;
padding: 28px 22px !important;
min-height: auto !important;
}
.brand-panel .brand-headline,
.brand-panel .brand-headline-ar {
font-size: 22px !important;
}
.brand-panel .brand-tagline {
font-size: 13px !important;
margin-bottom: 16px !important;
}
.brand-panel .brand-stats {
margin-top: 20px !important;
padding-top: 18px !important;
}
.brand-panel .stat-value {
font-size: 18px !important;
}
.brand-panel .stat-label {
font-size: 9px !important;
}
.form-panel,
.auth-form-panel {
flex: 1 !important;
padding: 28px 22px !important;
width: 100% !important;
}
.form-card {
max-width: 100% !important;
}
.form-title,
.auth-title {
font-size: 22px !important;
}
/* ────────────────────────────────────────────────────────────
* 11. MODALS & DIALOGS
* Cap modal width, scrollable body.
* ──────────────────────────────────────────────────────────── */
.modal,
.dialog,
.modal-content,
[role="dialog"] > div,
.reset-modal-content {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
margin: 12px !important;
max-height: calc(100vh - 24px) !important;
overflow-y: auto !important;
}
/* Modal action buttons — stack */
.modal-actions,
.modal-footer {
flex-direction: column !important;
gap: 8px !important;
}
.modal-actions > *,
.modal-footer > * {
width: 100% !important;
}
/* ────────────────────────────────────────────────────────────
* 12. PAGE HEADERS
* Page title + action button row → stacks.
* ──────────────────────────────────────────────────────────── */
.page-head,
.page-header,
.section-head {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
.page-title {
font-size: 16px !important;
}
.page-sub {
font-size: 11px !important;
}
/* ────────────────────────────────────────────────────────────
* 13. INVOICE / DOCUMENT PAGES
* The shell-head with title + actions side-by-side.
* ──────────────────────────────────────────────────────────── */
.shell-head,
.invoice-shell .shell-head {
flex-direction: column !important;
align-items: stretch !important;
padding: 14px 16px !important;
}
.title-block .ttl {
font-size: 18px !important;
}
.shell-body {
padding: 16px !important;
}
.totals {
width: 100% !important;
margin-inline-start: 0 !important;
}
/* QR section stacks */
.qr-section {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.qr-info {
text-align: center !important;
}
/* ────────────────────────────────────────────────────────────
* 14. NAVIGATION TABS / PILLS
* Tabs that overflow → horizontal scroll instead of wrapping.
* ──────────────────────────────────────────────────────────── */
.tab-nav,
.pills-nav,
.filter-tabs,
.tab-list {
overflow-x: auto !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.tab-nav::-webkit-scrollbar,
.pills-nav::-webkit-scrollbar {
height: 0;
}
.tab-nav > *,
.pills-nav > * {
flex-shrink: 0;
white-space: nowrap;
}
/* ────────────────────────────────────────────────────────────
* 15. STATS / KPI CARDS
* Existing dashboards have 4-up KPI rows. Stack to 2-up on
* mobile (instead of 1-up — looks too sparse).
* ──────────────────────────────────────────────────────────── */
.kpi-row,
.stats-row,
.summary-row {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.kpi-row .kpi-card,
.stats-row .stat-card {
padding: 12px !important;
}
.kpi-value,
.stat-value-big {
font-size: 18px !important;
}
.kpi-label,
.stat-label-small {
font-size: 10px !important;
}
/* ────────────────────────────────────────────────────────────
* 16. CHIPS, BADGES, PILLS
* Slightly smaller on mobile.
* ──────────────────────────────────────────────────────────── */
.chip, .badge, .pill, .status-pill, .invoice-status, .tag {
font-size: 9px !important;
padding: 2px 7px !important;
}
/* ────────────────────────────────────────────────────────────
* 17. AI SEARCH / CHAT
* Chat interface needs the input bar pinned to bottom.
* ──────────────────────────────────────────────────────────── */
.chat-input,
.ai-search-input,
.chat-composer {
font-size: 16px !important; /* no iOS zoom */
}
.chat-message,
.ai-message {
max-width: 95% !important;
}
/* ────────────────────────────────────────────────────────────
* 18. UTILITIES — hide-on-mobile / show-on-mobile helper classes
* ──────────────────────────────────────────────────────────── */
.hide-on-mobile,
.desktop-only {
display: none !important;
}
.mobile-only {
display: block !important;
}
/* ────────────────────────────────────────────────────────────
* 19. SAFE AREA INSET (iPhone notch / Android gesture bar)
* ──────────────────────────────────────────────────────────── */
.topbar,
.app-topbar {
padding-top: max(10px, env(safe-area-inset-top)) !important;
}
.sidebar {
padding-top: env(safe-area-inset-top) !important;
padding-bottom: env(safe-area-inset-bottom) !important;
}
.lang-switch {
display: none !important;
}
.tb-module-badge {
padding: 9px !important;
position: absolute;
left: 46px;
top: 9px;
background: transparent !important;
border: 0px solid !important;
font-size: 13px !important;
padding-top: 7px !important;
}
div.ai-scroll {
padding: 0px;
}
div.ai-input-bar {
padding: 10px;
}
div.ai-input-wrap {
padding: 8px;
}
input.ai-input {
padding: 0px !important;
}
.logout-btn {
display: none !important;
}
a.search-ai-btn {
display: none;
}
/*div.results-toolbar {
display: flex;
align-items: stretch;
justify-content: space-between;
margin-bottom: 14px;
flex-wrap: wrap;
gap: 8px;
flex-direction: column-reverse;
align-content: stretch;
}*/
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
margin-bottom: 20px;
}
.dash-layout {
display: block !important;
}
.welcome-hero .welcome-avatar,
.filter-sidebar {
display: none;
}
.listing-layout {
display: flex !important;
}
}
/* ════════════════════════════════════════════════════════════════
* 20. DEFAULTS — outside the @media block so they apply everywhere
* (these are defensive defaults, not mobile-specific)
* ════════════════════════════════════════════════════════════════ */
/* mobile-only utility class is hidden on desktop */
.mobile-only {
display: none;
}
/* Hamburger always hidden on desktop */
.b2b-hamburger {
display: none;
}
/* Show hamburger only on mobile */
@media (max-width: 640px) {
.b2b-hamburger {
display: inline-flex !important;
}
}
/* ═══════════════════════════════════════════════════════════════
* SUPPLIERS PAGE — RESPONSIVE LAYER
* ═══════════════════════════════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────
* TABLET (≤ 1024px)
* Sidebar stacks above content. Grid stays 2 columns.
* ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
/* Listing becomes single column (filter sidebar moves on top) */
.listing-layout {
grid-template-columns: 1fr !important;
gap: 14px;
}
/* Sticky doesn't work when stacked */
.filter-sidebar {
position: static !important;
}
/* Suppliers grid stays at 2 columns — cards still readable */
.suppliers-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ────────────────────────────────────────────────────────────
* MOBILE (≤ 640px)
* Single column everywhere, search bar reflows, cards tighten.
* ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* ── SUPPLIERS GRID: single column ── */
.suppliers-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
/* ── SEARCH HERO ── */
.search-hero {
padding: 18px 16px;
margin-bottom: 14px;
border-radius: 14px;
}
.search-hero-title { font-size: 16px; }
.search-hero-sub { font-size: 11px; margin-bottom: 12px; }
/* ── SEARCH ROW ── */
.search-row { flex-wrap: wrap; border-radius: 12px; }
.search-row-icon { padding: 0 12px; }
.search-row-input {
flex: 1 1 calc(100% - 50px);
padding: 12px 0;
font-size: 14px;
min-width: 0;
}
.search-divider { display: none; }
.search-ai-btn,
button.search-submit {
flex: 1;
padding: 18px 0px;
font-size: 11px;
border-top: 1px solid var(--gray-100);
justify-content: center;
}
/* ── FILTER SIDEBAR ── */
.filter-head { padding: 12px 14px; }
.filter-sec { padding: 10px 14px; }
.filter-sec-title { margin-bottom: 6px; }
/* ── RESULTS TOOLBAR ── */
.results-toolbar { gap: 8px; }
.results-count { font-size: 12px; }
.sort-select { font-size: 11px !important; padding: 5px 8px !important; }
/* ── SUPPLIERS GRID: 2 per row ── */
.suppliers-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
/* ── CARDS: tighten for 2-up layout ── */
.s-card-banner { height: 42px; }
.s-card-body { padding: 10px; }
.s-card-identity {
flex-direction: column; /* logo on top, name below */
align-items: flex-start !important;
gap: 6px;
margin-top: -18px;
margin-bottom: 8px;
}
.s-card-logo { width: 38px; height: 38px; }
.s-card-name { font-size: 12px; }
.s-card-sub { font-size: 9px; }
/* Badges wrap naturally */
.s-card-badges { gap: 4px; }
.badge-pill { font-size: 9px; padding: 2px 6px; }
/* Stats stacked tight */
.s-card-stats {
flex-wrap: wrap;
gap: 8px;
padding: 6px 0;
}
.s-card-stat { font-size: 9px; }
/* Footer stacked vertically for narrow card */
.s-card-footer {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.s-card-price { font-size: 10px; }
.s-card-price strong { font-size: 11px; }
.s-card-cta {
width: 100%;
justify-content: center;
padding: 7px 8px;
font-size: 10px;
}
/* ── EMPTY STATE ── */
.empty-state { padding: 40px 16px; }
.empty-state i { font-size: 36px; margin-bottom: 12px; }
.profile-layout {
grid-template-columns: auto !important;
}
.filter-divider {
display: none;
}
.search-wrap .search-input {
padding-left: 30px !important;
}
/* RFQ CSS */
.rfq-meta {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 4px 10px;
}
.rfq-meta > span {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
}
.rfq-meta > span > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rfq-card {
flex-wrap: wrap;
}
.rfq-body {
min-width: 0;
flex: 1 1 calc(100% - 60px);
}
.rfq-right {
flex: 1 1 100%;
flex-direction: row;
justify-content: flex-start;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--gray-100);
}
div.rfq-layout {
display: block;
}
div.field-grid-2, div.field-grid-3 {
grid-template-columns: 1fr;
}
input.supplier-search-input {
padding-left: 35px !important;
}
div.tier-grid {
grid-template-columns: repeat(2, 1fr);
}
textarea.ai-fill-input {
min-height: 100px;
}
input.conv-search-input {
width: 100% !important;
padding: 7px 10px 7px 30px !important;
border: 1.5px solid var(--gray-200);
border-radius: var(--radius-lg);
font-size: 12px !important;
font-family: inherit;
outline: none;
}
}
[lang="ar"] input,
[dir="rtl"] input {
direction: rtl;
text-align: right;
}
/* Force RTL even when browser autofills */
[lang="ar"] input:-webkit-autofill,
[dir="rtl"] input:-webkit-autofill {
direction: rtl !important;
text-align: right !important;
}
@media (max-width: 640px) {
[lang="ar"] .tb-module-badge {
right: 46px;
left: auto;
}
[lang="ar"] .ai-input {
padding: 0px !important;
}
.order-card {
flex-wrap: wrap;
padding: 14px 16px !important;
gap: 10px !important;
}
.po-num {
flex-shrink: 0;
}
.order-body {
flex: 1 1 calc(100% - 100px);
min-width: 0;
}
.order-title {
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.order-meta {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 4px 10px;
margin-top: 6px;
}
.order-meta > span {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
font-size: 11px;
}
.order-meta > span > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-right {
flex: 1 1 100%;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
gap: 8px !important;
padding-top: 10px;
border-top: 1px solid var(--gray-100);
}
.order-total {
font-size: 14px;
}
.order-total-lbl {
font-size: 10px;
}
div.po-layout {
display: block;
}
div.page-content div.msg-layout
{
border-radius: 0px !important;
}
}
/* MESSENGER CSS */
/* Back button hidden on desktop */
.chat-back-btn {
display: none;
}
@media (max-width: 768px) {
.msg-layout {
grid-template-columns: 1fr !important;
height: calc(100vh - 100px) !important; /* fallback */
height: calc(100dvh - 100px) !important; /* modern */
}
/* Push input above the iPhone home indicator / Android gesture bar */
.chat-input-area {
padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}
/* Hide the "select a conversation" placeholder on mobile — wastes space */
.chat-placeholder {
display: none !important;
}
/* Default state: show conv list, hide empty chat panel */
.chat-panel {
display: none;
}
/* When a chat is active: hide conv list, show full chat */
.msg-layout:has(.chat-header) .conv-panel {
display: none;
}
.msg-layout:has(.chat-header) .chat-panel {
display: flex;
}
/* Show back button only on mobile */
.chat-back-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: var(--brand-primary);
flex-shrink: 0;
padding: 0;
}
[dir="rtl"] .chat-back-btn i {
transform: scaleX(-1);
}
/* Conv list tightening */
.conv-panel {
border-inline-end: none !important;
}
.conv-header {
padding: 14px;
}
.conv-title {
font-size: 14px;
}
.conv-item {
padding: 12px 14px;
gap: 10px;
}
.conv-avatar {
width: 38px;
height: 38px;
}
/* Chat header */
.chat-header {
padding: 10px 12px;
gap: 8px;
}
.chat-header-info {
gap: 8px;
min-width: 0;
flex: 1;
}
.chat-header-avatar {
width: 32px;
height: 32px;
}
.chat-header-name {
font-size: 12px;
}
.chat-header-rfq {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.chat-rfq-link span,
.chat-rfq-link {
font-size: 10px;
}
/* Thread */
.chat-thread {
padding: 12px;
gap: 10px;
}
.bubble-wrap {
max-width: 85%;
}
.bubble {
font-size: 13px;
padding: 9px 13px;
}
.attachment-img {
width: 110px;
height: 85px;
}
/* Input area */
.chat-input-area {
padding: 10px 12px;
}
.chat-input-row {
gap: 6px;
}
.btn-attach,
.btn-send-msg {
width: 36px;
height: 36px;
}
.chat-textarea {
font-size: 14px; /* prevents iOS zoom on focus */
min-height: 38px;
}
.hint {
font-size: 9px;
line-height: 1.4;
}
.attach-chip {
max-width: 160px;
font-size: 10px;
}
[dir="rtl"] .bubble-wrap.mine {
align-self: flex-start;
align-items: flex-start;
}
[dir="rtl"] .bubble-wrap.theirs {
align-self: flex-end;
align-items: flex-end;
}
[dir="rtl"] .bubble.mine {
border-end-inline-end-radius: 16px;
border-end-inline-start-radius: 4px;
}
[dir="rtl"] .bubble.theirs {
border-end-inline-start-radius: 16px;
border-end-inline-end-radius: 4px;
}
[dir="rtl"] .add-sup-input {
padding: 8px 34px 8px 12px;
}
[dir="rtl"] .search-wrap .search-input,
[dir="rtl"] .add-sup-input {
padding-right: 30px !important;
padding-left: 10px !important;
}
input.search-row-input {
padding-left: 0px !important;
}
table.items-table
{
display: block;
}
}
[dir="rtl"] .add-sup-input {
padding-right: 30px !important;
padding-left: 10px !important;
}