/** * SMS Segment Calculator Styles * Interactive tool for calculating SMS message segments and encoding */  .sms-calculator{display:flex;flex-direction:column;gap:var(--space-6, 1.5rem);}.sms-calculator__main{display:grid;grid-template-columns:1fr;gap:var(--space-6, 1.5rem);}@media (min-width:768px){.sms-calculator__main{grid-template-columns:1fr 300px;}} .sms-input-section{display:flex;flex-direction:column;gap:var(--space-4, 1rem);}.sms-textarea{width:100%;min-height:200px;padding:var(--space-4, 1rem);font-family:inherit;font-size:1rem;line-height:1.5;border:2px solid var(--color-border, #e5e7eb);border-radius:var(--radius-lg, 8px);resize:vertical;transition:border-color 0.15s ease, box-shadow 0.15s ease;}.sms-textarea:focus{outline:none;border-color:var(--color-primary, #3b82f6);box-shadow:0 0 0 3px rgba(59, 130, 246, 0.15);}.sms-textarea::placeholder{color:var(--color-text-muted, #9ca3af);} .sms-encoding-selector{display:flex;flex-wrap:wrap;gap:var(--space-2, 0.5rem);padding:var(--space-3, 0.75rem);background:var(--color-bg-subtle, #f9fafb);border-radius:var(--radius-md, 6px);}.sms-encoding-selector__label{font-size:0.875rem;font-weight:500;color:var(--color-text-secondary, #6b7280);margin-right:var(--space-2, 0.5rem);}.sms-encoding-option{display:none;}.sms-encoding-option + label{display:inline-flex;align-items:center;padding:var(--space-2, 0.5rem) var(--space-3, 0.75rem);font-size:0.875rem;color:var(--color-text-secondary, #6b7280);background:var(--color-bg, white);border:1px solid var(--color-border, #e5e7eb);border-radius:var(--radius-md, 6px);cursor:pointer;transition:all 0.15s ease;}.sms-encoding-option + label:hover{border-color:var(--color-primary, #3b82f6);color:var(--color-primary, #3b82f6);}.sms-encoding-option:checked + label{background:var(--color-primary, #3b82f6);border-color:var(--color-primary, #3b82f6);color:white;} .sms-stats-panel{display:flex;flex-direction:column;gap:var(--space-3, 0.75rem);padding:var(--space-4, 1rem);background:var(--color-bg, white);border:1px solid var(--color-border, #e5e7eb);border-radius:var(--radius-lg, 8px);box-shadow:var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));}.sms-stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2, 0.5rem);padding:var(--space-2, 0.5rem) 0;border-bottom:1px solid var(--color-border-light, #f3f4f6);}.sms-stat:last-of-type{border-bottom:none;}.sms-stat--primary{padding:var(--space-3, 0.75rem);background:var(--color-primary-light, #eff6ff);border-radius:var(--radius-md, 6px);border-bottom:none;}.sms-stat--primary .sms-stat__value{font-size:2rem;color:var(--color-primary, #3b82f6);}.sms-stat__label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted, #9ca3af);flex-shrink:0;}.sms-stat__value{font-size:1.25rem;font-weight:700;color:var(--color-text, #111827);}.sms-stat__value--small{font-size:0.875rem;font-weight:600;}.sms-stat__note{font-size:0.75rem;color:var(--color-text-muted, #9ca3af);} .sms-encoding-reason{display:flex;align-items:flex-start;gap:var(--space-2, 0.5rem);padding:var(--space-3, 0.75rem);background:var(--color-bg-subtle, #f9fafb);border-radius:var(--radius-md, 6px);font-size:0.875rem;color:var(--color-text-secondary, #6b7280);}.sms-encoding-reason__icon{flex-shrink:0;font-size:1rem;}.sms-encoding-reason__text{line-height:1.4;} .sms-analysis-section{display:flex;flex-direction:column;gap:var(--space-4, 1rem);}.sms-section-title{font-size:0.875rem;font-weight:600;color:var(--color-text-secondary, #6b7280);margin:0;padding-bottom:var(--space-2, 0.5rem);border-bottom:1px solid var(--color-border, #e5e7eb);} .sms-characters{display:flex;flex-wrap:wrap;gap:2px;padding:var(--space-3, 0.75rem);background:var(--color-bg-subtle, #f9fafb);border-radius:var(--radius-md, 6px);min-height:60px;}.sms-char{display:inline-flex;align-items:center;justify-content:center;position:relative;min-width:24px;height:28px;padding:2px 4px;font-family:'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;font-size:0.875rem;border:1px solid;border-radius:var(--radius-sm, 4px);cursor:default;transition:transform 0.1s ease, opacity 0.15s ease;}.sms-char:hover{transform:scale(1.15);z-index:1;}.sms-char--highlighted{transform:scale(1.1);box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);z-index:1;}.sms-char--dimmed{opacity:0.3;}.sms-char__cost{position:absolute;top:-6px;right:-6px;font-size:0.625rem;font-weight:700;padding:1px 3px;background:var(--color-warning, #f59e0b);color:white;border-radius:var(--radius-sm, 4px);} .sms-segments{display:flex;flex-direction:column;gap:var(--space-3, 0.75rem);}.sms-segment{padding:var(--space-3, 0.75rem);background:var(--color-bg, white);border:2px solid var(--segment-color, #3b82f6);border-radius:var(--radius-md, 6px);transition:transform 0.15s ease, box-shadow 0.15s ease;}.sms-segment--highlighted{transform:translateX(4px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);}.sms-segment__header{display:flex;align-items:center;gap:var(--space-2, 0.5rem);margin-bottom:var(--space-2, 0.5rem);}.sms-segment__label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--segment-color, #3b82f6);}.sms-segment__udh{font-size:0.625rem;font-weight:700;padding:2px 4px;background:var(--color-warning-light, #fef3c7);color:var(--color-warning-dark, #92400e);border-radius:var(--radius-sm, 4px);}.sms-segment__count{margin-left:auto;font-size:0.875rem;font-weight:600;color:var(--color-text-secondary, #6b7280);}.sms-segment__bar{height:6px;background:var(--color-bg-subtle, #f3f4f6);border-radius:3px;overflow:hidden;margin-bottom:var(--space-2, 0.5rem);}.sms-segment__fill{height:100%;border-radius:3px;transition:width 0.3s ease;}.sms-segment__preview{font-family:'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;font-size:0.75rem;color:var(--color-text-secondary, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:2.4em;line-height:1.2;} .sms-legend{display:flex;flex-wrap:wrap;gap:var(--space-3, 0.75rem);padding:var(--space-3, 0.75rem);background:var(--color-bg-subtle, #f9fafb);border-radius:var(--radius-md, 6px);}.sms-legend__item{display:flex;align-items:center;gap:var(--space-2, 0.5rem);}.sms-legend__swatch{width:16px;height:16px;border:1px solid;border-radius:var(--radius-sm, 4px);}.sms-legend__label{font-size:0.75rem;font-weight:600;color:var(--color-text, #111827);}.sms-legend__desc{font-size:0.75rem;color:var(--color-text-muted, #9ca3af);} .sms-reference{margin-top:var(--space-6, 1.5rem);}.sms-reference__table{width:100%;border-collapse:collapse;font-size:0.875rem;}.sms-reference__table th, .sms-reference__table td{padding:var(--space-3, 0.75rem);text-align:left;border-bottom:1px solid var(--color-border, #e5e7eb);}.sms-reference__table th{font-weight:600;color:var(--color-text-secondary, #6b7280);background:var(--color-bg-subtle, #f9fafb);}.sms-reference__table td{color:var(--color-text, #111827);}.sms-reference__table tr:last-child td{border-bottom:none;} .sms-extended-chars{display:flex;flex-wrap:wrap;gap:var(--space-2, 0.5rem);padding:var(--space-3, 0.75rem);background:var(--color-bg-subtle, #f9fafb);border-radius:var(--radius-md, 6px);}.sms-extended-char{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;font-family:'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;font-size:1rem;background:#fef9c3;border:1px solid #ca8a04;border-radius:var(--radius-sm, 4px);color:#854d0e;} .sms-placeholder{padding:var(--space-4, 1rem);text-align:center;color:var(--color-text-muted, #9ca3af);font-style:italic;} [data-theme="dark"] .sms-textarea{background:var(--color-bg, #1f2937);border-color:var(--color-border, #374151);color:var(--color-text, #f9fafb);}[data-theme="dark"] .sms-stats-panel{background:var(--color-bg, #1f2937);border-color:var(--color-border, #374151);}[data-theme="dark"] .sms-stat--primary{background:rgba(59, 130, 246, 0.15);}[data-theme="dark"] .sms-characters, [data-theme="dark"] .sms-legend, [data-theme="dark"] .sms-encoding-selector, [data-theme="dark"] .sms-encoding-reason{background:var(--color-bg-subtle, #111827);}[data-theme="dark"] .sms-segment{background:var(--color-bg, #1f2937);}[data-theme="dark"] .sms-segment__bar{background:var(--color-bg-subtle, #374151);}[data-theme="dark"] .sms-reference__table th{background:var(--color-bg-subtle, #111827);} @media (max-width:640px){.sms-encoding-selector{flex-direction:column;}.sms-encoding-option + label{width:100%;justify-content:center;}.sms-stat--primary .sms-stat__value{font-size:1.5rem;}.sms-legend{flex-direction:column;}}