/*
Theme Name: USA TECH
Theme URI: https://example.com/usa-tech
Author: USA TECH Theme
Author URI: https://example.com
Description: A responsive WordPress communications theme with a reference-aligned mobile chat interface, editable USA TECH branding, and a compact technology news feed.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: usa-tech
Tags: blog, news, one-column, custom-logo, featured-images, responsive-layout
*/

/*
 * USA TECH reference system — mobile chat interface presented in a charcoal device frame.
 * Maintain the centered phone composition, deep teal top band, bright teal tabs, calm white
 * list rows, green online signals, and deliberately open warm-gray desktop background.
 */

:root { --teal-900: #064b47; --teal-800: #076a63; --teal-700: #098f84; --teal-600: #10a394; --ink: #202d2d; --muted: #75827f; --line: #e7eceb; --paper: #ffffff; --canvas: #f1f1f0; --online: #25c477; --shadow: 0 26px 50px rgba(30, 38, 38, .22); --ease-out: cubic-bezier(.23, 1, .32, 1); }
* { box-sizing: border-box; }
html { background: var(--canvas); }
body.usa-tech-body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 50% 22%, #fff 0%, #f6f6f5 30%, #e8e9e8 100%); font-family: "Nunito Sans", "Noto Sans Devanagari", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #0ea092; outline-offset: 3px; }

.usa-tech-page { display: grid; min-height: 100dvh; padding: 36px 20px; place-items: center; }
.tech-phone { position: relative; width: min(100%, 432px); overflow: hidden; border: 12px solid #272d2d; border-radius: 39px; background: var(--paper); box-shadow: var(--shadow), inset 0 0 0 2px rgba(255,255,255,.08); }
.tech-phone::before { position: absolute; z-index: 4; top: 8px; left: 50%; width: 68px; height: 4px; border-radius: 999px; content: ""; background: #59605f; transform: translateX(-50%); }
.tech-app { position: relative; display: flex; min-height: 650px; max-height: 760px; overflow: hidden; flex-direction: column; background: #fff; }

.app-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 67px; padding: 23px 18px 10px; color: white; background: linear-gradient(115deg, var(--teal-900), #06786e); }
.brand-link { color: white; font-size: 21px; font-weight: 900; letter-spacing: -.6px; text-decoration: none; }.brand-link span { color: #a5f5df; }.app-actions { display: flex; align-items: center; gap: 17px; }.icon-button { display: grid; width: 24px; height: 24px; padding: 0; border: 0; place-items: center; color: #fff; background: transparent; cursor: pointer; }.search-icon { width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; position: relative; }.search-icon::after { position: absolute; right: -5px; bottom: -4px; width: 7px; height: 2px; border-radius: 2px; content: ""; background: currentColor; transform: rotate(48deg); }.dots-icon::before { content: "⋮"; font-size: 28px; line-height: 1; }
.app-tabs { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 43px; color: rgba(255, 255, 255, .74); background: linear-gradient(100deg, var(--teal-800), var(--teal-600)); }.app-tab { position: relative; padding: 0; border: 0; color: inherit; background: transparent; font-size: 12px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; cursor: pointer; }.app-tab.is-active { color: #fff; }.app-tab.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; content: ""; background: #fff; }.tab-count { display: inline-grid; width: 18px; height: 18px; margin-left: 3px; border-radius: 50%; place-items: center; color: var(--teal-900); background: #fff; font-size: 10px; letter-spacing: 0; }

.chat-panel { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden; background: var(--paper); }.chat-search { display: flex; align-items: center; gap: 11px; min-height: 55px; margin: 0 12px; border-bottom: 1px solid var(--line); color: #78827f; }.chat-search label { display: block; position: relative; flex: 1; }.chat-search input { width: 100%; padding: 10px 10px 10px 30px; border: 0; outline: 0; color: #3d4543; background: transparent; font-size: 12px; }.chat-search label::before { position: absolute; top: 50%; left: 2px; width: 12px; height: 12px; border: 1.5px solid #6c7775; border-radius: 50%; content: ""; transform: translateY(-60%); }.chat-search label::after { position: absolute; top: 59%; left: 13px; width: 6px; height: 1.5px; border-radius: 1px; content: ""; background: #6c7775; transform: rotate(47deg); }
.chat-list { min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }.chat-row { display: grid; width: 100%; grid-template-columns: 47px minmax(0, 1fr) 56px; align-items: center; gap: 11px; min-height: 66px; padding: 8px 17px; border: 0; border-bottom: 1px solid #edf0ef; color: inherit; background: #fff; text-align: left; cursor: pointer; transition: background 150ms var(--ease-out), transform 150ms var(--ease-out); }.chat-row:hover, .chat-row.is-active { background: #ebfaf5; }.chat-row:active { transform: scale(.99); }.avatar { position: relative; display: block; width: 45px; height: 45px; overflow: visible; border: 3px solid transparent; border-radius: 50%; background: #eef3f1; }.avatar img { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; object-fit: cover; }.chat-row.is-active .avatar { border-color: #a5ecda; }.avatar::after { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; content: ""; background: var(--online); }.chat-copy { min-width: 0; }.chat-copy strong { display: block; overflow: hidden; color: #2d3836; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.chat-copy p { overflow: hidden; margin: 3px 0 0; color: #7b8583; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }.chat-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px; color: #73807d; font-size: 10px; }.chat-row.is-active .chat-meta time { color: var(--online); font-weight: 900; }.unread { display: grid; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px; place-items: center; color: white; background: var(--online); font-size: 10px; font-weight: 900; }.empty-tab { display: none; min-height: 0; flex: 1 1 auto; padding: 72px 28px; color: #7c8785; background: #fff; text-align: center; }.empty-tab.is-open { display: block; }.empty-tab strong { display: block; margin-bottom: 7px; color: #2d3836; font-size: 17px; }.empty-tab p { margin: 0; font-size: 13px; line-height: 1.6; }

.app-footer { position: relative; min-height: 90px; padding: 14px 68px 13px 18px; border-top: 1px solid #edf0ef; background: #fff; text-align: center; }.app-footer p { margin: 0; color: #6e7977; font-size: 10px; line-height: 1.5; }.app-footer p:first-child { color: #2d3634; font-size: 11px; }.app-footer strong { color: #1c2926; }.fab-chat { position: absolute; right: 16px; bottom: 14px; display: grid; width: 55px; height: 55px; padding: 0; border: 0; border-radius: 17px; place-items: center; color: #fff; background: linear-gradient(145deg, #10b39f, #059483); box-shadow: 0 8px 16px rgba(4, 125, 111, .28); cursor: pointer; transition: transform 160ms var(--ease-out), filter 160ms var(--ease-out); }.fab-chat:hover { filter: brightness(1.08); transform: translateY(-2px); }.fab-chat:active { transform: scale(.96); }.bubble-icon { width: 21px; height: 17px; border: 2px solid currentColor; border-radius: 50%; position: relative; }.bubble-icon::after { position: absolute; right: 0; bottom: -4px; width: 7px; height: 7px; content: ""; border-bottom: 2px solid currentColor; transform: skewX(-27deg); }
.live-toast { position: absolute; z-index: 8; top: 12px; right: 15px; left: 15px; display: grid; grid-template-columns: 43px minmax(0, 1fr) auto 20px; align-items: center; gap: 8px; min-height: 59px; padding: 8px 10px; border-radius: 18px; color: #e9f7f4; background: rgba(10, 27, 30, .96); box-shadow: 0 9px 24px rgba(0, 0, 0, .35); transform: translateY(-2px); }.toast-avatar { width: 39px; height: 39px; overflow: hidden; border-radius: 50%; }.toast-avatar img { width: 100%; height: 100%; object-fit: cover; }.toast-copy { min-width: 0; }.toast-copy strong, .toast-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.toast-copy strong { font-size: 12px; }.toast-copy small { margin-top: 2px; color: rgba(237, 249, 247, .73); font-size: 10px; }.toast-now { align-self: start; padding-top: 2px; color: rgba(237, 249, 247, .57); font-size: 9px; }.toast-close { padding: 0; border: 0; color: rgba(237, 249, 247, .65); background: transparent; font-size: 20px; cursor: pointer; }.live-toast.is-hidden { display: none; }

/* WordPress-safe layout lock: third-party button styles must never shrink a chat row to its content width. */
.tech-phone .chat-panel,
.tech-phone .chat-list { width: 100% !important; min-width: 0 !important; }
.tech-phone .chat-list { display: block !important; }
.tech-phone button.chat-row { display: grid !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 8px 17px !important; appearance: none; -webkit-appearance: none; grid-template-columns: 56px minmax(0, 1fr) 70px !important; justify-content: stretch !important; justify-self: stretch !important; align-items: center !important; }
.tech-phone button.chat-row.is-active { background: #ebfaf5 !important; }
.tech-phone .chat-row .chat-copy { width: 100% !important; min-width: 0 !important; }
.tech-phone .chat-row .chat-meta { width: 70px !important; min-width: 70px !important; justify-self: end !important; }

.incoming-call-overlay, .active-call-screen { position: absolute; z-index: 22; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease-out); }
.incoming-call-overlay { display: flex; visibility: hidden; padding: 20px; align-items: center; justify-content: center; background: rgba(4, 22, 24, .60); backdrop-filter: blur(11px) saturate(.8); -webkit-backdrop-filter: blur(11px) saturate(.8); animation: incoming-call-fallback 1ms linear 4500ms forwards; }
.incoming-call-overlay.is-visible { visibility: visible; opacity: 1; pointer-events: auto; animation: none; }
.incoming-call-card { width: min(100%, 305px); padding: 22px 22px 19px; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; color: #f5fffd; background: linear-gradient(145deg, #0d544f, #063d3b); box-shadow: 0 24px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12); text-align: center; transform: translateY(18px) scale(.98); transition: transform 280ms var(--ease-out); }
.incoming-call-overlay.is-visible .incoming-call-card { transform: translateY(0) scale(1); }
.incoming-call-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #a7e8da; font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }.incoming-call-label span { width: 7px; height: 7px; border-radius: 50%; background: #7ff0ce; box-shadow: 0 0 0 5px rgba(127, 240, 206, .12); }
.caller-ring { width: 94px; height: 94px; margin: 18px auto 13px; padding: 5px; border-radius: 50%; background: conic-gradient(#8cf1d4, #199d91, #8cf1d4); animation: caller-ring 1.6s ease-in-out infinite; }.caller-ring img { display: block; width: 100%; height: 100%; border: 4px solid #0b4845; border-radius: 50%; object-fit: cover; }
.incoming-call-card h2 { margin: 0; color: #fff; font-size: 23px; letter-spacing: -.35px; }.incoming-call-status { margin: 5px 0 20px; color: rgba(232,255,249,.73); font-size: 12px; }.incoming-call-actions { display: flex; justify-content: space-between; gap: 38px; max-width: 218px; margin: 0 auto; }.call-action { display: grid; gap: 6px; padding: 0; border: 0; place-items: center; color: #fff; background: transparent; font-weight: 800; cursor: pointer; transition: transform 160ms var(--ease-out); }.call-action:hover { transform: translateY(-2px); }.call-action:active { transform: scale(.94); }.call-action > span { display: grid; width: 52px; height: 52px; border-radius: 50%; place-items: center; color: #fff; font-size: 31px; line-height: 1; }.call-action small { font-size: 11px; }.call-action--decline > span { background: #e74f61; transform: rotate(45deg); }.call-action--accept > span { background: #19af8c; font-size: 30px; transform: rotate(-38deg); }
.active-call-screen { display: flex; flex-direction: column; align-items: center; padding: 32px 22px 30px; color: #effffc; background: radial-gradient(circle at 50% 35%, rgba(52, 176, 152, .4), transparent 34%), linear-gradient(155deg, #075650, #022e30 75%); transform: scale(1.02); }.active-call-screen.is-visible { opacity: 1; pointer-events: auto; transform: scale(1); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }.active-call-top { display: flex; align-items: center; gap: 6px; width: 100%; color: rgba(230,255,248,.75); font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }.call-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #6df0c6; box-shadow: 0 0 0 5px rgba(109,240,198,.12); }.active-caller-photo { width: 150px; height: 150px; margin-top: auto; padding: 7px; border: 1px solid rgba(162,255,231,.45); border-radius: 50%; background: rgba(25,145,128,.22); box-shadow: 0 0 0 11px rgba(99,235,205,.06); }.active-caller-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }.active-call-screen h2 { margin: 22px 0 3px; color: #fff; font-size: 25px; }.active-call-screen > p { margin: 0; color: rgba(229,255,249,.74); font-size: 13px; }.active-call-wave { display: flex; height: 42px; margin: 20px 0 auto; align-items: center; gap: 5px; }.active-call-wave i { width: 4px; height: 12px; border-radius: 10px; background: #8bf6d6; animation: call-wave 900ms ease-in-out infinite alternate; }.active-call-wave i:nth-child(2) { height: 26px; animation-delay: 160ms; }.active-call-wave i:nth-child(3) { height: 38px; animation-delay: 320ms; }.active-call-wave i:nth-child(4) { height: 23px; animation-delay: 470ms; }.active-call-wave i:nth-child(5) { height: 15px; animation-delay: 600ms; }.end-call { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; color: #fff; background: #e74f61; box-shadow: 0 12px 22px rgba(114, 10, 22, .25); font-size: 13px; font-weight: 900; cursor: pointer; }.end-call span { display: inline-block; font-size: 25px; transform: rotate(45deg); }
@keyframes caller-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(128,243,211,.12); transform: scale(1); } 50% { box-shadow: 0 0 0 12px rgba(128,243,211,0); transform: scale(1.03); } }
@keyframes call-wave { from { transform: scaleY(.45); opacity: .6; } to { transform: scaleY(1); opacity: 1; } }
@keyframes incoming-call-fallback { to { visibility: visible; opacity: 1; pointer-events: auto; } }
.customize-hint { position: fixed; right: 18px; bottom: 18px; z-index: 10; padding: 10px 14px; border: 1px solid #d6dfdc; border-radius: 999px; color: #44615c; background: rgba(255, 255, 255, .88); box-shadow: 0 12px 26px rgba(26, 45, 40, .12); backdrop-filter: blur(10px); font-size: 11px; font-weight: 800; }.customize-hint a { color: var(--teal-800); }
@media (max-width: 570px) { .usa-tech-page { display: block; padding: 0; }.tech-phone { width: 100%; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }.tech-phone::before { display: none; }.tech-app { min-height: 100dvh; max-height: none; }.chat-panel { min-height: 0; }.chat-list { max-height: none; }.customize-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }