/* קמפי hybrid - עיצוב פרודקשן. פאנל צף ממורכז על "במה" בגוון נייבי, פונט Heebo, מצב בהיר + כהה אוטומטי (prefers-color-scheme), RTL מלא. */ /* ==================================================== פונט Heebo (מקומי) */ @font-face { font-family:Heebo; font-weight:400; font-display:swap; src:url(fonts/hebrew-400-normal.woff2) format("woff2"); unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face { font-family:Heebo; font-weight:400; font-display:swap; src:url(fonts/latin-400-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; } @font-face { font-family:Heebo; font-weight:500; font-display:swap; src:url(fonts/hebrew-500-normal.woff2) format("woff2"); unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face { font-family:Heebo; font-weight:500; font-display:swap; src:url(fonts/latin-500-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; } @font-face { font-family:Heebo; font-weight:700; font-display:swap; src:url(fonts/hebrew-700-normal.woff2) format("woff2"); unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face { font-family:Heebo; font-weight:700; font-display:swap; src:url(fonts/latin-700-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; } @font-face { font-family:Heebo; font-weight:800; font-display:swap; src:url(fonts/hebrew-800-normal.woff2) format("woff2"); unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face { font-family:Heebo; font-weight:800; font-display:swap; src:url(fonts/latin-800-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; } /* ==================================================== טוקנים - מצב בהיר */ :root { --stage-1:#16294a; --stage-2:#1F3864; --stage-3:#2E75B6; --stage-glow:rgba(46,117,182,.38); --panel:#ffffff; --panel-border:#E4EBF5; --surface:#F7FAFD; --header-bg:#ffffff; --footer-bg:#ffffff; --bubble-campi:#ffffff; --bubble-campi-border:#E4EBF5; --card:#ffffff; --card-border:#E0E9F5; --card-icon-bg:#EAF1FA; --input-bg:#F1F5FB; --input-border:#E0E9F5; --divider:#E7EDF5; --text:#1B2A44; --text-2:#5E6B80; --text-3:#8592A6; --heading:#1F3864; --accent:#2E75B6; --accent-strong:#1F3864; --user-1:#1F3864; --user-2:#2E75B6; --brand-1:#1F3864; --brand-2:#2E75B6; --green:#1E7B34; --green-bg:#E7F5EC; --red:#C0392B; --red-bg:#FCEBEA; --amber:#B7791F; --amber-bg:#FBF3E2; --amber-panel:#FFFDF5; --code-bg:#F1F5FB; --shadow-panel:0 24px 60px rgba(15,29,51,.28); --shadow-card:0 1px 3px rgba(31,56,100,.06); --shadow-card-h:0 8px 22px rgba(31,56,100,.16); --brand-shadow:0 4px 12px rgba(31,56,100,.28); --ring:rgba(46,117,182,.32); --scroll:#CBD7E8; /* Campi DS 1.0: זהב - צבע רגעי האישור */ --gold:#D99A16; --gold-2:#F0B429; --gold-ink:#3B2B06; --gold-bg:#FDF6E3; --gold-shadow:0 4px 14px rgba(217,154,22,.35); } /* ==================================================== טוקנים - מצב כהה נשלט ע"י data-theme על (סקריפט ב-head קובע ברירת מחדל לפי המכשיר, כפתור מאפשר החלפה ידנית). ניגודיות מוגברת - טקסטים חשובים בהירים מאוד. */ :root[data-theme="dark"] { --stage-1:#05090f; --stage-2:#0a1220; --stage-3:#14284a; --stage-glow:rgba(58,134,200,.20); --panel:#161d2c; --panel-border:#28324a; --surface:#0f1520; --header-bg:#161d2c; --footer-bg:#161d2c; --bubble-campi:#1e2739; --bubble-campi-border:#2f3c54; --card:#1e2739; --card-border:#33415a; --card-icon-bg:#28344e; --input-bg:#1e2739; --input-border:#3a4966; --divider:#2a3547; --text:#F3F6FB; --text-2:#CBD6E8; --text-3:#9DACC4; --heading:#A6C6EE; --accent:#6BAAE4; --accent-strong:#A6C6EE; --user-1:#265088; --user-2:#3A86C8; --brand-1:#265088; --brand-2:#3A86C8; --green:#74DE9E; --green-bg:rgba(46,160,90,.22); --red:#F49A93; --red-bg:rgba(224,85,85,.2); --amber:#F0CD79; --amber-bg:rgba(191,144,0,.2); --amber-panel:#1e2434; --code-bg:#0f1520; --shadow-panel:0 24px 70px rgba(0,0,0,.6); --shadow-card:0 1px 3px rgba(0,0,0,.35); --shadow-card-h:0 8px 22px rgba(0,0,0,.5); --brand-shadow:0 4px 14px rgba(0,0,0,.45); --ring:rgba(107,170,228,.45); --scroll:#33415a; /* Campi DS 1.0: זהב - צבע רגעי האישור */ --gold:#E8AC28; --gold-2:#F5C24B; --gold-ink:#2A1F04; --gold-bg:rgba(240,180,41,.14); --gold-shadow:0 4px 14px rgba(0,0,0,.4); } /* ==================================================== בסיס */ * { box-sizing:border-box; margin:0; padding:0; } html, body { height:100%; } body { font-family:Heebo, Arial, "Segoe UI", sans-serif; color:var(--text); overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background: radial-gradient(1100px 620px at 82% -12%, var(--stage-glow), transparent 60%), linear-gradient(160deg, var(--stage-1) 0%, var(--stage-2) 58%, var(--stage-3) 130%); background-attachment:fixed; } .hidden { display:none !important; } .screen { height:100dvh; display:flex; flex-direction:column; } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* ==================================================== מסך צימוד */ #pairScreen { align-items:center; justify-content:center; padding:20px; } .pairCard { background:var(--panel); border:1px solid var(--panel-border); border-radius:22px; padding:40px 34px; width:min(92vw, 400px); text-align:center; box-shadow:var(--shadow-panel); } .pairCard .logo { width:66px; height:66px; border-radius:18px; margin:0 auto 14px; background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); display:flex; align-items:center; justify-content:center; font-size:34px; box-shadow:var(--brand-shadow); } .pairCard h1 { color:var(--heading); font-size:26px; font-weight:800; margin:2px 0; } .pairCard .sub { color:var(--text-2); font-size:14px; margin-bottom:24px; } .pairCard .hint { font-size:13.5px; color:var(--text-2); margin-bottom:10px; } .pairCard input { width:100%; padding:13px 14px; border:1.5px solid var(--input-border); background:var(--input-bg); color:var(--text); border-radius:12px; font-size:15px; text-align:center; direction:ltr; font-family:inherit; transition:.15s; } .pairCard input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); } .pwdWrap { position:relative; } .pwdWrap input { padding-inline-end:42px; } .pairEye { position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; font-size:15px; color:var(--text-3); border-radius:8px; transition:.15s; font-family:inherit; } .pairEye:hover { color:var(--accent); background:var(--card-icon-bg); } /* רק כפתור ההתחברות הראשי (ילד ישיר) - לא כפתור העין שמקונן ב-.pwdWrap */ .pairCard > button { width:100%; margin-top:14px; padding:13px; border:none; border-radius:12px; background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#fff; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:var(--brand-shadow); transition:filter .15s; } .pairCard > button:hover { filter:brightness(1.08); } .pairCard > button:disabled { opacity:.6; cursor:default; } .pairCard .error { color:var(--red); font-size:13px; margin-top:12px; } .pairCard .fine { color:var(--text-3); font-size:11px; margin-top:24px; } /* ==================================================== שלד: במה + פאנל צף */ #chatScreen { align-items:center; justify-content:center; padding:clamp(0px, 3vh, 34px) clamp(0px, 3vw, 40px); } .appPanel { width:100%; max-width:840px; height:100%; max-height:920px; background:var(--panel); border:1px solid var(--panel-border); border-radius:22px; box-shadow:var(--shadow-panel); overflow:hidden; display:flex; flex-direction:column; } /* ==================================================== כותרת */ header { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; background:var(--header-bg); border-bottom:1px solid var(--divider); flex-shrink:0; } .brand { display:flex; align-items:center; gap:11px; } .logo-mark { width:40px; height:40px; border-radius:12px; flex-shrink:0; background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); display:flex; align-items:center; justify-content:center; font-size:21px; box-shadow:var(--brand-shadow); } header .title { font-weight:700; font-size:16px; color:var(--heading); line-height:1.2; } header .subtitle { font-size:11.5px; color:var(--text-3); } .headRight { display:flex; align-items:center; gap:9px; } .newChatBtn { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--accent); cursor:pointer; background:transparent; border:1px solid var(--card-border); border-radius:999px; padding:6px 12px; white-space:nowrap; font-family:inherit; transition:.15s; } .newChatBtn:hover { background:var(--card-icon-bg); border-color:var(--accent); } .newChatBtn:disabled { opacity:.45; cursor:default; } /* כפתור תפריט קבוע - תמיד זמין, כדי שלעולם לא תיתקע בלי כפתורים */ .menuBtn { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#fff; cursor:pointer; white-space:nowrap; font-family:inherit; background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); border:none; border-radius:999px; padding:6px 13px; box-shadow:var(--brand-shadow); transition:filter .15s; } .menuBtn:hover { filter:brightness(1.08); } .iconBtn { width:32px; height:32px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:15px; line-height:1; cursor:pointer; background:transparent; border:1px solid var(--card-border); border-radius:999px; color:var(--text-2); font-family:inherit; transition:.15s; } .iconBtn:hover { background:var(--card-icon-bg); border-color:var(--accent); } .connPill { font-size:11.5px; font-weight:600; border-radius:999px; padding:5px 11px; display:inline-flex; align-items:center; gap:6px; } .connPill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .conn-online { color:var(--green); background:var(--green-bg); } .conn-connecting { color:var(--text-3); background:var(--input-bg); } .conn-offline { color:var(--red); background:var(--red-bg); } .demoBar { background:var(--gold-bg); color:var(--gold); font-size:12.5px; font-weight:700; text-align:center; padding:8px 10px; flex-shrink:0; border-bottom:1px solid var(--gold); } .offlineBar { background:var(--red-bg); color:var(--red); font-size:12.5px; font-weight:600; text-align:center; padding:8px 10px; flex-shrink:0; } .offlineBar .dots span { animation:blink 1.2s infinite; } .offlineBar .dots span:nth-child(2){ animation-delay:.2s } .offlineBar .dots span:nth-child(3){ animation-delay:.4s } /* ==================================================== אזור הודעות */ main { flex:1; overflow-y:auto; padding:20px 18px 12px; background:var(--surface); display:flex; flex-direction:column; gap:2px; scrollbar-width:thin; scrollbar-color:var(--scroll) transparent; } main::-webkit-scrollbar { width:8px; } main::-webkit-scrollbar-thumb { background:var(--scroll); border-radius:4px; border:2px solid var(--surface); } main::-webkit-scrollbar-track { background:transparent; } .msgWrap { display:flex; flex-direction:column; margin-bottom:9px; max-width:100%; animation:msgIn .28s ease; } .msgWrap.user { align-items:flex-start; } .msgWrap.campi { align-items:flex-end; } .msgWrap.center{ align-items:center; } /* בועת קמפי + אווטאר רובוט (האווטאר בקצה החיצוני, יושב בתחתית הבועה) */ .msgRow { display:flex; align-items:flex-end; gap:8px; max-width:88%; } .msgRow .msg { max-width:100%; } .avatar { width:30px; height:30px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:var(--shadow-card); } .msgWrap.campi .msgTime { margin-inline-end:38px; } .msg { max-width:82%; padding:11px 15px; border-radius:16px; font-size:14.5px; line-height:1.65; word-break:break-word; } .msg.user { background:linear-gradient(135deg, var(--user-1), var(--user-2)); color:#fff; border-bottom-right-radius:5px; white-space:pre-wrap; box-shadow:0 2px 8px rgba(31,56,100,.18); } .msg.campi { background:var(--bubble-campi); border:1px solid var(--bubble-campi-border); color:var(--text); border-bottom-left-radius:5px; box-shadow:var(--shadow-card); } .msg.system { background:var(--card-icon-bg); color:var(--text-2); font-size:12.5px; border-radius:10px; padding:7px 14px; } .msg.error { background:var(--red-bg); color:var(--red); font-size:13px; border-radius:10px; padding:9px 14px; } .msgTime { font-size:10.5px; color:var(--text-3); margin:4px 7px 0; } .daySep { align-self:center; background:var(--card-icon-bg); color:var(--text-2); font-size:11.5px; font-weight:600; border-radius:999px; padding:4px 14px; margin:12px 0 8px; } /* תוכן עשיר בתוך בועת קמפי */ .msg.campi b, .msg.campi strong { color:var(--heading); font-weight:700; } .msg.campi p { margin:0 0 8px; } .msg.campi p:last-child { margin-bottom:0; } .msg.campi h3 { color:var(--heading); font-size:15.5px; font-weight:700; margin:10px 0 6px; border-bottom:2px solid var(--divider); padding-bottom:3px; } .msg.campi h4 { color:var(--accent); font-size:14.5px; font-weight:700; margin:8px 0 4px; } .msg.campi ul, .msg.campi ol { margin:4px 0 8px; padding-right:20px; } .msg.campi li { margin:3px 0; } .msg.campi a { color:var(--accent); } .msg.campi table { border-collapse:collapse; margin:8px 0; width:100%; font-size:13px; display:block; overflow-x:auto; } .msg.campi th { background:var(--accent-strong); color:#fff; padding:6px 9px; text-align:right; font-size:12.5px; white-space:nowrap; } .msg.campi td { border:1px solid var(--bubble-campi-border); padding:5px 9px; text-align:right; } .msg.campi tr:nth-child(even) td { background:var(--surface); } .msg.campi code { background:var(--code-bg); color:var(--text); border-radius:4px; padding:1px 5px; font-family:Consolas, monospace; font-size:13px; } .msg .cursor { display:inline-block; width:7px; height:1em; vertical-align:-2px; background:var(--accent); animation:blink .9s infinite; border-radius:2px; } /* בועה ארוכה מתקפלת - דוחות ענקיים לא משתלטים על השיחה */ .msg.campi.clamped { max-height:380px; overflow:hidden; -webkit-mask-image:linear-gradient(#000 78%, transparent); mask-image:linear-gradient(#000 78%, transparent); } .expandBtn { align-self:flex-end; margin:4px 38px 2px 0; border:1px solid var(--card-border); background:var(--card); color:var(--accent); border-radius:999px; padding:4px 13px; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:.15s; } .expandBtn:hover { border-color:var(--accent); } /* חלונית קיצורי מקלדת (?) */ .kbdrows { display:flex; flex-direction:column; gap:8px; text-align:right; margin:4px 0 14px; } .kbdrow { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:13px; color:var(--text-2); } .kbd { background:var(--input-bg); border:1px solid var(--card-border); border-radius:6px; padding:2px 8px; font-size:11.5px; font-weight:700; color:var(--text); direction:ltr; } @keyframes blink { 50% { opacity:0; } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes msgIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } /* ==================================================== מסך פתיחה (welcome hero) */ .welcome { align-self:stretch; text-align:center; padding:18px 6px 2px; animation:msgIn .38s ease; } .welcome .wLogo { width:64px; height:64px; border-radius:18px; margin:4px auto 14px; background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); display:flex; align-items:center; justify-content:center; font-size:34px; box-shadow:0 10px 26px rgba(31,56,100,.3); } .welcome h2 { font-size:19px; color:var(--heading); font-weight:800; margin-bottom:8px; } .welcome p { font-size:13.5px; color:var(--text-2); line-height:1.6; max-width:430px; margin:0 auto; } .welcome .wHint { font-size:12.5px; color:var(--text-3); font-weight:600; margin-top:14px; } /* כרטיסי פעולה מהירה */ .quickActions { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; max-width:560px; margin:12px auto 14px; } .qaChip { display:flex; align-items:center; gap:11px; text-align:right; cursor:pointer; background:var(--card); border:1px solid var(--card-border); border-radius:14px; padding:12px 13px; font-family:inherit; box-shadow:var(--shadow-card); transition:transform .12s, box-shadow .18s, border-color .18s; } .qaChip:hover { transform:translateY(-2px); box-shadow:var(--shadow-card-h); border-color:var(--accent); } .qaChip:active { transform:translateY(0) scale(.98); } .qaChip .qaIcon { width:38px; height:38px; flex-shrink:0; border-radius:11px; background:var(--card-icon-bg); display:flex; align-items:center; justify-content:center; font-size:19px; } .qaChip .qaText { display:flex; flex-direction:column; gap:1px; min-width:0; } .qaChip .qaLabel { font-size:13.5px; font-weight:700; color:var(--heading); } .qaChip .qaSub { font-size:11px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ==================================================== קובץ להורדה */ .fileChip { align-self:flex-end; display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--accent); border-radius:14px; padding:11px 14px; max-width:82%; margin-bottom:9px; box-shadow:var(--shadow-card); animation:msgIn .28s ease; } .fileChip .ic { font-size:24px; } .fileChip .meta { display:flex; flex-direction:column; } .fileChip a { color:var(--heading); font-weight:700; font-size:13.5px; text-decoration:none; word-break:break-all; } .fileChip a:hover { text-decoration:underline; } .fileChip .kind { font-size:11px; color:var(--text-3); } /* ==================================================== העלאה עם פס התקדמות */ .uploadChip { align-self:flex-start; background:var(--card); border:1px solid var(--card-border); border-radius:14px; padding:9px 14px; max-width:82%; margin-bottom:9px; font-size:13px; color:var(--text-2); } .uploadChip .bar { height:5px; background:var(--input-bg); border-radius:3px; margin-top:7px; overflow:hidden; } .uploadChip .fill { height:100%; width:0%; background:var(--accent); border-radius:3px; transition:width .2s; } .uploadChip.done .fill { background:var(--green); } .uploadChip.err { background:var(--red-bg); color:var(--red); border-color:var(--red); } /* ==================================================== שורת עבודה */ .workBar { display:flex; align-items:center; gap:11px; padding:10px 16px; background:var(--surface); border-top:1px solid var(--divider); flex-shrink:0; font-size:13.5px; color:var(--heading); font-weight:600; } .spinner { width:16px; height:16px; border:2.5px solid var(--card-border); border-top-color:var(--accent); border-radius:50%; flex-shrink:0; animation:spin 1s linear infinite; } .workTimer { margin-inline-start:auto; color:var(--text-3); font-weight:400; font-size:12.5px; direction:ltr; } .stopBtn { border:1px solid var(--red); color:var(--red); background:transparent; border-radius:999px; padding:4px 13px; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:.15s; white-space:nowrap; } .stopBtn:hover { background:var(--red-bg); } .workTip { font-size:12px; color:var(--text-3); padding:0 16px 9px; background:var(--surface); flex-shrink:0; } .workTip b { color:var(--text-2); } /* ==================================================== פס אישור */ .approvalBar { padding:12px 16px; background:var(--gold-bg); border-top:2px solid var(--gold); flex-shrink:0; } .approvalHint { font-size:12.5px; color:var(--amber); font-weight:700; margin-bottom:9px; } .approvalBtns { display:flex; gap:10px; } .approvalBtns button { flex:1; padding:12px; border:none; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s; } .approvalBtns .approve { background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:var(--gold-ink); box-shadow:var(--gold-shadow); } .approvalBtns .approve:hover { filter:brightness(1.05); } .approvalBtns .cancel { background:transparent; color:var(--red); border:2px solid var(--red); } .approvalBtns .cancel:hover { background:var(--red-bg); } /* ==================================================== קלט */ footer { display:flex; align-items:flex-end; gap:9px; padding:12px 14px; background:var(--footer-bg); border-top:1px solid var(--divider); flex-shrink:0; padding-bottom:max(12px, env(safe-area-inset-bottom)); } .micBtn { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:17px; cursor:pointer; font-family:inherit; border:1.5px solid var(--input-border); border-radius:14px; background:var(--input-bg); transition:.15s; } .micBtn:hover { border-color:var(--accent); } .micBtn.rec { border-color:var(--red); background:var(--red-bg); animation:micPulse 1.1s infinite; } @keyframes micPulse { 50% { box-shadow:0 0 0 6px rgba(224,85,85,.15); } } .upload { font-size:20px; cursor:pointer; padding:9px 6px; user-select:none; color:var(--text-3); border-radius:10px; transition:.15s; } .upload:hover { color:var(--accent); background:var(--input-bg); } #input { flex:1; border:1.5px solid var(--input-border); background:var(--input-bg); color:var(--text); border-radius:14px; padding:11px 14px; font-size:14.5px; font-family:inherit; resize:none; max-height:120px; line-height:1.5; transition:border-color .15s, box-shadow .15s; } #input::placeholder { color:var(--text-3); } #input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); background:var(--panel); } #input:disabled { opacity:.6; } #sendBtn { background:linear-gradient(135deg, var(--user-1), var(--user-2)); color:#fff; border:none; border-radius:14px; width:46px; height:44px; font-size:17px; cursor:pointer; transform:scaleX(-1); flex-shrink:0; box-shadow:var(--brand-shadow); transition:filter .15s, transform .1s; } #sendBtn:hover:not(:disabled) { filter:brightness(1.1); } #sendBtn:active:not(:disabled) { transform:scaleX(-1) scale(.94); } #sendBtn:disabled { background:var(--card-border); box-shadow:none; cursor:default; } /* ==================================================== ספריית הקריאייטיבים */ .overlay { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(10,18,32,.55); backdrop-filter:blur(4px); padding:22px; } .galleryPanel { background:var(--panel); border:1px solid var(--panel-border); border-radius:20px; width:min(94vw, 760px); max-height:min(88dvh, 820px); display:flex; flex-direction:column; box-shadow:var(--shadow-panel); overflow:hidden; } .gHead { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--divider); background:var(--header-bg); } .gTitle { font-weight:800; font-size:16.5px; color:var(--heading); } .gScroll { overflow-y:auto; padding:16px 18px 22px; display:flex; flex-direction:column; gap:14px; } .gScroll::-webkit-scrollbar { width:8px; } .gScroll::-webkit-scrollbar-thumb { background:var(--scroll); border-radius:8px; } .gCreateBtn { border:1.5px dashed var(--accent); background:transparent; color:var(--accent); border-radius:12px; padding:12px; font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; transition:.15s; } .gCreateBtn:hover { background:var(--card-icon-bg); } /* ---------- ספריית מדיה: כותרות סקציה + "המדיה שלי" ---------- */ .gSecHead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 2px 4px; } .gSecTitle { font-weight:800; font-size:15px; color:var(--heading); } .gSecSub { font-size:12px; color:var(--text-3); margin:0 2px 11px; line-height:1.5; } .mediaUploadBtn { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:12.5px; font-weight:700; color:#fff; font-family:inherit; white-space:nowrap; background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); border-radius:999px; padding:7px 14px; box-shadow:var(--brand-shadow); transition:filter .15s; } .mediaUploadBtn:hover { filter:brightness(1.08); } .mediaGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:10px; margin-bottom:6px; } .mediaCell { display:flex; flex-direction:column; gap:7px; background:var(--card); border:1px solid var(--card-border); border-radius:12px; padding:8px; box-shadow:var(--shadow-card); } .mediaThumb { position:relative; border-radius:9px; overflow:hidden; background:var(--card-icon-bg); aspect-ratio:1/1; } .mediaThumb img, .mediaThumb video { display:block; width:100%; height:100%; object-fit:cover; } .mediaPlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6); pointer-events:none; } .mediaName { font-size:11px; color:var(--text-2); direction:ltr; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mediaActions { display:flex; gap:6px; } .mediaUse { flex:1; cursor:pointer; font-family:inherit; font-size:11.5px; font-weight:700; color:#fff; background:var(--accent); border:none; border-radius:8px; padding:6px 8px; transition:filter .15s; } .mediaUse:hover { filter:brightness(1.08); } .mediaDel { cursor:pointer; font-family:inherit; font-size:12px; color:var(--red); background:transparent; border:1px solid var(--card-border); border-radius:8px; padding:6px 9px; transition:.15s; } .mediaDel:hover { background:var(--red-bg); border-color:var(--red); } .gBody { display:flex; flex-direction:column; gap:14px; } .gEmpty { text-align:center; color:var(--text-2); padding:26px 10px; font-size:14px; } .gEmptyIcon { font-size:34px; margin-bottom:8px; } .robotart { display:block; width:140px; max-width:60%; height:auto; margin:0 auto 12px; } .gEmptySub { font-size:12.5px; color:var(--text-3); margin-top:6px; line-height:1.6; } .gBatch { background:var(--card); border:1px solid var(--card-border); border-radius:14px; padding:13px 14px; box-shadow:var(--shadow-card); } .gBatchHead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; } .gBatchTitle { font-weight:700; font-size:14px; color:var(--text); } .gBadge { font-size:11.5px; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap; } .gBadge.ok { background:var(--green-bg); color:var(--green); } .gBadge.draft { background:var(--amber-bg); color:var(--amber); } .gGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; } .gCell { display:flex; flex-direction:column; gap:6px; } .gCell a { display:block; border-radius:10px; overflow:hidden; border:1px solid var(--card-border); background:var(--surface); } .gCell img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .2s; } .gCell.tall img { aspect-ratio:9/16; } .gCell a:hover img { transform:scale(1.04); } .gMeta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; color:var(--text-3); } .gDir { font-weight:600; color:var(--text-2); } .gFmt { background:var(--card-icon-bg); border-radius:6px; padding:1px 6px; direction:ltr; } .gUp { color:var(--green); font-weight:700; } .gUploadBtn { margin-top:12px; width:100%; padding:11px; border:none; border-radius:11px; cursor:pointer; font-family:inherit; font-weight:700; font-size:13.5px; color:#fff; background:linear-gradient(135deg, var(--green), #2ea05a); box-shadow:var(--shadow-card); transition:filter .15s; } .gUploadBtn:hover { filter:brightness(1.08); } /* ==================================================== מובייל: פאנל במסך מלא */ @media (max-width: 680px) { #chatScreen { padding:0; } .appPanel { max-width:none; max-height:none; height:100%; border:none; border-radius:0; box-shadow:none; } main { padding:16px 13px 10px; } .msg { max-width:88%; } .quickActions { grid-template-columns:1fr; } header { padding:11px 14px; } /* כותרת ב-375px: 6 פקדים לא נכנסים עם תוויות - עוברים לאייקונים בלבד, ופס-החיבור הופך לנקודת-סטטוס (הצבע לפי מצב נשאר). כלום לא נחתך. */ .headRight { gap:6px; } .headRight .btnLabel { display:none; } .connPill { font-size:0; width:12px; height:12px; min-width:12px; padding:0; border-radius:50%; } .overlay { padding:0; } .galleryPanel { width:100%; max-height:100dvh; height:100%; border-radius:0; border:none; } .gGrid { grid-template-columns:repeat(2, 1fr); } .mediaGrid { grid-template-columns:repeat(2, 1fr); } } /* ==================================================== נגישות: הפחתת תנועה */ @media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ================================================== זרימות כפתוריות (Flow UI) */ .flowBtns{display:flex;flex-wrap:wrap;gap:8px;margin:2px 44px 10px 0;justify-content:flex-start} .flowBtn{ appearance:none;border:1px solid var(--card-border);background:var(--card); color:var(--heading);font:inherit;font-size:.92rem;font-weight:600; padding:9px 14px;border-radius:14px;cursor:pointer; box-shadow:var(--shadow-card);transition:transform .12s,box-shadow .12s,background .12s; } .flowBtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card-h);background:var(--card-icon-bg)} .flowBtns.done .flowBtn{opacity:.45;pointer-events:none} .flowBtns.done .flowBtn.chosen{opacity:1;background:var(--card-icon-bg);border-color:var(--accent)} .flowForm{ background:var(--bubble-campi);border:1px solid var(--bubble-campi-border); border-radius:16px;padding:14px;margin:2px 44px 10px 0;max-width:520px; box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:10px; } .flowForm.done{opacity:.55;pointer-events:none} .ffRow{display:flex;flex-direction:column;gap:4px} .ffLabel{font-size:.85rem;color:var(--text-2);font-weight:600} .ffInput{ background:var(--input-bg);border:1px solid var(--input-border);border-radius:10px; padding:9px 12px;font:inherit;color:var(--text);outline:none; } .ffInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)} .ffSubmit{align-self:flex-start;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));color:#fff;border:none} .ffSubmit:hover{background:linear-gradient(135deg,var(--brand-1),var(--brand-2));opacity:.92} /* ==================================================== Campi DS 1.0 - רכיבי יסוד */ /* לוגו כתמונה: ה-SVG כבר כולל את רקע הגרדיאנט, הקונטיינר נותן גודל+צל בלבד */ .logoImg { display:block; width:100%; height:100%; border-radius:inherit; } .pairCard .logo, .logo-mark, .welcome .wLogo, .avatar { background:none; overflow:hidden; } /* ---------- מודאל (מחליף confirm) ---------- */ .dsModalOverlay { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; background:rgba(10,18,32,.55); backdrop-filter:blur(4px); padding:22px; animation:msgIn .18s ease; } .dsModal { background:var(--panel); border:1px solid var(--panel-border); border-radius:18px; width:min(92vw, 380px); padding:24px 22px; box-shadow:var(--shadow-panel); text-align:center; } .dsModal .dsmIcon { font-size:34px; margin-bottom:8px; } .dsModal h3 { color:var(--heading); font-size:17px; font-weight:800; margin-bottom:7px; } .dsModal p { color:var(--text-2); font-size:13.5px; line-height:1.6; margin-bottom:18px; } .dsmBtns { display:flex; gap:10px; } .dsmBtns button { flex:1; padding:11px; border:none; border-radius:12px; font-size:14.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s; } .dsmBtns .dsmOk { background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#fff; box-shadow:var(--brand-shadow); } .dsmBtns .dsmOk:hover { filter:brightness(1.08); } .dsmBtns .dsmOk.danger { background:var(--red); box-shadow:none; } .dsmBtns .dsmCancel { background:transparent; color:var(--text-2); border:1.5px solid var(--card-border); } .dsmBtns .dsmCancel:hover { background:var(--input-bg); } /* ---------- טוסטים ---------- */ .toastWrap { position:fixed; bottom:max(18px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:min(92vw, 420px); } .toast { display:flex; align-items:center; gap:9px; pointer-events:auto; background:var(--panel); border:1px solid var(--panel-border); border-radius:999px; padding:10px 18px; font-size:13.5px; font-weight:600; color:var(--text); box-shadow:var(--shadow-panel); animation:toastIn .25s ease; max-width:100%; } .toast.ok { border-color:var(--green); color:var(--green); } .toast.err { border-color:var(--red); color:var(--red); } .toast.out { animation:toastOut .25s ease forwards; } @keyframes toastIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } @keyframes toastOut { to { opacity:0; transform:translateY(10px); } } /* ---------- סקלטון (טעינה) ---------- */ .skel { background:linear-gradient(90deg, var(--input-bg) 25%, var(--card-icon-bg) 50%, var(--input-bg) 75%); background-size:200% 100%; animation:skelWave 1.4s ease infinite; border-radius:10px; } @keyframes skelWave { from { background-position:200% 0; } to { background-position:-200% 0; } } .skelCell { aspect-ratio:1/1; border-radius:12px; } /* ---------- FAB גלילה לתחתית ---------- */ .scrollFab { position:absolute; bottom:14px; left:14px; z-index:5; display:flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit; background:var(--panel); color:var(--accent); border:1px solid var(--card-border); border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:700; box-shadow:var(--shadow-card-h); transition:.15s; animation:msgIn .2s ease; } .scrollFab:hover { border-color:var(--accent); } .scrollFab .nb { background:var(--accent); color:#fff; border-radius:999px; font-size:10.5px; padding:1px 7px; font-weight:800; } .msgsHost { position:relative; flex:1; display:flex; flex-direction:column; min-height:0; } .msgsHost main { flex:1; } /* ---------- לייטבוקס ---------- */ .lightbox { position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; background:rgba(6,10,18,.86); backdrop-filter:blur(6px); padding:20px; animation:msgIn .18s ease; } .lbImg { max-width:min(94vw, 900px); max-height:82dvh; border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.6); object-fit:contain; } .lbBar { position:absolute; top:16px; inset-inline:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .lbTitle { color:#dfe9f7; font-size:13px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lbActions { display:flex; gap:8px; } .lbBtn { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; font-size:16px; cursor:pointer; font-family:inherit; transition:.15s; text-decoration:none; } .lbBtn:hover { background:rgba(255,255,255,.18); } .lbNav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; font-size:20px; cursor:pointer; font-family:inherit; transition:.15s; } .lbNav:hover { background:rgba(255,255,255,.18); } .lbNav.prev { right:14px; } .lbNav.next { left:14px; } .lbCount { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#c8d6ea; font-size:12.5px; font-weight:600; } /* ---------- העתקת בועה ---------- */ .msgRow { position:relative; } .copyBtn { position:absolute; top:6px; left:6px; width:28px; height:28px; z-index:2; display:flex; align-items:center; justify-content:center; font-size:13px; border-radius:8px; border:1px solid var(--card-border); background:var(--panel); color:var(--text-3); cursor:pointer; font-family:inherit; opacity:0; transition:.15s; } .msgRow:hover .copyBtn, .copyBtn:focus-visible { opacity:1; } .copyBtn:hover { color:var(--accent); border-color:var(--accent); } @media (hover:none) { .copyBtn { opacity:.55; } } /* ---------- הודעה שלא נשלחה + שליחה חוזרת ---------- */ .msg.user.failed { opacity:.55; } .retryChip { margin:4px 0 10px; background:var(--red-bg); color:var(--red); border:1px solid var(--red); border-radius:999px; padding:5px 14px; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:.15s; } .retryChip:hover { filter:brightness(1.06); } /* ---------- תמונה inline בצ'אט (קריאייטיבים) ---------- */ .imgChip { align-self:flex-end; max-width:250px; border-radius:14px; overflow:hidden; border:1px solid var(--card-border); cursor:zoom-in; margin-bottom:9px; box-shadow:var(--shadow-card); transition:transform .15s, box-shadow .18s; animation:msgIn .28s ease; } .imgChip:hover { transform:translateY(-2px); box-shadow:var(--shadow-card-h); } .imgChip img { display:block; width:100%; } /* ---------- העלאות בגלריה + גרירה ---------- */ .gUpList { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; } .galleryPanel.dropOver { outline:2.5px dashed var(--accent); outline-offset:-10px; } /* ---------- צ'יפי המשך "מה עכשיו?" ---------- */ .suggestRow { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:2px 44px 12px 0; animation:msgIn .25s ease; } .suggestLbl { font-size:11.5px; color:var(--text-3); font-weight:600; } .suggestChip { border:1px solid var(--card-border); background:transparent; color:var(--text-2); border-radius:999px; padding:6px 13px; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:.15s; } .suggestChip:hover { border-color:var(--accent); color:var(--accent); background:var(--card-icon-bg); } /* ---------- קפיצה לבריף מהפס אישור ---------- */ .approvalHint { cursor:pointer; } .approvalHint:hover { text-decoration:underline; } /* ---------- גרירת קבצים לפאנל הצ'אט ---------- */ .appPanel.dropOver { outline:2.5px dashed var(--accent); outline-offset:-8px; } /* ---------- סקלטון היסטוריית שיחה ---------- */ .msgsSkel { display:flex; flex-direction:column; gap:10px; padding:4px 0; } .skelBubble { border-radius:16px; height:44px; } .skelBubble.user { align-self:flex-start; width:46%; } .skelBubble.campi { align-self:flex-end; width:64%; } /* ---------- כפתור נסה-שוב עצמאי ---------- */ main > .retryChip { align-self:flex-start; margin-top:0; } /* ---------- Command Palette (Ctrl+K) — זהה לענן ---------- */ .cmdkOverlay { position:fixed; inset:0; z-index:96; display:flex; align-items:flex-start; justify-content:center; padding:12vh 20px 20px; background:rgba(10,18,32,.55); backdrop-filter:blur(4px); animation:msgIn .15s ease; } .cmdk { width:min(94vw, 520px); background:var(--panel); border:1px solid var(--panel-border); border-radius:16px; box-shadow:var(--shadow-panel); overflow:hidden; } .cmdkInput { width:100%; border:none; border-bottom:1px solid var(--divider); background:transparent; color:var(--text); font:inherit; font-size:15.5px; padding:15px 18px; outline:none; } .cmdkList { max-height:320px; overflow-y:auto; padding:6px; } .cmdkItem { display:flex; align-items:center; gap:11px; width:100%; text-align:right; border:none; background:transparent; color:var(--text); font:inherit; font-size:14px; padding:10px 12px; border-radius:10px; cursor:pointer; } .cmdkItem.sel { background:var(--card-icon-bg); } .cmdkIc { font-size:16px; width:22px; text-align:center; } .cmdkLbl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; } .cmdkKind { font-size:11px; color:var(--text-3); } .cmdkEmpty { padding:18px; text-align:center; color:var(--text-2); font-size:13.5px; } .cmdkHint { border-top:1px solid var(--divider); padding:8px 16px; font-size:11.5px; color:var(--text-3); } /* ---------- מודאל דוח (iframe) ---------- */ .repOverlay { position:fixed; inset:0; z-index:92; display:flex; align-items:center; justify-content:center; background:rgba(10,18,32,.6); backdrop-filter:blur(4px); padding:20px; animation:msgIn .18s ease; } .repModal { width:min(96vw, 900px); height:min(88dvh, 760px); display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--panel-border); border-radius:18px; box-shadow:var(--shadow-panel); overflow:hidden; } .repHead { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--divider); } .repTitle { font-size:13.5px; font-weight:700; color:var(--heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .repActs { display:flex; gap:6px; align-items:center; } .repBtn { border:1px solid var(--card-border); background:transparent; color:var(--text-2); border-radius:9px; padding:5px 11px; font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:none; transition:.15s; } .repBtn:hover { color:var(--accent); border-color:var(--accent); } .repFrame { flex:1; border:none; width:100%; background:#fff; } /* ---------- באנר עדכון גרסה ---------- */ .updateBar { position:fixed; top:max(14px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:110; display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--accent); border-radius:999px; padding:9px 10px 9px 18px; font-size:13px; font-weight:600; color:var(--text); box-shadow:var(--shadow-panel); animation:toastIn .3s ease; } .updateBar button { background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#fff; border:none; border-radius:999px; padding:7px 18px; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:filter .15s; } .updateBar button:hover { filter:brightness(1.08); } /* ============================================ קמפי 2.0: היום עם קמפי */ .todayPanel { margin:14px auto 6px; max-width:640px; width:100%; background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:14px 16px; box-shadow:var(--shadow-card); } .todayHead { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .todayTitle { font-size:16px; font-weight:800; color:var(--heading); } .todayRefresh { border:1px solid var(--card-border); background:transparent; cursor:pointer; border-radius:999px; padding:4px 10px; font-size:14px; transition:.15s; } .todayRefresh:hover { background:var(--card-icon-bg); border-color:var(--accent); } .todayBody { display:flex; flex-direction:column; gap:10px; } .todaySkel, .todayEmpty { color:var(--text-2); font-size:13.5px; text-align:center; padding:12px 0; } .todayEmpty { font-weight:600; } /* סריקה שנכשלה: אזהרה כתומה במקום "הכל בריא" שקרי */ .todayWarn { background:rgba(255,180,84,.12); border:1px solid rgba(255,180,84,.35); border-radius:10px; padding:9px 12px; font-size:13px; margin-bottom:8px; } .todaySub { font-size:12px; color:var(--text-3); margin-top:2px; } /* חוזה הצלחה (קמפי 3.0) - מצב היעד העסקי בראש "היום" */ .todayContract { border:1px solid var(--card-border); border-radius:14px; padding:10px 12px; background:var(--input-bg); border-inline-start:4px solid var(--accent); } .todayContract .tcTitle { font-weight:700; font-size:13.5px; margin-bottom:4px; } .todayContract .tcBody { font-size:13px; color:var(--text-2); line-height:1.5; } /* כרטיס סיגנל */ .sigCard { border:1px solid var(--card-border); border-radius:14px; padding:10px 12px; background:var(--input-bg); border-inline-start:4px solid var(--accent); } .sigCard.sev1 { border-inline-start-color:#e05555; } .sigCard.sev2 { border-inline-start-color:#e09a3c; } .sigCard.sev3 { border-inline-start-color:#3da56f; } .sigHead { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--text); } .sigDetail { font-size:13px; color:var(--text-2); margin:5px 2px 8px; line-height:1.55; } .sigBtns { display:flex; flex-wrap:wrap; gap:7px; } .sigBtn { border:1px solid var(--card-border); background:var(--card); color:var(--text-2); border-radius:999px; padding:5px 12px; font-family:inherit; font-size:12.5px; cursor:pointer; transition:.15s; } .sigBtn:hover { border-color:var(--accent); color:var(--text); } .sigBtn.go { background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#fff; border:none; font-weight:700; box-shadow:var(--brand-shadow); } .sigBtn.go:hover { filter:brightness(1.08); } /* ============================================ קמפי 2.0: כרטיס הצעה */ .propCard { margin:10px auto; max-width:640px; width:100%; background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:13px 15px; box-shadow:var(--shadow-card); } .propCard.st-executed { opacity:.93; } .propCard.st-declined, .propCard.st-expired { opacity:.62; } .propHead { display:flex; align-items:center; gap:9px; } .propIcon { font-size:19px; } /* שמות ארוכים/URL לטיני בתוך RTL נשברים לשורה במקום לדחוף כפתורים או להזיז צ'קבוקס מהפריט שלו (ממצא G-6) */ .propTitle { font-weight:800; font-size:15px; color:var(--heading); flex:1; min-width:0; overflow-wrap:anywhere; } .propPill { font-size:11px; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap; } .pp-pend { background:var(--card-icon-bg); color:var(--accent-strong); } .pp-run { background:#f5edd8; color:#8a6d1a; } .pp-ok { background:#e2f3e8; color:#1f7a45; } .pp-warn { background:#fdeede; color:#a05c19; } .pp-err { background:#fbe3e3; color:#a12c2c; } .pp-off { background:var(--input-bg); color:var(--text-3); } [data-theme="dark"] .pp-run { background:#4a3f1f; color:#e8cd7a; } [data-theme="dark"] .pp-ok { background:#1d3f2b; color:#7fd8a3; } [data-theme="dark"] .pp-warn { background:#46331d; color:#eab875; } [data-theme="dark"] .pp-err { background:#4a2222; color:#f09c9c; } .propSummary { font-size:13px; color:var(--text-2); margin:7px 2px 4px; line-height:1.55; } .propItems { display:flex; flex-direction:column; gap:4px; margin:8px 0 2px; } .propItem { background:var(--input-bg); border:1px solid var(--card-border); border-radius:10px; padding:7px 10px; font-size:13px; } .propItem.ok { border-color:#3da56f55; } .propItem.bad { border-color:#e0555577; } .piTop { display:flex; justify-content:space-between; gap:10px; align-items:baseline; flex-wrap:wrap; } .piName { font-weight:600; color:var(--text); min-width:0; overflow-wrap:anywhere; } .piChange { color:var(--accent-strong); font-weight:700; white-space:nowrap; direction:ltr; max-width:100%; overflow-wrap:anywhere; } .piNote { font-size:11.5px; color:var(--text-3); margin-top:3px; } .piNote.bad { color:#c04747; } .propFin { font-size:12.5px; font-weight:700; color:var(--text-2); margin:7px 2px 0; } .propSteps { display:flex; flex-direction:column; gap:2px; margin-top:4px; } .propStep { font-size:12px; color:var(--text-3); } .propFoot { display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:8px; } .propAge { font-size:11.5px; color:var(--text-3); } .propBtns { display:flex; gap:8px; margin-inline-start:auto; } .propBtn { border-radius:999px; padding:7px 16px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:.15s; border:1px solid var(--card-border); background:var(--card); color:var(--text-2); } .propBtn.ok { background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#fff; border:none; box-shadow:var(--brand-shadow); } .propBtn.ok:hover { filter:brightness(1.08); } .propBtn.no:hover { border-color:#e05555; color:#c04747; } .propBtn.undo:hover { border-color:var(--accent); color:var(--text); } /* הודעה שממתינה לחיבור (תור אופליין) */ .msg.pendingSend { opacity:.55; } .msg.pendingSend::after { content:" ⏳"; font-size:12px; } /* קמפי 2.0 שלב 2: בחירה חלקית + כרטיס הפעלה */ .piCheck { accent-color:var(--accent); width:15px; height:15px; margin-inline-end:2px; cursor:pointer; flex:none; } .propCard.kActivation { border-color:#e09a3c88; border-width:2px; } .propCard.kActivation .propTitle { color:#a05c19; } [data-theme="dark"] .propCard.kActivation .propTitle { color:#eab875; } .propCard.kActivation .propBtn.ok { background:linear-gradient(135deg,#b26a12,#e09a3c); } /* מגש המשימות */ .jobsTray { max-width:420px; } .jobsBody { text-align:right; margin:10px 0 14px; display:flex; flex-direction:column; gap:6px; } .jobsLine { font-size:14px; color:var(--text); } .jobsSub { font-size:12.5px; color:var(--text-3); font-weight:700; margin-top:8px; } .jobsItem { font-size:13.5px; color:var(--text-2); background:var(--input-bg); border:1px solid var(--card-border); border-radius:9px; padding:6px 10px; } .jobsBadge { position:absolute; top:-4px; inset-inline-start:-4px; background:#e05555; color:#fff; font-size:10px; font-weight:800; border-radius:999px; min-width:15px; height:15px; display:flex; align-items:center; justify-content:center; padding:0 3px; } #jobsBtn { position:relative; } /* שורת הגנום בגלריה */ .genomeLine { background:var(--card-icon-bg); border:1px solid var(--card-border); border-radius:12px; padding:9px 14px; font-size:13px; font-weight:600; color:var(--accent-strong); margin-bottom:12px; } /* קמפי 2.0 שלב 6: ארבעת המרחבים */ .spacesBar { display:flex; justify-content:center; gap:8px; padding:8px 12px 2px; background:transparent; } .spaceBtn { display:flex; flex-direction:column; align-items:center; gap:1px; border:1px solid var(--card-border); background:var(--card); color:var(--text-2); border-radius:12px; padding:6px 16px; font-family:inherit; font-size:16px; cursor:pointer; transition:.15s; min-width:74px; } .spaceBtn span { font-size:11px; font-weight:700; } .spaceBtn:hover { border-color:var(--accent); color:var(--text); } .spaceBtn.active { background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#fff; border-color:transparent; box-shadow:var(--brand-shadow); } .spacePanel { max-width:560px; width:min(560px, 92vw); max-height:78vh; display:flex; flex-direction:column; text-align:right; } .spaceHead { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; } .spaceTitle { font-size:17px; font-weight:800; color:var(--heading); } .spaceClose { border:none; background:transparent; font-size:16px; cursor:pointer; color:var(--text-3); padding:4px 8px; border-radius:8px; } .spaceClose:hover { background:var(--card-icon-bg); color:var(--text); } .spaceBody { overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:2px; } .campRow { border:1px solid var(--card-border); border-radius:12px; padding:10px 12px; background:var(--input-bg); } .campTop { display:flex; align-items:center; gap:8px; } .campName { font-weight:700; font-size:14px; color:var(--text); flex:1; } .campStatus { font-size:10.5px; font-weight:800; border-radius:999px; padding:2px 9px; } .campStatus.on { background:#e2f3e8; color:#1f7a45; } .campStatus.off { background:var(--card-icon-bg); color:var(--text-3); } [data-theme="dark"] .campStatus.on { background:#1d3f2b; color:#7fd8a3; } .campMeta { font-size:12px; color:var(--text-3); margin:4px 2px; } .campBtns { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .createItem { display:flex; align-items:center; gap:12px; width:100%; border:1px solid var(--card-border); background:var(--input-bg); border-radius:12px; padding:12px 14px; cursor:pointer; font-family:inherit; text-align:right; transition:.15s; } .createItem:hover { border-color:var(--accent); background:var(--card); }